Assurance case editor

The editor at /case/[caseId] turns a stored assurance case into an interactive diagram. CaseContainer loads the case through /api/cases/[id], holds it in the client store and passes it to Flow. Flow converts the case tree into React Flow nodes and edges, then applies the layout helper. The canvas does not use draggable nodes; the layout is computed from the case structure.

Node and edge renderingCopy Anchor Link

components/cases/node-type-resolver.ts registers six node renderers: goal, strategy, property claim, evidence, away goal and module. lib/case/node-type-resolver.ts maps stored element types to those renderer keys. A defeater is a marked argument element with a challenge relationship, rather than a seventh node kind. Context is held as data on relevant elements, rather than rendered as a separate node in the current diagram.

lib/case/convert-case.ts walks the nested goal tree and creates the diagram nodes. It creates support edges from parent-child relationships. Where a defeater cites a target present in the case, it adds a challenge edge, or replaces the support edge when the cited target is also the tree parent. The layout helper positions these nodes, and the toolbar's Focus control can run layout again.

EditingCopy Anchor Link

Element controls sit on the nodes. The Add Element popover offers choices according to the parent kind. A goal can add a strategy, property claim, defeater, away goal or module. A property claim can also add evidence. Choosing a kind opens its add dialog. Away goals and modules use a cited-element picker; other kinds use the element form. The edit dialog handles descriptions, applicable attributes, evidence URLs and assertion status. An element's options menu provides further actions.

The editor uses both server actions and API routes. Element services and validation code are the places to inspect when a change to an element's behaviour is needed. The case route checks the caller's identity, and the service layer enforces the relevant case permissions.

History and other editorsCopy Anchor Link

The toolbar has Undo and Redo controls for people with editing access. use-keyboard-shortcuts.ts supports Command or Control plus Z for undo, Command or Control plus Shift plus Z for redo, and Command or Control plus Y as another redo shortcut. These shortcuts do not intercept typing in inputs, textareas or editable content. The toolbar also exposes case information, sharing when the user can manage the case, export and a JSON view. Check permissions before assuming a control is available to every reader.

CaseContainer subscribes to case events over server-sent events. On a relevant event it refetches the case, with a short debounce, and shows a toast for another user's change. There is no lockUuid field or edit-lock flow in this implementation. Changes can still arrive while someone is working, so the editor should be understood as a live shared view, not an exclusive editing session.

Key filesCopy Anchor Link

• app/(cases)/case/[caseId]/page.tsx: editor route.
• components/cases/case-container.tsx and components/cases/flow.tsx: data loading, events and canvas.
• components/cases/node-type-resolver.ts, components/shared/nodes/ and components/cases/node-add-popover.tsx: node presentation and controls.
• lib/case/convert-case.ts and lib/case/layout-helper.ts: tree conversion and layout.
• lib/services/element-service.ts and app/api/elements/[id]/route.ts: element operations.