{
  "id": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001c",
  "_kind": "Page",
  "_file": "wiki/docs/harness-features-backlog/gaps/user-experience/gap-ux-001c.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/harness-features-backlog/gaps/user-experience/GAP-UX-001c.md",
    "sourceKind": "repo-docs",
    "title": "GAP-UX-001c: Permission and Breakpoint Approval UI",
    "displayName": "GAP-UX-001c: Permission and Breakpoint Approval UI",
    "slug": "docs/harness-features-backlog/gaps/user-experience/gap-ux-001c",
    "articlePath": "wiki/docs/harness-features-backlog/gaps/user-experience/GAP-UX-001c.md",
    "article": "\n# GAP-UX-001c: Permission and Breakpoint Approval UI\n\n| Field | Value |\n|-------|-------|\n| Category | user-experience |\n| Priority | High |\n| Effort | M |\n| Status | Partial |\n\n## Description\nRich terminal UI for breakpoint approvals with context display, risk assessment,\noption selection, and history. Replace the current readline-based interaction\nwith an Ink-rendered approval dialog.\n\n## CC Reference\nCC has 29 files in `src/components/permissions/`:\n- `PermissionDialog.tsx` -- base dialog with approve/deny/always-approve\n- `PermissionPrompt.tsx` -- prompt with explanation\n- `PermissionRequest.tsx` -- request container\n- `PermissionExplanation.tsx` -- why this permission is needed\n- `PermissionRuleExplanation.tsx` -- which rule matched\n- `PermissionDecisionDebugInfo.tsx` -- debug info for decisions\n- Per-tool permission UIs: `BashPermissionRequest/`, `FileEditPermissionRequest/`,\n  `FileWritePermissionRequest/`, `WebFetchPermissionRequest/`, etc.\n- Worker-specific: `WorkerBadge.tsx`, `WorkerPendingPermission.tsx`\n\n## Current State\nBreakpoint interaction uses `packages/babysitter-sdk/src/interaction/` which is raw\nreadline with arrow-key selectors. No context display beyond the question text.\nNo risk visualization. No auto-approval rule explanation. The auto-approval\nsystem (`packages/babysitter-sdk/src/breakpoints/`) computes recommendations but they are\nnot surfaced in the UI.\n\n## Target State\nAn Ink-based `BreakpointApproval` component that renders:\n```\n┌─ Breakpoint: Review gap audit results ──────────────────────┐\n│                                                               │\n│ 52 removed, 25 reframed, 16 merged, 40 kept.                │\n│ Review and approve?                                           │\n│                                                               │\n│ Context:                                                      │\n│   Removed: GAP-TOOLS-001 (File Read Tool) -- host harness    │\n│            GAP-UX-002 (Voice Mode) -- host harness            │\n│            ... 50 more                                        │\n│                                                               │\n│ Auto-approval: Not recommended (no matching rule)             │\n│ Consecutive approvals: 0                                      │\n│                                                               │\n│ > [Approve]  [Request changes]  [Always approve this type]   │\n└───────────────────────────────────────────────────────────────┘\n```\n\nShows: breakpoint context, auto-approval recommendation with reason,\nmatched rule (if any), consecutive approval count, risk indicators,\nselectable options with keyboard navigation.\n\n## Dependencies\n- [GAP-UX-001](GAP-UX-001.md) -- Ink rendering foundation\n- [GAP-BRK-001](../breakpoint-workflows/GAP-BRK-001.md) -- approval chains\n\n## Key Files\n| Component | Path |\n|-----------|------|\n| Interaction module | `packages/babysitter-sdk/src/interaction/` |\n| Breakpoints module | `packages/babysitter-sdk/src/breakpoints/` |\n| CC reference | `src/components/permissions/` |\n\n## Recommendation\nPhase 2. Replace interaction module's readline with Ink renderer. Start with\nbreakpoint approval since it's the highest-frequency user interaction in\norchestration. Surface auto-approval data from task.json in the dialog.\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs-harness-features-backlog",
      "to": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001c",
      "kind": "contains_page"
    }
  ]
}