Show animated workflow alerts in the V2 UI #1553

Summary

Part of #1543 (Track N2). The classic UI pops up a modal for workflow alerts (templates/base.html ~315-650, static/js/notifications.js ~440-1180). V2 shows nothing until N1's bell. Bring the pop-up to V2 as a small animated notice with a bell that rings visually (no sound) and opens into the full alert card.

User Value

Workflow alerts exist to get attention when something needs it, such as urgent email or a failed run. A small animated notice gets that attention without interrupting typing, and the full card explains why the alert fired and what to do next.

Proposed Behavior

• When it appears:
  • only for alerts whose workflow asks for a pop-up (delivery: popup), never for notify-only alerts or Phase 6b chat post-backs
  • only in a visible tab, and each alert in only one tab (claimed in localStorage)
  • not while a dialog is open
  • it reuses N1's poller and fetches /api/notifications/workflow-alerts only on first load, when the unread count rises, and when the tab comes back
• Two entrance styles, tried in a lab; one ships:
  • A. Sidebar callout that drops down from under My Workspace, overlaying the items below so the conversation list never jumps, and flying out beside the icon when the rail is collapsed
  • B. Top-center pill that slides down from the top of the content column, below the classification banner
• Both show a ringing bell icon, the workflow name, a priority tag, the alert title, and "+2 more" when others are waiting. Close hides the notice and leaves the alert unread.
• How long it stays: info, low and medium tuck into the bell after about 8 seconds (paused on hover or focus). High and critical stay until opened or closed.
• The full alert card grows out of the notice and uses the shared Modal shell. It shows a priority header band, Why you're seeing this (trigger reason and matched rules), the summary and details, enrichment chips, the alert's own links, Open workflow (later Open run), Ask about this once 6a ships, Mark read, Dismiss, and "1 of 3" with Next and Mark all read.
• Priority styling maps WORKFLOW_ALERT_PRIORITY_CONFIG (functions_notifications.py:38-59) to V2 tokens. The label and icon carry the meaning, never color alone.
• Alert storms group by workflow with a count, and only one notice is on screen at a time, highest priority first.
• Motion: CSS keyframes for the entrance and the bell swing, the Web Animations API for grow and tuck, transform and opacity only, and no new dependency. When prefers-reduced-motion is set, a fade is used instead; the code checks it directly because the global CSS rule doesn't reach element.animate().
• Accessibility: the notice never takes focus. Announcements are polite, or assertive for critical alerts. The card moves focus in and hands it back following V2's dialog convention.
• Untrusted text: summaries and details render as plain text, and links open only same-origin paths through N1's link resolver.
• Alert lab: a dev-only route (/v2/dev/alert-lab), registered only under import.meta.env.DEV, with sample alerts for every priority and category and controls for entrance style, theme, rail state, viewport and reduced motion. Review Playwright screenshots and short recordings of both styles, pick one, and delete the other. Recordings stay out of the repo.
• A small server change bounds get_unread_workflow_priority_notifications (functions_notifications.py:1013), which today reads 60 days of workflow alerts and filters them in Python.

Acceptance Criteria

• The chosen style works with the rail expanded, collapsed and on mobile.
• Every priority and category looks right in light and dark themes, with sufficient contrast.
• Notify-only alerts never pop up, and each alert shows once across tabs.
• Timers, grouping and card actions work, and reduced motion is respected.
• The production bundle contains no lab code.
• Playwright coverage, release notes and config.py version.

Notes

• Roadmap: §6, Track N, N2 and decision 17 in §2. Related gotchas in §8: 49–57.
• Open decisions (§9), with recommendations: pick the entrance style in the lab review, judged with the rail collapsed and on a 360 px phone; pop up only unread alerts from the last 24 hours and leave older ones in the bell; keep the lab as a dev-only test bed.
• Depends on: N1 (Add a notification bell, panel and desktop notifications to the V2 UI #1554).