Merge ticket/015-json-field-param-metric-declaration

Resolves conflicts with ticket 018 (boolean param kind) in
src/engine.rs, webapp/src/lib/api.ts, and Params.tsx: boolean-kind
params and JSON-field-path extraction now coexist as independent
extraction modes alongside regex capture groups.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XFUNZwCvz3kcod3352ZR2o

webapp/src/components/Params.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { ApiError, declareParam, type ParamDeclaration } from '../lib/api'
 import {
   CollapseToggle,
@@ -12,16 +12,38 @@ import { HelpIcon } from './HelpIcon'
 
 const EMPTY_KIND: ParamDeclaration['kind'] = 'string'
 
+type ExtractionSource = 'regex' | 'json_field'
+
+/// A JSON *object* (not an array/scalar) parses cleanly and pretty-prints with braces — the same
+/// shape a JSON field path can be read from, so this is the "line looks like JSON" gate that
+/// unlocks the "JSON field" extraction option.
+function looksLikeJsonObject(text: string): boolean {
+  const trimmed = text.trim()
+  if (!trimmed.startsWith('{')) return false
+  try {
+    const parsed = JSON.parse(trimmed)
+    return typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)
+  } catch {
+    return false
+  }
+}
+
 export function Params({ params, onDeclared }: { params: ParamDeclaration[]; onDeclared: () => void }) {
   const [name, setName] = useState('')
   const [regex, setRegex] = useState('')
   const [captureGroup, setCaptureGroup] = useState('')
+  const [jsonFieldPath, setJsonFieldPath] = useState('')
+  const [source, setSource] = useState<ExtractionSource>('regex')
   const [kind, setKind] = useState<ParamDeclaration['kind']>(EMPTY_KIND)
   const [submitError, setSubmitError] = useState<string | null>(null)
   const [submitting, setSubmitting] = useState(false)
   const [collapsed, setCollapsed] = useSectionCollapsed('params')
 
   const isBoolean = kind === 'boolean'
+  // The message match regex doubles as a sample line here so a pasted JSON log line unlocks the
+  // "JSON field" extraction option — regex-based params are unaffected either way.
+  const detectedJson = useMemo(() => looksLikeJsonObject(regex), [regex])
+  const effectiveSource: ExtractionSource = detectedJson && !isBoolean ? source : 'regex'
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
@@ -29,10 +51,18 @@ export function Params({ params, onDeclared }: { params: ParamDeclaration[]; onD
     setSubmitting(true)
     try {
       // A boolean-kind param never uses a capture group — its value is just whether the regex matched.
-      await declareParam({ name, message_match_regex: regex, capture_group: isBoolean ? '' : captureGroup, kind })
+      await declareParam({
+        name,
+        message_match_regex: regex,
+        capture_group: isBoolean || effectiveSource === 'json_field' ? '' : captureGroup,
+        json_field_path: effectiveSource === 'json_field' ? jsonFieldPath : null,
+        kind,
+      })
       setName('')
       setRegex('')
       setCaptureGroup('')
+      setJsonFieldPath('')
+      setSource('regex')
       setKind(EMPTY_KIND)
       onDeclared()
     } catch (err) {
@@ -83,32 +113,70 @@ export function Params({ params, onDeclared }: { params: ParamDeclaration[]; onD
               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{isBoolean && ' (unused for boolean)'}
-              </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 disabled:opacity-50"
-                value={captureGroup}
-                onChange={(e) => setCaptureGroup(e.target.value)}
-                placeholder="path"
-                required={!isBoolean}
-                disabled={isBoolean}
-              />
+          {detectedJson && !isBoolean && (
+            <div>
+              <label className="mb-1 block text-xs text-text-subtle">Extraction</label>
+              <select
+                className="w-full rounded border border-border-soft bg-surface-1 px-2 py-1 text-xs text-text focus:border-border-strong focus:outline-none"
+                value={source}
+                onChange={(e) => setSource(e.target.value as ExtractionSource)}
+              >
+                <option value="regex">Regex capture group</option>
+                <option value="json_field">JSON field</option>
+              </select>
             </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>
-              <option value="boolean">boolean</option>
-            </select>
-          </div>
+          )}
+          {effectiveSource === 'json_field' ? (
+            <div className="flex items-end gap-1">
+              <div className="min-w-0 flex-1">
+                <label className="mb-1 block text-xs text-text-subtle">JSON field path</label>
+                <input
+                  className="w-full min-w-0 rounded border border-border-soft bg-surface-1 px-1.5 py-1 font-mono text-xs text-text placeholder:text-text-subtle focus:border-border-strong focus:outline-none"
+                  value={jsonFieldPath}
+                  onChange={(e) => setJsonFieldPath(e.target.value)}
+                  placeholder="foo.bar"
+                  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>
+          ) : (
+            <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{isBoolean && ' (unused for boolean)'}
+                </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 disabled:opacity-50"
+                  value={captureGroup}
+                  onChange={(e) => setCaptureGroup(e.target.value)}
+                  placeholder="path"
+                  required={!isBoolean}
+                  disabled={isBoolean}
+                />
+              </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>
+                <option value="boolean">boolean</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"
@@ -129,7 +197,11 @@ export function Params({ params, onDeclared }: { params: ParamDeclaration[]; onD
                 className="rounded border border-border-soft px-2 py-1 text-xs text-text-secondary"
                 title={p.message_match_regex}
               >
-                {p.name} ({p.kind}{p.kind === 'boolean' ? '' : `, group ${p.capture_group}`})
+                {p.name} ({p.kind}
+                {p.kind === 'boolean'
+                  ? ''
+                  : `, ${p.json_field_path ? `json field ${p.json_field_path}` : `group ${p.capture_group}`}`}
+                )
               </span>
             ))}
           </div>

webapp/src/lib/api.ts

@@ -27,6 +27,8 @@ export interface ParamDeclaration {
   name: string
   message_match_regex: string
   capture_group: string
+  /** Alternative to `capture_group`: a dot-separated JSON field path (e.g. "foo.bar"), read from lines that parse as a JSON object. When set (non-empty), takes precedence over `capture_group`. */
+  json_field_path?: string | null
   kind: 'string' | 'number' | 'timestamp' | 'duration' | 'boolean'
 }
 
@@ -50,6 +52,8 @@ export type ParamRole = 'label' | 'value'
 export interface MetricParamMatcher {
   param_name: string
   capture_group: string
+  /** See `ParamDeclaration.json_field_path`. */
+  json_field_path?: string | null
   kind: 'string' | 'number' | 'timestamp' | 'duration'
   /** Defaults to 'label' server-side when omitted. */
   role?: ParamRole