## Thinking Path
> - Paperclip is the open source app people use to manage AI agents for
work.
> - Operators use the dashboard and Live runs page to inspect current
and recent runs.
> - Large transcript cards take space and make it hard to compare run
states.
> - A compact card must show the agent, linked task, and time, with
access to run details.
> - This pull request applies the supplied card design to both views.
> - Operators can scan more runs and open a run or task for details.
## Linked Issues or Issue Description
**What existing behavior does this improve?**
The agent run cards on the dashboard and Live runs page, plus dashboard
charts and recent lists.
**Subsystem affected**
`ui/` — React board UI.
**Current behavior**
Both views show large cards with embedded transcripts. Queued and
running cards share a live treatment. The dashboard chart grid leaves an
empty column, recent lists use different row sizes, and some activity
labels expose raw event names.
**Proposed behavior**
Both views use the same compact grid. Each card shows the existing
initials avatar, the agent name, one linked task row, and a
right-aligned timestamp. There is no status chip next to the agent name.
The timestamp uses small Inter text and the same muted gray as dashboard
metric descriptions. Recovery details remain in the task view. Run
status remains in the header tooltip and accessible label, and run
transcripts remain in the run detail view. The shared in-progress task
icon is now an animated circular spinner across the app.
**Reason and benefit**
Operators can scan task states without scrolling through embedded
output. The in-progress spinner keeps the shared task icon sizes,
circular shape, and stroke width. It honors reduced-motion preferences.
**Breaking changes**
The dashboard and Live runs page no longer show transcripts inside
cards. Open the agent header to inspect a run. There are no API or
database changes.
**Additional context**
Related public work found during the duplicate search:
- Refs #4317 — related run-state display concerns. This change does not
change server state reconciliation.
- Refs #11394 — related live-run cache updates. This change retains the
existing data flow.
- Refs #2118 — related navigation from agent cards. The card header here
opens the specific run.
## What Changed
- Apply compact cards to the dashboard and Live runs page, with status
icons and theme tokens.
- Use 16 × 16px status icons in the shared cards, including the
missing-task clock.
- Keep the existing circular initials avatar. Remove the status chip
beside the agent name while preserving the run label for tooltips and
accessibility.
- Replace the shared in-progress task glyph with an animated open
circle. Use the same 10-unit radius and 2-unit stroke as the other task
glyphs, with a reduced-motion guard across all task status surfaces.
This is the requested workflow-status indicator across the app,
including between runs; live indicators separately report active
execution.
- Use the same Tailwind blue tokens as nav dots and Live labels for the
progress icon: blue-400 in dark mode and blue-600 in light mode.
Covered-blocked icons follow the same blue token.
- Match the Tasks by Status chart's In Progress bar and legend to the
spinner's theme-aware color token.
- Distribute the three visible dashboard charts across equal-width
desktop columns, preserving existing gaps, card padding, and page
margins. Retain four columns when the optional priority chart is
enabled.
- Use the done task icon's `--status-task-icon-done` token for green
bars in Run Activity, Tasks by Status, and Success Rate, including their
legends.
- Use the blocked task icon's `--status-task-icon-blocked` token for red
bars and legends in Run Activity, Tasks by Status, Success Rate, and
priority charts.
- Align Recent Tasks live counts to the sidebar's right edge. Reveal the
ellipsis over a fading row surface on hover, keyboard focus, and while
its menu is open, without moving the label or count.
- Keep the ellipsis backdrop synchronized with the row background during
fade-out, using the actual sidebar surface in both themes to prevent a
darker flash.
- On coarse-pointer devices, reserve space for the always-visible
ellipsis and disable its fade so the live count remains readable beside
it.
- Order desktop dashboard Recent Tasks as status icon, task title, agent
avatar/name, 11px monospace task ID, then timestamp. In narrow cards,
keep the ID right-aligned beside the truncated title and place the agent
and timestamp on the second line.
- Give both dashboard lists the same 48px desktop rows, 24px leading
slots, 80px desktop task ID columns, and 64px right-aligned timestamp
columns. Use an 8px icon-to-content gap matching the task detail
heading. Narrow layouts use matching 76px rows with intrinsic-width IDs
on the title line; activity timestamps stay below.
- Order dashboard Recent Activity as actor avatar, actor name, verb,
task title, 11px monospace task ID, then timestamp. Use direct verbs
such as “Board read …” instead of “issue read marked”. Truncate titles
to preserve IDs and timestamps; keep full names and titles in tooltips.
- Use 12px task status icons in the top breadcrumb and Properties status
row. Keep the main task title icon at 20px.
- Reduce monospace task IDs to the 11px micro type token in breadcrumbs
and shared run cards, aligning them to the adjacent task titles' text
baseline while keeping status icons centered.
- Show the task title and identifier in one bordered row. Keep
missing-task links usable and show lookup failures.
- Remove the recovery chip and place the timestamp below the task row.
- Keep the link to all runs available when the dashboard has four or
fewer runs.
- Avoid transcript polling for compact cards.
- Fix bundled Inter font URLs and update the design guide and Storybook
fixtures.
- Cover run navigation, task status, failed lookups, shared icon sizes
and stroke, and reduced-motion-safe animation in tests.
## Verification
- Latest review fixes: targeted SidebarRecentTasks, SidebarNavItem,
StatusGlyph, StatusIcon, ActiveAgentsPanel, activity-format,
ui-font-assets, and Dashboard suites — 65 tests pass, including
read/unread verbs and reduced-motion-safe task animation.
- `pnpm --filter @paperclipai/ui typecheck` — passes.
- `pnpm check:token-gates` — all gates pass.
- `git diff --check` — passes.
- Related component suites passed during development: run cards, status
glyphs, breadcrumbs, issue properties, charts, sidebar navigation,
recent-task actions, and settings sidebar.
- Full repository `pnpm -r typecheck` and `pnpm build` pass on the final
commit using the temporary Rust toolchain. Storybook build passed
earlier in preparation.
- All CI gates pass on `c85e949b12b471d425d216caa609aee41dc58bde`: all
general/workspace and serialized server test shards, all three browser
shards, build/runner verification, typecheck/release registry, canary
dry run, policy, and security checks. The duplicate local `pnpm
test:run` was stopped after CI completed the same test suites; it is not
claimed as a completed local pass. The two Storybook jobs are skipped by
the configured draft-PR workflow.
- Greptile reviewed the final commit at 5/5 with no actionable findings
and zero unresolved review threads.
- Browser measurements at 1654px, 860px, and 390px confirm matching 48px
desktop and 76px narrow rows (plus 1px dividers), right-aligned IDs on
the title line, 64px timestamp slots, and no horizontal overflow. Narrow
Recent Tasks rows retain readable agent names below the title. Activity
reads as actor, verb, title, ID, time. Additional reference details can
expand an activity row.
- Verified three equal-width desktop charts with 16px gaps and aligned
outer edges. Chart blues, greens, and reds resolve to the matching
task-icon tokens.
- Verified real queued, running, succeeded, failed, cancelled, and
timed-out runs in the dev dashboard. Checked compact cards, task/run
links, timestamps, light/dark themes, and narrow layout.
- To inspect: open Dashboard, then Live runs. Both pages use the same
small cards. Open an agent header for run output, or the task row for
task details.
- Verified the updated spinner on the real dashboard cards, Recent
tasks, and task list. Checked actual SVG circle radius, rendered size,
and stroke width. Confirmed the spinner, nav dots, and Live labels
resolve to the identical blue-400 color in the dark-mode preview; light
mode uses their shared blue-600 token.
- Verified 12px computed width and height in the task breadcrumb and
Properties pane, the restored 20px main task icon, and 11px task IDs
with baseline alignment in the breadcrumb and shared dashboard/Live runs
cards.
- Verified the chart bar and legend resolve to the spinner color; Recent
Tasks counts align with Dashboard's count. Checked the fading ellipsis
overlay with keyboard focus and its open-menu state, then dismissed the
menu.
## Risks
- Operators must open run details to read output that was previously
embedded.
- Run outcomes are available in the header tooltip and run details
instead of a visible status chip. An in-progress task icon reflects task
status, independently of an individual run's outcome.
- Long names and task titles truncate within the compact layout. Full
labels remain available through links and tooltips.
- Font loading changes affect all UI text that uses the bundled Inter
font. The files remain served from the existing public fonts directory.
- No schema, API, adapter, or execution-policy changes.
## Model Used
OpenAI Codex, GPT-6 Astra (`gpt-6-astra`), with extended reasoning,
repository tools, code execution, and browser verification. The session
does not expose the context-window size.
## Checklist
- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have searched GitHub for duplicate or related PRs and linked
them above
- [x] I have either (a) linked existing issues with `Fixes: #` / `Closes
#` / `Refs #` OR (b) described the issue in-PR following the relevant
issue template
- [x] I have not referenced internal/instance-local Paperclip issues or
links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip`
URLs)
- [x] My branch name describes the change (e.g. `docs/...`, `fix/...`)
and contains no internal Paperclip ticket id or instance-derived details
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] All Paperclip CI gates are green
- [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups
- [x] I will address all Greptile and reviewer comments before
requesting merge
---------
Co-authored-by: Scott Tong <scott@scotts-mbp-m5-max.local>
Co-authored-by: Paperclip <noreply@paperclip.ing>
9b7bd41833