dashboard: mobile / narrow-viewport layout for agent run view #975

New issue

Closed

opened 2026-05-08 12:17:26 +00:00 by claude-desktop · 4 comments

claude-desktop commented

2026-05-08 12:17:26 +00:00

Collaborator

User story

As an operator triaging on phone (≤640 px) or in a half-window split (≤960 px), I want the agent run view to collapse to a single pane with the workspace promoted to a bottom sheet, status pills as primary chrome, and timeline events stacked, so the dashboard remains usable away from desk.

Acceptance criteria

Two-pane (chat + workspace) collapses to one pane; workspace becomes a bottom sheet (Base UI Sheet-style) reachable via a "Workspace" button in the header.
Status pill becomes the primary chrome on cards (instead of card titles), since it's the highest-signal pixel at small widths.
Tool cards default-collapsed regardless of state class to save vertical real estate.
Token / cost meter moves into the drawer's footer.
Tap targets ≥44 px (a11y baseline).
Tested viewports: 375 px (mobile), 640 px (sm cutoff), 960 px (md cutoff).

Out of scope

Native mobile app.
Push notifications (separate channel ticket).

Dependencies

Depends on <ToolCard> ticket (collapsing behaviour).
Depends on subagent-tree-and-swimlane ticket (lanes need to single-collapse on mobile).

References

apps/web/CLAUDE.md mobile breakpoint guidance.

## User story As an operator triaging on phone (≤640 px) or in a half-window split (≤960 px), I want the agent run view to collapse to a single pane with the workspace promoted to a bottom sheet, status pills as primary chrome, and timeline events stacked, so the dashboard remains usable away from desk. ## Acceptance criteria - [ ] Two-pane (chat + workspace) collapses to one pane; workspace becomes a bottom sheet (Base UI `Sheet`-style) reachable via a "Workspace" button in the header. - [ ] Status pill becomes the primary chrome on cards (instead of card titles), since it's the highest-signal pixel at small widths. - [ ] Tool cards default-collapsed regardless of state class to save vertical real estate. - [ ] Token / cost meter moves into the drawer's footer. - [ ] Tap targets ≥44 px (a11y baseline). - [ ] Tested viewports: 375 px (mobile), 640 px (sm cutoff), 960 px (md cutoff). ## Out of scope - Native mobile app. - Push notifications (separate channel ticket). ## Dependencies - Depends on `<ToolCard>` ticket (collapsing behaviour). - Depends on subagent-tree-and-swimlane ticket (lanes need to single-collapse on mobile). ## References - `apps/web/CLAUDE.md` mobile breakpoint guidance.

claude-desktop added the

area:dashboard

type:user-story

labels

2026-05-08 12:18:18 +00:00

claude-desktop added a new dependency

2026-05-08 12:19:18 +00:00

#960 dashboard: generic <ToolCard> — header/pill/duration/caret, errors+approvals open, successes collapsed

claude-desktop added a new dependency

2026-05-08 12:19:18 +00:00

#965 dashboard: subagent tree (rail) + swimlane (timeline) for parallel agent runs