{
  "id": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001b",
  "_kind": "Page",
  "_file": "wiki/docs/harness-features-backlog/gaps/user-experience/gap-ux-001b.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/harness-features-backlog/gaps/user-experience/GAP-UX-001b.md",
    "sourceKind": "repo-docs",
    "title": "GAP-UX-001b: Structured Diff Rendering",
    "displayName": "GAP-UX-001b: Structured Diff Rendering",
    "slug": "docs/harness-features-backlog/gaps/user-experience/gap-ux-001b",
    "articlePath": "wiki/docs/harness-features-backlog/gaps/user-experience/GAP-UX-001b.md",
    "article": "\n# GAP-UX-001b: Structured Diff Rendering\n\n| Field | Value |\n|-------|-------|\n| Category | user-experience |\n| Priority | Medium |\n| Effort | M |\n| Status | Missing |\n\n## Description\nRender file diffs with syntax highlighting, line numbers, and context in the\nterminal. Used when displaying task results that involve code changes, journal\nevent diffs, and run comparison output.\n\n## CC Reference\nCC has a full diff rendering system:\n- `src/components/diff/DiffDialog.tsx` -- modal diff viewer\n- `src/components/diff/DiffFileList.tsx` -- multi-file diff list\n- `src/components/diff/DiffDetailView.tsx` -- per-file detail\n- `src/components/StructuredDiff.tsx` -- inline structured diff\n- `src/components/StructuredDiffList.tsx` -- list of structured diffs\n- `src/components/FileEditToolDiff.tsx` -- diff for file edit tool results\n- `src/components/FileEditToolUpdatedMessage.tsx` -- post-edit diff message\n\n## Current State\nTask results with code changes are stored as raw text in `result.json`. No diff\nrendering. No embedded SDK dashboard exists yet. `task:show` outputs the full result\nwith no diffing.\n\n## Target State\nAn Ink component `StructuredDiff` that renders unified diffs with:\n- Syntax highlighting (via terminal ANSI codes)\n- Line numbers\n- Added/removed/context lines with color coding\n- File path headers\n- Collapsible hunks for large diffs\n\nUsed by: `task:show` for code-change results, embedded SDK dashboard task detail\nview, `run:compare` (GAP-RUN-001) for run diffing.\n\n## Dependencies\n- [GAP-UX-001](GAP-UX-001.md) -- Ink rendering foundation\n- [GAP-RUN-001](../run-lifecycle/GAP-RUN-001.md) -- run comparison needs diff rendering\n\n## Key Files\n| Component | Path |\n|-----------|------|\n| Task show CLI | `packages/babysitter-sdk/src/cli/` |\n| CC reference | `src/components/diff/` |\n| CC reference | `src/components/StructuredDiff.tsx` |\n\n## Recommendation\nUse a terminal diff library (e.g., `diff` npm package) for computing diffs.\nRender with Ink using green/red coloring. Start with `task:show` output for\nagent task results that include file changes.\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs-harness-features-backlog",
      "to": "page:docs-harness-features-backlog-gaps-user-experience-gap-ux-001b",
      "kind": "contains_page"
    }
  ]
}