feat(pii): model-editor pattern/builtins editor + Traces row

Add the React UI for the pattern detector tier:

- PatternListEditor: add/remove rows of {name, match, action, min_len}
  with a monospace match input and a restricted-grammar hint. Server-side
  Validate is authoritative, so no regex engine ships to the client.
- ConfigFieldRenderer: two branches keyed on field.component —
  pii-builtins-select (checkbox list of built-in secret patterns) and
  pii-pattern-list (PatternListEditor).
- Traces: distinct badge colors for the pattern_pii and token_classify
  backend trace types.
- e2e: built-in checklist + custom pattern-list editor specs.

Assisted-by: claude-code:claude-opus-4-8 [Claude Code]

Author: richiejp

core/http/react-ui/e2e/model-config.spec.js

@@ -12,6 +12,8 @@ const MOCK_METADATA = {
     { path: 'cuda', yaml_key: 'cuda', go_type: 'bool', ui_type: 'bool', section: 'general', label: 'CUDA', description: 'Enable CUDA GPU acceleration', component: 'toggle', order: 30 },
     { path: 'parameters.temperature', yaml_key: 'temperature', go_type: '*float64', ui_type: 'float', section: 'parameters', label: 'Temperature', description: 'Sampling temperature', component: 'slider', min: 0, max: 2, step: 0.1, order: 0 },
     { path: 'parameters.top_p', yaml_key: 'top_p', go_type: '*float64', ui_type: 'float', section: 'parameters', label: 'Top P', description: 'Nucleus sampling threshold', component: 'slider', min: 0, max: 1, step: 0.05, order: 10 },
+    { path: 'pii_detection.builtins', yaml_key: 'builtins', go_type: '[]string', ui_type: '[]string', section: 'general', label: 'Built-in Secret Patterns', description: 'Built-in credential patterns', component: 'pii-builtins-select', options: [{ value: 'anthropic_api_key', label: 'anthropic_api_key — Anthropic API key' }, { value: 'github_token', label: 'github_token — GitHub token' }], order: 213 },
+    { path: 'pii_detection.patterns', yaml_key: 'patterns', go_type: '[]config.PIIPattern', ui_type: 'object', section: 'general', label: 'Custom Secret Patterns', description: 'Operator-defined restricted-regex patterns', component: 'pii-pattern-list', order: 214 },
   ],
 }
 
@@ -258,4 +260,31 @@ test.describe('Model Editor - Interactive Tab', () => {
     await expect(page.locator('nav').first()).toBeVisible()
   })
 
+  test('built-in secret patterns render as a checklist from field options', async ({ page }) => {
+    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
+    await searchInput.fill('Built-in Secret Patterns')
+    const dropdown = searchInput.locator('..').locator('..')
+    await dropdown.locator('div', { hasText: 'Built-in Secret Patterns' }).first().click()
+
+    // One checkbox per catalogue option; toggling one enables Save.
+    const anthropic = page.locator('label', { hasText: 'Anthropic API key' }).locator('input[type="checkbox"]')
+    await expect(anthropic).toHaveCount(1)
+    await anthropic.check()
+    await expect(anthropic).toBeChecked()
+  })
+
+  test('custom secret patterns render the pattern-list editor', async ({ page }) => {
+    const searchInput = page.locator('input[placeholder="Search fields to add..."]')
+    await searchInput.fill('Custom Secret Patterns')
+    const dropdown = searchInput.locator('..').locator('..')
+    await dropdown.locator('div', { hasText: 'Custom Secret Patterns' }).first().click()
+
+    // Empty state + an Add button; adding a row shows the name + match inputs.
+    const addBtn = page.locator('button', { hasText: 'Add pattern' })
+    await expect(addBtn).toBeVisible()
+    await addBtn.click()
+    await expect(page.locator('input[placeholder^="Name (group)"]')).toBeVisible()
+    await expect(page.locator('input[placeholder^="match,"]')).toBeVisible()
+  })
+
 })

core/http/react-ui/src/components/ConfigFieldRenderer.jsx

@@ -7,6 +7,7 @@ import AutocompleteInput from './AutocompleteInput'
 import CodeEditor from './CodeEditor'
 import StructuredCodeEditor from './StructuredCodeEditor'
 import EntityActionListEditor from './EntityActionListEditor'
+import PatternListEditor from './PatternListEditor'
 import ModelMultiSelect from './ModelMultiSelect'
 import RouterCandidatesEditor from './RouterCandidatesEditor'
 import RouterPoliciesEditor from './RouterPoliciesEditor'
@@ -430,6 +431,45 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
     )
   }
 
+  // PII built-in secret patterns — a checklist of named built-in patterns
+  // (pii_detection.builtins). value is an array of selected names.
+  if (component === 'pii-builtins-select') {
+    const selected = Array.isArray(value) ? value : []
+    const toggle = (name) => {
+      handleChange(selected.includes(name) ? selected.filter(n => n !== name) : [...selected, name])
+    }
+    return (
+      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
+        <div style={{ marginBottom: 4 }}>
+          <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
+          <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+          {(field.options || []).map(opt => (
+            <label key={opt.value} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.8125rem', cursor: 'pointer' }}>
+              <input type="checkbox" checked={selected.includes(opt.value)} onChange={() => toggle(opt.value)} />
+              {opt.label || opt.value}
+            </label>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  // PII custom secret patterns — operator-defined restricted-regex rules
+  // (pii_detection.patterns). value is an array of {name, match, action, min_len}.
+  if (component === 'pii-pattern-list') {
+    return (
+      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
+        <div style={{ marginBottom: 4 }}>
+          <div style={{ fontSize: '0.875rem', fontWeight: 500 }}><FieldLabel field={field} /></div>
+          <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
+        </div>
+        <PatternListEditor value={value} onChange={handleChange} />
+      </div>
+    )
+  }
+
   // Map editor
   if (component === 'map-editor') {
     return (

core/http/react-ui/src/components/PatternListEditor.jsx

@@ -0,0 +1,96 @@
+import { useMemo } from 'react'
+import SearchableSelect from './SearchableSelect'
+
+// Editor for a pattern detector's pii_detection.patterns: a list of
+// operator-defined secret patterns. Value is an array of
+// { name, match, action?, min_len? }; this renders one row per pattern and
+// emits a fresh array on every change. Patterns use a restricted regex subset
+// validated server-side at save (an invalid pattern surfaces as the save
+// error), so no regex engine is shipped to the client.
+
+const ACTION_OPTIONS = [
+  { value: '', label: 'default (use Default Action)' },
+  { value: 'mask', label: 'mask — replace the span' },
+  { value: 'block', label: 'block — reject the request' },
+  { value: 'allow', label: 'allow — detect & log only' },
+]
+
+function emptyPattern() {
+  return { name: '', match: '', action: '', min_len: 0 }
+}
+
+export default function PatternListEditor({ value, onChange }) {
+  const rows = useMemo(() => (Array.isArray(value) ? value : []), [value])
+
+  const update = (index, patch) => {
+    onChange(rows.map((r, i) => (i === index ? { ...r, ...patch } : r)))
+  }
+  const remove = (index) => onChange(rows.filter((_, i) => i !== index))
+  const add = () => onChange([...rows, emptyPattern()])
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }}>
+      <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+        Restricted regex: literals, <code>[…]</code> classes, <code>\w \d \s</code>, <code>?*+{'{m,n}'}</code>, anchors.
+        Each pattern must contain a fixed literal run of ≥3 characters (e.g. <code>sk-prefix-</code>);
+        <code>.</code> and capturing groups are not allowed. Matches report under the pattern name.
+      </div>
+
+      {rows.length === 0 && (
+        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+          No custom patterns. Enable built-ins above, or add a pattern for an internal credential
+          format (e.g. <code>tok-[A-Za-z0-9]{'{32,64}'}</code>).
+        </div>
+      )}
+
+      {rows.map((r, i) => (
+        <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
+          <input
+            className="input"
+            value={r.name || ''}
+            placeholder="Name (group), e.g. INTERNAL_TOKEN"
+            onChange={e => update(i, { name: e.target.value })}
+            style={{ flex: '1 1 180px', minWidth: 150, fontSize: '0.8125rem' }}
+            aria-label="Pattern name"
+          />
+          <input
+            className="input input-mono"
+            value={r.match || ''}
+            placeholder="match, e.g. tok-[A-Za-z0-9]{32,64}"
+            onChange={e => update(i, { match: e.target.value })}
+            style={{ flex: '2 1 240px', minWidth: 200, fontSize: '0.8125rem', fontFamily: 'var(--font-mono)' }}
+            aria-label="Pattern match"
+          />
+          <SearchableSelect
+            value={r.action || ''}
+            onChange={v => update(i, { action: v })}
+            options={ACTION_OPTIONS}
+            placeholder="Action..."
+            style={{ flex: '1 1 200px', minWidth: 180 }}
+          />
+          <input
+            className="input"
+            type="number"
+            min={0}
+            value={r.min_len || 0}
+            title="Minimum match length (0 = no floor)"
+            onChange={e => update(i, { min_len: parseInt(e.target.value, 10) || 0 })}
+            style={{ width: 80, fontSize: '0.8125rem' }}
+            aria-label="Minimum length"
+          />
+          <button type="button" className="btn btn-secondary btn-sm"
+            onClick={() => remove(i)}
+            style={{ padding: '2px 8px', fontSize: '0.75rem' }}
+            aria-label="Remove pattern">
+            <i className="fas fa-times" />
+          </button>
+        </div>
+      ))}
+
+      <button type="button" className="btn btn-secondary btn-sm" onClick={add}
+        style={{ alignSelf: 'flex-start', fontSize: '0.75rem' }}>
+        <i className="fas fa-plus" /> Add pattern
+      </button>
+    </div>
+  )
+}

core/http/react-ui/src/pages/Traces.jsx

@@ -75,6 +75,8 @@ const TYPE_COLORS = {
   detection: { bg: 'var(--color-info-light)', color: 'var(--color-data-8)' },
   model_load: { bg: 'var(--color-error-light)', color: 'var(--color-data-2)' },
   vector_store: { bg: 'var(--color-accent-light)', color: 'var(--color-data-7)' },
+  token_classify: { bg: 'var(--color-info-light)', color: 'var(--color-data-3)' },
+  pattern_pii: { bg: 'var(--color-error-light)', color: 'var(--color-data-2)' },
 }
 
 function typeBadgeStyle(type) {