feat(web): add global approval banner so blocked tasks are visible without scrolling

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

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

No due date set.

Depends on

#1163 refactor(shared): single TaskStatus enum replaces dual db-status / ui_status split

charles/agent-hooks

Reference

charles/agent-hooks#1167

claude-desktop commented

2026-05-14 22:05:20 +00:00

Collaborator

As a dashboard operator, I want to be notified immediately when any running task requires my approval, so that I don't miss a blocked task that is silently waiting deep in the event log.

Acceptance criteria

Banner component

<GlobalApprovalBanner> sticky component rendered in the root layout when ≥1 task has a pending approval_pending event
Banner text: "N task(s) awaiting your approval" with a direct link to the first blocked task's drawer
Multiple blocked tasks: arrow buttons cycle through all blocked tasks without leaving the current route
Dismisses automatically when all approval gates are resolved (SSE-driven, no polling)
Visual: warning/amber color (not error red — approval is not failure)
Positioned above main content, below nav bar; overlay positioning (does not push page content)
Screen reader: role="alert" on the banner element

Routing

Active in /board, /workspace, /agents/live, /agents/roster
Not shown on settings routes

Data

Blocked task detection derived from existing SSE task stream (ui_status === "waiting" with latest event type approval_pending)
No new API endpoint required

Quality

just qa passes

Out of scope

Auto-approving / auto-denying from the banner (still requires the inline <ApprovalCard>)
Approval history log

References

agent-output-unification audit 2026-05-15
Inconsistency: "Approval Gate UX" (HIGH)

As a dashboard operator, I want to be notified immediately when any running task requires my approval, so that I don't miss a blocked task that is silently waiting deep in the event log. ### Acceptance criteria #### Banner component - [ ] `<GlobalApprovalBanner>` sticky component rendered in the root layout when ≥1 task has a pending `approval_pending` event - [ ] Banner text: "N task(s) awaiting your approval" with a direct link to the first blocked task's drawer - [ ] Multiple blocked tasks: arrow buttons cycle through all blocked tasks without leaving the current route - [ ] Dismisses automatically when all approval gates are resolved (SSE-driven, no polling) - [ ] Visual: warning/amber color (not error red — approval is not failure) - [ ] Positioned above main content, below nav bar; overlay positioning (does not push page content) - [ ] Screen reader: `role="alert"` on the banner element #### Routing - [ ] Active in `/board`, `/workspace`, `/agents/live`, `/agents/roster` - [ ] Not shown on settings routes #### Data - [ ] Blocked task detection derived from existing SSE task stream (`ui_status === "waiting"` with latest event type `approval_pending`) - [ ] No new API endpoint required #### Quality - [ ] `just qa` passes ### Out of scope - Auto-approving / auto-denying from the banner (still requires the inline `<ApprovalCard>`) - Approval history log ### References - agent-output-unification audit 2026-05-15 - Inconsistency: "Approval Gate UX" (HIGH)

claude-desktop added this to the agent-output-unification milestone

claude-desktop added the

labels

claude-desktop referenced this issue

2026-05-14 23:27:23 +00:00

feat(web): add global approval banner so blocked tasks are visible without scrolling #1177

claude-desktop added a new dependency

2026-05-14 23:28:31 +00:00