{
  "id": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001f",
  "_kind": "Page",
  "_file": "wiki/docs/harness-features-backlog/gaps/user-experience/gap-ux-001f.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/harness-features-backlog/gaps/user-experience/GAP-UX-001f.md",
    "sourceKind": "repo-docs",
    "title": "GAP-UX-001f: Streaming Output Panels",
    "displayName": "GAP-UX-001f: Streaming Output Panels",
    "slug": "docs/harness-features-backlog/gaps/user-experience/gap-ux-001f",
    "articlePath": "wiki/docs/harness-features-backlog/gaps/user-experience/GAP-UX-001f.md",
    "article": "\n# GAP-UX-001f: Streaming Output Panels\n\n| Field | Value |\n|-------|-------|\n| Category | user-experience |\n| Priority | High |\n| Effort | L |\n| Status | Missing |\n\n## Description\nReal-time streaming panels that display output from delegated harness\ninvocations as they execute. Split-pane or scrolling view showing what each\ndispatched subagent is doing, with live stdout/stderr capture.\n\n## CC Reference\nCC has:\n- `src/components/MessageResponse.tsx` -- streams assistant responses token by token\n- `src/components/VirtualMessageList.tsx` -- virtualized scrolling for long output\n- `src/components/ToolUseLoader.tsx` -- loading indicator while tool executes\n- `src/components/messages/UserBashOutputMessage.tsx` -- formatted bash output\n- `src/components/messages/HookProgressMessage.tsx` -- hook execution streaming\n- `src/components/CompactSummary.tsx` -- compact view of large outputs\n\n## Current State\n`invokeHarness()` in `packages/sdk/src/harness/invoker.ts` captures stdout/stderr\nonly after the child process exits. No streaming during execution. No embedded SDK dashboard exists yet to show what a delegated harness is doing in real-time. Task\nresults are visible only after completion.\n\n## Target State\nAn Ink `StreamingPanel` component that:\n- Attaches to child process stdout/stderr pipes from invokeHarness()\n- Renders output in a scrollable, bounded panel\n- Supports multiple panels for parallel effects (split view)\n- Truncates/virtualizes long output to stay within terminal bounds\n- Shows elapsed time and byte count\n- Color-codes stderr vs stdout\n\n```\n┌─ S000005 generate-gap-files [running 45s] ─────────────────┐\n│ Creating gaps/prompt-engineering/GAP-PROMPT-001.md          │\n│ Creating gaps/prompt-engineering/GAP-PROMPT-002.md          │\n│ Creating gaps/tools-capabilities/GAP-TOOLS-008.md           │\n│ ...                                                         │\n│ [streaming 2.3KB]                                          │\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Dependencies\n- [GAP-UX-001](GAP-UX-001.md) -- Ink rendering foundation\n- [GAP-SUBOBS-001](../subagent-observability/GAP-SUBOBS-001.md) -- streaming capture from harnesses\n\n## Key Files\n| Component | Path |\n|-----------|------|\n| Harness invoker | `packages/sdk/src/harness/invoker.ts` |\n| Pi wrapper | `packages/sdk/src/harness/piWrapper.ts` (has subscribe()) |\n| Embedded SDK dashboard (new) | `packages/sdk/src/dashboard/` |\n| CC reference | `src/components/MessageResponse.tsx` |\n| CC reference | `src/components/VirtualMessageList.tsx` |\n\n## Recommendation\nPhase 2-3. Requires changes to invokeHarness() to pipe stdout/stderr in real-time\ninstead of buffering. Pi already has subscribe() for streaming events. The Ink\npanel needs virtualization for long output. Start with single-panel view, then\nadd split-pane for parallel effects.\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs-harness-features-backlog",
      "to": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001f",
      "kind": "contains_page"
    }
  ]
}