{
  "id": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001d",
  "_kind": "Page",
  "_file": "wiki/docs/harness-features-backlog/gaps/user-experience/gap-ux-001d.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/harness-features-backlog/gaps/user-experience/GAP-UX-001d.md",
    "sourceKind": "repo-docs",
    "title": "GAP-UX-001d: Message Type Rendering",
    "displayName": "GAP-UX-001d: Message Type Rendering",
    "slug": "docs/harness-features-backlog/gaps/user-experience/gap-ux-001d",
    "articlePath": "wiki/docs/harness-features-backlog/gaps/user-experience/GAP-UX-001d.md",
    "article": "\n# GAP-UX-001d: Message Type Rendering\n\n| Field | Value |\n|-------|-------|\n| Category | user-experience |\n| Priority | Medium |\n| Effort | L |\n| Status | Missing |\n\n## Description\nType-specific rendering for different journal event types and task results.\nEach event type (EFFECT_REQUESTED, EFFECT_RESOLVED, RUN_COMPLETED, RUN_FAILED)\nand task kind (agent, shell, breakpoint, sleep) gets a specialized renderer\nwith appropriate formatting, color coding, and detail level.\n\n## CC Reference\nCC has 35 message type renderers in `src/components/messages/`:\n- `AssistantTextMessage.tsx` -- AI text responses\n- `AssistantToolUseMessage.tsx` -- tool call display\n- `AssistantThinkingMessage.tsx` -- thinking block display\n- `UserBashOutputMessage.tsx` -- bash output formatting\n- `HookProgressMessage.tsx` -- hook execution progress\n- `PlanApprovalMessage.tsx` -- plan mode approval\n- `RateLimitMessage.tsx` -- rate limit handling\n- `SystemAPIErrorMessage.tsx` -- API error display\n- `TaskAssignmentMessage.tsx` -- task delegation display\n- `CompactBoundaryMessage.tsx` -- compaction boundary marker\n\nPlus `Message.tsx` as the dispatcher that selects the right renderer per message type.\n\n## Current State\n`run:events` outputs raw JSON events. No embedded SDK dashboard exists yet. No type-specific rendering. No color coding by event type. Task results\ndisplayed as raw JSON regardless of kind.\n\n## Target State\nA message dispatcher component that renders each event type appropriately:\n- `EFFECT_REQUESTED`: Shows task title, kind icon, labels, step ID\n- `EFFECT_RESOLVED`: Shows duration, status (ok/error), result summary\n- `RUN_COMPLETED`: Shows completion proof, total duration, effect count\n- `RUN_FAILED`: Shows error message, stack trace, last good state\n- Agent task result: Shows summary of work done\n- Shell task result: Shows command, exit code, stdout/stderr with truncation\n- Breakpoint result: Shows who approved, response text, timing\n\n## Dependencies\n- [GAP-UX-001](GAP-UX-001.md) -- Ink rendering foundation\n\n## Key Files\n| Component | Path |\n|-----------|------|\n| Run events CLI | `packages/sdk/src/cli/` |\n| Embedded SDK dashboard (new) | `packages/sdk/src/dashboard/` |\n| Storage types | `packages/sdk/src/storage/types.ts` (event types) |\n| CC reference | `src/components/messages/` |\n| CC message dispatcher | `src/components/Message.tsx` |\n\n## Recommendation\nPhase 3. Build a `JournalEventRenderer` that dispatches to per-type components.\nStart with the 4 core event types. Extend to task-kind-specific result rendering.\nIntegrate into embedded SDK dashboard first, then `run:events --rich` CLI flag.\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs-harness-features-backlog",
      "to": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001d",
      "kind": "contains_page"
    }
  ]
}