Add decision function UI: modal, PolicyForm integration, and stale ref fix

DecisionFunctionModal with CodeMirror editors (JS + JSON), autocomplete,
templates, test panel, shared function warning, and optimistic concurrency.
PolicyForm gains toggle-based decision function attachment (create/select/
edit/detach). Fixes stale reference dead-end where detaching a deleted
function left no way to attach a new one.

Author: jumpbetweenrows

admin-ui/CLAUDE.md

@@ -1,7 +1,7 @@
 # Admin UI — React Frontend
 
 ## Key Versions
-React 19, Vite 6, Tailwind 4, TanStack Query 5, react-router-dom 7, Vitest 3, @testing-library/react 16
+React 19, Vite 7, Tailwind 4, TanStack Query 5, react-router-dom 7, Vitest 4, @testing-library/react 16, CodeMirror 6 (`@uiw/react-codemirror`)
 
 ## Key Files
 - `vite.config.ts` — proxies `/api` → `http://localhost:5435`
@@ -17,16 +17,18 @@ React 19, Vite 6, Tailwind 4, TanStack Query 5, react-router-dom 7, Vitest 3, @t
 - `src/components/AuditTimeline.tsx` — Reusable admin audit timeline (used on role/user/policy/datasource detail pages)
 - `src/utils/auditBadge.ts` — Shared `actionBadgeClass()` for audit action badge styling (used by AuditTimeline + AdminAuditPage)
 - `src/components/PolicyAssignmentPanel.tsx` — Three components: `PolicyAssignmentsReadonly`, `PolicyAssignmentEditPanel` (with scope selector: all/user/role), `DatasourceAssignmentsReadonly`
+- `src/components/DecisionFunctionModal.tsx` — Modal for creating/editing decision functions with CodeMirror 6 editors (JS + JSON). Features: `ctx.*`/`config.*` autocomplete (activates on dot), templates (create mode), test panel with client-side pre-check → server WASM test, fire/skip/error badges, shared function warning, optimistic concurrency. Three linters: JS linter (executes function against mock context for syntax + runtime errors, highlights exact error line), JSON linter on config + test context editors (validates JSON.parse, highlights error position).
+- `src/components/PolicyForm.tsx` — Policy create/edit form with funnel-framed sections (Policy → Effect → Targets → Decision Function), toggle-based decision function attachment (create new / select existing / edit / detach)
 - `src/pages/RolesListPage.tsx` — Paginated list with search, member counts, active/inactive badges
 - `src/pages/RoleCreatePage.tsx` — Create form
 - `src/pages/RoleEditPage.tsx` — Tabbed view (Details, Members, Inheritance, Data Sources, Policies, Activity)
 - `src/pages/AdminAuditPage.tsx` — Centralized admin audit log with filters (resource type, actor, date range)
 - `src/types/policy.ts` — TypeScript interfaces for policies, assignments (`PolicyType`, `AssignmentScope`, `TargetEntry`)
 - `src/types/role.ts` — TypeScript interfaces for roles, members, audit entries
-- `src/types/decisionFunction.ts` — TypeScript interfaces for decision functions (`DecisionFunction`, `DecisionFunctionCreate`, `DecisionFunctionUpdate`)
-- `src/api/decisionFunctions.ts` — API client functions for decision function CRUD (`listDecisionFunctions`, `getDecisionFunction`, `createDecisionFunction`, `updateDecisionFunction`, `deleteDecisionFunction`)
+- `src/types/decisionFunction.ts` — TypeScript interfaces (`DecisionFunctionResponse`, `DecisionFunctionSummary`, `CreateDecisionFunctionPayload`, `UpdateDecisionFunctionPayload`, `TestDecisionFnPayload`, `TestDecisionFnResponse`, `EvaluateContext`, `OnErrorBehavior`, `LogLevel`)
+- `src/api/decisionFunctions.ts` — API client: `listDecisionFunctions`, `getDecisionFunction`, `createDecisionFunction`, `updateDecisionFunction`, `deleteDecisionFunction`, `testDecisionFn`
 - `src/test/test-utils.tsx` — `renderWithProviders` (QueryClient + AuthProvider + MemoryRouter)
-- `src/test/factories.ts` — `makeUser`, `makeDataSource`, `makeDataSourceType`, `makeDiscoveredSchema/Table/Column`
+- `src/test/factories.ts` — `makeUser`, `makeDataSource`, `makeDataSourceType`, `makeDiscoveredSchema/Table/Column`, `makeDecisionFunction`, `makePolicy`, `makePolicyAssignment`
 
 ## Running Tests
 ```bash
@@ -70,6 +72,17 @@ Components use `<label>Text</label><input />` as siblings, not linked pairs. Use
 ### CSS `uppercase` is visual-only
 `className="uppercase"` does not change DOM `textContent`. Search for lowercase `'public'`, not `'PUBLIC'`.
 
+### CodeMirror 6 in tests
+CodeMirror 6 uses DOM APIs (Selection, Range) that jsdom doesn't support. Mock `@uiw/react-codemirror` as a simple textarea in tests:
+```tsx
+vi.mock('@uiw/react-codemirror', () => ({
+  default: ({ value, onChange, placeholder }: { value: string; onChange?: (v: string) => void; placeholder?: string }) => (
+    <textarea data-testid="codemirror" value={value} onChange={(e) => onChange?.(e.target.value)} placeholder={placeholder} />
+  ),
+}))
+```
+Use `fireEvent.change(editor, { target: { value: '...' } })` instead of `userEvent.type` for CodeMirror textareas — `userEvent.type` interprets `{` as keyboard modifier syntax.
+
 ### Text split by HTML tags
 Rich text like `<strong>1</strong> schema` cannot be matched by `getByText(/1.*schema/i)`. Use:
 ```ts

admin-ui/package-lock.json

@@ -12,8 +12,13 @@
     "typecheck": "tsc -b"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lint": "^6.9.5",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@tanstack/react-query": "^5.66.0",
+    "@uiw/react-codemirror": "^4.25.9",
     "axios": "^1.7.9",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",