{
  "id": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001",
  "_kind": "Page",
  "_file": "wiki/docs/harness-features-backlog/gaps/user-experience/gap-ux-001.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/harness-features-backlog/gaps/user-experience/GAP-UX-001.md",
    "sourceKind": "repo-docs",
    "title": "GAP-UX-001: Ink/React Terminal Rendering Foundation",
    "displayName": "GAP-UX-001: Ink/React Terminal Rendering Foundation",
    "slug": "docs/harness-features-backlog/gaps/user-experience/gap-ux-001",
    "articlePath": "wiki/docs/harness-features-backlog/gaps/user-experience/GAP-UX-001.md",
    "article": "\n# GAP-UX-001: Ink/React Terminal Rendering Foundation\n\n| Field | Value |\n|-------|-------|\n| Category | user-experience |\n| Priority | High |\n| Effort | L |\n| Status | Missing |\n\n## Description\nAdopt Ink (React for CLI terminals) as the rendering foundation for babysitter's own\noutput surfaces. This is the infrastructure gap -- the rendering engine itself.\n\nCC uses Ink/React with 144 components across `src/components/` to render every\ninteraction surface. Babysitter needs this for its embedded SDK dashboard, CLI output,\nand breakpoint interaction UI. This is NOT a host harness feature -- it is how\nbabysitter itself presents orchestration state.\n\n## CC Reference (what they built)\nCC's Ink infrastructure includes:\n- `src/components/App.tsx` -- root app component\n- `src/ink.ts` -- Ink renderer setup\n- `src/components/design-system/` -- reusable primitives (Box, Text, etc.)\n- `src/components/Spinner/` -- 12 files: animated spinner with shimmer, stall detection, teammate trees\n- `src/components/Markdown.tsx`, `MarkdownTable.tsx` -- markdown rendering in terminal\n- `src/components/StatusLine.tsx`, `StatusNotices.tsx` -- persistent status bar\n- `src/components/VirtualMessageList.tsx` -- virtualized scrolling message list\n\n## Current State\nNo embedded SDK dashboard exists yet (`packages/babysitter-sdk/src/dashboard/` does not exist).\nCLI commands (`run:status`, `task:list`) output flat JSON or plain text tables.\nInteraction module (`packages/babysitter-sdk/src/interaction/`) uses raw readline for prompts.\nNo Ink, no React, no component model for terminal rendering.\n\n## Target State\nInk installed as dependency. Reusable component library for terminal rendering:\n`Box`, `Text`, `Spinner`, `Table`, `StatusBar`, `ProgressBar`, `Tree`. Embedded SDK\ndashboard and key CLI commands built with Ink components. Interaction module\nuses Ink for rich breakpoint prompts.\n\n## Dependencies\n- None (foundation gap -- other TUI gaps depend on this)\n\n## Sub-Gaps (broken down from this parent)\n- [GAP-UX-001a](GAP-UX-001a.md) -- Effect tree visualization\n- [GAP-UX-001b](GAP-UX-001b.md) -- Structured diff rendering\n- [GAP-UX-001c](GAP-UX-001c.md) -- Permission/breakpoint approval UI\n- [GAP-UX-001d](GAP-UX-001d.md) -- Message type rendering\n- [GAP-UX-001e](GAP-UX-001e.md) -- Progress and status line\n- [GAP-UX-001f](GAP-UX-001f.md) -- Streaming output panels\n\n## Key Files\n| Component | Path |\n|-----------|------|\n| Embedded SDK dashboard (new) | `packages/babysitter-sdk/src/dashboard/` |\n| Interaction module | `packages/babysitter-sdk/src/interaction/` |\n| CLI entry | `packages/babysitter-sdk/src/cli/main.ts` |\n| CC reference | `src/ink.ts` |\n| CC components | `src/components/` (144 files) |\n\n## Recommendation\nPhase 2 foundation. Add `ink` and `react` as SDK dependencies. Create\n`packages/babysitter-sdk/src/rendering/` with base components. Build embedded SDK dashboard\n(`packages/babysitter-sdk/src/dashboard/`) as proof of concept. Then extend to CLI commands and breakpoint UI.\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs-harness-features-backlog",
      "to": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001",
      "kind": "contains_page"
    }
  ]
}