UI-1: Monitor tasks → slide-out drawer (kill /monitor/tasks + /monitor/task/:id) #397
Labels
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
No milestone
No project
No assignees
1 participant
dev
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
charles/claude-hooks#397
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
As an operator, I want task inspection to be a drawer overlay on the pipeline view, not a separate page, so that I can drill into a failing task without losing context of the surrounding issue stages.
Why
/monitor(pipeline-centric, issue rows + stage pills) and/monitor/tasks(task-centric, three-pane list+detail) duplicate the same/issues/pipeline+/historydata with different mental models. Operator must choose between two metaphors before knowing what they want./monitor/task/$taskIdis just a deeplink wrapper around the same TaskDetail component. UX audit (2026-04-26) shows 2-3 page hops to answer "why did task X fail?".Acceptance criteria
Drawer surface
/monitorgains a slide-out right-side drawer triggered by:?detail=$taskId(bookmarkable)TaskDetailcomponent (event log, status, cost, turns, error) full-height on the right ~400-500px wide?detail=from URLRoute deletions
apps/web/src/routes/monitor.tasks.tsxapps/web/src/routes/monitor.task.$taskId.tsxapps/web/src/routes/monitor.grid.tsx(already a redirect)monitor.tsxbeforeLoad(or root router) so bookmarked URLs land cleanly:/monitor/tasks→/monitor?detail=latestwith toast "Tasks view is now a drawer"/monitor/task/$taskId→/monitor?detail=$taskId/monitor/grid→/monitor?view=gridSSE consolidation
useTaskSSE(taskId)hook reused by the drawerTests
monitor.index.test.tsxcovers: drawer opens on?detail=, closes on X / param drop, list filtering matches pipeline filter, deeplink pasting opens drawer pre-selectedbun run qacleanDocs
apps/web/CLAUDE.mdif the drawer is the first instance of the slide-out pattern (codify width + elevation —shadow-liftedper existing convention)/monitor/tasksfrom any spec / runbookOut of scope
/monitor/issue/.../ganttinto a tab (that's UI-2, sibling)StorageStrip/AgentChipsfrom the deletedmonitor.tasks.tsx— audit them; if redundant with pipeline-view filters, just delete; if still needed, separate ticketReferences
apps/web/src/routes/monitor.index.tsx— primary surface to extendapps/web/src/routes/monitor.tasks.tsx— source of three-pane layout to fold into drawerapps/web/src/routes/monitor.task.$taskId.tsx— bookmarkable detail pattern to preserve via?detail=paramapps/web/CLAUDE.md— drawer styling (width, shadow-lifted, rounded-card)