Skip to content

feat(ui): TaskDetail v2 — pipeline tabs, subtasks panel, meta rail (U-slice)#419

Merged
OBenner merged 2 commits into
developfrom
claude/ui-task-detail-v2
Jul 13, 2026
Merged

feat(ui): TaskDetail v2 — pipeline tabs, subtasks panel, meta rail (U-slice)#419
OBenner merged 2 commits into
developfrom
claude/ui-task-detail-v2

Conversation

@OBenner

@OBenner OBenner commented Jul 12, 2026

Copy link
Copy Markdown
Owner

Summary

Closes the gap between the shared TaskDetail screen and the desktop-task-detail-v2 mockup ("точно не по макету отображается") — part 1 of the pipeline view.

libs/ui (shared design system)

  • Tab bar: Overview / Subtasks·N / Logs / Files / Timeline. Subtasks is selectable when data is present (count badge); Logs/Files/Timeline render disabled until their data flows land (part 2).
  • Two-column body: overview/subtasks content on the left, meta cards (Workspace, Cost & tokens, …) on the right rail; single-column below 1024px.
  • SubtasksPanel: status check circles (done ✓ / running / failed / pending) + per-row status badges.
  • Tab state resets per task (key={task.id}) and falls back to Overview if a live update disables the selected tab.
  • New shared types: UiSubtask, UiSubtaskStatus, UiMetaRow, UiMetaSection, TaskDetailTabId; labels injectable (EN defaults).

Electron

  • Adapter maps store subtasks onto the shared shape; new loadMetaSections progressive-enhancement loader (swallowed-failure contract identical to loadSpecContent).
  • getCostReport preload wrapper finally exposes the existing PROJECT_LOAD_COST_REPORT handler to the renderer.
  • KanbanPilotView builds the meta rail from getTokenStats + getCostReport via the pure task-meta-sections helper; tab/subtask-status/meta labels via i18n (en+fr).

Web

  • TaskDetailNext passes localized tab labels (en+fr).

Verification

  • libs/ui tsc, Electron typecheck (CI-style hoisted node_modules), web-frontend tsc at pre-existing baseline.
  • Vitest: 32/32 (new task-meta-sections suite + adapter subtasks/metaSections coverage).
  • Storybook rebuilt; RunningTask story visually verified against the mockup in light + dark themes, tab switching exercised in DOM, responsive single-column checked at 900px.

Deferred (part 2)

Logs / Files / Timeline tab content + live data feeds.

🤖 Generated with Claude Code

…-slice)

Rebuild the shared TaskDetail screen to match the desktop-task-detail-v2
mockup:

- libs/ui: tab bar (Overview / Subtasks·N / Logs / Files / Timeline —
  the last three rendered disabled until their data flows land), a
  two-column body with the overview/subtasks content on the left and
  meta cards (Workspace, Cost & tokens, …) on the right rail, and a
  SubtasksPanel with status check circles + badges. Tab state resets
  per task (key) and falls back to Overview if a live update disables
  the selected tab. New shared types: UiSubtask, UiSubtaskStatus,
  UiMetaRow, UiMetaSection, TaskDetailTabId.
- Electron adapter: maps store subtasks onto the shared shape and gains
  a loadMetaSections progressive-enhancement loader (same swallowed-
  failure contract as loadSpecContent).
- Pilot wiring: KanbanPilotView builds the meta rail from getTokenStats
  + the newly exposed getCostReport preload wrapper (over
  PROJECT_LOAD_COST_REPORT) via the pure task-meta-sections helper;
  tab/subtask-status labels injected from i18n (en+fr).
- Web pilot: TaskDetailNext passes localized tab labels (en+fr).
- Tests: task-meta-sections unit suite + adapter subtasks/metaSections
  coverage (32 passing); Storybook stories extended with a full
  pipeline story (subtasks + meta cards) verified in both themes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@coderabbitai

coderabbitai Bot commented Jul 12, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@OBenner, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 33 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: d2f58df0-1cd4-451c-b311-b6f99ce920e3

📥 Commits

Reviewing files that changed from the base of the PR and between 49d908b and 29e48be.

📒 Files selected for processing (19)
  • apps/frontend/src/__tests__/setup.ts
  • apps/frontend/src/preload/api/task-api.ts
  • apps/frontend/src/renderer/__tests__/autoCodeClient.test.ts
  • apps/frontend/src/renderer/__tests__/task-meta-sections.test.ts
  • apps/frontend/src/renderer/components/KanbanPilotView.tsx
  • apps/frontend/src/renderer/lib/autoCodeClient.ts
  • apps/frontend/src/renderer/lib/mocks/task-mock.ts
  • apps/frontend/src/renderer/lib/task-meta-sections.ts
  • apps/frontend/src/shared/i18n/locales/en/kanban.json
  • apps/frontend/src/shared/i18n/locales/fr/kanban.json
  • apps/frontend/src/shared/types/ipc.ts
  • apps/web-frontend/src/i18n/locales/en/tasks.json
  • apps/web-frontend/src/i18n/locales/fr/tasks.json
  • apps/web-frontend/src/pages/TaskDetailNext.tsx
  • libs/ui/src/client/types.ts
  • libs/ui/src/index.ts
  • libs/ui/src/screens/TaskDetail.css
  • libs/ui/src/screens/TaskDetail.stories.tsx
  • libs/ui/src/screens/TaskDetail.tsx
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/ui-task-detail-v2

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

cost_report.json crosses IPC as a bare JSON.parse cast, and historical
or hand-edited files can carry a missing/string/negative total_cost
(the backend cost_tracking loader is defensive for the same reason).
Unguarded .toFixed(2) threw inside loadMetaSections and the adapter's
swallowed-failure contract silently dropped the entire meta rail —
including the Workspace card built from purely local data. Skip the
cost row instead, matching formatTokenCount's clamping; pin the k/M
boundary behavior and the cost-only card in tests.

Confirmed by the adversarial review workflow (2 confirmed findings,
same root cause; 6 refuted).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@sonarqubecloud

Copy link
Copy Markdown

@OBenner OBenner merged commit d5ac1ee into develop Jul 13, 2026
25 of 27 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant