feat(ui): NER-centric PII editor; drop the regex pattern UI

React UI side of the PII redesign.

- New EntityActionListEditor (entity group → mask|block|allow map editor
  for a detector model's pii_detection.entity_actions, with a datalist of
  common categories) and ModelMultiSelect (capability-filtered detector
  picker for a consumer's pii.detectors).
- ConfigFieldRenderer: dispatch `entity-action-list` + `model-multi-select`;
  map `models:token_classify` → FLAG_TOKEN_CLASSIFY; drop `pii-pattern-list`.
- capabilities.js: CAP_TOKEN_CLASSIFY.
- Middleware page: remove the pattern catalogue, the per-pattern action
  editor, and the "Save to disk" persist flow; the per-model table now
  shows the NER detectors each config references. Removed the dead
  pattern-mutation state/handlers.
- modelTemplates: MITM template seeds pii.detectors instead of pii.patterns.
- Deleted PIIPatternListEditor.
- e2e/middleware-page.spec: fixture + tests updated for the detector model;
  removed the PUT /api/pii/patterns test.

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

Author: richiejp

core/http/react-ui/e2e/middleware-page.spec.js

@@ -1,22 +1,17 @@
 import { test, expect } from '@playwright/test'
 
-// Mocked fixture covering the three things the page renders:
-//   - PII pattern catalogue (action badges, action-change buttons)
-//   - Per-model resolved PII state (one with default off, one with proxy default on, one with explicit YAML)
+// Mocked fixture covering the things the page renders:
+//   - Per-model resolved PII state + the NER detectors each references
+//     (one with default off, one with proxy default on, one explicit YAML)
 //   - Recent events feed (the page must NEVER show the redacted content)
 const MOCK_STATUS = {
   pii: {
     enabled_globally: true,
     default_enabled_for_backends: ['cloud-proxy'],
-    patterns: [
-      { id: 'email', description: 'Email addresses', action: 'mask', max_match_length: 254 },
-      { id: 'ssn', description: 'US Social Security Numbers', action: 'mask', max_match_length: 11 },
-      { id: 'api_key_prefix', description: 'API key prefixes', action: 'block', max_match_length: 200 },
-    ],
     models: [
-      { name: 'qwen-7b', backend: 'llama-cpp', enabled: false, explicit: false, default_for_backend: false, overrides: null },
-      { name: 'claude-sonnet', backend: 'cloud-proxy', enabled: true, explicit: false, default_for_backend: true, overrides: null },
-      { name: 'claude-strict', backend: 'cloud-proxy', enabled: true, explicit: true, default_for_backend: true, overrides: { ssn: 'block' } },
+      { name: 'qwen-7b', backend: 'llama-cpp', enabled: false, explicit: false, default_for_backend: false, detectors: null },
+      { name: 'claude-sonnet', backend: 'cloud-proxy', enabled: true, explicit: false, default_for_backend: true, detectors: null },
+      { name: 'claude-strict', backend: 'cloud-proxy', enabled: true, explicit: true, default_for_backend: true, detectors: ['privacy-filter-multilingual'] },
     ],
     recent_event_count: 2,
   },
@@ -116,17 +111,16 @@ test.describe('Middleware page — admin in no-auth mode', () => {
     )
   })
 
-  test('Filtering tab renders pattern catalogue and per-model state', async ({ page }) => {
+  test('Filtering tab renders per-model state and referenced detectors', async ({ page }) => {
     await page.goto('/app/middleware')
 
-    // Pattern table — at least one pattern id visible.
-    await expect(page.getByText('email').first()).toBeVisible()
-    await expect(page.getByText('api_key_prefix').first()).toBeVisible()
-
     // Per-model state — each model's name is visible.
     await expect(page.getByText('qwen-7b').first()).toBeVisible()
     await expect(page.getByText('claude-strict').first()).toBeVisible()
 
+    // The detector a model references is shown in its row.
+    await expect(page.getByText('privacy-filter-multilingual').first()).toBeVisible()
+
     // Default-policy banner names the backends with PII on by default.
     await expect(page.getByText(/cloud-proxy/).first()).toBeVisible()
   })
@@ -265,25 +259,6 @@ test.describe('Middleware page — admin in no-auth mode', () => {
     await expect(page.getByText(/^proxy traffic$/i).first()).toBeVisible()
   })
 
-  test('PUT /api/pii/patterns/:id fires when an action button is clicked', async ({ page }) => {
-    let putHit = null
-    await page.route('**/api/pii/patterns/email', (route) => {
-      if (route.request().method() === 'PUT') {
-        putHit = JSON.parse(route.request().postData() || '{}')
-        route.fulfill({ contentType: 'application/json', body: JSON.stringify({ id: 'email', action: putHit.action, persisted: false }) })
-      } else {
-        route.continue()
-      }
-    })
-
-    await page.goto('/app/middleware')
-    // Click the email row's "block" button (currently mask, so block is
-    // enabled). Use a precise locator that matches the inner button.
-    const emailRow = page.locator('tr').filter({ hasText: 'email' }).first()
-    await emailRow.getByRole('button', { name: 'block' }).click()
-
-    await expect.poll(() => putHit).toEqual({ action: 'block' })
-  })
 })
 
 test.describe('Middleware page — non-admin under auth-on', () => {

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

@@ -6,7 +6,8 @@ import SearchableModelSelect from './SearchableModelSelect'
 import AutocompleteInput from './AutocompleteInput'
 import CodeEditor from './CodeEditor'
 import StructuredCodeEditor from './StructuredCodeEditor'
-import PIIPatternListEditor from './PIIPatternListEditor'
+import EntityActionListEditor from './EntityActionListEditor'
+import ModelMultiSelect from './ModelMultiSelect'
 import RouterCandidatesEditor from './RouterCandidatesEditor'
 import RouterPoliciesEditor from './RouterPoliciesEditor'
 
@@ -17,6 +18,7 @@ const PROVIDER_TO_CAPABILITY = {
   'models:transcript': 'FLAG_TRANSCRIPT',
   'models:vad': 'FLAG_VAD',
   'models:score': 'FLAG_SCORE',
+  'models:token_classify': 'FLAG_TOKEN_CLASSIFY',
 }
 
 function coerceValue(raw, uiType) {
@@ -395,10 +397,26 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
     )
   }
 
-  // PII pattern list — per-model action overrides for named patterns.
-  // The pattern catalog is loaded from /api/pii/patterns at render time
-  // so new built-in patterns surface automatically.
-  if (component === 'pii-pattern-list') {
+  // PII detectors — a capability-filtered multi-select of token_classify
+  // models (the consuming model's pii.detectors list).
+  if (component === 'model-multi-select') {
+    const cap = PROVIDER_TO_CAPABILITY[field.autocomplete_provider] || undefined
+    return (
+      <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
+          <div>
+            <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>
+        <ModelMultiSelect value={value} onChange={handleChange} capability={cap} placeholder={field.placeholder} />
+      </div>
+    )
+  }
+
+  // PII detection entity-action map — a detector model's
+  // pii_detection.entity_actions (entity group -> mask|block|allow).
+  if (component === 'entity-action-list') {
     return (
       <div style={{ padding: 'var(--spacing-sm) 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
@@ -407,7 +425,7 @@ export default function ConfigFieldRenderer({ field, value, onChange, onRemove,
             <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)', marginTop: 2 }}>{description}</div>
           </div>
         </div>
-        <PIIPatternListEditor value={value} onChange={handleChange} />
+        <EntityActionListEditor value={value} onChange={handleChange} />
       </div>
     )
   }

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

@@ -0,0 +1,98 @@
+import { useMemo } from 'react'
+import SearchableSelect from './SearchableSelect'
+
+// Editor for a detector model's pii_detection.entity_actions map:
+// entity-group name -> action. The value is an object {GROUP: action};
+// this component renders one row per entry and emits a fresh object on
+// every change. Entity-group names are model-defined (the privacy-filter
+// family emits uppercase names with no separators), so the group field is
+// free text with a datalist of common high-value categories for
+// convenience — any string the model emits is valid.
+
+const ACTION_OPTIONS = [
+  { value: 'mask', label: 'mask — replace with [REDACTED:ner:GROUP]' },
+  { value: 'block', label: 'block — reject the request (HTTP 400)' },
+  { value: 'allow', label: 'allow — detect & log, leave text unchanged' },
+]
+
+// Common categories surfaced as datalist hints. Not exhaustive and not
+// authoritative — the model's own label set is the source of truth.
+const COMMON_GROUPS = [
+  'PASSWORD', 'PIN', 'CVV', 'CREDITCARD', 'IBAN', 'BIC', 'BANKACCOUNT', 'SSN',
+  'BITCOINADDRESS', 'ETHEREUMADDRESS', 'LITECOINADDRESS',
+  'EMAIL', 'PHONE', 'URL', 'IPADDRESS', 'MACADDRESS',
+  'FIRSTNAME', 'LASTNAME', 'MIDDLENAME', 'USERNAME', 'DATEOFBIRTH',
+  'STREET', 'CITY', 'STATE', 'ZIPCODE', 'GPSCOORDINATES',
+]
+
+export default function EntityActionListEditor({ value, onChange }) {
+  // value is an object map; preserve insertion order via Object.entries.
+  const entries = useMemo(
+    () => (value && typeof value === 'object' && !Array.isArray(value) ? Object.entries(value) : []),
+    [value]
+  )
+
+  const datalistId = 'pii-entity-groups'
+
+  const update = (index, key, action) => {
+    const next = entries.map((e, i) => (i === index ? [key, action] : e))
+    onChange(Object.fromEntries(next.filter(([k]) => k !== '')))
+  }
+
+  const remove = (index) => {
+    onChange(Object.fromEntries(entries.filter((_, i) => i !== index)))
+  }
+
+  const add = () => {
+    // New rows default to mask; an empty key is tolerated transiently and
+    // filtered out on the next edit / when serialised.
+    onChange(Object.fromEntries([...entries, ['', 'mask']]))
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: '100%' }}>
+      <datalist id={datalistId}>
+        {COMMON_GROUPS.map(g => <option key={g} value={g} />)}
+      </datalist>
+
+      {entries.length === 0 && (
+        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+          No per-entity actions — every detected group uses the default action. Add a row to
+          block or allow-log a specific entity group (e.g. <code>PASSWORD</code> → block).
+        </div>
+      )}
+
+      {entries.map(([group, action], i) => (
+        <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
+          <input
+            className="input"
+            list={datalistId}
+            value={group}
+            placeholder="Entity group (e.g. PASSWORD)"
+            onChange={e => update(i, e.target.value, action)}
+            style={{ flex: '1 1 220px', minWidth: 180, fontSize: '0.8125rem' }}
+            aria-label="Entity group"
+          />
+          <SearchableSelect
+            value={action || 'mask'}
+            onChange={v => update(i, group, v)}
+            options={ACTION_OPTIONS}
+            placeholder="Action..."
+            style={{ flex: '1 1 240px', minWidth: 220 }}
+          />
+          <button type="button" className="btn btn-secondary btn-sm"
+            onClick={() => remove(i)}
+            style={{ padding: '2px 8px', fontSize: '0.75rem' }}
+            aria-label="Remove entity action">
+            <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 entity action
+      </button>
+    </div>
+  )
+}

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

@@ -0,0 +1,56 @@
+import SearchableModelSelect from './SearchableModelSelect'
+
+// Editor for a list of model names (value is []string), each chosen via a
+// capability-filtered SearchableModelSelect. Used for pii.detectors, where
+// every entry must be a token_classify model. Already-selected models are
+// excluded from the add picker so each appears at most once.
+export default function ModelMultiSelect({ value, onChange, capability, placeholder }) {
+  const items = Array.isArray(value) ? value : []
+
+  const update = (index, v) => {
+    if (!v) return
+    onChange(items.map((it, i) => (i === index ? v : it)))
+  }
+  const remove = (index) => onChange(items.filter((_, i) => i !== index))
+  const add = (v) => {
+    if (!v || items.includes(v)) return
+    onChange([...items, v])
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: '100%' }}>
+      {items.length === 0 && (
+        <div style={{ fontSize: '0.75rem', color: 'var(--color-text-muted)' }}>
+          No detectors — PII is enabled but nothing scans requests. Add a token-classification
+          (NER) model below; its <code>pii_detection</code> block supplies the policy.
+        </div>
+      )}
+
+      {items.map((name, i) => (
+        <div key={i} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+          <SearchableModelSelect
+            value={name || ''}
+            onChange={v => update(i, v)}
+            capability={capability}
+            placeholder={placeholder || 'Select detector model...'}
+            style={{ flex: '1 1 260px', minWidth: 220 }}
+          />
+          <button type="button" className="btn btn-secondary btn-sm"
+            onClick={() => remove(i)}
+            style={{ padding: '2px 8px', fontSize: '0.75rem' }}
+            aria-label="Remove detector">
+            <i className="fas fa-times" />
+          </button>
+        </div>
+      ))}
+
+      <SearchableModelSelect
+        value=""
+        onChange={v => add(v)}
+        capability={capability}
+        placeholder="+ Add detector model..."
+        style={{ flex: '1 1 260px', minWidth: 220 }}
+      />
+    </div>
+  )
+}