ottyl/webapp/src/components/Params.tsx

import { useState } from 'react'
import { ApiError, declareParam, type ParamDeclaration } from '../lib/api'
import { HelpIcon } from './HelpIcon'

const EMPTY_KIND: ParamDeclaration['kind'] = 'string'

export function Params({ params, onDeclared }: { params: ParamDeclaration[]; onDeclared: () => void }) {
  const [name, setName] = useState('')
  const [regex, setRegex] = useState('')
  const [captureGroup, setCaptureGroup] = useState('')
  const [kind, setKind] = useState<ParamDeclaration['kind']>(EMPTY_KIND)
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [submitting, setSubmitting] = useState(false)

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    setSubmitError(null)
    setSubmitting(true)
    try {
      await declareParam({ name, message_match_regex: regex, capture_group: captureGroup, kind })
      setName('')
      setRegex('')
      setCaptureGroup('')
      setKind(EMPTY_KIND)
      onDeclared()
    } catch (err) {
      setSubmitError(err instanceof ApiError ? err.message : 'Failed to declare param')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="border-b border-border p-3 text-sm">
      <div className="mb-2 flex items-center gap-1.5 text-xs text-text-subtle">
        Params
        <HelpIcon sectionId="parameters" label="Help: Params" />
      </div>
      <div className="flex gap-4">
        <form onSubmit={handleSubmit} className="w-80 shrink-0 space-y-2">
          <div>
            <label className="mb-1 block text-xs text-text-subtle">Name</label>
            <input
              className="w-full rounded border border-border-soft bg-surface-1 px-2 py-1 text-sm text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="path"
              required
            />
          </div>
          <div>
            <label className="mb-1 block text-xs text-text-subtle">Message match regex</label>
            <input
              className="w-full rounded border border-border-soft bg-surface-1 px-2 py-1 font-mono text-sm text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
              value={regex}
              onChange={(e) => setRegex(e.target.value)}
              placeholder={String.raw`request path=(?P<path>\S+)`}
              required
            />
          </div>
          <div className="flex items-end gap-1">
            <div className="min-w-0 flex-1">
              <label className="mb-1 block text-xs text-text-subtle">Capture group</label>
              <input
                className="w-full min-w-0 rounded border border-border-soft bg-surface-1 px-1.5 py-1 text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
                value={captureGroup}
                onChange={(e) => setCaptureGroup(e.target.value)}
                placeholder="path"
                required
              />
            </div>
            <select
              className="rounded border border-border-soft bg-surface-1 px-1 py-1 text-xs text-text focus:border-border-strong focus:outline-none"
              value={kind}
              onChange={(e) => setKind(e.target.value as ParamDeclaration['kind'])}
            >
              <option value="string">string</option>
              <option value="number">number</option>
              <option value="timestamp">timestamp</option>
              <option value="duration">duration</option>
            </select>
          </div>
          {submitError && <div className="rounded border border-danger-border bg-danger-bg/50 px-2 py-1 text-xs text-danger-text">{submitError}</div>}
          <button
            type="submit"
            disabled={submitting}
            className="rounded border border-border-soft px-3 py-1 text-sm text-text-secondary hover:bg-surface-2 disabled:opacity-50"
          >
            {submitting ? 'Declaring…' : 'Declare param'}
          </button>
        </form>

        <div className="min-w-0 flex-1">
          <div className="mb-1 text-xs text-text-subtle">Declared params</div>
          <div className="flex flex-wrap gap-1">
            {params.length === 0 && <span className="text-xs text-text-faint">No params declared yet.</span>}
            {params.map((p) => (
              <span
                key={p.name}
                className="rounded border border-border-soft px-2 py-1 text-xs text-text-secondary"
                title={p.message_match_regex}
              >
                {p.name} ({p.kind}, group {p.capture_group})
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}