feat(emcn/toast): toast redesign — intent variants, stacking, hover reveal, dismiss-all

[andresdjasso]

Re-cut cleanly off latest staging (the original #4907 was accidentally branched off improvement/platform, which is now merged into staging — hence its conflicts). This is the same toast work as commit b92ea33, applied conflict-free on staging.

What changed

• Variants default/info/success/warning/error, each with a distinct outline icon (CircleAlert/TriangleAlert/CircleCheck/Info/Bell) rendered inline with the message in a neutral color — no badge; intent reads from icon + copy.
• Stacking (Sonner/Base-UI style): collapsed pile that fans open upward only when the cards are hovered; one fixed-duration expo-out tween so rapid arrivals move in unison. Cards arrive collapsed.
• Title vs subtext hierarchy (medium primary title + lighter description); notifyBlockError splits block name (title) / error (subtext).
• Hover text reveal: truncated cards reveal hidden lines on hover — only the hidden lines blur in; card height tracks content so the action button stays pinned. Larger bottom gradient fade.
• Concentric corner radius (16px = chip 8px + 8px padding); single-line cards use a tighter 12px.
• Dismiss-all control: small circular chip just outside the stack's bottom-left at 2+ toasts — linear auto-dismiss ring (restarts on each new arrival), pauses on hover, click to clear all; spring "pop" entrance.
• Fixes: route-scoped clearing, dedup of the add/update double-fire, persistent actionable toasts.
• Demo: EMCN playground (/playground → Toast section).

The playground/page.tsx diff looks large but is 107 real lines (import + ToastProvider wrap + the demo section) — the rest is re-indentation from the wrapper. Use "Hide whitespace" to review.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Jun 9, 2026 3:49am

[cursor]

PR Summary

Medium Risk
Large toast rewrite affects all imperative notifications app-wide; behavior changes (navigation clearing, dedup, modal vs toast errors) need UX regression passes on workflow runs and offline/reconnect flows.

Overview
EMCN toast is rebuilt on framer-motion: info / warning variants, tinted outline icons, title+description hierarchy, Sonner-style collapsed stack that fans on hover/focus, hover reveal for truncated text, and a dismiss-all ring at 2+ toasts. Action toasts default to persistent; persistAcrossRoutes keeps connection/offline toasts across navigation while route-scoped toasts clear on pathname change. Per-toast CountdownRing and the old CSS enter/exit keyframes are removed.

Call-site behavior: block errors use block name as title and error as description, with ~1.5s dedup per execution; workspace reconnect/offline toasts set persistAcrossRoutes. Billing alerts become toast.error; credential/data-drain submit failures move to ChipModalError; Slack manifest copy failure is inline in the wizard.

Playground wraps in ToastProvider and adds a Toast demo section (plus re-indent from the wrapper).

^{Reviewed by Cursor Bugbot for commit cedc175. Configure here.}

[greptile-apps]

Greptile Summary

Full redesign of the EMCN toast system: five intent variants (default/info/success/warning/error) with outline icons, Sonner-style collapsed stacking that fans open on hover, hover-reveal for truncated text via RevealText, a StackDismiss ring (pauses on hover, fires on completion), persistAcrossRoutes flag for global toasts, and route-scoped clearing on navigation. Accompanying callsites migrate alert() calls and modal-scoped errors to toast.error() and ChipModalError respectively.

• toast.tsx — complete rewrite using framer-motion for all layout transitions; per-toast timers are superseded by the stack ring at 2+ toasts; hasPersistentToast pins the ring to click-only so actionable toasts can't be auto-cleared; the addToast eviction path prefers auto-dismissable candidates; heights reconciliation guards against eviction leaks.
• store.ts — notifyBlockError gains a 1 500 ms dedup window keyed on blockId + executionId + message, and block name is split into the toast title with the error text as description.
• Callsite sweep — persistAcrossRoutes: true on realtime/offline toasts; alert() → toast.error() in upgrade hooks; clipboard/add-people/data-drain errors moved inline with ChipModalError or local state.

Confidence Score: 5/5

Safe to merge — the toast rewrite is self-contained, the animation and timer logic handles all edge cases correctly, and the callsite sweep is consistent.

The timer logic (stack ring vs. per-toast timers), height reconciliation, persistent-toast pinning, and route-scoped clearing all behave correctly under the scenarios I traced. The only comment is a housekeeping note about editing globals.css, which is a cleanup deletion of dead keyframe code and has no runtime impact.

No files require special attention beyond the globals.css edit noted in the review.

Important Files Changed

Filename	Overview
apps/sim/components/emcn/components/toast/toast.tsx	Core toast rewrite: adds framer-motion stacking/expand/collapse, five intent variants with outline icons, RevealText hover-reveal, StackDismiss ring, persistAcrossRoutes flag, route-scoped clearing, and timer/dedup fixes. Logic is sound; all edge cases (persistent-toast pin, arrivalCount reset key, height reconciliation) are well handled.
apps/sim/stores/terminal/console/store.ts	Adds dedup window for block-error toasts (keyed by block execution + message), splits title/description in the toast call, and passes blockId/executionId to notifyBlockError. Uses existing normalizeConsoleError and getBlockExecutionKey helpers correctly.
apps/sim/app/_styles/globals.css	Removes five keyframe animations (notification-enter/exit, toast-enter/exit, notification-countdown) that are now superseded by framer-motion. Cleanup is correct but touches the globally-shared CSS file.
apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx	Marks realtime-status and offline-notification toasts with persistAcrossRoutes: true so they survive navigation — correct fix for the new route-clearing behavior.
apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/add-people-modal.tsx	Moves add-people error from an ephemeral toast to an inline ChipModalError, which is scoped to the modal and survives route changes. State resets correctly on close and on submit.
apps/sim/app/playground/page.tsx	Wraps the playground in ToastProvider and adds a Toast demo section with all five variants. PR description correctly notes the bulk of the diff is re-indentation.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[toast.error / toast.success / etc.] --> B[addToast]
B --> C{stack length > STACK_LIMIT?}
C -- No --> D[append to toasts]
C -- Yes --> E[evict oldest auto-dismissable]
E --> D
D --> F[arrivalCount++]
F --> G{toasts.length >= 2?}
G -- Yes --> H[StackDismiss ring visible]
G -- No --> I[per-toast timer set]
H --> J{hasPersistentToast?}
J -- No --> K[ring auto-fires in 6s]
J -- Yes --> L[ring click-only, no countdown]
K --> M[dismissAllToasts]
I --> N[dismissToast after duration]
P[hover stack] --> Q[expanded = true, timers cleared, ring paused]
Q --> R[unhover]
R --> S{stackAutoDismiss?}
S -- Yes --> T[ring resumes]
S -- No --> U[per-toast timers restart full duration]
V[navigation] --> W[dismissRouteScopedToasts]
W --> X{persistAcrossRoutes?}
X -- Yes --> Y[toast survives]
X -- No --> Z[toast removed]

Loading

_{Reviews (7): Last reviewed commit: "fix(emcn/toast): reset expanded when the..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit cedc175. Configure here.}