diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index ab696279ffe..2048673ec50 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -844,59 +844,6 @@ input[type="search"]::-ms-clear {
   }
 }
 
-@keyframes notification-enter {
-  from {
-    opacity: 0;
-    transform: translateX(calc(var(--stack-offset, 0px) - 8px)) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(var(--stack-offset, 0px)) scale(1);
-  }
-}
-
-@keyframes notification-countdown {
-  from {
-    stroke-dashoffset: 0;
-  }
-  to {
-    stroke-dashoffset: 34.56;
-  }
-}
-
-@keyframes notification-exit {
-  from {
-    opacity: 1;
-    transform: translateX(var(--stack-offset, 0px)) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(calc(var(--stack-offset, 0px) + 8px)) scale(0.97);
-  }
-}
-
-@keyframes toast-enter {
-  from {
-    opacity: 0;
-    transform: translateX(var(--stack-offset, 0px)) translateY(8px) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(var(--stack-offset, 0px)) translateY(0) scale(1);
-  }
-}
-
-@keyframes toast-exit {
-  from {
-    opacity: 1;
-    transform: translateX(var(--stack-offset, 0px)) translateY(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(var(--stack-offset, 0px)) translateY(8px) scale(0.97);
-  }
-}
-
 /* WandPromptBar status indicator */
 @keyframes smoke-pulse {
   0%,
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index 1cc5ddf50b3..bd5a2ebb64f 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -78,9 +78,11 @@ import {
   type TagItem,
   Textarea,
   TimePicker,
+  ToastProvider,
   Tooltip,
   Trash,
   Trash2,
+  toast,
   Undo,
   Wrap,
   ZoomIn,
@@ -164,809 +166,910 @@ export default function PlaygroundPage() {
   }
 
   return (
-    <Tooltip.Provider>
-      <div className='relative min-h-screen bg-[var(--bg)] p-8'>
-        <div className='absolute top-8 left-8 flex items-center gap-2'>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button variant='ghost' onClick={() => router.back()} className='size-8 p-0'>
-                <ArrowLeft className='size-4' />
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content>Go back</Tooltip.Content>
-          </Tooltip.Root>
-        </div>
-        <div className='absolute top-8 right-8'>
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button variant='default' onClick={toggleDarkMode} className='size-8 p-0'>
-                {isDarkMode ? <Sun className='size-4' /> : <Moon className='size-4' />}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content>{isDarkMode ? 'Light mode' : 'Dark mode'}</Tooltip.Content>
-          </Tooltip.Root>
-        </div>
-        <div className='mx-auto max-w-4xl space-y-12'>
-          <div>
-            <h1 className='font-semibold text-2xl text-[var(--text-primary)]'>
-              EMCN Component Playground
-            </h1>
-            <p className='mt-2 text-[var(--text-secondary)]'>
-              All emcn UI components and their variants
-            </p>
+    <ToastProvider>
+      <Tooltip.Provider>
+        <div className='relative min-h-screen bg-[var(--bg)] p-8'>
+          <div className='absolute top-8 left-8 flex items-center gap-2'>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button variant='ghost' onClick={() => router.back()} className='size-8 p-0'>
+                  <ArrowLeft className='size-4' />
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content>Go back</Tooltip.Content>
+            </Tooltip.Root>
           </div>
-
-          {/* Button */}
-          <Section title='Button'>
-            <VariantRow label='default'>
-              <Button variant='default'>Default</Button>
-            </VariantRow>
-            <VariantRow label='active'>
-              <Button variant='active'>Active</Button>
-            </VariantRow>
-            <VariantRow label='3d'>
-              <Button variant='3d'>3D</Button>
-            </VariantRow>
-            <VariantRow label='outline'>
-              <Button variant='outline'>Outline</Button>
-            </VariantRow>
-            <VariantRow label='primary'>
-              <Button variant='primary'>Primary</Button>
-            </VariantRow>
-            <VariantRow label='destructive'>
-              <Button variant='destructive'>Destructive</Button>
-            </VariantRow>
-            <VariantRow label='secondary'>
-              <Button variant='secondary'>Secondary</Button>
-            </VariantRow>
-            <VariantRow label='tertiary'>
-              <Button variant='tertiary'>Tertiary</Button>
-            </VariantRow>
-            <VariantRow label='ghost'>
-              <Button variant='ghost'>Ghost</Button>
-            </VariantRow>
-            <VariantRow label='ghost-secondary'>
-              <Button variant='ghost-secondary'>Ghost Secondary</Button>
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <Button disabled>Disabled</Button>
-            </VariantRow>
-            <VariantRow label='size sm'>
-              <Button size='sm'>Small</Button>
-              <Button size='sm' variant='primary'>
-                Small Primary
-              </Button>
-            </VariantRow>
-            <VariantRow label='size md'>
-              <Button size='md'>Medium</Button>
-              <Button size='md' variant='primary'>
-                Medium Primary
-              </Button>
-            </VariantRow>
-          </Section>
-
-          {/* ButtonGroup */}
-          <Section title='ButtonGroup'>
-            <VariantRow label='default'>
-              <ButtonGroup value={buttonGroupValue} onValueChange={setButtonGroupValue}>
-                <ButtonGroupItem value='curl'>cURL</ButtonGroupItem>
-                <ButtonGroupItem value='python'>Python</ButtonGroupItem>
-                <ButtonGroupItem value='javascript'>JavaScript</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
-            <VariantRow label='gap none'>
-              <ButtonGroup value='opt1' gap='none'>
-                <ButtonGroupItem value='opt1'>Option 1</ButtonGroupItem>
-                <ButtonGroupItem value='opt2'>Option 2</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
-            <VariantRow label='gap sm'>
-              <ButtonGroup value='opt1' gap='sm'>
-                <ButtonGroupItem value='opt1'>Option 1</ButtonGroupItem>
-                <ButtonGroupItem value='opt2'>Option 2</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <ButtonGroup value='opt1' disabled>
-                <ButtonGroupItem value='opt1'>Option 1</ButtonGroupItem>
-                <ButtonGroupItem value='opt2'>Option 2</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
-            <VariantRow label='single item'>
-              <ButtonGroup value='only'>
-                <ButtonGroupItem value='only'>Only Option</ButtonGroupItem>
-              </ButtonGroup>
-            </VariantRow>
-          </Section>
-
-          {/* Badge */}
-          <Section title='Badge'>
-            <VariantRow label='default'>
-              <Badge variant='default'>Default</Badge>
-            </VariantRow>
-            <VariantRow label='outline'>
-              <Badge variant='outline'>Outline</Badge>
-            </VariantRow>
-            <VariantRow label='type'>
-              <Badge variant='type'>Type</Badge>
-            </VariantRow>
-            <VariantRow label='green'>
-              <Badge variant='green'>Green</Badge>
-              <Badge variant='green' dot>
-                With Dot
-              </Badge>
-            </VariantRow>
-            <VariantRow label='red'>
-              <Badge variant='red'>Red</Badge>
-              <Badge variant='red' dot>
-                With Dot
-              </Badge>
-            </VariantRow>
-            <VariantRow label='blue'>
-              <Badge variant='blue'>Blue</Badge>
-              <Badge variant='blue' dot>
-                With Dot
-              </Badge>
-            </VariantRow>
-            <VariantRow label='blue-secondary'>
-              <Badge variant='blue-secondary'>Blue Secondary</Badge>
-            </VariantRow>
-            <VariantRow label='purple'>
-              <Badge variant='purple'>Purple</Badge>
-            </VariantRow>
-            <VariantRow label='orange'>
-              <Badge variant='orange'>Orange</Badge>
-            </VariantRow>
-            <VariantRow label='amber'>
-              <Badge variant='amber'>Amber</Badge>
-            </VariantRow>
-            <VariantRow label='teal'>
-              <Badge variant='teal'>Teal</Badge>
-            </VariantRow>
-            <VariantRow label='cyan'>
-              <Badge variant='cyan'>Cyan</Badge>
-            </VariantRow>
-            <VariantRow label='gray'>
-              <Badge variant='gray'>Gray</Badge>
-            </VariantRow>
-            <VariantRow label='gray-secondary'>
-              <Badge variant='gray-secondary'>Gray Secondary</Badge>
-            </VariantRow>
-            <VariantRow label='sizes'>
-              <Badge size='sm'>Small</Badge>
-              <Badge size='md'>Medium</Badge>
-              <Badge size='lg'>Large</Badge>
-            </VariantRow>
-          </Section>
-
-          {/* Input */}
-          <Section title='Input'>
-            <VariantRow label='default'>
-              <Input placeholder='Enter text...' className='max-w-xs' />
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <Input placeholder='Disabled' disabled className='max-w-xs' />
-            </VariantRow>
-          </Section>
-
-          {/* TagInput */}
-          <Section title='TagInput'>
-            <VariantRow label='default'>
-              <div className='w-80'>
-                <TagInput
-                  items={tagItems}
-                  onAdd={(value) => {
-                    const isValid = value.includes('@') && value.includes('.')
-                    setTagItems((prev) => [...prev, { value, isValid }])
-                    return isValid
-                  }}
-                  onRemove={(_, index) => {
-                    setTagItems((prev) => prev.filter((_, i) => i !== index))
-                  }}
-                  placeholder='Enter emails...'
-                  placeholderWithTags='Add another'
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='secondary variant'>
-              <div className='w-80'>
-                <TagInput
-                  items={[
-                    { value: 'workflow', isValid: true },
-                    { value: 'automation', isValid: true },
-                  ]}
-                  onAdd={() => true}
-                  onRemove={() => {}}
-                  placeholder='Add tags'
-                  placeholderWithTags='Add another'
-                  triggerKeys={['Enter', ',']}
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <div className='w-80'>
-                <TagInput
-                  items={[{ value: 'disabled@email.com', isValid: true }]}
-                  onAdd={() => false}
-                  onRemove={() => {}}
-                  placeholder='Disabled input'
-                  disabled
-                />
-              </div>
-            </VariantRow>
-          </Section>
-
-          {/* Textarea */}
-          <Section title='Textarea'>
-            <Textarea placeholder='Enter your message...' className='max-w-md' rows={4} />
-          </Section>
-
-          {/* Label */}
-          <Section title='Label'>
-            <div className='flex flex-col gap-2'>
-              <Label htmlFor='demo-input'>Label Text</Label>
-              <Input id='demo-input' placeholder='Input with label' className='max-w-xs' />
+          <div className='absolute top-8 right-8'>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button variant='default' onClick={toggleDarkMode} className='size-8 p-0'>
+                  {isDarkMode ? <Sun className='size-4' /> : <Moon className='size-4' />}
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content>{isDarkMode ? 'Light mode' : 'Dark mode'}</Tooltip.Content>
+            </Tooltip.Root>
+          </div>
+          <div className='mx-auto max-w-4xl space-y-12'>
+            <div>
+              <h1 className='font-semibold text-2xl text-[var(--text-primary)]'>
+                EMCN Component Playground
+              </h1>
+              <p className='mt-2 text-[var(--text-secondary)]'>
+                All emcn UI components and their variants
+              </p>
             </div>
-          </Section>
-
-          {/* Switch */}
-          <Section title='Switch'>
-            <VariantRow label='default'>
-              <Switch checked={switchValue} onCheckedChange={setSwitchValue} />
-              <span className='text-[var(--text-secondary)] text-sm'>
-                {switchValue ? 'On' : 'Off'}
-              </span>
-            </VariantRow>
-          </Section>
-
-          {/* Checkbox */}
-          <Section title='Checkbox'>
-            <VariantRow label='default'>
-              <Checkbox checked={checkboxValue} onCheckedChange={(c) => setCheckboxValue(!!c)} />
-              <span className='text-[var(--text-secondary)] text-sm'>
-                {checkboxValue ? 'Checked' : 'Unchecked'}
-              </span>
-            </VariantRow>
-            <VariantRow label='size sm'>
-              <Checkbox size='sm' />
-              <span className='text-[var(--text-secondary)] text-sm'>Small (14px)</span>
-            </VariantRow>
-            <VariantRow label='size md'>
-              <Checkbox size='md' />
-              <span className='text-[var(--text-secondary)] text-sm'>Medium (16px)</span>
-            </VariantRow>
-            <VariantRow label='size lg'>
-              <Checkbox size='lg' />
-              <span className='text-[var(--text-secondary)] text-sm'>Large (20px)</span>
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <Checkbox disabled />
-              <Checkbox disabled checked />
-            </VariantRow>
-          </Section>
-
-          {/* Slider */}
-          <Section title='Slider'>
-            <VariantRow label='default'>
-              <div className='w-48'>
-                <Slider value={sliderValue} onValueChange={setSliderValue} max={100} step={1} />
-              </div>
-              <span className='text-[var(--text-secondary)] text-sm'>{sliderValue[0]}</span>
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <div className='w-48'>
-                <Slider value={[30]} disabled max={100} step={1} />
-              </div>
-            </VariantRow>
-          </Section>
-
-          {/* Avatar */}
-          <Section title='Avatar'>
-            <VariantRow label='sizes'>
-              <Avatar size='xs'>
-                <AvatarFallback>XS</AvatarFallback>
-              </Avatar>
-              <Avatar size='sm'>
-                <AvatarFallback>SM</AvatarFallback>
-              </Avatar>
-              <Avatar size='md'>
-                <AvatarFallback>MD</AvatarFallback>
-              </Avatar>
-              <Avatar size='lg'>
-                <AvatarFallback>LG</AvatarFallback>
-              </Avatar>
-            </VariantRow>
-            <VariantRow label='with image'>
-              <Avatar size='md'>
-                <AvatarImage src='https://github.com/shadcn.png' alt='User' />
-                <AvatarFallback>CN</AvatarFallback>
-              </Avatar>
-            </VariantRow>
-            <VariantRow label='status online'>
-              <Avatar size='md' status='online'>
-                <AvatarFallback>JD</AvatarFallback>
-              </Avatar>
-            </VariantRow>
-            <VariantRow label='status offline'>
-              <Avatar size='md' status='offline'>
-                <AvatarFallback>JD</AvatarFallback>
-              </Avatar>
-            </VariantRow>
-            <VariantRow label='status busy'>
-              <Avatar size='md' status='busy'>
-                <AvatarFallback>JD</AvatarFallback>
-              </Avatar>
-            </VariantRow>
-            <VariantRow label='status away'>
-              <Avatar size='md' status='away'>
-                <AvatarFallback>JD</AvatarFallback>
-              </Avatar>
-            </VariantRow>
-            <VariantRow label='all sizes with status'>
-              <Avatar size='xs' status='online'>
-                <AvatarFallback>XS</AvatarFallback>
-              </Avatar>
-              <Avatar size='sm' status='online'>
-                <AvatarFallback>SM</AvatarFallback>
-              </Avatar>
-              <Avatar size='md' status='online'>
-                <AvatarFallback>MD</AvatarFallback>
-              </Avatar>
-              <Avatar size='lg' status='online'>
-                <AvatarFallback>LG</AvatarFallback>
-              </Avatar>
-            </VariantRow>
-          </Section>
-
-          {/* Table */}
-          <Section title='Table'>
-            <VariantRow label='default'>
-              <Table className='max-w-md'>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Name</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Role</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow className='hover:bg-[var(--surface-2)]'>
-                    <TableCell>Alice</TableCell>
-                    <TableCell>Active</TableCell>
-                    <TableCell>Admin</TableCell>
-                  </TableRow>
-                  <TableRow className='hover:bg-[var(--surface-2)]'>
-                    <TableCell>Bob</TableCell>
-                    <TableCell>Pending</TableCell>
-                    <TableCell>User</TableCell>
-                  </TableRow>
-                  <TableRow className='hover:bg-[var(--surface-2)]'>
-                    <TableCell>Charlie</TableCell>
-                    <TableCell>Active</TableCell>
-                    <TableCell>User</TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </VariantRow>
-            <VariantRow label='with footer'>
-              <Table className='max-w-md'>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Item</TableHead>
-                    <TableHead className='text-right'>Price</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>Product A</TableCell>
-                    <TableCell className='text-right'>$10.00</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>Product B</TableCell>
-                    <TableCell className='text-right'>$20.00</TableCell>
-                  </TableRow>
-                </TableBody>
-                <TableFooter>
-                  <TableRow>
-                    <TableCell>Total</TableCell>
-                    <TableCell className='text-right'>$30.00</TableCell>
-                  </TableRow>
-                </TableFooter>
-              </Table>
-            </VariantRow>
-            <VariantRow label='with caption'>
-              <Table className='max-w-md'>
-                <TableCaption>A list of team members</TableCaption>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>Name</TableHead>
-                    <TableHead>Department</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow>
-                    <TableCell>Alice</TableCell>
-                    <TableCell>Engineering</TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell>Bob</TableCell>
-                    <TableCell>Design</TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </VariantRow>
-          </Section>
-
-          {/* Combobox */}
-          <Section title='Combobox'>
-            <VariantRow label='default'>
-              <div className='w-48'>
-                <Combobox
-                  options={COMBOBOX_OPTIONS}
-                  value={comboboxValue}
-                  onChange={setComboboxValue}
-                  placeholder='Select option...'
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='size sm'>
-              <div className='w-48'>
-                <Combobox
-                  options={COMBOBOX_OPTIONS}
-                  value=''
-                  onChange={() => {}}
-                  placeholder='Small size'
-                  size='sm'
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='searchable'>
-              <div className='w-48'>
-                <Combobox
-                  options={COMBOBOX_OPTIONS}
-                  value=''
-                  onChange={() => {}}
-                  placeholder='With search'
-                  searchable
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='editable'>
-              <div className='w-48'>
-                <Combobox
-                  options={COMBOBOX_OPTIONS}
-                  value=''
-                  onChange={() => {}}
-                  placeholder='Type or select...'
-                  editable
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='multiSelect'>
-              <div className='w-48'>
-                <Combobox
-                  options={COMBOBOX_OPTIONS}
-                  multiSelectValues={[]}
-                  onMultiSelectChange={() => {}}
-                  placeholder='Select multiple...'
-                  multiSelect
-                  searchable
-                />
-              </div>
-            </VariantRow>
-          </Section>
-
-          {/* TimePicker */}
-          <Section title='TimePicker'>
-            <VariantRow label='default'>
-              <div className='w-48'>
-                <TimePicker value={timeValue} onChange={setTimeValue} placeholder='Select time' />
-              </div>
-              <span className='text-[var(--text-secondary)] text-sm'>{timeValue}</span>
-            </VariantRow>
-            <VariantRow label='size sm'>
-              <div className='w-48'>
-                <TimePicker value='14:00' onChange={() => {}} placeholder='Small size' size='sm' />
-              </div>
-            </VariantRow>
-            <VariantRow label='no value'>
-              <div className='w-48'>
-                <TimePicker placeholder='Select time...' onChange={() => {}} />
-              </div>
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <div className='w-48'>
-                <TimePicker value='09:00' disabled />
-              </div>
-            </VariantRow>
-          </Section>
-
-          {/* DatePicker */}
-          <Section title='DatePicker'>
-            <VariantRow label='single date'>
-              <div className='w-56'>
-                <DatePicker value={dateValue} onChange={setDateValue} placeholder='Select date' />
-              </div>
-              <span className='text-[var(--text-secondary)] text-sm'>{dateValue || 'No date'}</span>
-            </VariantRow>
-            <VariantRow label='size sm'>
-              <div className='w-56'>
-                <DatePicker placeholder='Small size' size='sm' onChange={() => {}} />
-              </div>
-            </VariantRow>
-            <VariantRow label='range mode'>
-              <div className='w-72'>
-                <DatePicker
-                  mode='range'
-                  startDate={dateRangeStart}
-                  endDate={dateRangeEnd}
-                  onRangeChange={(start, end) => {
-                    setDateRangeStart(start)
-                    setDateRangeEnd(end)
+
+            {/* Toast */}
+            <Section title='Toast'>
+              <VariantRow label='default'>
+                <Button variant='default' onClick={() => toast({ message: 'Workflow saved' })}>
+                  Show
+                </Button>
+              </VariantRow>
+              <VariantRow label='info'>
+                <Button variant='default' onClick={() => toast.info('Sync in progress')}>
+                  Show
+                </Button>
+              </VariantRow>
+              <VariantRow label='success'>
+                <Button variant='default' onClick={() => toast.success('Imported 1,240 rows')}>
+                  Show
+                </Button>
+              </VariantRow>
+              <VariantRow label='warning'>
+                <Button
+                  variant='default'
+                  onClick={() =>
+                    toast.warning('Usage nearing limit', {
+                      description: '$4.20 used of $5.00 limit.',
+                    })
+                  }
+                >
+                  Show
+                </Button>
+              </VariantRow>
+              <VariantRow label='error'>
+                <Button
+                  variant='default'
+                  onClick={() =>
+                    toast.error('Jira 1: Read Issue failed', {
+                      description: 'Domain and account are required.',
+                    })
+                  }
+                >
+                  Show
+                </Button>
+              </VariantRow>
+              <VariantRow label='error + action'>
+                <Button
+                  variant='default'
+                  onClick={() =>
+                    toast.error('Workflow Validation', {
+                      description:
+                        'Usage limit exceeded: $0.00 used of $5.00 limit. Please upgrade your plan to continue running this workflow.',
+                      action: { label: 'Fix in Copilot', onClick: () => {} },
+                    })
+                  }
+                >
+                  Show
+                </Button>
+              </VariantRow>
+              <VariantRow label='success + action'>
+                <Button
+                  variant='default'
+                  onClick={() =>
+                    toast.success('Deployed v3', {
+                      action: { label: 'View deployment', onClick: () => {} },
+                    })
+                  }
+                >
+                  Show
+                </Button>
+              </VariantRow>
+              <VariantRow label='stacking'>
+                <Button
+                  variant='default'
+                  onClick={() => {
+                    toast.info('First notification')
+                    toast.warning('Second notification')
+                    toast.error('Third notification')
                   }}
-                  placeholder='Select date range'
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='disabled'>
-              <div className='w-56'>
-                <DatePicker value='2025-01-15' disabled />
+                >
+                  Show 3
+                </Button>
+                <Button variant='ghost' onClick={() => toast.dismissAll()}>
+                  Dismiss all
+                </Button>
+              </VariantRow>
+            </Section>
+
+            {/* Button */}
+            <Section title='Button'>
+              <VariantRow label='default'>
+                <Button variant='default'>Default</Button>
+              </VariantRow>
+              <VariantRow label='active'>
+                <Button variant='active'>Active</Button>
+              </VariantRow>
+              <VariantRow label='3d'>
+                <Button variant='3d'>3D</Button>
+              </VariantRow>
+              <VariantRow label='outline'>
+                <Button variant='outline'>Outline</Button>
+              </VariantRow>
+              <VariantRow label='primary'>
+                <Button variant='primary'>Primary</Button>
+              </VariantRow>
+              <VariantRow label='destructive'>
+                <Button variant='destructive'>Destructive</Button>
+              </VariantRow>
+              <VariantRow label='secondary'>
+                <Button variant='secondary'>Secondary</Button>
+              </VariantRow>
+              <VariantRow label='tertiary'>
+                <Button variant='tertiary'>Tertiary</Button>
+              </VariantRow>
+              <VariantRow label='ghost'>
+                <Button variant='ghost'>Ghost</Button>
+              </VariantRow>
+              <VariantRow label='ghost-secondary'>
+                <Button variant='ghost-secondary'>Ghost Secondary</Button>
+              </VariantRow>
+              <VariantRow label='disabled'>
+                <Button disabled>Disabled</Button>
+              </VariantRow>
+              <VariantRow label='size sm'>
+                <Button size='sm'>Small</Button>
+                <Button size='sm' variant='primary'>
+                  Small Primary
+                </Button>
+              </VariantRow>
+              <VariantRow label='size md'>
+                <Button size='md'>Medium</Button>
+                <Button size='md' variant='primary'>
+                  Medium Primary
+                </Button>
+              </VariantRow>
+            </Section>
+
+            {/* ButtonGroup */}
+            <Section title='ButtonGroup'>
+              <VariantRow label='default'>
+                <ButtonGroup value={buttonGroupValue} onValueChange={setButtonGroupValue}>
+                  <ButtonGroupItem value='curl'>cURL</ButtonGroupItem>
+                  <ButtonGroupItem value='python'>Python</ButtonGroupItem>
+                  <ButtonGroupItem value='javascript'>JavaScript</ButtonGroupItem>
+                </ButtonGroup>
+              </VariantRow>
+              <VariantRow label='gap none'>
+                <ButtonGroup value='opt1' gap='none'>
+                  <ButtonGroupItem value='opt1'>Option 1</ButtonGroupItem>
+                  <ButtonGroupItem value='opt2'>Option 2</ButtonGroupItem>
+                </ButtonGroup>
+              </VariantRow>
+              <VariantRow label='gap sm'>
+                <ButtonGroup value='opt1' gap='sm'>
+                  <ButtonGroupItem value='opt1'>Option 1</ButtonGroupItem>
+                  <ButtonGroupItem value='opt2'>Option 2</ButtonGroupItem>
+                </ButtonGroup>
+              </VariantRow>
+              <VariantRow label='disabled'>
+                <ButtonGroup value='opt1' disabled>
+                  <ButtonGroupItem value='opt1'>Option 1</ButtonGroupItem>
+                  <ButtonGroupItem value='opt2'>Option 2</ButtonGroupItem>
+                </ButtonGroup>
+              </VariantRow>
+              <VariantRow label='single item'>
+                <ButtonGroup value='only'>
+                  <ButtonGroupItem value='only'>Only Option</ButtonGroupItem>
+                </ButtonGroup>
+              </VariantRow>
+            </Section>
+
+            {/* Badge */}
+            <Section title='Badge'>
+              <VariantRow label='default'>
+                <Badge variant='default'>Default</Badge>
+              </VariantRow>
+              <VariantRow label='outline'>
+                <Badge variant='outline'>Outline</Badge>
+              </VariantRow>
+              <VariantRow label='type'>
+                <Badge variant='type'>Type</Badge>
+              </VariantRow>
+              <VariantRow label='green'>
+                <Badge variant='green'>Green</Badge>
+                <Badge variant='green' dot>
+                  With Dot
+                </Badge>
+              </VariantRow>
+              <VariantRow label='red'>
+                <Badge variant='red'>Red</Badge>
+                <Badge variant='red' dot>
+                  With Dot
+                </Badge>
+              </VariantRow>
+              <VariantRow label='blue'>
+                <Badge variant='blue'>Blue</Badge>
+                <Badge variant='blue' dot>
+                  With Dot
+                </Badge>
+              </VariantRow>
+              <VariantRow label='blue-secondary'>
+                <Badge variant='blue-secondary'>Blue Secondary</Badge>
+              </VariantRow>
+              <VariantRow label='purple'>
+                <Badge variant='purple'>Purple</Badge>
+              </VariantRow>
+              <VariantRow label='orange'>
+                <Badge variant='orange'>Orange</Badge>
+              </VariantRow>
+              <VariantRow label='amber'>
+                <Badge variant='amber'>Amber</Badge>
+              </VariantRow>
+              <VariantRow label='teal'>
+                <Badge variant='teal'>Teal</Badge>
+              </VariantRow>
+              <VariantRow label='cyan'>
+                <Badge variant='cyan'>Cyan</Badge>
+              </VariantRow>
+              <VariantRow label='gray'>
+                <Badge variant='gray'>Gray</Badge>
+              </VariantRow>
+              <VariantRow label='gray-secondary'>
+                <Badge variant='gray-secondary'>Gray Secondary</Badge>
+              </VariantRow>
+              <VariantRow label='sizes'>
+                <Badge size='sm'>Small</Badge>
+                <Badge size='md'>Medium</Badge>
+                <Badge size='lg'>Large</Badge>
+              </VariantRow>
+            </Section>
+
+            {/* Input */}
+            <Section title='Input'>
+              <VariantRow label='default'>
+                <Input placeholder='Enter text...' className='max-w-xs' />
+              </VariantRow>
+              <VariantRow label='disabled'>
+                <Input placeholder='Disabled' disabled className='max-w-xs' />
+              </VariantRow>
+            </Section>
+
+            {/* TagInput */}
+            <Section title='TagInput'>
+              <VariantRow label='default'>
+                <div className='w-80'>
+                  <TagInput
+                    items={tagItems}
+                    onAdd={(value) => {
+                      const isValid = value.includes('@') && value.includes('.')
+                      setTagItems((prev) => [...prev, { value, isValid }])
+                      return isValid
+                    }}
+                    onRemove={(_, index) => {
+                      setTagItems((prev) => prev.filter((_, i) => i !== index))
+                    }}
+                    placeholder='Enter emails...'
+                    placeholderWithTags='Add another'
+                  />
+                </div>
+              </VariantRow>
+              <VariantRow label='secondary variant'>
+                <div className='w-80'>
+                  <TagInput
+                    items={[
+                      { value: 'workflow', isValid: true },
+                      { value: 'automation', isValid: true },
+                    ]}
+                    onAdd={() => true}
+                    onRemove={() => {}}
+                    placeholder='Add tags'
+                    placeholderWithTags='Add another'
+                    triggerKeys={['Enter', ',']}
+                  />
+                </div>
+              </VariantRow>
+              <VariantRow label='disabled'>
+                <div className='w-80'>
+                  <TagInput
+                    items={[{ value: 'disabled@email.com', isValid: true }]}
+                    onAdd={() => false}
+                    onRemove={() => {}}
+                    placeholder='Disabled input'
+                    disabled
+                  />
+                </div>
+              </VariantRow>
+            </Section>
+
+            {/* Textarea */}
+            <Section title='Textarea'>
+              <Textarea placeholder='Enter your message...' className='max-w-md' rows={4} />
+            </Section>
+
+            {/* Label */}
+            <Section title='Label'>
+              <div className='flex flex-col gap-2'>
+                <Label htmlFor='demo-input'>Label Text</Label>
+                <Input id='demo-input' placeholder='Input with label' className='max-w-xs' />
               </div>
-            </VariantRow>
-            <VariantRow label='inline'>
-              <DatePicker inline value={dateValue} onChange={setDateValue} />
-            </VariantRow>
-          </Section>
-
-          {/* Breadcrumb */}
-          <Section title='Breadcrumb'>
-            <Breadcrumb
-              items={[
-                { label: 'Home', href: '#' },
-                { label: 'Settings', href: '#' },
-                { label: 'Profile' },
-              ]}
-            />
-          </Section>
-
-          {/* Tooltip */}
-          <Section title='Tooltip'>
-            <VariantRow label='default'>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button variant='default'>Hover me</Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>Tooltip content</Tooltip.Content>
-              </Tooltip.Root>
-            </VariantRow>
-            <VariantRow label='with shortcut'>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button variant='default'>Clear console</Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <Tooltip.Shortcut keys='⌘D'>Clear console</Tooltip.Shortcut>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </VariantRow>
-            <VariantRow label='shortcut only'>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button variant='default'>Save</Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <Tooltip.Shortcut keys='⌘S' />
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </VariantRow>
-          </Section>
-
-          {/* Popover */}
-          <Section title='Popover'>
-            <VariantRow label='default'>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant='default'>Open Popover</Button>
-                </PopoverTrigger>
-                <PopoverContent>
-                  <PopoverSection>Section Title</PopoverSection>
-                  <PopoverItem>Item 1</PopoverItem>
-                  <PopoverItem>Item 2</PopoverItem>
-                  <PopoverItem active>Active Item</PopoverItem>
-                </PopoverContent>
-              </Popover>
-            </VariantRow>
-            <VariantRow label='secondary variant'>
-              <Popover variant='secondary'>
-                <PopoverTrigger asChild>
-                  <Button variant='secondary'>Secondary Popover</Button>
-                </PopoverTrigger>
-                <PopoverContent>
-                  <PopoverItem>Item 1</PopoverItem>
-                  <PopoverItem active>Active Item</PopoverItem>
-                </PopoverContent>
-              </Popover>
-            </VariantRow>
-            <VariantRow label='with search'>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant='default'>Searchable Popover</Button>
-                </PopoverTrigger>
-                <PopoverContent>
-                  <PopoverSearch placeholder='Search items...' />
-                  <PopoverScrollArea className='max-h-40'>
-                    <PopoverItem>Apple</PopoverItem>
-                    <PopoverItem>Banana</PopoverItem>
-                    <PopoverItem>Cherry</PopoverItem>
-                    <PopoverItem>Date</PopoverItem>
-                    <PopoverItem>Elderberry</PopoverItem>
-                  </PopoverScrollArea>
-                </PopoverContent>
-              </Popover>
-            </VariantRow>
-            <VariantRow label='with folders'>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button variant='default'>Folder Navigation</Button>
-                </PopoverTrigger>
-                <PopoverContent>
-                  <PopoverBackButton />
-                  <PopoverItem rootOnly>Root Item</PopoverItem>
-                  <PopoverFolder id='folder1' title='Folder 1' icon={<Folder className='size-3' />}>
-                    <PopoverItem>Nested Item 1</PopoverItem>
-                    <PopoverItem>Nested Item 2</PopoverItem>
-                  </PopoverFolder>
-                  <PopoverFolder id='folder2' title='Folder 2' icon={<Folder className='size-3' />}>
-                    <PopoverItem>Another Nested Item</PopoverItem>
-                  </PopoverFolder>
-                </PopoverContent>
-              </Popover>
-            </VariantRow>
-          </Section>
-
-          {/* Modal */}
-          <Section title='Modal'>
-            <VariantRow label='sizes'>
-              {(['sm', 'md', 'lg', 'xl', 'full'] as const).map((size) => (
-                <Modal key={size}>
+            </Section>
+
+            {/* Switch */}
+            <Section title='Switch'>
+              <VariantRow label='default'>
+                <Switch checked={switchValue} onCheckedChange={setSwitchValue} />
+                <span className='text-[var(--text-secondary)] text-sm'>
+                  {switchValue ? 'On' : 'Off'}
+                </span>
+              </VariantRow>
+            </Section>
+
+            {/* Checkbox */}
+            <Section title='Checkbox'>
+              <VariantRow label='default'>
+                <Checkbox checked={checkboxValue} onCheckedChange={(c) => setCheckboxValue(!!c)} />
+                <span className='text-[var(--text-secondary)] text-sm'>
+                  {checkboxValue ? 'Checked' : 'Unchecked'}
+                </span>
+              </VariantRow>
+              <VariantRow label='size sm'>
+                <Checkbox size='sm' />
+                <span className='text-[var(--text-secondary)] text-sm'>Small (14px)</span>
+              </VariantRow>
+              <VariantRow label='size md'>
+                <Checkbox size='md' />
+                <span className='text-[var(--text-secondary)] text-sm'>Medium (16px)</span>
+              </VariantRow>
+              <VariantRow label='size lg'>
+                <Checkbox size='lg' />
+                <span className='text-[var(--text-secondary)] text-sm'>Large (20px)</span>
+              </VariantRow>
+              <VariantRow label='disabled'>
+                <Checkbox disabled />
+                <Checkbox disabled checked />
+              </VariantRow>
+            </Section>
+
+            {/* Slider */}
+            <Section title='Slider'>
+              <VariantRow label='default'>
+                <div className='w-48'>
+                  <Slider value={sliderValue} onValueChange={setSliderValue} max={100} step={1} />
+                </div>
+                <span className='text-[var(--text-secondary)] text-sm'>{sliderValue[0]}</span>
+              </VariantRow>
+              <VariantRow label='disabled'>
+                <div className='w-48'>
+                  <Slider value={[30]} disabled max={100} step={1} />
+                </div>
+              </VariantRow>
+            </Section>
+
+            {/* Avatar */}
+            <Section title='Avatar'>
+              <VariantRow label='sizes'>
+                <Avatar size='xs'>
+                  <AvatarFallback>XS</AvatarFallback>
+                </Avatar>
+                <Avatar size='sm'>
+                  <AvatarFallback>SM</AvatarFallback>
+                </Avatar>
+                <Avatar size='md'>
+                  <AvatarFallback>MD</AvatarFallback>
+                </Avatar>
+                <Avatar size='lg'>
+                  <AvatarFallback>LG</AvatarFallback>
+                </Avatar>
+              </VariantRow>
+              <VariantRow label='with image'>
+                <Avatar size='md'>
+                  <AvatarImage src='https://github.com/shadcn.png' alt='User' />
+                  <AvatarFallback>CN</AvatarFallback>
+                </Avatar>
+              </VariantRow>
+              <VariantRow label='status online'>
+                <Avatar size='md' status='online'>
+                  <AvatarFallback>JD</AvatarFallback>
+                </Avatar>
+              </VariantRow>
+              <VariantRow label='status offline'>
+                <Avatar size='md' status='offline'>
+                  <AvatarFallback>JD</AvatarFallback>
+                </Avatar>
+              </VariantRow>
+              <VariantRow label='status busy'>
+                <Avatar size='md' status='busy'>
+                  <AvatarFallback>JD</AvatarFallback>
+                </Avatar>
+              </VariantRow>
+              <VariantRow label='status away'>
+                <Avatar size='md' status='away'>
+                  <AvatarFallback>JD</AvatarFallback>
+                </Avatar>
+              </VariantRow>
+              <VariantRow label='all sizes with status'>
+                <Avatar size='xs' status='online'>
+                  <AvatarFallback>XS</AvatarFallback>
+                </Avatar>
+                <Avatar size='sm' status='online'>
+                  <AvatarFallback>SM</AvatarFallback>
+                </Avatar>
+                <Avatar size='md' status='online'>
+                  <AvatarFallback>MD</AvatarFallback>
+                </Avatar>
+                <Avatar size='lg' status='online'>
+                  <AvatarFallback>LG</AvatarFallback>
+                </Avatar>
+              </VariantRow>
+            </Section>
+
+            {/* Table */}
+            <Section title='Table'>
+              <VariantRow label='default'>
+                <Table className='max-w-md'>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Name</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead>Role</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow className='hover:bg-[var(--surface-2)]'>
+                      <TableCell>Alice</TableCell>
+                      <TableCell>Active</TableCell>
+                      <TableCell>Admin</TableCell>
+                    </TableRow>
+                    <TableRow className='hover:bg-[var(--surface-2)]'>
+                      <TableCell>Bob</TableCell>
+                      <TableCell>Pending</TableCell>
+                      <TableCell>User</TableCell>
+                    </TableRow>
+                    <TableRow className='hover:bg-[var(--surface-2)]'>
+                      <TableCell>Charlie</TableCell>
+                      <TableCell>Active</TableCell>
+                      <TableCell>User</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </VariantRow>
+              <VariantRow label='with footer'>
+                <Table className='max-w-md'>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Item</TableHead>
+                      <TableHead className='text-right'>Price</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell>Product A</TableCell>
+                      <TableCell className='text-right'>$10.00</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>Product B</TableCell>
+                      <TableCell className='text-right'>$20.00</TableCell>
+                    </TableRow>
+                  </TableBody>
+                  <TableFooter>
+                    <TableRow>
+                      <TableCell>Total</TableCell>
+                      <TableCell className='text-right'>$30.00</TableCell>
+                    </TableRow>
+                  </TableFooter>
+                </Table>
+              </VariantRow>
+              <VariantRow label='with caption'>
+                <Table className='max-w-md'>
+                  <TableCaption>A list of team members</TableCaption>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Name</TableHead>
+                      <TableHead>Department</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell>Alice</TableCell>
+                      <TableCell>Engineering</TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>Bob</TableCell>
+                      <TableCell>Design</TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </VariantRow>
+            </Section>
+
+            {/* Combobox */}
+            <Section title='Combobox'>
+              <VariantRow label='default'>
+                <div className='w-48'>
+                  <Combobox
+                    options={COMBOBOX_OPTIONS}
+                    value={comboboxValue}
+                    onChange={setComboboxValue}
+                    placeholder='Select option...'
+                  />
+                </div>
+              </VariantRow>
+              <VariantRow label='size sm'>
+                <div className='w-48'>
+                  <Combobox
+                    options={COMBOBOX_OPTIONS}
+                    value=''
+                    onChange={() => {}}
+                    placeholder='Small size'
+                    size='sm'
+                  />
+                </div>
+              </VariantRow>
+              <VariantRow label='searchable'>
+                <div className='w-48'>
+                  <Combobox
+                    options={COMBOBOX_OPTIONS}
+                    value=''
+                    onChange={() => {}}
+                    placeholder='With search'
+                    searchable
+                  />
+                </div>
+              </VariantRow>
+              <VariantRow label='editable'>
+                <div className='w-48'>
+                  <Combobox
+                    options={COMBOBOX_OPTIONS}
+                    value=''
+                    onChange={() => {}}
+                    placeholder='Type or select...'
+                    editable
+                  />
+                </div>
+              </VariantRow>
+              <VariantRow label='multiSelect'>
+                <div className='w-48'>
+                  <Combobox
+                    options={COMBOBOX_OPTIONS}
+                    multiSelectValues={[]}
+                    onMultiSelectChange={() => {}}
+                    placeholder='Select multiple...'
+                    multiSelect
+                    searchable
+                  />
+                </div>
+              </VariantRow>
+            </Section>
+
+            {/* TimePicker */}
+            <Section title='TimePicker'>
+              <VariantRow label='default'>
+                <div className='w-48'>
+                  <TimePicker value={timeValue} onChange={setTimeValue} placeholder='Select time' />
+                </div>
+                <span className='text-[var(--text-secondary)] text-sm'>{timeValue}</span>
+              </VariantRow>
+              <VariantRow label='size sm'>
+                <div className='w-48'>
+                  <TimePicker
+                    value='14:00'
+                    onChange={() => {}}
+                    placeholder='Small size'
+                    size='sm'
+                  />
+                </div>
+              </VariantRow>
+              <VariantRow label='no value'>
+                <div className='w-48'>
+                  <TimePicker placeholder='Select time...' onChange={() => {}} />
+                </div>
+              </VariantRow>
+              <VariantRow label='disabled'>
+                <div className='w-48'>
+                  <TimePicker value='09:00' disabled />
+                </div>
+              </VariantRow>
+            </Section>
+
+            {/* DatePicker */}
+            <Section title='DatePicker'>
+              <VariantRow label='single date'>
+                <div className='w-56'>
+                  <DatePicker value={dateValue} onChange={setDateValue} placeholder='Select date' />
+                </div>
+                <span className='text-[var(--text-secondary)] text-sm'>
+                  {dateValue || 'No date'}
+                </span>
+              </VariantRow>
+              <VariantRow label='size sm'>
+                <div className='w-56'>
+                  <DatePicker placeholder='Small size' size='sm' onChange={() => {}} />
+                </div>
+              </VariantRow>
+              <VariantRow label='range mode'>
+                <div className='w-72'>
+                  <DatePicker
+                    mode='range'
+                    startDate={dateRangeStart}
+                    endDate={dateRangeEnd}
+                    onRangeChange={(start, end) => {
+                      setDateRangeStart(start)
+                      setDateRangeEnd(end)
+                    }}
+                    placeholder='Select date range'
+                  />
+                </div>
+              </VariantRow>
+              <VariantRow label='disabled'>
+                <div className='w-56'>
+                  <DatePicker value='2025-01-15' disabled />
+                </div>
+              </VariantRow>
+              <VariantRow label='inline'>
+                <DatePicker inline value={dateValue} onChange={setDateValue} />
+              </VariantRow>
+            </Section>
+
+            {/* Breadcrumb */}
+            <Section title='Breadcrumb'>
+              <Breadcrumb
+                items={[
+                  { label: 'Home', href: '#' },
+                  { label: 'Settings', href: '#' },
+                  { label: 'Profile' },
+                ]}
+              />
+            </Section>
+
+            {/* Tooltip */}
+            <Section title='Tooltip'>
+              <VariantRow label='default'>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button variant='default'>Hover me</Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>Tooltip content</Tooltip.Content>
+                </Tooltip.Root>
+              </VariantRow>
+              <VariantRow label='with shortcut'>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button variant='default'>Clear console</Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>
+                    <Tooltip.Shortcut keys='⌘D'>Clear console</Tooltip.Shortcut>
+                  </Tooltip.Content>
+                </Tooltip.Root>
+              </VariantRow>
+              <VariantRow label='shortcut only'>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button variant='default'>Save</Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content>
+                    <Tooltip.Shortcut keys='⌘S' />
+                  </Tooltip.Content>
+                </Tooltip.Root>
+              </VariantRow>
+            </Section>
+
+            {/* Popover */}
+            <Section title='Popover'>
+              <VariantRow label='default'>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant='default'>Open Popover</Button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <PopoverSection>Section Title</PopoverSection>
+                    <PopoverItem>Item 1</PopoverItem>
+                    <PopoverItem>Item 2</PopoverItem>
+                    <PopoverItem active>Active Item</PopoverItem>
+                  </PopoverContent>
+                </Popover>
+              </VariantRow>
+              <VariantRow label='secondary variant'>
+                <Popover variant='secondary'>
+                  <PopoverTrigger asChild>
+                    <Button variant='secondary'>Secondary Popover</Button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <PopoverItem>Item 1</PopoverItem>
+                    <PopoverItem active>Active Item</PopoverItem>
+                  </PopoverContent>
+                </Popover>
+              </VariantRow>
+              <VariantRow label='with search'>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant='default'>Searchable Popover</Button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <PopoverSearch placeholder='Search items...' />
+                    <PopoverScrollArea className='max-h-40'>
+                      <PopoverItem>Apple</PopoverItem>
+                      <PopoverItem>Banana</PopoverItem>
+                      <PopoverItem>Cherry</PopoverItem>
+                      <PopoverItem>Date</PopoverItem>
+                      <PopoverItem>Elderberry</PopoverItem>
+                    </PopoverScrollArea>
+                  </PopoverContent>
+                </Popover>
+              </VariantRow>
+              <VariantRow label='with folders'>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button variant='default'>Folder Navigation</Button>
+                  </PopoverTrigger>
+                  <PopoverContent>
+                    <PopoverBackButton />
+                    <PopoverItem rootOnly>Root Item</PopoverItem>
+                    <PopoverFolder
+                      id='folder1'
+                      title='Folder 1'
+                      icon={<Folder className='size-3' />}
+                    >
+                      <PopoverItem>Nested Item 1</PopoverItem>
+                      <PopoverItem>Nested Item 2</PopoverItem>
+                    </PopoverFolder>
+                    <PopoverFolder
+                      id='folder2'
+                      title='Folder 2'
+                      icon={<Folder className='size-3' />}
+                    >
+                      <PopoverItem>Another Nested Item</PopoverItem>
+                    </PopoverFolder>
+                  </PopoverContent>
+                </Popover>
+              </VariantRow>
+            </Section>
+
+            {/* Modal */}
+            <Section title='Modal'>
+              <VariantRow label='sizes'>
+                {(['sm', 'md', 'lg', 'xl', 'full'] as const).map((size) => (
+                  <Modal key={size}>
+                    <ModalTrigger asChild>
+                      <Button variant='default'>{size}</Button>
+                    </ModalTrigger>
+                    <ModalContent size={size}>
+                      <ModalHeader>Modal {size.toUpperCase()}</ModalHeader>
+                      <ModalBody>
+                        <ModalDescription className='text-[var(--text-secondary)]'>
+                          This is a {size} sized modal.
+                        </ModalDescription>
+                      </ModalBody>
+                      <ModalFooter>
+                        <Button variant='ghost'>Cancel</Button>
+                        <Button variant='primary'>Save</Button>
+                      </ModalFooter>
+                    </ModalContent>
+                  </Modal>
+                ))}
+              </VariantRow>
+              <VariantRow label='with tabs'>
+                <Modal>
                   <ModalTrigger asChild>
-                    <Button variant='default'>{size}</Button>
+                    <Button variant='default'>Modal with Tabs</Button>
                   </ModalTrigger>
-                  <ModalContent size={size}>
-                    <ModalHeader>Modal {size.toUpperCase()}</ModalHeader>
-                    <ModalBody>
-                      <ModalDescription className='text-[var(--text-secondary)]'>
-                        This is a {size} sized modal.
-                      </ModalDescription>
-                    </ModalBody>
+                  <ModalContent>
+                    <ModalHeader>Settings</ModalHeader>
+                    <ModalTabs defaultValue='tab1'>
+                      <ModalTabsList>
+                        <ModalTabsTrigger value='tab1'>General</ModalTabsTrigger>
+                        <ModalTabsTrigger value='tab2'>Advanced</ModalTabsTrigger>
+                      </ModalTabsList>
+                      <ModalBody>
+                        <ModalDescription className='sr-only'>
+                          Modal settings with general and advanced tabs
+                        </ModalDescription>
+                        <ModalTabsContent value='tab1'>
+                          <p className='text-[var(--text-secondary)]'>General settings content</p>
+                        </ModalTabsContent>
+                        <ModalTabsContent value='tab2'>
+                          <p className='text-[var(--text-secondary)]'>Advanced settings content</p>
+                        </ModalTabsContent>
+                      </ModalBody>
+                    </ModalTabs>
                     <ModalFooter>
-                      <Button variant='ghost'>Cancel</Button>
                       <Button variant='primary'>Save</Button>
                     </ModalFooter>
                   </ModalContent>
                 </Modal>
-              ))}
-            </VariantRow>
-            <VariantRow label='with tabs'>
-              <Modal>
-                <ModalTrigger asChild>
-                  <Button variant='default'>Modal with Tabs</Button>
-                </ModalTrigger>
-                <ModalContent>
-                  <ModalHeader>Settings</ModalHeader>
-                  <ModalTabs defaultValue='tab1'>
-                    <ModalTabsList>
-                      <ModalTabsTrigger value='tab1'>General</ModalTabsTrigger>
-                      <ModalTabsTrigger value='tab2'>Advanced</ModalTabsTrigger>
-                    </ModalTabsList>
-                    <ModalBody>
-                      <ModalDescription className='sr-only'>
-                        Modal settings with general and advanced tabs
-                      </ModalDescription>
-                      <ModalTabsContent value='tab1'>
-                        <p className='text-[var(--text-secondary)]'>General settings content</p>
-                      </ModalTabsContent>
-                      <ModalTabsContent value='tab2'>
-                        <p className='text-[var(--text-secondary)]'>Advanced settings content</p>
-                      </ModalTabsContent>
-                    </ModalBody>
-                  </ModalTabs>
-                  <ModalFooter>
-                    <Button variant='primary'>Save</Button>
-                  </ModalFooter>
-                </ModalContent>
-              </Modal>
-            </VariantRow>
-          </Section>
-
-          {/* Code */}
-          <Section title='Code'>
-            <VariantRow label='javascript'>
-              <div className='w-full max-w-lg'>
-                <Code.Viewer code={SAMPLE_CODE} language='javascript' showGutter />
-              </div>
-            </VariantRow>
-            <VariantRow label='json'>
-              <div className='w-full max-w-lg'>
-                <Code.Viewer
-                  code={JSON.stringify({ name: 'Sim', version: '1.0' }, null, 2)}
-                  language='json'
-                  showGutter
-                />
-              </div>
-            </VariantRow>
-            <VariantRow label='python'>
-              <div className='w-full max-w-lg'>
-                <Code.Viewer code={SAMPLE_PYTHON} language='python' showGutter />
-              </div>
-            </VariantRow>
-            <VariantRow label='no gutter'>
-              <div className='w-full max-w-lg'>
-                <Code.Viewer code={SAMPLE_CODE} language='javascript' />
-              </div>
-            </VariantRow>
-            <VariantRow label='wrap text'>
-              <div className='w-full max-w-lg'>
-                <Code.Viewer
-                  code="const longLine = 'This is a very long line that should wrap when wrapText is enabled to demonstrate the text wrapping functionality';"
-                  language='javascript'
-                  showGutter
-                  wrapText
-                />
+              </VariantRow>
+            </Section>
+
+            {/* Code */}
+            <Section title='Code'>
+              <VariantRow label='javascript'>
+                <div className='w-full max-w-lg'>
+                  <Code.Viewer code={SAMPLE_CODE} language='javascript' showGutter />
+                </div>
+              </VariantRow>
+              <VariantRow label='json'>
+                <div className='w-full max-w-lg'>
+                  <Code.Viewer
+                    code={JSON.stringify({ name: 'Sim', version: '1.0' }, null, 2)}
+                    language='json'
+                    showGutter
+                  />
+                </div>
+              </VariantRow>
+              <VariantRow label='python'>
+                <div className='w-full max-w-lg'>
+                  <Code.Viewer code={SAMPLE_PYTHON} language='python' showGutter />
+                </div>
+              </VariantRow>
+              <VariantRow label='no gutter'>
+                <div className='w-full max-w-lg'>
+                  <Code.Viewer code={SAMPLE_CODE} language='javascript' />
+                </div>
+              </VariantRow>
+              <VariantRow label='wrap text'>
+                <div className='w-full max-w-lg'>
+                  <Code.Viewer
+                    code="const longLine = 'This is a very long line that should wrap when wrapText is enabled to demonstrate the text wrapping functionality';"
+                    language='javascript'
+                    showGutter
+                    wrapText
+                  />
+                </div>
+              </VariantRow>
+            </Section>
+
+            {/* Icons */}
+            <Section title='Icons'>
+              <div className='grid grid-cols-6 gap-4 sm:grid-cols-8 md:grid-cols-10'>
+                {[
+                  { Icon: BubbleChatClose, name: 'BubbleChatClose' },
+                  { Icon: BubbleChatPreview, name: 'BubbleChatPreview' },
+                  { Icon: CardIcon, name: 'Card' },
+                  { Icon: ChevronDown, name: 'ChevronDown' },
+                  { Icon: Connections, name: 'Connections' },
+                  { Icon: Cursor, name: 'Cursor' },
+                  { Icon: DocumentAttachment, name: 'DocumentAttachment' },
+                  { Icon: Download, name: 'Download' },
+                  { Icon: Duplicate, name: 'Duplicate' },
+                  { Icon: Expand, name: 'Expand' },
+                  { Icon: Eye, name: 'Eye' },
+                  { Icon: FolderCode, name: 'FolderCode' },
+                  { Icon: FolderPlus, name: 'FolderPlus' },
+                  { Icon: Hand, name: 'Hand' },
+                  { Icon: HexSimple, name: 'HexSimple' },
+                  { Icon: KeyIcon, name: 'Key' },
+                  { Icon: Layout, name: 'Layout' },
+                  { Icon: Library, name: 'Library' },
+                  { Icon: Loader, name: 'Loader' },
+                  { Icon: MoreHorizontal, name: 'MoreHorizontal' },
+                  { Icon: NoWrap, name: 'NoWrap' },
+                  { Icon: PanelLeft, name: 'PanelLeft' },
+                  { Icon: Play, name: 'Play' },
+                  { Icon: PlayOutline, name: 'PlayOutline' },
+                  { Icon: Redo, name: 'Redo' },
+                  { Icon: Rocket, name: 'Rocket' },
+                  { Icon: Trash, name: 'Trash' },
+                  { Icon: Trash2, name: 'Trash2' },
+                  { Icon: Undo, name: 'Undo' },
+                  { Icon: Wrap, name: 'Wrap' },
+                  { Icon: ZoomIn, name: 'ZoomIn' },
+                  { Icon: ZoomOut, name: 'ZoomOut' },
+                ].map(({ Icon, name }) => (
+                  <Tooltip.Root key={name}>
+                    <Tooltip.Trigger asChild>
+                      <div className='flex size-10 cursor-pointer items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-4)]'>
+                        <Icon className='size-5 text-[var(--text-secondary)]' />
+                      </div>
+                    </Tooltip.Trigger>
+                    <Tooltip.Content>{name}</Tooltip.Content>
+                  </Tooltip.Root>
+                ))}
               </div>
-            </VariantRow>
-          </Section>
-
-          {/* Icons */}
-          <Section title='Icons'>
-            <div className='grid grid-cols-6 gap-4 sm:grid-cols-8 md:grid-cols-10'>
-              {[
-                { Icon: BubbleChatClose, name: 'BubbleChatClose' },
-                { Icon: BubbleChatPreview, name: 'BubbleChatPreview' },
-                { Icon: CardIcon, name: 'Card' },
-                { Icon: ChevronDown, name: 'ChevronDown' },
-                { Icon: Connections, name: 'Connections' },
-                { Icon: Cursor, name: 'Cursor' },
-                { Icon: DocumentAttachment, name: 'DocumentAttachment' },
-                { Icon: Download, name: 'Download' },
-                { Icon: Duplicate, name: 'Duplicate' },
-                { Icon: Expand, name: 'Expand' },
-                { Icon: Eye, name: 'Eye' },
-                { Icon: FolderCode, name: 'FolderCode' },
-                { Icon: FolderPlus, name: 'FolderPlus' },
-                { Icon: Hand, name: 'Hand' },
-                { Icon: HexSimple, name: 'HexSimple' },
-                { Icon: KeyIcon, name: 'Key' },
-                { Icon: Layout, name: 'Layout' },
-                { Icon: Library, name: 'Library' },
-                { Icon: Loader, name: 'Loader' },
-                { Icon: MoreHorizontal, name: 'MoreHorizontal' },
-                { Icon: NoWrap, name: 'NoWrap' },
-                { Icon: PanelLeft, name: 'PanelLeft' },
-                { Icon: Play, name: 'Play' },
-                { Icon: PlayOutline, name: 'PlayOutline' },
-                { Icon: Redo, name: 'Redo' },
-                { Icon: Rocket, name: 'Rocket' },
-                { Icon: Trash, name: 'Trash' },
-                { Icon: Trash2, name: 'Trash2' },
-                { Icon: Undo, name: 'Undo' },
-                { Icon: Wrap, name: 'Wrap' },
-                { Icon: ZoomIn, name: 'ZoomIn' },
-                { Icon: ZoomOut, name: 'ZoomOut' },
-              ].map(({ Icon, name }) => (
-                <Tooltip.Root key={name}>
-                  <Tooltip.Trigger asChild>
-                    <div className='flex size-10 cursor-pointer items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-4)]'>
-                      <Icon className='size-5 text-[var(--text-secondary)]' />
-                    </div>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content>{name}</Tooltip.Content>
-                </Tooltip.Root>
-              ))}
-            </div>
-          </Section>
+            </Section>
+          </div>
         </div>
-      </div>
-    </Tooltip.Provider>
+      </Tooltip.Provider>
+    </ToastProvider>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/add-people-modal.tsx b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/add-people-modal.tsx
index 21cec8fa213..305489df046 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/add-people-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/add-people-modal.tsx
@@ -6,10 +6,10 @@ import { getErrorMessage } from '@sim/utils/errors'
 import {
   ChipModal,
   ChipModalBody,
+  ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  toast,
 } from '@/components/emcn'
 import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import {
@@ -42,6 +42,7 @@ export function AddPeopleModal({ credentialId, open, onOpenChange }: AddPeopleMo
   const [emailsToAdd, setEmailsToAdd] = useState<string[]>([])
   const [roleToAdd, setRoleToAdd] = useState<WorkspaceCredentialRole>('member')
   const [isAdding, setIsAdding] = useState(false)
+  const [submitError, setSubmitError] = useState<string | null>(null)
 
   const workspaceUserIdByEmail = useMemo(
     () =>
@@ -73,11 +74,13 @@ export function AddPeopleModal({ credentialId, open, onOpenChange }: AddPeopleMo
   const handleClose = useCallback(() => {
     setEmailsToAdd([])
     setRoleToAdd('member')
+    setSubmitError(null)
     onOpenChange(false)
   }, [onOpenChange])
 
   const handleAddPeople = useCallback(async () => {
     if (emailsToAdd.length === 0 || isAdding) return
+    setSubmitError(null)
     const targets = emailsToAdd
       .map((email) => {
         const result = resolveAddEmail(email, { workspaceUserIdByEmail, existingMemberEmails })
@@ -103,11 +106,11 @@ export function AddPeopleModal({ credentialId, open, onOpenChange }: AddPeopleMo
         (result): result is PromiseRejectedResult => result.status === 'rejected'
       )
       logger.error('Failed to add some credential members', firstError?.reason)
-      toast.error(
+      const reason = getErrorMessage(firstError?.reason, 'Please try again in a moment.')
+      setSubmitError(
         failures.length === targets.length
-          ? "Couldn't add people"
-          : `Couldn't add ${failures.length} of ${targets.length} people`,
-        { description: getErrorMessage(firstError?.reason, 'Please try again in a moment.') }
+          ? `Couldn't add people. ${reason}`
+          : `Couldn't add ${failures.length} of ${targets.length} people. ${reason}`
       )
     } finally {
       setIsAdding(false)
@@ -152,6 +155,7 @@ export function AddPeopleModal({ credentialId, open, onOpenChange }: AddPeopleMo
           onChange={(role) => setRoleToAdd(role as WorkspaceCredentialRole)}
           disabled={isAdding}
         />
+        <ChipModalError>{submitError}</ChipModalError>
       </ChipModalBody>
       <ChipModalFooter
         onCancel={handleClose}
diff --git a/apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx b/apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx
index b1b1cc77ac2..5423cae324a 100644
--- a/apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/providers/workspace-permissions-provider.tsx
@@ -96,7 +96,7 @@ export function WorkspacePermissionsProvider({ children }: WorkspacePermissionsP
 
     clearRealtimeStatusNotification()
 
-    const id = toast.error(realtimeStatusMessage, { duration: 0 })
+    const id = toast.error(realtimeStatusMessage, { duration: 0, persistAcrossRoutes: true })
 
     realtimeStatusNotificationIdRef.current = id
     realtimeStatusNotificationMessageRef.current = realtimeStatusMessage
@@ -130,6 +130,7 @@ export function WorkspacePermissionsProvider({ children }: WorkspacePermissionsP
     try {
       toast.error('Connection unavailable', {
         duration: 0,
+        persistAcrossRoutes: true,
         action: { label: 'Refresh', onClick: () => window.location.reload() },
       })
       setHasShownOfflineNotification(true)
diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/hooks/use-upgrade-state.ts b/apps/sim/app/workspace/[workspaceId]/upgrade/hooks/use-upgrade-state.ts
index a565ad4e4eb..3cabcc4b9f6 100644
--- a/apps/sim/app/workspace/[workspaceId]/upgrade/hooks/use-upgrade-state.ts
+++ b/apps/sim/app/workspace/[workspaceId]/upgrade/hooks/use-upgrade-state.ts
@@ -1,6 +1,7 @@
 'use client'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { getErrorMessage } from '@sim/utils/errors'
+import { toast } from '@/components/emcn'
 import { requestJson } from '@/lib/api/client/request'
 import { billingSwitchPlanContract } from '@/lib/api/contracts/subscription'
 import { useSubscriptionUpgrade } from '@/lib/billing/client/upgrade'
@@ -129,7 +130,7 @@ export function useUpgradeState(): UpgradeState {
           ...(seats ? { seats } : {}),
         })
       } catch (error) {
-        alert(getErrorMessage(error, 'Unknown error occurred'))
+        toast.error(getErrorMessage(error, 'Unknown error occurred'))
       }
     },
     [handleUpgrade, isAnnual]
@@ -180,7 +181,7 @@ export function useUpgradeState(): UpgradeState {
       })
       await refetchSubscription()
     } catch (e) {
-      alert(getErrorMessage(e, 'Failed to upgrade'))
+      toast.error(getErrorMessage(e, 'Failed to upgrade'))
     }
   }, [subscription.isTeam, isAnnual, refetchSubscription])
 
@@ -196,7 +197,7 @@ export function useUpgradeState(): UpgradeState {
       })
       await refetchSubscription()
     } catch (e) {
-      alert(getErrorMessage(e, 'Failed to switch plan'))
+      toast.error(getErrorMessage(e, 'Failed to switch plan'))
     }
   }, [subscription.plan, subscription.isTeam, refetchSubscription])
 
diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
index 41c18b54109..f3ce8a9f53f 100644
--- a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
-import { ArrowLeft, Chip } from '@/components/emcn'
+import { ArrowLeft, Chip, toast } from '@/components/emcn'
 import {
   getUpgradeCardCta,
   type PlanCardCta,
@@ -91,7 +91,7 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
           onClick: () =>
             state
               .handleSwitchInterval(state.isAnnual ? 'year' : 'month')
-              .catch((e) => alert(getErrorMessage(e, 'Failed to switch interval'))),
+              .catch((e) => toast.error(getErrorMessage(e, 'Failed to switch interval'))),
         }
       }
       return { ...cta, onClick: () => {}, disabled: true }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
index 359fcc44d1c..a79c512efc4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx
@@ -3,7 +3,7 @@
 import { type ReactNode, useCallback, useMemo, useState } from 'react'
 import { Check, ChevronRight, Clipboard, Info } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
-import { Checkbox, Input, Label, SecretInput, Tooltip, toast, Wizard } from '@/components/emcn'
+import { Checkbox, Input, Label, SecretInput, Tooltip, Wizard } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import { useWebhookManagement } from '@/hooks/use-webhook-management'
@@ -263,15 +263,17 @@ interface StepCreateProps {
 
 function StepCreate({ manifestJson, canCopy }: StepCreateProps) {
   const [copied, setCopied] = useState<boolean>(false)
+  const [copyFailed, setCopyFailed] = useState<boolean>(false)
 
   const handleCopy = useCallback(async () => {
     if (!canCopy) return
     try {
       await navigator.clipboard.writeText(manifestJson)
+      setCopyFailed(false)
       setCopied(true)
       setTimeout(() => setCopied(false), 2000)
     } catch {
-      toast.error("Couldn't copy manifest — copy it manually from the developer console.")
+      setCopyFailed(true)
     }
   }, [canCopy, manifestJson])
 
@@ -301,6 +303,11 @@ function StepCreate({ manifestJson, canCopy }: StepCreateProps) {
                 <Clipboard className='size-[12px] text-[var(--text-muted)]' />
               ))}
           </button>
+          {copyFailed ? (
+            <p className='mt-1.5 text-[var(--text-error)] text-xs'>
+              Couldn't copy manifest — copy it manually from the developer console.
+            </p>
+          ) : null}
         </SubStep>
         <SubStep n={2}>
           Open the{' '}
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index c264f06b552..7f961dcf6ff 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -169,7 +169,6 @@ export {
 } from './tag-input/tag-input'
 export { Textarea } from './textarea/textarea'
 export { TimePicker, timePickerVariants } from './time-picker/time-picker'
-export { CountdownRing } from './toast/countdown-ring'
 export { ToastProvider, toast, useToast } from './toast/toast'
 export {
   clamp,
diff --git a/apps/sim/components/emcn/components/toast/countdown-ring.tsx b/apps/sim/components/emcn/components/toast/countdown-ring.tsx
deleted file mode 100644
index f462e0f2240..00000000000
--- a/apps/sim/components/emcn/components/toast/countdown-ring.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-const RING_RADIUS = 5.5
-const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS
-
-interface CountdownRingProps {
-  duration: number
-  paused?: boolean
-  className?: string
-}
-
-export function CountdownRing({ duration, paused = false, className }: CountdownRingProps) {
-  return (
-    <svg
-      width='14'
-      height='14'
-      viewBox='0 0 16 16'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-      style={{ transform: 'rotate(-90deg) scaleX(-1)' }}
-    >
-      <circle cx='8' cy='8' r={RING_RADIUS} stroke='currentColor' strokeWidth='1.5' opacity={0.2} />
-      <circle
-        cx='8'
-        cy='8'
-        r={RING_RADIUS}
-        stroke='currentColor'
-        strokeWidth='1.5'
-        strokeLinecap='round'
-        strokeDasharray={RING_CIRCUMFERENCE}
-        style={{
-          animation: `notification-countdown ${duration}ms linear forwards`,
-          animationPlayState: paused ? 'paused' : 'running',
-        }}
-      />
-    </svg>
-  )
-}
diff --git a/apps/sim/components/emcn/components/toast/toast.tsx b/apps/sim/components/emcn/components/toast/toast.tsx
index f6da1c7cebf..bb41a3f2b23 100644
--- a/apps/sim/components/emcn/components/toast/toast.tsx
+++ b/apps/sim/components/emcn/components/toast/toast.tsx
@@ -2,51 +2,82 @@
 
 import {
   type ComponentType,
-  type CSSProperties,
   createContext,
   type ReactNode,
   type SVGProps,
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import { generateId } from '@sim/utils/id'
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from 'framer-motion'
 import { usePathname } from 'next/navigation'
 import { createPortal } from 'react-dom'
 import { Button } from '@/components/emcn/components/button/button'
 import { Chip } from '@/components/emcn/components/chip/chip'
-import { CountdownRing } from '@/components/emcn/components/toast/countdown-ring'
-import { Tooltip } from '@/components/emcn/components/tooltip/tooltip'
 import { Bell } from '@/components/emcn/icons/bell'
-import { Check } from '@/components/emcn/icons/check'
+import { CircleAlert } from '@/components/emcn/icons/circle-alert'
+import { CircleCheck } from '@/components/emcn/icons/circle-check'
+import { CircleInfo } from '@/components/emcn/icons/circle-info'
+import { TriangleAlert } from '@/components/emcn/icons/triangle-alert'
 import { X } from '@/components/emcn/icons/x'
+import { cn } from '@/lib/core/utils/cn'
 
 const AUTO_DISMISS_MS = 5000
-const EXIT_ANIMATION_MS = 200
-/**
- * Visible stack depth. The per-step `translateX` cascade keeps the depth
- * cue legible; raising this much higher would crowd the bottom-right edge
- * once the portal insets for the workflow panel + terminal.
- */
-const MAX_VISIBLE = 3
-const STACK_OFFSET_PX = 3
+/** Whole-stack auto-dismiss window once the dismiss-all control appears (2+ toasts). */
+const STACK_DISMISS_MS = 6000
+/** Toast count at which the dismiss-all control and stack countdown take over. */
+const STACK_DISMISS_THRESHOLD = 2
 
-type ToastVariant = 'default' | 'success' | 'error'
+/** Card width; tracks the workflow-panel inset on narrow viewports. */
+const TOAST_WIDTH = 'min(100vw - 2rem, 280px)'
 
-/**
- * Leading icon shown next to the toast title, per variant. Icons are EMCN
- * primitives so this surface stays inside the design system. All variants
- * share the neutral `text-[var(--text-icon)]` color used by sidebar items;
- * variant intent is communicated through icon shape and message content,
- * not tint.
- */
+/** Most toasts kept alive at once; older arrivals are evicted. */
+const STACK_LIMIT = 3
+/** Per-depth lift and shrink that make collapsed cards peek above the front one. */
+const COLLAPSED_OFFSET_PX = 13
+const COLLAPSED_SCALE_STEP = 0.05
+/** Vertical gap between cards once the stack is expanded. */
+const EXPAND_GAP_PX = 8
+
+/** Fallback card height used for the expanded fan-out before a toast is measured. */
+const ESTIMATED_TOAST_HEIGHT = 56
+
+/** Card border box, added to the measured content so the clamped `<li>` height matches. */
+const CARD_BORDER_PX = 2
+
+/** Shared expo-out easing so every card in the stack reshuffles with identical timing. */
+const TOAST_EASE = [0.22, 1, 0.36, 1] as const
+const STACK_DURATION = 0.4
+const RESIZE_DURATION = 0.3
+
+/** Single-line cards use a tighter corner radius; taller cards keep the concentric 16px. */
+const COMPACT_CARD_HEIGHT_PX = 46
+const COMPACT_RADIUS_PX = 12
+const CONCENTRIC_RADIUS_PX = 16
+
+type ToastVariant = 'default' | 'info' | 'success' | 'warning' | 'error'
+
+/** Leading icon per variant; the shape signals intent, {@link VARIANT_ICON_COLOR} tints it. */
 const VARIANT_ICON: Record<ToastVariant, ComponentType<SVGProps<SVGSVGElement>>> = {
   default: Bell,
-  error: Bell,
-  success: Check,
+  info: CircleInfo,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  error: CircleAlert,
+}
+
+/** Per-variant icon tint from the shared badge intent palette; `default` stays neutral. */
+const VARIANT_ICON_COLOR: Record<ToastVariant, string> = {
+  default: 'text-[var(--text-icon)]',
+  info: 'text-[var(--badge-blue-text)]',
+  success: 'text-[var(--badge-success-text)]',
+  warning: 'text-[var(--badge-amber-text)]',
+  error: 'text-[var(--badge-error-text)]',
 }
 
 interface ToastAction {
@@ -61,6 +92,7 @@ interface ToastData {
   variant: ToastVariant
   action?: ToastAction
   duration: number
+  persistAcrossRoutes: boolean
 }
 
 type ToastInput = {
@@ -69,15 +101,24 @@ type ToastInput = {
   variant?: ToastVariant
   action?: ToastAction
   duration?: number
+  /**
+   * Keep the toast across navigation. The stack is otherwise cleared on every
+   * route change (route-scoped notifications shouldn't trail the user); set
+   * this for global, ongoing-state toasts like a connection/reconnect status.
+   * @default false
+   */
+  persistAcrossRoutes?: boolean
 }
 
 type ToastFn = {
   (input: ToastInput): string
   success: (message: string, options?: Omit<ToastInput, 'message' | 'variant'>) => string
   error: (message: string, options?: Omit<ToastInput, 'message' | 'variant'>) => string
-  /** Dismisses a single toast by id. No-op if the id is unknown or the provider is unmounted. */
+  warning: (message: string, options?: Omit<ToastInput, 'message' | 'variant'>) => string
+  info: (message: string, options?: Omit<ToastInput, 'message' | 'variant'>) => string
+  /** Dismisses a single toast by id. */
   dismiss: (id: string) => void
-  /** Dismisses every visible toast. No-op when the provider is unmounted. */
+  /** Dismisses every visible toast. */
   dismissAll: () => void
 }
 
@@ -97,19 +138,21 @@ function createToastFn(add: (input: ToastInput) => string): ToastFn {
   const fn = ((input: ToastInput) => add(input)) as ToastFn
   fn.success = (message, options) => add({ ...options, message, variant: 'success' })
   fn.error = (message, options) => add({ ...options, message, variant: 'error' })
+  fn.warning = (message, options) => add({ ...options, message, variant: 'warning' })
+  fn.info = (message, options) => add({ ...options, message, variant: 'info' })
   fn.dismiss = (id) => globalDismiss?.(id)
   fn.dismissAll = () => globalDismissAll?.()
   return fn
 }
 
 /**
- * Imperative toast function. Requires `<ToastProvider>` to be mounted.
+ * Imperative toast. Requires a mounted `<ToastProvider>`. A toast carrying an
+ * `action` persists until dismissed unless an explicit `duration` is passed.
  *
  * @example
  * ```tsx
  * toast.error('Upload failed', { description: 'Network timed out' })
  * toast.success('Saved', { action: { label: 'View', onClick: () => router.push('/x') } })
- * toast({ message: 'Hello', variant: 'default' })
  * ```
  */
 export const toast: ToastFn = createToastFn((input) => {
@@ -119,112 +162,212 @@ export const toast: ToastFn = createToastFn((input) => {
   return globalToast(input)
 })
 
-/** Hook to access the toast function and dismiss helper from context. */
+/** Hook to access the toast function and dismiss helpers from context. */
 export function useToast() {
   const ctx = useContext(ToastContext)
   if (!ctx) throw new Error('useToast must be used within <ToastProvider>')
   return ctx
 }
 
+interface ToastGeometry {
+  /** Vertical lift from the bottom anchor (negative = upward). */
+  y: number
+  /** Depth shrink; `1` when expanded or for the front card. */
+  scale: number
+  /** Rendered height; collapsed back cards are clamped to the front card's height. */
+  height: number
+  /** Paint order — the front card sits on top. */
+  zIndex: number
+}
+
 interface ToastItemProps {
   toast: ToastData
-  depth: number
-  isPaused: boolean
-  onPause: () => void
+  geometry: ToastGeometry
+  reduceMotion: boolean
   onDismiss: (id: string) => void
+  onMeasure: (id: string, height: number) => void
 }
 
-function ToastItem({ toast: t, depth, isPaused, onPause, onDismiss }: ToastItemProps) {
-  const [exiting, setExiting] = useState(false)
-  const exitTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined)
+interface RevealTextProps {
+  text: string
+  /** Whether the parent card is hovered — the trigger for revealing hidden lines. */
+  expanded: boolean
+  /** Lines kept visible before truncation. */
+  clampLines: number
+  /** Line height in px; must match the text leading so the head/tail split lands on a line boundary. */
+  lineHeightPx: number
+  /** Optional inline icon; included in head and tail so wrapping stays identical. */
+  leadingIcon?: ReactNode
+  className?: string
+  reduceMotion: boolean
+}
 
-  const dismiss = useCallback(() => {
-    setExiting(true)
-    exitTimerRef.current = setTimeout(() => onDismiss(t.id), EXIT_ANIMATION_MS)
-  }, [onDismiss, t.id])
+/**
+ * Truncated text that reveals its hidden lines on hover: the head shows the
+ * first `clampLines` lines, and when hovered (and actually overflowing) the
+ * remaining lines mount below and blur in as one continuous block. Text that
+ * fits within the clamp is never truncated and the card never grows for it.
+ */
+function RevealText({
+  text,
+  expanded,
+  clampLines,
+  lineHeightPx,
+  leadingIcon,
+  className,
+  reduceMotion,
+}: RevealTextProps) {
+  const headRef = useRef<HTMLDivElement>(null)
+  const [truncated, setTruncated] = useState(false)
+  const clampHeight = clampLines * lineHeightPx
+
+  useLayoutEffect(() => {
+    const el = headRef.current
+    if (!el) return
+    const check = () => setTruncated(el.scrollHeight - el.clientHeight > 1)
+    check()
+    const observer = new ResizeObserver(check)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [text])
+
+  const open = expanded && truncated
+  const fadeStart = Math.max(0, clampHeight - lineHeightPx * 1.5)
+  const collapsedMask = `linear-gradient(to bottom, #000 ${fadeStart}px, transparent ${clampHeight}px)`
 
-  useEffect(() => {
-    return () => clearTimeout(exitTimerRef.current)
-  }, [])
+  return (
+    <div>
+      <div
+        ref={headRef}
+        className={cn('overflow-hidden', className)}
+        style={{
+          maxHeight: clampHeight,
+          maskImage: truncated && !open ? collapsedMask : undefined,
+          WebkitMaskImage: truncated && !open ? collapsedMask : undefined,
+        }}
+      >
+        {leadingIcon}
+        {text}
+      </div>
+      <AnimatePresence initial={false}>
+        {open ? (
+          <motion.div
+            className='overflow-hidden'
+            aria-hidden
+            initial={reduceMotion ? false : { height: 0 }}
+            animate={{ height: 'auto' }}
+            exit={{ height: 0 }}
+            transition={
+              reduceMotion ? { duration: 0 } : { duration: RESIZE_DURATION, ease: TOAST_EASE }
+            }
+          >
+            <motion.div
+              className={className}
+              style={{ marginTop: -clampHeight }}
+              initial={reduceMotion ? false : { opacity: 0, filter: 'blur(5px)' }}
+              animate={{ opacity: 1, filter: 'blur(0px)' }}
+              transition={
+                reduceMotion ? { duration: 0 } : { duration: RESIZE_DURATION, ease: [0.2, 0, 0, 1] }
+              }
+            >
+              {leadingIcon}
+              {text}
+            </motion.div>
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
+    </div>
+  )
+}
 
-  const showCountdown = !isPaused && !exiting && t.duration > 0
+function ToastItem({ toast: t, geometry, reduceMotion, onDismiss, onMeasure }: ToastItemProps) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [hovered, setHovered] = useState(false)
+  const Icon = VARIANT_ICON[t.variant]
 
   /**
-   * The `--stack-offset` custom property is read by the `notification-enter` /
-   * `notification-exit` keyframes (see `globals.css`) so each item animates in
-   * along its target translate-X without duplicating per-depth keyframe rules.
+   * Report the natural height — measured on the unconstrained inner content so
+   * the outer `<li>` clamp can't feed back — so the provider lays the fan and
+   * collapsed clamp against real heights. `useLayoutEffect` avoids a paint jump.
    */
-  const style = {
-    '--stack-offset': `${depth * STACK_OFFSET_PX}px`,
-    animation: exiting
-      ? `notification-exit ${EXIT_ANIMATION_MS}ms ease-in forwards`
-      : 'notification-enter 200ms ease-out forwards',
-    gridArea: '1 / 1',
-  } as CSSProperties
-
-  const Icon = VARIANT_ICON[t.variant]
+  useLayoutEffect(() => {
+    const el = contentRef.current
+    if (!el) return
+    const report = () => onMeasure(t.id, el.offsetHeight + CARD_BORDER_PX)
+    report()
+    const observer = new ResizeObserver(report)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [t.id, onMeasure])
+
+  const dismiss = useCallback(() => onDismiss(t.id), [onDismiss, t.id])
+
+  const { y, scale, height, zIndex } = geometry
+  const cornerRadius = height <= COMPACT_CARD_HEIGHT_PX ? COMPACT_RADIUS_PX : CONCENTRIC_RADIUS_PX
+  /** One fixed-duration tween so all cards reshuffle in unison; height tracks content instantly. */
+  const transition = reduceMotion
+    ? { duration: 0 }
+    : {
+        duration: STACK_DURATION,
+        ease: TOAST_EASE,
+        height: { duration: 0 },
+      }
 
   return (
-    <div
-      style={style}
-      className='w-[min(100vw-2rem,280px)] self-end overflow-hidden rounded-lg border border-[var(--border-1)] bg-[var(--bg)] shadow-[var(--shadow-overlay)]'
+    <motion.li
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      initial={reduceMotion ? false : { opacity: 0, y: height }}
+      animate={{ opacity: 1, y, scale, height }}
+      exit={{
+        opacity: 0,
+        scale: 0.95,
+        transition: reduceMotion ? { duration: 0 } : { duration: 0.15, ease: 'easeIn' },
+      }}
+      transition={transition}
+      style={{ zIndex, transformOrigin: 'bottom', width: TOAST_WIDTH, borderRadius: cornerRadius }}
+      className='pointer-events-auto absolute right-0 bottom-0 m-0 overflow-hidden border border-[var(--border-1)] bg-[var(--bg)] shadow-[var(--shadow-overlay)]'
     >
-      <div className='flex flex-col gap-2 p-2'>
-        <div className='flex items-start gap-2.5'>
-          {/*
-           * Each affordance row (leading icon, close cluster) is wrapped in a
-           * `h-5` flex so its center sits on the title's first-line center
-           * (`text-[14px] leading-5`). Glyphs are all `size-[14px]` so the
-           * leading variant icon, title, and trailing close icon read as a
-           * single horizontal rhythm regardless of how many lines the title
-           * or description wrap to.
-           */}
-          <div className='flex h-5 flex-shrink-0 items-center'>
-            <Icon className='size-[14px] text-[var(--text-icon)]' />
-          </div>
-          <div className='flex min-w-0 flex-1 flex-col'>
-            <span className='line-clamp-2 text-[14px] text-[var(--text-body)] leading-5'>
-              {t.message}
-            </span>
+      <div ref={contentRef} className='flex flex-col gap-2 p-2'>
+        <div className='flex items-start gap-2'>
+          <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
+            <RevealText
+              text={t.message}
+              expanded={hovered}
+              clampLines={2}
+              lineHeightPx={20}
+              leadingIcon={
+                <Icon
+                  className={cn(
+                    'mr-[5px] inline-block size-[14px] translate-y-[-2px] align-middle',
+                    VARIANT_ICON_COLOR[t.variant]
+                  )}
+                />
+              }
+              className='font-medium text-[14px] text-[var(--text-primary)] leading-5'
+              reduceMotion={reduceMotion}
+            />
             {t.description ? (
-              <p className='line-clamp-3 text-[12px] text-[var(--text-muted)] leading-4'>
-                {t.description}
-              </p>
+              <RevealText
+                text={t.description}
+                expanded={hovered}
+                clampLines={3}
+                lineHeightPx={18}
+                className='text-[13px] text-[var(--text-secondary)] leading-[18px]'
+                reduceMotion={reduceMotion}
+              />
             ) : null}
           </div>
-          <div className='flex h-5 flex-shrink-0 items-center gap-1.5'>
-            {showCountdown ? (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='quiet'
-                    onClick={onPause}
-                    aria-label='Keep notifications visible'
-                    className='flex size-[18px] flex-shrink-0 items-center justify-center rounded-sm p-0 text-[var(--text-icon)]'
-                  >
-                    <CountdownRing duration={t.duration} />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content className='z-[calc(var(--z-toast)+1)]'>
-                  <p>Keep visible</p>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            ) : null}
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='quiet'
-                  onClick={dismiss}
-                  aria-label='Dismiss notification'
-                  className='flex size-[18px] flex-shrink-0 items-center justify-center rounded-sm p-0'
-                >
-                  <X className='size-[14px] text-[var(--text-icon)]' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content className='z-[calc(var(--z-toast)+1)]'>
-                <p>Dismiss</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
+          <div className='flex h-5 flex-shrink-0 items-center'>
+            <Button
+              variant='quiet'
+              onClick={dismiss}
+              aria-label='Dismiss notification'
+              title='Dismiss'
+              className='flex size-[18px] flex-shrink-0 items-center justify-center rounded-sm p-0'
+            >
+              <X className='size-[14px] text-[var(--text-icon)]' />
+            </Button>
           </div>
         </div>
         {t.action ? (
@@ -242,18 +385,119 @@ function ToastItem({ toast: t, depth, isPaused, onPause, onDismiss }: ToastItemP
           </Chip>
         ) : null}
       </div>
-    </div>
+    </motion.li>
+  )
+}
+
+interface StackDismissProps {
+  /** When held (stack hovered), the countdown pauses so it can't dismiss mid-read. */
+  paused: boolean
+  /**
+   * Whether the ring auto-fires. `false` when the stack holds a persistent
+   * toast, so an actionable toast can't be cleared from under the user; the
+   * control still dismisses on click.
+   */
+  autoDismiss: boolean
+  reduceMotion: boolean
+  /** Changes whenever a new toast arrives; restarts the countdown from zero. */
+  resetKey: string
+  onDismiss: () => void
+}
+
+/**
+ * Dismiss-all control shown once multiple toasts pile up: a ring fills over
+ * `STACK_DISMISS_MS` and clears the whole stack, hovering holds it, and clicking
+ * dismisses immediately.
+ */
+function StackDismiss({
+  paused,
+  autoDismiss,
+  reduceMotion,
+  resetKey,
+  onDismiss,
+}: StackDismissProps) {
+  const progress = useMotionValue(0)
+  const onDismissRef = useRef(onDismiss)
+  const controlsRef = useRef<ReturnType<typeof animate> | null>(null)
+  const [hovered, setHovered] = useState(false)
+
+  const held = paused || hovered
+  const heldRef = useRef(held)
+  useEffect(() => {
+    heldRef.current = held
+  }, [held])
+
+  useEffect(() => {
+    onDismissRef.current = onDismiss
+  }, [onDismiss])
+
+  useEffect(() => {
+    progress.set(0)
+    if (!autoDismiss) {
+      controlsRef.current = null
+      return
+    }
+    const controls = animate(progress, 1, {
+      duration: STACK_DISMISS_MS / 1000,
+      ease: 'linear',
+      onComplete: () => onDismissRef.current(),
+    })
+    controlsRef.current = controls
+    if (heldRef.current) controls.pause()
+    return () => controls.stop()
+  }, [progress, resetKey, autoDismiss])
+
+  useEffect(() => {
+    const controls = controlsRef.current
+    if (!controls) return
+    if (held) controls.pause()
+    else controls.play()
+  }, [held])
+
+  return (
+    <motion.button
+      type='button'
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={() => onDismissRef.current()}
+      aria-label='Dismiss all notifications'
+      initial={reduceMotion ? false : { opacity: 0, scale: 0.5 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={
+        reduceMotion
+          ? { opacity: 0 }
+          : { opacity: 0, scale: 0.5, transition: { duration: 0.12, ease: 'easeIn' } }
+      }
+      transition={reduceMotion ? { duration: 0 } : { type: 'spring', stiffness: 520, damping: 24 }}
+      className='pointer-events-auto absolute bottom-[8px] left-[-30px] z-50 flex size-[22px] items-center justify-center rounded-full bg-[var(--bg)] text-[var(--text-icon)] shadow-[var(--shadow-overlay)] transition-colors hover-hover:text-[var(--text-body)]'
+    >
+      <svg
+        viewBox='0 0 22 22'
+        className='-rotate-90 absolute inset-0 size-full'
+        fill='none'
+        aria-hidden
+      >
+        <circle cx='11' cy='11' r='10' stroke='var(--border-1)' strokeWidth='1.5' />
+        <motion.circle
+          cx='11'
+          cy='11'
+          r='10'
+          stroke='currentColor'
+          strokeWidth='1.5'
+          strokeLinecap='round'
+          style={{ pathLength: progress }}
+        />
+      </svg>
+      <X className='size-[10px]' />
+    </motion.button>
   )
 }
 
 /**
- * Toast container that renders toasts via portal. Mount once in your root
- * layout. Each item is a chip-modal-styled card with a leading EMCN icon,
- * header, optional description, and a trailing close/countdown cluster.
- * Items stack bottom-right via grid-overlay + `--stack-offset` (consumed
- * by the `notification-enter` / `notification-exit` keyframes in
- * `globals.css`). Clicking any countdown ring pauses every active timer
- * until the stack empties.
+ * Toast container, mounted once in the root layout. Toasts pile bottom-right as
+ * a collapsed stack that fans open on hover or keyboard focus, mirroring the
+ * Sonner / Base-UI interaction; hovering pauses auto-dismiss. On workflow pages
+ * the stack is inset by the panel and terminal, and it clears on navigation.
  *
  * @example
  * ```tsx
@@ -262,29 +506,38 @@ function ToastItem({ toast: t, depth, isPaused, onPause, onDismiss }: ToastItemP
  */
 export function ToastProvider({ children }: { children?: ReactNode }) {
   const pathname = usePathname()
-  /**
-   * On workflow pages the toast portal must sit inside the workflow surface
-   * — not over the right-side panel or the bottom terminal. Mirrors the
-   * `ModalContent` workflow-aware inset using the same `--panel-width` and
-   * `--terminal-height` CSS variables maintained by the panel + terminal
-   * stores.
-   */
-  const isWorkflowPage = pathname?.includes('/w/') ?? false
+  const reduceMotion = useReducedMotion() ?? false
+  /** On the workflow editor (`/w/[id]` and the `/w` index) the stack insets by `--panel-width` / `--terminal-height` to clear the panel and terminal. */
+  const isWorkflowPage = pathname ? /\/w(\/|$)/.test(pathname) : false
 
   const [toasts, setToasts] = useState<ToastData[]>([])
-  const [isPaused, setIsPaused] = useState(false)
+  const [heights, setHeights] = useState<Record<string, number>>({})
+  const [expanded, setExpanded] = useState(false)
   const [mounted, setMounted] = useState(false)
+  /** Monotonic arrival count; changes only on a new toast, so dismissing the front card doesn't restart the stack countdown. */
+  const [arrivalCount, setArrivalCount] = useState(0)
   const timersRef = useRef(new Map<string, ReturnType<typeof setTimeout>>())
-  const isPausedRef = useRef(false)
 
   useEffect(() => {
     setMounted(true)
   }, [])
 
+  /**
+   * Reset the hover-expanded flag whenever the stack empties. The hover wrapper
+   * unmounts without firing mouse-leave when the last toast goes (dismiss / clear
+   * / navigation), so without this `expanded` could stay `true` and stop the next
+   * toasts from auto-dismissing.
+   */
   useEffect(() => {
-    isPausedRef.current = isPaused
-  }, [isPaused])
+    if (toasts.length === 0) setExpanded(false)
+  }, [toasts.length])
 
+  /**
+   * Adds a toast. Actionable toasts persist (`duration: 0`) unless an explicit
+   * `duration` is given. When the stack exceeds `STACK_LIMIT` the oldest
+   * auto-dismissable toast is evicted first, so a persistent (actionable) toast
+   * isn't silently dropped — only an all-persistent overflow evicts the oldest.
+   */
   const addToast = useCallback((input: ToastInput): string => {
     const id = generateId()
     const data: ToastData = {
@@ -293,9 +546,17 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
       description: input.description,
       variant: input.variant ?? 'default',
       action: input.action,
-      duration: input.duration ?? AUTO_DISMISS_MS,
+      duration: input.duration ?? (input.action ? 0 : AUTO_DISMISS_MS),
+      persistAcrossRoutes: input.persistAcrossRoutes ?? false,
     }
-    setToasts((prev) => [...prev, data].slice(-MAX_VISIBLE))
+    setToasts((prev) => {
+      const next = [...prev, data]
+      if (next.length <= STACK_LIMIT) return next
+      const evictIndex = next.findIndex((t) => t.duration > 0)
+      next.splice(evictIndex === -1 ? 0 : evictIndex, 1)
+      return next
+    })
+    setArrivalCount((c) => c + 1)
     return id
   }, [])
 
@@ -306,57 +567,98 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
       timersRef.current.delete(id)
     }
     setToasts((prev) => prev.filter((t) => t.id !== id))
+    setHeights((prev) => {
+      if (!(id in prev)) return prev
+      const next = { ...prev }
+      delete next[id]
+      return next
+    })
   }, [])
 
   const dismissAllToasts = useCallback(() => {
     for (const timer of timersRef.current.values()) clearTimeout(timer)
     timersRef.current.clear()
     setToasts([])
+    setHeights({})
   }, [])
 
-  const pauseAll = useCallback(() => {
-    setIsPaused(true)
-    isPausedRef.current = true
-    for (const timer of timersRef.current.values()) clearTimeout(timer)
-    timersRef.current.clear()
+  /**
+   * Clear only route-scoped toasts. Toasts flagged `persistAcrossRoutes` —
+   * global, ongoing-state notifications like the connection status — survive,
+   * everything else (page-scoped notifications) is cleared on navigation.
+   */
+  const dismissRouteScopedToasts = useCallback(() => {
+    setToasts((prev) => {
+      const kept = prev.filter((t) => t.persistAcrossRoutes)
+      if (kept.length === prev.length) return prev
+      for (const t of prev) {
+        if (t.persistAcrossRoutes) continue
+        const timer = timersRef.current.get(t.id)
+        if (timer) {
+          clearTimeout(timer)
+          timersRef.current.delete(t.id)
+        }
+      }
+      return kept
+    })
   }, [])
 
+  const measureToast = useCallback((id: string, height: number) => {
+    setHeights((prev) => (prev[id] === height ? prev : { ...prev, [id]: height }))
+  }, [])
+
+  /** Drop measured heights for toasts evicted by `slice(-STACK_LIMIT)` (single dismissal prunes its own entry). */
+  useEffect(() => {
+    setHeights((prev) => {
+      const live = new Set(toasts.map((t) => t.id))
+      const stale = Object.keys(prev).filter((id) => !live.has(id))
+      if (stale.length === 0) return prev
+      const next = { ...prev }
+      for (const id of stale) delete next[id]
+      return next
+    })
+  }, [toasts])
+
+  /**
+   * A persistent toast (`duration <= 0`) pins the stack: the dismiss-all ring's
+   * auto-countdown is suppressed so the action can't be cleared from under the
+   * user. The ring still renders and dismisses on click.
+   */
+  const hasPersistentToast = toasts.some((t) => t.duration <= 0)
+
   /**
-   * Per-toast auto-dismiss timers. Cleared when the stack empties so a fresh
-   * arrival after a pause gets new timers. Pausing clears all live timers.
+   * Per-toast auto-dismiss timers. The stack ring owns dismissal when it
+   * auto-fires (2+ toasts, none persistent); otherwise — a lone toast, or a
+   * stack pinned by a persistent toast — each timed toast runs its own timer so
+   * it still expires while the persistent one stays. Hover holds them.
    */
   useEffect(() => {
-    if (toasts.length === 0) {
-      if (isPausedRef.current) setIsPaused(false)
-      for (const timer of timersRef.current.values()) clearTimeout(timer)
-      timersRef.current.clear()
+    const timers = timersRef.current
+    const stackAutoDismiss = toasts.length >= STACK_DISMISS_THRESHOLD && !hasPersistentToast
+    if (toasts.length === 0 || expanded || stackAutoDismiss) {
+      for (const timer of timers.values()) clearTimeout(timer)
+      timers.clear()
       return
     }
-    if (isPausedRef.current) return
-
-    const timers = timersRef.current
-    const activeIds = new Set<string>()
 
     for (const t of toasts) {
       if (t.duration <= 0 || timers.has(t.id)) continue
-      activeIds.add(t.id)
       timers.set(
         t.id,
         setTimeout(() => {
           timers.delete(t.id)
-          if (isPausedRef.current) return
           dismissToast(t.id)
         }, t.duration)
       )
     }
 
     for (const [id, timer] of timers) {
-      if (!activeIds.has(id) && !toasts.some((t) => t.id === id)) {
+      if (!toasts.some((t) => t.id === id)) {
         clearTimeout(timer)
         timers.delete(id)
       }
     }
-  }, [toasts, dismissToast])
+  }, [toasts, expanded, hasPersistentToast, dismissToast])
 
   useEffect(() => {
     const timers = timersRef.current
@@ -365,21 +667,23 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
     }
   }, [])
 
-  /**
-   * Stable across mounts because `addToast` is memoized with no deps. Capturing
-   * once at mount lets the module-level `toast` re-export bind to the live
-   * provider without re-allocating wrappers on every render.
-   */
+  /** On navigation, clear route-scoped toasts so they don't trail the user; `persistAcrossRoutes` toasts survive. */
+  useEffect(() => {
+    dismissRouteScopedToasts()
+  }, [pathname, dismissRouteScopedToasts])
+
+  /** Held in a ref (seeded once from the stable `addToast`) so the module-level `toast` binds to the live provider. */
   const toastFn = useRef<ToastFn>(createToastFn(addToast))
 
   useEffect(() => {
-    globalToast = toastFn.current
+    const fn = toastFn.current
+    globalToast = fn
     globalDismiss = dismissToast
     globalDismissAll = dismissAllToasts
     return () => {
-      globalToast = null
-      globalDismiss = null
-      globalDismissAll = null
+      if (globalToast === fn) globalToast = null
+      if (globalDismiss === dismissToast) globalDismiss = null
+      if (globalDismissAll === dismissAllToasts) globalDismissAll = null
     }
   }, [dismissToast, dismissAllToasts])
 
@@ -388,33 +692,89 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
     [dismissToast, dismissAllToasts]
   )
 
+  const ordered = [...toasts].reverse()
+  const frontHeight = heights[ordered[0]?.id ?? ''] ?? ESTIMATED_TOAST_HEIGHT
+  let cumulative = 0
+  const layout = ordered.map((toast, index) => {
+    const naturalHeight = heights[toast.id] ?? ESTIMATED_TOAST_HEIGHT
+    const offsetBefore = cumulative
+    cumulative += naturalHeight + EXPAND_GAP_PX
+    const geometry: ToastGeometry = {
+      y: expanded ? -offsetBefore : -index * COLLAPSED_OFFSET_PX,
+      scale: expanded ? 1 : 1 - index * COLLAPSED_SCALE_STEP,
+      height: expanded || index === 0 ? naturalHeight : frontHeight,
+      zIndex: ordered.length - index,
+    }
+    return { toast, geometry }
+  })
+
+  const collapsedHeight =
+    frontHeight + Math.max(0, Math.min(ordered.length, STACK_LIMIT) - 1) * COLLAPSED_OFFSET_PX
+  const expandedHeight = cumulative > 0 ? cumulative - EXPAND_GAP_PX : frontHeight
+  const containerHeight = expanded ? expandedHeight : collapsedHeight
+
   return (
     <ToastContext.Provider value={ctx}>
       {children}
-      {mounted && toasts.length > 0
+      {mounted
         ? createPortal(
-            <Tooltip.Provider>
-              <div
-                aria-live='polite'
-                aria-label='Notifications'
-                className='fixed z-[var(--z-toast)] grid'
-                style={{
-                  right: isWorkflowPage ? 'calc(var(--panel-width) + 16px)' : '16px',
-                  bottom: isWorkflowPage ? 'calc(var(--terminal-height) + 16px)' : '16px',
-                }}
-              >
-                {[...toasts].reverse().map((t, index, stacked) => (
-                  <ToastItem
-                    key={t.id}
-                    toast={t}
-                    depth={stacked.length - index - 1}
-                    isPaused={isPaused}
-                    onPause={pauseAll}
-                    onDismiss={dismissToast}
-                  />
-                ))}
-              </div>
-            </Tooltip.Provider>,
+            <AnimatePresence>
+              {toasts.length > 0 ? (
+                <motion.ol
+                  key='toast-stack'
+                  aria-live='polite'
+                  aria-label='Notifications'
+                  className='fixed z-[var(--z-toast)] m-0 list-none p-0'
+                  exit={{
+                    opacity: 0,
+                    transition: reduceMotion ? { duration: 0 } : { duration: 0.2, ease: 'easeIn' },
+                  }}
+                  style={{
+                    right: isWorkflowPage ? 'calc(var(--panel-width) + 16px)' : '16px',
+                    bottom: isWorkflowPage ? 'calc(var(--terminal-height) + 16px)' : '16px',
+                    width: TOAST_WIDTH,
+                    height: containerHeight,
+                  }}
+                >
+                  <AnimatePresence initial={false}>
+                    {toasts.length >= STACK_DISMISS_THRESHOLD ? (
+                      <StackDismiss
+                        key='dismiss-all'
+                        paused={expanded}
+                        autoDismiss={!hasPersistentToast}
+                        reduceMotion={reduceMotion}
+                        resetKey={String(arrivalCount)}
+                        onDismiss={dismissAllToasts}
+                      />
+                    ) : null}
+                  </AnimatePresence>
+                  <div
+                    onMouseEnter={() => setExpanded(true)}
+                    onMouseLeave={() => setExpanded(false)}
+                    onFocusCapture={() => setExpanded(true)}
+                    onBlurCapture={(event) => {
+                      if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+                        setExpanded(false)
+                      }
+                    }}
+                    className='absolute inset-0'
+                  >
+                    <AnimatePresence>
+                      {layout.map(({ toast, geometry }) => (
+                        <ToastItem
+                          key={toast.id}
+                          toast={toast}
+                          geometry={geometry}
+                          reduceMotion={reduceMotion}
+                          onDismiss={dismissToast}
+                          onMeasure={measureToast}
+                        />
+                      ))}
+                    </AnimatePresence>
+                  </div>
+                </motion.ol>
+              ) : null}
+            </AnimatePresence>,
             document.body
           )
         : null}
diff --git a/apps/sim/components/emcn/icons/circle-alert.tsx b/apps/sim/components/emcn/icons/circle-alert.tsx
new file mode 100644
index 00000000000..91bd25154f4
--- /dev/null
+++ b/apps/sim/components/emcn/icons/circle-alert.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+/**
+ * CircleAlert icon component - circular alert used for error intent.
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function CircleAlert(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      aria-hidden='true'
+      {...props}
+    >
+      <circle cx='12' cy='12' r='10' />
+      <path d='M12 8v4' />
+      <path d='M12 16h.01' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/circle-check.tsx b/apps/sim/components/emcn/icons/circle-check.tsx
new file mode 100644
index 00000000000..759ae6f51a0
--- /dev/null
+++ b/apps/sim/components/emcn/icons/circle-check.tsx
@@ -0,0 +1,26 @@
+import type { SVGProps } from 'react'
+
+/**
+ * CircleCheck icon component - circular checkmark used for success intent.
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function CircleCheck(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      aria-hidden='true'
+      {...props}
+    >
+      <circle cx='12' cy='12' r='10' />
+      <path d='m9 12 2 2 4-4' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/circle-info.tsx b/apps/sim/components/emcn/icons/circle-info.tsx
new file mode 100644
index 00000000000..ba09eec89aa
--- /dev/null
+++ b/apps/sim/components/emcn/icons/circle-info.tsx
@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+/**
+ * CircleInfo icon — a circled "i", used for the info intent. Named for its
+ * shape to match its siblings (`CircleAlert`, `CircleCheck`) and to avoid
+ * colliding with the `Info` component re-exported from the emcn barrel.
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function CircleInfo(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      aria-hidden='true'
+      {...props}
+    >
+      <circle cx='12' cy='12' r='10' />
+      <path d='M12 16v-4' />
+      <path d='M12 8h.01' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/index.ts b/apps/sim/components/emcn/icons/index.ts
index 375302bc28a..2944287bba1 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -14,6 +14,9 @@ export { Calendar } from './calendar'
 export { Card } from './card'
 export { Check } from './check'
 export { ChevronDown } from './chevron-down'
+export { CircleAlert } from './circle-alert'
+export { CircleCheck } from './circle-check'
+export { CircleInfo } from './circle-info'
 export { Clipboard } from './clipboard'
 export { ClipboardList } from './clipboard-list'
 export { Clock } from './clock'
@@ -95,6 +98,7 @@ export { ThumbsUp } from './thumbs-up'
 export { Trash } from './trash'
 export { TrashOutline } from './trash-outline'
 export { Trash2 } from './trash2'
+export { TriangleAlert } from './triangle-alert'
 export { TypeBoolean } from './type-boolean'
 export { TypeJson } from './type-json'
 export { TypeNumber } from './type-number'
diff --git a/apps/sim/components/emcn/icons/triangle-alert.tsx b/apps/sim/components/emcn/icons/triangle-alert.tsx
new file mode 100644
index 00000000000..659ddb412d4
--- /dev/null
+++ b/apps/sim/components/emcn/icons/triangle-alert.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+/**
+ * TriangleAlert icon component - triangular warning used for warning intent.
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function TriangleAlert(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      aria-hidden='true'
+      {...props}
+    >
+      <path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z' />
+      <path d='M12 9v4' />
+      <path d='M12 17h.01' />
+    </svg>
+  )
+}
diff --git a/apps/sim/ee/data-drains/components/data-drains-settings.tsx b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
index 0fc5413f853..56991f00b36 100644
--- a/apps/sim/ee/data-drains/components/data-drains-settings.tsx
+++ b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
@@ -13,6 +13,7 @@ import {
   ChipInput,
   ChipModal,
   ChipModalBody,
+  ChipModalError,
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
@@ -419,6 +420,7 @@ function CreateDrainModal({ organizationId, onClose }: CreateDrainModalProps) {
   const [destState, setDestState] = useState<unknown>(
     () => DESTINATION_FORM_REGISTRY[DESTINATION_TYPES[0]].initialState
   )
+  const [submitError, setSubmitError] = useState<string | null>(null)
 
   const spec = DESTINATION_FORM_REGISTRY[destinationType]
   const canSubmit = name.trim().length > 0 && spec.isComplete(destState)
@@ -430,6 +432,7 @@ function CreateDrainModal({ organizationId, onClose }: CreateDrainModalProps) {
 
   async function handleSubmit() {
     if (!canSubmit) return
+    setSubmitError(null)
     try {
       const body = {
         name: name.trim(),
@@ -443,7 +446,7 @@ function CreateDrainModal({ organizationId, onClose }: CreateDrainModalProps) {
     } catch (error) {
       const msg = toError(error).message
       logger.error('Failed to create data drain', { error: msg })
-      toast.error(msg)
+      setSubmitError(msg)
     }
   }
 
@@ -488,6 +491,7 @@ function CreateDrainModal({ organizationId, onClose }: CreateDrainModalProps) {
         <section className='flex flex-col gap-3 px-2'>
           <spec.FormFields state={destState} setState={setDestState} />
         </section>
+        <ChipModalError>{submitError}</ChipModalError>
       </ChipModalBody>
       <ChipModalFooter
         onCancel={onClose}
diff --git a/apps/sim/stores/terminal/console/store.ts b/apps/sim/stores/terminal/console/store.ts
index e718bfea193..59e94537d3d 100644
--- a/apps/sim/stores/terminal/console/store.ts
+++ b/apps/sim/stores/terminal/console/store.ts
@@ -241,22 +241,50 @@ function appendWorkflowEntry(
 interface NotifyBlockErrorParams {
   error: unknown
   blockName: string
+  blockId: string
+  executionId?: string
   logContext: Record<string, unknown>
 }
 
-const notifyBlockError = ({ error, blockName, logContext }: NotifyBlockErrorParams) => {
+/**
+ * A single block failure surfaces through both `addConsole` (initial entry)
+ * and `updateConsole` (streaming/finalize), so the same logical error asks to
+ * toast twice within the same tick. Collapse them inside a short window. The
+ * key is scoped to the block execution (not just block + message), so a re-run
+ * or a different execution still toasts — even within the window, and even
+ * after the stack was cleared on navigation.
+ */
+const NOTIFY_DEDUP_WINDOW_MS = 1500
+const recentErrorNotifications = new Map<string, number>()
+
+const notifyBlockError = ({
+  error,
+  blockName,
+  blockId,
+  executionId,
+  logContext,
+}: NotifyBlockErrorParams) => {
   const settings = getQueryClient().getQueryData<GeneralSettings>(generalSettingsKeys.settings())
   const isErrorNotificationsEnabled = settings?.errorNotificationsEnabled ?? true
 
   if (!isErrorNotificationsEnabled) return
 
   try {
-    const errorMessage = String(error)
+    const errorMessage = normalizeConsoleError(error) ?? String(error)
     const displayName = blockName || 'Unknown Block'
-    const displayMessage = `${displayName}: ${errorMessage}`
     const copilotMessage = `${errorMessage}\n\nError in ${displayName}.\n\nPlease fix this.`
 
-    toast.error(displayMessage, {
+    const now = Date.now()
+    for (const [key, shownAt] of recentErrorNotifications) {
+      if (now - shownAt >= NOTIFY_DEDUP_WINDOW_MS) recentErrorNotifications.delete(key)
+    }
+    const dedupKey = `${getBlockExecutionKey(blockId, executionId)}: ${errorMessage}`
+    const lastShownAt = recentErrorNotifications.get(dedupKey)
+    if (lastShownAt !== undefined && now - lastShownAt < NOTIFY_DEDUP_WINDOW_MS) return
+    recentErrorNotifications.set(dedupKey, now)
+
+    toast.error(displayName, {
+      description: errorMessage,
       action: {
         label: 'Fix in Copilot',
         onClick: () => sendMothershipMessage(copilotMessage),
@@ -322,6 +350,8 @@ export const useTerminalConsoleStore = create<ConsoleStore>()(
         notifyBlockError({
           error: createdEntry.error,
           blockName: createdEntry.blockName || 'Unknown Block',
+          blockId: createdEntry.blockId,
+          executionId: createdEntry.executionId,
           logContext: { entryId: createdEntry.id },
         })
       }
@@ -610,6 +640,8 @@ export const useTerminalConsoleStore = create<ConsoleStore>()(
         notifyBlockError({
           error: update.error,
           blockName: update.blockName || matchingEntry?.blockName || 'Unknown Block',
+          blockId,
+          executionId,
           logContext: { blockId },
         })
       }