{
  "id": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001a",
  "_kind": "Page",
  "_file": "wiki/docs/harness-features-backlog/gaps/user-experience/gap-ux-001a.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/harness-features-backlog/gaps/user-experience/GAP-UX-001a.md",
    "sourceKind": "repo-docs",
    "title": "GAP-UX-001a: Effect Tree Visualization",
    "displayName": "GAP-UX-001a: Effect Tree Visualization",
    "slug": "docs/harness-features-backlog/gaps/user-experience/gap-ux-001a",
    "articlePath": "wiki/docs/harness-features-backlog/gaps/user-experience/GAP-UX-001a.md",
    "article": "\n# GAP-UX-001a: Effect Tree Visualization\n\n| Field | Value |\n|-------|-------|\n| Category | user-experience |\n| Priority | High |\n| Effort | M |\n| Status | Missing |\n\n## Description\nRender the effect dependency tree as an interactive, hierarchical terminal UI.\nShow parent/child effects, parallel groups, status indicators (pending, running,\ncompleted, failed), and timing information. Collapsible nodes for large trees.\n\n## CC Reference\nCC has `CoordinatorAgentStatus.tsx` for coordinator tree rendering,\n`Spinner/TeammateSpinnerTree.tsx` for multi-agent progress trees, and\n`AgentProgressLine.tsx` for per-agent status. These render nested agent\nhierarchies with live-updating status.\n\n## Current State\n`task:list` outputs a flat JSON array of effects. `run:status` shows a summary\nwith `pendingByKind` counts. No tree visualization. No parent/child rendering.\nNo live updating.\n\n## Target State\nAn Ink component `EffectTree` that renders:\n```\nRun 01KNKDVE... [running] 3m elapsed\n├── S000001 audit-existing-gaps [completed] 2m\n├── S000002 breakpoint:review-audit [approved] 15s\n├── S000003 identify-missing-gaps [completed] 1m\n├── S000004 breakpoint:review-new-gaps [approved] 10s\n├── S000005 generate-gap-files [running] 45s\n│   ├── creating prompt-engineering/ [done]\n│   ├── creating tools-capabilities/ [in progress]\n│   └── creating session-management/ [pending]\n└── S000006 verify-structure [pending]\n```\n\nUsed by embedded SDK dashboard and `run:status --tree` flag.\n\n## Dependencies\n- [GAP-UX-001](GAP-UX-001.md) -- Ink rendering foundation\n\n## Key Files\n| Component | Path |\n|-----------|------|\n| Task list CLI | `packages/babysitter-sdk/src/cli/` (task:list command) |\n| Run status CLI | `packages/babysitter-sdk/src/cli/` (run:status command) |\n| CC reference: tree | `src/components/Spinner/TeammateSpinnerTree.tsx` |\n| CC reference: agent status | `src/components/CoordinatorAgentStatus.tsx` |\n\n## Recommendation\nBuild on the state cache's `effectsByInvocation` data. Parse parallel groups from\nscheduler hints. Render with Ink `Box`/`Text` with ANSI color for status. Add\n`--tree` flag to `run:status` and `task:list`.\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs-harness-features-backlog",
      "to": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001a",
      "kind": "contains_page"
    }
  ]
}