# Formax Approval UI Workflow

> Use when adding or changing any Approval prompt/presenter.

- Skill: `tomevault-io/formax-approval-ui-workflow` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/formax-approval-ui-workflow`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/formax-approval-ui-workflow/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/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

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/yusifeng) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->