Skip to content

feat(ui): raw-status chips on Kanban cards (U2)#386

Merged
OBenner merged 2 commits into
developfrom
claude/ui-card-chips-u2c
Jul 5, 2026
Merged

feat(ui): raw-status chips on Kanban cards (U2)#386
OBenner merged 2 commits into
developfrom
claude/ui-card-chips-u2c

Conversation

@OBenner

@OBenner OBenner commented Jul 5, 2026

Copy link
Copy Markdown
Owner

Closes the biggest visual gap vs the .lazyweb kanban mock (per .lazyweb/ui-proof/PROOF.md): cards now carry a small chip next to the id showing the source system's raw status — mock's Draft / Coder / Merged.

What's delivered

  • libs/ui: UiTask.statusChip (a UiTaskBadge, distinct from outcome badges), rendered in the card's top row; card-top flex/gap CSS.
  • Electron adapter: UiTaskBadgeLabels gains statusChips (label per raw desktop status, injected from i18n through the existing stable labels getter); tones map the raw status (backlog/queue→neutral, in_progress→info, reviews→warn, done/pr_created→good, error→bad). New pilot.statusChips.* keys (en+fr).
  • Web adapter: opt-in RestClientOptions.statusChipLabel keyed by the normalized backend status (suffix-stripped via the newly exported normalizeStatus); tone follows the mapped column. The pilot supplies labels from tasks:status.* (added the missing initialized key en+fr). No option → no chips (back-compat).
  • Also fixes the Sonar S7735 negated ternary that slipped into feat(ui): task detail wired into both apps via getTask adapters (U2) #385's merge.

Verification

  • Electron vitest 12/12, tsc exit 0; web vitest 13/13, tsc adds no new errors over the 5 pre-existing baseline test-file errors; libs/ui tsc clean.
  • Chips visually confirmed against the mock in the live component demo: 007 · Draft (neutral) and 004 · Coder (info) next to the card ids, matching desktop-kanban-board-v2.html.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Kanban cards now show a status chip next to each task ID, with labels and colors that reflect the task’s current state.
    • Added localized status-chip labels in English and French for more task states, including in progress, review, done, and initialized.
  • Bug Fixes

    • Improved handling of task status text so decorated status values are displayed consistently.
    • Added support for an additional task status label in translations.

Closes the biggest visual gap vs the .lazyweb kanban mock: cards now carry a small chip next to the id showing the source system's raw status (mock: Draft/Coder/Merged).

- libs/ui: UiTask.statusChip (UiTaskBadge; distinct from outcome badges), rendered in the card top row; card-top flex/gap CSS.
- electron adapter: UiTaskBadgeLabels gains statusChips (per raw desktop status, injected from i18n via the existing labels getter); chip tones map the raw status (backlog/queue neutral, in_progress info, reviews warn, done/pr_created good, error bad). New pilot.statusChips.* keys (en+fr).
- web adapter: opt-in RestClientOptions.statusChipLabel keyed by the NORMALIZED backend status (suffix-stripped via the new exported normalizeStatus); tone follows the mapped column. The pilot passes labels from tasks:status.* (added the missing 'initialized' key en+fr). No option -> no chips (back-compat; demo/test clients unaffected).
- also: Sonar S7735 (negated ternary) fixed in the web detail mapper.
- tests: electron 12/12 (chip labels/tones + updated exact-shape case), web 13/13 (opt-in absence, callback labeling with decorated status, raw fallback).

Verified: libs/ui + electron tsc exit 0; web tsc adds no new errors over the 5 pre-existing baseline; chips visually confirmed against the mock in the live demo (Draft neutral, Coder info-blue next to the id).

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

cursor Bot commented Jul 5, 2026

Copy link
Copy Markdown

Bugbot is not enabled for your account, so this pull request was not reviewed.

Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs.

@coderabbitai

coderabbitai Bot commented Jul 5, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

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

Next review available in: 44 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: 4787ef47-7453-4275-bdff-0cc0981604d3

📥 Commits

Reviewing files that changed from the base of the PR and between 05c9c6e and 1d19adc.

📒 Files selected for processing (2)
  • apps/web-frontend/src/i18n/locales/fr/tasks.json
  • apps/web-frontend/src/pages/KanbanPilot.tsx
📝 Walkthrough

Walkthrough

Adds a statusChip field to the shared UiTask type and renders it in KanbanBoard. Both the desktop renderer's autoCodeClient and the web-frontend's REST autoCodeClient are extended to populate statusChip (labels/tone), wired through KanbanPilotView/KanbanPilot with i18n locale entries, plus updated tests.

Changes

Status chip feature

Layer / File(s) Summary
Shared UiTask contract and rendering
libs/ui/src/client/types.ts, libs/ui/src/screens/KanbanBoard.tsx, libs/ui/src/screens/KanbanBoard.css
Adds optional statusChip: UiTaskBadge to UiTask and renders a chip badge in the Kanban card header with new CSS layout.
Desktop renderer statusChip mapping
apps/frontend/src/renderer/lib/autoCodeClient.ts, apps/frontend/src/renderer/components/KanbanPilotView.tsx, apps/frontend/src/shared/i18n/locales/en/kanban.json, apps/frontend/src/shared/i18n/locales/fr/kanban.json, apps/frontend/src/renderer/__tests__/autoCodeClient.test.ts
Adds statusChips/CHIP_TONES mappings, sets statusChip in mapTaskToUiTask, populates translated labels in KanbanPilotView's ref, adds locale strings, and updates/extends tests.
Web REST adapter opt-in statusChip
apps/web-frontend/src/api/autoCodeClient.ts, apps/web-frontend/src/api/autoCodeClient.test.ts
Adds normalizeStatus(), RestClientOptions with statusChipLabel, conditional statusChip in mapTaskSummaryToUiTask, restructured progressBreakdown, and passes options through createRestAutoCodeClient/listTasks, with new tests.
KanbanPilot i18n wiring and locale entries
apps/web-frontend/src/pages/KanbanPilot.tsx, apps/web-frontend/src/i18n/locales/en/tasks.json, apps/web-frontend/src/i18n/locales/fr/tasks.json
Adds CHIP_LABEL_KEYS mapping and useMemo-based statusChipLabel callback, plus new "initialized" status translations.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

  • OBenner/Auto-Coding#383: Introduces the shared mapTaskToUiTask/KanbanPilotView mapping bridge that this PR extends with statusChip behavior.

Suggested labels: size/L

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main UI change: adding raw-status chips to Kanban cards.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/ui-card-chips-u2c

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web-frontend/src/i18n/locales/fr/tasks.json`:
- Around line 16-17: The French status label for the initialized state is using
the wrong gender form and should match the other standalone status descriptors
in tasks.json. Update the `initialized` translation in the locale entry
alongside the other status keys (`cancelled`, `completed`, `archived`, `failed`)
in `tasks.json` so it uses the masculine form consistent with the implied
`statut`, unless this key is intentionally tied to a feminine noun elsewhere.

In `@apps/web-frontend/src/pages/KanbanPilot.tsx`:
- Around line 63-68: Tighten CHIP_LABEL_KEYS in KanbanPilot so its keys are
limited to the normalized status values produced by normalizeStatus/mapStatus
instead of using Record<string, string>. Define or reuse a narrow union type for
the allowed statuses and apply it to the CHIP_LABEL_KEYS declaration so typos or
drift between the adapter and this label map are caught at compile time.
- Around line 70-81: The AutoCodeClient is being recreated whenever the
translation function changes, which makes the injected client unstable and
triggers unnecessary refetches in useTasks. In KanbanPilot, keep the
createRestAutoCodeClient instance stable by removing t from the useMemo
dependency list and moving the translation lookup used by statusChipLabel behind
a ref or equivalent stable indirection so the label text can update without
recreating the client.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: b90fcc57-a17d-478f-889b-bad2ba6465b3

📥 Commits

Reviewing files that changed from the base of the PR and between 6ffb60e and 05c9c6e.

📒 Files selected for processing (13)
  • apps/frontend/src/renderer/__tests__/autoCodeClient.test.ts
  • apps/frontend/src/renderer/components/KanbanPilotView.tsx
  • apps/frontend/src/renderer/lib/autoCodeClient.ts
  • apps/frontend/src/shared/i18n/locales/en/kanban.json
  • apps/frontend/src/shared/i18n/locales/fr/kanban.json
  • apps/web-frontend/src/api/autoCodeClient.test.ts
  • apps/web-frontend/src/api/autoCodeClient.ts
  • apps/web-frontend/src/i18n/locales/en/tasks.json
  • apps/web-frontend/src/i18n/locales/fr/tasks.json
  • apps/web-frontend/src/pages/KanbanPilot.tsx
  • libs/ui/src/client/types.ts
  • libs/ui/src/screens/KanbanBoard.css
  • libs/ui/src/screens/KanbanBoard.tsx

Comment thread apps/web-frontend/src/i18n/locales/fr/tasks.json Outdated
Comment thread apps/web-frontend/src/pages/KanbanPilot.tsx Outdated
Comment thread apps/web-frontend/src/pages/KanbanPilot.tsx
… (U2 review)

- KanbanPilot: read translations through a ref so the AutoCodeClient
  identity survives locale switches (useTasks refetches on client change),
  mirroring the Electron pilot's labelsRef pattern
- CHIP_LABEL_KEYS: Record<string,string> -> Record<ChippedStatus,string>
  with an Object.hasOwn guard, so a typo'd status key fails to compile
- fr tasks:status.initialized: Initialisée -> Initialisé (masculine,
  consistent with sibling standalone status labels)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Signed-off-by: Oleg Miagkov <mrobenner@gmail.com>
@sonarqubecloud

sonarqubecloud Bot commented Jul 5, 2026

Copy link
Copy Markdown

@OBenner OBenner merged commit db9f10e into develop Jul 5, 2026
19 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