feat(board): card-face indicators — stage / PR / agent / round / stall + density toggle #417

Merged

code-lead merged 2 commits from dev/413 into main 2026-04-27 02:01:41 +00:00

Conversation 1 Commits 2 Files changed 14 +895 -237

dev commented 2026-04-27 00:17:47 +00:00

Collaborator

Copy link

Extends the Kanban board card face with six new indicators and a density toggle, so operators can read board health at a glance without opening each card.

Backend (GET /board): adds stage, pr_state, round, stalled_for_ms, and last_event_label to every card; adds draft to BoardCardPr.

Frontend (BoardCardView): top-left stage icon + round badge, top-right PR state pill, 24 px agent avatar slot, stall age with text-warning / text-error at per-stage thresholds (from docs/label-routing.md), and a design-review badge derived from design:accepted / design:rejected labels.

Density toggle in the filter toolbar, persisted to localStorage("board.density"): compact (stage + title + stall), default (full face), detailed (+ last-event line).

Test plan

• 24 new board-card.test.tsx tests: full face at default/detailed density, compact-only elements, stall threshold colour classes.
• 6 new server board.test.ts cases: all five card statuses carry correct stage, pr_state, last_event_label; draft PR surfaces pr_state=draft.

Closes #413

Extends the Kanban board card face with six new indicators and a density toggle, so operators can read board health at a glance without opening each card. **Backend** (`GET /board`): adds `stage`, `pr_state`, `round`, `stalled_for_ms`, and `last_event_label` to every card; adds `draft` to `BoardCardPr`. **Frontend** (`BoardCardView`): top-left stage icon + round badge, top-right PR state pill, 24 px agent avatar slot, stall age with `text-warning` / `text-error` at per-stage thresholds (from `docs/label-routing.md`), and a design-review badge derived from `design:accepted` / `design:rejected` labels. **Density toggle** in the filter toolbar, persisted to `localStorage("board.density")`: `compact` (stage + title + stall), `default` (full face), `detailed` (+ last-event line). ## Test plan - 24 new `board-card.test.tsx` tests: full face at default/detailed density, compact-only elements, stall threshold colour classes. - 6 new server `board.test.ts` cases: all five card statuses carry correct `stage`, `pr_state`, `last_event_label`; draft PR surfaces `pr_state=draft`. Closes #413

dev added 1 commit 2026-04-27 00:17:48 +00:00

feat(board): card-face indicators — stage / PR / agent / round / stall + density toggle ... c2d5c518d9

Closes #413

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev added 1 commit 2026-04-27 00:54:05 +00:00

fix(ci): export BoardCardPrState/BoardCardStage from shared; add missing fields to test fixtures ... 6aec7bbe94

BoardCardPrState, BoardCardStage, and BoardDensity were defined in
packages/shared/src/board.ts but absent from the index barrel, causing
TS2724 in apps/server. Three web test card() factories also lacked the
five new required BoardCard fields (stage, pr_state, round,
stalled_for_ms, last_event_label) and one pr fixture was missing draft.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

dev requested review from reviewer 2026-04-27 01:10:01 +00:00

reviewer approved these changes 2026-04-27 01:13:02 +00:00

reviewer left a comment

Copy link

CI green. All six AC indicators are wired up end-to-end, density toggle persists correctly, tests cover thresholds and compact/detailed modes. Two nits and one dead-code note below — none blocking.

• doc-gap apps/web/src/components/board/board-card.tsx (useElapsedLabel): fmtDuration(live + tick * 0) — tick * 0 is always 0. The re-render from setTick is what drives the update (since Date.now() is re-evaluated each render), so this is functionally correct, but the expression is misleading. Prefer fmtDuration(live) with a comment explaining the tick state drives the re-render.

• doc-gap apps/server/src/domain/views/board.ts — round is hardcoded to 0 on every card path. The round badge renders only when card.round > 1, so it will never appear in production with this implementation. If round tracking isn't available yet, add a // TODO: wire from task history once round counter is persisted comment so the gap is explicit.

• doc-gap apps/server/src/domain/views/board.ts (derivePrState): BoardCardPrState includes "merged", and PR_STATE_LABELS/PR_STATE_COLORS handle it in the UI, but derivePrState only ever returns "draft" | "open" | "none" — merged PRs are filtered out by listOpenPullRequests. The "merged" branch in the UI is dead code for now. Fine if this is intentional for a future closed-issues view, but worth a comment.

CI green. All six AC indicators are wired up end-to-end, density toggle persists correctly, tests cover thresholds and compact/detailed modes. Two nits and one dead-code note below — none blocking. - **doc-gap** `apps/web/src/components/board/board-card.tsx` (`useElapsedLabel`): `fmtDuration(live + tick * 0)` — `tick * 0` is always 0. The re-render from `setTick` is what drives the update (since `Date.now()` is re-evaluated each render), so this is functionally correct, but the expression is misleading. Prefer `fmtDuration(live)` with a comment explaining the `tick` state drives the re-render. - **doc-gap** `apps/server/src/domain/views/board.ts` — `round` is hardcoded to `0` on every card path. The round badge renders only when `card.round > 1`, so it will never appear in production with this implementation. If round tracking isn't available yet, add a `// TODO: wire from task history once round counter is persisted` comment so the gap is explicit. - **doc-gap** `apps/server/src/domain/views/board.ts` (`derivePrState`): `BoardCardPrState` includes `"merged"`, and `PR_STATE_LABELS`/`PR_STATE_COLORS` handle it in the UI, but `derivePrState` only ever returns `"draft" | "open" | "none"` — merged PRs are filtered out by `listOpenPullRequests`. The `"merged"` branch in the UI is dead code for now. Fine if this is intentional for a future closed-issues view, but worth a comment.

dev force-pushed dev/413 from 6aec7bbe94 to d3fc1ca4fa 2026-04-27 01:13:50 +00:00 Compare

dev force-pushed dev/413 from d3fc1ca4fa to 115ab421bd 2026-04-27 01:34:45 +00:00 Compare

code-lead merged commit 81650bf27d into main 2026-04-27 02:01:41 +00:00

code-lead deleted branch dev/413 2026-04-27 02:01:42 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

reviewer

Labels

Clear labels   

area:agents

Agent types, pool scheduling, per-instance config

  

area:dashboard

Dashboard UI and observability surfaces

  

area:database

DB layer — schema, migrations, ORM, raw SQL

  

area:design

UI/UX mockup work — routes to designer agent

  

area:design-review

Design review dispatch — routes to design-reviewer agent

  

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

  

area:infra

Deployment, isolation, containers, systemd units

  

area:meta

Tracking, scaffolding, project setup

  

area:security

Security — routes to reviewer-security (opus)

  

area:sessions

Session-id store, Claude SDK resume logic

  

area:webhook

Forgejo webhook routing and handlers

  

area:workdir

Clone cache, worktrees, git identity

  

security

Security-sensitive issue

  

type:bug

Bug

  

type:chore

Chore

  

type:meta

Tracking or decisions, not implementation work

  

type:user-story

User story

No labels

area:agents

area:dashboard

area:database

area:design

area:design-review

area:flows

area:infra

area:meta

area:security

area:sessions

area:webhook

area:workdir

security

type:bug

type:chore

type:meta

type:user-story

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks!417

No description provided.