The chat card becomes the full editor

ApprovalRulesView rendered the full editor inline (~260 lines), and ApprovalRulesModal was a 665-line bespoke single-condition form with its own operator list, value-editor branching, and "destinations" array that didn't even nest under routes.

• Chat: one condition, one trigger, N destinations (flat).
• Admin: N routes × N blocks × N conditions.
• Grammar mismatch on every submit.

Both surfaces import:

import {
  EdgeEditorFields,
  isEdgeValid,
  type WorkflowEdge,
} from './EdgeEditorFields';

The wrappers contribute only the sheet shell, submit button, and persistence wiring. isEdgeValid mirrors the server's validateEdgeInput, so the Save button enables exactly when the server would accept the edge.

Runs the same validateEdgeInput + validateEdgeIO as addApprovalEdge, then returns { success, edge, warnings }. Writes nothing. The orchestrator unwraps edge (the nested value, not the whole envelope) and passes it as the card's prefill.edge.

subAgentSummarizer's KEPT_FIELDS gains one entry:

// Carries the candidate edge from approvalRuleAgent's
// proposeApprovalEdge / getApprovalEdge up to the orchestrator
// so it can pre-fill the approval-rule editor card. Without
// keeping it here, the edge is stripped before the orchestrator
// ever sees it and the card opens empty.
'proposedEdge',

A dedicated unit test pins this behavior: subAgentSummarizer.spec.ts asserts proposedEdge survives.

sortedEdges.forEach((edge, i) => {
  const allBlocks = edge.routes
    .flatMap(r => r.blocks);   // ⚠️ flatten
  result.push({
    id: `cond-${edge.id}`,
    data: { blocks: allBlocks, ... },
    position: { x: ..., y: i * ROW_HEIGHT },
  });
});

Tiered rule ">10→VP, >20→Deal Desk, >30→CFO" rendered as one row with all three conditions jammed together and the three destinations stacked at the same y.

const routeItems = useMemo(() => {
  const items = [];
  for (const edge of sortedEdges) {
    (edge.routes ?? []).forEach((route, ri) => {
      items.push({
        key: `${edge.id}__${ri}`,
        edgeId: edge.id,
        blocks: route.blocks,
        destination: route.destination,
      });
    });
  }
  return items;
}, [sortedEdges]);

Three rows, three condition cells, three arrows landing on three (deduped) group nodes stacked in their own column by chain order. edge.routes ?? [] guards malformed specs.

grid-cols-[96px_minmax(180px,2.2fr)_76px_minmax(0,1fr)_28px]

The value cell was the narrowest column. Select-option labels got truncated mid-word.

Row 1: [entity 110px | attribute 1fr]
Row 2: [operator 150px | value 1fr | × 28px]

The value cell is now full-width inside row 2. Long enum labels render in full. The whole row is wrapped in a subtle bordered card so multi-condition blocks read as discrete units.