formax-approval-ui-workflow

formax-approval-ui-workflow

Goal

• Keep Approval prompts visually consistent + Claude Code-aligned (only when explicitly requested).
• Preserve existing behavior + keyboard flow (Enter/Esc/Shift+Tab), avoid UI regressions.
• Keep preview rendering fast and safe (no sync IO in render; guard against quadratic diffs).

Where to change what

• Shared approval “chrome”
• packages/core/src/components/ui/ApprovalHeader.tsx (top divider + title color)
• packages/core/src/components/ui/ConfirmMenu.tsx (numbered options + selection color)
• Preview (optional section under header)
• packages/core/src/components/tool/ApprovalPreview.tsx (simple file preview)
• packages/core/src/components/tool/PatchApprovalPreview.tsx (edit-file wrapper: header + file + preview)
• packages/core/src/components/tool/PatchPreview.tsx (diff rendering + performance guards)
• Per-tool approval prompts (labels, options, allow/ask/deny / remember write paths)
• packages/core/src/components/tool/bashApprovalPrompt.tsx
• packages/core/src/components/tool/fsReadApprovalPrompt.tsx
• packages/core/src/components/tool/fsWriteApprovalPrompt.tsx
• packages/core/src/components/tool/skillApprovalPrompt.tsx
• (if present) packages/core/src/components/tool/editApprovalPrompt.tsx (legacy)
• Tool presenters that mount approval prompts
• packages/core/src/tools/modules/bash/presenter.tsx
• packages/core/src/tools/modules/read/presenter.tsx
• packages/core/src/tools/modules/write/presenter.tsx
• packages/core/src/tools/modules/edit/presenter.tsx
• packages/core/src/tools/modules/skill/presenter.tsx
• Colors / theme
• packages/core/src/tui/theme.ts (theme.permission, theme.text, theme.diff.*)

Patterns

• Layout skeleton (keep consistent)
• [Top divider line]
• Title (color = theme.permission)
• Optional Preview box
• Question line (e.g. “Do you want to … <file>?”)
• Options list (numbered)
• Bottom hint (e.g. “Esc to cancel”)

• Options rendering (text + emphasis)
• If an option needs mixed styling (e.g. make capture-terminal/ bold/white): make ConfirmMenu accept ReactNode labels.
• Ensure selection color wins over nested Text color={...} when highlighted:
• Prefer passing “unstyled” children and let row wrapper decide color, or
• In nested text, only set bold, avoid hardcoding color unless required.

• Preview performance (must not block UI)
• No fs.readFileSync/fs.statSync/blocking IO inside render path (useMemo included).
• If file context is needed (e.g. line numbers), compute via async fs/promises + useEffect.

• Diff safety (avoid OOM / hangs)
• Any token/word diff based on DP/LCS must have a hard cap (max cells).
• If cap exceeded: fall back to truncated / line-only / “too large to diff” preview.

Tests to update

• Unit/component tests (minimum regression set):
• packages/core/src/components/ui/ConfirmMenu.test.tsx (ReactNode label + selection color)
• packages/core/src/components/tool/bashApprovalPrompt.test.tsx (if exists)
• packages/core/src/components/tool/fsReadApprovalPrompt.test.tsx (if exists)
• packages/core/src/components/tool/fsWriteApprovalPrompt.test.tsx (if exists)
• packages/core/src/components/tool/skillApprovalPrompt.test.tsx (if exists)
• packages/core/src/tools/modules/edit/presenter.test.tsx (preview/diff layout + performance guard)

• Manual spot-check (fast)
• Trigger one approval for each kind: Bash, Read(outside workspace), Write, Edit.
• Verify: top divider, title color, option numbering, selection color, Esc behavior.

Guardrails

• Do not change UI copy/spacing/colors unless explicitly requested for Claude Code parity.
• Treat UI output vs model context injection as orthogonal; don’t change injection behavior as a side-effect of approval UI work.
• Do not add a syntax highlighting library (keep preview rendering lightweight).
• Do not broaden scope (“refactor approval system”); only touch what the prompt requires.
• Keep rendering responsive:
• no sync IO in render
• hard caps for quadratic diff algorithms
• Loop discipline:
• run targeted tests first, then bun run test if needed
• run review before committing using AGENTS.md -> Review Profile (Single Source of Truth); fix all high/medium findings