From f2e08444cefacd883ad367e88de51355e0c046e1 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 4 Jun 2026 14:27:03 -0700
Subject: [PATCH 01/34] =?UTF-8?q?feat(mothership):=20home=20chat=20UX=20?=
 =?UTF-8?q?=E2=80=94=20grey=20tray,=20inline=20chat=20open,=20title=20bar,?=
 =?UTF-8?q?=20stationary=20panel=20toggle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Restructure the home input into a stacked card (grey tray behind the input)
  that hosts the All Chats launcher; the chat list expands inline within the tray
- Open existing chats inline with no route remount via adoptResolvedChatId
  (now exposed from useChat), with hover-prefetch and the slide-in morph
- Add a Codex-style chat title bar (title + action menu) to the open chat view
- Make the right resource-panel collapse/expand a single stationary toggle
  outside the animating panel, so it no longer moves on collapse
- Auto-hide the chat scrollbar; reveal it only while actively scrolling
- Bump the home input corner radius to 17px

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/chat-history/chat-history.tsx  | 244 ++++++++++++++++++
 .../home/components/chat-history/index.ts     |   1 +
 .../[workspaceId]/home/components/index.ts    |   1 +
 .../chat-title-bar/chat-title-bar.tsx         |  72 ++++++
 .../components/chat-title-bar/index.ts        |   1 +
 .../mothership-chat/mothership-chat.tsx       |  24 +-
 .../resource-tabs/resource-panel-toggle.tsx   |  63 +++++
 .../resource-tabs/resource-tabs.tsx           |  66 ++---
 .../mothership-view/mothership-view.tsx       |   3 -
 .../home/components/user-input/user-input.tsx |   2 +-
 .../app/workspace/[workspaceId]/home/home.tsx |  86 +++---
 .../[workspaceId]/home/hooks/use-chat.ts      |   5 +
 apps/sim/hooks/queries/mothership-chats.ts    |  20 ++
 apps/sim/hooks/use-autohide-scrollbar.ts      |  38 +++
 apps/sim/lib/posthog/events.ts                |   6 +
 15 files changed, 557 insertions(+), 75 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/chat-history/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle.tsx
 create mode 100644 apps/sim/hooks/use-autohide-scrollbar.ts

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx
new file mode 100644
index 00000000000..d7b4a1552ab
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx
@@ -0,0 +1,244 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { differenceInCalendarDays, isToday, isYesterday } from 'date-fns'
+import { useParams, useRouter } from 'next/navigation'
+import { Expandable, ExpandableContent, Skeleton } from '@/components/emcn'
+import { Clock, Search } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+import { type TaskMetadata, usePrefetchChatHistory, useTasks } from '@/hooks/queries/tasks'
+
+const CONFIG = {
+  LIST_MAX_HEIGHT: 320,
+  SKELETON_ROWS: 5,
+} as const
+
+/** A recency bucket of chats rendered as one section in the history list. */
+interface ChatBucket {
+  key: string
+  label: string
+  tasks: TaskMetadata[]
+}
+
+/**
+ * Buckets chats into Codex-style recency sections. Pinned chats are lifted out
+ * of their date bucket into a dedicated section at the top; everything else is
+ * grouped by how recently it was last updated. The server already returns the
+ * list ordered (pinned first, then desc by `updatedAt`), so per-bucket order is
+ * preserved by simply appending as we iterate.
+ */
+function bucketChats(tasks: readonly TaskMetadata[]): ChatBucket[] {
+  const now = new Date()
+  const pinned: TaskMetadata[] = []
+  const today: TaskMetadata[] = []
+  const yesterday: TaskMetadata[] = []
+  const last7: TaskMetadata[] = []
+  const last30: TaskMetadata[] = []
+  const older: TaskMetadata[] = []
+
+  for (const task of tasks) {
+    if (task.isPinned) {
+      pinned.push(task)
+      continue
+    }
+    const date = task.updatedAt
+    if (isToday(date)) {
+      today.push(task)
+    } else if (isYesterday(date)) {
+      yesterday.push(task)
+    } else {
+      const days = differenceInCalendarDays(now, date)
+      if (days <= 7) last7.push(task)
+      else if (days <= 30) last30.push(task)
+      else older.push(task)
+    }
+  }
+
+  return (
+    [
+      { key: 'pinned', label: 'Pinned', tasks: pinned },
+      { key: 'today', label: 'Today', tasks: today },
+      { key: 'yesterday', label: 'Yesterday', tasks: yesterday },
+      { key: 'last7', label: 'Previous 7 Days', tasks: last7 },
+      { key: 'last30', label: 'Previous 30 Days', tasks: last30 },
+      { key: 'older', label: 'Older', tasks: older },
+    ] as const
+  ).filter((bucket) => bucket.tasks.length > 0)
+}
+
+/**
+ * A small status dot mirroring the sidebar's semantics: yellow while a chat is
+ * actively streaming, brand accent when it has unread activity. Rendered only
+ * when one of those states applies.
+ */
+function StatusDot({ task }: { task: TaskMetadata }) {
+  if (!task.isActive && !task.isUnread) return null
+  return (
+    <span
+      aria-hidden='true'
+      className='size-[6px] flex-shrink-0 rounded-full'
+      style={{ backgroundColor: task.isActive ? '#EAB308' : 'var(--brand-accent)' }}
+    />
+  )
+}
+
+/**
+ * A launcher into the workspace's prior Mothership chats, docked into the grey
+ * shelf beneath the home input (Codex tray pattern). Collapsed, it's a compact
+ * "All Chats" chip; opening animates a searchable, recency-grouped list open
+ * INSIDE the grey tray — the shelf grows downward while the centered input
+ * rides upward, in lockstep (300ms ease). Lives on the new-chat home view so a
+ * chat can be resumed without the (collapsible) sidebar.
+ */
+interface ChatHistoryProps {
+  /**
+   * Opens the selected chat. When provided, the chat opens inline (the home
+   * input morphs into the docked chat view) instead of navigating. Falls back
+   * to a route push when omitted.
+   */
+  onSelectChat?: (chatId: string) => void
+}
+
+export function ChatHistory({ onSelectChat }: ChatHistoryProps) {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const router = useRouter()
+  const prefetchChatHistory = usePrefetchChatHistory()
+  const { data: tasks = [], isLoading } = useTasks(workspaceId)
+
+  const [open, setOpen] = useState(false)
+  const [query, setQuery] = useState('')
+  const panelRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const buckets = useMemo(() => {
+    const trimmed = query.trim().toLowerCase()
+    const filtered = trimmed
+      ? tasks.filter((task) => task.name.toLowerCase().includes(trimmed))
+      : tasks
+    return bucketChats(filtered)
+  }, [tasks, query])
+
+  const hasChats = tasks.length > 0
+  const hasResults = buckets.length > 0
+
+  /** Focus the search field and clear stale queries each time the panel opens. */
+  useEffect(() => {
+    if (open) {
+      inputRef.current?.focus()
+    } else {
+      setQuery('')
+    }
+  }, [open])
+
+  /** Collapse on outside click or Escape, matching popover dismissal. */
+  useEffect(() => {
+    if (!open) return
+    const handlePointerDown = (event: MouseEvent) => {
+      if (!panelRef.current?.contains(event.target as Node)) setOpen(false)
+    }
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', handlePointerDown)
+    document.addEventListener('keydown', handleKeyDown)
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [open])
+
+  const handleSelect = (chatId: string) => {
+    setOpen(false)
+    if (onSelectChat) {
+      onSelectChat(chatId)
+      return
+    }
+    router.push(`/workspace/${workspaceId}/task/${chatId}`)
+  }
+
+  return (
+    <div ref={panelRef} className='w-full'>
+      <div className='flex items-center px-2 py-1.5'>
+        <button
+          type='button'
+          onClick={() => setOpen((prev) => !prev)}
+          aria-expanded={open}
+          aria-label='All chats'
+          className={cn(
+            'flex items-center gap-1.5 rounded-[8px] px-2 py-1 transition-colors',
+            'hover-hover:bg-[var(--surface-active)]',
+            open && 'bg-[var(--surface-active)]'
+          )}
+        >
+          <Clock className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+          <span className='text-[var(--text-body)] text-sm'>All Chats</span>
+        </button>
+      </div>
+
+      <Expandable expanded={open}>
+        <ExpandableContent>
+          <div className='flex flex-col px-1.5 pb-1.5'>
+            <div className='flex items-center gap-2 px-2 py-1.5'>
+              <Search className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+              <input
+                ref={inputRef}
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder='Search chats'
+                aria-label='Search chats'
+                className='w-full bg-transparent text-[var(--text-body)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none'
+              />
+            </div>
+            <div
+              className='flex flex-col overflow-y-auto overscroll-contain'
+              style={{ maxHeight: CONFIG.LIST_MAX_HEIGHT }}
+            >
+              {isLoading ? (
+                <div className='flex flex-col gap-1 px-1 py-1'>
+                  {Array.from({ length: CONFIG.SKELETON_ROWS }, (_, i) => (
+                    <Skeleton key={i} className='h-[28px] w-full' />
+                  ))}
+                </div>
+              ) : !hasChats ? (
+                <p className='px-2 py-6 text-center text-[var(--text-muted)] text-caption'>
+                  No chats yet
+                </p>
+              ) : !hasResults ? (
+                <p className='px-2 py-6 text-center text-[var(--text-muted)] text-caption'>
+                  No chats found
+                </p>
+              ) : (
+                buckets.map((bucket) => (
+                  <div key={bucket.key} className='mt-1.5 first:mt-0'>
+                    <p className='px-2 py-1 font-medium text-[var(--text-muted)] text-caption'>
+                      {bucket.label}
+                    </p>
+                    {bucket.tasks.map((task) => (
+                      <button
+                        key={task.id}
+                        type='button'
+                        onClick={() => handleSelect(task.id)}
+                        onMouseEnter={() => prefetchChatHistory(task.id)}
+                        className='flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
+                      >
+                        <span
+                          className={cn(
+                            'min-w-0 flex-1 truncate text-[var(--text-body)] text-sm',
+                            task.isUnread && 'font-medium text-[var(--text-primary)]'
+                          )}
+                        >
+                          {task.name}
+                        </span>
+                        <StatusDot task={task} />
+                      </button>
+                    ))}
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </ExpandableContent>
+      </Expandable>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/index.ts
new file mode 100644
index 00000000000..68f18b91155
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/index.ts
@@ -0,0 +1 @@
+export { ChatHistory } from './chat-history'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/index.ts
index 8728fc036c4..1aea8756a84 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/index.ts
@@ -1,3 +1,4 @@
+export { ChatHistory } from './chat-history'
 export { ChatMessageAttachments } from './chat-message-attachments'
 export { ContextMentionIcon } from './context-mention-icon'
 export { CreditsChip } from './credits-chip'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
new file mode 100644
index 00000000000..798c8f808ad
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
@@ -0,0 +1,72 @@
+'use client'
+
+import { useParams } from 'next/navigation'
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/emcn'
+import { Link, MoreHorizontal, SquareArrowUpRight } from '@/components/emcn/icons'
+import { useTasks } from '@/hooks/queries/tasks'
+
+const FALLBACK_TITLE = 'New chat'
+
+interface ChatTitleBarProps {
+  /** The open chat's id. Resolves the title from the task list and powers the actions. */
+  chatId?: string
+}
+
+/**
+ * A Codex-style title bar pinned to the top of an open Mothership chat: the
+ * chat title on the left, an action menu (kebab) on the right. The action set
+ * is intentionally minimal for now — non-destructive, no-backend affordances —
+ * and is the natural home for future per-chat actions (rename, pin, delete).
+ */
+export function ChatTitleBar({ chatId }: ChatTitleBarProps) {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const { data: tasks = [] } = useTasks(workspaceId)
+
+  const title = tasks.find((task) => task.id === chatId)?.name ?? FALLBACK_TITLE
+  const taskPath = chatId ? `/workspace/${workspaceId}/task/${chatId}` : null
+
+  const handleOpenInNewTab = () => {
+    if (taskPath) window.open(taskPath, '_blank', 'noopener,noreferrer')
+  }
+
+  const handleCopyLink = () => {
+    if (taskPath) void navigator.clipboard?.writeText(`${window.location.origin}${taskPath}`)
+  }
+
+  return (
+    <div className='flex h-[44px] flex-shrink-0 items-center gap-1 border-[var(--border)] border-b px-[24px]'>
+      <span className='min-w-0 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+        {title}
+      </span>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant='ghost'
+            size={null}
+            type='button'
+            aria-label='Chat actions'
+            className='size-[28px] flex-shrink-0 rounded-[8px] hover-hover:bg-[var(--surface-active)]'
+          >
+            <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align='end' side='bottom' sideOffset={4}>
+          <DropdownMenuItem disabled={!taskPath} onSelect={handleOpenInNewTab}>
+            <SquareArrowUpRight />
+            Open in new tab
+          </DropdownMenuItem>
+          <DropdownMenuItem disabled={!taskPath} onSelect={handleCopyLink}>
+            <Link />
+            Copy link
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/index.ts
new file mode 100644
index 00000000000..a2b94654960
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/index.ts
@@ -0,0 +1 @@
+export { ChatTitleBar } from './chat-title-bar'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
index 89bea30c4af..9be584a50c1 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
@@ -25,8 +25,10 @@ import type {
   QueuedMessage,
 } from '@/app/workspace/[workspaceId]/home/types'
 import { useAutoScroll } from '@/hooks/use-auto-scroll'
+import { useAutoHideScrollbar } from '@/hooks/use-autohide-scrollbar'
 import { useProgressiveList } from '@/hooks/use-progressive-list'
 import type { ChatContext } from '@/stores/panel'
+import { ChatTitleBar } from './components/chat-title-bar'
 import { MothershipChatSkeleton } from './components/mothership-chat-skeleton'
 
 interface MothershipChatProps {
@@ -86,6 +88,17 @@ const LAYOUT_STYLES = {
 
 const EMPTY_BLOCKS: ContentBlock[] = []
 
+/**
+ * Hides the scroll thumb by default and reveals it (color fade) only while the
+ * container carries `data-scrolling="true"` — toggled by {@link useAutoHideScrollbar}.
+ * Local override of the always-visible global scrollbar; covers WebKit + Firefox.
+ */
+const SCROLLBAR_AUTOHIDE = cn(
+  '[&::-webkit-scrollbar-thumb]:bg-transparent [&::-webkit-scrollbar-thumb]:transition-colors [&::-webkit-scrollbar-thumb]:duration-300',
+  'data-[scrolling=true]:[&::-webkit-scrollbar-thumb]:bg-[var(--scrollbar-thumb-color)]',
+  '[scrollbar-color:transparent_transparent] data-[scrolling=true]:[scrollbar-color:var(--scrollbar-thumb-color)_transparent]'
+)
+
 interface UserMessageRowProps {
   content: string
   contexts?: ChatMessageContext[]
@@ -209,6 +222,14 @@ export function MothershipChat({
   const { ref: scrollContainerRef, scrollToBottom } = useAutoScroll(isStreamActive, {
     scrollOnMount: true,
   })
+  const attachAutoHideScrollbar = useAutoHideScrollbar()
+  const setScrollContainer = useCallback(
+    (el: HTMLDivElement | null) => {
+      scrollContainerRef(el)
+      attachAutoHideScrollbar(el)
+    },
+    [scrollContainerRef, attachAutoHideScrollbar]
+  )
   const hasMessages = messages.length > 0
   const stagingKey = chatId ?? 'pending-chat'
   const { staged: stagedMessages, isStaging } = useProgressiveList(messages, stagingKey)
@@ -273,7 +294,8 @@ export function MothershipChat({
 
   return (
     <div className={cn('flex h-full min-h-0 flex-col', className)}>
-      <div ref={scrollContainerRef} className={styles.scrollContainer}>
+      {layout === 'mothership-view' && <ChatTitleBar chatId={chatId} />}
+      <div ref={setScrollContainer} className={cn(styles.scrollContainer, SCROLLBAR_AUTOHIDE)}>
         {isLoading && !hasMessages ? (
           <MothershipChatSkeleton layout={layout} />
         ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle.tsx
new file mode 100644
index 00000000000..524db557c01
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import { Button, Tooltip } from '@/components/emcn'
+import { PanelLeft } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+import {
+  RESOURCE_TAB_ICON_BUTTON_CLASS,
+  RESOURCE_TAB_ICON_CLASS,
+} from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls'
+
+interface ResourcePanelToggleProps {
+  /** Collapsed state — drives the tooltip label and aria-label. Ignored for the spacer. */
+  isCollapsed?: boolean
+  /** Toggle handler. Omit together with `placeholder` to render the inert spacer. */
+  onToggle?: () => void
+  /**
+   * Renders an invisible, non-interactive clone that reserves the toggle's exact
+   * footprint inside the panel header. The real (absolutely-positioned) toggle
+   * overlays this spot, so it never shifts when the panel collapses — the spacer
+   * rides the panel's width animation while the real button stays put.
+   */
+  placeholder?: boolean
+  className?: string
+}
+
+/**
+ * The right resource panel's collapse/expand control. Rendered twice: once as
+ * the real, absolutely-positioned button pinned to the panel's top-right corner
+ * (outside the animating panel, so it never moves), and once as a `placeholder`
+ * spacer inside the header to reserve the same footprint. Both share the same
+ * button + icon classes, so the overlay aligns exactly with no magic numbers.
+ */
+export function ResourcePanelToggle({
+  isCollapsed = false,
+  onToggle,
+  placeholder = false,
+  className,
+}: ResourcePanelToggleProps) {
+  const button = (
+    <Button
+      variant='subtle'
+      type='button'
+      onClick={placeholder ? undefined : onToggle}
+      aria-hidden={placeholder}
+      tabIndex={placeholder ? -1 : undefined}
+      aria-label={isCollapsed ? 'Expand resource view' : 'Collapse resource view'}
+      className={cn(RESOURCE_TAB_ICON_BUTTON_CLASS, placeholder && 'invisible', className)}
+    >
+      <PanelLeft className={cn(RESOURCE_TAB_ICON_CLASS, '-scale-x-100')} />
+    </Button>
+  )
+
+  if (placeholder) return button
+
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>{button}</Tooltip.Trigger>
+      <Tooltip.Content side='bottom'>
+        <p>{isCollapsed ? 'Expand' : 'Collapse'}</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index c8411552407..e2eba24418a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -11,13 +11,14 @@ import {
   useState,
 } from 'react'
 import { Button, Tooltip } from '@/components/emcn'
-import { Columns3, Eye, PanelLeft, Pencil } from '@/components/emcn/icons'
+import { Columns3, Eye, Pencil } from '@/components/emcn/icons'
 import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { isEphemeralResource } from '@/lib/copilot/resources/types'
 import { cn } from '@/lib/core/utils/cn'
 import type { PreviewMode } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
 import { AddResourceDropdown } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
 import { getResourceConfig } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
+import { ResourcePanelToggle } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle'
 import {
   RESOURCE_TAB_GAP_CLASS,
   RESOURCE_TAB_ICON_BUTTON_CLASS,
@@ -245,7 +246,6 @@ interface ResourceTabsProps {
   onAddResource: (resource: MothershipResource) => void
   onRemoveResource: (resourceType: MothershipResourceType, resourceId: string) => void
   onReorderResources: (resources: MothershipResource[]) => void
-  onCollapse: () => void
   previewMode?: PreviewMode
   onCyclePreviewMode?: () => void
   actions?: ReactNode
@@ -260,7 +260,6 @@ export function ResourceTabs({
   onAddResource,
   onRemoveResource,
   onReorderResources,
-  onCollapse,
   previewMode,
   onCyclePreviewMode,
   actions,
@@ -549,21 +548,6 @@ export function ResourceTabs({
         RESOURCE_TAB_GAP_CLASS
       )}
     >
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={onCollapse}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label='Collapse resource view'
-          >
-            <PanelLeft className={cn(RESOURCE_TAB_ICON_CLASS, '-scale-x-100')} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='bottom'>
-          <p>Collapse</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
       <div className={cn('flex min-w-0 flex-1 items-center', RESOURCE_TAB_GAP_CLASS)}>
         <div
           ref={scrollNodeRef}
@@ -628,28 +612,30 @@ export function ResourceTabs({
           />
         )}
       </div>
-      {(actions || (previewMode && onCyclePreviewMode)) && (
-        <div className={cn('ml-auto flex shrink-0 items-center', RESOURCE_TAB_GAP_CLASS)}>
-          {actions}
-          {previewMode && onCyclePreviewMode && (
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='subtle'
-                  onClick={onCyclePreviewMode}
-                  className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-                  aria-label='Cycle preview mode'
-                >
-                  <PreviewModeIcon mode={previewMode} className={RESOURCE_TAB_ICON_CLASS} />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='bottom'>
-                <p>{PREVIEW_MODE_LABELS[previewMode]}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          )}
-        </div>
-      )}
+      <div className={cn('ml-auto flex shrink-0 items-center', RESOURCE_TAB_GAP_CLASS)}>
+        {actions}
+        {previewMode && onCyclePreviewMode && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='subtle'
+                onClick={onCyclePreviewMode}
+                className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+                aria-label='Cycle preview mode'
+              >
+                <PreviewModeIcon mode={previewMode} className={RESOURCE_TAB_ICON_CLASS} />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='bottom'>
+              <p>{PREVIEW_MODE_LABELS[previewMode]}</p>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        )}
+        {/* Inert spacer reserving the toggle's exact footprint at the far right.
+            The real, interactive toggle is rendered absolutely in home.tsx and
+            overlays this spot, so it never moves when the panel collapses. */}
+        <ResourcePanelToggle placeholder />
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index 48953eb1e90..1251f31d123 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -48,7 +48,6 @@ interface MothershipViewProps {
   onAddResource: (resource: MothershipResource) => void
   onRemoveResource: (resourceType: MothershipResourceType, resourceId: string) => void
   onReorderResources: (resources: MothershipResource[]) => void
-  onCollapse: () => void
   isCollapsed: boolean
   className?: string
   previewSession?: FilePreviewSession | null
@@ -66,7 +65,6 @@ export const MothershipView = memo(
       onAddResource,
       onRemoveResource,
       onReorderResources,
-      onCollapse,
       isCollapsed,
       className,
       previewSession,
@@ -115,7 +113,6 @@ export const MothershipView = memo(
             onAddResource={onAddResource}
             onRemoveResource={onRemoveResource}
             onReorderResources={onReorderResources}
-            onCollapse={onCollapse}
             actions={
               active ? <ResourceActions workspaceId={workspaceId} resource={active} /> : null
             }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index baa7b2683cf..cc51699cac7 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -1258,7 +1258,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
     <div
       onClick={handleContainerClick}
       className={cn(
-        'relative z-10 mx-auto w-full max-w-[48rem] cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
+        'relative z-10 mx-auto w-full max-w-[48rem] cursor-text rounded-[17px] border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
         isInitialView && 'shadow-sm'
       )}
       onDragEnter={handleDragEnter}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index b3bef698d2f..09f485a6387 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -4,8 +4,6 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
-import { Button } from '@/components/emcn'
-import { PanelLeft } from '@/components/emcn/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { createWorkflowContract } from '@/lib/api/contracts'
 import {
@@ -26,6 +24,7 @@ import {
 import { useOAuthReturnRouter } from '@/hooks/use-oauth-return'
 import type { ChatContext } from '@/stores/panel'
 import {
+  ChatHistory,
   CreditsChip,
   MothershipChat,
   MothershipView,
@@ -33,6 +32,7 @@ import {
   UserInput,
   type UserInputHandle,
 } from './components'
+import { ResourcePanelToggle } from './components/mothership-view/components/resource-tabs/resource-panel-toggle'
 import { getMothershipUseChatOptions, useChat, useMothershipResize } from './hooks'
 import type { FileAttachmentForApi, MothershipResource, MothershipResourceType } from './types'
 
@@ -144,6 +144,7 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     sendMessage,
     stopGeneration,
     resolvedChatId,
+    adoptResolvedChatId,
     resources,
     activeResourceId,
     setActiveResourceId,
@@ -250,6 +251,24 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     sendMessage(trimmed || 'Analyze the attached file(s).', fileAttachments, contexts)
   }
 
+  /**
+   * Opens an existing chat from the All Chats list WITHOUT navigating. Adopting
+   * the chat id repoints `useChat` at its history (so messages hydrate in place)
+   * and rewrites the URL to /task/[id] via replaceState; flipping
+   * `isInputEntering` plays the same slide-in morph as sending a new message.
+   */
+  const handleOpenExistingChat = useCallback(
+    (selectedChatId: string) => {
+      captureEvent(posthogRef.current, 'task_opened_from_history', {
+        workspace_id: workspaceId,
+        chat_id: selectedChatId,
+      })
+      setIsInputEntering(true)
+      adoptResolvedChatId(selectedChatId, { replaceHomeHistory: true })
+    },
+    [adoptResolvedChatId, workspaceId]
+  )
+
   useEffect(() => {
     const handler = (e: Event) => {
       const message = (e as CustomEvent<MothershipSendMessageDetail>).detail?.message
@@ -299,11 +318,18 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     handleResourceEvent()
   }
 
+  // `resolvedChatId` is the chat actually in view — the prop on direct nav, or
+  // the id adopted when opening a chat inline from the All Chats list. Gating on
+  // it (not just the prop) lets an inline-opened chat render its skeleton + view
+  // before its history finishes loading.
+  const activeChatId = resolvedChatId ?? chatId
+  const { isPending: isActiveChatHistoryPending } = useChatHistory(activeChatId)
   const hasMessages = messages.length > 0
-  const showChatSkeleton = Boolean(chatId) && !hasMessages && isChatHistoryPending
+  const showChatSkeleton = Boolean(activeChatId) && !hasMessages && isActiveChatHistoryPending
+  const showChatView = hasMessages || showChatSkeleton || Boolean(resolvedChatId)
   const draftScopeKey = `${workspaceId}:${chatId ?? 'new'}`
 
-  if (!hasMessages && !showChatSkeleton) {
+  if (!showChatView) {
     return (
       <div className='relative h-full overflow-y-auto bg-[var(--bg)] [scrollbar-gutter:stable_both-edges]'>
         <div className='absolute top-[8.5px] right-[16px] z-10'>
@@ -314,17 +340,24 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
             What should we get done{firstName ? `, ${firstName}` : ''}?
           </h1>
           <div ref={initialViewInputRef} className='w-full'>
-            <UserInput
-              ref={initialViewUserInputRef}
-              defaultValue={initialPrompt}
-              draftScopeKey={draftScopeKey}
-              onSubmit={handleSubmit}
-              isSending={isSending}
-              onStopGeneration={handleStopGeneration}
-              userId={userId}
-              onContextAdd={handleContextAdd}
-              onContextRemove={handleInitialContextRemove}
-            />
+            {/* Stacked card (Figma node 1-3): grey tray sits behind the input
+                with a 1px frame on top/sides. The docked "All Chats" launcher
+                lives in the shelf below and animates the chat list open inside
+                the grey tray — growing downward as the input rides up. */}
+            <div className='mx-auto w-full max-w-[48rem] overflow-hidden rounded-[18px] bg-[var(--surface-3)] p-px'>
+              <UserInput
+                ref={initialViewUserInputRef}
+                defaultValue={initialPrompt}
+                draftScopeKey={draftScopeKey}
+                onSubmit={handleSubmit}
+                isSending={isSending}
+                onStopGeneration={handleStopGeneration}
+                userId={userId}
+                onContextAdd={handleContextAdd}
+                onContextRemove={handleInitialContextRemove}
+              />
+              <ChatHistory onSelectChat={handleOpenExistingChat} />
+            </div>
             <SuggestedActions
               onSelectPrompt={(prompt) => initialViewUserInputRef.current?.populatePrompt(prompt)}
             />
@@ -385,27 +418,20 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
         onAddResource={addResource}
         onRemoveResource={removeResource}
         onReorderResources={reorderResources}
-        onCollapse={collapseResource}
         isCollapsed={isResourceCollapsed}
         previewSession={previewSession}
         genericResourceData={genericResourceData ?? undefined}
         className={skipResourceTransition ? '!transition-none' : undefined}
       />
 
-      {isResourceCollapsed && (
-        <div className='absolute top-[8.5px] right-[16px]'>
-          <Button
-            variant='ghost'
-            size={null}
-            type='button'
-            onClick={() => setIsResourceCollapsed(false)}
-            className='size-[30px] rounded-[8px] hover-hover:bg-[var(--surface-active)]'
-            aria-label='Expand resource view'
-          >
-            <PanelLeft className='size-[16px] text-[var(--text-icon)]' />
-          </Button>
-        </div>
-      )}
+      {/* Single, stationary collapse/expand toggle. Lives OUTSIDE the animating
+          panel and is always rendered at the fixed top-right corner, overlaying
+          the header's spacer when open — so it never moves as the panel slides. */}
+      <ResourcePanelToggle
+        isCollapsed={isResourceCollapsed}
+        onToggle={() => (isResourceCollapsed ? setIsResourceCollapsed(false) : collapseResource())}
+        className='absolute top-[8.5px] right-[16px] z-30'
+      />
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
index e2ca729c64c..1ac75c76442 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
@@ -162,6 +162,10 @@ export interface UseChatReturn {
   isReconnecting: boolean
   error: string | null
   resolvedChatId: string | undefined
+  adoptResolvedChatId: (
+    chatId: string,
+    options?: { replaceHomeHistory?: boolean; invalidateList?: boolean }
+  ) => void
   sendMessage: (
     message: string,
     fileAttachments?: FileAttachmentForApi[],
@@ -5773,6 +5777,7 @@ export function useChat(
     isReconnecting,
     error,
     resolvedChatId,
+    adoptResolvedChatId,
     sendMessage,
     stopGeneration,
     resources,
diff --git a/apps/sim/hooks/queries/mothership-chats.ts b/apps/sim/hooks/queries/mothership-chats.ts
index bc7743804d6..5580bab7c0a 100644
--- a/apps/sim/hooks/queries/mothership-chats.ts
+++ b/apps/sim/hooks/queries/mothership-chats.ts
@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import {
   keepPreviousData,
   skipToken,
@@ -266,6 +267,25 @@ export function useMothershipChatHistory(chatId: string | undefined) {
   })
 }
 
+/**
+ * Returns a stable callback that warms the chat-history cache for a chat id.
+ * Call it on hover so opening that chat inline renders instantly — the
+ * `useMothershipChatHistory` query resolves from cache with no fetch flash.
+ */
+export function usePrefetchChatHistory() {
+  const queryClient = useQueryClient()
+  return useCallback(
+    (chatId: string) => {
+      void queryClient.prefetchQuery({
+        queryKey: mothershipChatKeys.detail(chatId),
+        queryFn: ({ signal }) => fetchMothershipChatHistory(chatId, signal),
+        staleTime: 30 * 1000,
+      })
+    },
+    [queryClient]
+  )
+}
+
 async function deleteChat(chatId: string): Promise<void> {
   await requestJson(deleteMothershipChatContract, {
     params: { chatId },
diff --git a/apps/sim/hooks/use-autohide-scrollbar.ts b/apps/sim/hooks/use-autohide-scrollbar.ts
new file mode 100644
index 00000000000..7234009addb
--- /dev/null
+++ b/apps/sim/hooks/use-autohide-scrollbar.ts
@@ -0,0 +1,38 @@
+import { useCallback, useRef } from 'react'
+
+/** Idle delay before the scrollbar fades back out after scrolling stops. */
+const IDLE_MS = 700
+
+/**
+ * Reveals a scroll container's scrollbar only while it is actively scrolling.
+ *
+ * Returns a callback ref to attach to the scroll element. On scroll it sets
+ * `data-scrolling="true"` and, after {@link IDLE_MS} of inactivity, clears it to
+ * `"false"` — pair with local CSS that hides the thumb unless
+ * `data-scrolling="true"`. The attribute is mutated directly (no React state),
+ * so scrolling never triggers a re-render. Safe to merge with another ref.
+ */
+export function useAutoHideScrollbar() {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const cleanupRef = useRef<(() => void) | null>(null)
+
+  return useCallback((el: HTMLElement | null) => {
+    cleanupRef.current?.()
+    cleanupRef.current = null
+    if (!el) return
+
+    const handleScroll = () => {
+      el.dataset.scrolling = 'true'
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+      timeoutRef.current = setTimeout(() => {
+        el.dataset.scrolling = 'false'
+      }, IDLE_MS)
+    }
+
+    el.addEventListener('scroll', handleScroll, { passive: true })
+    cleanupRef.current = () => {
+      el.removeEventListener('scroll', handleScroll)
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])
+}
diff --git a/apps/sim/lib/posthog/events.ts b/apps/sim/lib/posthog/events.ts
index a1e0ff734eb..a950ef04664 100644
--- a/apps/sim/lib/posthog/events.ts
+++ b/apps/sim/lib/posthog/events.ts
@@ -538,6 +538,12 @@ export interface PostHogEventMap {
     is_new_task: boolean
   }
 
+  /** A prior chat resumed inline from the home "All Chats" list (no navigation). */
+  task_opened_from_history: {
+    workspace_id: string
+    chat_id: string
+  }
+
   /** Pairs with `task_message_sent` via `request_id` for correlation with server-side logs. */
   task_request_started: {
     workspace_id: string

From 65bac26aa3ec6fa4b40b6c0cfff13a701e6202a0 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Mon, 8 Jun 2026 14:13:37 -0500
Subject: [PATCH 02/34] =?UTF-8?q?feat(emcn/toast):=20redesign=20toast=20?=
 =?UTF-8?q?=E2=80=94=20intent=20variants,=20Sonner-style=20stack,=20hover?=
 =?UTF-8?q?=20text=20reveal,=20dismiss-all?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Component (apps/sim/components/emcn/components/toast/toast.tsx):
- Variants default/info/success/warning/error, each with a distinct outline
  icon (CircleAlert/TriangleAlert/CircleCheck/Info/Bell) rendered inline with
  the message in a neutral color — no badge; intent reads from icon + copy.
- Stacking modeled on Sonner/Base-UI: a collapsed pile that fans open upward
  only when the cards are hovered. One fixed-duration expo-out tween drives all
  cards so rapid arrivals move in unison (no lagging card); cards arrive
  collapsed (expand is scoped to a wrapper around the cards, not the dismiss
  control).
- Title vs subtext hierarchy: message is a medium, primary-color title; the
  optional description is lighter/smaller subtext.
- Truncated text reveals its hidden lines on hover (RevealText): only the
  previously hidden lines blur in; the card height tracks the content so the
  action button stays pinned (no clipping). Larger bottom gradient fade hints
  at more text.
- Concentric corner radius (16px = chip 8px + 8px padding); single-line cards
  use a tighter 12px so they don't read as pills.
- Dismiss-all control: a small circular chip just outside the stack's
  bottom-left, shown at 2+ toasts. Linear auto-dismiss ring that restarts on
  each new arrival, pauses on hover, click to clear all; spring 'pop' entrance.
- Bug fixes: route-scoped clearing (toasts no longer trail across navigation),
  dedup of the add/update double-fire, actionable toasts persist by default.

Source/usage:
- stores/terminal/console/store.ts: notifyBlockError now passes the block name
  as the title and the error as the description (title/subtext), plus the dedup
  window.
- app/playground/page.tsx: Toast section added to the EMCN gallery.
- New EMCN icons: circle-alert, circle-check, info, triangle-alert.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/sim/app/playground/page.tsx              | 1685 +++++++++--------
 .../emcn/components/toast/toast.tsx           |  674 +++++--
 .../components/emcn/icons/circle-alert.tsx    |   27 +
 .../components/emcn/icons/circle-check.tsx    |   26 +
 apps/sim/components/emcn/icons/index.ts       |    4 +
 apps/sim/components/emcn/icons/info.tsx       |   27 +
 .../components/emcn/icons/triangle-alert.tsx  |   27 +
 apps/sim/stores/terminal/console/store.ts     |   23 +-
 8 files changed, 1548 insertions(+), 945 deletions(-)
 create mode 100644 apps/sim/components/emcn/icons/circle-alert.tsx
 create mode 100644 apps/sim/components/emcn/icons/circle-check.tsx
 create mode 100644 apps/sim/components/emcn/icons/info.tsx
 create mode 100644 apps/sim/components/emcn/icons/triangle-alert.tsx

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/components/emcn/components/toast/toast.tsx b/apps/sim/components/emcn/components/toast/toast.tsx
index f6da1c7cebf..cd7c1552be8 100644
--- a/apps/sim/components/emcn/components/toast/toast.tsx
+++ b/apps/sim/components/emcn/components/toast/toast.tsx
@@ -2,51 +2,96 @@
 
 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 { Info } from '@/components/emcn/icons/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
+/** Auto-dismiss countdown for the whole stack once the dismiss-all control appears (2+ toasts). */
+const STACK_DISMISS_MS = 6000
+/** Toast count at which the dismiss-all control appears and the stack countdown takes over. */
+const STACK_DISMISS_THRESHOLD = 2
+
+/** Card width; tracks the workflow-panel inset on narrow viewports. */
+const TOAST_WIDTH = 'min(100vw - 2rem, 280px)'
+
+/**
+ * Stack behavior, modeled on the Sonner / Base-UI toast: a collapsed pile that
+ * fans open upward on hover.
+ *
+ * - `STACK_LIMIT` — most toasts kept alive at once; arrivals beyond this evict
+ *   the oldest. Both the collapsed pile and the expanded fan show up to this
+ *   many.
+ * - `COLLAPSED_OFFSET_PX` / `COLLAPSED_SCALE_STEP` — per-depth lift and shrink
+ *   that make stacked cards peek above the front one when collapsed.
+ * - `EXPAND_GAP_PX` — vertical gap between cards once the stack is expanded.
+ */
+const STACK_LIMIT = 3
+const COLLAPSED_OFFSET_PX = 13
+const COLLAPSED_SCALE_STEP = 0.05
+const EXPAND_GAP_PX = 8
+
+/** Fallback card height used for the expanded fan-out before a toast is measured. */
+const ESTIMATED_TOAST_HEIGHT = 56
+
+/** Top + bottom border of a card, added to the measured content so the clamped `<li>` height matches the border box. */
+const CARD_BORDER_PX = 2
+
+/**
+ * Shared expo-out easing for every toast motion (stack reshuffle, enter, text
+ * resize). One fixed-duration tween — not a spring — so rapid arrivals all move
+ * with identical timing and settle in unison, instead of a re-targeted spring
+ * carrying velocity and making one card look like it lags behind the others.
+ */
+const TOAST_EASE = [0.22, 1, 0.36, 1] as const
+/** Duration for stack reshuffle + card enter. */
+const STACK_DURATION = 0.4
+/** Duration for the text-reveal resize (tail grow + blur). */
+const RESIZE_DURATION = 0.3
+
 /**
- * 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.
+ * Cards at or below roughly one line of text use a tighter corner radius — the
+ * concentric 16px reads as a pill on a short card. Taller cards (multi-line, or
+ * with a description / action) keep the concentric 16px.
  */
-const MAX_VISIBLE = 3
-const STACK_OFFSET_PX = 3
+const COMPACT_CARD_HEIGHT_PX = 46
+const COMPACT_RADIUS_PX = 12
+const CONCENTRIC_RADIUS_PX = 16
 
-type ToastVariant = 'default' | 'success' | 'error'
+type ToastVariant = 'default' | 'info' | 'success' | 'warning' | 'error'
 
 /**
- * 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.
+ * Leading icon per variant. Rendered inline at the start of the message in a
+ * neutral icon color (no tint, no badge) — variant intent reads from the icon
+ * shape and the message copy rather than color.
  */
 const VARIANT_ICON: Record<ToastVariant, ComponentType<SVGProps<SVGSVGElement>>> = {
   default: Bell,
-  error: Bell,
-  success: Check,
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  error: CircleAlert,
 }
 
 interface ToastAction {
@@ -75,6 +120,8 @@ type ToastFn = {
   (input: ToastInput): string
   success: (message: string, options?: Omit<ToastInput, 'message' | 'variant'>) => string
   error: (message: string, options?: Omit<ToastInput, 'message' | 'variant'>) => string
+  warning: (message: string, options?: Omit<ToastInput, 'message' | 'variant'>) => string
+  info: (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. */
   dismiss: (id: string) => void
   /** Dismisses every visible toast. No-op when the provider is unmounted. */
@@ -97,6 +144,8 @@ 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
@@ -105,9 +154,15 @@ function createToastFn(add: (input: ToastInput) => string): ToastFn {
 /**
  * Imperative toast function. Requires `<ToastProvider>` to be mounted.
  *
+ * Variants — `default` (neutral), `info`, `success`, `warning`, `error` —
+ * each render a distinct tinted leading icon. 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.warning('Usage nearing limit')
+ * toast.info('Sync in progress')
  * toast.success('Saved', { action: { label: 'View', onClick: () => router.push('/x') } })
  * toast({ message: 'Hello', variant: 'default' })
  * ```
@@ -126,105 +181,255 @@ export function useToast() {
   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 card height. Collapsed back cards are clamped to the front card's
+   * height so each reveals a consistent strip; expanded and front cards take
+   * their natural 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)
-
-  const dismiss = useCallback(() => {
-    setExiting(true)
-    exitTimerRef.current = setTimeout(() => onDismiss(t.id), EXIT_ANIMATION_MS)
-  }, [onDismiss, t.id])
+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's leading so the head/tail split lands on a line boundary. */
+  lineHeightPx: number
+  /**
+   * Optional inline icon rendered at the start of the text. Included in both
+   * head and tail so wrapping stays identical (the tail's copy lands on line 1,
+   * shifted out of view).
+   */
+  leadingIcon?: ReactNode
+  className?: string
+  reduceMotion: boolean
+}
 
-  useEffect(() => {
-    return () => clearTimeout(exitTimerRef.current)
-  }, [])
+/**
+ * Truncated text that reveals its hidden lines on hover. The head shows the
+ * first `clampLines` lines and never moves or animates. When the card is
+ * hovered AND the text actually overflows, the remaining lines mount below as
+ * a "tail" and blur in — so only the previously-hidden text animates. The
+ * head/tail split lands on an exact line boundary (`clampLines * lineHeightPx`)
+ * and the tail renders the same text shifted up by that height, so the two
+ * read as one continuous block. Text that fits within the clamp is never
+ * truncated, has no tail, 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
+  // Fade the last ~1.5 lines (not just a sliver) so the truncation reads as
+  // "more text, faded" rather than a hard cut.
+  const fadeStart = Math.max(0, clampHeight - lineHeightPx * 1.5)
+  const collapsedMask = `linear-gradient(to bottom, #000 ${fadeStart}px, transparent ${clampHeight}px)`
 
-  const showCountdown = !isPaused && !exiting && t.duration > 0
+  return (
+    <div>
+      <div
+        ref={headRef}
+        className={cn('overflow-hidden', className)}
+        style={{
+          maxHeight: clampHeight,
+          // Soft bottom edge hints at more text while collapsed; dropped once
+          // the tail takes over so the head/tail seam stays crisp.
+          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>
+  )
+}
 
+function ToastItem({ toast: t, geometry, reduceMotion, onDismiss, onMeasure }: ToastItemProps) {
+  const contentRef = useRef<HTMLDivElement>(null)
   /**
-   * 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.
+   * Hovering a single card reveals the hidden lines of any truncated text it
+   * holds (see `RevealText`); the content grows and the measured height feeds
+   * the stack layout so the card expands in place to fit. Cards with no
+   * truncated text don't react.
    */
-  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 [hovered, setHovered] = useState(false)
   const Icon = VARIANT_ICON[t.variant]
 
+  /**
+   * Report the card's natural height so the provider can lay out the expanded
+   * fan and the collapsed clamp against real (not estimated) heights. Measured
+   * on the inner content element — which is never height-constrained — so the
+   * clamp applied to the outer `<li>` can't feed back into the measurement.
+   * `useLayoutEffect` measures before paint to avoid an initial height jump;
+   * safe here because the portal only renders on the client.
+   */
+  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 drives `y`/`scale`/`opacity` so every card in the
+   * stack reshuffles with identical timing — no card lags. The expo-out ease is
+   * steep at the start, so an entering card is mostly opaque by the time it
+   * slides over the cards behind it (no doubled-text bleed) without needing a
+   * separate opacity ramp.
+   */
+  const transition = reduceMotion
+    ? { duration: 0 }
+    : {
+        duration: STACK_DURATION,
+        ease: TOAST_EASE,
+        // Height tracks the content instantly: the smooth growth comes from the
+        // tail's own height animation (RevealText), so the measured card height
+        // equals the content every frame. The action button stays pinned to the
+        // bottom and rides the morph instead of being clipped while a spring
+        // catches up.
+        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)}
+      /**
+       * Enter from below the stack (one card-height down) rather than cross-
+       * fading in place, so the card rises into its slot already opaque.
+       */
+      initial={{ 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}
+      /**
+       * Concentric radius: the action Chip is `rounded-lg` (8px) inset by the
+       * `p-2` (8px) padding, so a card with content is 8 + 8 = 16px — keeping
+       * the corner consistent whether or not a Chip is present. Single-line
+       * cards drop to a tighter radius (`cornerRadius`) so they don't read as
+       * pills.
+       */
+      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'>
+            {/*
+             * Title vs. subtext hierarchy: the message is the title — `font-medium`
+             * in the primary text color — while the description is lighter,
+             * smaller body copy. The variant icon flows inline at the start of
+             * the title so wrapped lines run full width with no hanging indent;
+             * `inline-block` + `align-middle` + the `-2px` nudge optically center
+             * the `size-[14px]` glyph on the first line's cap height.
+             */}
+            <RevealText
+              text={t.message}
+              expanded={hovered}
+              clampLines={2}
+              lineHeightPx={20}
+              leadingIcon={
+                <Icon className='mr-[5px] inline-block size-[14px] translate-y-[-2px] align-middle text-[var(--text-icon)]' />
+              }
+              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 +447,116 @@ 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
+  reduceMotion: boolean
+  /** Changes whenever a new toast arrives; restarts the countdown from zero. */
+  resetKey: string
+  onDismiss: () => void
+}
+
+/**
+ * A small control that floats just outside the bottom-left of the stack once
+ * multiple toasts pile up. A linear ring fills over `STACK_DISMISS_MS` (linear
+ * because it represents elapsed time) and clears the whole stack when full;
+ * hovering the stack or the control holds it, and clicking dismisses
+ * immediately. It enters with a spring "pop" (overshoot-and-settle) so the
+ * secondary control arrives with a little life without stealing focus.
+ */
+function StackDismiss({ paused, 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])
+
+  // Restart the countdown from zero whenever a new toast arrives (`resetKey`
+  // changes), so every fresh arrival gives the whole stack the full window
+  // again rather than inheriting the older, already-elapsed timer.
+  useEffect(() => {
+    progress.set(0)
+    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])
+
+  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)]'
+    >
+      {/*
+       * The ring rides the circle's edge (no separate inner border): the track
+       * is the card-like outline and the progress fills over it. `r=10` with a
+       * 1.5px stroke lands the outer edge ~flush with the 22px button.
+       */}
+      <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.
+ * layout. Toasts pile bottom-right as a collapsed stack — newest in front,
+ * older cards scaled and lifted behind it — and fan open upward on hover (or
+ * keyboard focus) so the whole stack is readable, mirroring the Sonner /
+ * Base-UI toast interaction. Hovering also pauses every auto-dismiss timer so
+ * a toast can't vanish while it's being read.
  *
  * @example
  * ```tsx
@@ -262,6 +565,7 @@ function ToastItem({ toast: t, depth, isPaused, onPause, onDismiss }: ToastItemP
  */
 export function ToastProvider({ children }: { children?: ReactNode }) {
   const pathname = usePathname()
+  const reduceMotion = useReducedMotion() ?? false
   /**
    * On workflow pages the toast portal must sit inside the workflow surface
    * — not over the right-side panel or the bottom terminal. Mirrors the
@@ -272,19 +576,15 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
   const isWorkflowPage = pathname?.includes('/w/') ?? 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)
   const timersRef = useRef(new Map<string, ReturnType<typeof setTimeout>>())
-  const isPausedRef = useRef(false)
 
   useEffect(() => {
     setMounted(true)
   }, [])
 
-  useEffect(() => {
-    isPausedRef.current = isPaused
-  }, [isPaused])
-
   const addToast = useCallback((input: ToastInput): string => {
     const id = generateId()
     const data: ToastData = {
@@ -293,9 +593,15 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
       description: input.description,
       variant: input.variant ?? 'default',
       action: input.action,
-      duration: input.duration ?? AUTO_DISMISS_MS,
+      /**
+       * Actionable toasts persist until dismissed (`duration: 0`) so the
+       * action — e.g. "Fix in Copilot" — can't disappear before the user
+       * reacts. An explicit `duration` always wins. Everything else auto-
+       * dismisses after the default window.
+       */
+      duration: input.duration ?? (input.action ? 0 : AUTO_DISMISS_MS),
     }
-    setToasts((prev) => [...prev, data].slice(-MAX_VISIBLE))
+    setToasts((prev) => [...prev, data].slice(-STACK_LIMIT))
     return id
   }, [])
 
@@ -306,57 +612,57 @@ 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()
+  const measureToast = useCallback((id: string, height: number) => {
+    setHeights((prev) => (prev[id] === height ? prev : { ...prev, [id]: height }))
   }, [])
 
   /**
-   * 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, used only for a lone toast. Hovering
+   * (`expanded`) holds them, and once the stack reaches the dismiss-all
+   * threshold the single ring countdown (`StackDismiss`) takes over for the
+   * whole stack, so per-toast timers stand down.
    */
   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
+    if (toasts.length === 0 || expanded || toasts.length >= STACK_DISMISS_THRESHOLD) {
+      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, dismissToast])
 
   useEffect(() => {
     const timers = timersRef.current
@@ -365,6 +671,17 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
     }
   }, [])
 
+  /**
+   * Toasts are scoped to the route that raised them. Navigating clears the
+   * stack so a notification never trails the user across the platform — it
+   * previously persisted and visibly jumped when the workflow-aware portal
+   * inset (`--panel-width` / `--terminal-height`) changed between pages.
+   * Runs once on mount against an empty stack, which is a no-op.
+   */
+  useEffect(() => {
+    dismissAllToasts()
+  }, [pathname, dismissAllToasts])
+
   /**
    * 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
@@ -388,33 +705,86 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
     [dismissToast, dismissAllToasts]
   )
 
+  /** Front-first order: `ordered[0]` is the newest card. */
+  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
         ? createPortal(
-            <Tooltip.Provider>
+            <motion.ol
+              aria-live='polite'
+              aria-label='Notifications'
+              className='fixed z-[var(--z-toast)] m-0 list-none p-0'
+              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}
+                    reduceMotion={reduceMotion}
+                    resetKey={toasts[toasts.length - 1]?.id ?? ''}
+                    onDismiss={dismissAllToasts}
+                  />
+                ) : null}
+              </AnimatePresence>
+              {/*
+               * Expand-on-hover is scoped to the cards only. The dismiss control
+               * sits outside this region, so hovering (or resting near) it pauses
+               * the countdown without fanning the stack open — the stack stays
+               * collapsed until the cards themselves are hovered.
+               */}
               <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',
+                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'
               >
-                {[...toasts].reverse().map((t, index, stacked) => (
-                  <ToastItem
-                    key={t.id}
-                    toast={t}
-                    depth={stacked.length - index - 1}
-                    isPaused={isPaused}
-                    onPause={pauseAll}
-                    onDismiss={dismissToast}
-                  />
-                ))}
+                <AnimatePresence>
+                  {layout.map(({ toast, geometry }) => (
+                    <ToastItem
+                      key={toast.id}
+                      toast={toast}
+                      geometry={geometry}
+                      reduceMotion={reduceMotion}
+                      onDismiss={dismissToast}
+                      onMeasure={measureToast}
+                    />
+                  ))}
+                </AnimatePresence>
               </div>
-            </Tooltip.Provider>,
+            </motion.ol>,
             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/index.ts b/apps/sim/components/emcn/icons/index.ts
index 375302bc28a..fb18b26d9b8 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -14,6 +14,8 @@ 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 { Clipboard } from './clipboard'
 export { ClipboardList } from './clipboard-list'
 export { Clock } from './clock'
@@ -44,6 +46,7 @@ export { HelpCircle } from './help-circle'
 export { HexSimple } from './hex-simple'
 export { Home } from './home'
 export { ImageUp } from './image-up'
+export { Info } from './info'
 export { Integration } from './integration'
 export { Key } from './key'
 export { KeySquare } from './key-square'
@@ -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/info.tsx b/apps/sim/components/emcn/icons/info.tsx
new file mode 100644
index 00000000000..0f370f12266
--- /dev/null
+++ b/apps/sim/components/emcn/icons/info.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Info icon component - circular info used for info intent.
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Info(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/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/stores/terminal/console/store.ts b/apps/sim/stores/terminal/console/store.ts
index e718bfea193..acc7394f7b6 100644
--- a/apps/sim/stores/terminal/console/store.ts
+++ b/apps/sim/stores/terminal/console/store.ts
@@ -244,6 +244,15 @@ interface NotifyBlockErrorParams {
   logContext: Record<string, unknown>
 }
 
+/**
+ * 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 identical (block + message)
+ * notifications inside a short window so the user sees one toast per error.
+ */
+const NOTIFY_DEDUP_WINDOW_MS = 1500
+const recentErrorNotifications = new Map<string, number>()
+
 const notifyBlockError = ({ error, blockName, logContext }: NotifyBlockErrorParams) => {
   const settings = getQueryClient().getQueryData<GeneralSettings>(generalSettingsKeys.settings())
   const isErrorNotificationsEnabled = settings?.errorNotificationsEnabled ?? true
@@ -253,10 +262,20 @@ const notifyBlockError = ({ error, blockName, logContext }: NotifyBlockErrorPara
   try {
     const errorMessage = 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 = `${displayName}: ${errorMessage}`
+    const lastShownAt = recentErrorNotifications.get(dedupKey)
+    if (lastShownAt !== undefined && now - lastShownAt < NOTIFY_DEDUP_WINDOW_MS) return
+    recentErrorNotifications.set(dedupKey, now)
+
+    // Block name is the title (what failed); the error is the subtext (why).
+    toast.error(displayName, {
+      description: errorMessage,
       action: {
         label: 'Fix in Copilot',
         onClick: () => sendMothershipMessage(copilotMessage),

From e5aae91841657be06393aafba37877ecea8a3ad4 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:07:19 -0500
Subject: [PATCH 03/34] feat(emcn/icons): add MessageCircle icon + icon audit
 worklist and gallery tooling

- New MessageCircle glyph in the emcn house style (24px viewBox, 1.55 stroke),
  filling a lucide-only gap from the audit; now used for the chat surfaces
- Icon design worklist + lucide->emcn migration map docs for the redesign pass
- render-icon-gallery script + generated gallery for side-by-side review

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/sim/components/emcn/icons/index.ts       |    5 +-
 .../components/emcn/icons/message-circle.tsx  |   25 +
 apps/sim/scripts/render-icon-gallery.tsx      |  282 +++++
 icon-design-worklist.md                       |  146 +++
 icon-gallery.html                             | 1004 +++++++++++++++++
 icon-migration-map.md                         |  368 ++++++
 6 files changed, 1829 insertions(+), 1 deletion(-)
 create mode 100644 apps/sim/components/emcn/icons/message-circle.tsx
 create mode 100644 apps/sim/scripts/render-icon-gallery.tsx
 create mode 100644 icon-design-worklist.md
 create mode 100644 icon-gallery.html
 create mode 100644 icon-migration-map.md

diff --git a/apps/sim/components/emcn/icons/index.ts b/apps/sim/components/emcn/icons/index.ts
index fb18b26d9b8..db03bcdf9fe 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -46,7 +46,9 @@ export { HelpCircle } from './help-circle'
 export { HexSimple } from './hex-simple'
 export { Home } from './home'
 export { ImageUp } from './image-up'
-export { Info } from './info'
+// `Info` (lucide-style icon) is intentionally not re-exported here: the emcn barrel
+// already exports an `Info` tooltip component, and re-exporting both collides. The
+// toast imports this icon directly from './info', so the barrel export is unneeded.
 export { Integration } from './integration'
 export { Key } from './key'
 export { KeySquare } from './key-square'
@@ -60,6 +62,7 @@ export { LogIn } from './log-in'
 export { LogOut } from './log-out'
 export { Mail } from './mail'
 export { ManageWorkspace } from './manage-workspace'
+export { MessageCircle } from './message-circle'
 export { Mic } from './mic'
 export { MoreHorizontal } from './more-horizontal'
 export { NoWrap } from './no-wrap'
diff --git a/apps/sim/components/emcn/icons/message-circle.tsx b/apps/sim/components/emcn/icons/message-circle.tsx
new file mode 100644
index 00000000000..8626f8c9e1a
--- /dev/null
+++ b/apps/sim/components/emcn/icons/message-circle.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+/**
+ * MessageCircle icon component - round chat bubble with tail
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function MessageCircle(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='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' />
+    </svg>
+  )
+}
diff --git a/apps/sim/scripts/render-icon-gallery.tsx b/apps/sim/scripts/render-icon-gallery.tsx
new file mode 100644
index 00000000000..845b8fc5c0f
--- /dev/null
+++ b/apps/sim/scripts/render-icon-gallery.tsx
@@ -0,0 +1,282 @@
+import { readFileSync, readdirSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import * as Lucide from 'lucide-react'
+
+const ICONS_DIR = join(import.meta.dir, '../components/emcn/icons')
+
+/** Extract { exportName: svgMarkup } from every emcn icon .tsx file. */
+function extractEmcn(): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const file of readdirSync(ICONS_DIR)) {
+    if (!file.endsWith('.tsx')) continue
+    const src = readFileSync(join(ICONS_DIR, file), 'utf8')
+    const re = /export\s+(?:function|const)\s+(\w+)[\s\S]*?(<svg[\s\S]*?<\/svg>)/g
+    let m: RegExpExecArray | null
+    while ((m = re.exec(src))) {
+      out[m[1]] = jsxSvgToHtml(m[2])
+    }
+  }
+  return out
+}
+
+/** Convert a JSX <svg> string into browser-renderable HTML. */
+function jsxSvgToHtml(jsx: string): string {
+  return jsx
+    .replace(/\{\.\.\.[^}]*\}/g, '') // {...props}
+    .replace(/[\w-]+=\{[^}]*\}/g, '') // attr={expr}
+    .replace(/\bclassName=/g, 'class=')
+    .replace(/\bstrokeWidth=/g, 'stroke-width=')
+    .replace(/\bstrokeLinecap=/g, 'stroke-linecap=')
+    .replace(/\bstrokeLinejoin=/g, 'stroke-linejoin=')
+    .replace(/\bstrokeMiterlimit=/g, 'stroke-miterlimit=')
+    .replace(/\bstrokeDasharray=/g, 'stroke-dasharray=')
+    .replace(/\bstrokeOpacity=/g, 'stroke-opacity=')
+    .replace(/\bfillRule=/g, 'fill-rule=')
+    .replace(/\bclipRule=/g, 'clip-rule=')
+    .replace(/\bfillOpacity=/g, 'fill-opacity=')
+    .replace(/\bclipPath=/g, 'clip-path=')
+    .replace(/\bwidth='[^']*'/, '') // strip fixed size → CSS sizes it
+    .replace(/\bheight='[^']*'/, '')
+    .replace(/aria-hidden='true'/g, '')
+}
+
+function lucideSvg(name: string): string | null {
+  const Comp = (Lucide as Record<string, unknown>)[name]
+  if (!Comp) return null
+  try {
+    return renderToStaticMarkup(
+      createElement(Comp as React.ComponentType, { width: 24, height: 24, strokeWidth: 1.75 })
+    )
+  } catch {
+    return null
+  }
+}
+
+const emcn = extractEmcn()
+
+type Item = { name: string; count: string; src: 'emcn' | 'lucide'; lucide?: string }
+type Section = { title: string; note?: string; items: Item[] }
+
+const e = (name: string, count: string): Item => ({ name, count, src: 'emcn' })
+const l = (name: string, count: string, lucide?: string): Item => ({
+  name,
+  count,
+  src: 'lucide',
+  lucide: lucide ?? name,
+})
+
+const sections: Section[] = [
+  {
+    title: 'TIER 1 · Core — Arrows & Chevrons',
+    note: 'Redesign first. Tier-2 chevrons/arrows are rotations of these.',
+    items: [
+      e('ChevronDown', '21 +24'),
+      e('ArrowLeft', '14 +5'),
+      e('ArrowUp', '11 +15'),
+      e('ArrowDown', '10 +6'),
+      e('ArrowRight', '6 +7'),
+      e('ArrowUpDown', '1 +1'),
+    ],
+  },
+  {
+    title: 'TIER 1 · Core — Actions & Controls',
+    items: [
+      e('Search', '44 +14'),
+      e('Plus', '27 +29'),
+      e('X', '16 +31'),
+      e('Check', '16 +23'),
+      e('Pencil', '16 +7'),
+      e('Trash', '25'),
+      e('Trash2', '2 +4'),
+      e('Settings', '11 +2'),
+      e('MoreHorizontal', '9 +9'),
+      e('Send', '13'),
+      e('Download', '18'),
+      e('Upload', '17'),
+      e('Duplicate', '11'),
+      e('RefreshCw', '3 +5'),
+    ],
+  },
+  {
+    title: 'TIER 1 · Core — Files, Folders & Data',
+    items: [
+      e('File', '23 +1'),
+      e('Files', '18'),
+      e('Folder', '15 +3'),
+      e('FolderPlus', '4'),
+      e('Table', '21 +1'),
+      e('Database', '19 +3'),
+      e('Library', '12 +1'),
+      e('Clipboard', '4 +12'),
+    ],
+  },
+  {
+    title: 'TIER 1 · Core — Status & Primitives',
+    items: [
+      e('Eye', '10 +7'),
+      e('EyeOff', '1 +7'),
+      e('Lock', '7 +3'),
+      e('Unlock', '3 +2'),
+      e('Key', '9 +1'),
+      e('Info', '5 +10'),
+      e('Square', '7 +2'),
+      e('Calendar', '10'),
+      e('Clock', '2 +4'),
+      e('Loader', '10'),
+      e('User', '10 +1'),
+      e('Users', '5 +2'),
+      e('Link', '10'),
+      e('Bell', '2 +2'),
+      e('Pin', '3 +2'),
+      e('PinOff', '2 +1'),
+      e('Paperclip', '1 +5'),
+      e('PlayOutline', '15'),
+      e('Pause', '4 +3'),
+    ],
+  },
+  {
+    title: 'TIER 1 · Core — Type Markers (design as a unified set)',
+    items: [
+      e('TypeText', '4'),
+      e('TypeNumber', '4'),
+      e('TypeBoolean', '4'),
+      e('TypeJson', '2'),
+    ],
+  },
+  {
+    title: 'TIER 0 · Name-aliases — no design, just alias existing emcn glyph',
+    note: 'Shown is the existing emcn glyph each lucide name maps to.',
+    items: [
+      e('X', 'XIcon'),
+      e('Send', 'SendIcon'),
+      e('Server', 'ServerIcon'),
+      e('Wrench', 'WrenchIcon'),
+      e('TagIcon', 'Tag'),
+      e('TriangleAlert', 'AlertTriangle'),
+      e('CircleAlert', 'AlertCircle'),
+      e('CircleCheck', 'CheckCircle2'),
+    ],
+  },
+  {
+    title: 'TIER 2 · lucide-only — derivable from a core glyph (rotate / compose / variant)',
+    items: [
+      l('ChevronRight', '18'),
+      l('ChevronUp', '9'),
+      l('ChevronLeft', '6'),
+      l('ChevronsUpDown', '4'),
+      l('MoreVertical', '2'),
+      l('ArrowLeftRight', '5'),
+      l('ArrowUpLeft', '1'),
+      l('RotateCcw', '4'),
+      l('XCircle', '3'),
+      l('PauseCircle', '1'),
+      l('Circle', '5'),
+      l('CircleOff', '2'),
+      l('Minus', '1'),
+      l('Settings2', '1'),
+      l('KeyRound', '1'),
+      l('LibraryBig', '1'),
+      l('FolderOpen', '1'),
+      l('FileText', '4'),
+      l('MicOff', '1'),
+      l('Filter', '1'),
+      l('Image', '2'),
+      l('ExternalLink', '8'),
+    ],
+  },
+  {
+    title: 'TIER 3 · lucide-only — net-new glyphs to design from scratch',
+    items: [
+      l('RepeatIcon', '10', 'Repeat'),
+      l('SplitIcon', '10', 'Split'),
+      l('Wand2', '4'),
+      l('GraduationCap', '3'),
+      l('Bot', '1'),
+      l('Building2', '1'),
+      l('Camera', '1'),
+      l('Compass', '1'),
+      l('FormInput', '1'),
+      l('GitBranch', '1'),
+      l('Github', '1'),
+      l('Globe', '1'),
+      l('Hash', '1'),
+      l('History', '1'),
+      l('MessageCircle', '1'),
+      l('Moon', '1'),
+      l('Music', '1'),
+      l('Phone', '1'),
+      l('Rss', '1'),
+      l('Scan', '1'),
+      l('Scissors', '1'),
+      l('SendToBack', '1'),
+      l('Share2', '1'),
+      l('Sparkles', '1'),
+      l('Sun', '1'),
+      l('Webhook', '1'),
+      l('Workflow', '1'),
+    ],
+  },
+]
+
+function cell(it: Item): string {
+  let svg: string | null
+  let label: string
+  if (it.src === 'emcn') {
+    svg = emcn[it.name] ?? null
+    label = it.name
+  } else {
+    svg = lucideSvg(it.lucide ?? it.name)
+    label = it.name
+  }
+  const art = svg
+    ? `<div class="art">${svg}</div>`
+    : `<div class="art missing">?</div>`
+  return `<div class="cell"><div class="box">${art}</div><div class="name">${label}</div><div class="count">${it.count}</div></div>`
+}
+
+const body = sections
+  .map(
+    (s) => `
+  <section>
+    <h2>${s.title} <span class="n">(${s.items.length})</span></h2>
+    ${s.note ? `<p class="note">${s.note}</p>` : ''}
+    <div class="grid">${s.items.map(cell).join('')}</div>
+  </section>`
+  )
+  .join('')
+
+const total = sections.reduce((a, s) => a + s.items.length, 0)
+
+const html = `<!doctype html>
+<html><head><meta charset="utf-8"><title>Sim icon update map</title>
+<style>
+  :root { --ink:#1a1a1a; --muted:#8a8a8a; --line:#ececec; --bg:#fff; }
+  * { box-sizing: border-box; }
+  body { margin:0; font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:#fafafa; padding:32px 40px 80px; }
+  header h1 { font-size:22px; margin:0 0 2px; }
+  header p { color:var(--muted); margin:0 0 28px; }
+  section { margin:0 0 36px; }
+  h2 { font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:8px; margin:0 0 4px; }
+  h2 .n { color:var(--muted); font-weight:400; }
+  .note { color:var(--muted); font-size:12px; margin:6px 0 14px; }
+  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:14px; }
+  .cell { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px 10px; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
+  .box { width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--ink); }
+  .art svg { width:24px; height:24px; display:block; }
+  .art.missing { color:#c00; font-size:20px; }
+  .name { font-size:11px; font-weight:500; text-align:center; word-break:break-word; }
+  .count { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
+</style></head>
+<body>
+  <header>
+    <h1>Sim — icons to update (${total})</h1>
+    <p>Counts = emcn usage + lucide sites to migrate. Artwork is the current live glyph.</p>
+  </header>
+  ${body}
+</body></html>`
+
+const outPath = join(import.meta.dir, '../../../icon-gallery.html')
+writeFileSync(outPath, html)
+console.log(`Wrote ${outPath} — ${total} icons`)
diff --git a/icon-design-worklist.md b/icon-design-worklist.md
new file mode 100644
index 00000000000..a236f6f1372
--- /dev/null
+++ b/icon-design-worklist.md
@@ -0,0 +1,146 @@
+# Icon Design Worklist
+
+Goal: redesign the core icon set in `@/components/emcn/icons` before the lucide→emcn migration, so the app lands on the final look in a single visual change.
+
+Three things feed the worklist:
+1. **Existing emcn icons** — already in the barrel; redesign in place (one file each, auto-propagates).
+2. **lucide-only icons** — 57 glyphs with no emcn equivalent yet; must be designed before they can be migrated.
+3. **Dead exports** — drop, don't design.
+
+---
+
+## TIER 0 — Don't design these
+
+### Dead emcn exports (19) — delete or repurpose, nothing renders them
+`DocumentAttachment, Fingerprint, Hand, HexSimple, KeySquare, LogIn, Mic, NoWrap, PillsRing, Redo, Slash, ThumbsDown, ThumbsUp, TrashOutline, UserPlus, Wordmark, ZoomIn, ZoomOut` (+ `Play`, superseded by `PlayOutline`)
+
+### lucide name-aliases of an existing emcn glyph (8) — no design, just add alias export + migrate
+| lucide name | maps to emcn | lucide uses |
+|---|---|---|
+| `XIcon` | `X` | 1 |
+| `SendIcon` | `Send` | 1 |
+| `ServerIcon` | `Server` | 1 |
+| `WrenchIcon` | `Wrench` | 1 |
+| `Tag` | `TagIcon` | 2 |
+| `AlertTriangle` | `TriangleAlert` | 5 |
+| `AlertCircle` | `CircleAlert` | 5 |
+| `CheckCircle2` | `CircleCheck` | 7 |
+
+---
+
+## TIER 1 — Core glyphs (redesign FIRST; they define the app's character)
+
+These already exist in emcn and appear everywhere. Lock the design language here before anything fans out. Grouped by visual family.
+
+### Arrows & chevrons (most-touched family)
+| icon | emcn uses | + lucide migration |
+|---|---|---|
+| `ChevronDown` | 21 | +24 |
+| `ArrowLeft` | 14 | +5 |
+| `ArrowUp` | 11 | +15 |
+| `ArrowDown` | 10 | +6 |
+| `ArrowRight` | 6 | +7 |
+| `ArrowUpDown` | 1 | +1 |
+
+### Actions / controls
+| icon | emcn uses | + lucide migration |
+|---|---|---|
+| `Search` | 44 | +14 |
+| `Plus` | 27 | +29 |
+| `X` | 16 | +31 |
+| `Check` | 16 | +23 |
+| `Pencil` | 16 | +7 |
+| `Trash` | 25 | — |
+| `Settings` | 11 | +2 |
+| `MoreHorizontal` | 9 | +9 |
+| `Send` | 13 | — |
+| `Download` | 18 / `Upload` 17 | — |
+| `Duplicate` | 11 | — |
+
+### Files / folders / data
+| icon | emcn uses | + lucide migration |
+|---|---|---|
+| `File` | 23 | +1 |
+| `Files` | 18 | — |
+| `Folder` | 15 | +3 |
+| `Table` | 21 | +1 |
+| `Database` | 19 | +3 |
+| `Library` | 12 | +1 |
+| `Clipboard` | 4 | +12 |
+
+### Status / object primitives
+| icon | emcn uses | + lucide migration |
+|---|---|---|
+| `Eye` 10 / `EyeOff` 1 | | +7 / +7 |
+| `Lock` 7 / `Unlock` 3 | | +3 / +2 |
+| `Key` | 9 | +1 |
+| `Info` | 5 | +10 |
+| `Square` | 7 | +2 |
+| `Calendar` 10 / `Clock` 2 | | +4 (Clock) |
+| `Loader` | 10 | — |
+| `User` 10 / `Users` 5 | | +1 / +2 |
+| `Link` | 10 | — |
+
+### Type markers (designed as a set — keep visually unified)
+`TypeText` 4 · `TypeNumber` 4 · `TypeBoolean` 4 · `TypeJson` 2
+
+### Media / misc high-use
+`PlayOutline` 15 · `Pause` 4 (+3) · `Bell` 2 (+2) · `Paperclip` 1 (+5) · `RefreshCw` 3 (+5) · `Pin` 3 (+2) / `PinOff` 2 (+1)
+
+---
+
+## TIER 2 — lucide-only, derivable from a TIER 1 glyph (low design — rotate/compose/variant)
+
+Design these as transforms of the core set, not from scratch.
+
+| lucide icon | uses | derive from |
+|---|---|---|
+| `ChevronRight` | 18 | rotate `ChevronDown` |
+| `ChevronUp` | 9 | rotate `ChevronDown` |
+| `ChevronLeft` | 6 | rotate `ChevronDown` |
+| `ChevronsUpDown` | 4 | double `ChevronDown` |
+| `MoreVertical` | 2 | rotate `MoreHorizontal` |
+| `ArrowLeftRight` | 5 | variant of `ArrowUpDown` |
+| `ArrowUpLeft` | 1 | diagonal arrow variant |
+| `RotateCcw` | 4 | variant of `RefreshCw` / `Undo` |
+| `XCircle` | 3 | `X` in circle (status family) |
+| `PauseCircle` | 1 | `Pause` in circle |
+| `CircleOff` | 2 | `Circle` variant |
+| `Circle` | 5 | primitive |
+| `Minus` | 1 | primitive |
+| `Settings2` | 1 | variant of `Settings` |
+| `KeyRound` | 1 | variant of `Key` |
+| `LibraryBig` | 1 | variant of `Library` |
+| `FolderOpen` | 1 | variant of `Folder` |
+| `FileText` | 4 | variant of `File` |
+| `MicOff` | 1 | variant of `Mic` |
+| `Filter` | 1 | reconcile with emcn `ListFilter` |
+| `Image` | 2 | reconcile with emcn `ImageUp` |
+| `ExternalLink` | 8 | reconcile with emcn `SquareArrowUpRight` |
+
+---
+
+## TIER 3 — Genuinely new glyphs to design from scratch
+
+No emcn equivalent, not derivable. These are the real net-new design load.
+
+### Higher use (design early)
+`RepeatIcon` (10) · `SplitIcon` (10) · `Wand2` (4) · `GraduationCap` (3)
+
+### Single-use new glyphs (23)
+`Bot` · `Building2` · `Camera` · `Compass` · `FormInput` · `GitBranch` · `Github` · `Globe` · `Hash` · `History` · `MessageCircle` · `Moon` · `Music` · `Phone` · `Rss` · `Scan` · `Scissors` · `SendToBack` · `Share2` · `Sparkles` · `Sun` · `Webhook` · `Workflow`
+
+> Note: `Github` is a brand logo — check whether it should live in `components/icons.tsx` (brand set) rather than the emcn UI set.
+
+---
+
+## Effort summary
+
+| Tier | What | Count | Design load |
+|---|---|---|---|
+| 0 | dead exports + name-aliases | 19 + 8 | none |
+| 1 | core emcn glyphs (redesign in place) | ~45 | the bulk of the *quality* work |
+| 2 | lucide-only, derived from core | 22 | low (transforms) |
+| 3 | lucide-only, net-new | 27 | the bulk of the *net-new* work |
+
+Recommended order: **Tier 1 first** (locks the language) → Tier 2 (cheap, falls out of Tier 1) → Tier 3 (independent, can run in parallel with a designer) → Tier 0 cleanup folded into the migration PRs.
diff --git a/icon-gallery.html b/icon-gallery.html
new file mode 100644
index 00000000000..eceaee32065
--- /dev/null
+++ b/icon-gallery.html
@@ -0,0 +1,1004 @@
+<!doctype html>
+<html><head><meta charset="utf-8"><title>Sim icon update map</title>
+<style>
+  :root { --ink:#1a1a1a; --muted:#8a8a8a; --line:#ececec; --bg:#fff; }
+  * { box-sizing: border-box; }
+  body { margin:0; font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:#fafafa; padding:32px 40px 80px; }
+  header h1 { font-size:22px; margin:0 0 2px; }
+  header p { color:var(--muted); margin:0 0 28px; }
+  section { margin:0 0 36px; }
+  h2 { font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:8px; margin:0 0 4px; }
+  h2 .n { color:var(--muted); font-weight:400; }
+  .note { color:var(--muted); font-size:12px; margin:6px 0 14px; }
+  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:14px; }
+  .cell { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px 10px; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
+  .box { width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--ink); }
+  .art svg { width:24px; height:24px; display:block; }
+  .art.missing { color:#c00; font-size:20px; }
+  .name { font-size:11px; font-weight:500; text-align:center; word-break:break-word; }
+  .count { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
+</style></head>
+<body>
+  <header>
+    <h1>Sim — icons to update (108)</h1>
+    <p>Counts = emcn usage + lucide sites to migrate. Artwork is the current live glyph.</p>
+  </header>
+  
+  <section>
+    <h2>TIER 1 · Core — Arrows & Chevrons <span class="n">(6)</span></h2>
+    <p class="note">Redesign first. Tier-2 chevrons/arrows are rotations of these.</p>
+    <div class="grid"><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 10 6'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path
+        d='M1 1L5 5L9 1'
+        stroke='currentColor'
+        stroke-width='1.2'
+        stroke-linecap='square'
+        stroke-linejoin='miter'
+        fill='none'
+      />
+    </svg></div></div><div class="name">ChevronDown</div><div class="count">21 +24</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M9.25 4L3 10.25L9.25 16.5' />
+      <path d='M3 10.25H17.5' />
+    </svg></div></div><div class="name">ArrowLeft</div><div class="count">14 +5</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M4 9.25L10.25 3L16.5 9.25' />
+      <path d='M10.25 3V17.5' />
+    </svg></div></div><div class="name">ArrowUp</div><div class="count">11 +15</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M4 11.25L10.25 17.5L16.5 11.25' />
+      <path d='M10.25 3V17.5' />
+    </svg></div></div><div class="name">ArrowDown</div><div class="count">10 +6</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M11.25 4L17.5 10.25L11.25 16.5' />
+      <path d='M17.5 10.25H3' />
+    </svg></div></div><div class="name">ArrowRight</div><div class="count">6 +7</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M1.5 8L5.5 4L9.5 8' />
+      <path d='M5.5 4V16.5' />
+      <path d='M11 12.5L15 16.5L19 12.5' />
+      <path d='M15 4V16.5' />
+    </svg></div></div><div class="name">ArrowUpDown</div><div class="count">1 +1</div></div></div>
+  </section>
+  <section>
+    <h2>TIER 1 · Core — Actions & Controls <span class="n">(14)</span></h2>
+    
+    <div class="grid"><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <circle cx='8.5' cy='8.5' r='7.5' />
+      <path d='M14 14L18 18' />
+    </svg></div></div><div class="name">Search</div><div class="count">44 +14</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M10.25 3V17.5' />
+      <path d='M3 10.25H17.5' />
+    </svg></div></div><div class="name">Plus</div><div class="count">27 +29</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M15.25 4.75L4.75 15.25' />
+      <path d='M4.75 4.75L15.25 15.25' />
+    </svg></div></div><div class="name">X</div><div class="count">16 +31</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M18.25 2.75L7.25 15.75L1.75 10.25' />
+    </svg></div></div><div class="name">Check</div><div class="count">16 +23</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M14.25 0.75L19.25 5.75L5.75 19.25H0.75V14.25L14.25 0.75Z' />
+      <path d='M10.75 4.25L15.75 9.25' />
+    </svg></div></div><div class="name">Pencil</div><div class="count">16 +7</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 14 14'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path
+        d='M7.02 0.73C7.32 0.73 7.57 0.73 7.77 0.75C7.99 0.77 8.19 0.81 8.38 0.91C8.46 0.95 8.53 1 8.6 1.05C8.78 1.18 8.91 1.34 9.02 1.53C9.12 1.7 9.23 1.93 9.36 2.2L9.64 2.77H12.25C12.49 2.77 12.69 2.97 12.69 3.21C12.69 3.45 12.49 3.65 12.25 3.65H11.79L11.45 9.08C11.4 9.82 11.37 10.41 11.29 10.873C11.22 11.35 11.1 11.74 10.86 12.085C10.64 12.4 10.36 12.67 10.03 12.87C9.67 13.08 9.27 13.18 8.79 13.23C8.32 13.27 7.74 13.27 7 13.27C6.26 13.27 5.67 13.27 5.2 13.23C4.72 13.18 4.32 13.085 3.96 12.87C3.63 12.67 3.35 12.4 3.13 12.082C2.89 11.74 2.77 11.34 2.69 10.87C2.62 10.4 2.59 9.82 2.54 9.08L2.21 3.65H1.75C1.51 3.65 1.31 3.45 1.31 3.21C1.31 2.97 1.51 2.77 1.75 2.77H4.42L4.65 2.25C4.78 1.98 4.88 1.74 4.99 1.56C5.1 1.37 5.22 1.2 5.4 1.06C5.47 1.01 5.55 0.96 5.625 0.92C5.82 0.81 6.03 0.77 6.25 0.75C6.46 0.73 6.72 0.73 7.02 0.73ZM3.41 9.02C3.46 9.78 3.49 10.32 3.56 10.73C3.62 11.14 3.71 11.39 3.85 11.583C4 11.8 4.19 11.98 4.42 12.12C4.62 12.24 4.87 12.316 5.28 12.36C5.7 12.4 6.24 12.4 7 12.4C7.75 12.4 8.29 12.4 8.71 12.36C9.12 12.32 9.37 12.241 9.57 12.12C9.8 11.98 9.99 11.8 10.14 11.585C10.28 11.39 10.37 11.14 10.43 10.74C10.5 10.32 10.53 9.78 10.58 9.03L10.91 3.65H3.09L3.41 9.02ZM5.54 5.69C5.78 5.69 5.98 5.88 5.98 6.125V9.625C5.98 9.87 5.78 10.06 5.54 10.06C5.3 10.06 5.1 9.87 5.1 9.625V6.125C5.1 5.88 5.3 5.69 5.54 5.69ZM8.46 5.69C8.7 5.69 8.9 5.88 8.9 6.125V9.625C8.9 9.87 8.7 10.06 8.46 10.06C8.22 10.06 8.02 9.87 8.02 9.625V6.125C8.02 5.88 8.22 5.69 8.46 5.69ZM7.02 1.6C6.7 1.6 6.49 1.6 6.33 1.62C6.17 1.63 6.09 1.66 6.04 1.69C6 1.71 5.97 1.73 5.93 1.75C5.88 1.8 5.83 1.86 5.75 1.99C5.67 2.13 5.58 2.33 5.45 2.62L5.38 2.77H8.67L8.57 2.58C8.44 2.3 8.35 2.11 8.27 1.98C8.19 1.85 8.13 1.79 8.08 1.75C8.05 1.73 8.02 1.7 7.98 1.69C7.92 1.66 7.85 1.63 7.7 1.62C7.54 1.6 7.33 1.6 7.02 1.6Z'
+        fill='currentColor'
+      />
+    </svg></div></div><div class="name">Trash</div><div class="count">25</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 14 15'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path
+        d='M6.67 0C7.01 0 7.31 0 7.57 0.02C7.942 0.06 8.3 0.17 8.6 0.4C8.82 0.57 8.98 0.77 9.11 0.99C9.24 1.2 9.36 1.46 9.5 1.75L9.79 2.33H12.667C13.035 2.33 13.33 2.63 13.334 3C13.334 3.37 13.04 3.67 12.667 3.67H12.085L11.72 9.6C11.67 10.44 11.63 11.1 11.55 11.63C11.46 12.176 11.32 12.63 11.05 13.02C10.8 13.39 10.48 13.69 10.11 13.92C9.7 14.172 9.24 14.28 8.7 14.33H4.62C4.08 14.28 3.62 14.17 3.21 13.92C2.84 13.69 2.52 13.38 2.27 13.02C1.99 12.63 1.86 12.172 1.77 11.63C1.69 11.1 1.65 10.43 1.6 9.6L1.25 3.67H0.67C0.3 3.67 0 3.37 0 3C0 2.63 0.3 2.33 0.67 2.33H3.61L3.84 1.81C3.98 1.51 4.1 1.25 4.22 1.03C4.36 0.8 4.51 0.59 4.74 0.41C5.05 0.18 5.41 0.06 5.79 0.02C6.08 0 6.38 0 6.67 0ZM5 6.14C4.72 6.14 4.5 6.37 4.5 6.64V10.641C4.5 10.92 4.72 11.14 5 11.141C5.28 11.141 5.5 10.917 5.5 10.641V6.64C5.5 6.365 5.28 6.14 5 6.14ZM8.33 6.14C8.06 6.14 7.83 6.365 7.83 6.64V10.641C7.83 10.917 8.06 11.141 8.33 11.141C8.61 11.14 8.83 10.92 8.83 10.641V6.64C8.83 6.37 8.61 6.14 8.33 6.14ZM6.69 1.33C6.32 1.33 6.09 1.33 5.91 1.35C5.66 1.37 5.51 1.47 5.38 1.69C5.3 1.84 5.21 2.03 5.07 2.33H8.31C8.16 2.02 8.06 1.82 7.97 1.68C7.84 1.47 7.69 1.37 7.45 1.35C7.27 1.33 7.05 1.33 6.69 1.33Z'
+        fill='currentColor'
+      />
+    </svg></div></div><div class="name">Trash2</div><div class="count">2 +4</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <circle cx='12' cy='12' r='3' />
+      <path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z' />
+    </svg></div></div><div class="name">Settings</div><div class="count">11 +2</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 12 3'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path
+        d='M10.64 2.72C10.46 2.72 10.29 2.68 10.122 2.61C9.96 2.54 9.81 2.44 9.68 2.32C9.56 2.19 9.46 2.04 9.39 1.88C9.32 1.71 9.28 1.54 9.28 1.36C9.28 1.18 9.32 1 9.39 0.84C9.45 0.67 9.55 0.52 9.68 0.4C9.81 0.27 9.96 0.17 10.12 0.1C10.286 0.04 10.46 5.74e-05 10.641 7.02e-08C11 0 11.35 0.14 11.6 0.4C11.86 0.65 12 1 12 1.36C12 1.72 11.86 2.06 11.6 2.32C11.35 2.57 11 2.72 10.64 2.72Z'
+        fill='currentColor'
+      />
+      <path
+        d='M6 2.72C6.75 2.72 7.36 2.11 7.36 1.36C7.36 0.61 6.75 0 6 0C5.25 0 4.64 0.61 4.64 1.36C4.64 2.11 5.25 2.72 6 2.72Z'
+        fill='currentColor'
+      />
+      <path
+        d='M1.36 2.72C2.11 2.72 2.72 2.11 2.72 1.36C2.72 0.61 2.11 0 1.36 0C0.61 0 0 0.61 0 1.36C0 2.11 0.61 2.72 1.36 2.72Z'
+        fill='currentColor'
+      />
+    </svg></div></div><div class="name">MoreHorizontal</div><div class="count">9 +9</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M19.5 1.5L9 12' />
+      <path d='M19.5 1.5L13.5 19.5L9 12L1.5 8.5L19.5 1.5Z' />
+    </svg></div></div><div class="name">Send</div><div class="count">13</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      
+    >
+      {/* tray — same as Upload */}
+      <path d='M0.75 12.75V16.75C0.75 17.8546 1.64543 18.75 2.75 18.75H17.75C18.8546 18.75 19.75 17.8546 19.75 16.75V12.75' />
+      {/* stem — top to tray */}
+      <path d='M10.25 1.75V12.75' />
+      {/* arrowhead pointing down */}
+      <path d='M5.25 7.75L10.25 12.75L15.25 7.75' />
+    </svg></div></div><div class="name">Download</div><div class="count">18</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M0.75 12.75V16.75C0.75 17.8546 1.64543 18.75 2.75 18.75H17.75C18.8546 18.75 19.75 17.8546 19.75 16.75V12.75' />
+      <path d='M10.25 14.75V1.75' />
+      <path d='M5.25 6.75L10.25 1.75L15.25 6.75' />
+    </svg></div></div><div class="name">Upload</div><div class="count">17</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M14.25 0.75H2.75C1.64543 0.75 0.75 1.64543 0.75 2.75V14.25' />
+      <rect x='5.25' y='5.25' width='14' height='14' rx='2' />
+    </svg></div></div><div class="name">Duplicate</div><div class="count">11</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+      
+    >
+      <path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8' />
+      <path d='M21 3v5h-5' />
+      <path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16' />
+      <path d='M8 16H3v5' />
+    </svg></div></div><div class="name">RefreshCw</div><div class="count">3 +5</div></div></div>
+  </section>
+  <section>
+    <h2>TIER 1 · Core — Files, Folders & Data <span class="n">(8)</span></h2>
+    
+    <div class="grid"><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M12.25 0.75H5.25C4.15 0.75 3.25 1.65 3.25 2.75V16.75C3.25 17.85 4.15 18.75 5.25 18.75H15.25C16.35 18.75 17.25 17.85 17.25 16.75V5.75L12.25 0.75Z' />
+      <path d='M12.25 0.75V5.75H17.25' />
+    </svg></div></div><div class="name">File</div><div class="count">23 +1</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M11.25 1.75H4.25C3.14543 1.75 2.25 2.64543 2.25 3.75V14.75' />
+      <path d='M14.25 4.75H7.25C6.14543 4.75 5.25 5.64543 5.25 6.75V17.75C5.25 18.8546 6.14543 19.75 7.25 19.75H17.25C18.3546 19.75 19.25 18.8546 19.25 17.75V9.75L14.25 4.75Z' />
+      <path d='M14.25 4.75V9.75H19.25' />
+    </svg></div></div><div class="name">Files</div><div class="count">18</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 14.5 13'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path
+        d='M4.32e-07 5.83V3.8C4.32e-07 3.2 0 2.72 0.03 2.33C0.07 1.94 0.14 1.6 0.32 1.28C0.54 0.88 0.88 0.54 1.28 0.32C1.6 0.14 1.94 0.07 2.33 0.03C2.72 0 3.2 5.96e-05 3.8 5.96e-05C4.53 5.93e-05 5.03 -0.01 5.48 0.16C6.47 0.53 6.87 1.45 7.19 2.1L7.48 2.67H10.33C11.025 2.67 11.58 2.67 12.03 2.71C12.48 2.76 12.874 2.86 13.222 3.09C13.495 3.27 13.73 3.51 13.91 3.78C14.14 4.13 14.24 4.52 14.29 4.97C14.33 5.42 14.33 5.98 14.33 6.67C14.33 7.83 14.33 8.73 14.26 9.46C14.19 10.19 14.03 10.78 13.69 11.3C13.41 11.71 13.05 12.07 12.63 12.35C12.11 12.7 11.52 12.85 10.79 12.93C10.07 13 9.16 13 8 13H7.17C5.61 13 4.39 13 3.44 12.87C2.48 12.74 1.72 12.47 1.12 11.877C0.53 11.28 0.26 10.52 0.13 9.56C0 8.61 4.32e-07 7.39 4.32e-07 5.83ZM1 5.83C1 7.42 1 8.56 1.12 9.42C1.23 10.28 1.45 10.79 1.83 11.17C2.21 11.55 2.72 11.77 3.58 11.88C4.44 12 5.58 12 7.17 12H8C9.18 12 10.029 12 10.69 11.93C11.34 11.87 11.75 11.74 12.07 11.52C12.38 11.32 12.65 11.05 12.86 10.74C13.07 10.42 13.2 10.01 13.27 9.35C13.33 8.7 13.33 7.85 13.33 6.67C13.33 5.95 13.33 5.46 13.29 5.07C13.26 4.7 13.19 4.49 13.08 4.33C12.97 4.17 12.83 4.03 12.67 3.92C12.51 3.81 12.3 3.74 11.93 3.71C11.54 3.67 11.046 3.67 10.33 3.67H5.17C4.89 3.67 4.67 3.44 4.67 3.17C4.67 2.89 4.89 2.67 5.17 2.67H6.36L6.3 2.55C5.92 1.8 5.68 1.3 5.12 1.1C4.89 1.01 4.61 1 3.8 1C3.18 1 2.75 1 2.42 1.03C2.1 1.06 1.91 1.11 1.77 1.19C1.53 1.33 1.33 1.53 1.19 1.77C1.11 1.91 1.06 2.1 1.03 2.42C1 2.75 1 3.18 1 3.8V5.83Z'
+        fill='currentColor'
+        stroke='currentColor'
+        stroke-width='0.3'
+      />
+    </svg></div></div><div class="name">Folder</div><div class="count">15 +3</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path
+        d='M10.3 20H4C3.47 20 2.96 19.79 2.59 19.41C2.21 19.04 2 18.53 2 18V5C2 4.47 2.21 3.96 2.59 3.59C2.96 3.21 3.47 3 4 3H7.98C8.31 3 8.64 3.08 8.94 3.23C9.23 3.39 9.49 3.62 9.67 3.9L10.33 5.1C10.51 5.38 10.76 5.6 11.05 5.76C11.343 5.92 11.67 6 12 6H20C20.53 6 21.04 6.21 21.41 6.59C21.79 6.96 22 7.47 22 8V11.3'
+        stroke='currentColor'
+        stroke-width='1.55'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M18 15V21'
+        stroke='currentColor'
+        stroke-width='1.55'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+      <path
+        d='M15 18H21'
+        stroke='currentColor'
+        stroke-width='1.55'
+        stroke-linecap='round'
+        stroke-linejoin='round'
+      />
+    </svg></div></div><div class="name">FolderPlus</div><div class="count">4</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M0.75 3.25C0.75 1.87 1.87 0.75 3.25 0.75H17.25C18.63 0.75 19.75 1.87 19.75 3.25V16.25C19.75 17.63 18.63 18.75 17.25 18.75H3.25C1.87 18.75 0.75 17.63 0.75 16.25V3.25Z' />
+      <path d='M0.75 6.75H19.75' />
+      <path d='M0.75 12.75H19.75' />
+      <path d='M10.25 0.75V18.75' />
+    </svg></div></div><div class="name">Table</div><div class="count">21 +1</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <ellipse cx='10.25' cy='3.75' rx='8.5' ry='3' />
+      <path d='M1.75 3.75V9.75C1.75 11.41 5.55 12.75 10.25 12.75C14.95 12.75 18.75 11.41 18.75 9.75V3.75' />
+      <path d='M1.75 9.75V15.75C1.75 17.41 5.55 18.75 10.25 18.75C14.95 18.75 18.75 17.41 18.75 15.75V9.75' />
+    </svg></div></div><div class="name">Database</div><div class="count">19 +3</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M0.75 4.75C0.75 3.35 0.75 2.65 1.02 2.12C1.26 1.64 1.64 1.26 2.12 1.02C2.65 0.75 3.35 0.75 4.75 0.75C6.15 0.75 6.85 0.75 7.38 1.02C7.86 1.26 8.24 1.64 8.48 2.12C8.75 2.65 8.75 3.35 8.75 4.75V14.75C8.75 16.15 8.75 16.85 8.48 17.385C8.24 17.86 7.86 18.24 7.38 18.48C6.85 18.75 6.15 18.75 4.75 18.75C3.35 18.75 2.65 18.75 2.12 18.48C1.64 18.24 1.26 17.86 1.02 17.385C0.75 16.85 0.75 16.15 0.75 14.75V4.75Z' />
+      <path d='M0.75 6.75H8.75' />
+      <path d='M10.2 6.02C9.84 4.69 9.67 4.02 9.79 3.45C9.9 2.94 10.16 2.48 10.55 2.13C10.98 1.74 11.64 1.56 12.97 1.2C14.29 0.84 14.96 0.67 15.53 0.79C16.04 0.9 16.49 1.16 16.84 1.55C17.23 1.99 17.41 2.65 17.77 3.98L20.3 13.48C20.66 14.81 20.83 15.48 20.71 16.054C20.604 16.56 20.34 17.02 19.95 17.37C19.52 17.76 18.86 17.94 17.53 18.3C16.21 18.66 15.54 18.83 14.97 18.71C14.46 18.6 14.01 18.34 13.66 17.95C13.27 17.51 13.09 16.85 12.73 15.52L10.2 6.02Z' />
+      <path d='M10.75 7.75L17.25 5.75' />
+    </svg></div></div><div class="name">Library</div><div class="count">12 +1</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.75'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M3.75 4.25C3.75 2.87 4.87 1.75 6.25 1.75H14.25C15.63 1.75 16.75 2.87 16.75 4.25V17.25C16.75 18.63 15.63 19.75 14.25 19.75H6.25C4.87 19.75 3.75 18.63 3.75 17.25V4.25Z' />
+      <path d='M7.75 0.75H12.75V3.25C12.75 3.8 12.3 4.25 11.75 4.25H8.75C8.2 4.25 7.75 3.8 7.75 3.25V0.75Z' />
+    </svg></div></div><div class="name">Clipboard</div><div class="count">4 +12</div></div></div>
+  </section>
+  <section>
+    <h2>TIER 1 · Core — Status & Primitives <span class="n">(19)</span></h2>
+    
+    <div class="grid"><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M0.75 9.75C3 4.25 6.75 1.75 10.25 1.75C13.75 1.75 17.5 4.25 19.75 9.75C17.5 15.25 13.75 17.75 10.25 17.75C6.75 17.75 3 15.25 0.75 9.75Z' />
+      <circle cx='10.25' cy='9.75' r='3.25' />
+    </svg></div></div><div class="name">Eye</div><div class="count">10 +7</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M9.88 9.88a3 3 0 1 0 4.24 4.24' />
+      <path d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68' />
+      <path d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61' />
+      <line x1='2' y1='2' x2='22' y2='22' />
+    </svg></div></div><div class="name">EyeOff</div><div class="count">1 +7</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <rect x='2.75' y='8.75' width='15' height='10' rx='2' />
+      <path d='M5.75 8.75V5.75C5.75 3.26 7.76 1.25 10.25 1.25C12.74 1.25 14.75 3.26 14.75 5.75V8.75' />
+    </svg></div></div><div class="name">Lock</div><div class="count">7 +3</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <rect x='2.75' y='8.75' width='15' height='10' rx='2' />
+      <path d='M5.75 8.75V5.75C5.75 3.26 7.76 1.25 10.25 1.25C12.74 1.25 14.75 3.26 14.75 5.75' />
+    </svg></div></div><div class="name">Unlock</div><div class="count">3 +2</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <circle cx='6.75' cy='10.25' r='3.5' />
+      <path d='M10.25 10.25H19' />
+      <path d='M14.5 10.25V13.5' />
+      <path d='M17.5 10.25V12.5' />
+    </svg></div></div><div class="name">Key</div><div class="count">9 +1</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+    >
+      <circle cx='12' cy='12' r='10' />
+      <path d='M12 16v-4' />
+      <path d='M12 8h.01' />
+    </svg></div></div><div class="name">Info</div><div class="count">5 +10</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.75'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <rect x='3' y='3' width='18' height='18' rx='2' />
+    </svg></div></div><div class="name">Square</div><div class="count">7 +2</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M0.75 5.25C0.75 3.87 1.87 2.75 3.25 2.75H17.25C18.63 2.75 19.75 3.87 19.75 5.25V16.25C19.75 17.63 18.63 18.75 17.25 18.75H3.25C1.87 18.75 0.75 17.63 0.75 16.25V5.25Z' />
+      <path d='M0.75 8.25H19.75' />
+      <path d='M6.25 0.25V5.25' />
+      <path d='M14.25 0.25V5.25' />
+    </svg></div></div><div class="name">Calendar</div><div class="count">10</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <circle cx='10.25' cy='9.75' r='9' />
+      <path d='M10.25 4.75V9.75L13.75 12.25' />
+    </svg></div></div><div class="name">Clock</div><div class="count">2 +4</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+      
+    >
+      <path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74' />
+      <path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74' />
+    </svg></div></div><div class="name">Loader</div><div class="count">10</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <circle cx='10.25' cy='6.25' r='4' />
+      <path d='M2.25 18.75C2.25 14.33 5.83 10.75 10.25 10.75C14.67 10.75 18.25 14.33 18.25 18.75' />
+    </svg></div></div><div class="name">User</div><div class="count">10 +1</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <circle cx='8.25' cy='5.75' r='3.5' />
+      <path d='M0.75 18.75C0.75 14.61 4.11 11.25 8.25 11.25C12.39 11.25 15.75 14.61 15.75 18.75' />
+      <path d='M14.25 0.93C15.11 0.63 16.04 0.73 16.83 1.19C17.62 1.65 18.17 2.42 18.33 3.32C18.49 4.21 18.25 5.13 17.68 5.83C17.11 6.54 16.27 6.95 15.37 6.97' />
+      <path d='M16.75 11.43C18.08 11.67 19.29 12.35 20.17 13.37C21.05 14.39 21.53 15.69 21.53 17.03V18.75' />
+    </svg></div></div><div class="name">Users</div><div class="count">5 +2</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+    >
+      <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' />
+      <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' />
+    </svg></div></div><div class="name">Link</div><div class="count">10</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+    >
+      <path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' />
+      <path d='M10.3 21a1.94 1.94 0 0 0 3.4 0' />
+    </svg></div></div><div class="name">Bell</div><div class="count">2 +2</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.75'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+    >
+      <path d='M12 17v5' />
+      <path d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z' />
+    </svg></div></div><div class="name">Pin</div><div class="count">3 +2</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.75'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+    >
+      <path d='M12 17v5' />
+      <path d='M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89' />
+      <path d='m2 2 20 20' />
+      <path d='M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11' />
+    </svg></div></div><div class="name">PinOff</div><div class="count">2 +1</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <g transform='rotate(-13.6501 10.25 10.25)'>
+        <path d='M18.25 9.75L10.4 17.6C8.46 19.54 5.31 19.54 3.37 17.6C1.43 15.66 1.43 12.51 3.37 10.57L11.22 2.72C12.51 1.43 14.61 1.43 15.9 2.72C17.19 4.01 17.19 6.11 15.9 7.4L8.05 15.25C7.4 15.9 6.35 15.9 5.7 15.25C5.05 14.6 5.05 13.55 5.7 12.9L12.9 5.7' />
+      </g>
+    </svg></div></div><div class="name">Paperclip</div><div class="count">1 +5</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M14.26 5.39C16.17 6.48 17.67 7.33 18.73 8.11C19.81 8.89 20.6 9.71 20.89 10.79C21.09 11.58 21.09 12.42 20.89 13.21C20.6 14.29 19.81 15.11 18.73 15.89C17.67 16.67 16.17 17.52 14.26 18.61C12.42 19.65 10.87 20.53 9.69 21.04C8.51 21.54 7.42 21.8 6.37 21.5C5.6 21.28 4.89 20.86 4.33 20.29C3.56 19.51 3.25 18.44 3.1 17.15C2.96 15.87 2.96 14.19 2.96 12.06V11.94C2.96 9.81 2.96 8.13 3.1 6.85C3.25 5.56 3.56 4.49 4.33 3.71C4.89 3.14 5.6 2.72 6.37 2.5C7.42 2.2 8.51 2.46 9.69 2.96C10.87 3.47 12.42 4.35 14.26 5.39Z' />
+    </svg></div></div><div class="name">PlayOutline</div><div class="count">15</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M6.25 2.75V16.75' />
+      <path d='M14.25 2.75V16.75' />
+    </svg></div></div><div class="name">Pause</div><div class="count">4 +3</div></div></div>
+  </section>
+  <section>
+    <h2>TIER 1 · Core — Type Markers (design as a unified set) <span class="n">(4)</span></h2>
+    
+    <div class="grid"><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1.75 -1.5 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M3.25 2.25H17.25' />
+      <path d='M10.25 2.25V18.75' />
+      <path d='M7.25 18.75H13.25' />
+    </svg></div></div><div class="name">TypeText</div><div class="count">4</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1.75 -1.5 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M3.25 7.25H17.75' />
+      <path d='M2.75 13.75H17.25' />
+      <path d='M8.25 1.25L6.25 19.75' />
+      <path d='M14.25 1.25L12.25 19.75' />
+    </svg></div></div><div class="name">TypeNumber</div><div class="count">4</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1.75 -1.5 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <rect x='2.5' y='2.75' width='15.5' height='15.5' rx='2.5' />
+      <path d='M6.25 10.75L9.25 13.75L14.25 7.25' />
+    </svg></div></div><div class="name">TypeBoolean</div><div class="count">4</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1.75 -1.75 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M5.75 1.25C3.54 1.25 1.75 3.04 1.75 5.25V7.75C1.75 9.13 0.63 10.25 -0.75 10.25C0.63 10.25 1.75 11.37 1.75 12.75V15.25C1.75 17.46 3.54 19.25 5.75 19.25' />
+      <path d='M14.75 1.25C16.96 1.25 18.75 3.04 18.75 5.25V7.75C18.75 9.13 19.87 10.25 21.25 10.25C19.87 10.25 18.75 11.37 18.75 12.75V15.25C18.75 17.46 16.96 19.25 14.75 19.25' />
+    </svg></div></div><div class="name">TypeJson</div><div class="count">2</div></div></div>
+  </section>
+  <section>
+    <h2>TIER 0 · Name-aliases — no design, just alias existing emcn glyph <span class="n">(8)</span></h2>
+    <p class="note">Shown is the existing emcn glyph each lucide name maps to.</p>
+    <div class="grid"><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M15.25 4.75L4.75 15.25' />
+      <path d='M4.75 4.75L15.25 15.25' />
+    </svg></div></div><div class="name">X</div><div class="count">XIcon</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M19.5 1.5L9 12' />
+      <path d='M19.5 1.5L13.5 19.5L9 12L1.5 8.5L19.5 1.5Z' />
+    </svg></div></div><div class="name">Send</div><div class="count">SendIcon</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <rect x='1.75' y='0.75' width='17' height='7.5' rx='1.5' />
+      <rect x='1.75' y='11.25' width='17' height='7.5' rx='1.5' />
+      <circle cx='5.75' cy='4.5' r='0.75' fill='currentColor' />
+      <circle cx='5.75' cy='15' r='0.75' fill='currentColor' />
+    </svg></div></div><div class="name">Server</div><div class="count">ServerIcon</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M15.09 1.41C13.78 0.74 12.25 0.63 10.85 1.11C9.45 1.59 8.3 2.62 7.68 3.96C7.06 5.3 7.02 6.84 7.57 8.2L1.25 14.52C0.86 14.91 0.86 15.54 1.25 15.93L3.57 18.25C3.96 18.64 4.59 18.64 4.98 18.25L11.3 11.93C12.66 12.48 14.2 12.44 15.54 11.82C16.88 11.2 17.91 10.05 18.39 8.65C18.87 7.25 18.76 5.72 18.09 4.41L14.87 7.63L12.25 7.25L11.87 4.63L15.09 1.41Z' />
+    </svg></div></div><div class="name">Wrench</div><div class="count">WrenchIcon</div></div><div class="cell"><div class="box"><div class="art"><svg
+      
+      
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+    >
+      <path d='M0.75 9.75V3.25C0.75 1.87 1.87 0.75 3.25 0.75H9.75L19.25 10.25L10.25 19.25L0.75 9.75Z' />
+      <circle cx='5.75' cy='5.75' r='1.25' />
+    </svg></div></div><div class="name">TagIcon</div><div class="count">Tag</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+    >
+      <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></div></div><div class="name">TriangleAlert</div><div class="count">AlertTriangle</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+    >
+      <circle cx='12' cy='12' r='10' />
+      <path d='M12 8v4' />
+      <path d='M12 16h.01' />
+    </svg></div></div><div class="name">CircleAlert</div><div class="count">AlertCircle</div></div><div class="cell"><div class="box"><div class="art"><svg
+      xmlns='http://www.w3.org/2000/svg'
+      
+      
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='1.55'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      
+      
+    >
+      <circle cx='12' cy='12' r='10' />
+      <path d='m9 12 2 2 4-4' />
+    </svg></div></div><div class="name">CircleCheck</div><div class="count">CheckCircle2</div></div></div>
+  </section>
+  <section>
+    <h2>TIER 2 · lucide-only — derivable from a core glyph (rotate / compose / variant) <span class="n">(22)</span></h2>
+    
+    <div class="grid"><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right"><path d="m9 18 6-6-6-6"></path></svg></div></div><div class="name">ChevronRight</div><div class="count">18</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-up"><path d="m18 15-6-6-6 6"></path></svg></div></div><div class="name">ChevronUp</div><div class="count">9</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left"><path d="m15 18-6-6 6-6"></path></svg></div></div><div class="name">ChevronLeft</div><div class="count">6</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></div></div><div class="name">ChevronsUpDown</div><div class="count">4</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg></div></div><div class="name">MoreVertical</div><div class="count">2</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-right"><path d="M8 3 4 7l4 4"></path><path d="M4 7h16"></path><path d="m16 21 4-4-4-4"></path><path d="M20 17H4"></path></svg></div></div><div class="name">ArrowLeftRight</div><div class="count">5</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-left"><path d="M7 17V7h10"></path><path d="M17 17 7 7"></path></svg></div></div><div class="name">ArrowUpLeft</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path></svg></div></div><div class="name">RotateCcw</div><div class="count">4</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-x"><circle cx="12" cy="12" r="10"></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6"></path></svg></div></div><div class="name">XCircle</div><div class="count">3</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-pause"><circle cx="12" cy="12" r="10"></circle><line x1="10" x2="10" y1="15" y2="9"></line><line x1="14" x2="14" y1="15" y2="9"></line></svg></div></div><div class="name">PauseCircle</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle"><circle cx="12" cy="12" r="10"></circle></svg></div></div><div class="name">Circle</div><div class="count">5</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-off"><path d="m2 2 20 20"></path><path d="M8.35 2.69A10 10 0 0 1 21.3 15.65"></path><path d="M19.08 19.08A10 10 0 1 1 4.92 4.92"></path></svg></div></div><div class="name">CircleOff</div><div class="count">2</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus"><path d="M5 12h14"></path></svg></div></div><div class="name">Minus</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings2"><path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg></div></div><div class="name">Settings2</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></svg></div></div><div class="name">KeyRound</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-library-big"><rect width="8" height="18" x="3" y="3" rx="1"></rect><path d="M7 3v18"></path><path d="M20.4 18.9c.2.5-.1 1.1-.6 1.3l-1.9.7c-.5.2-1.1-.1-1.3-.6L11.1 5.1c-.2-.5.1-1.1.6-1.3l1.9-.7c.5-.2 1.1.1 1.3.6Z"></path></svg></div></div><div class="name">LibraryBig</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-open"><path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"></path></svg></div></div><div class="name">FolderOpen</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-text"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg></div></div><div class="name">FileText</div><div class="count">4</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic-off"><line x1="2" x2="22" y1="2" y2="22"></line><path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"></path><path d="M5 10v2a7 7 0 0 0 12 5"></path><path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"></path><path d="M9 9v3a3 3 0 0 0 5.12 2.12"></path><line x1="12" x2="12" y1="19" y2="22"></line></svg></div></div><div class="name">MicOff</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-filter"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg></div></div><div class="name">Filter</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg></div></div><div class="name">Image</div><div class="count">2</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></div><div class="name">ExternalLink</div><div class="count">8</div></div></div>
+  </section>
+  <section>
+    <h2>TIER 3 · lucide-only — net-new glyphs to design from scratch <span class="n">(27)</span></h2>
+    
+    <div class="grid"><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-repeat"><path d="m17 2 4 4-4 4"></path><path d="M3 11v-1a4 4 0 0 1 4-4h14"></path><path d="m7 22-4-4 4-4"></path><path d="M21 13v1a4 4 0 0 1-4 4H3"></path></svg></div></div><div class="name">RepeatIcon</div><div class="count">10</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-split"><path d="M16 3h5v5"></path><path d="M8 3H3v5"></path><path d="M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"></path><path d="m15 9 6-6"></path></svg></div></div><div class="name">SplitIcon</div><div class="count">10</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wand-sparkles"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"></path><path d="m14 7 3 3"></path><path d="M5 6v4"></path><path d="M19 14v4"></path><path d="M10 2v2"></path><path d="M7 8H3"></path><path d="M21 16h-4"></path><path d="M11 3H9"></path></svg></div></div><div class="name">Wand2</div><div class="count">4</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-graduation-cap"><path d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z"></path><path d="M22 10v6"></path><path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path></svg></div></div><div class="name">GraduationCap</div><div class="count">3</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg></div></div><div class="name">Bot</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building2"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg></div></div><div class="name">Building2</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"></path><circle cx="12" cy="13" r="3"></circle></svg></div></div><div class="name">Camera</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-compass"><path d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"></path><circle cx="12" cy="12" r="10"></circle></svg></div></div><div class="name">Compass</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rectangle-ellipsis"><rect width="20" height="12" x="2" y="6" rx="2"></rect><path d="M12 12h.01"></path><path d="M17 12h.01"></path><path d="M7 12h.01"></path></svg></div></div><div class="name">FormInput</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-git-branch"><line x1="6" x2="6" y1="3" y2="15"></line><circle cx="18" cy="6" r="3"></circle><circle cx="6" cy="18" r="3"></circle><path d="M18 9a9 9 0 0 1-9 9"></path></svg></div></div><div class="name">GitBranch</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></div></div><div class="name">Github</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg></div></div><div class="name">Globe</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hash"><line x1="4" x2="20" y1="9" y2="9"></line><line x1="4" x2="20" y1="15" y2="15"></line><line x1="10" x2="8" y1="3" y2="21"></line><line x1="16" x2="14" y1="3" y2="21"></line></svg></div></div><div class="name">Hash</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-history"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M12 7v5l4 2"></path></svg></div></div><div class="name">History</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"></path></svg></div></div><div class="name">MessageCircle</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg></div></div><div class="name">Moon</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-music"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg></div></div><div class="name">Music</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg></div></div><div class="name">Phone</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></div></div><div class="name">Rss</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scan"><path d="M3 7V5a2 2 0 0 1 2-2h2"></path><path d="M17 3h2a2 2 0 0 1 2 2v2"></path><path d="M21 17v2a2 2 0 0 1-2 2h-2"></path><path d="M7 21H5a2 2 0 0 1-2-2v-2"></path></svg></div></div><div class="name">Scan</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scissors"><circle cx="6" cy="6" r="3"></circle><path d="M8.12 8.12 12 12"></path><path d="M20 4 8.12 15.88"></path><circle cx="6" cy="18" r="3"></circle><path d="M14.8 14.8 20 20"></path></svg></div></div><div class="name">Scissors</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-to-back"><rect x="14" y="14" width="8" height="8" rx="2"></rect><rect x="2" y="2" width="8" height="8" rx="2"></rect><path d="M7 14v1a2 2 0 0 0 2 2h1"></path><path d="M14 7h1a2 2 0 0 1 2 2v1"></path></svg></div></div><div class="name">SendToBack</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-share2"><circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line></svg></div></div><div class="name">Share2</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg></div></div><div class="name">Sparkles</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></div></div><div class="name">Sun</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-webhook"><path d="M18 16.98h-5.99c-1.1 0-1.95.94-2.48 1.9A4 4 0 0 1 2 17c.01-.7.2-1.4.57-2"></path><path d="m6 17 3.13-5.78c.53-.97.1-2.18-.5-3.1a4 4 0 1 1 6.89-4.06"></path><path d="m12 6 3.13 5.73C15.66 12.7 16.9 13 18 13a4 4 0 0 1 0 8"></path></svg></div></div><div class="name">Webhook</div><div class="count">1</div></div><div class="cell"><div class="box"><div class="art"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-workflow"><rect width="8" height="8" x="3" y="3" rx="2"></rect><path d="M7 11v4a2 2 0 0 0 2 2h4"></path><rect width="8" height="8" x="13" y="13" rx="2"></rect></svg></div></div><div class="name">Workflow</div><div class="count">1</div></div></div>
+  </section>
+</body></html>
\ No newline at end of file
diff --git a/icon-migration-map.md b/icon-migration-map.md
new file mode 100644
index 00000000000..2090742cfc2
--- /dev/null
+++ b/icon-migration-map.md
@@ -0,0 +1,368 @@
+# Lucide → emcn duplicate-icon migration map
+
+_46 icons, 272 import sites. All names map 1:1 to `@/components/emcn/icons` (same export name)._
+
+
+## ArrowDown  (6)
+- `app/chat/components/message-container/message-container.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+- `app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx`
+
+## ArrowLeft  (5)
+- `app/playground/page.tsx`
+- `app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx`
+- `app/workspace/[workspaceId]/w/components/preview/preview.tsx`
+
+## ArrowRight  (7)
+- `app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx`
+- `app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx`
+- `app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx`
+- `app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx`
+- `app/workspace/[workspaceId]/skills/skills.tsx`
+- `ee/access-control/components/access-control.tsx`
+- `content/blog/enterprise/components.tsx`
+
+## ArrowUp  (15)
+- `app/chat/components/input/input.tsx`
+- `app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx`
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+- `app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx`
+- `app/(landing)/components/footer/footer-cta.tsx`
+- `app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx`
+- `app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx`
+
+## ArrowUpDown  (1)
+- `app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx`
+
+## Bell  (2)
+- `app/playground/page.tsx`
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx`
+
+## BookOpen  (3)
+- `app/changelog/components/changelog-content.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx`
+- `app/academy/(catalog)/page.tsx`
+
+## Check  (23)
+- `app/chat/components/message/message.tsx`
+- `app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx`
+- `app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx`
+- `app/workspace/[workspaceId]/settings/components/general/general.tsx`
+- `app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+- `app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx`
+- `ee/sso/components/sso-settings.tsx`
+- `components/ui/select.tsx`
+- `components/emcn/components/info-card/info-card.tsx`
+- `components/emcn/components/checkbox/checkbox.tsx`
+- `components/emcn/components/dropdown-menu/dropdown-menu.tsx`
+- `components/emcn/components/combobox/combobox.tsx`
+- `components/emcn/components/popover/popover.tsx`
+
+## ChevronDown  (24)
+- `app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx`
+- `app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx`
+- `app/workspace/[workspaceId]/settings/components/team-management/components/organization-roster/organization-roster.tsx`
+- `app/workspace/[workspaceId]/settings/components/team-management/components/member-invitation-card/member-invitation-card.tsx`
+- `app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx`
+- `app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx`
+- `ee/audit-logs/components/audit-logs.tsx`
+- `ee/data-drains/components/data-drains-settings.tsx`
+- `ee/sso/components/sso-settings.tsx`
+- `ee/access-control/components/access-control.tsx`
+- `components/ui/select.tsx`
+- `components/emcn/components/chip-select/chip-select.tsx`
+- `components/emcn/components/time-picker/time-picker.tsx`
+- `components/emcn/components/combobox/combobox.tsx`
+- `components/emcn/components/date-picker/date-picker.tsx`
+
+## Clipboard  (12)
+- `app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx`
+- `app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+- `app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx`
+- `ee/sso/components/sso-settings.tsx`
+
+## Clock  (4)
+- `blocks/blocks/schedule.ts`
+- `app/workspace/[workspaceId]/settings/components/subscription/plan-configs.ts`
+- `app/academy/(catalog)/[courseSlug]/page.tsx`
+- `app/academy/(catalog)/page.tsx`
+
+## Database  (3)
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+- `app/(landing)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx`
+
+## Eye  (7)
+- `app/chat/components/auth/password/password-auth.tsx`
+- `app/workspace/[workspaceId]/settings/components/byok/byok.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx`
+- `app/(auth)/signup/signup-form.tsx`
+- `app/(auth)/reset-password/reset-password-form.tsx`
+- `app/(auth)/login/login-form.tsx`
+- `ee/sso/components/sso-settings.tsx`
+
+## EyeOff  (7)
+- `app/chat/components/auth/password/password-auth.tsx`
+- `app/workspace/[workspaceId]/settings/components/byok/byok.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx`
+- `app/(auth)/signup/signup-form.tsx`
+- `app/(auth)/reset-password/reset-password-form.tsx`
+- `app/(auth)/login/login-form.tsx`
+- `ee/sso/components/sso-settings.tsx`
+
+## File  (1)
+- `app/chat/components/message/message.tsx`
+
+## Folder  (3)
+- `app/playground/page.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx`
+
+## Info  (10)
+- `app/workspace/[workspaceId]/settings/components/general/general.tsx`
+- `app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx`
+- `app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx`
+- `app/workspace/[workspaceId]/upgrade/components/manage-plan-modal/manage-plan-modal.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/checkbox-list/checkbox-list.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx`
+- `ee/components/setting-row.tsx`
+- `components/emcn/components/callout/callout.tsx`
+
+## Key  (1)
+- `app/playground/page.tsx`
+
+## Library  (1)
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx`
+
+## Lock  (3)
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx`
+
+## LogOut  (1)
+- `app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx`
+
+## Mail  (1)
+- `app/credential-account/[token]/page.tsx`
+
+## Mic  (3)
+- `app/chat/components/input/voice-input.tsx`
+- `app/chat/components/input/input.tsx`
+- `app/chat/components/voice-interface/voice-interface.tsx`
+
+## MoreHorizontal  (9)
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx`
+- `app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx`
+
+## Palette  (2)
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+
+## Paperclip  (5)
+- `app/chat/components/input/input.tsx`
+- `app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx`
+- `app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx`
+- `components/emcn/components/tag-input/tag-input.tsx`
+
+## Pause  (3)
+- `app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+
+## Pencil  (7)
+- `app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx`
+- `app/workspace/[workspaceId]/settings/components/general/general.tsx`
+- `app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/base.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx`
+
+## Pin  (2)
+- `app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx`
+
+## PinOff  (1)
+- `app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx`
+
+## Play  (2)
+- `blocks/blocks/manual_trigger.ts`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx`
+
+## Plus  (29)
+- `app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx`
+- `app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx`
+- `app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx`
+- `app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx`
+- `app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx`
+- `app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx`
+- `app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx`
+- `app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx`
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/base.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx`
+- `app/workspace/[workspaceId]/skills/skills.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx`
+- `ee/data-drains/components/data-drains-settings.tsx`
+- `ee/access-control/components/access-control.tsx`
+- `components/emcn/components/tag-input/tag-input.tsx`
+
+## RefreshCw  (5)
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx`
+- `app/resume/[workflowId]/[executionId]/resume-page-client.tsx`
+
+## Search  (14)
+- `app/workspace/[workspaceId]/settings/components/teammates/teammates.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx`
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx`
+- `app/workspace/[workspaceId]/skills/skills.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx`
+- `app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx`
+- `components/emcn/components/dropdown-menu/dropdown-menu.tsx`
+- `components/emcn/components/combobox/combobox.tsx`
+- `components/emcn/components/popover/popover.tsx`
+
+## Server  (2)
+- `app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx`
+- `app/workspace/[workspaceId]/settings/components/subscription/plan-configs.ts`
+
+## Settings  (2)
+- `app/playground/page.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx`
+
+## Square  (2)
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx`
+
+## Table  (1)
+- `app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx`
+
+## Trash2  (4)
+- `app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx`
+- `app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+
+## TriangleAlert  (1)
+- `app/workspace/[workspaceId]/components/error/error.tsx`
+
+## Unlock  (2)
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx`
+
+## User  (1)
+- `app/playground/page.tsx`
+
+## Users  (2)
+- `app/workspace/[workspaceId]/settings/components/subscription/plan-configs.ts`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx`
+
+## X  (31)
+- `app/chat/components/input/input.tsx`
+- `app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx`
+- `app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx`
+- `app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx`
+- `app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx`
+- `app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx`
+- `app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx`
+- `app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx`
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx`
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx`
+- `app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx`
+- `app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/base.tsx`
+- `app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx`
+- `app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx`
+- `app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx`
+- `app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx`
+- `app/(landing)/components/auth-modal/auth-modal.tsx`
+- `ee/whitelabeling/components/whitelabeling-settings.tsx`
+- `components/emcn/components/s-modal/s-modal.tsx`
+- `components/emcn/components/tag-input/tag-input.tsx`
+- `components/emcn/components/modal/modal.tsx`
+- `components/emcn/components/chip-modal/chip-modal.tsx`
+
+## ZoomIn  (1)
+- `app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar.tsx`
+
+## ZoomOut  (1)
+- `app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar.tsx`

From a2479008e4f21b6557bf0757bb120201fc176ecc Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:07:40 -0500
Subject: [PATCH 04/34] feat(mothership): activity view, chat resource
 persistence, embedded page wiring

- Activity view components (agent identity, parallel agents, shimmer status)
  with model + tests, plus a standalone /activity-preview render harness
- Chat resource persistence/types extended through the copilot contract,
  post handler, and resource tool handlers
- Embedded pages (Tables, Knowledge, Integrations) accept open-callbacks so
  the chat resource panel can navigate within tabs instead of routing away
- Chat history list extracted into a shared searchable, recency-bucketed
  component used by the All Chats tray and the title-bar switcher

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/sim/app/activity-preview/page.tsx        | 195 +++++++
 .../app/api/copilot/chat/resources/route.ts   |  12 +-
 .../chat-history/chat-history-list.tsx        | 197 +++++++
 .../components/chat-history/chat-history.tsx  | 184 +------
 .../activity-view/activity-model.test.ts      | 231 ++++++++
 .../activity-view/activity-model.ts           | 497 ++++++++++++++++++
 .../activity-view/activity-view.tsx           | 288 ++++++++++
 .../activity-view/agent-identity.ts           |  87 +++
 .../components/activity-view/index.ts         |  22 +
 .../activity-view/inline-activity.tsx         | 163 ++++++
 .../activity-view/parallel-agents.tsx         |  38 ++
 .../activity-view/shimmer-status.module.css   |  41 ++
 .../activity-view/shimmer-status.tsx          |  34 ++
 .../add-resource-dropdown.tsx                 |  12 +
 .../resource-content/resource-content.tsx     | 351 ++++++++++++-
 .../resource-registry/resource-registry.tsx   |  33 ++
 .../user-input/components/constants.ts        |   5 +
 .../[block]/integration-block-detail.tsx      |  16 +-
 .../[workspaceId]/knowledge/knowledge.tsx     |  21 +-
 .../workspace/[workspaceId]/tables/tables.tsx |  43 +-
 apps/sim/lib/api/contracts/copilot.ts         |   3 +
 apps/sim/lib/copilot/chat/post.ts             |   4 +
 apps/sim/lib/copilot/resources/persistence.ts |  10 +-
 apps/sim/lib/copilot/resources/types.ts       |  17 +
 .../lib/copilot/tools/handlers/resources.ts   |  15 +-
 25 files changed, 2323 insertions(+), 196 deletions(-)
 create mode 100644 apps/sim/app/activity-preview/page.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-model.test.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-model.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-view.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/agent-identity.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/inline-activity.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/parallel-agents.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/shimmer-status.module.css
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/shimmer-status.tsx

diff --git a/apps/sim/app/activity-preview/page.tsx b/apps/sim/app/activity-preview/page.tsx
new file mode 100644
index 00000000000..78aadcd9427
--- /dev/null
+++ b/apps/sim/app/activity-preview/page.tsx
@@ -0,0 +1,195 @@
+'use client'
+
+/**
+ * TEMPORARY preview harness (delete before merge). Designs the in-chat working
+ * indicator: ONE shimmering status line by default, escalating to a per-agent
+ * breakout ONLY while ≥2 agents run concurrently, then collapsing back to a
+ * single line and the reply.
+ */
+import { useEffect, useState } from 'react'
+import {
+  ParallelAgents,
+  ShimmerStatus,
+} from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view'
+
+type Frame =
+  | { kind: 'line'; text: string }
+  | { kind: 'parallel'; header: string; agents: { label: string; phrase: string }[] }
+
+interface Scene {
+  key: string
+  label: string
+  prompt: string
+  frames: Frame[]
+  reply: string
+}
+
+const line = (text: string): Frame => ({ kind: 'line', text })
+
+const SCENES: Scene[] = [
+  {
+    key: 'crm',
+    label: 'Build CRM',
+    prompt: 'build a simple crm page',
+    frames: [
+      line('Reviewing UX requirements and data model'),
+      line('Exploring CRM page structure and data flow'),
+      line('Drafting a clean CRM page layout'),
+      line('Wiring up the contacts table'),
+    ],
+    reply: 'Done — your CRM page is ready. Open it on the right.',
+  },
+  {
+    key: 'parallel',
+    label: 'Parallel agents',
+    prompt: 'Polish my profile — refresh my skills and bio',
+    frames: [
+      line('Reviewing your profile'),
+      {
+        kind: 'parallel',
+        header: 'Profile scan · 2 agents',
+        agents: [
+          { label: 'Skills', phrase: 'Scanning your experience' },
+          { label: 'Biography', phrase: 'Reading your current bio' },
+        ],
+      },
+      {
+        kind: 'parallel',
+        header: 'Profile scan · 2 agents',
+        agents: [
+          { label: 'Skills', phrase: 'Determining relevant changes' },
+          { label: 'Biography', phrase: 'Crafting a proposal' },
+        ],
+      },
+      {
+        kind: 'parallel',
+        header: 'Profile scan · 2 agents',
+        agents: [
+          { label: 'Skills', phrase: 'Finalizing skill updates' },
+          { label: 'Biography', phrase: 'Polishing the wording' },
+        ],
+      },
+      line('Wrapping up'),
+    ],
+    reply: 'Updated your skills and bio — review the changes on the right.',
+  },
+  {
+    key: 'edit',
+    label: 'Edit dialog',
+    prompt: 'Add an edit dialog to update contact details without deleting them',
+    frames: [
+      line('Reviewing edit dialog integration plans'),
+      line('Adding the edit form'),
+      line('Saving changes in place'),
+    ],
+    reply: 'Added an edit dialog — contacts now update in place.',
+  },
+]
+
+const FRAME_MS = 1900
+
+export default function ActivityPreviewPage() {
+  const [sceneKey, setSceneKey] = useState(SCENES[0].key)
+  const [idx, setIdx] = useState(0)
+  const [playing, setPlaying] = useState(true)
+
+  const scene = SCENES.find((s) => s.key === sceneKey) ?? SCENES[0]
+  const total = scene.frames.length
+  const done = idx >= total
+  const frame = done ? null : scene.frames[idx]
+
+  useEffect(() => {
+    setIdx(0)
+    setPlaying(true)
+  }, [sceneKey])
+
+  useEffect(() => {
+    if (!playing) return
+    if (idx >= total) {
+      setPlaying(false)
+      return
+    }
+    const t = setTimeout(() => setIdx((i) => Math.min(i + 1, total)), FRAME_MS)
+    return () => clearTimeout(t)
+  }, [playing, idx, total])
+
+  return (
+    <div className='flex h-screen flex-col bg-[var(--bg)] p-[24px]'>
+      <div className='mb-[16px] flex flex-wrap items-center gap-[8px]'>
+        {SCENES.map((s) => (
+          <button
+            key={s.key}
+            type='button'
+            onClick={() => setSceneKey(s.key)}
+            className={`rounded-[6px] px-[10px] py-[5px] text-[13px] ${
+              s.key === sceneKey
+                ? 'bg-[var(--surface-6)] text-[var(--text-primary)]'
+                : 'bg-[var(--surface-4)] text-[var(--text-secondary)]'
+            }`}
+          >
+            {s.label}
+          </button>
+        ))}
+        <div className='ml-auto flex items-center gap-[6px]'>
+          <button
+            type='button'
+            onClick={() => {
+              setPlaying(false)
+              setIdx((i) => Math.max(0, i - 1))
+            }}
+            className='rounded-[6px] bg-[var(--surface-4)] px-[10px] py-[5px] text-[13px] text-[var(--text-secondary)]'
+          >
+            ‹ Prev
+          </button>
+          <button
+            type='button'
+            onClick={() => {
+              if (done) {
+                setIdx(0)
+                setPlaying(true)
+              } else {
+                setPlaying((p) => !p)
+              }
+            }}
+            className='rounded-[6px] bg-[var(--surface-6)] px-[12px] py-[5px] text-[13px] text-[var(--text-primary)]'
+          >
+            {done ? '↻ Replay' : playing ? 'Pause' : 'Play'}
+          </button>
+          <button
+            type='button'
+            onClick={() => {
+              setPlaying(false)
+              setIdx((i) => Math.min(total, i + 1))
+            }}
+            className='rounded-[6px] bg-[var(--surface-4)] px-[10px] py-[5px] text-[13px] text-[var(--text-secondary)]'
+          >
+            Next ›
+          </button>
+          <span className='ml-[4px] w-[44px] text-right text-[12px] text-[var(--text-muted)]'>
+            {Math.min(idx, total)}/{total}
+          </span>
+        </div>
+      </div>
+
+      <div className='flex min-h-0 flex-1 justify-center overflow-y-auto'>
+        <div className='flex w-full max-w-[640px] flex-col gap-[20px] py-[24px]'>
+          <div className='flex justify-end'>
+            <div className='max-w-[80%] rounded-[14px] bg-[var(--surface-5)] px-[14px] py-[10px] text-[14px] text-[var(--text-primary)]'>
+              {scene.prompt}
+            </div>
+          </div>
+
+          {done ? (
+            <p className='animate-stream-fade-in text-[15px] text-[var(--text-primary)] leading-[24px]'>
+              {scene.reply}
+            </p>
+          ) : frame?.kind === 'parallel' ? (
+            <ParallelAgents header={frame.header} agents={frame.agents} active={playing} />
+          ) : (
+            <ShimmerStatus text={frame?.text ?? ''} active={playing} />
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/api/copilot/chat/resources/route.ts b/apps/sim/app/api/copilot/chat/resources/route.ts
index 5417fbe4a49..f71cd7ee33d 100644
--- a/apps/sim/app/api/copilot/chat/resources/route.ts
+++ b/apps/sim/app/api/copilot/chat/resources/route.ts
@@ -27,10 +27,20 @@ const VALID_RESOURCE_TYPES = new Set<ResourceType>([
   'workflow',
   'knowledgebase',
   'folder',
+  'filefolder',
   'log',
   'integration',
+  'page',
+])
+const GENERIC_TITLES = new Set([
+  'Table',
+  'File',
+  'Workflow',
+  'Knowledge Base',
+  'Folder',
+  'File Folder',
+  'Log',
 ])
-const GENERIC_TITLES = new Set(['Table', 'File', 'Workflow', 'Knowledge Base', 'Folder', 'Log'])
 
 export const POST = withRouteHandler(async (req: NextRequest) => {
   try {
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
new file mode 100644
index 00000000000..c3e41acb419
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { differenceInCalendarDays, isToday, isYesterday } from 'date-fns'
+import { useParams } from 'next/navigation'
+import { Skeleton } from '@/components/emcn'
+import { Search } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+import {
+  type MothershipChatMetadata,
+  useMothershipChats,
+  usePrefetchChatHistory,
+} from '@/hooks/queries/mothership-chats'
+
+const CONFIG = {
+  LIST_MAX_HEIGHT: 320,
+  SKELETON_ROWS: 5,
+} as const
+
+/** A recency bucket of chats rendered as one section in the history list. */
+interface ChatBucket {
+  key: string
+  label: string
+  tasks: MothershipChatMetadata[]
+}
+
+/**
+ * Buckets chats into Codex-style recency sections. Pinned chats are lifted out
+ * of their date bucket into a dedicated section at the top; everything else is
+ * grouped by how recently it was last updated. The server already returns the
+ * list ordered (pinned first, then desc by `updatedAt`), so per-bucket order is
+ * preserved by simply appending as we iterate.
+ */
+function bucketChats(tasks: readonly MothershipChatMetadata[]): ChatBucket[] {
+  const now = new Date()
+  const pinned: MothershipChatMetadata[] = []
+  const today: MothershipChatMetadata[] = []
+  const yesterday: MothershipChatMetadata[] = []
+  const last7: MothershipChatMetadata[] = []
+  const last30: MothershipChatMetadata[] = []
+  const older: MothershipChatMetadata[] = []
+
+  for (const task of tasks) {
+    if (task.isPinned) {
+      pinned.push(task)
+      continue
+    }
+    const date = task.updatedAt
+    if (isToday(date)) {
+      today.push(task)
+    } else if (isYesterday(date)) {
+      yesterday.push(task)
+    } else {
+      const days = differenceInCalendarDays(now, date)
+      if (days <= 7) last7.push(task)
+      else if (days <= 30) last30.push(task)
+      else older.push(task)
+    }
+  }
+
+  return (
+    [
+      { key: 'pinned', label: 'Pinned', tasks: pinned },
+      { key: 'today', label: 'Today', tasks: today },
+      { key: 'yesterday', label: 'Yesterday', tasks: yesterday },
+      { key: 'last7', label: 'Previous 7 Days', tasks: last7 },
+      { key: 'last30', label: 'Previous 30 Days', tasks: last30 },
+      { key: 'older', label: 'Older', tasks: older },
+    ] as const
+  ).filter((bucket) => bucket.tasks.length > 0)
+}
+
+/**
+ * A small status dot mirroring the sidebar's semantics: yellow while a chat is
+ * actively streaming, brand accent when it has unread activity. Rendered only
+ * when one of those states applies.
+ */
+function StatusDot({ task }: { task: MothershipChatMetadata }) {
+  if (!task.isActive && !task.isUnread) return null
+  return (
+    <span
+      aria-hidden='true'
+      className='size-[6px] flex-shrink-0 rounded-full'
+      style={{ backgroundColor: task.isActive ? '#EAB308' : 'var(--brand-accent)' }}
+    />
+  )
+}
+
+interface ChatHistoryListProps {
+  /** Invoked with the chat id when a row is chosen. */
+  onSelect: (chatId: string) => void
+  /** The currently-open chat, highlighted in the list. */
+  activeChatId?: string
+  /** Focus the search field (and reset the query when it goes false). */
+  autoFocus?: boolean
+}
+
+/**
+ * The searchable, recency-grouped list of a workspace's Mothership chats. Shared
+ * by the home "All Chats" tray and the open-chat title-bar switcher; the host
+ * supplies `onSelect` (inline open, route push, etc.). Hovering a row warms its
+ * history cache so opening it is instant.
+ */
+export function ChatHistoryList({
+  onSelect,
+  activeChatId,
+  autoFocus = false,
+}: ChatHistoryListProps) {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const prefetchChatHistory = usePrefetchChatHistory()
+  const { data: tasks = [], isLoading } = useMothershipChats(workspaceId)
+  const [query, setQuery] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const buckets = useMemo(() => {
+    const trimmed = query.trim().toLowerCase()
+    const filtered = trimmed
+      ? tasks.filter((task) => task.name.toLowerCase().includes(trimmed))
+      : tasks
+    return bucketChats(filtered)
+  }, [tasks, query])
+
+  const hasChats = tasks.length > 0
+  const hasResults = buckets.length > 0
+
+  /** Focus search when activated; clear a stale query when deactivated. */
+  useEffect(() => {
+    if (autoFocus) inputRef.current?.focus()
+    else setQuery('')
+  }, [autoFocus])
+
+  return (
+    <div className='flex flex-col px-2 pb-2'>
+      <div className='flex items-center gap-2 px-2 py-1.5'>
+        <Search className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+        <input
+          ref={inputRef}
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder='Search chats'
+          aria-label='Search chats'
+          className='w-full bg-transparent text-[var(--text-body)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none'
+        />
+      </div>
+      <div
+        className='flex flex-col overflow-y-auto overscroll-contain'
+        style={{ maxHeight: CONFIG.LIST_MAX_HEIGHT }}
+      >
+        {isLoading ? (
+          <div className='flex flex-col gap-1 px-1 py-1'>
+            {Array.from({ length: CONFIG.SKELETON_ROWS }, (_, i) => (
+              <Skeleton key={i} className='h-[30px] w-full' />
+            ))}
+          </div>
+        ) : !hasChats ? (
+          <p className='px-2 py-6 text-center text-[var(--text-muted)] text-caption'>
+            No chats yet
+          </p>
+        ) : !hasResults ? (
+          <p className='px-2 py-6 text-center text-[var(--text-muted)] text-caption'>
+            No chats found
+          </p>
+        ) : (
+          buckets.map((bucket) => (
+            <div key={bucket.key} className='mt-1.5 first:mt-0'>
+              <p className='px-2 py-1 font-medium text-[var(--text-muted)] text-caption'>
+                {bucket.label}
+              </p>
+              {bucket.tasks.map((task) => (
+                <button
+                  key={task.id}
+                  type='button'
+                  onClick={() => onSelect(task.id)}
+                  onMouseEnter={() => prefetchChatHistory(task.id)}
+                  className={cn(
+                    'flex h-[30px] w-full items-center gap-2 rounded-lg px-2 text-left transition-colors hover-hover:bg-[var(--surface-active)]',
+                    task.id === activeChatId && 'bg-[var(--surface-active)]'
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'min-w-0 flex-1 truncate text-[var(--text-body)] text-sm',
+                      task.isUnread && 'font-medium text-[var(--text-primary)]'
+                    )}
+                  >
+                    {task.name}
+                  </span>
+                  <StatusDot task={task} />
+                </button>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx
index d7b4a1552ab..043d342d662 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx
@@ -1,85 +1,19 @@
 'use client'
 
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { differenceInCalendarDays, isToday, isYesterday } from 'date-fns'
+import { useEffect, useRef, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
-import { Expandable, ExpandableContent, Skeleton } from '@/components/emcn'
-import { Clock, Search } from '@/components/emcn/icons'
+import { Expandable, ExpandableContent } from '@/components/emcn'
+import { Clock } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
-import { type TaskMetadata, usePrefetchChatHistory, useTasks } from '@/hooks/queries/tasks'
+import { ChatHistoryList } from '@/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list'
 
-const CONFIG = {
-  LIST_MAX_HEIGHT: 320,
-  SKELETON_ROWS: 5,
-} as const
-
-/** A recency bucket of chats rendered as one section in the history list. */
-interface ChatBucket {
-  key: string
-  label: string
-  tasks: TaskMetadata[]
-}
-
-/**
- * Buckets chats into Codex-style recency sections. Pinned chats are lifted out
- * of their date bucket into a dedicated section at the top; everything else is
- * grouped by how recently it was last updated. The server already returns the
- * list ordered (pinned first, then desc by `updatedAt`), so per-bucket order is
- * preserved by simply appending as we iterate.
- */
-function bucketChats(tasks: readonly TaskMetadata[]): ChatBucket[] {
-  const now = new Date()
-  const pinned: TaskMetadata[] = []
-  const today: TaskMetadata[] = []
-  const yesterday: TaskMetadata[] = []
-  const last7: TaskMetadata[] = []
-  const last30: TaskMetadata[] = []
-  const older: TaskMetadata[] = []
-
-  for (const task of tasks) {
-    if (task.isPinned) {
-      pinned.push(task)
-      continue
-    }
-    const date = task.updatedAt
-    if (isToday(date)) {
-      today.push(task)
-    } else if (isYesterday(date)) {
-      yesterday.push(task)
-    } else {
-      const days = differenceInCalendarDays(now, date)
-      if (days <= 7) last7.push(task)
-      else if (days <= 30) last30.push(task)
-      else older.push(task)
-    }
-  }
-
-  return (
-    [
-      { key: 'pinned', label: 'Pinned', tasks: pinned },
-      { key: 'today', label: 'Today', tasks: today },
-      { key: 'yesterday', label: 'Yesterday', tasks: yesterday },
-      { key: 'last7', label: 'Previous 7 Days', tasks: last7 },
-      { key: 'last30', label: 'Previous 30 Days', tasks: last30 },
-      { key: 'older', label: 'Older', tasks: older },
-    ] as const
-  ).filter((bucket) => bucket.tasks.length > 0)
-}
-
-/**
- * A small status dot mirroring the sidebar's semantics: yellow while a chat is
- * actively streaming, brand accent when it has unread activity. Rendered only
- * when one of those states applies.
- */
-function StatusDot({ task }: { task: TaskMetadata }) {
-  if (!task.isActive && !task.isUnread) return null
-  return (
-    <span
-      aria-hidden='true'
-      className='size-[6px] flex-shrink-0 rounded-full'
-      style={{ backgroundColor: task.isActive ? '#EAB308' : 'var(--brand-accent)' }}
-    />
-  )
+interface ChatHistoryProps {
+  /**
+   * Opens the selected chat. When provided, the chat opens inline (the home
+   * input morphs into the docked chat view) instead of navigating. Falls back
+   * to a route push when omitted.
+   */
+  onSelectChat?: (chatId: string) => void
 }
 
 /**
@@ -90,45 +24,12 @@ function StatusDot({ task }: { task: TaskMetadata }) {
  * rides upward, in lockstep (300ms ease). Lives on the new-chat home view so a
  * chat can be resumed without the (collapsible) sidebar.
  */
-interface ChatHistoryProps {
-  /**
-   * Opens the selected chat. When provided, the chat opens inline (the home
-   * input morphs into the docked chat view) instead of navigating. Falls back
-   * to a route push when omitted.
-   */
-  onSelectChat?: (chatId: string) => void
-}
-
 export function ChatHistory({ onSelectChat }: ChatHistoryProps) {
   const { workspaceId } = useParams<{ workspaceId: string }>()
   const router = useRouter()
-  const prefetchChatHistory = usePrefetchChatHistory()
-  const { data: tasks = [], isLoading } = useTasks(workspaceId)
 
   const [open, setOpen] = useState(false)
-  const [query, setQuery] = useState('')
   const panelRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const buckets = useMemo(() => {
-    const trimmed = query.trim().toLowerCase()
-    const filtered = trimmed
-      ? tasks.filter((task) => task.name.toLowerCase().includes(trimmed))
-      : tasks
-    return bucketChats(filtered)
-  }, [tasks, query])
-
-  const hasChats = tasks.length > 0
-  const hasResults = buckets.length > 0
-
-  /** Focus the search field and clear stale queries each time the panel opens. */
-  useEffect(() => {
-    if (open) {
-      inputRef.current?.focus()
-    } else {
-      setQuery('')
-    }
-  }, [open])
 
   /** Collapse on outside click or Escape, matching popover dismissal. */
   useEffect(() => {
@@ -153,7 +54,7 @@ export function ChatHistory({ onSelectChat }: ChatHistoryProps) {
       onSelectChat(chatId)
       return
     }
-    router.push(`/workspace/${workspaceId}/task/${chatId}`)
+    router.push(`/workspace/${workspaceId}/chat/${chatId}`)
   }
 
   return (
@@ -177,66 +78,7 @@ export function ChatHistory({ onSelectChat }: ChatHistoryProps) {
 
       <Expandable expanded={open}>
         <ExpandableContent>
-          <div className='flex flex-col px-1.5 pb-1.5'>
-            <div className='flex items-center gap-2 px-2 py-1.5'>
-              <Search className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
-              <input
-                ref={inputRef}
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder='Search chats'
-                aria-label='Search chats'
-                className='w-full bg-transparent text-[var(--text-body)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none'
-              />
-            </div>
-            <div
-              className='flex flex-col overflow-y-auto overscroll-contain'
-              style={{ maxHeight: CONFIG.LIST_MAX_HEIGHT }}
-            >
-              {isLoading ? (
-                <div className='flex flex-col gap-1 px-1 py-1'>
-                  {Array.from({ length: CONFIG.SKELETON_ROWS }, (_, i) => (
-                    <Skeleton key={i} className='h-[28px] w-full' />
-                  ))}
-                </div>
-              ) : !hasChats ? (
-                <p className='px-2 py-6 text-center text-[var(--text-muted)] text-caption'>
-                  No chats yet
-                </p>
-              ) : !hasResults ? (
-                <p className='px-2 py-6 text-center text-[var(--text-muted)] text-caption'>
-                  No chats found
-                </p>
-              ) : (
-                buckets.map((bucket) => (
-                  <div key={bucket.key} className='mt-1.5 first:mt-0'>
-                    <p className='px-2 py-1 font-medium text-[var(--text-muted)] text-caption'>
-                      {bucket.label}
-                    </p>
-                    {bucket.tasks.map((task) => (
-                      <button
-                        key={task.id}
-                        type='button'
-                        onClick={() => handleSelect(task.id)}
-                        onMouseEnter={() => prefetchChatHistory(task.id)}
-                        className='flex w-full items-center gap-2 rounded-[6px] px-2 py-1.5 text-left transition-colors hover-hover:bg-[var(--surface-active)]'
-                      >
-                        <span
-                          className={cn(
-                            'min-w-0 flex-1 truncate text-[var(--text-body)] text-sm',
-                            task.isUnread && 'font-medium text-[var(--text-primary)]'
-                          )}
-                        >
-                          {task.name}
-                        </span>
-                        <StatusDot task={task} />
-                      </button>
-                    ))}
-                  </div>
-                ))
-              )}
-            </div>
-          </div>
+          <ChatHistoryList onSelect={handleSelect} autoFocus={open} />
         </ExpandableContent>
       </Expandable>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-model.test.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-model.test.ts
new file mode 100644
index 00000000000..dcf573abd29
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-model.test.ts
@@ -0,0 +1,231 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import type { MothershipStreamV1EventEnvelope } from '@/lib/copilot/generated/mothership-stream-v1'
+import {
+  activityReducer,
+  createInitialActivityModel,
+  MOTHERSHIP_ACTOR_ID,
+  reduceActivity,
+} from './activity-model'
+
+function isoAt(i: number): string {
+  return new Date(1000 * (i + 1)).toISOString()
+}
+
+/** Common envelope scaffolding (seq/ts/v/stream) for a single stream. */
+function common(i: number) {
+  return { seq: i, ts: isoAt(i), v: 1 as const, stream: { streamId: 's1' } }
+}
+
+/**
+ * A realistic "research these competitors and put them in a table" turn:
+ * Mothership deploys the Research Agent and Table Agent in parallel, each runs
+ * a tool, a table artifact is declared, both agents finish, the turn completes.
+ */
+function parallelResearchAndTable(): MothershipStreamV1EventEnvelope[] {
+  return [
+    { ...common(0), type: 'session', payload: { kind: 'start', data: {} } },
+    { ...common(1), type: 'session', payload: { kind: 'title', title: 'Competitor research' } },
+    {
+      ...common(2),
+      type: 'text',
+      payload: { channel: 'thinking', text: 'Planning the approach…' },
+    },
+    {
+      ...common(3),
+      type: 'span',
+      scope: { lane: 'subagent', agentId: 'a-research' },
+      payload: { kind: 'subagent', event: 'start', agent: 'research' },
+    },
+    {
+      ...common(4),
+      type: 'span',
+      scope: { lane: 'subagent', agentId: 'a-table' },
+      payload: { kind: 'subagent', event: 'start', agent: 'table' },
+    },
+    {
+      ...common(5),
+      type: 'tool',
+      scope: { lane: 'subagent', agentId: 'a-research' },
+      payload: {
+        phase: 'call',
+        toolCallId: 't-search',
+        toolName: 'search_online',
+        executor: 'go',
+        mode: 'sync',
+      },
+    },
+    {
+      ...common(6),
+      type: 'tool',
+      scope: { lane: 'subagent', agentId: 'a-table' },
+      payload: {
+        phase: 'call',
+        toolCallId: 't-table',
+        toolName: 'user_table',
+        executor: 'sim',
+        mode: 'sync',
+      },
+    },
+    {
+      ...common(7),
+      type: 'resource',
+      payload: { op: 'upsert', resource: { id: 'tbl-1', type: 'table', title: 'Competitors' } },
+    },
+    {
+      ...common(8),
+      type: 'tool',
+      scope: { lane: 'subagent', agentId: 'a-research' },
+      payload: {
+        phase: 'result',
+        toolCallId: 't-search',
+        toolName: 'search_online',
+        executor: 'go',
+        mode: 'sync',
+        success: true,
+        status: 'success',
+      },
+    },
+    {
+      ...common(9),
+      type: 'tool',
+      scope: { lane: 'subagent', agentId: 'a-table' },
+      payload: {
+        phase: 'result',
+        toolCallId: 't-table',
+        toolName: 'user_table',
+        executor: 'sim',
+        mode: 'sync',
+        success: true,
+        status: 'success',
+      },
+    },
+    {
+      ...common(10),
+      type: 'span',
+      scope: { lane: 'subagent', agentId: 'a-research' },
+      payload: { kind: 'subagent', event: 'end', agent: 'research' },
+    },
+    {
+      ...common(11),
+      type: 'span',
+      scope: { lane: 'subagent', agentId: 'a-table' },
+      payload: { kind: 'subagent', event: 'end', agent: 'table' },
+    },
+    {
+      ...common(12),
+      type: 'complete',
+      payload: { status: 'complete', usage: { total_tokens: 1234 } },
+    },
+  ]
+}
+
+describe('activityReducer — parallel research + table scene', () => {
+  it('shows two parallel agent lanes while both are active', () => {
+    const events = parallelResearchAndTable().slice(0, 7) // through both tool calls
+    const model = events.reduce(activityReducer, createInitialActivityModel())
+
+    expect(model.scene).toBe('composite')
+    expect(model.topology).toBe('parallel')
+    expect(model.phase).toBe('working')
+
+    expect(model.actors['a-research']?.label).toBe('Research Agent')
+    expect(model.actors['a-research']?.state).toBe('active')
+    expect(model.actors['a-table']?.label).toBe('Table Agent')
+    expect(model.actors['a-table']?.state).toBe('active')
+
+    const search = model.activities.find((a) => a.toolCallId === 't-search')
+    expect(search?.ownerActorId).toBe('a-research')
+    expect(search?.family).toBe('search')
+    expect(search?.verb).toBe('Searching online')
+    expect(search?.state).toBe('generating')
+  })
+
+  it('resolves to a completed turn with both agents done and the artifact tracked', () => {
+    const model = reduceActivity(parallelResearchAndTable())
+
+    expect(model.title).toBe('Competitor research')
+    expect(model.phase).toBe('complete')
+
+    expect(model.actors['a-research']?.state).toBe('done')
+    expect(model.actors['a-table']?.state).toBe('done')
+
+    const search = model.activities.find((a) => a.toolCallId === 't-search')
+    const table = model.activities.find((a) => a.toolCallId === 't-table')
+    expect(search?.state).toBe('success')
+    expect(table?.state).toBe('success')
+    expect(table?.ownerActorId).toBe('a-table')
+
+    expect(model.artifacts['tbl-1']).toMatchObject({ type: 'table', title: 'Competitors' })
+    // The table artifact associates to the Table Agent lane so it can preview in-lane.
+    expect(model.artifacts['tbl-1']?.ownerActorId).toBe('a-table')
+  })
+})
+
+describe('activityReducer — lifecycle states', () => {
+  it('enters paused with confirmation attention on a checkpoint, then resumes', () => {
+    const paused = [
+      { ...common(0), type: 'session', payload: { kind: 'start', data: {} } },
+      {
+        ...common(1),
+        type: 'run',
+        payload: {
+          kind: 'checkpoint_pause',
+          checkpointId: 'c1',
+          executionId: 'e1',
+          runId: 'r1',
+          pendingToolCallIds: ['t-x'],
+        },
+      },
+    ] satisfies MothershipStreamV1EventEnvelope[]
+    let model = reduceActivity(paused)
+    expect(model.phase).toBe('paused')
+    expect(model.attention).toMatchObject({ kind: 'confirmation', pendingToolCallIds: ['t-x'] })
+
+    model = activityReducer(model, {
+      ...common(2),
+      type: 'run',
+      payload: { kind: 'resumed' },
+    })
+    expect(model.phase).toBe('working')
+    expect(model.attention).toBeUndefined()
+  })
+
+  it('flags hidden tools so the renderer can skip them', () => {
+    const model = reduceActivity([
+      { ...common(0), type: 'session', payload: { kind: 'start', data: {} } },
+      {
+        ...common(1),
+        type: 'tool',
+        payload: {
+          phase: 'call',
+          toolCallId: 't-hidden',
+          toolName: 'read',
+          executor: 'go',
+          mode: 'sync',
+          ui: { hidden: true },
+        },
+      },
+    ])
+    const hidden = model.activities.find((a) => a.toolCallId === 't-hidden')
+    expect(hidden?.hidden).toBe(true)
+    expect(model.actors[MOTHERSHIP_ACTOR_ID]).toBeDefined()
+  })
+
+  it('marks a cancelled turn without downgrading from a later stray event', () => {
+    let model = reduceActivity([
+      { ...common(0), type: 'session', payload: { kind: 'start', data: {} } },
+      { ...common(1), type: 'complete', payload: { status: 'cancelled' } },
+    ])
+    expect(model.phase).toBe('cancelled')
+    // A late text event must not pull us back to 'working'.
+    model = activityReducer(model, {
+      ...common(2),
+      type: 'text',
+      payload: { channel: 'assistant', text: 'trailing' },
+    })
+    expect(model.phase).toBe('cancelled')
+  })
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-model.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-model.ts
new file mode 100644
index 00000000000..72bfe5073d2
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-model.ts
@@ -0,0 +1,497 @@
+import { stripVersionSuffix } from '@sim/utils/string'
+import {
+  type MothershipStreamV1EventEnvelope,
+  MothershipStreamV1EventType,
+  type MothershipStreamV1StreamScope,
+  type MothershipStreamV1ToolExecutor,
+  type MothershipStreamV1ToolMode,
+} from '@/lib/copilot/generated/mothership-stream-v1'
+import type { MothershipResourceType } from '@/lib/copilot/resources/types'
+import { isToolHiddenInUi } from '@/lib/copilot/tools/client/hidden-tools'
+import { SUBAGENT_LABELS, TOOL_UI_METADATA } from '@/app/workspace/[workspaceId]/home/types'
+
+/**
+ * Reduces the raw {@link MothershipStreamV1EventEnvelope} stream into an
+ * `ActivityModel` — the view-model the right-panel activity visualizer renders
+ * from. Pure: `(model, envelope) => model`. Fold the `seq`-ordered envelope
+ * sequence to rebuild state on resume/replay.
+ *
+ * This is the data layer of the "showcase what Sim is building" panel. The
+ * renderer ({@link ../activity-view/activity-view}) never reads raw envelopes —
+ * only this model.
+ */
+
+export type TurnPhase =
+  | 'idle'
+  | 'spinning-up'
+  | 'thinking'
+  | 'working'
+  | 'streaming-artifact'
+  | 'paused'
+  | 'compacting'
+  | 'complete'
+  | 'errored'
+  | 'cancelled'
+
+export type SceneKind =
+  | 'idle'
+  | 'thinking'
+  | 'workflow-build'
+  | 'deploy'
+  | 'authoring'
+  | 'research'
+  | 'data'
+  | 'knowledge'
+  | 'execution'
+  | 'debug'
+  | 'connect'
+  | 'code'
+  | 'tool-build'
+  | 'job'
+  | 'composite'
+
+export type Topology = 'single' | 'sequential' | 'parallel' | 'nested' | 'mothership-only'
+
+export type ActorState = 'spawning' | 'active' | 'delegating' | 'done' | 'failed'
+
+export type ActivityState =
+  | 'generating'
+  | 'executing'
+  | 'success'
+  | 'error'
+  | 'cancelled'
+  | 'skipped'
+  | 'rejected'
+
+export type VerbFamily =
+  | 'search'
+  | 'read'
+  | 'write'
+  | 'execute'
+  | 'data'
+  | 'connect'
+  | 'memory'
+  | 'housekeeping'
+  | 'agent'
+  | 'other'
+
+export type AttentionKind = 'confirmation' | 'credential' | 'usage-limit' | 'error'
+
+export const MOTHERSHIP_ACTOR_ID = 'mothership'
+
+export interface Actor {
+  id: string
+  /** Subagent key (`research`, `table`, …) or `mothership`. */
+  key: string
+  label: string
+  state: ActorState
+  parentToolCallId?: string
+  depth: number
+  startedAt: number
+  endedAt?: number
+}
+
+export interface ActivityItem {
+  toolCallId: string
+  toolName: string
+  verb: string
+  family: VerbFamily
+  ownerActorId: string
+  executor: MothershipStreamV1ToolExecutor
+  mode: MothershipStreamV1ToolMode
+  state: ActivityState
+  hidden: boolean
+  startedAt: number
+  endedAt?: number
+}
+
+export interface ActivityArtifact {
+  resourceId: string
+  type: MothershipResourceType
+  title: string
+  state: 'declared' | 'streaming' | 'ready' | 'removed'
+  /** The agent lane that produced it, so the panel can preview it in-lane. */
+  ownerActorId: string
+}
+
+export interface AttentionState {
+  kind: AttentionKind
+  provider?: string
+  message?: string
+  pendingToolCallIds?: string[]
+}
+
+export interface ActivityModel {
+  phase: TurnPhase
+  scene: SceneKind
+  topology: Topology
+  /** Stable lane order, by first appearance. Includes `mothership` lazily. */
+  actorOrder: string[]
+  actors: Record<string, Actor>
+  activities: ActivityItem[]
+  artifacts: Record<string, ActivityArtifact>
+  attention?: AttentionState
+  title?: string
+  requestId?: string
+}
+
+export function createInitialActivityModel(): ActivityModel {
+  return {
+    phase: 'idle',
+    scene: 'idle',
+    topology: 'single',
+    actorOrder: [],
+    actors: {},
+    activities: [],
+    artifacts: {},
+  }
+}
+
+const TERMINAL_PHASES: ReadonlySet<TurnPhase> = new Set(['complete', 'errored', 'cancelled'])
+const TERMINAL_RANK: Record<string, number> = { complete: 0, errored: 1, cancelled: 2 }
+
+/**
+ * Guards phase transitions so late/stray events can't downgrade a terminal,
+ * paused, or compacting state. See spec §7 (turn-phase precedence).
+ */
+function setPhase(phase: TurnPhase, next: TurnPhase): TurnPhase {
+  if (TERMINAL_PHASES.has(phase)) {
+    if (!TERMINAL_PHASES.has(next)) return phase
+    return TERMINAL_RANK[next] >= TERMINAL_RANK[phase] ? next : phase
+  }
+  if (phase === 'paused' || phase === 'compacting') {
+    if (next === 'working' || next === 'paused' || next === 'compacting') return next
+    if (TERMINAL_PHASES.has(next)) return next
+    return phase
+  }
+  return next
+}
+
+const VERB_FAMILY_BY_TOOL: Record<string, VerbFamily> = {
+  glob: 'search',
+  grep: 'search',
+  search_online: 'search',
+  search_library_docs: 'search',
+  read: 'read',
+  get_page_contents: 'read',
+  scrape_page: 'read',
+  workspace_file: 'write',
+  edit_content: 'write',
+  create_workflow: 'write',
+  edit_workflow: 'write',
+  function_execute: 'execute',
+  user_table: 'data',
+  knowledge_base: 'data',
+  manage_mcp_tool: 'connect',
+  manage_skill: 'connect',
+  user_memory: 'memory',
+  context_compaction: 'housekeeping',
+  open_resource: 'housekeeping',
+}
+
+function toolFamily(toolName: string): VerbFamily {
+  const base = stripVersionSuffix(toolName)
+  if (VERB_FAMILY_BY_TOOL[base]) return VERB_FAMILY_BY_TOOL[base]
+  if (base in SUBAGENT_LABELS) return 'agent'
+  return 'other'
+}
+
+function titleCaseTool(toolName: string): string {
+  return stripVersionSuffix(toolName)
+    .split('_')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ')
+}
+
+function resolveVerb(toolName: string, ui?: { title?: string; phaseLabel?: string }): string {
+  return (
+    ui?.phaseLabel ||
+    ui?.title ||
+    TOOL_UI_METADATA[toolName as keyof typeof TOOL_UI_METADATA]?.title ||
+    titleCaseTool(toolName)
+  )
+}
+
+const SCENE_BY_ACTOR_KEY: Record<string, SceneKind> = {
+  workflow: 'workflow-build',
+  deploy: 'deploy',
+  file: 'authoring',
+  research: 'research',
+  table: 'data',
+  knowledge: 'knowledge',
+  run: 'execution',
+  debug: 'debug',
+  auth: 'connect',
+  agent: 'code',
+  custom_tool: 'tool-build',
+  job: 'job',
+  superagent: 'composite',
+}
+
+const SCENE_BY_FAMILY: Partial<Record<VerbFamily, SceneKind>> = {
+  search: 'research',
+  read: 'research',
+  write: 'authoring',
+  execute: 'code',
+  data: 'data',
+  connect: 'connect',
+}
+
+/** Derives the dominant scene from the active actors / activities (spec §2). */
+function resolveScene(model: ActivityModel): SceneKind {
+  const liveActorKeys = model.actorOrder
+    .map((id) => model.actors[id])
+    .filter((a): a is Actor => !!a && a.id !== MOTHERSHIP_ACTOR_ID && a.state !== 'done')
+    .map((a) => a.key)
+  const distinct = [...new Set(liveActorKeys)]
+  if (distinct.length >= 2) return 'composite'
+  if (distinct.length === 1) return SCENE_BY_ACTOR_KEY[distinct[0]] ?? 'thinking'
+
+  const lastActive = [...model.activities].reverse().find((act) => !act.hidden)
+  if (lastActive) return SCENE_BY_FAMILY[lastActive.family] ?? 'thinking'
+  return model.phase === 'idle' ? 'idle' : 'thinking'
+}
+
+function resolveTopology(model: ActivityModel): Topology {
+  const subagents = model.actorOrder
+    .map((id) => model.actors[id])
+    .filter((a): a is Actor => !!a && a.id !== MOTHERSHIP_ACTOR_ID)
+  if (subagents.length === 0) return 'mothership-only'
+  if (subagents.some((a) => a.parentToolCallId)) return 'nested'
+  const live = subagents.filter((a) => a.state !== 'done')
+  if (live.length >= 2) return 'parallel'
+  return subagents.length === 1 ? 'single' : 'sequential'
+}
+
+function actorIdFor(scope?: MothershipStreamV1StreamScope): string {
+  if (scope?.lane === 'subagent') {
+    return scope.agentId ?? `lane:${scope.parentToolCallId ?? 'unknown'}`
+  }
+  return MOTHERSHIP_ACTOR_ID
+}
+
+/**
+ * The lane an artifact belongs to: the emitting subagent (via scope), else the
+ * most recently active subagent, else Mothership.
+ */
+function artifactOwnerId(model: ActivityModel, scope?: MothershipStreamV1StreamScope): string {
+  const scoped = actorIdFor(scope)
+  if (scoped !== MOTHERSHIP_ACTOR_ID) return scoped
+  for (let i = model.actorOrder.length - 1; i >= 0; i--) {
+    const actor = model.actors[model.actorOrder[i]]
+    if (actor && actor.id !== MOTHERSHIP_ACTOR_ID && actor.state !== 'done') return actor.id
+  }
+  return MOTHERSHIP_ACTOR_ID
+}
+
+function ensureMothership(model: ActivityModel): void {
+  if (model.actors[MOTHERSHIP_ACTOR_ID]) return
+  model.actors[MOTHERSHIP_ACTOR_ID] = {
+    id: MOTHERSHIP_ACTOR_ID,
+    key: MOTHERSHIP_ACTOR_ID,
+    label: 'Mothership',
+    state: 'active',
+    depth: 0,
+    startedAt: 0,
+  }
+  model.actorOrder.push(MOTHERSHIP_ACTOR_ID)
+}
+
+function depthFor(model: ActivityModel, parentToolCallId?: string): number {
+  if (!parentToolCallId) return 1
+  const owner = model.activities.find((a) => a.toolCallId === parentToolCallId)
+  const parentActor = owner ? model.actors[owner.ownerActorId] : undefined
+  return (parentActor?.depth ?? 0) + 1
+}
+
+/**
+ * Folds one envelope into the model, returning a new model. Unknown event
+ * types pass through unchanged.
+ */
+export function activityReducer(
+  prev: ActivityModel,
+  envelope: MothershipStreamV1EventEnvelope
+): ActivityModel {
+  const model: ActivityModel = {
+    ...prev,
+    actorOrder: [...prev.actorOrder],
+    actors: { ...prev.actors },
+    activities: [...prev.activities],
+    artifacts: { ...prev.artifacts },
+  }
+  const ts = Number.isNaN(Date.parse(envelope.ts)) ? 0 : Date.parse(envelope.ts)
+
+  switch (envelope.type) {
+    case MothershipStreamV1EventType.session: {
+      const { payload } = envelope
+      if (payload.kind === 'start') model.phase = setPhase(model.phase, 'spinning-up')
+      else if (payload.kind === 'title') model.title = payload.title
+      else if (payload.kind === 'trace') model.requestId = payload.requestId
+      break
+    }
+
+    case MothershipStreamV1EventType.text: {
+      const isThinking = envelope.payload.channel === 'thinking'
+      const ownerId = actorIdFor(envelope.scope)
+      if (ownerId !== MOTHERSHIP_ACTOR_ID && model.actors[ownerId]) {
+        model.actors[ownerId] = { ...model.actors[ownerId], state: 'active' }
+      }
+      model.phase = setPhase(model.phase, isThinking ? 'thinking' : 'working')
+      break
+    }
+
+    case MothershipStreamV1EventType.tool: {
+      const { payload } = envelope
+      const ownerId = actorIdFor(envelope.scope)
+      if (ownerId === MOTHERSHIP_ACTOR_ID) ensureMothership(model)
+
+      if (payload.phase === 'call') {
+        const hidden =
+          isToolHiddenInUi(payload.toolName) ||
+          payload.ui?.hidden === true ||
+          payload.ui?.internal === true
+        const item: ActivityItem = {
+          toolCallId: payload.toolCallId,
+          toolName: payload.toolName,
+          verb: resolveVerb(payload.toolName, payload.ui),
+          family: toolFamily(payload.toolName),
+          ownerActorId: ownerId,
+          executor: payload.executor,
+          mode: payload.mode,
+          state: payload.status === 'executing' ? 'executing' : 'generating',
+          hidden,
+          startedAt: ts,
+        }
+        const existing = model.activities.findIndex((a) => a.toolCallId === item.toolCallId)
+        if (existing >= 0) model.activities[existing] = item
+        else model.activities.push(item)
+        if (payload.requiresConfirmation || payload.ui?.requiresConfirmation) {
+          model.attention = { kind: 'confirmation', pendingToolCallIds: [payload.toolCallId] }
+        }
+        model.phase = setPhase(model.phase, 'working')
+      } else if (payload.phase === 'result') {
+        const idx = model.activities.findIndex((a) => a.toolCallId === payload.toolCallId)
+        if (idx >= 0) {
+          const nextState: ActivityState =
+            (payload.status as ActivityState | undefined) ?? (payload.success ? 'success' : 'error')
+          model.activities[idx] = { ...model.activities[idx], state: nextState, endedAt: ts }
+        }
+      }
+      break
+    }
+
+    case MothershipStreamV1EventType.span: {
+      const { payload } = envelope
+      if (payload.kind === 'subagent') {
+        const id = actorIdFor(envelope.scope)
+        if (payload.event === 'start') {
+          const key = payload.agent ?? 'agent'
+          const parentToolCallId = envelope.scope?.parentToolCallId
+          const actor: Actor = {
+            id,
+            key,
+            label: SUBAGENT_LABELS[key] ?? titleCaseTool(key),
+            state: 'active',
+            parentToolCallId,
+            depth: depthFor(model, parentToolCallId),
+            startedAt: ts,
+          }
+          if (!model.actors[id]) model.actorOrder.push(id)
+          model.actors[id] = actor
+          model.phase = setPhase(model.phase, 'working')
+        } else if (payload.event === 'end' && model.actors[id]) {
+          model.actors[id] = { ...model.actors[id], state: 'done', endedAt: ts }
+        }
+      }
+      break
+    }
+
+    case MothershipStreamV1EventType.resource: {
+      const { payload } = envelope
+      const { resource } = payload
+      if (payload.op === 'upsert') {
+        const existing = model.artifacts[resource.id]
+        model.artifacts[resource.id] = {
+          resourceId: resource.id,
+          type: resource.type as MothershipResourceType,
+          title: resource.title ?? existing?.title ?? 'Untitled',
+          state: existing?.state ?? 'declared',
+          ownerActorId: existing?.ownerActorId ?? artifactOwnerId(model, envelope.scope),
+        }
+      } else if (payload.op === 'remove' && model.artifacts[resource.id]) {
+        model.artifacts[resource.id] = { ...model.artifacts[resource.id], state: 'removed' }
+      }
+      break
+    }
+
+    case MothershipStreamV1EventType.run: {
+      const { payload } = envelope
+      if (payload.kind === 'checkpoint_pause') {
+        model.phase = setPhase(model.phase, 'paused')
+        model.attention = {
+          kind: 'confirmation',
+          pendingToolCallIds: payload.pendingToolCallIds,
+        }
+      } else if (payload.kind === 'resumed') {
+        if (model.attention?.kind === 'confirmation') model.attention = undefined
+        model.phase = setPhase(model.phase, 'working')
+      } else if (payload.kind === 'compaction_start') {
+        model.phase = setPhase(model.phase, 'compacting')
+      } else if (payload.kind === 'compaction_done') {
+        model.phase = setPhase(model.phase, 'working')
+      }
+      break
+    }
+
+    case MothershipStreamV1EventType.error: {
+      const { payload } = envelope
+      const code = payload.code?.toLowerCase() ?? ''
+      const isUsage = /usage|limit|quota|upgrade/.test(code)
+      model.attention = {
+        kind: isUsage ? 'usage-limit' : 'error',
+        provider: payload.provider,
+        message: payload.displayMessage ?? payload.message,
+      }
+      break
+    }
+
+    case MothershipStreamV1EventType.complete: {
+      const status = envelope.payload.status
+      model.phase = setPhase(
+        model.phase,
+        status === 'complete' ? 'complete' : status === 'cancelled' ? 'cancelled' : 'errored'
+      )
+      for (const id of model.actorOrder) {
+        const actor = model.actors[id]
+        if (actor && actor.state !== 'done' && actor.id !== MOTHERSHIP_ACTOR_ID) {
+          model.actors[id] = { ...actor, state: 'done', endedAt: ts }
+        }
+      }
+      break
+    }
+
+    default:
+      return prev
+  }
+
+  model.scene = resolveScene(model)
+  model.topology = resolveTopology(model)
+  return model
+}
+
+/** Convenience: fold a whole sequence (e.g. for resume/replay). */
+export function reduceActivity(
+  envelopes: readonly MothershipStreamV1EventEnvelope[]
+): ActivityModel {
+  return envelopes.reduce(activityReducer, createInitialActivityModel())
+}
+
+/** Whether the turn is actively in-flight (panel should show the activity view). */
+export function isTurnInFlight(model: ActivityModel): boolean {
+  return (
+    model.phase !== 'idle' &&
+    model.phase !== 'complete' &&
+    model.phase !== 'errored' &&
+    model.phase !== 'cancelled'
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-view.tsx
new file mode 100644
index 00000000000..428d1557c11
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/activity-view.tsx
@@ -0,0 +1,288 @@
+'use client'
+
+import { memo } from 'react'
+import {
+  BookOpen,
+  Check,
+  Database,
+  File as FileIcon,
+  Loader,
+  Lock,
+  Search,
+  Wrench,
+  X,
+} from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+import {
+  type ActivityArtifact,
+  type ActivityItem,
+  type ActivityModel,
+  type ActivityState,
+  type Actor,
+  isTurnInFlight,
+  MOTHERSHIP_ACTOR_ID,
+  type SceneKind,
+  type VerbFamily,
+} from './activity-model'
+import { agentIdentity, artifactIcon, SCENE_ACCENT } from './agent-identity'
+
+const SCENE_STATUS: Record<SceneKind, string> = {
+  idle: 'Idle',
+  thinking: 'Thinking…',
+  'workflow-build': 'Building workflow…',
+  deploy: 'Deploying…',
+  authoring: 'Writing…',
+  research: 'Researching…',
+  data: 'Working with data…',
+  knowledge: 'Building knowledge…',
+  execution: 'Running…',
+  debug: 'Debugging…',
+  connect: 'Connecting…',
+  code: 'Writing code…',
+  'tool-build': 'Building a tool…',
+  job: 'Running a job…',
+  composite: 'Working on several things…',
+}
+
+const FAMILY_ICON: Record<VerbFamily, React.ComponentType<{ className?: string }>> = {
+  search: Search,
+  read: BookOpen,
+  write: FileIcon,
+  execute: Wrench,
+  data: Database,
+  connect: Lock,
+  memory: BookOpen,
+  housekeeping: Wrench,
+  agent: Wrench,
+  other: Wrench,
+}
+
+/** 6-digit hex + alpha suffix → rgba-ish tint without a color lib. */
+function tint(hex: string, alpha: string): string {
+  return `${hex}${alpha}`
+}
+
+function ActivityStateIcon({ state, color }: { state: ActivityState; color: string }) {
+  if (state === 'success') {
+    return <Check className='size-[12px]' style={{ color }} />
+  }
+  if (state === 'error' || state === 'rejected') {
+    return <X className='size-[12px] text-[var(--text-error,var(--text-icon))]' />
+  }
+  if (state === 'cancelled' || state === 'skipped') {
+    return <X className='size-[12px] text-[var(--text-muted)]' />
+  }
+  return <Loader className='size-[12px] animate-spin text-[var(--text-icon)]' />
+}
+
+function isActivityDone(state: ActivityState): boolean {
+  return state !== 'generating' && state !== 'executing'
+}
+
+const ActivityChip = memo(function ActivityChip({
+  activity,
+  color,
+}: {
+  activity: ActivityItem
+  color: string
+}) {
+  const Icon = FAMILY_ICON[activity.family]
+  const done = isActivityDone(activity.state)
+  return (
+    <div className='flex animate-stream-fade-in items-center gap-[8px] py-[3px] pl-[30px]'>
+      <Icon className='size-[12px] flex-shrink-0 text-[var(--text-icon)]' />
+      <span
+        className={cn(
+          'flex-1 truncate text-[13px]',
+          done ? 'text-[var(--text-secondary)]' : 'text-[var(--text-body)]'
+        )}
+      >
+        {activity.verb}
+      </span>
+      <ActivityStateIcon state={activity.state} color={color} />
+    </div>
+  )
+})
+
+/** Shimmering placeholder shaped to the artifact kind, shown while it builds. */
+function ArtifactSkeleton({ type }: { type: ActivityArtifact['type'] }) {
+  if (type === 'table') {
+    return (
+      <div className='flex flex-col gap-[4px]'>
+        {[0, 1, 2].map((r) => (
+          <div key={r} className='flex gap-[4px]'>
+            {[0, 1, 2].map((c) => (
+              <div
+                key={c}
+                className='h-[10px] flex-1 animate-pulse rounded-[2px] bg-[var(--surface-5)]'
+                style={{ animationDelay: `${(r + c) * 80}ms` }}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    )
+  }
+  return (
+    <div className='flex flex-col gap-[5px]'>
+      {['90%', '100%', '75%', '85%'].map((w, i) => (
+        <div
+          key={i}
+          className='h-[8px] animate-pulse rounded-[2px] bg-[var(--surface-5)]'
+          style={{ width: w, animationDelay: `${i * 80}ms` }}
+        />
+      ))}
+    </div>
+  )
+}
+
+const ArtifactPreview = memo(function ArtifactPreview({
+  artifact,
+  building,
+}: {
+  artifact: ActivityArtifact
+  building: boolean
+}) {
+  const Icon = artifactIcon(artifact.type)
+  const showSkeleton = building && artifact.state !== 'ready'
+  return (
+    <div className='ml-[30px] mt-[4px] animate-stream-fade-in overflow-hidden rounded-[8px] border border-[var(--divider)]'>
+      <div className='flex items-center gap-[6px] border-[var(--divider)] border-b bg-[var(--surface-4)] px-[10px] py-[6px]'>
+        <Icon className='size-[12px] flex-shrink-0 text-[var(--text-icon)]' />
+        <span className='flex-1 truncate text-[12px] text-[var(--text-secondary)]'>
+          {artifact.title}
+        </span>
+        {showSkeleton && <span className='text-[11px] text-[var(--text-muted)]'>building…</span>}
+      </div>
+      <div className='px-[10px] py-[8px]'>
+        <ArtifactSkeleton type={artifact.type} />
+      </div>
+    </div>
+  )
+})
+
+const ActorLane = memo(function ActorLane({
+  actor,
+  activities,
+  artifacts,
+  building,
+}: {
+  actor: Actor
+  activities: ActivityItem[]
+  artifacts: ActivityArtifact[]
+  building: boolean
+}) {
+  const visible = activities.filter((a) => a.ownerActorId === actor.id && !a.hidden)
+  const owned = artifacts.filter((a) => a.ownerActorId === actor.id && a.state !== 'removed')
+  const isMothership = actor.id === MOTHERSHIP_ACTOR_ID
+  if (isMothership && visible.length === 0 && owned.length === 0) return null
+
+  const { icon: Glyph, color } = agentIdentity(actor.key)
+  const isActive = actor.state === 'active' || actor.state === 'delegating'
+
+  return (
+    <div
+      className='flex animate-slide-in-bottom flex-col'
+      style={{ paddingLeft: actor.depth > 1 ? (actor.depth - 1) * 14 : 0 }}
+    >
+      <div className='flex items-center gap-[8px] py-[3px]'>
+        <span
+          className={cn(
+            'relative flex size-[22px] flex-shrink-0 items-center justify-center rounded-[6px]',
+            isActive && 'animate-pulse'
+          )}
+          style={{ backgroundColor: tint(color, isActive ? '24' : '14') }}
+        >
+          <Glyph className='size-[13px]' style={{ color }} />
+        </span>
+        <span
+          className={cn(
+            'flex-1 text-[13px] font-[500]',
+            isActive ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
+          )}
+        >
+          {actor.label}
+        </span>
+        {actor.state === 'done' ? (
+          <Check className='size-[13px]' style={{ color }} />
+        ) : isActive ? (
+          <Loader className='size-[13px] animate-spin text-[var(--text-icon)]' />
+        ) : null}
+      </div>
+      {visible.map((activity) => (
+        <ActivityChip key={activity.toolCallId} activity={activity} color={color} />
+      ))}
+      {owned.map((artifact) => (
+        <ArtifactPreview key={artifact.resourceId} artifact={artifact} building={building} />
+      ))}
+    </div>
+  )
+})
+
+interface ActivityViewProps {
+  model: ActivityModel
+  className?: string
+}
+
+/**
+ * Characterful agent-lane visualizer: each deployed agent gets a colored glyph
+ * lane that animates in, shows its tools ticking through, and previews the
+ * artifact it's building underneath. The parent promotes the finished artifact
+ * to the full panel on completion.
+ */
+export const ActivityView = memo(function ActivityView({ model, className }: ActivityViewProps) {
+  const accent = SCENE_ACCENT[model.scene]
+  const inFlight = isTurnInFlight(model)
+  const artifacts = Object.values(model.artifacts)
+  const lanes = model.actorOrder.map((id) => model.actors[id]).filter((a): a is Actor => !!a)
+
+  return (
+    <div className={cn('flex h-full flex-col overflow-y-auto px-[20px] py-[18px]', className)}>
+      <div className='mb-[16px] flex items-center gap-[8px]'>
+        <span className='truncate text-[14px] font-[600] text-[var(--text-primary)]'>
+          {model.title ?? 'Mothership'}
+        </span>
+        <span className='flex items-center gap-[6px]'>
+          {inFlight && (
+            <span
+              className='size-[6px] animate-pulse rounded-full'
+              style={{ backgroundColor: accent }}
+            />
+          )}
+          <span className='text-[13px]' style={{ color: inFlight ? accent : 'var(--text-muted)' }}>
+            {SCENE_STATUS[model.scene]}
+          </span>
+        </span>
+      </div>
+
+      {model.attention && (
+        <div
+          className='mb-[16px] rounded-[8px] border px-[12px] py-[10px]'
+          style={{ borderColor: tint(accent, '40') }}
+        >
+          <p className='text-[13px] text-[var(--text-body)]'>
+            {model.attention.kind === 'confirmation'
+              ? 'Waiting for your confirmation…'
+              : model.attention.kind === 'credential'
+                ? `Connect ${model.attention.provider ?? 'an account'} to continue`
+                : model.attention.kind === 'usage-limit'
+                  ? 'Usage limit reached'
+                  : (model.attention.message ?? 'Something went wrong')}
+          </p>
+        </div>
+      )}
+
+      <div className='flex flex-col gap-[12px]'>
+        {lanes.map((actor) => (
+          <ActorLane
+            key={actor.id}
+            actor={actor}
+            activities={model.activities}
+            artifacts={artifacts}
+            building={inFlight}
+          />
+        ))}
+      </div>
+    </div>
+  )
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/agent-identity.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/agent-identity.ts
new file mode 100644
index 00000000000..a112ebc8533
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/agent-identity.ts
@@ -0,0 +1,87 @@
+import type { ComponentType, CSSProperties } from 'react'
+import {
+  Blimp,
+  Bug,
+  Connections,
+  Database,
+  File as FileIcon,
+  Folder,
+  Hammer,
+  Key,
+  Library,
+  Rocket,
+  Search,
+  Table as TableIcon,
+  Wrench,
+} from '@/components/emcn/icons'
+import type { MothershipResourceType } from '@/lib/copilot/resources/types'
+import type { SceneKind } from './activity-model'
+
+type IconComponent = ComponentType<{ className?: string; style?: CSSProperties }>
+
+export interface AgentIdentity {
+  icon: IconComponent
+  /** Accent color (hex) for the glyph tint + lane accent. */
+  color: string
+}
+
+const DEFAULT_IDENTITY: AgentIdentity = { icon: Wrench, color: '#8B8B8B' }
+
+/**
+ * Per-subagent visual identity. Colors reuse the existing chat accent palette
+ * (see special-tags thinking blocks) so the visualizer feels native.
+ */
+export const AGENT_IDENTITY: Record<string, AgentIdentity> = {
+  mothership: { icon: Blimp, color: '#6E79FF' },
+  research: { icon: Search, color: '#2ABBF8' },
+  table: { icon: TableIcon, color: '#00C48C' },
+  workflow: { icon: Connections, color: '#7B61FF' },
+  deploy: { icon: Rocket, color: '#FF7A45' },
+  file: { icon: FileIcon, color: '#F5A623' },
+  knowledge: { icon: Library, color: '#9B5DE5' },
+  debug: { icon: Bug, color: '#FF4E6A' },
+  auth: { icon: Key, color: '#FFCC02' },
+  agent: { icon: Wrench, color: '#4C9AFF' },
+  job: { icon: Hammer, color: '#00B8A9' },
+  custom_tool: { icon: Hammer, color: '#FA4EDF' },
+  superagent: { icon: Rocket, color: '#6E79FF' },
+}
+
+export function agentIdentity(key: string): AgentIdentity {
+  return AGENT_IDENTITY[key] ?? DEFAULT_IDENTITY
+}
+
+export const SCENE_ACCENT: Record<SceneKind, string> = {
+  idle: '#8B8B8B',
+  thinking: '#6E79FF',
+  'workflow-build': '#7B61FF',
+  deploy: '#FF7A45',
+  authoring: '#F5A623',
+  research: '#2ABBF8',
+  data: '#00C48C',
+  knowledge: '#9B5DE5',
+  execution: '#4C9AFF',
+  debug: '#FF4E6A',
+  connect: '#FFCC02',
+  code: '#4C9AFF',
+  'tool-build': '#FA4EDF',
+  job: '#00B8A9',
+  composite: '#6E79FF',
+}
+
+const ARTIFACT_ICON: Record<string, IconComponent> = {
+  table: TableIcon,
+  file: FileIcon,
+  workflow: Connections,
+  knowledgebase: Library,
+  folder: Folder,
+  filefolder: Folder,
+  log: Library,
+  integration: Database,
+  generic: Wrench,
+  task: Wrench,
+}
+
+export function artifactIcon(type: MothershipResourceType): IconComponent {
+  return ARTIFACT_ICON[type] ?? FileIcon
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/index.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/index.ts
new file mode 100644
index 00000000000..9e2bd3fe62a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/index.ts
@@ -0,0 +1,22 @@
+export {
+  type ActivityArtifact,
+  type ActivityItem,
+  type ActivityModel,
+  type ActivityState,
+  type Actor,
+  type ActorState,
+  type AttentionState,
+  activityReducer,
+  createInitialActivityModel,
+  isTurnInFlight,
+  MOTHERSHIP_ACTOR_ID,
+  reduceActivity,
+  type SceneKind,
+  type Topology,
+  type TurnPhase,
+  type VerbFamily,
+} from './activity-model'
+export { ActivityView } from './activity-view'
+export { ChatActivity } from './inline-activity'
+export { ParallelAgents } from './parallel-agents'
+export { ShimmerStatus } from './shimmer-status'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/inline-activity.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/inline-activity.tsx
new file mode 100644
index 00000000000..d971d72b150
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/inline-activity.tsx
@@ -0,0 +1,163 @@
+'use client'
+
+import { memo, useState } from 'react'
+import {
+  BookOpen,
+  Check,
+  ChevronDown,
+  Database,
+  File as FileIcon,
+  Loader,
+  Lock,
+  Search,
+  Wrench,
+  X,
+} from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+import {
+  type ActivityItem,
+  type ActivityModel,
+  type ActivityState,
+  type Actor,
+  MOTHERSHIP_ACTOR_ID,
+  type VerbFamily,
+} from './activity-model'
+import { agentIdentity } from './agent-identity'
+
+const FAMILY_ICON: Record<VerbFamily, React.ComponentType<{ className?: string }>> = {
+  search: Search,
+  read: BookOpen,
+  write: FileIcon,
+  execute: Wrench,
+  data: Database,
+  connect: Lock,
+  memory: BookOpen,
+  housekeeping: Wrench,
+  agent: Wrench,
+  other: Wrench,
+}
+
+function isActivityDone(state: ActivityState): boolean {
+  return state !== 'generating' && state !== 'executing'
+}
+
+function ToolStatusIcon({ state, color }: { state: ActivityState; color: string }) {
+  if (state === 'success') return <Check className='size-[13px]' style={{ color }} />
+  if (state === 'error' || state === 'rejected')
+    return <X className='size-[13px] text-[var(--text-tertiary)]' />
+  if (state === 'cancelled' || state === 'skipped')
+    return <X className='size-[13px] text-[var(--text-muted)]' />
+  return <Loader className='size-[13px] animate-spin text-[var(--text-tertiary)]' />
+}
+
+const InlineToolRow = memo(function InlineToolRow({
+  activity,
+  color,
+}: {
+  activity: ActivityItem
+  color: string
+}) {
+  const Icon = FAMILY_ICON[activity.family]
+  return (
+    <div className='flex animate-stream-fade-in items-center gap-[8px] pl-[26px]'>
+      <Icon className='size-[13px] flex-shrink-0 text-[var(--text-tertiary)]' />
+      <span className='truncate text-[13px] text-[var(--text-secondary)] leading-[20px]'>
+        {activity.verb}
+      </span>
+      <span className='ml-auto flex-shrink-0'>
+        <ToolStatusIcon state={activity.state} color={color} />
+      </span>
+    </div>
+  )
+})
+
+const InlineAgentGroup = memo(function InlineAgentGroup({
+  actor,
+  activities,
+}: {
+  actor: Actor
+  activities: ActivityItem[]
+}) {
+  const visible = activities.filter((a) => a.ownerActorId === actor.id && !a.hidden)
+  const isActive = actor.state === 'active' || actor.state === 'delegating'
+  const { icon: Glyph, color } = agentIdentity(actor.key)
+
+  // Expanded while the agent works; collapses once it finishes (user can reopen).
+  const [overrideOpen, setOverrideOpen] = useState<boolean | null>(null)
+  const expanded = overrideOpen ?? isActive
+
+  if (actor.id === MOTHERSHIP_ACTOR_ID && visible.length === 0) return null
+
+  return (
+    <div className='flex animate-slide-in-bottom flex-col gap-[6px]'>
+      <button
+        type='button'
+        onClick={() => setOverrideOpen(!expanded)}
+        className='flex items-center gap-[8px]'
+      >
+        <span
+          className={cn(
+            'flex size-[20px] flex-shrink-0 items-center justify-center rounded-[5px]',
+            isActive && 'animate-pulse'
+          )}
+          style={{ backgroundColor: `${color}${isActive ? '24' : '14'}` }}
+        >
+          <Glyph className='size-[12px]' style={{ color }} />
+        </span>
+        <span
+          className={cn(
+            'text-[14px]',
+            isActive ? 'text-[var(--text-body)]' : 'text-[var(--text-secondary)]'
+          )}
+        >
+          {actor.label}
+        </span>
+        {actor.state === 'done' && <Check className='size-[13px]' style={{ color }} />}
+        {visible.length > 0 && (
+          <ChevronDown
+            className={cn(
+              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              !expanded && '-rotate-90'
+            )}
+          />
+        )}
+      </button>
+      {expanded && visible.length > 0 && (
+        <div className='flex flex-col gap-[5px] pb-[2px]'>
+          {visible.map((activity) => (
+            <InlineToolRow key={activity.toolCallId} activity={activity} color={color} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})
+
+interface ChatActivityProps {
+  model: ActivityModel
+}
+
+/**
+ * Inline-in-chat agent activity: the deployed agents and their tools, rendered
+ * within an assistant message (chat width). Evolves the existing AgentGroup
+ * with per-agent color identity + deploy-in motion. No artifact preview — the
+ * artifact materializes in the right panel, not here.
+ */
+export const ChatActivity = memo(function ChatActivity({ model }: ChatActivityProps) {
+  const lanes = model.actorOrder.map((id) => model.actors[id]).filter((a): a is Actor => !!a)
+  const showThinking = model.phase === 'thinking' && model.activities.length === 0
+
+  return (
+    <div className='flex flex-col gap-[12px]'>
+      {showThinking && (
+        <div className='flex items-center gap-[8px]'>
+          <Loader className='size-[14px] animate-spin text-[var(--text-icon)]' />
+          <span className='text-[14px] text-[var(--text-secondary)]'>Thinking…</span>
+        </div>
+      )}
+      {lanes.map((actor) => (
+        <InlineAgentGroup key={actor.id} actor={actor} activities={model.activities} />
+      ))}
+    </div>
+  )
+})
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/parallel-agents.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/parallel-agents.tsx
new file mode 100644
index 00000000000..61dc409f637
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/parallel-agents.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { ShimmerStatus } from './shimmer-status'
+
+interface ParallelAgent {
+  label: string
+  phrase: string
+}
+
+interface ParallelAgentsProps {
+  /** Compact summary line, e.g. "Profile scan · 2 agents". */
+  header: string
+  agents: ParallelAgent[]
+  /** Animate the per-agent shimmer (true while concurrently working). */
+  active?: boolean
+}
+
+/**
+ * The ONLY sanctioned breakout: shown solely while ≥2 agents run concurrently,
+ * because a single line can't express concurrency. Each agent still gets just
+ * one shimmering line (the atom) under a shared header. Collapses back to a
+ * single line the instant agents stop running in parallel.
+ */
+export function ParallelAgents({ header, agents, active = true }: ParallelAgentsProps) {
+  return (
+    <div className='flex animate-stream-fade-in flex-col gap-[12px]'>
+      <span className='text-[13px] text-[var(--text-muted)]'>{header}</span>
+      <div className='flex flex-col gap-[14px] border-[var(--divider)] border-l pl-[16px]'>
+        {agents.map((a) => (
+          <div key={a.label} className='flex flex-col gap-[3px]'>
+            <span className='text-[13px] text-[var(--text-secondary)]'>{a.label}</span>
+            <ShimmerStatus text={a.phrase} active={active} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/shimmer-status.module.css b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/shimmer-status.module.css
new file mode 100644
index 00000000000..983e063897a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/shimmer-status.module.css
@@ -0,0 +1,41 @@
+.shimmer {
+  background-image: linear-gradient(
+    90deg,
+    var(--text-primary) 0%,
+    var(--text-secondary) 45%,
+    var(--text-muted) 75%
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.active {
+  background-image: linear-gradient(
+    90deg,
+    var(--text-muted) 0%,
+    var(--text-muted) 35%,
+    var(--text-primary) 50%,
+    var(--text-muted) 65%,
+    var(--text-muted) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer-sweep 2.4s linear infinite;
+}
+
+@keyframes shimmer-sweep {
+  from {
+    background-position: 150% 0;
+  }
+  to {
+    background-position: -50% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .active {
+    animation: none;
+    background-image: linear-gradient(90deg, var(--text-primary), var(--text-muted));
+    background-size: 100% 100%;
+  }
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/shimmer-status.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/shimmer-status.tsx
new file mode 100644
index 00000000000..90a8f1fa558
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/shimmer-status.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { cn } from '@/lib/core/utils/cn'
+import styles from './shimmer-status.module.css'
+
+interface ShimmerStatusProps {
+  /** The single status line. Swapping it crossfades to the new text. */
+  text: string
+  /** Animate the shimmer sweep (true while working; false when paused/idle). */
+  active?: boolean
+  className?: string
+}
+
+/**
+ * A single shimmering status line that changes as work progresses — the entire
+ * in-progress chat surface. Deliberately replaces the broken-out agent lanes /
+ * tool rows: one line, no bullets, no stacking. Re-keys on `text` so each new
+ * phrase fades in.
+ */
+export function ShimmerStatus({ text, active = true, className }: ShimmerStatusProps) {
+  return (
+    <span
+      key={text}
+      className={cn(
+        styles.shimmer,
+        active && styles.active,
+        'inline-block animate-stream-fade-in text-[15px] leading-[24px]',
+        className
+      )}
+    >
+      {text}
+    </span>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
index 889ac5ada6b..2050d4d5c2f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
@@ -14,6 +14,7 @@ import {
   Tooltip,
 } from '@/components/emcn'
 import { Folder, Plus, Workflow } from '@/components/emcn/icons'
+import { MOTHERSHIP_PAGES, type MothershipPageId } from '@/lib/copilot/resources/types'
 import { cn } from '@/lib/core/utils/cn'
 import { getResourceConfig } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
 import {
@@ -83,6 +84,14 @@ export function useAvailableResources(
   return useMemo(() => {
     const excluded = new Set<MothershipResourceType>(excludeTypes ?? [])
     const groups: AvailableItemsByType[] = [
+      {
+        type: 'page' as const,
+        items: (Object.keys(MOTHERSHIP_PAGES) as MothershipPageId[]).map((id) => ({
+          id,
+          name: MOTHERSHIP_PAGES[id],
+          isOpen: existingKeys.has(`page:${id}`),
+        })),
+      },
       {
         type: 'workflow' as const,
         items: workflows.map((w) => ({
@@ -379,7 +388,10 @@ export function AddResourceDropdown({
   const [activeIndex, setActiveIndex] = useState(0)
   const available = useAvailableResources(workspaceId, existingKeys, [
     ...(excludeTypes ?? []),
+    // Never offered as tabs: integrations attach via @-mention and chats have
+    // no embedded tab view — ResourceContent cannot render either type.
     'integration',
+    'task',
   ])
   const handleOpenChange = (next: boolean) => {
     setOpen(next)
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
index e3e07a3517d..94d1a17755c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -2,9 +2,11 @@
 
 import { lazy, memo, Suspense, useEffect, useMemo, useRef } from 'react'
 import { createLogger } from '@sim/logger'
+import { stripVersionSuffix } from '@sim/utils/string'
 import { useRouter } from 'next/navigation'
 import { Button, PlayOutline, Skeleton, Tooltip } from '@/components/emcn'
 import {
+  Connections,
   Download,
   FileX,
   Folder as FolderIcon,
@@ -14,6 +16,7 @@ import {
   Workflow as WorkflowIcon,
   WorkflowX,
 } from '@/components/emcn/icons'
+import { getDocumentIcon } from '@/components/icons/document-icons'
 import { isApiClientError } from '@/lib/api/client/errors'
 import type { FilePreviewSession } from '@/lib/copilot/request/session'
 import {
@@ -21,6 +24,7 @@ import {
   markRunToolManuallyStopped,
   reportManualRunToolStop,
 } from '@/lib/copilot/tools/client/run-tool-execution'
+import { INTEGRATIONS, type Integration } from '@/lib/integrations'
 import { triggerFileDownload } from '@/lib/uploads/client/download'
 import { getFileExtension, getMimeTypeFromExtension } from '@/lib/uploads/utils/file-utils'
 import {
@@ -28,6 +32,7 @@ import {
   type PreviewMode,
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
 import { GenericResourceContent } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/generic-resource-content'
+import { getResourceConfig } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
 import {
   RESOURCE_TAB_ICON_BUTTON_CLASS,
   RESOURCE_TAB_ICON_CLASS,
@@ -50,6 +55,7 @@ import { useFolders } from '@/hooks/queries/folders'
 import { useLogDetail } from '@/hooks/queries/logs'
 import { downloadTableExport } from '@/hooks/queries/tables'
 import { useWorkflows } from '@/hooks/queries/workflows'
+import { useWorkspaceFileFolders } from '@/hooks/queries/workspace-file-folders'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { useSettingsNavigation } from '@/hooks/use-settings-navigation'
 import { useExecutionStore } from '@/stores/execution/store'
@@ -57,6 +63,37 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const Workflow = lazy(() => import('@/app/workspace/[workspaceId]/w/[workflowId]/workflow'))
 
+const Tables = lazy(() =>
+  import('@/app/workspace/[workspaceId]/tables/tables').then((m) => ({ default: m.Tables }))
+)
+const Knowledge = lazy(() =>
+  import('@/app/workspace/[workspaceId]/knowledge/knowledge').then((m) => ({
+    default: m.Knowledge,
+  }))
+)
+const Logs = lazy(() => import('@/app/workspace/[workspaceId]/logs/logs'))
+const ScheduledTasks = lazy(() =>
+  import('@/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks').then((m) => ({
+    default: m.ScheduledTasks,
+  }))
+)
+const IntegrationBlockDetail = lazy(() =>
+  import('@/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail').then(
+    (m) => ({ default: m.IntegrationBlockDetail })
+  )
+)
+
+/**
+ * Resolves an integration catalog entry from a resource tab id (the block's
+ * registry type). Catalog types may carry version suffixes (`gmail_v2`) while
+ * tab ids may use base types, so both forms are matched.
+ */
+function findIntegrationByBlockType(blockType: string): Integration | undefined {
+  return INTEGRATIONS.find(
+    (i) => i.type === blockType || stripVersionSuffix(i.type) === stripVersionSuffix(blockType)
+  )
+}
+
 const LOADING_SKELETON = (
   <div className='flex h-full flex-col gap-2 p-6'>
     <Skeleton className='h-[16px] w-[60%]' />
@@ -73,12 +110,15 @@ interface ResourceContentProps {
   genericResourceData?: GenericResourceData
   previewContextKey?: string
   onNotFound?: (resourceId: string) => void
+  /** Opens another resource as a tab (used by embedded pages to open details in-panel). */
+  onAddResource?: (resource: MothershipResource) => void
 }
 
 /**
  * Renders the content for the currently active mothership resource.
- * Handles table, file, and workflow resource types with appropriate
- * embedded rendering for each.
+ * Each persistable resource type gets an embedded view (table, file,
+ * workflow, knowledge base, folder, file folder, log, integration, page);
+ * types without one fall back to an explanatory placeholder panel.
  */
 const STREAMING_EPOCH = new Date(0)
 
@@ -90,6 +130,7 @@ export const ResourceContent = memo(function ResourceContent({
   genericResourceData,
   previewContextKey,
   onNotFound,
+  onAddResource,
 }: ResourceContentProps) {
   const streamFileName = previewSession?.fileName || 'file.md'
   const syntheticFile = useMemo(() => {
@@ -188,6 +229,21 @@ export const ResourceContent = memo(function ResourceContent({
     case 'folder':
       return <EmbeddedFolder key={resource.id} workspaceId={workspaceId} folderId={resource.id} />
 
+    case 'filefolder':
+      return (
+        <EmbeddedFileFolder
+          key={resource.id}
+          workspaceId={workspaceId}
+          folderId={resource.id}
+          onAddResource={onAddResource}
+        />
+      )
+
+    case 'integration':
+      return (
+        <EmbeddedIntegration key={resource.id} workspaceId={workspaceId} blockType={resource.id} />
+      )
+
     case 'log':
       return (
         <EmbeddedLog
@@ -198,16 +254,95 @@ export const ResourceContent = memo(function ResourceContent({
         />
       )
 
+    case 'page':
+      return <EmbeddedPage key={resource.id} pageId={resource.id} onAddResource={onAddResource} />
+
     case 'generic':
       return (
         <GenericResourceContent key={resource.id} data={genericResourceData ?? { entries: [] }} />
       )
 
     default:
-      return null
+      return <UnsupportedResourceContent key={resource.id} resource={resource} />
   }
 })
 
+interface UnsupportedResourceContentProps {
+  resource: MothershipResource
+}
+
+/**
+ * Fallback for persisted tabs whose type has no embedded view (e.g. legacy
+ * `task` tabs). Shown instead of a blank panel so the tab stays explainable
+ * and removable.
+ */
+function UnsupportedResourceContent({ resource }: UnsupportedResourceContentProps) {
+  const Icon = getResourceConfig(resource.type).icon
+  return (
+    <div className='flex h-full flex-col items-center justify-center gap-3'>
+      <Icon className='size-[32px] text-[var(--text-icon)]' />
+      <div className='flex flex-col items-center gap-1'>
+        <h2 className='font-medium text-[20px] text-[var(--text-primary)]'>{resource.title}</h2>
+        <p className='text-[var(--text-body)] text-small'>
+          This resource doesn't have an embedded view
+        </p>
+      </div>
+    </div>
+  )
+}
+
+interface EmbeddedPageProps {
+  pageId: string
+  onAddResource?: (resource: MothershipResource) => void
+}
+
+/**
+ * Renders a workspace area page (Tables, Knowledge Base, Logs, Scheduled
+ * Tasks) inside the chat's resource panel. Detail navigation is intercepted
+ * where the standalone page would route away: opening a table or knowledge
+ * base adds it as a sibling resource tab instead.
+ */
+function EmbeddedPage({ pageId, onAddResource }: EmbeddedPageProps) {
+  const content = (() => {
+    switch (pageId) {
+      case 'tables':
+        return (
+          <Tables
+            onOpenTable={(tableId, tableName) =>
+              onAddResource?.({ type: 'table', id: tableId, title: tableName })
+            }
+          />
+        )
+      case 'knowledge':
+        return (
+          <Knowledge
+            onOpenKnowledgeBase={(knowledgeBaseId, knowledgeBaseName) =>
+              onAddResource?.({
+                type: 'knowledgebase',
+                id: knowledgeBaseId,
+                title: knowledgeBaseName,
+              })
+            }
+          />
+        )
+      case 'logs':
+        return <Logs />
+      case 'scheduled-tasks':
+        return <ScheduledTasks />
+      default:
+        return null
+    }
+  })()
+
+  if (!content) return null
+
+  return (
+    <div className='flex h-full flex-col overflow-hidden'>
+      <Suspense fallback={LOADING_SKELETON}>{content}</Suspense>
+    </div>
+  )
+}
+
 interface ResourceActionsProps {
   workspaceId: string
   resource: MothershipResource
@@ -233,6 +368,12 @@ export function ResourceActions({ workspaceId, resource }: ResourceActionsProps)
       )
     case 'log':
       return <EmbeddedLogActions workspaceId={workspaceId} logId={resource.id} />
+    case 'page':
+      return <EmbeddedPageActions workspaceId={workspaceId} pageId={resource.id} />
+    case 'filefolder':
+      return <EmbeddedFileFolderActions workspaceId={workspaceId} folderId={resource.id} />
+    case 'integration':
+      return <EmbeddedIntegrationActions workspaceId={workspaceId} blockType={resource.id} />
     case 'folder':
     case 'generic':
       return null
@@ -241,6 +382,102 @@ export function ResourceActions({ workspaceId, resource }: ResourceActionsProps)
   }
 }
 
+interface EmbeddedFileFolderActionsProps {
+  workspaceId: string
+  folderId: string
+}
+
+function EmbeddedFileFolderActions({ workspaceId, folderId }: EmbeddedFileFolderActionsProps) {
+  const router = useRouter()
+
+  const handleOpenInFiles = () => {
+    router.push(`/workspace/${workspaceId}/files?folderId=${encodeURIComponent(folderId)}`)
+  }
+
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          variant='subtle'
+          onClick={handleOpenInFiles}
+          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+          aria-label='Open in files'
+        >
+          <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='bottom'>
+        <p>Open in files</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
+
+interface EmbeddedIntegrationActionsProps {
+  workspaceId: string
+  blockType: string
+}
+
+function EmbeddedIntegrationActions({ workspaceId, blockType }: EmbeddedIntegrationActionsProps) {
+  const router = useRouter()
+  const integration = useMemo(() => findIntegrationByBlockType(blockType), [blockType])
+
+  if (!integration) return null
+
+  const handleOpenIntegration = () => {
+    router.push(`/workspace/${workspaceId}/integrations/${integration.slug}`)
+  }
+
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          variant='subtle'
+          onClick={handleOpenIntegration}
+          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+          aria-label='Open integration'
+        >
+          <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='bottom'>
+        <p>Open integration</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
+
+interface EmbeddedPageActionsProps {
+  workspaceId: string
+  pageId: string
+}
+
+function EmbeddedPageActions({ workspaceId, pageId }: EmbeddedPageActionsProps) {
+  const router = useRouter()
+
+  const handleOpenPage = () => {
+    router.push(`/workspace/${workspaceId}/${pageId}`)
+  }
+
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          variant='subtle'
+          onClick={handleOpenPage}
+          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+          aria-label='Open full page'
+        >
+          <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='bottom'>
+        <p>Open full page</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
+
 interface EmbeddedWorkflowActionsProps {
   workspaceId: string
   workflowId: string
@@ -626,6 +863,114 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
   )
 }
 
+interface EmbeddedFileFolderProps {
+  workspaceId: string
+  folderId: string
+  onAddResource?: (resource: MothershipResource) => void
+}
+
+/**
+ * Lists a workspace file folder's subfolders and files inside the resource
+ * panel. Selecting an entry opens it as a sibling resource tab rather than
+ * navigating away from the chat.
+ */
+function EmbeddedFileFolder({ workspaceId, folderId, onAddResource }: EmbeddedFileFolderProps) {
+  const { data: folderList, isPending: isFoldersPending } = useWorkspaceFileFolders(workspaceId)
+  const { data: files = [] } = useWorkspaceFiles(workspaceId)
+
+  const folder = (folderList ?? []).find((f) => f.id === folderId)
+  const subfolders = (folderList ?? []).filter((f) => f.parentId === folderId)
+  const folderFiles = files.filter((f) => f.folderId === folderId)
+
+  if (isFoldersPending) return LOADING_SKELETON
+
+  if (!folder) {
+    return (
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
+        <FolderIcon className='size-[32px] text-[var(--text-icon)]' />
+        <div className='flex flex-col items-center gap-1'>
+          <h2 className='font-medium text-[20px] text-[var(--text-primary)]'>Folder not found</h2>
+          <p className='text-[var(--text-body)] text-small'>
+            This folder may have been deleted or moved
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex h-full flex-col overflow-y-auto p-6'>
+      <h2 className='mb-4 font-medium text-[16px] text-[var(--text-primary)]'>{folder.name}</h2>
+      {subfolders.length === 0 && folderFiles.length === 0 ? (
+        <p className='text-[13px] text-[var(--text-muted)]'>This folder is empty</p>
+      ) : (
+        <div className='flex flex-col gap-1'>
+          {subfolders.map((sub) => (
+            <button
+              key={sub.id}
+              type='button'
+              onClick={() => onAddResource?.({ type: 'filefolder', id: sub.id, title: sub.name })}
+              className='flex items-center gap-2 rounded-[6px] px-3 py-2 text-left transition-colors hover:bg-[var(--surface-4)]'
+            >
+              <FolderIcon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+              <span className='truncate text-[13px] text-[var(--text-primary)]'>{sub.name}</span>
+            </button>
+          ))}
+          {folderFiles.map((file) => {
+            const DocIcon = getDocumentIcon('', file.name)
+            return (
+              <button
+                key={file.id}
+                type='button'
+                onClick={() => onAddResource?.({ type: 'file', id: file.id, title: file.name })}
+                className='flex items-center gap-2 rounded-[6px] px-3 py-2 text-left transition-colors hover:bg-[var(--surface-4)]'
+              >
+                <DocIcon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                <span className='truncate text-[13px] text-[var(--text-primary)]'>{file.name}</span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface EmbeddedIntegrationProps {
+  workspaceId: string
+  blockType: string
+}
+
+/**
+ * Renders the integration catalog detail page for an integration resource tab,
+ * minus the full-page back-link chrome.
+ */
+function EmbeddedIntegration({ workspaceId, blockType }: EmbeddedIntegrationProps) {
+  const integration = useMemo(() => findIntegrationByBlockType(blockType), [blockType])
+
+  if (!integration) {
+    return (
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
+        <Connections className='size-[32px] text-[var(--text-icon)]' />
+        <div className='flex flex-col items-center gap-1'>
+          <h2 className='font-medium text-[20px] text-[var(--text-primary)]'>
+            Integration not found
+          </h2>
+          <p className='text-[var(--text-body)] text-small'>
+            This integration may no longer be available
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <Suspense fallback={LOADING_SKELETON}>
+      <IntegrationBlockDetail integration={integration} workspaceId={workspaceId} embedded />
+    </Suspense>
+  )
+}
+
 interface EmbeddedLogProps {
   workspaceId: string
   logId: string
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
index d41ba2a8770..5ca50dc623e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -3,10 +3,12 @@
 import type { ElementType, ReactNode } from 'react'
 import type { QueryClient } from '@tanstack/react-query'
 import {
+  Calendar,
   Connections,
   Database,
   File as FileIcon,
   Folder as FolderIcon,
+  Layout,
   Library,
   Table as TableIcon,
   Task,
@@ -14,6 +16,7 @@ import {
   Workflow,
 } from '@/components/emcn/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
+import { isMothershipPageId, type MothershipPageId } from '@/lib/copilot/resources/types'
 import { cn } from '@/lib/core/utils/cn'
 import type {
   MothershipResource,
@@ -23,6 +26,7 @@ import { getBareIconStyle, type StyleableIcon } from '@/blocks/icon-color'
 import { knowledgeKeys } from '@/hooks/queries/kb/knowledge'
 import { logKeys } from '@/hooks/queries/logs'
 import { mothershipChatKeys } from '@/hooks/queries/mothership-chats'
+import { scheduleKeys } from '@/hooks/queries/schedules'
 import { tableKeys } from '@/hooks/queries/tables'
 import { folderKeys } from '@/hooks/queries/utils/folder-keys'
 import { invalidateWorkflowLists } from '@/hooks/queries/utils/invalidate-workflow-lists'
@@ -93,6 +97,17 @@ function IntegrationDropdownItem({ item }: DropdownItemRenderProps) {
   )
 }
 
+const PAGE_ICONS: Record<MothershipPageId, ElementType> = {
+  tables: TableIcon,
+  knowledge: Database,
+  logs: Library,
+  'scheduled-tasks': Calendar,
+}
+
+function getPageIcon(pageId: string): ElementType {
+  return isMothershipPageId(pageId) ? PAGE_ICONS[pageId] : Layout
+}
+
 function LogDropdownItem({ item }: DropdownItemRenderProps) {
   const workflowName = (item.workflowName as string) ?? item.name
   const time = (item.time as string) ?? ''
@@ -201,6 +216,18 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
     ),
     renderDropdownItem: (props) => <IntegrationDropdownItem {...props} />,
   },
+  page: {
+    type: 'page',
+    label: 'Pages',
+    icon: Layout,
+    renderTabIcon: (resource, className) => {
+      const PageIcon = getPageIcon(resource.id)
+      return <PageIcon className={cn(className, 'text-[var(--text-icon)]')} />
+    },
+    renderDropdownItem: (props) => (
+      <IconDropdownItem {...props} icon={getPageIcon(props.item.id)} />
+    ),
+  },
 } as const
 
 export const RESOURCE_TYPES = Object.values(RESOURCE_REGISTRY)
@@ -251,6 +278,12 @@ const RESOURCE_INVALIDATORS: Record<
    * invalidate when one is added.
    */
   integration: () => {},
+  page: (qc, wId, id) => {
+    if (id === 'tables') qc.invalidateQueries({ queryKey: tableKeys.lists() })
+    if (id === 'knowledge') qc.invalidateQueries({ queryKey: knowledgeKeys.lists() })
+    if (id === 'logs') qc.invalidateQueries({ queryKey: logKeys.lists() })
+    if (id === 'scheduled-tasks') qc.invalidateQueries({ queryKey: scheduleKeys.list(wId) })
+  },
 }
 
 /**
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
index 3cf2bcc2a4e..71367deefb4 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts
@@ -94,6 +94,11 @@ const RESOURCE_TO_CONTEXT: Record<
   task: (r) => ({ kind: 'past_chat', chatId: r.id, label: r.title }),
   log: (r) => ({ kind: 'logs', executionId: r.id, label: r.title }),
   integration: (r) => ({ kind: 'integration', blockType: r.id, label: r.title }),
+  page: (r) => {
+    if (r.id === 'logs') return { kind: 'logs', label: r.title }
+    if (r.id === 'knowledge') return { kind: 'knowledge', label: r.title }
+    return { kind: 'docs', label: r.title }
+  },
   generic: (r) => ({ kind: 'docs', label: r.title }),
 }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
index 827e1e7684a..6e0da9b5413 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
@@ -37,9 +37,15 @@ const TEMPLATE_TILE_Z = ['z-30', 'z-20', 'z-10'] as const
 interface IntegrationBlockDetailProps {
   integration: Integration
   workspaceId: string
+  /** Hides full-page chrome (the back link) when rendered inside the chat resource panel. */
+  embedded?: boolean
 }
 
-export function IntegrationBlockDetail({ integration, workspaceId }: IntegrationBlockDetailProps) {
+export function IntegrationBlockDetail({
+  integration,
+  workspaceId,
+  embedded = false,
+}: IntegrationBlockDetailProps) {
   useOAuthReturnRouter()
   const router = useRouter()
   const pathname = usePathname()
@@ -118,9 +124,11 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
       <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
-        <ChipLink href={`/workspace/${workspaceId}/integrations`} leftIcon={ArrowLeft}>
-          Integrations
-        </ChipLink>
+        {!embedded && (
+          <ChipLink href={`/workspace/${workspaceId}/integrations`} leftIcon={ArrowLeft}>
+            Integrations
+          </ChipLink>
+        )}
         <div className='ml-auto flex items-center'>
           {oauthService ? (
             hasServiceAccount ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
index 41b1e3a192e..4736816e780 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
@@ -119,17 +119,26 @@ function connectorCell(connectorTypes?: string[]): ResourceCell {
   }
 }
 
-export function Knowledge() {
+interface KnowledgeProps {
+  /**
+   * When provided (embedded in a chat's resource panel), opening a knowledge
+   * base goes through this callback instead of navigating to its route.
+   */
+  onOpenKnowledgeBase?: (knowledgeBaseId: string, knowledgeBaseName: string) => void
+}
+
+export function Knowledge({ onOpenKnowledgeBase }: KnowledgeProps) {
   const params = useParams()
   const router = useRouter()
   const workspaceId = params.workspaceId as string
 
   const { config: permissionConfig } = usePermissionConfig()
+  const isEmbedded = Boolean(onOpenKnowledgeBase)
   useEffect(() => {
-    if (permissionConfig.hideKnowledgeBaseTab) {
+    if (permissionConfig.hideKnowledgeBaseTab && !isEmbedded) {
       router.replace(`/workspace/${workspaceId}`)
     }
-  }, [permissionConfig.hideKnowledgeBaseTab, router, workspaceId])
+  }, [permissionConfig.hideKnowledgeBaseTab, isEmbedded, router, workspaceId])
 
   const { knowledgeBases, isLoading, error } = useKnowledgeBasesList(workspaceId)
   const { data: members } = useWorkspaceMembersQuery(workspaceId)
@@ -323,10 +332,14 @@ export function Knowledge() {
       if (isRowContextMenuOpenRef.current) return
       const kb = knowledgeBasesRef.current.find((k) => k.id === rowId)
       if (!kb) return
+      if (onOpenKnowledgeBase) {
+        onOpenKnowledgeBase(kb.id, kb.name)
+        return
+      }
       const urlParams = new URLSearchParams({ kbName: kb.name })
       router.push(`/workspace/${workspaceId}/knowledge/${rowId}?${urlParams.toString()}`)
     },
-    [router, workspaceId]
+    [onOpenKnowledgeBase, router, workspaceId]
   )
 
   const handleRowContextMenu = useCallback(
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
index a93a65435c6..20553893a0e 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/tables.tsx
@@ -61,17 +61,37 @@ const COLUMNS: ResourceColumn[] = [
   { id: 'updated', header: 'Last Updated' },
 ]
 
-export function Tables() {
+interface TablesProps {
+  /**
+   * When provided (embedded in a chat's resource panel), opening a table goes
+   * through this callback instead of navigating to the table's route.
+   */
+  onOpenTable?: (tableId: string, tableName: string) => void
+}
+
+export function Tables({ onOpenTable }: TablesProps) {
   const params = useParams()
   const router = useRouter()
   const workspaceId = params.workspaceId as string
 
+  const openTable = useCallback(
+    (tableId: string, tableName: string) => {
+      if (onOpenTable) {
+        onOpenTable(tableId, tableName)
+        return
+      }
+      router.push(`/workspace/${workspaceId}/tables/${tableId}`)
+    },
+    [onOpenTable, router, workspaceId]
+  )
+
   const { config: permissionConfig } = usePermissionConfig()
+  const isEmbedded = Boolean(onOpenTable)
   useEffect(() => {
-    if (permissionConfig.hideTablesTab) {
+    if (permissionConfig.hideTablesTab && !isEmbedded) {
       router.replace(`/workspace/${workspaceId}`)
     }
-  }, [permissionConfig.hideTablesTab, router, workspaceId])
+  }, [permissionConfig.hideTablesTab, isEmbedded, router, workspaceId])
 
   const userPermissions = useUserPermissionsContext()
 
@@ -385,10 +405,11 @@ export function Tables() {
   const handleRowClick = useCallback(
     (rowId: string) => {
       if (!isRowContextMenuOpen) {
-        router.push(`/workspace/${workspaceId}/tables/${rowId}`)
+        const table = tables.find((t) => t.id === rowId)
+        openTable(rowId, table?.name ?? 'Table')
       }
     },
-    [isRowContextMenuOpen, router, workspaceId]
+    [isRowContextMenuOpen, tables, openTable]
   )
 
   const handleRowContextMenu = useCallback(
@@ -437,9 +458,9 @@ export function Tables() {
             const result = await uploadCsv.mutateAsync({ workspaceId, file: csvFiles[i] })
 
             if (csvFiles.length === 1) {
-              const tableId = result?.data?.table?.id
-              if (tableId) {
-                router.push(`/workspace/${workspaceId}/tables/${tableId}`)
+              const createdTable = result?.data?.table
+              if (createdTable?.id) {
+                openTable(createdTable.id, createdTable.name ?? csvFiles[i].name)
               }
             }
           } catch (err) {
@@ -468,7 +489,7 @@ export function Tables() {
         }
       }
     },
-    [workspaceId, router, uploadCsv]
+    [workspaceId, uploadCsv, openTable]
   )
 
   const handleListUploadCsv = useCallback(() => {
@@ -496,12 +517,12 @@ export function Tables() {
       })
       const tableId = result?.data?.table?.id
       if (tableId) {
-        router.push(`/workspace/${workspaceId}/tables/${tableId}`)
+        openTable(tableId, name)
       }
     } catch (err) {
       logger.error('Failed to create table:', err)
     }
-  }, [tables, createTable, router, workspaceId])
+  }, [tables, createTable, openTable])
 
   return (
     <>
diff --git a/apps/sim/lib/api/contracts/copilot.ts b/apps/sim/lib/api/contracts/copilot.ts
index 3970246cffb..93017dbc9c2 100644
--- a/apps/sim/lib/api/contracts/copilot.ts
+++ b/apps/sim/lib/api/contracts/copilot.ts
@@ -109,7 +109,10 @@ const copilotResourceTypeSchema = z.enum([
   'workflow',
   'knowledgebase',
   'folder',
+  'filefolder',
   'log',
+  'integration',
+  'page',
 ])
 
 export const addCopilotChatResourceBodySchema = z.object({
diff --git a/apps/sim/lib/copilot/chat/post.ts b/apps/sim/lib/copilot/chat/post.ts
index f3b8e4a9259..3b293218a4d 100644
--- a/apps/sim/lib/copilot/chat/post.ts
+++ b/apps/sim/lib/copilot/chat/post.ts
@@ -75,6 +75,8 @@ const ResourceAttachmentSchema = z.object({
     'filefolder',
     'task',
     'log',
+    'integration',
+    'page',
     'generic',
   ]),
   id: z.string().min(1),
@@ -91,6 +93,8 @@ const GENERIC_RESOURCE_TITLE: Record<z.infer<typeof ResourceAttachmentSchema>['t
   filefolder: 'File Folder',
   task: 'Task',
   log: 'Log',
+  integration: 'Integration',
+  page: 'Page',
   generic: 'Resource',
 }
 
diff --git a/apps/sim/lib/copilot/resources/persistence.ts b/apps/sim/lib/copilot/resources/persistence.ts
index 0407e61dd38..6283eb80c8c 100644
--- a/apps/sim/lib/copilot/resources/persistence.ts
+++ b/apps/sim/lib/copilot/resources/persistence.ts
@@ -42,7 +42,15 @@ export async function persistChatResources(
 
     const existing = Array.isArray(chat.resources) ? (chat.resources as ChatResource[]) : []
     const map = new Map<string, ChatResource>()
-    const GENERIC = new Set(['Table', 'File', 'Workflow', 'Knowledge Base', 'Folder', 'Log'])
+    const GENERIC = new Set([
+      'Table',
+      'File',
+      'Workflow',
+      'Knowledge Base',
+      'Folder',
+      'File Folder',
+      'Log',
+    ])
 
     for (const r of existing) {
       map.set(`${r.type}:${r.id}`, r)
diff --git a/apps/sim/lib/copilot/resources/types.ts b/apps/sim/lib/copilot/resources/types.ts
index 9529f980f2b..4aaea54ca24 100644
--- a/apps/sim/lib/copilot/resources/types.ts
+++ b/apps/sim/lib/copilot/resources/types.ts
@@ -8,6 +8,7 @@ export const MothershipResourceType = {
   task: 'task',
   log: 'log',
   integration: 'integration',
+  page: 'page',
   generic: 'generic',
 } as const
 export type MothershipResourceType =
@@ -23,6 +24,22 @@ export function isEphemeralResource(resource: MothershipResource): boolean {
   return resource.type === 'generic' || resource.id === 'streaming-file'
 }
 
+/**
+ * Workspace area pages that can be opened as chat resource tabs.
+ * Keys double as the page's route segment under `/workspace/[workspaceId]/`.
+ */
+export const MOTHERSHIP_PAGES = {
+  tables: 'Tables',
+  knowledge: 'Knowledge Base',
+  logs: 'Logs',
+  'scheduled-tasks': 'Scheduled Tasks',
+} as const
+export type MothershipPageId = keyof typeof MOTHERSHIP_PAGES
+
+export function isMothershipPageId(id: string): id is MothershipPageId {
+  return id in MOTHERSHIP_PAGES
+}
+
 export const VFS_DIR_TO_RESOURCE: Record<string, MothershipResourceType> = {
   tables: 'table',
   files: 'file',
diff --git a/apps/sim/lib/copilot/tools/handlers/resources.ts b/apps/sim/lib/copilot/tools/handlers/resources.ts
index 338f187de3e..26eb2789384 100644
--- a/apps/sim/lib/copilot/tools/handlers/resources.ts
+++ b/apps/sim/lib/copilot/tools/handlers/resources.ts
@@ -1,5 +1,10 @@
 import type { ExecutionContext, ToolCallResult } from '@/lib/copilot/request/types'
-import { type MothershipResource, MothershipResourceType } from '@/lib/copilot/resources/types'
+import {
+  isMothershipPageId,
+  MOTHERSHIP_PAGES,
+  type MothershipResource,
+  MothershipResourceType,
+} from '@/lib/copilot/resources/types'
 import { getKnowledgeBaseById } from '@/lib/knowledge/service'
 import { getLogById } from '@/lib/logs/service'
 import { getTableById } from '@/lib/table/service'
@@ -49,6 +54,14 @@ async function resolveResource(
     resourceId = kb.id
     title = kb.name
   }
+  if (resourceType === 'page') {
+    if (!isMothershipPageId(item.id)) {
+      return {
+        error: `Unknown page "${item.id}". Valid pages: ${Object.keys(MOTHERSHIP_PAGES).join(', ')}.`,
+      }
+    }
+    title = MOTHERSHIP_PAGES[item.id]
+  }
   if (resourceType === 'log') {
     const logRecord = await getLogById(item.id)
     if (!logRecord) return { error: `No log with id "${item.id}".` }

From f9b34f403b72496a07811fc21b33d3f197adb21a Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:08:02 -0500
Subject: [PATCH 05/34] feat(workspace): hidden-sidebar chrome, chat-everywhere
 title bars, panel design pass

Sidebar / chrome:
- Remove the sidebar's Chats section and the collapsed icon rail entirely;
  collapsing now hides the menu to zero width and the content goes full-bleed
- Single SidebarToggle lives at the top-left of page title bars (both states);
  hovering it while collapsed opens the menu as a popover-styled, content-fit
  flyout anchored below the bar; clicking pins the sidebar open
- Flyout pins open while popups launched from it (workspace menu) are showing
- "New chat" nav item swaps the house icon for the new MessageCircle

Chat view:
- ChatTitleBar always renders (incl. new-chat view) with a "Chats / {title}"
  breadcrumb switcher; close (x) hides the chat pane while the resource panel
  takes full width and the switcher moves inline into the tabs bar
- ChatSwitcher promoted to a workspace-level control rendered on every page
  header (Tables/Files/Knowledge/Scheduled/Logs via ResourceHeader) and
  floating on the workflow canvas, so chats are reachable from anywhere
- Guardrails: chat pane restores when the resource panel closes; embedded
  pages suppress duplicate chrome via SidebarToggleHidden context

Design pass:
- Resource tabs become ghost chips (30px, rounded-lg, active surface) in a
  44px bar matching the chat title bar; icon buttons unified at 30px with
  surface-active hover; 7px equal-distance edge insets for all pill controls
- Chat dropdown matches the flyout anchor rhythm (6px below bar, 8px inset);
  emcn PopoverContent gains an alignOffset passthrough

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/sim/app/layout.tsx                       |   2 +-
 .../chat-switcher/chat-switcher.tsx           | 110 ++
 .../components/chat-switcher/index.ts         |   1 +
 .../[workspaceId]/components/index.ts         |   2 +
 .../resource-header/resource-header.tsx       |   4 +
 .../components/sidebar-toggle/index.ts        |   1 +
 .../sidebar-toggle/sidebar-toggle.tsx         |  67 ++
 .../workspace-chrome/workspace-chrome.tsx     |  67 +-
 .../chat-title-bar/chat-title-bar.tsx         |  98 +-
 .../mothership-chat/mothership-chat.tsx       |   5 +-
 .../resource-tabs/resource-tab-controls.ts    |   8 +-
 .../resource-tabs/resource-tabs.tsx           |  60 +-
 .../mothership-view/mothership-view.tsx       |  28 +-
 .../app/workspace/[workspaceId]/home/home.tsx | 201 ++--
 .../[workspaceId]/w/[workflowId]/workflow.tsx |  10 +
 .../collapsed-sidebar-menu.tsx                | 494 ---------
 .../collapsed-sidebar-menu/index.ts           |   7 -
 .../w/components/sidebar/components/index.ts  |   7 -
 .../components/search-modal/search-modal.tsx  |   4 +-
 .../w/components/sidebar/hooks/index.ts       |   3 -
 .../sidebar/hooks/use-chat-selection.ts       |  44 -
 .../sidebar/hooks/use-flyout-inline-rename.ts | 101 --
 .../sidebar/hooks/use-hover-menu.ts           | 111 --
 .../w/components/sidebar/sidebar.tsx          | 979 +++---------------
 .../emcn/components/popover/popover.tsx       |   7 +
 apps/sim/stores/constants.ts                  |   4 +-
 apps/sim/stores/sidebar/store.ts              |  54 +-
 apps/sim/stores/sidebar/types.ts              |  17 +-
 28 files changed, 700 insertions(+), 1796 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/components/chat-switcher/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/components/sidebar-toggle/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/components/sidebar-toggle/sidebar-toggle.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/index.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-chat-selection.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-flyout-inline-rename.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-hover-menu.ts

diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
index 8c20a3e8b41..946cc398265 100644
--- a/apps/sim/app/layout.tsx
+++ b/apps/sim/app/layout.tsx
@@ -85,7 +85,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     var isCollapsed = state && state.isCollapsed;
 
                     if (isCollapsed) {
-                      document.documentElement.style.setProperty('--sidebar-width', '51px');
+                      document.documentElement.style.setProperty('--sidebar-width', '0px');
                       document.documentElement.setAttribute('data-sidebar-collapsed', '');
                     } else {
                       var width = state && state.sidebarWidth;
diff --git a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
new file mode 100644
index 00000000000..827eabc7cad
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
@@ -0,0 +1,110 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import {
+  POPOVER_ANIMATION_CLASSES,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+} from '@/components/emcn'
+import { ChevronDown, MessageCircle } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+import { useSidebarToggleHidden } from '@/app/workspace/[workspaceId]/components/sidebar-toggle'
+import { ChatHistoryList } from '@/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list'
+import { useMothershipChats } from '@/hooks/queries/mothership-chats'
+
+const FALLBACK_TITLE = 'New chat'
+
+interface ChatSwitcherProps {
+  /**
+   * The chat shown in the breadcrumb and highlighted in the list. Omitted on
+   * non-chat pages, where the most recently updated chat is shown instead.
+   */
+  chatId?: string
+  /**
+   * Called with the picked chat id before navigation. The chat view uses this
+   * to reopen a hidden chat pane (including re-picking the current chat).
+   */
+  onSelectChat?: (chatId: string) => void
+}
+
+/**
+ * The chat-switcher chip — a "Chats / {title}" breadcrumb that lives at the
+ * top-left of every page's title bar. Clicking it opens the workspace's chat
+ * list inline; selecting a chat navigates to it from anywhere.
+ */
+export function ChatSwitcher({ chatId, onSelectChat }: ChatSwitcherProps) {
+  const isHidden = useSidebarToggleHidden()
+  const { workspaceId } = useParams<{ workspaceId?: string }>()
+  const router = useRouter()
+  const { data: tasks = [] } = useMothershipChats(workspaceId)
+  const [open, setOpen] = useState(false)
+
+  const mostRecent = useMemo(
+    () =>
+      tasks.reduce<(typeof tasks)[number] | null>(
+        (latest, task) => (!latest || task.updatedAt > latest.updatedAt ? task : latest),
+        null
+      ),
+    [tasks]
+  )
+
+  if (isHidden || !workspaceId) return null
+
+  const title = chatId
+    ? (tasks.find((task) => task.id === chatId)?.name ?? FALLBACK_TITLE)
+    : (mostRecent?.name ?? FALLBACK_TITLE)
+
+  const handleSelect = (selectedChatId: string) => {
+    setOpen(false)
+    onSelectChat?.(selectedChatId)
+    if (selectedChatId === chatId) return
+    router.push(`/workspace/${workspaceId}/chat/${selectedChatId}`)
+  }
+
+  return (
+    <Popover size='md' open={open} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <button
+          type='button'
+          aria-label='Switch chat'
+          onClick={() => setOpen((prev) => !prev)}
+          className={cn(
+            'flex h-[30px] min-w-0 items-center gap-1.5 rounded-lg px-2 transition-colors',
+            'hover-hover:bg-[var(--surface-active)]',
+            open && 'bg-[var(--surface-active)]'
+          )}
+        >
+          <MessageCircle className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+          <span className='flex-shrink-0 text-[14px] text-[var(--text-muted)]'>Chats</span>
+          <span
+            aria-hidden='true'
+            className='flex-shrink-0 select-none text-[14px] text-[var(--text-icon)]'
+          >
+            /
+          </span>
+          <span className='min-w-0 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+            {title}
+          </span>
+          <ChevronDown className='ml-0.5 h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+        </button>
+      </PopoverAnchor>
+      {/* Mirrors the sidebar flyout's anchor rhythm: the chip sits at y 7..37 in
+          the 44px bar, so offset 13 lands the panel 6px below the bar, and the
+          -33 align offset walks back from the chip to 8px off the panel edge. */}
+      <PopoverContent
+        side='bottom'
+        align='start'
+        sideOffset={13}
+        alignOffset={-33}
+        minWidth={280}
+        maxWidth={360}
+        border
+        className={cn(POPOVER_ANIMATION_CLASSES, 'bg-[var(--bg)] p-0 dark:bg-[var(--bg)]')}
+      >
+        <ChatHistoryList onSelect={handleSelect} activeChatId={chatId} autoFocus={open} />
+      </PopoverContent>
+    </Popover>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/index.ts b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/index.ts
new file mode 100644
index 00000000000..345c1d5839b
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/index.ts
@@ -0,0 +1 @@
+export { ChatSwitcher } from './chat-switcher'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/index.ts b/apps/sim/app/workspace/[workspaceId]/components/index.ts
index d0876513a64..8a84a507fb2 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/index.ts
@@ -1,3 +1,4 @@
+export { ChatSwitcher } from './chat-switcher'
 export { ConversationListItem } from './conversation-list-item'
 export type { ErrorBoundaryProps, ErrorStateProps } from './error'
 export { ErrorShell, ErrorState } from './error'
@@ -27,3 +28,4 @@ export type {
   SelectableConfig,
 } from './resource/resource'
 export { EMPTY_CELL_PLACEHOLDER, Resource, ResourceTable } from './resource/resource'
+export { SidebarToggle } from './sidebar-toggle'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 5fa3411e222..ec122b79a44 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -21,8 +21,10 @@ import {
   useIsOverflowing,
 } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import { ChatSwitcher } from '@/app/workspace/[workspaceId]/components/chat-switcher'
 import { InlineRenameInput } from '@/app/workspace/[workspaceId]/components/inline-rename-input'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
+import { SidebarToggle } from '@/app/workspace/[workspaceId]/components/sidebar-toggle'
 
 const HEADER_PLUS_ICON = <Plus className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
 
@@ -117,6 +119,8 @@ export const ResourceHeader = memo(function ResourceHeader({
     >
       <div className='flex min-w-0 items-center justify-between gap-3'>
         <div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>
+          <SidebarToggle />
+          <ChatSwitcher />
           {hasBreadcrumbs ? (
             breadcrumbs.map((crumb, i) => {
               const segmentClassName = getBreadcrumbSegmentClassName(
diff --git a/apps/sim/app/workspace/[workspaceId]/components/sidebar-toggle/index.ts b/apps/sim/app/workspace/[workspaceId]/components/sidebar-toggle/index.ts
new file mode 100644
index 00000000000..d60f3d9de43
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/sidebar-toggle/index.ts
@@ -0,0 +1 @@
+export { SidebarToggle, SidebarToggleHidden, useSidebarToggleHidden } from './sidebar-toggle'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/sidebar-toggle/sidebar-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/components/sidebar-toggle/sidebar-toggle.tsx
new file mode 100644
index 00000000000..d126377d264
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/sidebar-toggle/sidebar-toggle.tsx
@@ -0,0 +1,67 @@
+'use client'
+
+import { createContext, useContext } from 'react'
+import { PanelLeft } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+import { useSidebarStore } from '@/stores/sidebar/store'
+
+const SidebarToggleHiddenContext = createContext(false)
+
+interface SidebarToggleHiddenProps {
+  children: React.ReactNode
+}
+
+/**
+ * Suppresses every {@link SidebarToggle} (and other title-bar chrome controls,
+ * e.g. the chat switcher) in the subtree. Wrap surfaces that embed full pages
+ * (e.g. the chat resource panel) so their headers don't duplicate the chrome.
+ */
+export function SidebarToggleHidden({ children }: SidebarToggleHiddenProps) {
+  return (
+    <SidebarToggleHiddenContext.Provider value={true}>
+      {children}
+    </SidebarToggleHiddenContext.Provider>
+  )
+}
+
+/** Whether title-bar chrome controls are suppressed by {@link SidebarToggleHidden}. */
+export function useSidebarToggleHidden(): boolean {
+  return useContext(SidebarToggleHiddenContext)
+}
+
+interface SidebarToggleProps {
+  /** Layout-only positioning for the host surface (margins, absolute placement). */
+  className?: string
+}
+
+/**
+ * The single sidebar control, living at the top-left of a page's title bar in
+ * both states. Clicking toggles the sidebar open/closed. While the sidebar is
+ * hidden, hovering reveals the floating menu panel (rendered by the workspace
+ * chrome) anchored underneath this toggle.
+ */
+export function SidebarToggle({ className }: SidebarToggleProps) {
+  const isHidden = useContext(SidebarToggleHiddenContext)
+  const isCollapsed = useSidebarStore((s) => s.isCollapsed)
+  const toggleCollapsed = useSidebarStore((s) => s.toggleCollapsed)
+  const openFlyout = useSidebarStore((s) => s.openFlyout)
+  const scheduleFlyoutClose = useSidebarStore((s) => s.scheduleFlyoutClose)
+
+  if (isHidden) return null
+
+  return (
+    <button
+      type='button'
+      onClick={toggleCollapsed}
+      onMouseEnter={isCollapsed ? openFlyout : undefined}
+      onMouseLeave={isCollapsed ? scheduleFlyoutClose : undefined}
+      className={cn(
+        'flex size-[30px] flex-shrink-0 items-center justify-center rounded-lg transition-colors hover-hover:bg-[var(--surface-active)]',
+        className
+      )}
+      aria-label={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+    >
+      <PanelLeft className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+    </button>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
index 16b51832dbc..93951d468b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
@@ -4,6 +4,7 @@ import { useEffect } from 'react'
 import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { SIDEBAR_WIDTH } from '@/stores/constants'
 import { useFullscreenOriginStore } from '@/stores/fullscreen-origin'
 import { useSidebarStore } from '@/stores/sidebar/store'
 
@@ -40,6 +41,12 @@ function isFullscreenPath(pathname: string | null): boolean {
  *
  * On a direct load of a fullscreen route the wrapper mounts already collapsed,
  * so no slide plays (CSS transitions don't run on mount).
+ *
+ * The sidebar's single control is the `SidebarToggle` at the top-left of page
+ * title bars. While the sidebar is hidden, hovering that toggle opens the
+ * floating menu panel this chrome owns, anchored underneath the title bar so
+ * the toggle stays visible; an invisible left-edge hover zone opens it on
+ * pages without a title-bar toggle. Clicking the toggle pins the sidebar open.
  */
 export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
   const pathname = usePathname()
@@ -49,6 +56,16 @@ export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
 
   const hasHydrated = useSidebarStore((s) => s._hasHydrated)
   const syncSidebarWidth = useSidebarStore((s) => s.syncWidth)
+  const isCollapsed = useSidebarStore((s) => s.isCollapsed)
+  const isFlyoutOpen = useSidebarStore((s) => s.isFlyoutOpen)
+  const openFlyout = useSidebarStore((s) => s.openFlyout)
+  const scheduleFlyoutClose = useSidebarStore((s) => s.scheduleFlyoutClose)
+  const closeFlyout = useSidebarStore((s) => s.closeFlyout)
+
+  // Hide the flyout after navigating from it.
+  useEffect(() => {
+    closeFlyout()
+  }, [pathname, closeFlyout])
 
   // Remember the last non-fullscreen page so a fullscreen route's Back control
   // can return there, deterministically and for any trigger.
@@ -86,14 +103,14 @@ export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
   }, [syncSidebarWidth])
 
   return (
-    <div className='flex min-h-0 flex-1'>
+    <div className='relative flex min-h-0 flex-1'>
       <div
         className={cn(
           'sidebar-shell-outer shrink-0 overflow-hidden transition-[width]',
           SLIDE_TRANSITION,
           isFullscreen ? 'w-0' : 'w-[var(--sidebar-width)]'
         )}
-        aria-hidden={isFullscreen || undefined}
+        aria-hidden={isFullscreen || isCollapsed || undefined}
         suppressHydrationWarning
       >
         <div
@@ -103,20 +120,58 @@ export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
             isFullscreen && '-translate-x-full'
           )}
         >
-          <Sidebar />
+          {!isCollapsed && <Sidebar />}
         </div>
       </div>
+      {/* Sidebar hidden → content goes full-bleed to the browser edge; sidebar
+          visible (or fullscreen route) → framed card with the 8px gutter. */}
       <div
         className={cn(
-          'flex min-w-0 flex-1 flex-col p-[8px] transition-[padding]',
+          'flex min-w-0 flex-1 flex-col transition-[padding]',
           SLIDE_TRANSITION,
-          !isFullscreen && 'pl-0'
+          isFullscreen ? 'p-[8px]' : isCollapsed ? 'p-0' : 'p-[8px] pl-0'
         )}
       >
-        <div className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
+        <div
+          className={cn(
+            'flex-1 overflow-hidden bg-[var(--bg)]',
+            (isFullscreen || !isCollapsed) && 'rounded-[8px] border border-[var(--border)]'
+          )}
+        >
           {children}
         </div>
       </div>
+      {isCollapsed && !isFullscreen && (
+        <>
+          {/* Invisible hover zone so the flyout is reachable from the screen
+              edge on pages whose header has no SidebarFlyoutTrigger. */}
+          <div
+            className='absolute top-0 bottom-0 left-0 z-40 w-[10px]'
+            onMouseEnter={openFlyout}
+            onMouseLeave={scheduleFlyoutClose}
+          />
+          {/* Anchored below the page title bar so the SidebarToggle that opened
+              it stays visible above the panel. Chrome mirrors the canonical
+              popover surface (rounded-xl, --border-1, --bg, shadow-sm) and enter
+              motion (fade + zoom + slide from top, 150ms ease-out). Content-fit
+              like a dropdown: height tracks the menu, capped so it scrolls
+              internally instead of overflowing the viewport. */}
+          <div
+            onMouseEnter={openFlyout}
+            onMouseLeave={scheduleFlyoutClose}
+            className={cn(
+              'absolute top-[50px] left-[8px] z-50 flex max-h-[calc(100%-58px)] w-[var(--sidebar-width)] flex-col overflow-hidden rounded-xl border border-[var(--border-1)] bg-[var(--bg)] shadow-sm',
+              'origin-top-left transition-[transform,opacity] duration-150 ease-out motion-reduce:transition-none',
+              isFlyoutOpen
+                ? 'translate-y-0 scale-100 opacity-100'
+                : '-translate-y-2 pointer-events-none scale-95 opacity-0'
+            )}
+            style={{ '--sidebar-width': `${SIDEBAR_WIDTH.DEFAULT}px` } as React.CSSProperties}
+          >
+            <Sidebar variant='flyout' />
+          </div>
+        </>
+      )}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
index 798c8f808ad..e4d78666a52 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
@@ -1,72 +1,52 @@
 'use client'
 
-import { useParams } from 'next/navigation'
-import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/emcn'
-import { Link, MoreHorizontal, SquareArrowUpRight } from '@/components/emcn/icons'
-import { useTasks } from '@/hooks/queries/tasks'
-
-const FALLBACK_TITLE = 'New chat'
+import { Tooltip } from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
+import { ChatSwitcher } from '@/app/workspace/[workspaceId]/components/chat-switcher'
+import { SidebarToggle } from '@/app/workspace/[workspaceId]/components/sidebar-toggle'
 
 interface ChatTitleBarProps {
-  /** The open chat's id. Resolves the title from the task list and powers the actions. */
+  /** The open chat's id — resolves the title and highlights the active row. */
   chatId?: string
+  /**
+   * Called with the picked chat id before navigation. The chat view uses this
+   * to reopen a hidden chat pane (including re-picking the current chat).
+   */
+  onSelectChat?: (chatId: string) => void
+  /** Renders a close (×) control at the bar's right edge that hides the chat pane. */
+  onClose?: () => void
 }
 
 /**
- * A Codex-style title bar pinned to the top of an open Mothership chat: the
- * chat title on the left, an action menu (kebab) on the right. The action set
- * is intentionally minimal for now — non-destructive, no-backend affordances —
- * and is the natural home for future per-chat actions (rename, pin, delete).
+ * A Codex-style title bar for an open Mothership chat. The title is a chip with
+ * a chevron that opens the workspace's chat list inline, letting the user jump
+ * straight between chats without returning to the new-chat view. Selecting a
+ * chat navigates to it.
  */
-export function ChatTitleBar({ chatId }: ChatTitleBarProps) {
-  const { workspaceId } = useParams<{ workspaceId: string }>()
-  const { data: tasks = [] } = useTasks(workspaceId)
-
-  const title = tasks.find((task) => task.id === chatId)?.name ?? FALLBACK_TITLE
-  const taskPath = chatId ? `/workspace/${workspaceId}/task/${chatId}` : null
-
-  const handleOpenInNewTab = () => {
-    if (taskPath) window.open(taskPath, '_blank', 'noopener,noreferrer')
-  }
-
-  const handleCopyLink = () => {
-    if (taskPath) void navigator.clipboard?.writeText(`${window.location.origin}${taskPath}`)
-  }
-
+export function ChatTitleBar({ chatId, onSelectChat, onClose }: ChatTitleBarProps) {
   return (
-    <div className='flex h-[44px] flex-shrink-0 items-center gap-1 border-[var(--border)] border-b px-[24px]'>
-      <span className='min-w-0 truncate font-medium text-[14px] text-[var(--text-primary)]'>
-        {title}
-      </span>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant='ghost'
-            size={null}
-            type='button'
-            aria-label='Chat actions'
-            className='size-[28px] flex-shrink-0 rounded-[8px] hover-hover:bg-[var(--surface-active)]'
-          >
-            <MoreHorizontal className='size-[16px] text-[var(--text-icon)]' />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align='end' side='bottom' sideOffset={4}>
-          <DropdownMenuItem disabled={!taskPath} onSelect={handleOpenInNewTab}>
-            <SquareArrowUpRight />
-            Open in new tab
-          </DropdownMenuItem>
-          <DropdownMenuItem disabled={!taskPath} onSelect={handleCopyLink}>
-            <Link />
-            Copy link
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+    <div className='flex h-[44px] flex-shrink-0 items-center gap-1 border-[var(--border)] border-b px-4'>
+      {/* Edge controls pull out by 9px so their 30px hover pills sit 7px from
+          the panel edge — matching the pill's 7px top/bottom gap in the bar. */}
+      <SidebarToggle className='-ml-[9px]' />
+      <ChatSwitcher chatId={chatId} onSelectChat={onSelectChat} />
+      {onClose && (
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <button
+              type='button'
+              onClick={onClose}
+              aria-label='Close chat'
+              className='-mr-[9px] ml-auto flex size-[30px] flex-shrink-0 items-center justify-center rounded-lg transition-colors hover-hover:bg-[var(--surface-active)]'
+            >
+              <X className='size-[14px] text-[var(--text-icon)]' />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Content side='bottom'>
+            <p>Close chat</p>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      )}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
index 9be584a50c1..ce9d345804e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
@@ -59,6 +59,8 @@ interface MothershipChatProps {
   initialScrollBlocked?: boolean
   animateInput?: boolean
   onInputAnimationEnd?: () => void
+  /** Shows the title bar's close (×) control that hides the chat pane. */
+  onCloseChat?: () => void
   className?: string
 }
 
@@ -215,6 +217,7 @@ export function MothershipChat({
   initialScrollBlocked = false,
   animateInput = false,
   onInputAnimationEnd,
+  onCloseChat,
   className,
 }: MothershipChatProps) {
   const styles = LAYOUT_STYLES[layout]
@@ -294,7 +297,7 @@ export function MothershipChat({
 
   return (
     <div className={cn('flex h-full min-h-0 flex-col', className)}>
-      {layout === 'mothership-view' && <ChatTitleBar chatId={chatId} />}
+      {layout === 'mothership-view' && <ChatTitleBar chatId={chatId} onClose={onCloseChat} />}
       <div ref={setScrollContainer} className={cn(styles.scrollContainer, SCROLLBAR_AUTOHIDE)}>
         {isLoading && !hasMessages ? (
           <MothershipChatSkeleton layout={layout} />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
index 3397ffdf15f..0adea97cd34 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
@@ -1,5 +1,11 @@
 export const RESOURCE_TAB_GAP_CLASS = 'gap-1.5'
 
-export const RESOURCE_TAB_ICON_BUTTON_CLASS = 'shrink-0 bg-transparent px-2 py-[5px] text-caption'
+/**
+ * Icon-button chrome for the resource panel's header controls, matching the
+ * chip-era canon used by the title-bar controls on the chat side: 30px square,
+ * rounded-lg, `--surface-active` hover.
+ */
+export const RESOURCE_TAB_ICON_BUTTON_CLASS =
+  'size-[30px] shrink-0 rounded-lg bg-transparent p-0 hover-hover:bg-[var(--surface-active)]'
 
 export const RESOURCE_TAB_ICON_CLASS = 'size-[16px] text-[var(--text-icon)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index e2eba24418a..6d0bfd6538d 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -10,8 +10,8 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Button, Tooltip } from '@/components/emcn'
-import { Columns3, Eye, Pencil } from '@/components/emcn/icons'
+import { Button, chipVariants, Tooltip } from '@/components/emcn'
+import { Columns3, Eye, Pencil, X } from '@/components/emcn/icons'
 import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { isEphemeralResource } from '@/lib/copilot/resources/types'
 import { cn } from '@/lib/core/utils/cn'
@@ -179,8 +179,8 @@ const ResourceTabItem = memo(function ResourceTabItem({
       {showGapBefore && (
         <div className='-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-0 z-10 h-[16px] w-[2px] rounded-full bg-[var(--text-subtle)]' />
       )}
-      <Button
-        variant='subtle'
+      <button
+        type='button'
         draggable
         data-resource-tab-id={resource.id}
         onDragStart={(e) => onDragStart(e, idx)}
@@ -197,14 +197,14 @@ const ResourceTabItem = memo(function ResourceTabItem({
         onMouseEnter={() => setHoveredTabId(resource.id)}
         onMouseLeave={() => setHoveredTabId(null)}
         className={cn(
-          'group relative shrink-0 bg-transparent px-2 py-[3px] pr-[22px] text-caption transition-colors duration-150',
-          isActive && 'bg-[var(--surface-4)]',
-          isSelected && !isActive && 'bg-[var(--surface-3)]',
+          chipVariants({ variant: 'ghost', active: isActive, flush: true }),
+          'relative shrink-0 pr-[24px] text-[var(--text-body)]',
+          isSelected && !isActive && 'bg-[var(--surface-active)]',
           isDragging && 'opacity-30'
         )}
       >
-        {config.renderTabIcon(resource, 'mr-1.5 size-[14px]')}
-        {displayName}
+        {config.renderTabIcon(resource, 'size-[16px] shrink-0')}
+        <span className='truncate'>{displayName}</span>
         {(isHovered || isActive) && chatId && (
           <span
             role='button'
@@ -213,23 +213,13 @@ const ResourceTabItem = memo(function ResourceTabItem({
             onKeyDown={(e) => {
               if (e.key === 'Enter') onRemove(e, resource)
             }}
-            className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center justify-center rounded-sm p-[1px] hover-hover:bg-[var(--surface-5)]'
+            className='-translate-y-1/2 absolute top-1/2 right-[5px] flex items-center justify-center rounded-sm p-[2px] hover-hover:bg-[var(--surface-6)]'
             aria-label={`Close ${displayName}`}
           >
-            <svg
-              className='size-[10px] text-[var(--text-icon)]'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2.5'
-              strokeLinecap='round'
-              strokeLinejoin='round'
-            >
-              <path d='M18 6 6 18M6 6l12 12' />
-            </svg>
+            <X strokeWidth={2.5} className='size-[10px] text-[var(--text-icon)]' />
           </span>
         )}
-      </Button>
+      </button>
       {showGapAfter && (
         <div className='-translate-y-1/2 pointer-events-none absolute top-1/2 right-0 z-10 h-[16px] w-[2px] translate-x-1/2 rounded-full bg-[var(--text-subtle)]' />
       )}
@@ -249,6 +239,11 @@ interface ResourceTabsProps {
   previewMode?: PreviewMode
   onCyclePreviewMode?: () => void
   actions?: ReactNode
+  /**
+   * Controls rendered before the tab strip (e.g. the sidebar toggle and
+   * compact chat switcher while the chat pane is hidden).
+   */
+  leading?: ReactNode
 }
 
 export function ResourceTabs({
@@ -263,6 +258,7 @@ export function ResourceTabs({
   previewMode,
   onCyclePreviewMode,
   actions,
+  leading,
 }: ResourceTabsProps) {
   const PreviewModeIcon = PREVIEW_MODE_ICONS[previewMode ?? 'split']
   const nameLookup = useResourceNameLookup(workspaceId)
@@ -544,11 +540,21 @@ export function ResourceTabs({
   return (
     <div
       className={cn(
-        'flex shrink-0 items-center border-[var(--border)] border-b px-4 py-[8.5px]',
+        'flex h-[44px] shrink-0 items-center border-[var(--border)] border-b px-4',
         RESOURCE_TAB_GAP_CLASS
       )}
     >
-      <div className={cn('flex min-w-0 flex-1 items-center', RESOURCE_TAB_GAP_CLASS)}>
+      {leading}
+      {/* Without leading controls, the tab strip starts at the bar's left edge —
+          pull it out 9px so the first tab pill sits 7px from the edge, matching
+          the edge icon buttons' equal-distance rhythm. */}
+      <div
+        className={cn(
+          'flex min-w-0 flex-1 items-center',
+          RESOURCE_TAB_GAP_CLASS,
+          !leading && '-ml-[9px]'
+        )}
+      >
         <div
           ref={scrollNodeRef}
           className={cn(
@@ -633,8 +639,10 @@ export function ResourceTabs({
         )}
         {/* Inert spacer reserving the toggle's exact footprint at the far right.
             The real, interactive toggle is rendered absolutely in home.tsx and
-            overlays this spot, so it never moves when the panel collapses. */}
-        <ResourcePanelToggle placeholder />
+            overlays this spot, so it never moves when the panel collapses. Pulled
+            out 9px so the hover pill sits 7px from the edge (equal to its 7px
+            top/bottom gap in the bar). */}
+        <ResourcePanelToggle placeholder className='-mr-[9px]' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index 1251f31d123..e846ca373c9 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -1,9 +1,10 @@
 'use client'
 
-import { forwardRef, memo, useState } from 'react'
+import { forwardRef, memo, type ReactNode, useState } from 'react'
 import type { FilePreviewSession } from '@/lib/copilot/request/session'
 import { cn } from '@/lib/core/utils/cn'
 import { getFileExtension } from '@/lib/uploads/utils/file-utils'
+import { SidebarToggleHidden } from '@/app/workspace/[workspaceId]/components/sidebar-toggle'
 import type { PreviewMode } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
 import { RICH_PREVIEWABLE_EXTENSIONS } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
 import { hasRenderableFilePreviewContent } from '@/app/workspace/[workspaceId]/home/hooks/use-file-preview-sessions'
@@ -52,6 +53,8 @@ interface MothershipViewProps {
   className?: string
   previewSession?: FilePreviewSession | null
   genericResourceData?: GenericResourceData
+  /** Controls rendered before the tab strip (see {@link ResourceTabs}). */
+  tabsLeading?: ReactNode
 }
 
 export const MothershipView = memo(
@@ -69,6 +72,7 @@ export const MothershipView = memo(
       className,
       previewSession,
       genericResourceData,
+      tabsLeading,
     }: MothershipViewProps,
     ref
   ) {
@@ -107,6 +111,7 @@ export const MothershipView = memo(
           <ResourceTabs
             workspaceId={workspaceId}
             chatId={chatId}
+            leading={tabsLeading}
             resources={resources}
             activeId={active?.id ?? null}
             onSelect={onSelectResource}
@@ -121,15 +126,18 @@ export const MothershipView = memo(
           />
           <div className='min-h-0 flex-1 overflow-hidden'>
             {active ? (
-              <ResourceContent
-                workspaceId={workspaceId}
-                resource={active}
-                previewMode={isActivePreviewable ? previewMode : undefined}
-                previewSession={previewForActive}
-                genericResourceData={active.type === 'generic' ? genericResourceData : undefined}
-                previewContextKey={chatId}
-                onNotFound={(resourceId) => onRemoveResource('log', resourceId)}
-              />
+              <SidebarToggleHidden>
+                <ResourceContent
+                  workspaceId={workspaceId}
+                  resource={active}
+                  previewMode={isActivePreviewable ? previewMode : undefined}
+                  previewSession={previewForActive}
+                  genericResourceData={active.type === 'generic' ? genericResourceData : undefined}
+                  previewContextKey={chatId}
+                  onNotFound={(resourceId) => onRemoveResource('log', resourceId)}
+                  onAddResource={onAddResource}
+                />
+              </SidebarToggleHidden>
             ) : (
               <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
                 Click "+" above to add a resource
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index 09f485a6387..62398cf855b 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -11,12 +11,15 @@ import {
   type LandingWorkflowSeed,
   LandingWorkflowSeedStorage,
 } from '@/lib/core/utils/browser-storage'
+import { cn } from '@/lib/core/utils/cn'
 import {
   MOTHERSHIP_SEND_MESSAGE_EVENT,
   type MothershipSendMessageDetail,
 } from '@/lib/mothership/events'
 import { captureEvent } from '@/lib/posthog/client'
 import { persistImportedWorkflow } from '@/lib/workflows/operations/import-export'
+import { ChatSwitcher } from '@/app/workspace/[workspaceId]/components/chat-switcher'
+import { SidebarToggle } from '@/app/workspace/[workspaceId]/components/sidebar-toggle'
 import {
   useMarkMothershipChatRead,
   useMothershipChatHistory,
@@ -32,6 +35,7 @@ import {
   UserInput,
   type UserInputHandle,
 } from './components'
+import { ChatTitleBar } from './components/mothership-chat/components/chat-title-bar'
 import { ResourcePanelToggle } from './components/mothership-view/components/resource-tabs/resource-panel-toggle'
 import { getMothershipUseChatOptions, useChat, useMothershipResize } from './hooks'
 import type { FileAttachmentForApi, MothershipResource, MothershipResourceType } from './types'
@@ -131,6 +135,15 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     setIsResourceCollapsed(true)
   }, [clearWidth])
 
+  const [isChatCollapsed, setIsChatCollapsed] = useState(false)
+
+  const closeChatPane = useCallback(() => {
+    clearWidth()
+    setIsChatCollapsed(true)
+  }, [clearWidth])
+
+  const reopenChatPane = useCallback(() => setIsChatCollapsed(false), [])
+
   function handleResourceEvent() {
     if (isResourceCollapsedRef.current) {
       setIsResourceCollapsed(false)
@@ -323,44 +336,62 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
   // it (not just the prop) lets an inline-opened chat render its skeleton + view
   // before its history finishes loading.
   const activeChatId = resolvedChatId ?? chatId
-  const { isPending: isActiveChatHistoryPending } = useChatHistory(activeChatId)
+  const { isPending: isActiveChatHistoryPending } = useMothershipChatHistory(activeChatId)
   const hasMessages = messages.length > 0
   const showChatSkeleton = Boolean(activeChatId) && !hasMessages && isActiveChatHistoryPending
   const showChatView = hasMessages || showChatSkeleton || Boolean(resolvedChatId)
   const draftScopeKey = `${workspaceId}:${chatId ?? 'new'}`
+  const canCloseChat = resources.length > 0 && !isResourceCollapsed
+
+  // The chat pane can only hide while the resource panel is visible; restore it
+  // when the panel collapses or the last resource closes so the view never blanks.
+  useEffect(() => {
+    if (isChatCollapsed && (resources.length === 0 || isResourceCollapsed)) {
+      setIsChatCollapsed(false)
+    }
+  }, [isChatCollapsed, resources, isResourceCollapsed])
+
+  // Opening a different chat from anywhere (title-bar dropdown, search, deep
+  // link) is an explicit "open this chat" — always show its conversation pane.
+  useEffect(() => {
+    setIsChatCollapsed(false)
+  }, [activeChatId])
 
   if (!showChatView) {
     return (
-      <div className='relative h-full overflow-y-auto bg-[var(--bg)] [scrollbar-gutter:stable_both-edges]'>
+      <div className='relative flex h-full flex-col bg-[var(--bg)]'>
+        <ChatTitleBar />
         <div className='absolute top-[8.5px] right-[16px] z-10'>
           <CreditsChip />
         </div>
-        <div className='flex min-h-full flex-col items-center px-6 pt-[24vh] pb-[2vh]'>
-          <h1 className='mb-7 max-w-[48rem] text-balance font-season text-[30px] text-[var(--text-primary)]'>
-            What should we get done{firstName ? `, ${firstName}` : ''}?
-          </h1>
-          <div ref={initialViewInputRef} className='w-full'>
-            {/* Stacked card (Figma node 1-3): grey tray sits behind the input
+        <div className='relative flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]'>
+          <div className='flex min-h-full flex-col items-center px-6 pt-[calc(24vh-44px)] pb-[2vh]'>
+            <h1 className='mb-7 max-w-[48rem] text-balance font-season text-[30px] text-[var(--text-primary)]'>
+              What should we get done{firstName ? `, ${firstName}` : ''}?
+            </h1>
+            <div ref={initialViewInputRef} className='w-full'>
+              {/* Stacked card (Figma node 1-3): grey tray sits behind the input
                 with a 1px frame on top/sides. The docked "All Chats" launcher
                 lives in the shelf below and animates the chat list open inside
                 the grey tray — growing downward as the input rides up. */}
-            <div className='mx-auto w-full max-w-[48rem] overflow-hidden rounded-[18px] bg-[var(--surface-3)] p-px'>
-              <UserInput
-                ref={initialViewUserInputRef}
-                defaultValue={initialPrompt}
-                draftScopeKey={draftScopeKey}
-                onSubmit={handleSubmit}
-                isSending={isSending}
-                onStopGeneration={handleStopGeneration}
-                userId={userId}
-                onContextAdd={handleContextAdd}
-                onContextRemove={handleInitialContextRemove}
+              <div className='mx-auto w-full max-w-[48rem] overflow-hidden rounded-[18px] bg-[var(--surface-3)] p-px'>
+                <UserInput
+                  ref={initialViewUserInputRef}
+                  defaultValue={initialPrompt}
+                  draftScopeKey={draftScopeKey}
+                  onSubmit={handleSubmit}
+                  isSending={isSending}
+                  onStopGeneration={handleStopGeneration}
+                  userId={userId}
+                  onContextAdd={handleContextAdd}
+                  onContextRemove={handleInitialContextRemove}
+                />
+                <ChatHistory onSelectChat={handleOpenExistingChat} />
+              </div>
+              <SuggestedActions
+                onSelectPrompt={(prompt) => initialViewUserInputRef.current?.populatePrompt(prompt)}
               />
-              <ChatHistory onSelectChat={handleOpenExistingChat} />
             </div>
-            <SuggestedActions
-              onSelectPrompt={(prompt) => initialViewUserInputRef.current?.populatePrompt(prompt)}
-            />
           </div>
         </div>
       </div>
@@ -368,69 +399,87 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
   }
 
   return (
-    <div className='relative flex h-full bg-[var(--bg)]'>
-      <div className='flex h-full min-w-[320px] flex-1 flex-col'>
-        <MothershipChat
-          messages={messages}
-          isSending={isSending}
-          isReconnecting={isReconnecting}
-          isLoading={showChatSkeleton}
-          onSubmit={handleSubmit}
-          onStopGeneration={handleStopGeneration}
-          messageQueue={messageQueue}
-          editingQueuedId={editingQueuedId}
-          dispatchingHeadId={dispatchingHeadId}
-          onRemoveQueuedMessage={removeFromQueue}
-          onSendQueuedMessage={sendNow}
-          onEditQueuedMessage={editQueuedMessage}
-          onCancelQueueEdit={cancelQueueEdit}
-          userId={userId}
+    <div className='relative flex h-full flex-col bg-[var(--bg)]'>
+      <div className='relative flex min-h-0 flex-1'>
+        {!isChatCollapsed && (
+          <div className='flex h-full min-w-[320px] flex-1 flex-col'>
+            <MothershipChat
+              messages={messages}
+              isSending={isSending}
+              isReconnecting={isReconnecting}
+              isLoading={showChatSkeleton}
+              onSubmit={handleSubmit}
+              onStopGeneration={handleStopGeneration}
+              messageQueue={messageQueue}
+              editingQueuedId={editingQueuedId}
+              dispatchingHeadId={dispatchingHeadId}
+              onRemoveQueuedMessage={removeFromQueue}
+              onSendQueuedMessage={sendNow}
+              onEditQueuedMessage={editQueuedMessage}
+              onCancelQueueEdit={cancelQueueEdit}
+              userId={userId}
+              chatId={resolvedChatId}
+              onContextAdd={handleContextAdd}
+              onWorkspaceResourceSelect={handleWorkspaceResourceSelect}
+              draftScopeKey={draftScopeKey}
+              animateInput={isInputEntering}
+              onInputAnimationEnd={isInputEntering ? () => setIsInputEntering(false) : undefined}
+              initialScrollBlocked={resources.length > 0 && isResourceCollapsed}
+              onCloseChat={canCloseChat ? closeChatPane : undefined}
+            />
+          </div>
+        )}
+
+        {/* Resize handle — zero-width flex child whose absolute child straddles the border */}
+        {!isChatCollapsed && !isResourceCollapsed && (
+          <div className='relative z-20 w-0 flex-none'>
+            <div
+              className='absolute inset-y-0 left-[-4px] w-[8px] cursor-ew-resize'
+              role='separator'
+              aria-orientation='vertical'
+              aria-label='Resize resource panel'
+              onPointerDown={handleResizePointerDown}
+            />
+          </div>
+        )}
+
+        <MothershipView
+          ref={mothershipRef}
+          workspaceId={workspaceId}
           chatId={resolvedChatId}
-          onContextAdd={handleContextAdd}
-          onWorkspaceResourceSelect={handleWorkspaceResourceSelect}
-          draftScopeKey={draftScopeKey}
-          animateInput={isInputEntering}
-          onInputAnimationEnd={isInputEntering ? () => setIsInputEntering(false) : undefined}
-          initialScrollBlocked={resources.length > 0 && isResourceCollapsed}
+          resources={resources}
+          activeResourceId={activeResourceId}
+          onSelectResource={setActiveResourceId}
+          onAddResource={addResource}
+          onRemoveResource={removeResource}
+          onReorderResources={reorderResources}
+          isCollapsed={isResourceCollapsed}
+          previewSession={previewSession}
+          genericResourceData={genericResourceData ?? undefined}
+          tabsLeading={
+            isChatCollapsed ? (
+              <>
+                {/* With the chat pane hidden, the tabs bar doubles as the title
+                    bar: sidebar toggle + compact chat switcher, no second row. */}
+                <SidebarToggle className='-ml-[9px]' />
+                <ChatSwitcher chatId={activeChatId} onSelectChat={reopenChatPane} />
+              </>
+            ) : undefined
+          }
+          className={cn(
+            skipResourceTransition && '!transition-none',
+            isChatCollapsed && 'w-full flex-1 border-l-0'
+          )}
         />
       </div>
 
-      {/* Resize handle — zero-width flex child whose absolute child straddles the border */}
-      {!isResourceCollapsed && (
-        <div className='relative z-20 w-0 flex-none'>
-          <div
-            className='absolute inset-y-0 left-[-4px] w-[8px] cursor-ew-resize'
-            role='separator'
-            aria-orientation='vertical'
-            aria-label='Resize resource panel'
-            onPointerDown={handleResizePointerDown}
-          />
-        </div>
-      )}
-
-      <MothershipView
-        ref={mothershipRef}
-        workspaceId={workspaceId}
-        chatId={resolvedChatId}
-        resources={resources}
-        activeResourceId={activeResourceId}
-        onSelectResource={setActiveResourceId}
-        onAddResource={addResource}
-        onRemoveResource={removeResource}
-        onReorderResources={reorderResources}
-        isCollapsed={isResourceCollapsed}
-        previewSession={previewSession}
-        genericResourceData={genericResourceData ?? undefined}
-        className={skipResourceTransition ? '!transition-none' : undefined}
-      />
-
       {/* Single, stationary collapse/expand toggle. Lives OUTSIDE the animating
           panel and is always rendered at the fixed top-right corner, overlaying
           the header's spacer when open — so it never moves as the panel slides. */}
       <ResourcePanelToggle
         isCollapsed={isResourceCollapsed}
         onToggle={() => (isResourceCollapsed ? setIsResourceCollapsed(false) : collapseResource())}
-        className='absolute top-[8.5px] right-[16px] z-30'
+        className='absolute top-[7px] right-[7px] z-30'
       />
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index ee4b43ae031..60f1b53f5c8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -23,6 +23,7 @@ import { consumeOAuthReturnContext, writeOAuthReturnContext } from '@/lib/creden
 import type { OAuthProvider } from '@/lib/oauth'
 import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@/lib/workflows/blocks/block-dimensions'
 import { TriggerUtils } from '@/lib/workflows/triggers/triggers'
+import { ChatSwitcher, SidebarToggle } from '@/app/workspace/[workspaceId]/components'
 import { ConnectOAuthModal } from '@/app/workspace/[workspaceId]/components/connect-oauth-modal'
 import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import {
@@ -4221,6 +4222,15 @@ const WorkflowContent = React.memo(
             )}
 
             {!embedded && <DiffControls />}
+
+            {/* Workspace chrome over the canvas: sidebar toggle + chat switcher
+                at the top-left, matching the title-bar rhythm on other pages. */}
+            {!embedded && (
+              <div className='absolute top-[7px] left-[7px] z-10 flex items-center gap-1'>
+                <SidebarToggle />
+                <ChatSwitcher />
+              </div>
+            )}
           </div>
 
           <Terminal />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
deleted file mode 100644
index 7cb4d877c4a..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ /dev/null
@@ -1,494 +0,0 @@
-import { type MouseEvent as ReactMouseEvent, useState } from 'react'
-import { Folder, MoreHorizontal, Plus } from 'lucide-react'
-import Link from 'next/link'
-import {
-  chipVariants,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuItemAction,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@/components/emcn'
-import { Pencil, SquareArrowUpRight } from '@/components/emcn/icons'
-import { cn } from '@/lib/core/utils/cn'
-import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
-import { ConversationListItem } from '@/app/workspace/[workspaceId]/components'
-import type { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import type { WorkspaceFileFolderApi } from '@/hooks/queries/workspace-file-folders'
-import type { FolderTreeNode } from '@/stores/folders/types'
-import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
-
-interface FileFolderFlyoutNode extends WorkspaceFileFolderApi {
-  children: FileFolderFlyoutNode[]
-  files: WorkspaceFileRecord[]
-}
-
-export function CollapsedFileFolderItems({
-  nodes,
-  rootFiles,
-  workspaceId,
-  currentFileId,
-}: {
-  nodes: FileFolderFlyoutNode[]
-  rootFiles?: WorkspaceFileRecord[]
-  workspaceId: string
-  currentFileId?: string
-}) {
-  return (
-    <>
-      {nodes.map((folder) => {
-        const hasChildren = folder.children.length > 0 || folder.files.length > 0
-
-        if (!hasChildren) {
-          return (
-            <DropdownMenuItem key={folder.id} disabled>
-              <Folder className='size-[14px]' />
-              <span className='truncate'>{folder.name}</span>
-            </DropdownMenuItem>
-          )
-        }
-
-        return (
-          <DropdownMenuSub key={folder.id}>
-            <DropdownMenuSubTrigger className='focus:bg-[var(--surface-hover)] data-[state=open]:bg-[var(--surface-hover)]'>
-              <Folder className='size-[14px]' />
-              <span className='truncate'>{folder.name}</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
-              <CollapsedFileFolderItems
-                nodes={folder.children}
-                workspaceId={workspaceId}
-                currentFileId={currentFileId}
-              />
-              {folder.files.map((file) => (
-                <DropdownMenuItem key={file.id} asChild>
-                  <Link
-                    href={`/workspace/${workspaceId}/files/${file.id}`}
-                    className={cn(currentFileId === file.id && 'bg-[var(--surface-active)]')}
-                  >
-                    <svg
-                      className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
-                      viewBox='0 0 24 24'
-                      fill='none'
-                      stroke='currentColor'
-                      strokeWidth='2'
-                      strokeLinecap='round'
-                      strokeLinejoin='round'
-                      aria-hidden='true'
-                    >
-                      <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
-                      <path d='M14 2v4a2 2 0 0 0 2 2h4' />
-                    </svg>
-                    <span className='truncate'>{file.name}</span>
-                  </Link>
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-        )
-      })}
-      {rootFiles?.map((file) => (
-        <DropdownMenuItem key={file.id} asChild>
-          <Link
-            href={`/workspace/${workspaceId}/files/${file.id}`}
-            className={cn(currentFileId === file.id && 'bg-[var(--surface-active)]')}
-          >
-            <svg
-              className='size-[14px] flex-shrink-0 text-[var(--text-icon)]'
-              viewBox='0 0 24 24'
-              fill='none'
-              stroke='currentColor'
-              strokeWidth='2'
-              strokeLinecap='round'
-              strokeLinejoin='round'
-              aria-hidden='true'
-            >
-              <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
-              <path d='M14 2v4a2 2 0 0 0 2 2h4' />
-            </svg>
-            <span className='truncate'>{file.name}</span>
-          </Link>
-        </DropdownMenuItem>
-      ))}
-    </>
-  )
-}
-
-interface CollapsedSidebarMenuProps {
-  icon: React.ReactNode
-  hover: ReturnType<typeof useHoverMenu>
-  ariaLabel?: string
-  children: React.ReactNode
-  className?: string
-  primaryAction?: {
-    label: string
-    onSelect: () => void
-  }
-}
-
-interface CollapsedChatFlyoutItemProps {
-  chat: { id: string; href: string; name: string; isActive?: boolean; isUnread?: boolean }
-  isCurrentRoute: boolean
-  isMenuOpen?: boolean
-  isEditing?: boolean
-  editValue?: string
-  inputRef?: React.RefObject<HTMLInputElement | null>
-  isRenaming?: boolean
-  onEditValueChange?: (value: string) => void
-  onEditKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
-  onEditBlur?: () => void
-  onContextMenu?: (e: ReactMouseEvent, chatId: string) => void
-  onMorePointerDown?: () => void
-  onMoreClick?: (e: ReactMouseEvent<HTMLButtonElement>, chatId: string) => void
-}
-
-interface CollapsedWorkflowFlyoutItemProps {
-  workflow: WorkflowMetadata
-  href: string
-  isCurrentRoute?: boolean
-  isEditing?: boolean
-  editValue?: string
-  inputRef?: React.RefObject<HTMLInputElement | null>
-  isRenaming?: boolean
-  onEditValueChange?: (value: string) => void
-  onEditKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
-  onEditBlur?: () => void
-  onOpenInNewTab?: () => void
-  onRename?: () => void
-  canRename?: boolean
-}
-
-const EDIT_ROW_CLASS = cn(
-  chipVariants({ active: true, fullWidth: true }),
-  'mx-0 min-w-0 cursor-default select-none text-small'
-)
-
-export function CollapsedSidebarMenu({
-  icon,
-  hover,
-  ariaLabel,
-  children,
-  className,
-  primaryAction,
-}: CollapsedSidebarMenuProps) {
-  return (
-    <div className={cn('flex flex-col px-2', className)}>
-      <DropdownMenu
-        open={hover.isOpen}
-        onOpenChange={(open) => {
-          if (open) hover.open()
-          else hover.close()
-        }}
-        modal={false}
-      >
-        <div {...hover.triggerProps}>
-          <DropdownMenuTrigger asChild>
-            <button
-              type='button'
-              aria-label={ariaLabel}
-              className={chipVariants({ fullWidth: true })}
-            >
-              {icon}
-            </button>
-          </DropdownMenuTrigger>
-        </div>
-        <DropdownMenuContent side='right' align='start' sideOffset={8} {...hover.contentProps}>
-          {primaryAction && (
-            <>
-              <DropdownMenuItem onSelect={primaryAction.onSelect}>
-                <Plus className='size-[14px]' />
-                {primaryAction.label}
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-            </>
-          )}
-          {children}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  )
-}
-
-export function CollapsedChatFlyoutItem({
-  chat,
-  isCurrentRoute,
-  isMenuOpen = false,
-  isEditing = false,
-  editValue,
-  inputRef,
-  isRenaming = false,
-  onEditValueChange,
-  onEditKeyDown,
-  onEditBlur,
-  onContextMenu,
-  onMorePointerDown,
-  onMoreClick,
-}: CollapsedChatFlyoutItemProps) {
-  const showActions = chat.id !== 'new' && onMoreClick
-
-  if (isEditing) {
-    return (
-      <div className={EDIT_ROW_CLASS}>
-        <input
-          aria-label={`Rename chat ${chat.name}`}
-          ref={inputRef}
-          value={editValue ?? chat.name}
-          onChange={(e) => onEditValueChange?.(e.target.value)}
-          onKeyDown={onEditKeyDown}
-          onBlur={onEditBlur}
-          className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-small outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-          maxLength={100}
-          disabled={isRenaming}
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}
-          autoComplete='off'
-          autoCorrect='off'
-          autoCapitalize='off'
-          spellCheck='false'
-        />
-      </div>
-    )
-  }
-
-  return (
-    <DropdownMenuItem
-      asChild
-      className={cn((isCurrentRoute || isMenuOpen) && 'bg-[var(--surface-active)]')}
-      action={
-        showActions ? (
-          <DropdownMenuItemAction
-            aria-label='Chat options'
-            onPointerDown={onMorePointerDown}
-            onClick={(e) => onMoreClick?.(e, chat.id)}
-            className={cn(isMenuOpen && 'opacity-100')}
-          >
-            <MoreHorizontal />
-          </DropdownMenuItemAction>
-        ) : undefined
-      }
-    >
-      <Link
-        href={chat.href}
-        onContextMenu={
-          chat.id !== 'new' && onContextMenu ? (e) => onContextMenu(e, chat.id) : undefined
-        }
-      >
-        <ConversationListItem
-          title={chat.name}
-          isActive={!!chat.isActive}
-          isUnread={!!chat.isUnread}
-        />
-      </Link>
-    </DropdownMenuItem>
-  )
-}
-
-export function CollapsedWorkflowFlyoutItem({
-  workflow,
-  href,
-  isCurrentRoute = false,
-  isEditing = false,
-  editValue,
-  inputRef,
-  isRenaming = false,
-  onEditValueChange,
-  onEditKeyDown,
-  onEditBlur,
-  onOpenInNewTab,
-  onRename,
-  canRename = true,
-}: CollapsedWorkflowFlyoutItemProps) {
-  const hasActions = !!onOpenInNewTab || !!onRename
-  const [actionsOpen, setActionsOpen] = useState(false)
-
-  if (isEditing) {
-    return (
-      <div className={EDIT_ROW_CLASS}>
-        <input
-          aria-label={`Rename workflow ${workflow.name}`}
-          ref={inputRef}
-          value={editValue ?? workflow.name}
-          onChange={(e) => onEditValueChange?.(e.target.value)}
-          onKeyDown={onEditKeyDown}
-          onBlur={onEditBlur}
-          className='w-full min-w-0 border-0 bg-transparent p-0 text-[var(--text-body)] text-small outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-          maxLength={100}
-          disabled={isRenaming}
-          onClick={(e) => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}
-          autoComplete='off'
-          autoCorrect='off'
-          autoCapitalize='off'
-          spellCheck='false'
-        />
-      </div>
-    )
-  }
-
-  return (
-    <DropdownMenuItem
-      asChild
-      className={cn((isCurrentRoute || actionsOpen) && 'bg-[var(--surface-active)]')}
-      action={
-        hasActions ? (
-          <DropdownMenuSub
-            open={actionsOpen}
-            onOpenChange={(open) => {
-              if (!open) setActionsOpen(false)
-            }}
-          >
-            <DropdownMenuSubTrigger asChild>
-              <DropdownMenuItemAction
-                aria-label='Workflow options'
-                onClick={() => setActionsOpen((prev) => !prev)}
-                className={cn(actionsOpen && 'opacity-100')}
-              >
-                <MoreHorizontal />
-              </DropdownMenuItemAction>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
-              {onOpenInNewTab && (
-                <DropdownMenuItem onSelect={onOpenInNewTab}>
-                  <SquareArrowUpRight className='size-[14px]' />
-                  Open in new tab
-                </DropdownMenuItem>
-              )}
-              {onRename && (
-                <DropdownMenuItem
-                  disabled={!canRename}
-                  onSelect={(e) => {
-                    e.preventDefault()
-                    setActionsOpen(false)
-                    onRename()
-                  }}
-                >
-                  <Pencil className='size-[14px]' />
-                  Rename
-                </DropdownMenuItem>
-              )}
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-        ) : undefined
-      }
-    >
-      <Link
-        href={href}
-        onContextMenu={
-          hasActions
-            ? (e) => {
-                e.preventDefault()
-                setActionsOpen(true)
-              }
-            : undefined
-        }
-      >
-        <span className='min-w-0 flex-1 truncate'>{workflow.name}</span>
-      </Link>
-    </DropdownMenuItem>
-  )
-}
-
-export function CollapsedFolderItems({
-  nodes,
-  workflowsByFolder,
-  workspaceId,
-  currentWorkflowId,
-  editingWorkflowId,
-  editingValue,
-  editInputRef,
-  isRenamingWorkflow,
-  onEditValueChange,
-  onEditKeyDown,
-  onEditBlur,
-  onWorkflowOpenInNewTab,
-  onWorkflowRename,
-  canRenameWorkflow,
-}: {
-  nodes: FolderTreeNode[]
-  workflowsByFolder: Record<string, WorkflowMetadata[]>
-  workspaceId: string
-  currentWorkflowId?: string
-  editingWorkflowId?: string | null
-  editingValue?: string
-  editInputRef?: React.RefObject<HTMLInputElement | null>
-  isRenamingWorkflow?: boolean
-  onEditValueChange?: (value: string) => void
-  onEditKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
-  onEditBlur?: () => void
-  onWorkflowOpenInNewTab?: (workflow: WorkflowMetadata) => void
-  onWorkflowRename?: (workflow: WorkflowMetadata) => void
-  canRenameWorkflow?: boolean
-}) {
-  return (
-    <>
-      {nodes.map((folder) => {
-        const folderWorkflows = workflowsByFolder[folder.id] || []
-        const hasChildren = folder.children.length > 0 || folderWorkflows.length > 0
-
-        if (!hasChildren) {
-          return (
-            <DropdownMenuItem key={folder.id} disabled>
-              <Folder className='size-[14px]' />
-              <span className='truncate'>{folder.name}</span>
-            </DropdownMenuItem>
-          )
-        }
-
-        return (
-          <DropdownMenuSub key={folder.id}>
-            <DropdownMenuSubTrigger className='focus:bg-[var(--surface-active)] data-[state=open]:bg-[var(--surface-active)]'>
-              <Folder className='size-[14px]' />
-              <span className='truncate'>{folder.name}</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
-              <CollapsedFolderItems
-                nodes={folder.children}
-                workflowsByFolder={workflowsByFolder}
-                workspaceId={workspaceId}
-                currentWorkflowId={currentWorkflowId}
-                editingWorkflowId={editingWorkflowId}
-                editingValue={editingValue}
-                editInputRef={editInputRef}
-                isRenamingWorkflow={isRenamingWorkflow}
-                onEditValueChange={onEditValueChange}
-                onEditKeyDown={onEditKeyDown}
-                onEditBlur={onEditBlur}
-                onWorkflowOpenInNewTab={onWorkflowOpenInNewTab}
-                onWorkflowRename={onWorkflowRename}
-                canRenameWorkflow={canRenameWorkflow}
-              />
-              {folderWorkflows.map((workflow) => (
-                <CollapsedWorkflowFlyoutItem
-                  key={workflow.id}
-                  workflow={workflow}
-                  href={`/workspace/${workspaceId}/w/${workflow.id}`}
-                  isCurrentRoute={workflow.id === currentWorkflowId}
-                  isEditing={workflow.id === editingWorkflowId}
-                  editValue={editingValue}
-                  inputRef={editInputRef}
-                  isRenaming={isRenamingWorkflow}
-                  onEditValueChange={onEditValueChange}
-                  onEditKeyDown={onEditKeyDown}
-                  onEditBlur={onEditBlur}
-                  onOpenInNewTab={
-                    onWorkflowOpenInNewTab ? () => onWorkflowOpenInNewTab(workflow) : undefined
-                  }
-                  onRename={onWorkflowRename ? () => onWorkflowRename(workflow) : undefined}
-                  canRename={canRenameWorkflow}
-                />
-              ))}
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-        )
-      })}
-    </>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/index.ts
deleted file mode 100644
index addc565dcff..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export {
-  CollapsedChatFlyoutItem,
-  CollapsedFileFolderItems,
-  CollapsedFolderItems,
-  CollapsedSidebarMenu,
-  CollapsedWorkflowFlyoutItem,
-} from './collapsed-sidebar-menu'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts
index 23e217cbb84..aa526dbfc6a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts
@@ -1,10 +1,3 @@
-export {
-  CollapsedChatFlyoutItem,
-  CollapsedFileFolderItems,
-  CollapsedFolderItems,
-  CollapsedSidebarMenu,
-  CollapsedWorkflowFlyoutItem,
-} from './collapsed-sidebar-menu'
 export { FileList } from './file-list'
 export { HelpModal } from './help-modal'
 export { NavItemContextMenu } from './nav-item-context-menu'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 7137191b934..c6b4aa93506 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -11,8 +11,8 @@ import {
   Database,
   File,
   HelpCircle,
-  Home,
   Integration,
+  MessageCircle,
   Settings,
   Table,
 } from '@/components/emcn/icons'
@@ -110,7 +110,7 @@ export function SearchModal({
         {
           id: 'home',
           name: 'New chat',
-          icon: Home,
+          icon: MessageCircle,
           href: `/workspace/${workspaceId}/home`,
         },
         {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/index.ts
index 58c9f83092a..91df53b9f7a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/index.ts
@@ -1,12 +1,9 @@
 export { useAutoScroll } from './use-auto-scroll'
-export { useChatSelection } from './use-chat-selection'
 export { useContextMenu } from './use-context-menu'
 export { type DropIndicator, useDragDrop } from './use-drag-drop'
-export { useFlyoutInlineRename } from './use-flyout-inline-rename'
 export { useFolderExpand } from './use-folder-expand'
 export { useFolderOperations } from './use-folder-operations'
 export { useFolderSelection } from './use-folder-selection'
-export { useHoverMenu } from './use-hover-menu'
 export { useItemDrag } from './use-item-drag'
 export { useItemRename } from './use-item-rename'
 export {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-chat-selection.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-chat-selection.ts
deleted file mode 100644
index baaf03c4b70..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-chat-selection.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useCallback } from 'react'
-import { useFolderStore } from '@/stores/folders/store'
-
-interface UseChatSelectionProps {
-  /**
-   * Flat array of all chat IDs in display order
-   */
-  chatIds: string[]
-}
-
-/**
- * Hook for managing chat selection with support for single and range selection.
- * Handles shift-click for range selection.
- * cmd/ctrl+click is handled by the browser (opens in new tab) and never reaches this handler.
- * Uses the last selected chat as the anchor point for range selections.
- * Selecting chats clears workflow/folder selections and vice versa.
- */
-export function useChatSelection({ chatIds }: UseChatSelectionProps) {
-  const selectedChats = useFolderStore((s) => s.selectedChats)
-
-  const handleChatClick = useCallback(
-    (chatId: string, shiftKey: boolean) => {
-      const {
-        selectChatOnly,
-        selectChatRange,
-        toggleChatSelection,
-        lastSelectedChatId: anchor,
-      } = useFolderStore.getState()
-      if (shiftKey && anchor && anchor !== chatId) {
-        selectChatRange(chatIds, anchor, chatId)
-      } else if (shiftKey) {
-        toggleChatSelection(chatId)
-      } else {
-        selectChatOnly(chatId)
-      }
-    },
-    [chatIds]
-  )
-
-  return {
-    selectedChats,
-    handleChatClick,
-  }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-flyout-inline-rename.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-flyout-inline-rename.ts
deleted file mode 100644
index a492918d789..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-flyout-inline-rename.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
-
-const logger = createLogger('useFlyoutInlineRename')
-
-interface RenameTarget {
-  id: string
-  name: string
-}
-
-interface UseFlyoutInlineRenameProps {
-  itemType: string
-  onSave: (id: string, name: string) => Promise<void>
-}
-
-export function useFlyoutInlineRename({ itemType, onSave }: UseFlyoutInlineRenameProps) {
-  const [editingTarget, setEditingTarget] = useState<RenameTarget | null>(null)
-  const [value, setValue] = useState('')
-  const [isSaving, setIsSaving] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const cancelRequestedRef = useRef(false)
-  const isSavingRef = useRef(false)
-
-  useEffect(() => {
-    if (editingTarget && inputRef.current) {
-      inputRef.current.focus()
-      inputRef.current.select()
-    }
-  }, [editingTarget])
-
-  const startRename = useCallback((target: RenameTarget) => {
-    cancelRequestedRef.current = false
-    setEditingTarget(target)
-    setValue(target.name)
-  }, [])
-
-  const cancelRename = useCallback(() => {
-    cancelRequestedRef.current = true
-    setEditingTarget(null)
-  }, [])
-
-  const saveRename = useCallback(async () => {
-    if (cancelRequestedRef.current) {
-      cancelRequestedRef.current = false
-      return
-    }
-
-    if (!editingTarget || isSavingRef.current) {
-      return
-    }
-
-    const trimmedValue = value.trim()
-    if (!trimmedValue || trimmedValue === editingTarget.name) {
-      setEditingTarget(null)
-      return
-    }
-
-    isSavingRef.current = true
-    setIsSaving(true)
-    try {
-      await onSave(editingTarget.id, trimmedValue)
-      setEditingTarget(null)
-    } catch (error) {
-      logger.error(`Failed to rename ${itemType}:`, {
-        error,
-        itemId: editingTarget.id,
-        oldName: editingTarget.name,
-        newName: trimmedValue,
-      })
-      setValue(editingTarget.name)
-    } finally {
-      isSavingRef.current = false
-      setIsSaving(false)
-    }
-  }, [editingTarget, itemType, onSave, value])
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        e.preventDefault()
-        void saveRename()
-      } else if (e.key === 'Escape') {
-        e.preventDefault()
-        cancelRename()
-      }
-    },
-    [cancelRename, saveRename]
-  )
-
-  return {
-    editingId: editingTarget?.id ?? null,
-    value,
-    setValue,
-    isSaving,
-    inputRef,
-    startRename,
-    cancelRename,
-    saveRename,
-    handleKeyDown,
-  }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-hover-menu.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-hover-menu.ts
deleted file mode 100644
index 9b494b80481..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-hover-menu.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-
-const CLOSE_DELAY_MS = 150
-
-const preventAutoFocus = (e: Event) => e.preventDefault()
-
-/**
- * Manages hover-triggered dropdown menu state.
- * Provides handlers for trigger and content mouse events with a delay
- * to prevent flickering when moving between trigger and content.
- */
-export function useHoverMenu() {
-  const [isOpen, setIsOpen] = useState(false)
-  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const isLockedRef = useRef(false)
-  const hoverRegionCountRef = useRef(0)
-
-  const cancelClose = useCallback(() => {
-    if (closeTimerRef.current) {
-      clearTimeout(closeTimerRef.current)
-      closeTimerRef.current = null
-    }
-  }, [])
-
-  useEffect(() => {
-    return () => {
-      if (closeTimerRef.current) {
-        clearTimeout(closeTimerRef.current)
-      }
-    }
-  }, [])
-
-  const scheduleClose = useCallback(() => {
-    if (isLockedRef.current) {
-      return
-    }
-    cancelClose()
-    closeTimerRef.current = setTimeout(() => {
-      if (!isLockedRef.current && hoverRegionCountRef.current === 0) {
-        setIsOpen(false)
-      }
-    }, CLOSE_DELAY_MS)
-  }, [cancelClose])
-
-  const open = useCallback(() => {
-    cancelClose()
-    setIsOpen(true)
-  }, [cancelClose])
-
-  const close = useCallback(() => {
-    if (isLockedRef.current) {
-      return
-    }
-    cancelClose()
-    setIsOpen(false)
-  }, [cancelClose])
-
-  const setLocked = useCallback(
-    (locked: boolean) => {
-      isLockedRef.current = locked
-      cancelClose()
-      if (locked) {
-        setIsOpen(true)
-      } else if (hoverRegionCountRef.current === 0) {
-        setIsOpen(false)
-      }
-    },
-    [cancelClose]
-  )
-
-  const handleTriggerMouseEnter = useCallback(() => {
-    hoverRegionCountRef.current += 1
-    open()
-  }, [open])
-
-  const handleTriggerMouseLeave = useCallback(() => {
-    hoverRegionCountRef.current = Math.max(0, hoverRegionCountRef.current - 1)
-    scheduleClose()
-  }, [scheduleClose])
-
-  const handleContentMouseEnter = useCallback(() => {
-    hoverRegionCountRef.current += 1
-    cancelClose()
-  }, [cancelClose])
-
-  const handleContentMouseLeave = useCallback(() => {
-    hoverRegionCountRef.current = Math.max(0, hoverRegionCountRef.current - 1)
-    scheduleClose()
-  }, [scheduleClose])
-
-  const triggerProps = useMemo(
-    () =>
-      ({
-        onMouseEnter: handleTriggerMouseEnter,
-        onMouseLeave: handleTriggerMouseLeave,
-      }) as const,
-    [handleTriggerMouseEnter, handleTriggerMouseLeave]
-  )
-
-  const contentProps = useMemo(
-    () =>
-      ({
-        onMouseEnter: handleContentMouseEnter,
-        onMouseLeave: handleContentMouseLeave,
-        onCloseAutoFocus: preventAutoFocus,
-      }) as const,
-    [handleContentMouseEnter, handleContentMouseLeave]
-  )
-
-  return { isOpen, open, close, setLocked, triggerProps, contentProps }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index d9a0a563938..68e808d6a73 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -2,8 +2,7 @@
 
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { MoreHorizontal, Pin } from 'lucide-react'
-import Link from 'next/link'
+import { MoreHorizontal } from 'lucide-react'
 import { useParams, usePathname, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import {
@@ -16,7 +15,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   FolderPlus,
-  Home,
   Library,
   Loader,
   Skeleton,
@@ -30,28 +28,21 @@ import {
   Files,
   HelpCircle,
   Integration,
-  PanelLeft,
+  MessageCircle,
   Plus,
   Search,
   Settings,
   Table,
-  Task,
-  Workflow,
 } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
-import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import { isMacPlatform } from '@/lib/core/utils/platform'
-import { buildFolderTree, getFolderPath } from '@/lib/folders/tree'
+import { getFolderPath } from '@/lib/folders/tree'
 import { captureEvent } from '@/lib/posthog/client'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
 import {
-  CollapsedChatFlyoutItem,
-  CollapsedFolderItems,
-  CollapsedSidebarMenu,
-  CollapsedWorkflowFlyoutItem,
   HelpModal,
   NavItemContextMenu,
   SearchModal,
@@ -63,44 +54,24 @@ import {
   buildConnectedAccountSearchItems,
   buildIntegrationSearchItems,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/integration-search-items'
-import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
-import { DeleteModal } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal'
 import {
   SIDEBAR_ITEM_GAP_CLASS,
   SIDEBAR_SECTION_GAP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import {
-  useChatSelection,
   useContextMenu,
-  useFlyoutInlineRename,
   useFolderOperations,
-  useHoverMenu,
   useSidebarResize,
   useWorkflowOperations,
   useWorkspaceLogoUpload,
   useWorkspaceManagement,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import {
-  compareByOrder,
-  createSidebarDragGhost,
-  groupWorkflowsByFolder,
-} from '@/app/workspace/[workspaceId]/w/components/sidebar/utils'
 import { useImportWorkflow } from '@/app/workspace/[workspaceId]/w/hooks'
 import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
 import { useFolderMap, useFolders } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
-import {
-  useCreateMothershipChat,
-  useDeleteMothershipChat,
-  useDeleteMothershipChats,
-  useMarkMothershipChatRead,
-  useMarkMothershipChatUnread,
-  useMothershipChats,
-  useRenameMothershipChat,
-  useSetMothershipChatPinned,
-} from '@/hooks/queries/mothership-chats'
+import { useCreateMothershipChat, useMothershipChats } from '@/hooks/queries/mothership-chats'
 import { useTablesList } from '@/hooks/queries/tables'
-import { useUpdateWorkflow } from '@/hooks/queries/workflows'
 import type { Workspace } from '@/hooks/queries/workspace'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 import { useMothershipChatEvents } from '@/hooks/use-mothership-chat-events'
@@ -145,120 +116,6 @@ function SidebarItemSkeleton() {
   )
 }
 
-const SidebarChatItem = memo(function SidebarChatItem({
-  chat,
-  isCurrentRoute,
-  isSelected,
-  isActive,
-  isUnread,
-  isPinned,
-  isMenuOpen,
-  showCollapsedTooltips,
-  onMultiSelectClick,
-  onContextMenu,
-  onMorePointerDown,
-  onMoreClick,
-}: {
-  chat: { id: string; href: string; name: string }
-  isCurrentRoute: boolean
-  isSelected: boolean
-  isActive: boolean
-  isUnread: boolean
-  isPinned: boolean
-  isMenuOpen: boolean
-  showCollapsedTooltips: boolean
-  onMultiSelectClick: (chatId: string, shiftKey: boolean) => void
-  onContextMenu: (e: React.MouseEvent, chatId: string) => void
-  onMorePointerDown: () => void
-  onMoreClick: (e: React.MouseEvent<HTMLButtonElement>, chatId: string) => void
-}) {
-  const dragGhostRef = useRef<HTMLElement | null>(null)
-
-  function handleDragStart(e: React.DragEvent) {
-    e.dataTransfer.effectAllowed = 'copyMove'
-    e.dataTransfer.setData(
-      SIM_RESOURCES_DRAG_TYPE,
-      JSON.stringify([{ type: 'task', id: chat.id, title: chat.name }])
-    )
-    const ghost = createSidebarDragGhost(chat.name, { kind: 'task' })
-    void ghost.offsetHeight
-    e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
-    dragGhostRef.current = ghost
-  }
-
-  function handleDragEnd() {
-    if (dragGhostRef.current) {
-      dragGhostRef.current.remove()
-      dragGhostRef.current = null
-    }
-  }
-
-  return (
-    <SidebarTooltip label={chat.name} enabled={showCollapsedTooltips}>
-      <Link
-        href={chat.href}
-        className={chipVariants({
-          active: isCurrentRoute || isSelected || isMenuOpen,
-          fullWidth: true,
-        })}
-        onClick={(e) => {
-          if (e.metaKey || e.ctrlKey) return
-          if (e.shiftKey) {
-            e.preventDefault()
-            onMultiSelectClick(chat.id, true)
-          } else {
-            useFolderStore.getState().selectChatOnly(chat.id)
-          }
-        }}
-        onContextMenu={(e) => onContextMenu(e, chat.id)}
-        draggable
-        onDragStart={handleDragStart}
-        onDragEnd={handleDragEnd}
-      >
-        <div className='min-w-0 flex-1 truncate text-[var(--text-body)]'>{chat.name}</div>
-        {chat.id !== 'new' && (
-          <div className='relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center'>
-            {(isActive || (!isCurrentRoute && isUnread)) && (
-              <span
-                aria-hidden='true'
-                className={cn(
-                  'h-[6px] w-[6px] rounded-full transition-opacity',
-                  isMenuOpen ? 'opacity-0' : 'group-hover:opacity-0'
-                )}
-                style={{
-                  backgroundColor: isActive ? '#EAB308' : 'var(--brand-accent)',
-                }}
-              />
-            )}
-            {!isActive && !isUnread && isPinned && !isCurrentRoute && !isMenuOpen && (
-              <Pin
-                aria-hidden='true'
-                className='absolute size-[12px] text-[var(--text-icon)] group-hover:hidden'
-              />
-            )}
-            <button
-              type='button'
-              aria-label='Chat options'
-              onPointerDown={onMorePointerDown}
-              onClick={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                onMoreClick(e, chat.id)
-              }}
-              className={cn(
-                'absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100',
-                isMenuOpen && 'opacity-100'
-              )}
-            >
-              <MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
-            </button>
-          </div>
-        )}
-      </Link>
-    </SidebarTooltip>
-  )
-})
-
 interface SidebarNavItemData {
   id: string
   label: string
@@ -283,15 +140,13 @@ function isNavItemActive(item: SidebarNavItemData, pathname: string | null): boo
 const SidebarNavItem = memo(function SidebarNavItem({
   item,
   active,
-  showCollapsedTooltips,
   onContextMenu,
 }: {
   item: SidebarNavItemData
   active: boolean
-  showCollapsedTooltips: boolean
   onContextMenu?: (e: React.MouseEvent, href: string) => void
 }) {
-  const element = item.href ? (
+  return item.href ? (
     <ChipLink
       href={item.href}
       data-item-id={item.id}
@@ -322,20 +177,19 @@ const SidebarNavItem = memo(function SidebarNavItem({
       {item.label}
     </Chip>
   ) : null
-
-  if (!element) return null
-
-  return (
-    <SidebarTooltip label={item.label} enabled={showCollapsedTooltips}>
-      {element}
-    </SidebarTooltip>
-  )
 })
 
 /** Event name for sidebar scroll operations - centralized for consistency */
 export const SIDEBAR_SCROLL_EVENT = 'sidebar-scroll-to-item'
 
-const HIDDEN_STYLE = { display: 'none' } as const
+interface SidebarProps {
+  /**
+   * `docked` fills the chrome shell at full height. `flyout` renders inside the
+   * hover dropdown panel: content-sized (dropdown-like) on the popover surface,
+   * shrinking and scrolling internally when taller than the panel's max height.
+   */
+  variant?: 'docked' | 'flyout'
+}
 
 /**
  * Sidebar component with resizable width that persists across page refreshes.
@@ -349,7 +203,8 @@ const HIDDEN_STYLE = { display: 'none' } as const
  *
  * @returns Sidebar with workflows panel
  */
-export const Sidebar = memo(function Sidebar() {
+export const Sidebar = memo(function Sidebar({ variant = 'docked' }: SidebarProps) {
+  const isFlyout = variant === 'flyout'
   const params = useParams()
   const workspaceId = params.workspaceId as string
   const workflowId = params.workflowId as string | undefined
@@ -381,7 +236,6 @@ export const Sidebar = memo(function Sidebar() {
 
   const setSidebarWidth = useSidebarStore((state) => state.setSidebarWidth)
   const isCollapsed = useSidebarStore((state) => state.isCollapsed)
-  const toggleCollapsed = useSidebarStore((state) => state.toggleCollapsed)
   const isOnWorkflowPage = !!workflowId
 
   const isCollapsedRef = useRef(isCollapsed)
@@ -391,16 +245,6 @@ export const Sidebar = memo(function Sidebar() {
 
   const isMac = isMacPlatform()
 
-  const [showCollapsedTooltips, setShowCollapsedTooltips] = useState(isCollapsed)
-
-  useEffect(() => {
-    if (isCollapsed) {
-      const timer = setTimeout(() => setShowCollapsedTooltips(true), 200)
-      return () => clearTimeout(timer)
-    }
-    setShowCollapsedTooltips(false)
-  }, [isCollapsed])
-
   const { isImporting, handleFileChange: handleImportFileChange } = useImportWorkflow({
     workspaceId,
   })
@@ -408,6 +252,18 @@ export const Sidebar = memo(function Sidebar() {
   const [isWorkspaceMenuOpen, setIsWorkspaceMenuOpen] = useState(false)
   const [isHelpModalOpen, setIsHelpModalOpen] = useState(false)
 
+  const setFlyoutPinned = useSidebarStore((state) => state.setFlyoutPinned)
+
+  /**
+   * Popups launched from the flyout (workspace menu) portal outside it, so
+   * hovering them would otherwise dismiss the flyout. Pin it while they're open.
+   */
+  useEffect(() => {
+    if (!isFlyout) return
+    setFlyoutPinned(isWorkspaceMenuOpen)
+    return () => setFlyoutPinned(false)
+  }, [isFlyout, isWorkspaceMenuOpen, setFlyoutPinned])
+
   /** Listens for external events to open help modal */
   useEffect(() => {
     const handleOpenHelpModal = () => setIsHelpModalOpen(true)
@@ -502,53 +358,6 @@ export const Sidebar = memo(function Sidebar() {
 
   useFolders(workspaceId)
   const { data: folderMap = {} } = useFolderMap(workspaceId)
-  const updateWorkflowMutation = useUpdateWorkflow()
-
-  const folderTree = useMemo(
-    () => (isCollapsed && workspaceId ? buildFolderTree(folderMap, workspaceId) : []),
-    [isCollapsed, workspaceId, folderMap]
-  )
-
-  const workflowsByFolder = useMemo(
-    () => (isCollapsed ? groupWorkflowsByFolder(regularWorkflows) : {}),
-    [isCollapsed, regularWorkflows]
-  )
-
-  const collapsedRootItems = useMemo(() => {
-    type RootItem =
-      | {
-          kind: 'folder'
-          sortOrder: number
-          createdAt?: Date
-          id: string
-          node: (typeof folderTree)[number]
-        }
-      | {
-          kind: 'workflow'
-          sortOrder: number
-          createdAt?: Date
-          id: string
-          workflow: (typeof regularWorkflows)[number]
-        }
-    const items: RootItem[] = [
-      ...folderTree.map((node) => ({
-        kind: 'folder' as const,
-        sortOrder: node.sortOrder,
-        createdAt: node.createdAt,
-        id: node.id,
-        node,
-      })),
-      ...(workflowsByFolder.root ?? []).map((w) => ({
-        kind: 'workflow' as const,
-        sortOrder: w.sortOrder,
-        createdAt: w.createdAt,
-        id: w.id,
-        workflow: w,
-      })),
-    ]
-    items.sort(compareByOrder)
-    return items
-  }, [folderTree, workflowsByFolder])
 
   const [activeNavItemHref, setActiveNavItemHref] = useState<string | null>(null)
   const {
@@ -590,90 +399,8 @@ export const Sidebar = memo(function Sidebar() {
   }, [activeNavItemHref])
 
   const createChatMutation = useCreateMothershipChat(workspaceId)
-  const deleteChatMutation = useDeleteMothershipChat(workspaceId)
-  const deleteChatsMutation = useDeleteMothershipChats(workspaceId)
-  const markChatReadMutation = useMarkMothershipChatRead(workspaceId)
-  const markChatUnreadMutation = useMarkMothershipChatUnread(workspaceId)
-  const renameChatMutation = useRenameMothershipChat(workspaceId)
-  const setChatPinnedMutation = useSetMothershipChatPinned(workspaceId)
-  const chatsHover = useHoverMenu()
-  const workflowsHover = useHoverMenu()
-
-  const {
-    isOpen: isChatContextMenuOpen,
-    position: chatContextMenuPosition,
-    menuRef: chatMenuRef,
-    handleContextMenu: handleChatContextMenuBase,
-    closeMenu: closeChatContextMenu,
-    preventDismiss: preventChatDismiss,
-  } = useContextMenu()
 
   const isCreatingChatRef = useRef(false)
-  const contextMenuSelectionRef = useRef<{ chatIds: string[]; names: string[] }>({
-    chatIds: [],
-    names: [],
-  })
-  const [menuOpenChatId, setMenuOpenChatId] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!isChatContextMenuOpen) setMenuOpenChatId(null)
-  }, [isChatContextMenuOpen])
-
-  const captureChatSelection = useCallback((chatId: string) => {
-    const { selectedChats, selectChatOnly } = useFolderStore.getState()
-    if (selectedChats.size > 0 && selectedChats.has(chatId)) {
-      contextMenuSelectionRef.current = {
-        chatIds: Array.from(selectedChats),
-        names: [],
-      }
-    } else {
-      selectChatOnly(chatId)
-      contextMenuSelectionRef.current = { chatIds: [chatId], names: [] }
-    }
-  }, [])
-
-  const handleChatContextMenu = useCallback(
-    (e: React.MouseEvent, chatId: string) => {
-      captureChatSelection(chatId)
-      setMenuOpenChatId(chatId)
-      chatsHover.setLocked(true)
-      preventChatDismiss()
-      handleChatContextMenuBase(e)
-    },
-    [captureChatSelection, handleChatContextMenuBase, preventChatDismiss, chatsHover]
-  )
-
-  const handleChatMorePointerDown = useCallback(() => {
-    if (isChatContextMenuOpen) {
-      preventChatDismiss()
-    }
-  }, [isChatContextMenuOpen, preventChatDismiss])
-
-  const handleChatMoreClick = useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>, chatId: string) => {
-      if (isChatContextMenuOpen) {
-        closeChatContextMenu()
-        return
-      }
-      chatsHover.setLocked(true)
-      captureChatSelection(chatId)
-      setMenuOpenChatId(chatId)
-      const rect = e.currentTarget.getBoundingClientRect()
-      handleChatContextMenuBase({
-        preventDefault: () => {},
-        stopPropagation: () => {},
-        clientX: rect.right,
-        clientY: rect.top,
-      } as React.MouseEvent)
-    },
-    [
-      isChatContextMenuOpen,
-      closeChatContextMenu,
-      captureChatSelection,
-      handleChatContextMenuBase,
-      chatsHover,
-    ]
-  )
 
   const searchModalWorkflows = useMemo(
     () =>
@@ -709,7 +436,7 @@ export const Sidebar = memo(function Sidebar() {
         {
           id: 'home',
           label: 'New chat',
-          icon: Home,
+          icon: MessageCircle,
           href: `/workspace/${workspaceId}/home`,
         },
         {
@@ -793,7 +520,7 @@ export const Sidebar = memo(function Sidebar() {
     [navigateToSettings, getSettingsHref, setSidebarWidth]
   )
 
-  const { data: fetchedChats = [], isLoading: chatsLoading } = useMothershipChats(workspaceId)
+  const { data: fetchedChats = [] } = useMothershipChats(workspaceId)
 
   useMothershipChatEvents(workspaceId)
 
@@ -849,27 +576,6 @@ export const Sidebar = memo(function Sidebar() {
     [fetchedKnowledgeBases, workspaceId, permissionConfig.hideKnowledgeBaseTab]
   )
 
-  const chatIds = useMemo(() => chats.map((t) => t.id), [chats])
-
-  const { selectedChats, handleChatClick } = useChatSelection({ chatIds })
-  const hasChatMultiSelection = selectedChats.size > 1
-
-  const isMultiChatContextMenu = contextMenuSelectionRef.current.chatIds.length > 1
-  const activeChatContextMenuItem =
-    !isMultiChatContextMenu && contextMenuSelectionRef.current.chatIds.length === 1
-      ? chats.find((chat) => chat.id === contextMenuSelectionRef.current.chatIds[0])
-      : null
-
-  const [isChatDeleteModalOpen, setIsChatDeleteModalOpen] = useState(false)
-
-  const handleDeleteChat = useCallback(() => {
-    const { chatIds: ids } = contextMenuSelectionRef.current
-    if (ids.length === 0) return
-    const names = ids.map((id) => chats.find((t) => t.id === id)?.name).filter(Boolean) as string[]
-    contextMenuSelectionRef.current = { chatIds: ids, names }
-    setIsChatDeleteModalOpen(true)
-  }, [chats])
-
   const navigateToPage = useCallback(
     (path: string) => {
       if (!isCollapsedRef.current) {
@@ -880,109 +586,6 @@ export const Sidebar = memo(function Sidebar() {
     [setSidebarWidth, router]
   )
 
-  const handleConfirmDeleteChats = () => {
-    const { chatIds: chatIdsToDelete } = contextMenuSelectionRef.current
-    if (chatIdsToDelete.length === 0) return
-
-    const currentPath = pathname ?? ''
-    const isViewingDeletedChat = chatIdsToDelete.some(
-      (id) => currentPath === `/workspace/${workspaceId}/chat/${id}`
-    )
-
-    const onDeleteSuccess = () => {
-      useFolderStore.getState().clearChatSelection()
-      if (isViewingDeletedChat) {
-        navigateToPage(`/workspace/${workspaceId}/home`)
-      }
-    }
-
-    if (chatIdsToDelete.length === 1) {
-      deleteChatMutation.mutate(chatIdsToDelete[0], { onSuccess: onDeleteSuccess })
-    } else {
-      deleteChatsMutation.mutate(chatIdsToDelete, { onSuccess: onDeleteSuccess })
-    }
-    setIsChatDeleteModalOpen(false)
-  }
-
-  const [visibleChatCount, setVisibleChatCount] = useState(5)
-  const chatFlyoutRename = useFlyoutInlineRename({
-    itemType: 'task',
-    onSave: async (chatId, name) => {
-      await renameChatMutation.mutateAsync({ chatId: chatId, title: name })
-    },
-  })
-
-  const workflowFlyoutRename = useFlyoutInlineRename({
-    itemType: 'workflow',
-    onSave: async (workflowIdToRename, name) => {
-      await updateWorkflowMutation.mutateAsync({
-        workspaceId,
-        workflowId: workflowIdToRename,
-        metadata: { name },
-      })
-    },
-  })
-
-  useEffect(() => {
-    chatsHover.setLocked(isChatContextMenuOpen || !!chatFlyoutRename.editingId)
-  }, [isChatContextMenuOpen, chatFlyoutRename.editingId, chatsHover.setLocked])
-
-  useEffect(() => {
-    workflowsHover.setLocked(!!workflowFlyoutRename.editingId)
-  }, [workflowFlyoutRename.editingId, workflowsHover.setLocked])
-
-  const handleChatOpenInNewTab = useCallback(() => {
-    const { chatIds: ids } = contextMenuSelectionRef.current
-    if (ids.length !== 1) return
-    window.open(`/workspace/${workspaceId}/chat/${ids[0]}`, '_blank', 'noopener,noreferrer')
-  }, [workspaceId])
-
-  const handleMarkChatAsRead = useCallback(() => {
-    const { chatIds: ids } = contextMenuSelectionRef.current
-    if (ids.length !== 1) return
-    markChatReadMutation.mutate(ids[0])
-  }, [])
-
-  const handleMarkChatAsUnread = useCallback(() => {
-    const { chatIds: ids } = contextMenuSelectionRef.current
-    if (ids.length !== 1) return
-    markChatUnreadMutation.mutate(ids[0])
-  }, [])
-
-  const handleStartChatRename = useCallback(() => {
-    const { chatIds: ids } = contextMenuSelectionRef.current
-    if (ids.length !== 1) return
-    const chatId = ids[0]
-    const chat = chats.find((t) => t.id === chatId)
-    if (!chat) return
-    chatsHover.setLocked(true)
-    chatFlyoutRename.startRename({ id: chatId, name: chat.name })
-  }, [chatFlyoutRename, chats, chatsHover])
-
-  const handleToggleChatPin = useCallback(() => {
-    const { chatIds: ids } = contextMenuSelectionRef.current
-    if (ids.length !== 1) return
-    const chatId = ids[0]
-    const chat = chats.find((t) => t.id === chatId)
-    if (!chat) return
-    setChatPinnedMutation.mutate({ chatId: chatId, pinned: !chat.isPinned })
-  }, [chats, setChatPinnedMutation])
-
-  const handleCollapsedWorkflowOpenInNewTab = useCallback(
-    (workflow: { id: string }) => {
-      window.open(`/workspace/${workspaceId}/w/${workflow.id}`, '_blank', 'noopener,noreferrer')
-    },
-    [workspaceId]
-  )
-
-  const handleCollapsedWorkflowRename = useCallback(
-    (workflow: { id: string; name: string }) => {
-      workflowsHover.setLocked(true)
-      workflowFlyoutRename.startRename({ id: workflow.id, name: workflow.name })
-    },
-    [workflowFlyoutRename, workflowsHover]
-  )
-
   const [hasOverflowTop, setHasOverflowTop] = useState(false)
   const [hasOverflowBottom, setHasOverflowBottom] = useState(false)
 
@@ -1123,17 +726,6 @@ export const Sidebar = memo(function Sidebar() {
     [workspaces, handleLeaveWorkspace]
   )
 
-  const chatsCollapsedIcon = <Task className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-
-  const workflowsCollapsedIcon = (
-    <Workflow className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-  )
-
-  const workflowsPrimaryAction = {
-    label: 'New workflow',
-    onSelect: handleCreateWorkflow,
-  }
-
   const handleNewChat = useCallback(async () => {
     if (!workspaceId || isCreatingChatRef.current) return
     isCreatingChatRef.current = true
@@ -1148,26 +740,6 @@ export const Sidebar = memo(function Sidebar() {
     }
   }, [workspaceId, navigateToPage])
 
-  const chatsPrimaryAction = {
-    label: 'New chat',
-    onSelect: handleNewChat,
-  }
-
-  const handleSeeMoreChats = useCallback(() => setVisibleChatCount((prev) => prev + 5), [])
-  const handleSeeLessChats = useCallback(() => setVisibleChatCount(5), [])
-
-  const handleCloseChatDeleteModal = useCallback(() => setIsChatDeleteModalOpen(false), [])
-
-  const handleEdgeKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (isCollapsed && (e.key === 'Enter' || e.key === ' ')) {
-        e.preventDefault()
-        toggleCollapsed()
-      }
-    },
-    [isCollapsed, toggleCollapsed]
-  )
-
   const handleOpenHelpFromMenu = useCallback(() => setIsHelpModalOpen(true), [])
 
   const handleOpenDocs = useCallback(() => {
@@ -1175,16 +747,6 @@ export const Sidebar = memo(function Sidebar() {
     captureEvent(posthog, 'docs_opened', { source: 'help_menu' })
   }, [posthog])
 
-  const handleChatRenameBlur = useCallback(
-    () => void chatFlyoutRename.saveRename(),
-    [chatFlyoutRename.saveRename]
-  )
-
-  const handleWorkflowRenameBlur = useCallback(
-    () => void workflowFlyoutRename.saveRename(),
-    [workflowFlyoutRename.saveRename]
-  )
-
   const resolveWorkspaceIdFromPath = useCallback((): string | undefined => {
     if (workspaceId) return workspaceId
     if (typeof window === 'undefined') return undefined
@@ -1259,14 +821,16 @@ export const Sidebar = memo(function Sidebar() {
         className='hidden'
         onChange={handleLogoFileChange}
       />
-      <div className='relative h-full'>
+      <div className={cn('relative', isFlyout ? 'flex max-h-full min-h-0 flex-col' : 'h-full')}>
         <aside
-          className='sidebar-container relative h-full overflow-hidden bg-[var(--surface-1)]'
-          data-collapsed={isCollapsed || undefined}
+          className={cn(
+            'sidebar-container relative overflow-hidden',
+            isFlyout ? 'flex min-h-0 flex-col bg-[var(--bg)]' : 'h-full bg-[var(--surface-1)]'
+          )}
           aria-label='Workspace sidebar'
           onClick={handleSidebarClick}
         >
-          <div className='flex h-full flex-col'>
+          <div className={cn('flex flex-col', isFlyout ? 'min-h-0' : 'h-full')}>
             <div className='flex flex-shrink-0 items-center px-2 pt-3'>
               <WorkspaceHeader
                 activeWorkspace={activeWorkspace}
@@ -1286,30 +850,11 @@ export const Sidebar = memo(function Sidebar() {
                 onLeaveWorkspace={handleLeaveWorkspaceWrapper}
                 isLeavingWorkspace={isLeavingWorkspace}
                 sessionUserId={sessionData?.user?.id}
-                isCollapsed={isCollapsed}
-                onExpandSidebar={toggleCollapsed}
               />
-              <SidebarTooltip label='Collapse sidebar' enabled={!isCollapsed} side='bottom'>
-                <button
-                  type='button'
-                  onClick={toggleCollapsed}
-                  className={cn(
-                    'sidebar-collapse-btn ml-2 flex h-[30px] items-center justify-center overflow-hidden rounded-lg transition-all duration-200 hover-hover:bg-[var(--surface-active)]',
-                    isCollapsed ? 'w-0 opacity-0' : 'w-[30px] opacity-100'
-                  )}
-                  aria-label='Collapse sidebar'
-                  tabIndex={isCollapsed ? -1 : undefined}
-                >
-                  <PanelLeft className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                </button>
-              </SidebarTooltip>
             </div>
 
             {isOnSettingsPage ? (
-              <SettingsSidebar
-                isCollapsed={isCollapsed}
-                showCollapsedTooltips={showCollapsedTooltips}
-              />
+              <SettingsSidebar />
             ) : (
               <>
                 <div
@@ -1324,164 +869,20 @@ export const Sidebar = memo(function Sidebar() {
                       key={item.id}
                       item={item}
                       active={isNavItemActive(item, pathname)}
-                      showCollapsedTooltips={showCollapsedTooltips}
                       onContextMenu={item.href ? handleNavItemContextMenu : undefined}
                     />
                   ))}
                 </div>
 
                 <div
-                  ref={isCollapsed ? undefined : scrollContainerRef}
+                  ref={scrollContainerRef}
                   className={cn(
-                    'flex flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pt-1.5 transition-colors duration-150',
+                    'flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pt-1.5 transition-colors duration-150',
                     !hasOverflowTop && 'border-transparent'
                   )}
                 >
                   <div ref={scrollContentRef} className='flex flex-col'>
-                    <div className='chats-section flex flex-shrink-0 flex-col'>
-                      <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-4'>
-                        <div className='text-[var(--text-muted)] text-small'>Chats</div>
-                        {!isCollapsed && (
-                          <div className='flex items-center justify-center gap-2'>
-                            <Tooltip.Root>
-                              <Tooltip.Trigger asChild>
-                                <Button
-                                  variant='quiet'
-                                  className='h-[18px] w-[18px] rounded-sm p-0'
-                                  onClick={handleNewChat}
-                                  disabled={createChatMutation.isPending}
-                                >
-                                  <Plus className='h-[16px] w-[16px]' />
-                                </Button>
-                              </Tooltip.Trigger>
-                              <Tooltip.Content>
-                                <Tooltip.Shortcut keys={isMac ? '⌘⇧K' : 'Ctrl+Shift+K'}>
-                                  New chat
-                                </Tooltip.Shortcut>
-                              </Tooltip.Content>
-                            </Tooltip.Root>
-                          </div>
-                        )}
-                      </div>
-                      {isCollapsed ? (
-                        <CollapsedSidebarMenu
-                          icon={chatsCollapsedIcon}
-                          hover={chatsHover}
-                          ariaLabel='Chats'
-                          className='mt-2'
-                          primaryAction={chatsPrimaryAction}
-                        >
-                          {chatsLoading ? (
-                            <DropdownMenuItem disabled>
-                              <Loader className='h-[14px] w-[14px]' animate />
-                              Loading...
-                            </DropdownMenuItem>
-                          ) : chats.length === 0 ? (
-                            <DropdownMenuItem disabled>No chats yet</DropdownMenuItem>
-                          ) : (
-                            chats.map((chat) => (
-                              <CollapsedChatFlyoutItem
-                                key={chat.id}
-                                chat={chat}
-                                isCurrentRoute={pathname === chat.href}
-                                isMenuOpen={menuOpenChatId === chat.id}
-                                isEditing={chat.id === chatFlyoutRename.editingId}
-                                editValue={chatFlyoutRename.value}
-                                inputRef={chatFlyoutRename.inputRef}
-                                isRenaming={chatFlyoutRename.isSaving}
-                                onEditValueChange={chatFlyoutRename.setValue}
-                                onEditKeyDown={chatFlyoutRename.handleKeyDown}
-                                onEditBlur={handleChatRenameBlur}
-                                onContextMenu={handleChatContextMenu}
-                                onMorePointerDown={handleChatMorePointerDown}
-                                onMoreClick={handleChatMoreClick}
-                              />
-                            ))
-                          )}
-                        </CollapsedSidebarMenu>
-                      ) : (
-                        <div className={cn(SIDEBAR_ITEM_GAP_CLASS, 'mt-2 flex flex-col px-2')}>
-                          {chatsLoading ? (
-                            <SidebarItemSkeleton />
-                          ) : (
-                            <>
-                              {chats.length === 0 ? (
-                                <div className='flex h-[30px] items-center px-2 text-[var(--text-muted)] text-small'>
-                                  No chats yet
-                                </div>
-                              ) : null}
-                              {/* `selectChatOnly` populates `selectedChats` on every click, so
-                                  a single entry just means "last clicked" — already conveyed by
-                                  `isCurrentRoute`. Highlight from selection only for explicit
-                                  multi-selection (size > 1), otherwise it lingers after navigating
-                                  away from a chat. */}
-                              {chats.slice(0, visibleChatCount).map((chat) => {
-                                const isCurrentRoute = pathname === chat.href
-                                const isRenaming = chatFlyoutRename.editingId === chat.id
-                                const isSelected =
-                                  chat.id !== 'new' &&
-                                  hasChatMultiSelection &&
-                                  selectedChats.has(chat.id)
-
-                                if (isRenaming) {
-                                  return (
-                                    <div
-                                      key={chat.id}
-                                      className={chipVariants({ active: true, fullWidth: true })}
-                                    >
-                                      <input
-                                        ref={chatFlyoutRename.inputRef}
-                                        value={chatFlyoutRename.value}
-                                        onChange={(e) => chatFlyoutRename.setValue(e.target.value)}
-                                        onKeyDown={chatFlyoutRename.handleKeyDown}
-                                        onBlur={handleChatRenameBlur}
-                                        className='min-w-0 flex-1 border-none bg-transparent text-[14px] text-[var(--text-body)] outline-none'
-                                      />
-                                    </div>
-                                  )
-                                }
-
-                                return (
-                                  <SidebarChatItem
-                                    key={chat.id}
-                                    chat={chat}
-                                    isCurrentRoute={isCurrentRoute}
-                                    isSelected={isSelected}
-                                    isActive={!!chat.isActive}
-                                    isUnread={!!chat.isUnread}
-                                    isPinned={!!chat.isPinned}
-                                    isMenuOpen={menuOpenChatId === chat.id}
-                                    showCollapsedTooltips={showCollapsedTooltips}
-                                    onMultiSelectClick={handleChatClick}
-                                    onContextMenu={handleChatContextMenu}
-                                    onMorePointerDown={handleChatMorePointerDown}
-                                    onMoreClick={handleChatMoreClick}
-                                  />
-                                )
-                              })}
-                              {chats.length > 5 && (
-                                <button
-                                  type='button'
-                                  onClick={
-                                    chats.length > visibleChatCount
-                                      ? handleSeeMoreChats
-                                      : handleSeeLessChats
-                                  }
-                                  className={cn(
-                                    chipVariants({ fullWidth: true }),
-                                    'text-[var(--text-muted)] text-small'
-                                  )}
-                                >
-                                  {chats.length > visibleChatCount ? 'See more' : 'See less'}
-                                </button>
-                              )}
-                            </>
-                          )}
-                        </div>
-                      )}
-                    </div>
-
-                    <div className={cn(SIDEBAR_SECTION_GAP_CLASS, 'flex flex-shrink-0 flex-col')}>
+                    <div className='flex flex-shrink-0 flex-col'>
                       <div className='px-4 pb-2'>
                         <div className='text-[var(--text-muted)] text-small'>Workspace</div>
                       </div>
@@ -1491,7 +892,6 @@ export const Sidebar = memo(function Sidebar() {
                             key={item.id}
                             item={item}
                             active={isNavItemActive(item, pathname)}
-                            showCollapsedTooltips={showCollapsedTooltips}
                             onContextMenu={handleNavItemContextMenu}
                           />
                         ))}
@@ -1506,155 +906,91 @@ export const Sidebar = memo(function Sidebar() {
                     >
                       <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-4'>
                         <div className='text-[var(--text-muted)] text-small'>Workflows</div>
-                        {!isCollapsed && (
-                          <div className='flex items-center justify-center gap-2'>
-                            <DropdownMenu>
-                              <Tooltip.Root>
-                                <Tooltip.Trigger asChild>
-                                  <DropdownMenuTrigger asChild>
-                                    <Button
-                                      variant='quiet'
-                                      className='h-[18px] w-[18px] rounded-sm p-0'
-                                      disabled={!permissionsLoading && !canEdit}
-                                    >
-                                      {isImporting || isCreatingFolder ? (
-                                        <Loader className='h-[16px] w-[16px]' animate />
-                                      ) : (
-                                        <MoreHorizontal className='h-[16px] w-[16px]' />
-                                      )}
-                                    </Button>
-                                  </DropdownMenuTrigger>
-                                </Tooltip.Trigger>
-                                <Tooltip.Content>
-                                  <p>More actions</p>
-                                </Tooltip.Content>
-                              </Tooltip.Root>
-                              <DropdownMenuContent
-                                align='start'
-                                sideOffset={8}
-                                className='min-w-[160px]'
-                              >
-                                <DropdownMenuItem
-                                  onSelect={handleImportWorkflow}
-                                  disabled={!canEdit || isImporting}
-                                >
-                                  <Upload />
-                                  {isImporting ? 'Importing...' : 'Import workflow'}
-                                </DropdownMenuItem>
-                                <DropdownMenuItem
-                                  onSelect={handleCreateFolder}
-                                  disabled={!canEdit || isCreatingFolder}
-                                >
-                                  <FolderPlus />
-                                  {isCreatingFolder ? 'Creating folder...' : 'Create folder'}
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
+                        <div className='flex items-center justify-center gap-2'>
+                          <DropdownMenu>
                             <Tooltip.Root>
                               <Tooltip.Trigger asChild>
-                                <Button
-                                  variant='quiet'
-                                  className='h-[18px] w-[18px] rounded-sm p-0'
-                                  onClick={handleCreateWorkflow}
-                                  disabled={isCreatingWorkflow || (!permissionsLoading && !canEdit)}
-                                >
-                                  <Plus className='h-[16px] w-[16px]' />
-                                </Button>
+                                <DropdownMenuTrigger asChild>
+                                  <Button
+                                    variant='quiet'
+                                    className='h-[18px] w-[18px] rounded-sm p-0'
+                                    disabled={!permissionsLoading && !canEdit}
+                                  >
+                                    {isImporting || isCreatingFolder ? (
+                                      <Loader className='h-[16px] w-[16px]' animate />
+                                    ) : (
+                                      <MoreHorizontal className='h-[16px] w-[16px]' />
+                                    )}
+                                  </Button>
+                                </DropdownMenuTrigger>
                               </Tooltip.Trigger>
                               <Tooltip.Content>
-                                {isCreatingWorkflow ? (
-                                  <p>Creating workflow...</p>
-                                ) : (
-                                  <Tooltip.Shortcut keys={isMac ? '⌘⇧P' : 'Ctrl+Shift+P'}>
-                                    New workflow
-                                  </Tooltip.Shortcut>
-                                )}
+                                <p>More actions</p>
                               </Tooltip.Content>
                             </Tooltip.Root>
-                          </div>
-                        )}
-                      </div>
-                      {isCollapsed ? (
-                        <CollapsedSidebarMenu
-                          icon={workflowsCollapsedIcon}
-                          hover={workflowsHover}
-                          ariaLabel='Workflows'
-                          className='mt-2'
-                          primaryAction={workflowsPrimaryAction}
-                        >
-                          {workflowsLoading && regularWorkflows.length === 0 ? (
-                            <DropdownMenuItem disabled>
-                              <Loader className='h-[14px] w-[14px]' animate />
-                              Loading...
-                            </DropdownMenuItem>
-                          ) : regularWorkflows.length === 0 ? (
-                            <DropdownMenuItem disabled>No workflows yet</DropdownMenuItem>
-                          ) : (
-                            <>
-                              {collapsedRootItems.map((item) =>
-                                item.kind === 'folder' ? (
-                                  <CollapsedFolderItems
-                                    key={item.id}
-                                    nodes={[item.node]}
-                                    workflowsByFolder={workflowsByFolder}
-                                    workspaceId={workspaceId}
-                                    currentWorkflowId={workflowId}
-                                    editingWorkflowId={workflowFlyoutRename.editingId}
-                                    editingValue={workflowFlyoutRename.value}
-                                    editInputRef={workflowFlyoutRename.inputRef}
-                                    isRenamingWorkflow={workflowFlyoutRename.isSaving}
-                                    onEditValueChange={workflowFlyoutRename.setValue}
-                                    onEditKeyDown={workflowFlyoutRename.handleKeyDown}
-                                    onEditBlur={handleWorkflowRenameBlur}
-                                    onWorkflowOpenInNewTab={handleCollapsedWorkflowOpenInNewTab}
-                                    onWorkflowRename={handleCollapsedWorkflowRename}
-                                    canRenameWorkflow={canEdit}
-                                  />
-                                ) : (
-                                  <CollapsedWorkflowFlyoutItem
-                                    key={item.id}
-                                    workflow={item.workflow}
-                                    href={`/workspace/${workspaceId}/w/${item.workflow.id}`}
-                                    isCurrentRoute={item.workflow.id === workflowId}
-                                    isEditing={item.workflow.id === workflowFlyoutRename.editingId}
-                                    editValue={workflowFlyoutRename.value}
-                                    inputRef={workflowFlyoutRename.inputRef}
-                                    isRenaming={workflowFlyoutRename.isSaving}
-                                    onEditValueChange={workflowFlyoutRename.setValue}
-                                    onEditKeyDown={workflowFlyoutRename.handleKeyDown}
-                                    onEditBlur={handleWorkflowRenameBlur}
-                                    onOpenInNewTab={() =>
-                                      handleCollapsedWorkflowOpenInNewTab(item.workflow)
-                                    }
-                                    onRename={() => handleCollapsedWorkflowRename(item.workflow)}
-                                    canRename={canEdit}
-                                  />
-                                )
+                            <DropdownMenuContent
+                              align='start'
+                              sideOffset={8}
+                              className='min-w-[160px]'
+                            >
+                              <DropdownMenuItem
+                                onSelect={handleImportWorkflow}
+                                disabled={!canEdit || isImporting}
+                              >
+                                <Upload />
+                                {isImporting ? 'Importing...' : 'Import workflow'}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem
+                                onSelect={handleCreateFolder}
+                                disabled={!canEdit || isCreatingFolder}
+                              >
+                                <FolderPlus />
+                                {isCreatingFolder ? 'Creating folder...' : 'Create folder'}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                          <Tooltip.Root>
+                            <Tooltip.Trigger asChild>
+                              <Button
+                                variant='quiet'
+                                className='h-[18px] w-[18px] rounded-sm p-0'
+                                onClick={handleCreateWorkflow}
+                                disabled={isCreatingWorkflow || (!permissionsLoading && !canEdit)}
+                              >
+                                <Plus className='h-[16px] w-[16px]' />
+                              </Button>
+                            </Tooltip.Trigger>
+                            <Tooltip.Content>
+                              {isCreatingWorkflow ? (
+                                <p>Creating workflow...</p>
+                              ) : (
+                                <Tooltip.Shortcut keys={isMac ? '⌘⇧P' : 'Ctrl+Shift+P'}>
+                                  New workflow
+                                </Tooltip.Shortcut>
                               )}
-                            </>
-                          )}
-                        </CollapsedSidebarMenu>
-                      ) : (
-                        <div className='mt-2 px-2'>
-                          {workflowsLoading && regularWorkflows.length === 0 ? (
-                            <SidebarItemSkeleton />
-                          ) : (
-                            <WorkflowList
-                              workspaceId={workspaceId}
-                              workflowId={workflowId}
-                              regularWorkflows={regularWorkflows}
-                              isLoading={isLoading}
-                              canReorder={canEdit}
-                              handleFileChange={handleImportFileChange}
-                              fileInputRef={fileInputRef}
-                              scrollContainerRef={scrollContainerRef}
-                              onCreateWorkflow={handleCreateWorkflow}
-                              onCreateFolder={handleCreateFolder}
-                              disableCreate={!canEdit || isCreatingWorkflow || isCreatingFolder}
-                            />
-                          )}
+                            </Tooltip.Content>
+                          </Tooltip.Root>
                         </div>
-                      )}
+                      </div>
+                      <div className='mt-2 px-2'>
+                        {workflowsLoading && regularWorkflows.length === 0 ? (
+                          <SidebarItemSkeleton />
+                        ) : (
+                          <WorkflowList
+                            workspaceId={workspaceId}
+                            workflowId={workflowId}
+                            regularWorkflows={regularWorkflows}
+                            isLoading={isLoading}
+                            canReorder={canEdit}
+                            handleFileChange={handleImportFileChange}
+                            fileInputRef={fileInputRef}
+                            scrollContainerRef={scrollContainerRef}
+                            onCreateWorkflow={handleCreateWorkflow}
+                            onCreateFolder={handleCreateFolder}
+                            disableCreate={!canEdit || isCreatingWorkflow || isCreatingFolder}
+                          />
+                        )}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -1667,20 +1003,16 @@ export const Sidebar = memo(function Sidebar() {
                   )}
                 >
                   <DropdownMenu>
-                    <SidebarTooltip label='Help' enabled={showCollapsedTooltips}>
-                      <DropdownMenuTrigger asChild>
-                        <button
-                          type='button'
-                          data-item-id='help'
-                          className={chipVariants({ fullWidth: true })}
-                        >
-                          <HelpCircle className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                          <span className='sidebar-collapse-hide truncate text-[var(--text-body)]'>
-                            Help
-                          </span>
-                        </button>
-                      </DropdownMenuTrigger>
-                    </SidebarTooltip>
+                    <DropdownMenuTrigger asChild>
+                      <button
+                        type='button'
+                        data-item-id='help'
+                        className={chipVariants({ fullWidth: true })}
+                      >
+                        <HelpCircle className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+                        <span className='truncate text-[var(--text-body)]'>Help</span>
+                      </button>
+                    </DropdownMenuTrigger>
                     <DropdownMenuContent align='start' side='top' sideOffset={4}>
                       <DropdownMenuItem onSelect={handleOpenDocs}>
                         <BookOpen className='h-[14px] w-[14px]' />
@@ -1698,7 +1030,6 @@ export const Sidebar = memo(function Sidebar() {
                       key={item.id}
                       item={item}
                       active={false}
-                      showCollapsedTooltips={showCollapsedTooltips}
                       onContextMenu={item.href ? handleNavItemContextMenu : undefined}
                     />
                   ))}
@@ -1712,59 +1043,21 @@ export const Sidebar = memo(function Sidebar() {
                   onOpenInNewTab={handleNavOpenInNewTab}
                   onCopyLink={handleNavCopyLink}
                 />
-
-                <ContextMenu
-                  isOpen={isChatContextMenuOpen}
-                  position={chatContextMenuPosition}
-                  menuRef={chatMenuRef}
-                  onClose={closeChatContextMenu}
-                  onOpenInNewTab={handleChatOpenInNewTab}
-                  onMarkAsRead={handleMarkChatAsRead}
-                  onMarkAsUnread={handleMarkChatAsUnread}
-                  onTogglePin={handleToggleChatPin}
-                  onRename={handleStartChatRename}
-                  onDelete={handleDeleteChat}
-                  showOpenInNewTab={!isMultiChatContextMenu}
-                  showMarkAsRead={!isMultiChatContextMenu && !!activeChatContextMenuItem?.isUnread}
-                  showMarkAsUnread={
-                    !isMultiChatContextMenu &&
-                    !!activeChatContextMenuItem &&
-                    !activeChatContextMenuItem.isUnread
-                  }
-                  showPin={!isMultiChatContextMenu && !!activeChatContextMenuItem}
-                  isPinned={!!activeChatContextMenuItem?.isPinned}
-                  showRename={!isMultiChatContextMenu}
-                  showDuplicate={false}
-                  disableRename={!canEdit}
-                  disableDelete={!canEdit}
-                />
-
-                <DeleteModal
-                  isOpen={isChatDeleteModalOpen}
-                  onClose={handleCloseChatDeleteModal}
-                  onConfirm={handleConfirmDeleteChats}
-                  isDeleting={deleteChatMutation.isPending || deleteChatsMutation.isPending}
-                  itemType='task'
-                  itemName={contextMenuSelectionRef.current.names}
-                />
               </>
             )}
           </div>
         </aside>
 
-        <div
-          className={cn(
-            'absolute top-0 right-0 bottom-0 z-20 w-[8px] translate-x-1/2',
-            isCollapsed ? 'cursor-e-resize' : 'cursor-ew-resize'
-          )}
-          onPointerDown={isCollapsed ? undefined : handlePointerDown}
-          onClick={isCollapsed ? toggleCollapsed : undefined}
-          onKeyDown={handleEdgeKeyDown}
-          role={isCollapsed ? 'button' : 'separator'}
-          tabIndex={0}
-          aria-orientation={isCollapsed ? undefined : 'vertical'}
-          aria-label={isCollapsed ? 'Expand sidebar' : 'Resize sidebar'}
-        />
+        {!isCollapsed && (
+          <div
+            className='absolute top-0 right-0 bottom-0 z-20 w-[8px] translate-x-1/2 cursor-ew-resize'
+            onPointerDown={handlePointerDown}
+            role='separator'
+            tabIndex={0}
+            aria-orientation='vertical'
+            aria-label='Resize sidebar'
+          />
+        )}
       </div>
 
       <SearchModal
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
index 2455cd70c38..485b9a2198b 100644
--- a/apps/sim/components/emcn/components/popover/popover.tsx
+++ b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -399,6 +399,11 @@ interface PopoverContentProps
   align?: 'start' | 'center' | 'end'
   /** Offset from anchor. Defaults to 20px for top, 14px for other sides. */
   sideOffset?: number
+  /**
+   * Offset along the alignment axis, in pixels
+   * @default 0
+   */
+  alignOffset?: number
   /**
    * Padding from viewport edges
    * @default 8
@@ -447,6 +452,7 @@ const PopoverContent = React.forwardRef<
       side = 'bottom',
       align = 'start',
       sideOffset,
+      alignOffset = 0,
       collisionPadding = 8,
       border = false,
       avoidCollisions = true,
@@ -596,6 +602,7 @@ const PopoverContent = React.forwardRef<
         side={side}
         align={align}
         sideOffset={effectiveSideOffset}
+        alignOffset={alignOffset}
         collisionPadding={collisionPadding}
         avoidCollisions={avoidCollisions}
         sticky='partial'
diff --git a/apps/sim/stores/constants.ts b/apps/sim/stores/constants.ts
index a4848017e98..70bcae0d2f8 100644
--- a/apps/sim/stores/constants.ts
+++ b/apps/sim/stores/constants.ts
@@ -22,8 +22,8 @@ const API_ENDPOINTS = {
 export const SIDEBAR_WIDTH = {
   DEFAULT: 248,
   MIN: 248,
-  /** Width when sidebar is collapsed to icon-only mode */
-  COLLAPSED: 51,
+  /** Collapsed sidebar is fully hidden; the toggle lives in the page title bar */
+  COLLAPSED: 0,
   /** Maximum is 30% of viewport, enforced dynamically */
   MAX_PERCENTAGE: 0.3,
 } as const
diff --git a/apps/sim/stores/sidebar/store.ts b/apps/sim/stores/sidebar/store.ts
index 6e0f67013aa..ab30f2dc15f 100644
--- a/apps/sim/stores/sidebar/store.ts
+++ b/apps/sim/stores/sidebar/store.ts
@@ -24,12 +24,35 @@ function applySidebarWidth(width: number) {
   document.documentElement.style.setProperty('--sidebar-width', `${value}px`)
 }
 
+/** Grace period before the hover flyout hides, so the cursor can cross gaps. */
+const FLYOUT_CLOSE_DELAY_MS = 180
+
+let flyoutCloseTimer: ReturnType<typeof setTimeout> | null = null
+
+/**
+ * While true, hover-leave is ignored — set when a popup (e.g. the workspace
+ * menu) opened from inside the flyout renders in a portal outside it, so
+ * moving the cursor into that popup doesn't dismiss the flyout underneath.
+ */
+let flyoutPinned = false
+
+/** Last hover state of the flyout/trigger, so unpinning knows whether to close. */
+let flyoutPointerInside = false
+
+function clearFlyoutCloseTimer() {
+  if (flyoutCloseTimer !== null) {
+    clearTimeout(flyoutCloseTimer)
+    flyoutCloseTimer = null
+  }
+}
+
 export const useSidebarStore = create<SidebarState>()(
   persist(
     (set, get) => ({
       workspaceDropdownOpen: false,
       sidebarWidth: SIDEBAR_WIDTH.DEFAULT,
       isCollapsed: false,
+      isFlyoutOpen: false,
       _hasHydrated: false,
       setWorkspaceDropdownOpen: (isOpen) => set({ workspaceDropdownOpen: isOpen }),
       setSidebarWidth: (width) => {
@@ -41,9 +64,38 @@ export const useSidebarStore = create<SidebarState>()(
       toggleCollapsed: () => {
         const { isCollapsed, sidebarWidth } = get()
         const nextCollapsed = !isCollapsed
-        set({ isCollapsed: nextCollapsed })
+        clearFlyoutCloseTimer()
+        flyoutPinned = false
+        set({ isCollapsed: nextCollapsed, isFlyoutOpen: false })
         applySidebarWidth(nextCollapsed ? SIDEBAR_WIDTH.COLLAPSED : clampSidebarWidth(sidebarWidth))
       },
+      openFlyout: () => {
+        flyoutPointerInside = true
+        clearFlyoutCloseTimer()
+        set({ isFlyoutOpen: true })
+      },
+      scheduleFlyoutClose: () => {
+        flyoutPointerInside = false
+        clearFlyoutCloseTimer()
+        if (flyoutPinned) return
+        flyoutCloseTimer = setTimeout(() => set({ isFlyoutOpen: false }), FLYOUT_CLOSE_DELAY_MS)
+      },
+      closeFlyout: () => {
+        clearFlyoutCloseTimer()
+        flyoutPinned = false
+        set({ isFlyoutOpen: false })
+      },
+      setFlyoutPinned: (pinned) => {
+        flyoutPinned = pinned
+        if (pinned) {
+          clearFlyoutCloseTimer()
+          return
+        }
+        if (!flyoutPointerInside && get().isFlyoutOpen) {
+          clearFlyoutCloseTimer()
+          flyoutCloseTimer = setTimeout(() => set({ isFlyoutOpen: false }), FLYOUT_CLOSE_DELAY_MS)
+        }
+      },
       syncWidth: () => {
         const { isCollapsed, sidebarWidth } = get()
         if (isCollapsed) {
diff --git a/apps/sim/stores/sidebar/types.ts b/apps/sim/stores/sidebar/types.ts
index 78d101f1fb0..4f94dee8b6a 100644
--- a/apps/sim/stores/sidebar/types.ts
+++ b/apps/sim/stores/sidebar/types.ts
@@ -4,13 +4,28 @@
 export interface SidebarState {
   workspaceDropdownOpen: boolean
   sidebarWidth: number
-  /** Whether the sidebar is collapsed to icon-only mode */
+  /** Whether the sidebar menu is hidden (fully collapsed to zero width) */
   isCollapsed: boolean
+  /** Whether the hover flyout menu is showing while the sidebar is collapsed */
+  isFlyoutOpen: boolean
   _hasHydrated: boolean
   setWorkspaceDropdownOpen: (isOpen: boolean) => void
   setSidebarWidth: (width: number) => void
   /** Toggles sidebar between collapsed and expanded states */
   toggleCollapsed: () => void
+  /** Shows the hover flyout immediately, cancelling any pending close */
+  openFlyout: () => void
+  /** Hides the hover flyout after a short grace period (cursor crossing gaps) */
+  scheduleFlyoutClose: () => void
+  /** Hides the hover flyout immediately */
+  closeFlyout: () => void
+  /**
+   * Pins the flyout open while a popup launched from inside it (workspace
+   * menu, context menu) is showing — its portal renders outside the flyout, so
+   * hover-leave must not dismiss the flyout underneath. Unpinning closes the
+   * flyout if the cursor has already left it.
+   */
+  setFlyoutPinned: (pinned: boolean) => void
   /**
    * Re-applies the `--sidebar-width` CSS variable from current state, clamped to
    * the viewport. Self-heals cases where the variable was left at its `0px`

From 79ed4aee314e04c3e3c863e490fa32cce99e4a9e Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:08:14 -0500
Subject: [PATCH 06/34] chore(next): pin turbopack root to the monorepo, skip
 optimizeCss in dev

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/sim/next.config.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/sim/next.config.ts b/apps/sim/next.config.ts
index 7addcc8b697..6aaa310b645 100644
--- a/apps/sim/next.config.ts
+++ b/apps/sim/next.config.ts
@@ -1,3 +1,4 @@
+import path from 'node:path'
 import type { NextConfig } from 'next'
 import { env, isTruthy } from './lib/core/config/env'
 import { isDev } from './lib/core/config/feature-flags'
@@ -92,6 +93,7 @@ const nextConfig: NextConfig = {
     ],
   },
   turbopack: {
+    root: path.join(__dirname, '../..'),
     resolveAlias: {
       // `dns/promises` has no browser shim. Server-only connector fetch logic
       // (which imports `input-validation.server`) is statically reachable from
@@ -103,7 +105,7 @@ const nextConfig: NextConfig = {
     },
   },
   experimental: {
-    optimizeCss: true,
+    optimizeCss: !isDev,
     preloadEntriesOnStart: false,
     optimizePackageImports: [
       'lodash',

From 6d848b7b61ce0aa3db672a41eae26c89ccb22d5a Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:13:13 -0500
Subject: [PATCH 07/34] fix(resource-header): match the chat title bar chrome
 rhythm

- Fixed 44px bar (was padding-derived) with a unified 16px gutter across the
  breadcrumb and title-only variants
- Sidebar toggle and right-edge actions pull out 9px so their hover pills sit
  7px from the panel edge, equal to the pill's vertical clearance
- Action/create buttons standardized to the 30px rounded-lg pill with
  surface-active hover, matching every other title-bar control

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-header/resource-header.tsx       | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index ec122b79a44..93893ee9e8d 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -112,14 +112,13 @@ export const ResourceHeader = memo(function ResourceHeader({
   return (
     <div
       ref={headerRef}
-      className={cn(
-        'border-[var(--border)] border-b',
-        hasBreadcrumbs ? 'px-4 py-[8.5px]' : 'px-6 py-2.5'
-      )}
+      className='flex h-[44px] items-center border-[var(--border)] border-b px-4'
     >
-      <div className='flex min-w-0 items-center justify-between gap-3'>
+      <div className='flex min-w-0 flex-1 items-center justify-between gap-3'>
         <div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>
-          <SidebarToggle />
+          {/* Edge controls pull out by 9px so their 30px hover pills sit 7px
+              from the panel edge — same rhythm as the chat title bar. */}
+          <SidebarToggle className='-ml-[9px]' />
           <ChatSwitcher />
           {hasBreadcrumbs ? (
             breadcrumbs.map((crumb, i) => {
@@ -169,7 +168,7 @@ export const ResourceHeader = memo(function ResourceHeader({
             </>
           )}
         </div>
-        <div className='flex shrink-0 items-center gap-1.5'>
+        <div className='-mr-[9px] flex shrink-0 items-center gap-1.5'>
           {leadingActions}
           {actions?.map((action) => {
             const ActionIcon = action.icon
@@ -180,11 +179,9 @@ export const ResourceHeader = memo(function ResourceHeader({
                 disabled={action.disabled}
                 variant='subtle'
                 className={cn(
-                  'whitespace-nowrap px-2 py-1 text-caption',
-                  action.active !== undefined && 'rounded-lg',
+                  'h-[30px] whitespace-nowrap rounded-lg bg-transparent px-2 text-caption hover-hover:bg-[var(--surface-active)]',
                   action.active === true &&
-                    'bg-[var(--surface-active)] hover-hover:bg-[var(--surface-active)]',
-                  action.active === false && 'hover-hover:bg-[var(--surface-hover)]'
+                    'bg-[var(--surface-active)] hover-hover:bg-[var(--surface-active)]'
                 )}
               >
                 {ActionIcon && (
@@ -203,7 +200,7 @@ export const ResourceHeader = memo(function ResourceHeader({
                 onClick={create.onClick}
                 disabled={create.disabled}
                 variant='subtle'
-                className='whitespace-nowrap px-2 py-1 text-caption'
+                className='h-[30px] whitespace-nowrap rounded-lg bg-transparent px-2 text-caption hover-hover:bg-[var(--surface-active)]'
               >
                 {HEADER_PLUS_ICON}
                 {create.label}

From ae0464c57e89a0c45555bce3d3f23910a489740c Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Tue, 9 Jun 2026 18:28:03 -0500
Subject: [PATCH 08/34] fix(resource-header): lift chrome controls out of the
 clipping breadcrumb group

The sidebar toggle's 9px pull-out was clipped by the breadcrumb container's
overflow-hidden; the toggle and chat switcher now sit beside it instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/resource-header/resource-header.tsx    | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 93893ee9e8d..20bc4630c82 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -112,14 +112,15 @@ export const ResourceHeader = memo(function ResourceHeader({
   return (
     <div
       ref={headerRef}
-      className='flex h-[44px] items-center border-[var(--border)] border-b px-4'
+      className='flex h-[44px] items-center gap-2 border-[var(--border)] border-b px-4'
     >
+      {/* Chrome controls live outside the overflow-hidden breadcrumb group so
+          the toggle's 9px pull-out (7px edge inset, matching the chat title
+          bar) isn't clipped. */}
+      <SidebarToggle className='-ml-[9px]' />
+      <ChatSwitcher />
       <div className='flex min-w-0 flex-1 items-center justify-between gap-3'>
         <div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>
-          {/* Edge controls pull out by 9px so their 30px hover pills sit 7px
-              from the panel edge — same rhythm as the chat title bar. */}
-          <SidebarToggle className='-ml-[9px]' />
-          <ChatSwitcher />
           {hasBreadcrumbs ? (
             breadcrumbs.map((crumb, i) => {
               const segmentClassName = getBreadcrumbSegmentClassName(

From b6ffcc0082a4e24f8f0dc548ad37a6fd8a59396c Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 00:27:24 -0500
Subject: [PATCH 09/34] fix(chat-switcher): never show another chat's name on
 the new-chat empty state

The home page's title chip fell back to the most recently updated chat; that
fallback is now scoped to non-chat pages via an isNewChat flag the title bar
sets whenever no chat is open.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/chat-switcher/chat-switcher.tsx        | 11 +++++++++--
 .../components/chat-title-bar/chat-title-bar.tsx      |  4 +++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
index 827eabc7cad..aca452e43d5 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
@@ -22,6 +22,11 @@ interface ChatSwitcherProps {
    * non-chat pages, where the most recently updated chat is shown instead.
    */
   chatId?: string
+  /**
+   * Marks the new-chat empty state (home with no chat open): the chip reads
+   * "New chat" instead of falling back to the most recently updated chat.
+   */
+  isNewChat?: boolean
   /**
    * Called with the picked chat id before navigation. The chat view uses this
    * to reopen a hidden chat pane (including re-picking the current chat).
@@ -34,7 +39,7 @@ interface ChatSwitcherProps {
  * top-left of every page's title bar. Clicking it opens the workspace's chat
  * list inline; selecting a chat navigates to it from anywhere.
  */
-export function ChatSwitcher({ chatId, onSelectChat }: ChatSwitcherProps) {
+export function ChatSwitcher({ chatId, isNewChat = false, onSelectChat }: ChatSwitcherProps) {
   const isHidden = useSidebarToggleHidden()
   const { workspaceId } = useParams<{ workspaceId?: string }>()
   const router = useRouter()
@@ -54,7 +59,9 @@ export function ChatSwitcher({ chatId, onSelectChat }: ChatSwitcherProps) {
 
   const title = chatId
     ? (tasks.find((task) => task.id === chatId)?.name ?? FALLBACK_TITLE)
-    : (mostRecent?.name ?? FALLBACK_TITLE)
+    : isNewChat
+      ? FALLBACK_TITLE
+      : (mostRecent?.name ?? FALLBACK_TITLE)
 
   const handleSelect = (selectedChatId: string) => {
     setOpen(false)
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
index e4d78666a52..9667810bfd9 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
@@ -29,7 +29,9 @@ export function ChatTitleBar({ chatId, onSelectChat, onClose }: ChatTitleBarProp
       {/* Edge controls pull out by 9px so their 30px hover pills sit 7px from
           the panel edge — matching the pill's 7px top/bottom gap in the bar. */}
       <SidebarToggle className='-ml-[9px]' />
-      <ChatSwitcher chatId={chatId} onSelectChat={onSelectChat} />
+      {/* The title bar only renders on chat surfaces, so no chat id means the
+          new-chat empty state — never fall back to the most recent chat. */}
+      <ChatSwitcher chatId={chatId} isNewChat={!chatId} onSelectChat={onSelectChat} />
       {onClose && (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>

From de8e7328cb17e2793d12e43219df702890ffd11d Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 00:29:47 -0500
Subject: [PATCH 10/34] =?UTF-8?q?chore(chat-switcher):=20drop=20the=20"Cha?=
 =?UTF-8?q?ts=20/"=20prefix=20=E2=80=94=20icon=20+=20title=20only?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/chat-switcher/chat-switcher.tsx           | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
index aca452e43d5..116bb5f8205 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
@@ -35,7 +35,7 @@ interface ChatSwitcherProps {
 }
 
 /**
- * The chat-switcher chip — a "Chats / {title}" breadcrumb that lives at the
+ * The chat-switcher chip — a chat icon + title that lives at the
  * top-left of every page's title bar. Clicking it opens the workspace's chat
  * list inline; selecting a chat navigates to it from anywhere.
  */
@@ -84,13 +84,6 @@ export function ChatSwitcher({ chatId, isNewChat = false, onSelectChat }: ChatSw
           )}
         >
           <MessageCircle className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-          <span className='flex-shrink-0 text-[14px] text-[var(--text-muted)]'>Chats</span>
-          <span
-            aria-hidden='true'
-            className='flex-shrink-0 select-none text-[14px] text-[var(--text-icon)]'
-          >
-            /
-          </span>
           <span className='min-w-0 truncate font-medium text-[14px] text-[var(--text-primary)]'>
             {title}
           </span>

From 2f6f6ead21500cb45eee6763e981d96fabdb1fff Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 01:18:15 -0500
Subject: [PATCH 11/34] fix(mothership): persist failed turns so errors stay
 visible in the chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Orchestration failures previously persisted nothing for the assistant turn —
the post-stream history refetch then silently erased the streamed activity,
leaving the user staring at their own message with no explanation.

- withErrorContentBlock mirrors the cancelled-turn pattern: keeps partial
  content/tool blocks and appends an inline <mothership-error> tag (already
  understood by the message renderer) plus a terminal error-status block
- Both failure paths persist: orchestration-returned failures keep their
  partial work; thrown errors persist a minimal errored turn

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../sim/lib/copilot/chat/persisted-message.ts | 58 +++++++++++++++++++
 apps/sim/lib/copilot/chat/post.ts             | 23 ++++++--
 2 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/apps/sim/lib/copilot/chat/persisted-message.ts b/apps/sim/lib/copilot/chat/persisted-message.ts
index 1d491d95a1d..4558526d6a1 100644
--- a/apps/sim/lib/copilot/chat/persisted-message.ts
+++ b/apps/sim/lib/copilot/chat/persisted-message.ts
@@ -291,6 +291,64 @@ export function withStoppedContentBlock(message: PersistedMessage): PersistedMes
   })
 }
 
+/**
+ * Matches the generic display message the live stream renders for an
+ * orchestration failure, so the persisted turn looks identical after a refetch.
+ */
+const ERROR_DISPLAY_MESSAGE = 'An unexpected error occurred while processing the response.'
+
+/**
+ * Marks a failed turn so it survives history refetches instead of vanishing:
+ * appends an inline `<mothership-error>` tag (rendered by the message
+ * special-tags pipeline) and a terminal `complete` block with `status: error`.
+ * Partial content/tool blocks from before the failure are preserved.
+ */
+export function withErrorContentBlock(message: PersistedMessage): PersistedMessage {
+  const contentBlocks = message.contentBlocks ?? []
+  if (
+    contentBlocks.some(
+      (block) =>
+        block.type === MothershipStreamV1EventType.complete &&
+        block.status === MothershipStreamV1CompletionStatus.error
+    )
+  ) {
+    return message
+  }
+
+  const hasAssistantText = contentBlocks.some(
+    (block) =>
+      block.type === MothershipStreamV1EventType.text &&
+      block.channel !== MothershipStreamV1TextChannel.thinking &&
+      block.content?.trim()
+  )
+  const errorTag = `<mothership-error>${JSON.stringify({ message: ERROR_DISPLAY_MESSAGE })}</mothership-error>`
+
+  return normalizeMessage({
+    ...message,
+    contentBlocks: [
+      ...(hasAssistantText || !message.content.trim()
+        ? []
+        : [
+            {
+              type: MothershipStreamV1EventType.text,
+              channel: MothershipStreamV1TextChannel.assistant,
+              content: message.content,
+            },
+          ]),
+      ...contentBlocks,
+      {
+        type: MothershipStreamV1EventType.text,
+        channel: MothershipStreamV1TextChannel.assistant,
+        content: errorTag,
+      },
+      {
+        type: MothershipStreamV1EventType.complete,
+        status: MothershipStreamV1CompletionStatus.error,
+      },
+    ],
+  })
+}
+
 export interface UserMessageParams {
   id: string
   content: string
diff --git a/apps/sim/lib/copilot/chat/post.ts b/apps/sim/lib/copilot/chat/post.ts
index 3b293218a4d..fa38631891a 100644
--- a/apps/sim/lib/copilot/chat/post.ts
+++ b/apps/sim/lib/copilot/chat/post.ts
@@ -15,6 +15,7 @@ import { buildCopilotRequestPayload } from '@/lib/copilot/chat/payload'
 import {
   buildPersistedAssistantMessage,
   buildPersistedUserMessage,
+  withErrorContentBlock,
   withStoppedContentBlock,
 } from '@/lib/copilot/chat/persisted-message'
 import {
@@ -465,12 +466,14 @@ function buildOnComplete(params: {
         return
       }
 
+      // Failed turns persist too (partial work + an inline error marker) so the
+      // history refetch after finalize doesn't silently erase the streamed turn.
       await finalizeAssistantTurn({
         chatId,
         userMessageId,
-        ...(result.success
-          ? { assistantMessage: buildPersistedAssistantMessage(result, requestId) }
-          : {}),
+        assistantMessage: result.success
+          ? buildPersistedAssistantMessage(result, requestId)
+          : withErrorContentBlock(buildPersistedAssistantMessage(result, requestId)),
       })
 
       if (notifyWorkspaceStatus && workspaceId) {
@@ -503,7 +506,19 @@ function buildOnError(params: {
     if (!chatId) return
 
     try {
-      await finalizeAssistantTurn({ chatId, userMessageId })
+      // Persist an errored assistant turn so the failure stays visible in the
+      // transcript instead of the turn vanishing on the next history refetch.
+      await finalizeAssistantTurn({
+        chatId,
+        userMessageId,
+        assistantMessage: withErrorContentBlock({
+          id: generateId(),
+          role: 'assistant',
+          content: '',
+          timestamp: new Date().toISOString(),
+          requestId,
+        }),
+      })
 
       if (notifyWorkspaceStatus && workspaceId) {
         chatPubSub?.publishStatusChanged({

From ea6ed7542fe47c4fa9f336ebf4d1bd6543475ede Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 21:21:53 -0500
Subject: [PATCH 12/34] =?UTF-8?q?feat(mothership):=20workspace-owned=20tab?=
 =?UTF-8?q?=20strip=20=E2=80=94=20chats=20add=20and=20highlight,=20never?=
 =?UTF-8?q?=20replace?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Switching chats no longer swaps the resource panel's tab set. Tabs now behave
like browser tabs, owned by the user per workspace; chats relate to artifacts
by provenance, not containment:

- New persisted mothership-tabs store (tabs + active per workspace); entering
  a chat merges its artifacts additively (deduped) and focuses its last-touched
  one, never closing what's already open
- Tabs the active chat surfaced carry a provenance dot (hidden on hover/active)
- Closing/reordering tabs is session-only and no longer mutates the chat's
  persisted resources; closed tabs stay closed for the rest of the chat visit
  and re-open on re-entry
- Manual attaches (+ dropdown, context chips) still record provenance on the
  open chat via the existing persistence path
- Ephemeral resources (streaming previews) stay chat-scoped and unpersisted;
  panel expand/collapse + chat-pane guardrails now key off the strip

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-tabs/resource-tabs.tsx           |  58 ++++----
 .../mothership-view/mothership-view.tsx       |   7 +
 .../app/workspace/[workspaceId]/home/home.tsx | 127 ++++++++++++++----
 apps/sim/stores/mothership-tabs/store.ts      |  81 +++++++++++
 apps/sim/stores/mothership-tabs/types.ts      |  31 +++++
 5 files changed, 240 insertions(+), 64 deletions(-)
 create mode 100644 apps/sim/stores/mothership-tabs/store.ts
 create mode 100644 apps/sim/stores/mothership-tabs/types.ts

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 6d0bfd6538d..c7344e75ed6 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -13,7 +13,6 @@ import {
 import { Button, chipVariants, Tooltip } from '@/components/emcn'
 import { Columns3, Eye, Pencil, X } from '@/components/emcn/icons'
 import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
-import { isEphemeralResource } from '@/lib/copilot/resources/types'
 import { cn } from '@/lib/core/utils/cn'
 import type { PreviewMode } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
 import { AddResourceDropdown } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
@@ -30,11 +29,6 @@ import type {
 } from '@/app/workspace/[workspaceId]/home/types'
 import { useFolders } from '@/hooks/queries/folders'
 import { useKnowledgeBasesQuery } from '@/hooks/queries/kb/knowledge'
-import {
-  useAddChatResource,
-  useRemoveChatResource,
-  useReorderChatResources,
-} from '@/hooks/queries/mothership-chats'
 import { useTablesList } from '@/hooks/queries/tables'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
@@ -144,7 +138,8 @@ interface ResourceTabItemProps {
   showGapBefore: boolean
   showGapAfter: boolean
   displayName: string
-  chatId?: string
+  /** Provenance dot — the active chat surfaced/touched this artifact. */
+  showDot: boolean
   onDragStart: (e: React.DragEvent, idx: number) => void
   onDragOver: (e: React.DragEvent, idx: number) => void
   onDragLeave: () => void
@@ -164,7 +159,7 @@ const ResourceTabItem = memo(function ResourceTabItem({
   showGapBefore,
   showGapAfter,
   displayName,
-  chatId,
+  showDot,
   onDragStart,
   onDragOver,
   onDragLeave,
@@ -190,7 +185,7 @@ const ResourceTabItem = memo(function ResourceTabItem({
         onMouseDown={(e) => {
           if (e.button === 1) {
             e.preventDefault()
-            if (chatId) onRemove(e, resource)
+            onRemove(e, resource)
           }
         }}
         onClick={(e) => onTabClick(e, idx)}
@@ -205,7 +200,13 @@ const ResourceTabItem = memo(function ResourceTabItem({
       >
         {config.renderTabIcon(resource, 'size-[16px] shrink-0')}
         <span className='truncate'>{displayName}</span>
-        {(isHovered || isActive) && chatId && (
+        {showDot && !(isHovered || isActive) && (
+          <span
+            aria-hidden='true'
+            className='-translate-y-1/2 absolute top-1/2 right-[10px] size-[5px] rounded-full bg-[var(--brand-accent)]'
+          />
+        )}
+        {(isHovered || isActive) && (
           <span
             role='button'
             tabIndex={-1}
@@ -244,6 +245,11 @@ interface ResourceTabsProps {
    * compact chat switcher while the chat pane is hidden).
    */
   leading?: ReactNode
+  /**
+   * `type:id` keys of the artifacts the active chat has surfaced — matching
+   * tabs render a provenance dot.
+   */
+  chatArtifactKeys?: ReadonlySet<string>
 }
 
 export function ResourceTabs({
@@ -259,6 +265,7 @@ export function ResourceTabs({
   onCyclePreviewMode,
   actions,
   leading,
+  chatArtifactKeys,
 }: ResourceTabsProps) {
   const PreviewModeIcon = PREVIEW_MODE_ICONS[previewMode ?? 'split']
   const nameLookup = useResourceNameLookup(workspaceId)
@@ -297,10 +304,6 @@ export function ResourceTabs({
     }
   }, [activeId])
 
-  const addResource = useAddChatResource(chatId)
-  const removeResource = useRemoveChatResource(chatId)
-  const reorderResources = useReorderChatResources(chatId)
-
   const [hoveredTabId, setHoveredTabId] = useState<string | null>(null)
   const [draggedIdx, setDraggedIdx] = useState<number | null>(null)
   const [dropGapIdx, setDropGapIdx] = useState<number | null>(null)
@@ -325,12 +328,9 @@ export function ResourceTabs({
 
   const handleAdd = useCallback(
     (resource: MothershipResource) => {
-      if (!chatId) return
-      addResource.mutate({ chatId, resource })
       onAddResource(resource)
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [chatId, onAddResource]
+    [onAddResource]
   )
 
   const handleTabClick = useCallback(
@@ -386,10 +386,10 @@ export function ResourceTabs({
   const handleRemove = useCallback(
     (e: React.SyntheticEvent, resource: MothershipResource) => {
       e.stopPropagation()
-      if (!chatId) return
       const isMulti = selectedIds.has(resource.id) && selectedIds.size > 1
       const targets = isMulti ? resources.filter((r) => selectedIds.has(r.id)) : [resource]
-      // Update parent state immediately for all targets
+      // Closing tabs is a session action — it never detaches the artifact from
+      // the chat that surfaced it.
       for (const r of targets) {
         onRemoveResource(r.type, r.id)
       }
@@ -403,13 +403,8 @@ export function ResourceTabs({
       if (anchorIdRef.current && removedIds.has(anchorIdRef.current)) {
         anchorIdRef.current = null
       }
-      for (const r of targets) {
-        if (isEphemeralResource(r)) continue
-        removeResource.mutate({ chatId, resourceType: r.type, resourceId: r.id })
-      }
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [chatId, onRemoveResource, resources, selectedIds]
+    [onRemoveResource, resources, selectedIds]
   )
 
   const handleDragStart = useCallback(
@@ -516,18 +511,11 @@ export function ResourceTabs({
       const [moved] = reordered.splice(fromIdx, 1)
       reordered.splice(insertAt, 0, moved)
       onReorderResources(reordered)
-      if (chatId) {
-        const persistable = reordered.filter((r) => !isEphemeralResource(r))
-        if (persistable.length > 0) {
-          reorderResources.mutate({ chatId, resources: persistable })
-        }
-      }
       setDraggedIdx(null)
       setDropGapIdx(null)
       dragStartIdx.current = null
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [chatId, resources, onReorderResources, dropGapIdx, stopAutoScroll]
+    [resources, onReorderResources, dropGapIdx, stopAutoScroll]
   )
 
   const handleDragEnd = useCallback(() => {
@@ -596,7 +584,7 @@ export function ResourceTabs({
                 showGapBefore={showGapBefore}
                 showGapAfter={showGapAfter}
                 displayName={displayName}
-                chatId={chatId}
+                showDot={chatArtifactKeys?.has(`${resource.type}:${resource.id}`) ?? false}
                 onDragStart={handleDragStart}
                 onDragOver={handleDragOver}
                 onDragLeave={handleDragLeave}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index e846ca373c9..25dda582379 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -55,6 +55,11 @@ interface MothershipViewProps {
   genericResourceData?: GenericResourceData
   /** Controls rendered before the tab strip (see {@link ResourceTabs}). */
   tabsLeading?: ReactNode
+  /**
+   * `type:id` keys of the artifacts the active chat has surfaced — tabs in
+   * this set carry a provenance dot in the strip.
+   */
+  chatArtifactKeys?: ReadonlySet<string>
 }
 
 export const MothershipView = memo(
@@ -73,6 +78,7 @@ export const MothershipView = memo(
       previewSession,
       genericResourceData,
       tabsLeading,
+      chatArtifactKeys,
     }: MothershipViewProps,
     ref
   ) {
@@ -112,6 +118,7 @@ export const MothershipView = memo(
             workspaceId={workspaceId}
             chatId={chatId}
             leading={tabsLeading}
+            chatArtifactKeys={chatArtifactKeys}
             resources={resources}
             activeId={active?.id ?? null}
             onSelect={onSelectResource}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index 62398cf855b..c20fbb55d1b 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -1,11 +1,12 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { useParams, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { requestJson } from '@/lib/api/client/request'
 import { createWorkflowContract } from '@/lib/api/contracts'
+import { isEphemeralResource } from '@/lib/copilot/resources/types'
 import {
   LandingPromptStorage,
   type LandingWorkflowSeed,
@@ -25,6 +26,7 @@ import {
   useMothershipChatHistory,
 } from '@/hooks/queries/mothership-chats'
 import { useOAuthReturnRouter } from '@/hooks/use-oauth-return'
+import { useMothershipTabsStore } from '@/stores/mothership-tabs/store'
 import type { ChatContext } from '@/stores/panel'
 import {
   ChatHistory,
@@ -144,6 +146,16 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
 
   const reopenChatPane = useCallback(() => setIsChatCollapsed(false), [])
 
+  // The tab strip is user-owned per workspace (browser-tab semantics): chats
+  // merge their artifacts in additively; only the user closes/reorders tabs.
+  const workspaceTabs = useMothershipTabsStore((s) => s.byWorkspace[workspaceId])
+  const openTabs = useMothershipTabsStore((s) => s.openTabs)
+  const closeTab = useMothershipTabsStore((s) => s.closeTab)
+  const reorderTabs = useMothershipTabsStore((s) => s.reorderTabs)
+  const setActiveTab = useMothershipTabsStore((s) => s.setActiveTab)
+  const storeTabs = workspaceTabs?.tabs
+  const storeActiveTabId = workspaceTabs?.activeTabId ?? null
+
   function handleResourceEvent() {
     if (isResourceCollapsedRef.current) {
       setIsResourceCollapsed(false)
@@ -159,11 +171,8 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     resolvedChatId,
     adoptResolvedChatId,
     resources,
-    activeResourceId,
-    setActiveResourceId,
     addResource,
     removeResource,
-    reorderResources,
     messageQueue,
     removeFromQueue,
     sendNow,
@@ -191,16 +200,66 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     })
   )
 
+  // The panel renders the workspace tab strip plus the active chat's ephemeral
+  // resources (in-flight streaming previews stay chat-scoped, never persisted).
+  const ephemeralResources = useMemo(() => resources.filter(isEphemeralResource), [resources])
+  const panelTabs = useMemo(
+    () => [...(storeTabs ?? []), ...ephemeralResources],
+    [storeTabs, ephemeralResources]
+  )
+  const chatArtifactKeys = useMemo(
+    () => new Set(resources.filter((r) => !isEphemeralResource(r)).map((r) => `${r.type}:${r.id}`)),
+    [resources]
+  )
+
+  // Merge the active chat's artifacts into the strip. Tracking merged keys per
+  // chat means a tab the user closed mid-chat isn't resurrected by the next
+  // render, while re-entering the chat later re-opens its artifacts. The last
+  // fresh artifact gets focus (on switch that's the chat's most recent one; on
+  // a live stream it's the resource the agent just touched).
+  const mergedChatKeyRef = useRef<string | null>(null)
+  const mergedKeysRef = useRef<Set<string>>(new Set())
+  const initialResourceIdRef = useRef(initialResourceId)
+  useEffect(() => {
+    const chatKey = resolvedChatId ?? chatId ?? 'new'
+    if (mergedChatKeyRef.current !== chatKey) {
+      mergedChatKeyRef.current = chatKey
+      mergedKeysRef.current = new Set()
+    }
+    const fresh = resources.filter(
+      (r) => !isEphemeralResource(r) && !mergedKeysRef.current.has(`${r.type}:${r.id}`)
+    )
+    if (fresh.length === 0) return
+    for (const r of fresh) mergedKeysRef.current.add(`${r.type}:${r.id}`)
+    const urlFocus = initialResourceIdRef.current
+    initialResourceIdRef.current = null
+    const focusId =
+      urlFocus && fresh.some((r) => r.id === urlFocus) ? urlFocus : fresh[fresh.length - 1].id
+    openTabs(workspaceId, fresh, { focusId })
+  }, [resources, resolvedChatId, chatId, workspaceId, openTabs])
+
+  // Focus newly-appearing ephemeral resources (e.g. a streaming file preview),
+  // mirroring how the chat focuses artifacts it touches.
+  const prevEphemeralKeysRef = useRef<Set<string>>(new Set())
+  useEffect(() => {
+    const keys = new Set(ephemeralResources.map((r) => `${r.type}:${r.id}`))
+    const fresh = ephemeralResources.find(
+      (r) => !prevEphemeralKeysRef.current.has(`${r.type}:${r.id}`)
+    )
+    prevEphemeralKeysRef.current = keys
+    if (fresh) setActiveTab(workspaceId, fresh.id)
+  }, [ephemeralResources, setActiveTab, workspaceId])
+
   useEffect(() => {
     const url = new URL(window.location.href)
-    if (activeResourceId) {
-      url.searchParams.set('resource', activeResourceId)
+    if (storeActiveTabId) {
+      url.searchParams.set('resource', storeActiveTabId)
     } else {
       url.searchParams.delete('resource')
     }
     url.hash = ''
     window.history.replaceState(null, '', url.toString())
-  }, [activeResourceId])
+  }, [storeActiveTabId])
 
   useEffect(() => {
     wasSendingRef.current = false
@@ -220,18 +279,18 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
   }, [isSending, resolvedChatId, markRead])
 
   useEffect(() => {
-    if (!(resources.length > 0 && isResourceCollapsedRef.current)) return
+    if (!(panelTabs.length > 0 && isResourceCollapsedRef.current)) return
     setIsResourceCollapsed(false)
     setSkipResourceTransition(true)
     const id = requestAnimationFrame(() => setSkipResourceTransition(false))
     return () => cancelAnimationFrame(id)
-  }, [resources])
+  }, [panelTabs])
 
   useEffect(() => {
-    if (resources.length === 0 && !isResourceCollapsedRef.current) {
+    if (panelTabs.length === 0 && !isResourceCollapsedRef.current) {
       collapseResource()
     }
-  }, [resources, collapseResource])
+  }, [panelTabs, collapseResource])
 
   function handleStopGeneration() {
     captureEvent(posthogRef.current, 'task_generation_aborted', {
@@ -309,26 +368,35 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     }
   }
 
+  /**
+   * Manually attaching a resource opens its tab (session) AND records it on
+   * the chat (provenance + agent context) via {@link addResource}, which keeps
+   * the existing persistence machinery.
+   */
+  function openResourceTab(resource: MothershipResource) {
+    openTabs(workspaceId, [resource], { focusId: resource.id })
+    addResource(resource)
+    handleResourceEvent()
+  }
+
   function handleContextAdd(context: ChatContext) {
     const resolved = resolveResourceFromContext(context)
     if (resolved) {
-      addResource({ ...resolved, title: context.label })
-      handleResourceEvent()
+      openResourceTab({ ...resolved, title: context.label })
     }
   }
 
   function handleInitialContextRemove(context: ChatContext) {
     const resolved = resolveResourceFromContext(context)
     if (!resolved) return
+    // Symmetric un-attach: the chip was just added by the same flow, so this
+    // also detaches it from the chat rather than only closing the tab.
+    closeTab(workspaceId, resolved.type, resolved.id)
     removeResource(resolved.type, resolved.id)
   }
 
   function handleWorkspaceResourceSelect(resource: MothershipResource) {
-    const wasAdded = addResource(resource)
-    if (!wasAdded) {
-      setActiveResourceId(resource.id)
-    }
-    handleResourceEvent()
+    openResourceTab(resource)
   }
 
   // `resolvedChatId` is the chat actually in view — the prop on direct nav, or
@@ -341,15 +409,15 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
   const showChatSkeleton = Boolean(activeChatId) && !hasMessages && isActiveChatHistoryPending
   const showChatView = hasMessages || showChatSkeleton || Boolean(resolvedChatId)
   const draftScopeKey = `${workspaceId}:${chatId ?? 'new'}`
-  const canCloseChat = resources.length > 0 && !isResourceCollapsed
+  const canCloseChat = panelTabs.length > 0 && !isResourceCollapsed
 
   // The chat pane can only hide while the resource panel is visible; restore it
-  // when the panel collapses or the last resource closes so the view never blanks.
+  // when the panel collapses or the last tab closes so the view never blanks.
   useEffect(() => {
-    if (isChatCollapsed && (resources.length === 0 || isResourceCollapsed)) {
+    if (isChatCollapsed && (panelTabs.length === 0 || isResourceCollapsed)) {
       setIsChatCollapsed(false)
     }
-  }, [isChatCollapsed, resources, isResourceCollapsed])
+  }, [isChatCollapsed, panelTabs, isResourceCollapsed])
 
   // Opening a different chat from anywhere (title-bar dropdown, search, deep
   // link) is an explicit "open this chat" — always show its conversation pane.
@@ -424,7 +492,7 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
               draftScopeKey={draftScopeKey}
               animateInput={isInputEntering}
               onInputAnimationEnd={isInputEntering ? () => setIsInputEntering(false) : undefined}
-              initialScrollBlocked={resources.length > 0 && isResourceCollapsed}
+              initialScrollBlocked={panelTabs.length > 0 && isResourceCollapsed}
               onCloseChat={canCloseChat ? closeChatPane : undefined}
             />
           </div>
@@ -447,12 +515,13 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
           ref={mothershipRef}
           workspaceId={workspaceId}
           chatId={resolvedChatId}
-          resources={resources}
-          activeResourceId={activeResourceId}
-          onSelectResource={setActiveResourceId}
-          onAddResource={addResource}
-          onRemoveResource={removeResource}
-          onReorderResources={reorderResources}
+          resources={panelTabs}
+          activeResourceId={storeActiveTabId}
+          chatArtifactKeys={chatArtifactKeys}
+          onSelectResource={(id) => setActiveTab(workspaceId, id)}
+          onAddResource={openResourceTab}
+          onRemoveResource={(type, id) => closeTab(workspaceId, type, id)}
+          onReorderResources={(tabs) => reorderTabs(workspaceId, tabs)}
           isCollapsed={isResourceCollapsed}
           previewSession={previewSession}
           genericResourceData={genericResourceData ?? undefined}
diff --git a/apps/sim/stores/mothership-tabs/store.ts b/apps/sim/stores/mothership-tabs/store.ts
new file mode 100644
index 00000000000..9d8b2b332dc
--- /dev/null
+++ b/apps/sim/stores/mothership-tabs/store.ts
@@ -0,0 +1,81 @@
+import { create } from 'zustand'
+import { devtools, persist } from 'zustand/middleware'
+import { isEphemeralResource, type MothershipResource } from '@/lib/copilot/resources/types'
+import type { MothershipTabsState, WorkspaceTabsState } from './types'
+
+const EMPTY_WORKSPACE_STATE: WorkspaceTabsState = { tabs: [], activeTabId: null }
+
+function tabKey(resource: Pick<MothershipResource, 'type' | 'id'>): string {
+  return `${resource.type}:${resource.id}`
+}
+
+export const useMothershipTabsStore = create<MothershipTabsState>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        byWorkspace: {},
+        openTabs: (workspaceId, resources, options) => {
+          const additions = resources.filter((resource) => !isEphemeralResource(resource))
+          const current = get().byWorkspace[workspaceId] ?? EMPTY_WORKSPACE_STATE
+          const existingKeys = new Set(current.tabs.map(tabKey))
+          const fresh = additions.filter((resource) => !existingKeys.has(tabKey(resource)))
+          const focusId = options?.focusId
+          if (fresh.length === 0 && (!focusId || focusId === current.activeTabId)) return
+          set((state) => ({
+            byWorkspace: {
+              ...state.byWorkspace,
+              [workspaceId]: {
+                tabs: fresh.length > 0 ? [...current.tabs, ...fresh] : current.tabs,
+                activeTabId: focusId ?? current.activeTabId,
+              },
+            },
+          }))
+        },
+        closeTab: (workspaceId, resourceType, resourceId) => {
+          const current = get().byWorkspace[workspaceId]
+          if (!current) return
+          const tabs = current.tabs.filter(
+            (tab) => !(tab.type === resourceType && tab.id === resourceId)
+          )
+          if (tabs.length === current.tabs.length) return
+          set((state) => ({
+            byWorkspace: {
+              ...state.byWorkspace,
+              [workspaceId]: {
+                tabs,
+                activeTabId: current.activeTabId === resourceId ? null : current.activeTabId,
+              },
+            },
+          }))
+        },
+        reorderTabs: (workspaceId, tabs) => {
+          const current = get().byWorkspace[workspaceId] ?? EMPTY_WORKSPACE_STATE
+          set((state) => ({
+            byWorkspace: {
+              ...state.byWorkspace,
+              [workspaceId]: {
+                tabs: tabs.filter((tab) => !isEphemeralResource(tab)),
+                activeTabId: current.activeTabId,
+              },
+            },
+          }))
+        },
+        setActiveTab: (workspaceId, id) => {
+          const current = get().byWorkspace[workspaceId] ?? EMPTY_WORKSPACE_STATE
+          if (current.activeTabId === id) return
+          set((state) => ({
+            byWorkspace: {
+              ...state.byWorkspace,
+              [workspaceId]: { ...current, activeTabId: id },
+            },
+          }))
+        },
+      }),
+      {
+        name: 'mothership-tabs',
+        partialize: (state) => ({ byWorkspace: state.byWorkspace }),
+      }
+    ),
+    { name: 'mothership-tabs-store' }
+  )
+)
diff --git a/apps/sim/stores/mothership-tabs/types.ts b/apps/sim/stores/mothership-tabs/types.ts
new file mode 100644
index 00000000000..24a343820ec
--- /dev/null
+++ b/apps/sim/stores/mothership-tabs/types.ts
@@ -0,0 +1,31 @@
+import type { MothershipResource, MothershipResourceType } from '@/lib/copilot/resources/types'
+
+/** A workspace's open tab strip: the tabs and which one is focused. */
+export interface WorkspaceTabsState {
+  tabs: MothershipResource[]
+  activeTabId: string | null
+}
+
+/**
+ * The resource panel's tab strip, owned by the user per workspace — like
+ * browser tabs. Chats only ever merge their artifacts in (additive, deduped);
+ * closing, reordering, and focusing are session actions that never touch a
+ * chat's artifact provenance.
+ */
+export interface MothershipTabsState {
+  byWorkspace: Record<string, WorkspaceTabsState>
+  /**
+   * Adds resources to the strip (deduped by `type:id`; ephemeral resources are
+   * skipped). Optionally focuses one of them.
+   */
+  openTabs: (
+    workspaceId: string,
+    resources: MothershipResource[],
+    options?: { focusId?: string }
+  ) => void
+  /** Removes a tab. Clears focus if the closed tab was active. */
+  closeTab: (workspaceId: string, resourceType: MothershipResourceType, resourceId: string) => void
+  /** Replaces the strip order (ephemeral entries are dropped). */
+  reorderTabs: (workspaceId: string, tabs: MothershipResource[]) => void
+  setActiveTab: (workspaceId: string, id: string | null) => void
+}

From 23bccb32e05869aaead1b2da47965e99c89582f5 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 21:58:07 -0500
Subject: [PATCH 13/34] fix(resource-tabs): follow the dominant wheel axis so
 trackpad swipes scroll the strip

Horizontal trackpad swipes carry a small deltaY, so the deltaY-only handler
preventDefault()'d the native pan and scrolled by the jitter amount instead.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/resource-tabs/resource-tabs.tsx        | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index c7344e75ed6..83a731fe8e5 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -275,10 +275,13 @@ export function ResourceTabs({
     const node = scrollNodeRef.current
     if (!node) return
     const handler = (e: WheelEvent) => {
-      if (e.deltaY !== 0) {
-        node.scrollLeft += e.deltaY
-        e.preventDefault()
-      }
+      // Follow the dominant axis: trackpad horizontal swipes carry a small
+      // deltaY, so keying off deltaY alone hijacked (and killed) native
+      // horizontal panning. Vertical wheels still translate to horizontal.
+      const dominant = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY
+      if (dominant === 0) return
+      node.scrollLeft += dominant
+      e.preventDefault()
     }
     node.addEventListener('wheel', handler, { passive: false })
     return () => node.removeEventListener('wheel', handler)

From 9dda667052d06b262153e541de5020b1a6cec7ec Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 22:24:57 -0500
Subject: [PATCH 14/34] =?UTF-8?q?feat(mothership):=20spotlight=20tab=20lay?=
 =?UTF-8?q?out=20=E2=80=94=20active=20resource=20as=20title,=20compressed?=
 =?UTF-8?q?=20tabs,=20switcher=20dropdown?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The panel bar now mirrors the chat pane: one prominent identity chip per pane.

- Active resource renders as a title chip (icon + full name + chevron) whose
  dropdown lists every open tab, grouped "From this chat" / "Other open tabs"
  with hover close controls — provenance moved here from the per-tab dots
- Inactive tabs compress browser-style (max-width truncation, icon always
  visible); beyond five they collapse into a +N chip instead of scroll-clipping;
  the strip's scroll/edge-scroll machinery is gone
- Dots now mean "changed while unfocused": a chat's artifacts merge in marked
  unseen except the focused one, and viewing or closing a tab clears it
- Standalone pages (ResourceHeader, workflow canvas) demote the chat switcher
  to an icon-only chip so the page title owns the bar

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../chat-switcher/chat-switcher.tsx           |  72 ++-
 .../resource-header/resource-header.tsx       |   2 +-
 .../resource-tabs/resource-switcher-list.tsx  |  99 +++++
 .../resource-tabs/resource-tabs.tsx           | 415 ++++++++++--------
 .../mothership-view/mothership-view.tsx       |  11 +-
 .../app/workspace/[workspaceId]/home/home.tsx |  48 +-
 .../[workspaceId]/w/[workflowId]/workflow.tsx |   2 +-
 7 files changed, 438 insertions(+), 211 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx

diff --git a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
index 116bb5f8205..e1369630f7b 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
@@ -7,6 +7,7 @@ import {
   Popover,
   PopoverAnchor,
   PopoverContent,
+  Tooltip,
 } from '@/components/emcn'
 import { ChevronDown, MessageCircle } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
@@ -27,6 +28,11 @@ interface ChatSwitcherProps {
    * "New chat" instead of falling back to the most recently updated chat.
    */
   isNewChat?: boolean
+  /**
+   * Compact icon-only chip for non-chat pages, where the page title owns the
+   * bar — a chat name beside it would read as a breadcrumb segment.
+   */
+  iconOnly?: boolean
   /**
    * Called with the picked chat id before navigation. The chat view uses this
    * to reopen a hidden chat pane (including re-picking the current chat).
@@ -39,7 +45,12 @@ interface ChatSwitcherProps {
  * top-left of every page's title bar. Clicking it opens the workspace's chat
  * list inline; selecting a chat navigates to it from anywhere.
  */
-export function ChatSwitcher({ chatId, isNewChat = false, onSelectChat }: ChatSwitcherProps) {
+export function ChatSwitcher({
+  chatId,
+  isNewChat = false,
+  iconOnly = false,
+  onSelectChat,
+}: ChatSwitcherProps) {
   const isHidden = useSidebarToggleHidden()
   const { workspaceId } = useParams<{ workspaceId?: string }>()
   const router = useRouter()
@@ -70,25 +81,54 @@ export function ChatSwitcher({ chatId, isNewChat = false, onSelectChat }: ChatSw
     router.push(`/workspace/${workspaceId}/chat/${selectedChatId}`)
   }
 
+  const trigger = iconOnly ? (
+    <button
+      type='button'
+      aria-label='All Chats'
+      onClick={() => setOpen((prev) => !prev)}
+      className={cn(
+        'flex h-[30px] flex-shrink-0 items-center gap-1 rounded-lg px-1.5 transition-colors',
+        'hover-hover:bg-[var(--surface-active)]',
+        open && 'bg-[var(--surface-active)]'
+      )}
+    >
+      <MessageCircle className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+    </button>
+  ) : (
+    <button
+      type='button'
+      aria-label='Switch chat'
+      onClick={() => setOpen((prev) => !prev)}
+      className={cn(
+        'flex h-[30px] min-w-0 items-center gap-1.5 rounded-lg px-2 transition-colors',
+        'hover-hover:bg-[var(--surface-active)]',
+        open && 'bg-[var(--surface-active)]'
+      )}
+    >
+      <MessageCircle className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      <span className='min-w-0 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+        {title}
+      </span>
+      <ChevronDown className='ml-0.5 h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+    </button>
+  )
+
   return (
     <Popover size='md' open={open} onOpenChange={setOpen}>
       <PopoverAnchor asChild>
-        <button
-          type='button'
-          aria-label='Switch chat'
-          onClick={() => setOpen((prev) => !prev)}
-          className={cn(
-            'flex h-[30px] min-w-0 items-center gap-1.5 rounded-lg px-2 transition-colors',
-            'hover-hover:bg-[var(--surface-active)]',
-            open && 'bg-[var(--surface-active)]'
-          )}
-        >
-          <MessageCircle className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-          <span className='min-w-0 truncate font-medium text-[14px] text-[var(--text-primary)]'>
-            {title}
+        {iconOnly ? (
+          <span className='flex flex-shrink-0'>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>{trigger}</Tooltip.Trigger>
+              <Tooltip.Content side='bottom'>
+                <p>All Chats</p>
+              </Tooltip.Content>
+            </Tooltip.Root>
           </span>
-          <ChevronDown className='ml-0.5 h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
-        </button>
+        ) : (
+          trigger
+        )}
       </PopoverAnchor>
       {/* Mirrors the sidebar flyout's anchor rhythm: the chip sits at y 7..37 in
           the 44px bar, so offset 13 lands the panel 6px below the bar, and the
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 20bc4630c82..6a90e5ebd90 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -118,7 +118,7 @@ export const ResourceHeader = memo(function ResourceHeader({
           the toggle's 9px pull-out (7px edge inset, matching the chat title
           bar) isn't clipped. */}
       <SidebarToggle className='-ml-[9px]' />
-      <ChatSwitcher />
+      <ChatSwitcher iconOnly />
       <div className='flex min-w-0 flex-1 items-center justify-between gap-3'>
         <div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>
           {hasBreadcrumbs ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx
new file mode 100644
index 00000000000..347faf1ecff
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx
@@ -0,0 +1,99 @@
+'use client'
+
+import { X } from '@/components/emcn/icons'
+import { cn } from '@/lib/core/utils/cn'
+import { getResourceConfig } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
+import type { MothershipResource } from '@/app/workspace/[workspaceId]/home/types'
+
+export interface ResourceSwitcherItem {
+  resource: MothershipResource
+  name: string
+  isActive: boolean
+  /** Surfaced by the active chat — grouped under "From this chat". */
+  isChatArtifact: boolean
+  /** Changed while the tab wasn't focused. */
+  isUpdated: boolean
+}
+
+interface ResourceSwitcherListProps {
+  items: ResourceSwitcherItem[]
+  onSelect: (id: string) => void
+  onClose: (resource: MothershipResource) => void
+}
+
+function SwitcherRow({
+  item,
+  onSelect,
+  onClose,
+}: {
+  item: ResourceSwitcherItem
+  onSelect: (id: string) => void
+  onClose: (resource: MothershipResource) => void
+}) {
+  const config = getResourceConfig(item.resource.type)
+  return (
+    <div
+      className={cn(
+        'group relative flex h-[30px] w-full items-center rounded-lg transition-colors hover-hover:bg-[var(--surface-active)]',
+        item.isActive && 'bg-[var(--surface-active)]'
+      )}
+    >
+      <button
+        type='button'
+        onClick={() => onSelect(item.resource.id)}
+        className='flex h-full min-w-0 flex-1 items-center gap-2 px-2 pr-[26px] text-left'
+      >
+        {config.renderTabIcon(item.resource, 'size-[14px] shrink-0')}
+        <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'>{item.name}</span>
+      </button>
+      {item.isUpdated && (
+        <span
+          aria-hidden='true'
+          className='-translate-y-1/2 absolute top-1/2 right-[11px] size-[5px] rounded-full bg-[var(--brand-accent)] group-hover:opacity-0'
+        />
+      )}
+      <button
+        type='button'
+        onClick={() => onClose(item.resource)}
+        aria-label={`Close ${item.name}`}
+        className='-translate-y-1/2 absolute top-1/2 right-[6px] flex items-center justify-center rounded-sm p-[2px] opacity-0 transition-opacity hover-hover:bg-[var(--surface-6)] group-hover:opacity-100'
+      >
+        <X strokeWidth={2.5} className='size-[10px] text-[var(--text-icon)]' />
+      </button>
+    </div>
+  )
+}
+
+/**
+ * The resource switcher dropdown's contents: every open tab, grouped by
+ * provenance ("From this chat" vs the rest) when the active chat has surfaced
+ * any of them. Rows select on click and expose a hover close control.
+ */
+export function ResourceSwitcherList({ items, onSelect, onClose }: ResourceSwitcherListProps) {
+  const chatItems = items.filter((item) => item.isChatArtifact)
+  const otherItems = items.filter((item) => !item.isChatArtifact)
+  const showSections = chatItems.length > 0 && otherItems.length > 0
+
+  return (
+    <div className='flex flex-col px-2 py-2'>
+      {showSections && (
+        <p className='px-2 py-1 font-medium text-[var(--text-muted)] text-caption'>
+          From this chat
+        </p>
+      )}
+      {(showSections ? chatItems : items).map((item) => (
+        <SwitcherRow key={item.resource.id} item={item} onSelect={onSelect} onClose={onClose} />
+      ))}
+      {showSections && (
+        <>
+          <p className='mt-1.5 px-2 py-1 font-medium text-[var(--text-muted)] text-caption'>
+            Other open tabs
+          </p>
+          {otherItems.map((item) => (
+            <SwitcherRow key={item.resource.id} item={item} onSelect={onSelect} onClose={onClose} />
+          ))}
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 83a731fe8e5..70a7fec249f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -5,19 +5,27 @@ import {
   type ReactNode,
   type SetStateAction,
   useCallback,
-  useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react'
-import { Button, chipVariants, Tooltip } from '@/components/emcn'
-import { Columns3, Eye, Pencil, X } from '@/components/emcn/icons'
+import {
+  Button,
+  chipVariants,
+  POPOVER_ANIMATION_CLASSES,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  Tooltip,
+} from '@/components/emcn'
+import { ChevronDown, Columns3, Eye, Pencil, X } from '@/components/emcn/icons'
 import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import type { PreviewMode } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
 import { AddResourceDropdown } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown'
 import { getResourceConfig } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry'
 import { ResourcePanelToggle } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle'
+import { ResourceSwitcherList } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list'
 import {
   RESOURCE_TAB_GAP_CLASS,
   RESOURCE_TAB_ICON_BUTTON_CLASS,
@@ -33,8 +41,8 @@ import { useTablesList } from '@/hooks/queries/tables'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 
-const EDGE_ZONE = 40
-const SCROLL_SPEED = 8
+/** Inactive tabs shown inline before the rest collapse into the +N chip. */
+const MAX_INLINE_INACTIVE_TABS = 5
 
 const ADD_RESOURCE_EXCLUDED_TYPES: readonly MothershipResourceType[] = ['folder', 'task'] as const
 
@@ -63,10 +71,10 @@ function findNearestId(
  * snapshotted it.
  */
 function buildMultiDragImage(
-  scrollNode: HTMLElement | null,
+  stripNode: HTMLElement | null,
   selected: MothershipResource[]
 ): HTMLElement | null {
-  if (!scrollNode || selected.length === 0) return null
+  if (!stripNode || selected.length === 0) return null
   const container = document.createElement('div')
   Object.assign(container.style, {
     position: 'fixed',
@@ -80,7 +88,7 @@ function buildMultiDragImage(
   } satisfies Partial<CSSStyleDeclaration>)
   let appendedAny = false
   for (const r of selected) {
-    const original = scrollNode.querySelector<HTMLElement>(
+    const original = stripNode.querySelector<HTMLElement>(
       `[data-resource-tab-id="${CSS.escape(r.id)}"]`
     )
     if (!original) continue
@@ -131,14 +139,13 @@ function useResourceNameLookup(workspaceId: string): Map<string, string> {
 interface ResourceTabItemProps {
   resource: MothershipResource
   idx: number
-  isActive: boolean
   isHovered: boolean
   isDragging: boolean
   isSelected: boolean
   showGapBefore: boolean
   showGapAfter: boolean
   displayName: string
-  /** Provenance dot — the active chat surfaced/touched this artifact. */
+  /** The artifact changed while this tab wasn't focused. */
   showDot: boolean
   onDragStart: (e: React.DragEvent, idx: number) => void
   onDragOver: (e: React.DragEvent, idx: number) => void
@@ -149,10 +156,14 @@ interface ResourceTabItemProps {
   onRemove: (e: React.SyntheticEvent, resource: MothershipResource) => void
 }
 
+/**
+ * A compressed, inactive tab: icon-first with a truncating label so the strip
+ * squeezes browser-style instead of scroll-clipping. The active resource never
+ * renders here — it gets the spotlight title chip.
+ */
 const ResourceTabItem = memo(function ResourceTabItem({
   resource,
   idx,
-  isActive,
   isHovered,
   isDragging,
   isSelected,
@@ -170,7 +181,7 @@ const ResourceTabItem = memo(function ResourceTabItem({
 }: ResourceTabItemProps) {
   const config = getResourceConfig(resource.type)
   return (
-    <div className='relative flex shrink-0 items-center'>
+    <div className='relative flex min-w-0 shrink items-center'>
       {showGapBefore && (
         <div className='-translate-x-1/2 -translate-y-1/2 pointer-events-none absolute top-1/2 left-0 z-10 h-[16px] w-[2px] rounded-full bg-[var(--text-subtle)]' />
       )}
@@ -192,21 +203,21 @@ const ResourceTabItem = memo(function ResourceTabItem({
         onMouseEnter={() => setHoveredTabId(resource.id)}
         onMouseLeave={() => setHoveredTabId(null)}
         className={cn(
-          chipVariants({ variant: 'ghost', active: isActive, flush: true }),
-          'relative shrink-0 pr-[24px] text-[var(--text-body)]',
-          isSelected && !isActive && 'bg-[var(--surface-active)]',
+          chipVariants({ variant: 'ghost', flush: true }),
+          'relative min-w-[36px] max-w-[124px] shrink pr-[20px] text-[var(--text-body)]',
+          isSelected && 'bg-[var(--surface-active)]',
           isDragging && 'opacity-30'
         )}
       >
         {config.renderTabIcon(resource, 'size-[16px] shrink-0')}
-        <span className='truncate'>{displayName}</span>
-        {showDot && !(isHovered || isActive) && (
+        <span className='min-w-0 truncate'>{displayName}</span>
+        {showDot && !isHovered && (
           <span
             aria-hidden='true'
-            className='-translate-y-1/2 absolute top-1/2 right-[10px] size-[5px] rounded-full bg-[var(--brand-accent)]'
+            className='-translate-y-1/2 absolute top-1/2 right-[8px] size-[5px] rounded-full bg-[var(--brand-accent)]'
           />
         )}
-        {(isHovered || isActive) && (
+        {isHovered && (
           <span
             role='button'
             tabIndex={-1}
@@ -214,7 +225,7 @@ const ResourceTabItem = memo(function ResourceTabItem({
             onKeyDown={(e) => {
               if (e.key === 'Enter') onRemove(e, resource)
             }}
-            className='-translate-y-1/2 absolute top-1/2 right-[5px] flex items-center justify-center rounded-sm p-[2px] hover-hover:bg-[var(--surface-6)]'
+            className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center justify-center rounded-sm p-[2px] hover-hover:bg-[var(--surface-6)]'
             aria-label={`Close ${displayName}`}
           >
             <X strokeWidth={2.5} className='size-[10px] text-[var(--text-icon)]' />
@@ -246,10 +257,15 @@ interface ResourceTabsProps {
    */
   leading?: ReactNode
   /**
-   * `type:id` keys of the artifacts the active chat has surfaced — matching
-   * tabs render a provenance dot.
+   * `type:id` keys of the artifacts the active chat has surfaced — used to
+   * group the switcher dropdown by provenance.
    */
   chatArtifactKeys?: ReadonlySet<string>
+  /**
+   * `type:id` keys of tabs whose artifact changed while unfocused — these
+   * carry the update dot.
+   */
+  updatedTabKeys?: ReadonlySet<string>
 }
 
 export function ResourceTabs({
@@ -266,53 +282,18 @@ export function ResourceTabs({
   actions,
   leading,
   chatArtifactKeys,
+  updatedTabKeys,
 }: ResourceTabsProps) {
   const PreviewModeIcon = PREVIEW_MODE_ICONS[previewMode ?? 'split']
   const nameLookup = useResourceNameLookup(workspaceId)
-  const scrollNodeRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const node = scrollNodeRef.current
-    if (!node) return
-    const handler = (e: WheelEvent) => {
-      // Follow the dominant axis: trackpad horizontal swipes carry a small
-      // deltaY, so keying off deltaY alone hijacked (and killed) native
-      // horizontal panning. Vertical wheels still translate to horizontal.
-      const dominant = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY
-      if (dominant === 0) return
-      node.scrollLeft += dominant
-      e.preventDefault()
-    }
-    node.addEventListener('wheel', handler, { passive: false })
-    return () => node.removeEventListener('wheel', handler)
-  }, [])
-
-  useEffect(() => {
-    const node = scrollNodeRef.current
-    if (!node || !activeId) return
-    const tab = node.querySelector<HTMLElement>(`[data-resource-tab-id="${CSS.escape(activeId)}"]`)
-    if (!tab) return
-    // Use bounding rects because the tab's offsetParent is a `position: relative`
-    // wrapper, so `offsetLeft` is relative to that wrapper rather than `node`.
-    const tabRect = tab.getBoundingClientRect()
-    const nodeRect = node.getBoundingClientRect()
-    const tabLeft = tabRect.left - nodeRect.left + node.scrollLeft
-    const tabRight = tabLeft + tabRect.width
-    const viewLeft = node.scrollLeft
-    const viewRight = viewLeft + node.clientWidth
-    if (tabLeft < viewLeft) {
-      node.scrollTo({ left: tabLeft, behavior: 'smooth' })
-    } else if (tabRight > viewRight) {
-      node.scrollTo({ left: tabRight - node.clientWidth, behavior: 'smooth' })
-    }
-  }, [activeId])
+  const stripRef = useRef<HTMLDivElement>(null)
 
+  const [switcherOpen, setSwitcherOpen] = useState(false)
   const [hoveredTabId, setHoveredTabId] = useState<string | null>(null)
   const [draggedIdx, setDraggedIdx] = useState<number | null>(null)
   const [dropGapIdx, setDropGapIdx] = useState<number | null>(null)
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
   const dragStartIdx = useRef<number | null>(null)
-  const autoScrollRaf = useRef<number | null>(null)
   const anchorIdRef = useRef<string | null>(null)
   const prevChatIdRef = useRef(chatId)
 
@@ -324,6 +305,40 @@ export function ResourceTabs({
     anchorIdRef.current = null
   }
 
+  // Spotlight layout: the active resource renders as the title chip; the rest
+  // compress inline up to a cap, with the tail collapsing into the +N chip.
+  const activeResource = useMemo(
+    () => resources.find((r) => r.id === activeId) ?? resources[0] ?? null,
+    [resources, activeId]
+  )
+  const inactiveTabs = useMemo(
+    () => resources.filter((r) => r !== activeResource),
+    [resources, activeResource]
+  )
+  const inlineTabs = inactiveTabs.slice(0, MAX_INLINE_INACTIVE_TABS)
+  const overflowTabs = inactiveTabs.slice(MAX_INLINE_INACTIVE_TABS)
+
+  const resolveName = useCallback(
+    (resource: MothershipResource) =>
+      nameLookup.get(`${resource.type}:${resource.id}`) ?? resource.title,
+    [nameLookup]
+  )
+
+  const switcherItems = useMemo(
+    () =>
+      resources.map((resource) => {
+        const key = `${resource.type}:${resource.id}`
+        return {
+          resource,
+          name: resolveName(resource),
+          isActive: resource === activeResource,
+          isChatArtifact: chatArtifactKeys?.has(key) ?? false,
+          isUpdated: updatedTabKeys?.has(key) ?? false,
+        }
+      }),
+    [resources, activeResource, resolveName, chatArtifactKeys, updatedTabKeys]
+  )
+
   const existingKeys = useMemo(
     () => new Set(resources.map((r) => `${r.type}:${r.id}`)),
     [resources]
@@ -336,21 +351,35 @@ export function ResourceTabs({
     [onAddResource]
   )
 
+  const handleSwitcherSelect = useCallback(
+    (id: string) => {
+      setSwitcherOpen(false)
+      onSelect(id)
+    },
+    [onSelect]
+  )
+
+  const handleSwitcherClose = useCallback(
+    (resource: MothershipResource) => {
+      onRemoveResource(resource.type, resource.id)
+    },
+    [onRemoveResource]
+  )
+
   const handleTabClick = useCallback(
     (e: React.MouseEvent, idx: number) => {
-      const resource = resources[idx]
+      const resource = inactiveTabs[idx]
       if (!resource) return
 
-      // Shift+click: contiguous range from anchor
+      // Shift+click: contiguous range from anchor (within the inactive strip)
       if (e.shiftKey) {
-        // Fall back to activeId when no explicit anchor exists (e.g. tab opened via sidebar)
-        const anchorId = anchorIdRef.current ?? activeId
-        const anchorIdx = anchorId ? resources.findIndex((r) => r.id === anchorId) : -1
+        const anchorId = anchorIdRef.current
+        const anchorIdx = anchorId ? inactiveTabs.findIndex((r) => r.id === anchorId) : -1
         if (anchorIdx !== -1) {
           const start = Math.min(anchorIdx, idx)
           const end = Math.max(anchorIdx, idx)
           const next = new Set<string>()
-          for (let i = start; i <= end; i++) next.add(resources[i].id)
+          for (let i = start; i <= end; i++) next.add(inactiveTabs[i].id)
           setSelectedIds(next)
           onSelect(resource.id)
           return
@@ -364,10 +393,9 @@ export function ResourceTabs({
           const next = new Set(selectedIds)
           next.delete(resource.id)
           setSelectedIds(next)
-          // Only switch active if we just deselected the currently-active tab
           if (activeId === resource.id) {
             const fallback =
-              findNearestId(resources, idx, next) ?? findNearestId(resources, idx, null)
+              findNearestId(inactiveTabs, idx, next) ?? findNearestId(inactiveTabs, idx, null)
             if (fallback) onSelect(fallback)
           }
         } else {
@@ -383,7 +411,7 @@ export function ResourceTabs({
       setSelectedIds(new Set([resource.id]))
       onSelect(resource.id)
     },
-    [resources, onSelect, selectedIds, activeId]
+    [inactiveTabs, onSelect, selectedIds, activeId]
   )
 
   const handleRemove = useCallback(
@@ -410,16 +438,32 @@ export function ResourceTabs({
     [onRemoveResource, resources, selectedIds]
   )
 
+  const handleActiveDragStart = useCallback(
+    (e: React.DragEvent) => {
+      if (!activeResource) return
+      e.dataTransfer.effectAllowed = 'copy'
+      e.dataTransfer.setData(
+        SIM_RESOURCE_DRAG_TYPE,
+        JSON.stringify({
+          type: activeResource.type,
+          id: activeResource.id,
+          title: activeResource.title,
+        })
+      )
+    },
+    [activeResource]
+  )
+
   const handleDragStart = useCallback(
     (e: React.DragEvent, idx: number) => {
-      const resource = resources[idx]
+      const resource = inactiveTabs[idx]
       if (!resource) return
-      const selected = resources.filter((r) => selectedIds.has(r.id))
+      const selected = inactiveTabs.filter((r) => selectedIds.has(r.id))
       const isMultiDrag = selected.length > 1 && selectedIds.has(resource.id)
       if (isMultiDrag) {
         e.dataTransfer.effectAllowed = 'copy'
         e.dataTransfer.setData(SIM_RESOURCES_DRAG_TYPE, JSON.stringify(selected))
-        const dragImage = buildMultiDragImage(scrollNodeRef.current, selected)
+        const dragImage = buildMultiDragImage(stripRef.current, selected)
         if (dragImage) {
           e.dataTransfer.setDragImage(dragImage, 16, 16)
           setTimeout(() => dragImage.remove(), 0)
@@ -438,95 +482,52 @@ export function ResourceTabs({
         JSON.stringify({ type: resource.type, id: resource.id, title: resource.title })
       )
     },
-    [resources, selectedIds]
+    [inactiveTabs, selectedIds]
   )
 
-  const stopAutoScroll = useCallback(() => {
-    if (autoScrollRaf.current) {
-      cancelAnimationFrame(autoScrollRaf.current)
-      autoScrollRaf.current = null
-    }
+  const handleDragOver = useCallback((e: React.DragEvent, idx: number) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    const rect = e.currentTarget.getBoundingClientRect()
+    const midpoint = rect.left + rect.width / 2
+    const gap = e.clientX < midpoint ? idx : idx + 1
+    setDropGapIdx(gap)
   }, [])
 
-  const startEdgeScroll = useCallback(
-    (clientX: number) => {
-      const container = scrollNodeRef.current
-      if (!container) return
-      const cRect = container.getBoundingClientRect()
-      if (autoScrollRaf.current) cancelAnimationFrame(autoScrollRaf.current)
-      if (clientX < cRect.left + EDGE_ZONE) {
-        const tick = () => {
-          container.scrollLeft -= SCROLL_SPEED
-          autoScrollRaf.current = requestAnimationFrame(tick)
-        }
-        autoScrollRaf.current = requestAnimationFrame(tick)
-      } else if (clientX > cRect.right - EDGE_ZONE) {
-        const tick = () => {
-          container.scrollLeft += SCROLL_SPEED
-          autoScrollRaf.current = requestAnimationFrame(tick)
-        }
-        autoScrollRaf.current = requestAnimationFrame(tick)
-      } else {
-        stopAutoScroll()
-      }
-    },
-    [stopAutoScroll]
-  )
-
-  const handleDragOver = useCallback(
-    (e: React.DragEvent, idx: number) => {
-      e.preventDefault()
-      e.dataTransfer.dropEffect = 'move'
-      const rect = e.currentTarget.getBoundingClientRect()
-      const midpoint = rect.left + rect.width / 2
-      const gap = e.clientX < midpoint ? idx : idx + 1
-      setDropGapIdx(gap)
-      startEdgeScroll(e.clientX)
-    },
-    [startEdgeScroll]
-  )
-
   const handleDragLeave = useCallback(() => {
     setDropGapIdx(null)
-    stopAutoScroll()
-  }, [stopAutoScroll])
+  }, [])
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {
       e.preventDefault()
-      stopAutoScroll()
       const fromIdx = dragStartIdx.current
       const gapIdx = dropGapIdx
-      if (fromIdx === null || gapIdx === null) {
-        setDraggedIdx(null)
-        setDropGapIdx(null)
-        dragStartIdx.current = null
-        return
-      }
-      const insertAt = gapIdx > fromIdx ? gapIdx - 1 : gapIdx
-      if (insertAt === fromIdx) {
-        setDraggedIdx(null)
-        setDropGapIdx(null)
-        dragStartIdx.current = null
-        return
-      }
-      const reordered = [...resources]
-      const [moved] = reordered.splice(fromIdx, 1)
-      reordered.splice(insertAt, 0, moved)
-      onReorderResources(reordered)
       setDraggedIdx(null)
       setDropGapIdx(null)
       dragStartIdx.current = null
+      if (fromIdx === null || gapIdx === null) return
+      const insertAt = gapIdx > fromIdx ? gapIdx - 1 : gapIdx
+      if (insertAt === fromIdx) return
+      const reorderedInline = [...inlineTabs]
+      const [moved] = reorderedInline.splice(fromIdx, 1)
+      reorderedInline.splice(insertAt, 0, moved)
+      // The strip's visual order is [active, inline..., overflow...] — persist
+      // exactly that so the view and store never disagree.
+      onReorderResources([
+        ...(activeResource ? [activeResource] : []),
+        ...reorderedInline,
+        ...overflowTabs,
+      ])
     },
-    [resources, onReorderResources, dropGapIdx, stopAutoScroll]
+    [inlineTabs, overflowTabs, activeResource, onReorderResources, dropGapIdx]
   )
 
   const handleDragEnd = useCallback(() => {
-    stopAutoScroll()
     setDraggedIdx(null)
     setDropGapIdx(null)
     dragStartIdx.current = null
-  }, [stopAutoScroll])
+  }, [])
 
   return (
     <div
@@ -536,69 +537,107 @@ export function ResourceTabs({
       )}
     >
       {leading}
-      {/* Without leading controls, the tab strip starts at the bar's left edge —
-          pull it out 9px so the first tab pill sits 7px from the edge, matching
+      {/* Without leading controls, the strip starts at the bar's left edge —
+          pull it out 9px so the title chip sits 7px from the edge, matching
           the edge icon buttons' equal-distance rhythm. */}
       <div
+        ref={stripRef}
         className={cn(
           'flex min-w-0 flex-1 items-center',
           RESOURCE_TAB_GAP_CLASS,
           !leading && '-ml-[9px]'
         )}
+        onDragOver={(e) => e.preventDefault()}
+        onDrop={handleDrop}
       >
-        <div
-          ref={scrollNodeRef}
-          className={cn(
-            'flex min-w-0 items-center overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-            RESOURCE_TAB_GAP_CLASS
-          )}
-          onDragOver={(e) => {
-            e.preventDefault()
-            startEdgeScroll(e.clientX)
-          }}
-          onDrop={handleDrop}
-        >
-          {resources.map((resource, idx) => {
-            const displayName = nameLookup.get(`${resource.type}:${resource.id}`) ?? resource.title
-            const isActive = activeId === resource.id
-            const isHovered = hoveredTabId === resource.id
-            const isDragging = draggedIdx === idx
-            const isSelected = selectedIds.has(resource.id) && selectedIds.size > 1
-            const showGapBefore =
+        {activeResource && (
+          <Popover size='md' open={switcherOpen} onOpenChange={setSwitcherOpen}>
+            <PopoverAnchor asChild>
+              <button
+                type='button'
+                draggable
+                data-resource-tab-id={activeResource.id}
+                onDragStart={handleActiveDragStart}
+                onClick={() => setSwitcherOpen((prev) => !prev)}
+                aria-label='Switch resource'
+                className={cn(
+                  chipVariants({ variant: 'ghost', active: true, flush: true }),
+                  'min-w-0 shrink-0 text-[var(--text-body)]'
+                )}
+              >
+                {getResourceConfig(activeResource.type).renderTabIcon(
+                  activeResource,
+                  'size-[16px] shrink-0'
+                )}
+                <span className='max-w-[220px] truncate font-medium text-[var(--text-primary)]'>
+                  {resolveName(activeResource)}
+                </span>
+                <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+              </button>
+            </PopoverAnchor>
+            {/* Anchored 6px below the 44px bar, matching the chat switcher. */}
+            <PopoverContent
+              side='bottom'
+              align='start'
+              sideOffset={13}
+              minWidth={240}
+              maxWidth={320}
+              border
+              className={cn(POPOVER_ANIMATION_CLASSES, 'bg-[var(--bg)] p-0 dark:bg-[var(--bg)]')}
+            >
+              <ResourceSwitcherList
+                items={switcherItems}
+                onSelect={handleSwitcherSelect}
+                onClose={handleSwitcherClose}
+              />
+            </PopoverContent>
+          </Popover>
+        )}
+        {inlineTabs.map((resource, idx) => (
+          <ResourceTabItem
+            key={resource.id}
+            resource={resource}
+            idx={idx}
+            isHovered={hoveredTabId === resource.id}
+            isDragging={draggedIdx === idx}
+            isSelected={selectedIds.has(resource.id) && selectedIds.size > 1}
+            showGapBefore={
               dropGapIdx === idx &&
               draggedIdx !== null &&
               draggedIdx !== idx &&
               draggedIdx !== idx - 1
-            const showGapAfter =
-              idx === resources.length - 1 &&
-              dropGapIdx === resources.length &&
+            }
+            showGapAfter={
+              idx === inlineTabs.length - 1 &&
+              dropGapIdx === inlineTabs.length &&
               draggedIdx !== null &&
               draggedIdx !== idx
-
-            return (
-              <ResourceTabItem
-                key={resource.id}
-                resource={resource}
-                idx={idx}
-                isActive={isActive}
-                isHovered={isHovered}
-                isDragging={isDragging}
-                isSelected={isSelected}
-                showGapBefore={showGapBefore}
-                showGapAfter={showGapAfter}
-                displayName={displayName}
-                showDot={chatArtifactKeys?.has(`${resource.type}:${resource.id}`) ?? false}
-                onDragStart={handleDragStart}
-                onDragOver={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDragEnd={handleDragEnd}
-                onTabClick={handleTabClick}
-                setHoveredTabId={setHoveredTabId}
-                onRemove={handleRemove}
-              />
-            )
-          })}
-        </div>
+            }
+            displayName={resolveName(resource)}
+            showDot={updatedTabKeys?.has(`${resource.type}:${resource.id}`) ?? false}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDragEnd={handleDragEnd}
+            onTabClick={handleTabClick}
+            setHoveredTabId={setHoveredTabId}
+            onRemove={handleRemove}
+          />
+        ))}
+        {overflowTabs.length > 0 && (
+          <button
+            type='button'
+            onClick={() => setSwitcherOpen(true)}
+            aria-label={`${overflowTabs.length} more tabs`}
+            className={cn(
+              chipVariants({ variant: 'ghost', flush: true }),
+              'shrink-0 text-[var(--text-muted)]'
+            )}
+          >
+            +{overflowTabs.length}
+            <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+          </button>
+        )}
         {chatId && (
           <AddResourceDropdown
             workspaceId={workspaceId}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index 25dda582379..bc43c798ad1 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -56,10 +56,15 @@ interface MothershipViewProps {
   /** Controls rendered before the tab strip (see {@link ResourceTabs}). */
   tabsLeading?: ReactNode
   /**
-   * `type:id` keys of the artifacts the active chat has surfaced — tabs in
-   * this set carry a provenance dot in the strip.
+   * `type:id` keys of the artifacts the active chat has surfaced — used to
+   * group the resource switcher dropdown by provenance.
    */
   chatArtifactKeys?: ReadonlySet<string>
+  /**
+   * `type:id` keys of tabs whose artifact changed while unfocused — these
+   * carry the update dot in the strip.
+   */
+  updatedTabKeys?: ReadonlySet<string>
 }
 
 export const MothershipView = memo(
@@ -79,6 +84,7 @@ export const MothershipView = memo(
       genericResourceData,
       tabsLeading,
       chatArtifactKeys,
+      updatedTabKeys,
     }: MothershipViewProps,
     ref
   ) {
@@ -119,6 +125,7 @@ export const MothershipView = memo(
             chatId={chatId}
             leading={tabsLeading}
             chatArtifactKeys={chatArtifactKeys}
+            updatedTabKeys={updatedTabKeys}
             resources={resources}
             activeId={active?.id ?? null}
             onSelect={onSelectResource}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index c20fbb55d1b..3565c8ec787 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -212,11 +212,16 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     [resources]
   )
 
+  // Tabs whose artifact the chat touched while they weren't focused — they
+  // carry the update dot until viewed.
+  const [updatedTabKeys, setUpdatedTabKeys] = useState<Set<string>>(new Set())
+
   // Merge the active chat's artifacts into the strip. Tracking merged keys per
   // chat means a tab the user closed mid-chat isn't resurrected by the next
   // render, while re-entering the chat later re-opens its artifacts. The last
   // fresh artifact gets focus (on switch that's the chat's most recent one; on
-  // a live stream it's the resource the agent just touched).
+  // a live stream it's the resource the agent just touched); the rest are
+  // marked updated until viewed.
   const mergedChatKeyRef = useRef<string | null>(null)
   const mergedKeysRef = useRef<Set<string>>(new Set())
   const initialResourceIdRef = useRef(initialResourceId)
@@ -236,8 +241,44 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     const focusId =
       urlFocus && fresh.some((r) => r.id === urlFocus) ? urlFocus : fresh[fresh.length - 1].id
     openTabs(workspaceId, fresh, { focusId })
+    const unfocused = fresh.filter((r) => r.id !== focusId)
+    if (unfocused.length > 0) {
+      setUpdatedTabKeys((prev) => {
+        const next = new Set(prev)
+        for (const r of unfocused) next.add(`${r.type}:${r.id}`)
+        return next
+      })
+    }
   }, [resources, resolvedChatId, chatId, workspaceId, openTabs])
 
+  const clearUpdatedKey = useCallback((key: string) => {
+    setUpdatedTabKeys((prev) => {
+      if (!prev.has(key)) return prev
+      const next = new Set(prev)
+      next.delete(key)
+      return next
+    })
+  }, [])
+
+  const handleSelectTab = useCallback(
+    (id: string) => {
+      setActiveTab(workspaceId, id)
+      const tab = useMothershipTabsStore
+        .getState()
+        .byWorkspace[workspaceId]?.tabs.find((t) => t.id === id)
+      if (tab) clearUpdatedKey(`${tab.type}:${tab.id}`)
+    },
+    [setActiveTab, workspaceId, clearUpdatedKey]
+  )
+
+  const handleCloseTab = useCallback(
+    (resourceType: MothershipResourceType, resourceId: string) => {
+      closeTab(workspaceId, resourceType, resourceId)
+      clearUpdatedKey(`${resourceType}:${resourceId}`)
+    },
+    [closeTab, workspaceId, clearUpdatedKey]
+  )
+
   // Focus newly-appearing ephemeral resources (e.g. a streaming file preview),
   // mirroring how the chat focuses artifacts it touches.
   const prevEphemeralKeysRef = useRef<Set<string>>(new Set())
@@ -518,9 +559,10 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
           resources={panelTabs}
           activeResourceId={storeActiveTabId}
           chatArtifactKeys={chatArtifactKeys}
-          onSelectResource={(id) => setActiveTab(workspaceId, id)}
+          updatedTabKeys={updatedTabKeys}
+          onSelectResource={handleSelectTab}
           onAddResource={openResourceTab}
-          onRemoveResource={(type, id) => closeTab(workspaceId, type, id)}
+          onRemoveResource={handleCloseTab}
           onReorderResources={(tabs) => reorderTabs(workspaceId, tabs)}
           isCollapsed={isResourceCollapsed}
           previewSession={previewSession}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 60f1b53f5c8..f43fc426afc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -4228,7 +4228,7 @@ const WorkflowContent = React.memo(
             {!embedded && (
               <div className='absolute top-[7px] left-[7px] z-10 flex items-center gap-1'>
                 <SidebarToggle />
-                <ChatSwitcher />
+                <ChatSwitcher iconOnly />
               </div>
             )}
           </div>

From 8b9fd6f65d06fc99e27b0b2d693f65ea68d4f257 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 22:50:40 -0500
Subject: [PATCH 15/34] =?UTF-8?q?feat(resource-tabs):=20width-aware=20tab?=
 =?UTF-8?q?=20overflow=20=E2=80=94=20fit=20what=20fits,=20+N=20only=20for?=
 =?UTF-8?q?=20the=20true=20remainder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the fixed five-tab cap with measured capacity: the strip and the
name-dependent title chip are observed (ResizeObserver, with a window-resize
fallback), and whole tab slots are fitted into the remaining width. Zero-width
measurements (panel collapsed or mid-expand-animation) are ignored so a bogus
early measure can't collapse everything into the dropdown, and capacity starts
permissive until the first trustworthy layout pass.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-tabs/resource-tabs.tsx           | 78 +++++++++++++++++--
 1 file changed, 71 insertions(+), 7 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 70a7fec249f..daaa7930d69 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -5,6 +5,7 @@ import {
   type ReactNode,
   type SetStateAction,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -41,8 +42,18 @@ import { useTablesList } from '@/hooks/queries/tables'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 
-/** Inactive tabs shown inline before the rest collapse into the +N chip. */
-const MAX_INLINE_INACTIVE_TABS = 5
+/**
+ * Width budget for one compressed inactive tab (icon + a few readable chars).
+ * Tabs flex between their min/max around this estimate; capacity planning uses
+ * it to decide how many fit before the tail collapses into the +N chip.
+ */
+const TAB_SLOT_WIDTH = 84
+/** Reserved width for the +N overflow chip when it renders. */
+const OVERFLOW_CHIP_WIDTH = 56
+/** Reserved width for the add-resource (+) button. */
+const ADD_BUTTON_WIDTH = 30
+/** Gap between strip items (gap-1.5). */
+const STRIP_GAP = 6
 
 const ADD_RESOURCE_EXCLUDED_TYPES: readonly MothershipResourceType[] = ['folder', 'task'] as const
 
@@ -286,7 +297,16 @@ export function ResourceTabs({
 }: ResourceTabsProps) {
   const PreviewModeIcon = PREVIEW_MODE_ICONS[previewMode ?? 'split']
   const nameLookup = useResourceNameLookup(workspaceId)
-  const stripRef = useRef<HTMLDivElement>(null)
+  // Callback ref held in state so the capacity effect re-runs exactly when
+  // the strip node attaches — a plain ref can be null on the effect's first
+  // pass (hydration/transition commits), which would leave no observer behind
+  // and freeze capacity at zero.
+  const stripRef = useRef<HTMLDivElement | null>(null)
+  const [stripNode, setStripNode] = useState<HTMLDivElement | null>(null)
+  const attachStrip = useCallback((node: HTMLDivElement | null) => {
+    stripRef.current = node
+    setStripNode(node)
+  }, [])
 
   const [switcherOpen, setSwitcherOpen] = useState(false)
   const [hoveredTabId, setHoveredTabId] = useState<string | null>(null)
@@ -306,7 +326,8 @@ export function ResourceTabs({
   }
 
   // Spotlight layout: the active resource renders as the title chip; the rest
-  // compress inline up to a cap, with the tail collapsing into the +N chip.
+  // compress inline as long as they genuinely fit, with only the true
+  // remainder collapsing into the +N chip.
   const activeResource = useMemo(
     () => resources.find((r) => r.id === activeId) ?? resources[0] ?? null,
     [resources, activeId]
@@ -315,8 +336,50 @@ export function ResourceTabs({
     () => resources.filter((r) => r !== activeResource),
     [resources, activeResource]
   )
-  const inlineTabs = inactiveTabs.slice(0, MAX_INLINE_INACTIVE_TABS)
-  const overflowTabs = inactiveTabs.slice(MAX_INLINE_INACTIVE_TABS)
+
+  // Width-aware capacity: measure the strip and the (name-dependent) title
+  // chip, then fit whole tab slots into what's left. The inline tab renders
+  // don't affect either measured node, so there's no layout feedback loop.
+  const activeChipRef = useRef<HTMLButtonElement>(null)
+  // Permissive until the first trustworthy measurement: all tabs inline (the
+  // panel's overflow-hidden clips any excess during the expand animation).
+  const [inlineCapacity, setInlineCapacity] = useState(Number.MAX_SAFE_INTEGER)
+  const inactiveCount = inactiveTabs.length
+  useEffect(() => {
+    if (!stripNode) return
+    const compute = () => {
+      // Zero width means the strip isn't laid out yet (panel collapsed or
+      // mid-animation) — keep the previous capacity rather than trusting it.
+      if (stripNode.clientWidth === 0) return
+      const activeWidth = activeChipRef.current ? activeChipRef.current.offsetWidth + STRIP_GAP : 0
+      const addWidth = chatId ? ADD_BUTTON_WIDTH + STRIP_GAP : 0
+      const available = stripNode.clientWidth - activeWidth - addWidth
+      const fitsAll = Math.floor((available + STRIP_GAP) / (TAB_SLOT_WIDTH + STRIP_GAP))
+      if (fitsAll >= inactiveCount) {
+        setInlineCapacity(inactiveCount)
+        return
+      }
+      const withOverflowChip = available - (OVERFLOW_CHIP_WIDTH + STRIP_GAP)
+      setInlineCapacity(
+        Math.max(0, Math.floor((withOverflowChip + STRIP_GAP) / (TAB_SLOT_WIDTH + STRIP_GAP)))
+      )
+    }
+    compute()
+    // The strip resizes with every panel/sidebar/window change, so observing
+    // it covers all reflow sources; the window listener is a fallback for the
+    // first paint after the expand animation.
+    const observer = new ResizeObserver(compute)
+    observer.observe(stripNode)
+    if (activeChipRef.current) observer.observe(activeChipRef.current)
+    window.addEventListener('resize', compute)
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', compute)
+    }
+  }, [stripNode, inactiveCount, chatId, activeResource])
+
+  const inlineTabs = inactiveTabs.slice(0, inlineCapacity)
+  const overflowTabs = inactiveTabs.slice(inlineCapacity)
 
   const resolveName = useCallback(
     (resource: MothershipResource) =>
@@ -541,7 +604,7 @@ export function ResourceTabs({
           pull it out 9px so the title chip sits 7px from the edge, matching
           the edge icon buttons' equal-distance rhythm. */}
       <div
-        ref={stripRef}
+        ref={attachStrip}
         className={cn(
           'flex min-w-0 flex-1 items-center',
           RESOURCE_TAB_GAP_CLASS,
@@ -554,6 +617,7 @@ export function ResourceTabs({
           <Popover size='md' open={switcherOpen} onOpenChange={setSwitcherOpen}>
             <PopoverAnchor asChild>
               <button
+                ref={activeChipRef}
                 type='button'
                 draggable
                 data-resource-tab-id={activeResource.id}

From fea96b59838d5b36da49426b3f11425d5e8209fa Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 23:00:04 -0500
Subject: [PATCH 16/34] =?UTF-8?q?refactor(resource-tabs):=20one=20home=20p?=
 =?UTF-8?q?er=20tab=20=E2=80=94=20title=20chip=20drops=20its=20dropdown,?=
 =?UTF-8?q?=20+N=20lists=20only=20hidden=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The all-tabs switcher dropdown duplicated the strip and made +N feel like a
third concept. Now every tab lives in exactly one place: the active resource
is a plain title chip, visible tabs switch by clicking, and the +N chip is the
only dropdown, listing just the tabs that didn't fit. Selecting one promotes
it to active, so it leaves the overflow naturally.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-tabs/resource-tabs.tsx           | 118 +++++++++---------
 1 file changed, 60 insertions(+), 58 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index daaa7930d69..07f93dbf085 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -387,19 +387,21 @@ export function ResourceTabs({
     [nameLookup]
   )
 
-  const switcherItems = useMemo(
+  // Only the tabs that didn't fit inline — the dropdown never duplicates
+  // what the strip already shows.
+  const overflowItems = useMemo(
     () =>
-      resources.map((resource) => {
+      overflowTabs.map((resource) => {
         const key = `${resource.type}:${resource.id}`
         return {
           resource,
           name: resolveName(resource),
-          isActive: resource === activeResource,
+          isActive: false,
           isChatArtifact: chatArtifactKeys?.has(key) ?? false,
           isUpdated: updatedTabKeys?.has(key) ?? false,
         }
       }),
-    [resources, activeResource, resolveName, chatArtifactKeys, updatedTabKeys]
+    [overflowTabs, resolveName, chatArtifactKeys, updatedTabKeys]
   )
 
   const existingKeys = useMemo(
@@ -614,48 +616,27 @@ export function ResourceTabs({
         onDrop={handleDrop}
       >
         {activeResource && (
-          <Popover size='md' open={switcherOpen} onOpenChange={setSwitcherOpen}>
-            <PopoverAnchor asChild>
-              <button
-                ref={activeChipRef}
-                type='button'
-                draggable
-                data-resource-tab-id={activeResource.id}
-                onDragStart={handleActiveDragStart}
-                onClick={() => setSwitcherOpen((prev) => !prev)}
-                aria-label='Switch resource'
-                className={cn(
-                  chipVariants({ variant: 'ghost', active: true, flush: true }),
-                  'min-w-0 shrink-0 text-[var(--text-body)]'
-                )}
-              >
-                {getResourceConfig(activeResource.type).renderTabIcon(
-                  activeResource,
-                  'size-[16px] shrink-0'
-                )}
-                <span className='max-w-[220px] truncate font-medium text-[var(--text-primary)]'>
-                  {resolveName(activeResource)}
-                </span>
-                <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
-              </button>
-            </PopoverAnchor>
-            {/* Anchored 6px below the 44px bar, matching the chat switcher. */}
-            <PopoverContent
-              side='bottom'
-              align='start'
-              sideOffset={13}
-              minWidth={240}
-              maxWidth={320}
-              border
-              className={cn(POPOVER_ANIMATION_CLASSES, 'bg-[var(--bg)] p-0 dark:bg-[var(--bg)]')}
-            >
-              <ResourceSwitcherList
-                items={switcherItems}
-                onSelect={handleSwitcherSelect}
-                onClose={handleSwitcherClose}
-              />
-            </PopoverContent>
-          </Popover>
+          /* The title chip is just the active tab — the inline tabs are the
+             switcher, so it carries no dropdown of its own. */
+          <button
+            ref={activeChipRef}
+            type='button'
+            draggable
+            data-resource-tab-id={activeResource.id}
+            onDragStart={handleActiveDragStart}
+            className={cn(
+              chipVariants({ variant: 'ghost', active: true, flush: true }),
+              'min-w-0 shrink-0 cursor-default text-[var(--text-body)]'
+            )}
+          >
+            {getResourceConfig(activeResource.type).renderTabIcon(
+              activeResource,
+              'size-[16px] shrink-0'
+            )}
+            <span className='max-w-[220px] truncate font-medium text-[var(--text-primary)]'>
+              {resolveName(activeResource)}
+            </span>
+          </button>
         )}
         {inlineTabs.map((resource, idx) => (
           <ResourceTabItem
@@ -689,18 +670,39 @@ export function ResourceTabs({
           />
         ))}
         {overflowTabs.length > 0 && (
-          <button
-            type='button'
-            onClick={() => setSwitcherOpen(true)}
-            aria-label={`${overflowTabs.length} more tabs`}
-            className={cn(
-              chipVariants({ variant: 'ghost', flush: true }),
-              'shrink-0 text-[var(--text-muted)]'
-            )}
-          >
-            +{overflowTabs.length}
-            <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
-          </button>
+          <Popover size='md' open={switcherOpen} onOpenChange={setSwitcherOpen}>
+            <PopoverAnchor asChild>
+              <button
+                type='button'
+                onClick={() => setSwitcherOpen((prev) => !prev)}
+                aria-label={`${overflowTabs.length} more tabs`}
+                className={cn(
+                  chipVariants({ variant: 'ghost', flush: true }),
+                  'shrink-0 text-[var(--text-muted)]',
+                  switcherOpen && 'bg-[var(--surface-active)]'
+                )}
+              >
+                +{overflowTabs.length}
+                <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+              </button>
+            </PopoverAnchor>
+            {/* Anchored 6px below the 44px bar, matching the chat switcher. */}
+            <PopoverContent
+              side='bottom'
+              align='start'
+              sideOffset={13}
+              minWidth={240}
+              maxWidth={320}
+              border
+              className={cn(POPOVER_ANIMATION_CLASSES, 'bg-[var(--bg)] p-0 dark:bg-[var(--bg)]')}
+            >
+              <ResourceSwitcherList
+                items={overflowItems}
+                onSelect={handleSwitcherSelect}
+                onClose={handleSwitcherClose}
+              />
+            </PopoverContent>
+          </Popover>
         )}
         {chatId && (
           <AddResourceDropdown

From fa017e3c4791d934c9ef18aa2f396376a8c8389c Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 23:07:29 -0500
Subject: [PATCH 17/34] =?UTF-8?q?fix(resource-tabs):=20never=20truncate=20?=
 =?UTF-8?q?inline=20tabs=20=E2=80=94=20fit=20whole=20tabs=20by=20measured?=
 =?UTF-8?q?=20width,=20overflow=20the=20rest?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the fixed 84px slot estimate (which squeezed labels even with room to
spare) with real per-tab measurement: a hidden measuring row renders every
inactive tab at natural width, and the capacity pass greedily fits whole tabs
into the strip, sending only the true remainder to +N. Inline labels keep a
240px ceiling purely as a pathological-name guard, mirrored in measurement so
render and fitting agree.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-tabs/resource-tabs.tsx           | 71 ++++++++++++++-----
 1 file changed, 55 insertions(+), 16 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 07f93dbf085..50f52103df3 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -43,11 +43,10 @@ import { useWorkflows } from '@/hooks/queries/workflows'
 import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
 
 /**
- * Width budget for one compressed inactive tab (icon + a few readable chars).
- * Tabs flex between their min/max around this estimate; capacity planning uses
- * it to decide how many fit before the tail collapses into the +N chip.
+ * Hard ceiling on a single tab's width — guards against pathological names.
+ * Matches the inline tabs' max-w so measurement and render agree.
  */
-const TAB_SLOT_WIDTH = 84
+const TAB_MAX_WIDTH = 240
 /** Reserved width for the +N overflow chip when it renders. */
 const OVERFLOW_CHIP_WIDTH = 56
 /** Reserved width for the add-resource (+) button. */
@@ -168,9 +167,10 @@ interface ResourceTabItemProps {
 }
 
 /**
- * A compressed, inactive tab: icon-first with a truncating label so the strip
- * squeezes browser-style instead of scroll-clipping. The active resource never
- * renders here — it gets the spotlight title chip.
+ * An inactive tab at its natural width — labels never truncate (beyond the
+ * pathological-name ceiling); tabs that don't fit whole collapse into the +N
+ * dropdown instead. The active resource never renders here — it gets the
+ * spotlight title chip.
  */
 const ResourceTabItem = memo(function ResourceTabItem({
   resource,
@@ -215,7 +215,7 @@ const ResourceTabItem = memo(function ResourceTabItem({
         onMouseLeave={() => setHoveredTabId(null)}
         className={cn(
           chipVariants({ variant: 'ghost', flush: true }),
-          'relative min-w-[36px] max-w-[124px] shrink pr-[20px] text-[var(--text-body)]',
+          'relative max-w-[240px] shrink-0 pr-[20px] text-[var(--text-body)]',
           isSelected && 'bg-[var(--surface-active)]',
           isDragging && 'opacity-30'
         )}
@@ -341,28 +341,44 @@ export function ResourceTabs({
   // chip, then fit whole tab slots into what's left. The inline tab renders
   // don't affect either measured node, so there's no layout feedback loop.
   const activeChipRef = useRef<HTMLButtonElement>(null)
+  const measureRef = useRef<HTMLDivElement>(null)
   // Permissive until the first trustworthy measurement: all tabs inline (the
   // panel's overflow-hidden clips any excess during the expand animation).
   const [inlineCapacity, setInlineCapacity] = useState(Number.MAX_SAFE_INTEGER)
   const inactiveCount = inactiveTabs.length
+  // Names participate in fitting (tabs render at natural width), so capacity
+  // must recompute when any label changes — not just when counts do.
+  const namesKey = inactiveTabs.map((r) => nameLookup.get(`${r.type}:${r.id}`) ?? r.title).join('')
   useEffect(() => {
     if (!stripNode) return
     const compute = () => {
       // Zero width means the strip isn't laid out yet (panel collapsed or
       // mid-animation) — keep the previous capacity rather than trusting it.
       if (stripNode.clientWidth === 0) return
+      const measureNode = measureRef.current
+      if (!measureNode) return
+      // Natural (untruncated) width of every inactive tab, from the hidden
+      // measuring row — tabs are never squeezed, they fit whole or overflow.
+      const tabWidths = Array.from(measureNode.children).map((child) =>
+        Math.min((child as HTMLElement).offsetWidth, TAB_MAX_WIDTH)
+      )
       const activeWidth = activeChipRef.current ? activeChipRef.current.offsetWidth + STRIP_GAP : 0
       const addWidth = chatId ? ADD_BUTTON_WIDTH + STRIP_GAP : 0
       const available = stripNode.clientWidth - activeWidth - addWidth
-      const fitsAll = Math.floor((available + STRIP_GAP) / (TAB_SLOT_WIDTH + STRIP_GAP))
-      if (fitsAll >= inactiveCount) {
+      const totalAll = tabWidths.reduce((sum, w) => sum + w + STRIP_GAP, 0)
+      if (totalAll <= available + STRIP_GAP) {
         setInlineCapacity(inactiveCount)
         return
       }
-      const withOverflowChip = available - (OVERFLOW_CHIP_WIDTH + STRIP_GAP)
-      setInlineCapacity(
-        Math.max(0, Math.floor((withOverflowChip + STRIP_GAP) / (TAB_SLOT_WIDTH + STRIP_GAP)))
-      )
+      const availableWithChip = available - (OVERFLOW_CHIP_WIDTH + STRIP_GAP)
+      let used = 0
+      let fit = 0
+      for (const width of tabWidths) {
+        if (used + width > availableWithChip) break
+        used += width + STRIP_GAP
+        fit += 1
+      }
+      setInlineCapacity(fit)
     }
     compute()
     // The strip resizes with every panel/sidebar/window change, so observing
@@ -376,7 +392,7 @@ export function ResourceTabs({
       observer.disconnect()
       window.removeEventListener('resize', compute)
     }
-  }, [stripNode, inactiveCount, chatId, activeResource])
+  }, [stripNode, inactiveCount, chatId, activeResource, namesKey])
 
   const inlineTabs = inactiveTabs.slice(0, inlineCapacity)
   const overflowTabs = inactiveTabs.slice(inlineCapacity)
@@ -608,13 +624,36 @@ export function ResourceTabs({
       <div
         ref={attachStrip}
         className={cn(
-          'flex min-w-0 flex-1 items-center',
+          'relative flex min-w-0 flex-1 items-center',
           RESOURCE_TAB_GAP_CLASS,
           !leading && '-ml-[9px]'
         )}
         onDragOver={(e) => e.preventDefault()}
         onDrop={handleDrop}
       >
+        {/* Hidden measuring row: every inactive tab at natural width, so the
+            capacity pass fits whole tabs instead of guessing slot sizes. */}
+        <div
+          ref={measureRef}
+          aria-hidden='true'
+          className={cn(
+            'pointer-events-none invisible absolute top-0 left-0 flex items-center',
+            RESOURCE_TAB_GAP_CLASS
+          )}
+        >
+          {inactiveTabs.map((resource) => (
+            <span
+              key={resource.id}
+              className={cn(
+                chipVariants({ variant: 'ghost', flush: true }),
+                'whitespace-nowrap pr-[20px] text-[var(--text-body)]'
+              )}
+            >
+              {getResourceConfig(resource.type).renderTabIcon(resource, 'size-[16px] shrink-0')}
+              <span>{resolveName(resource)}</span>
+            </span>
+          ))}
+        </div>
         {activeResource && (
           /* The title chip is just the active tab — the inline tabs are the
              switcher, so it carries no dropdown of its own. */

From 830827b360469cbcc09093077825443399b75fac Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Wed, 10 Jun 2026 23:12:41 -0500
Subject: [PATCH 18/34] chore(resource-tabs): drop the green update dots and
 their tracking plumbing

Removes the unfocused-change indicator from inline tabs and switcher rows,
along with the updatedTabKeys state, marking, and clearing in home. Also
escapes a literal NUL byte that had crept into the namesKey join separator.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-tabs/resource-switcher-list.tsx  |  8 -----
 .../resource-tabs/resource-tabs.tsx           | 23 +++----------
 .../mothership-view/mothership-view.tsx       |  7 ----
 .../app/workspace/[workspaceId]/home/home.tsx | 34 ++-----------------
 4 files changed, 7 insertions(+), 65 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx
index 347faf1ecff..c23ccfced20 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx
@@ -11,8 +11,6 @@ export interface ResourceSwitcherItem {
   isActive: boolean
   /** Surfaced by the active chat — grouped under "From this chat". */
   isChatArtifact: boolean
-  /** Changed while the tab wasn't focused. */
-  isUpdated: boolean
 }
 
 interface ResourceSwitcherListProps {
@@ -46,12 +44,6 @@ function SwitcherRow({
         {config.renderTabIcon(item.resource, 'size-[14px] shrink-0')}
         <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'>{item.name}</span>
       </button>
-      {item.isUpdated && (
-        <span
-          aria-hidden='true'
-          className='-translate-y-1/2 absolute top-1/2 right-[11px] size-[5px] rounded-full bg-[var(--brand-accent)] group-hover:opacity-0'
-        />
-      )}
       <button
         type='button'
         onClick={() => onClose(item.resource)}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 50f52103df3..9b4e5bd01ab 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -155,8 +155,6 @@ interface ResourceTabItemProps {
   showGapBefore: boolean
   showGapAfter: boolean
   displayName: string
-  /** The artifact changed while this tab wasn't focused. */
-  showDot: boolean
   onDragStart: (e: React.DragEvent, idx: number) => void
   onDragOver: (e: React.DragEvent, idx: number) => void
   onDragLeave: () => void
@@ -181,7 +179,6 @@ const ResourceTabItem = memo(function ResourceTabItem({
   showGapBefore,
   showGapAfter,
   displayName,
-  showDot,
   onDragStart,
   onDragOver,
   onDragLeave,
@@ -222,12 +219,6 @@ const ResourceTabItem = memo(function ResourceTabItem({
       >
         {config.renderTabIcon(resource, 'size-[16px] shrink-0')}
         <span className='min-w-0 truncate'>{displayName}</span>
-        {showDot && !isHovered && (
-          <span
-            aria-hidden='true'
-            className='-translate-y-1/2 absolute top-1/2 right-[8px] size-[5px] rounded-full bg-[var(--brand-accent)]'
-          />
-        )}
         {isHovered && (
           <span
             role='button'
@@ -272,11 +263,6 @@ interface ResourceTabsProps {
    * group the switcher dropdown by provenance.
    */
   chatArtifactKeys?: ReadonlySet<string>
-  /**
-   * `type:id` keys of tabs whose artifact changed while unfocused — these
-   * carry the update dot.
-   */
-  updatedTabKeys?: ReadonlySet<string>
 }
 
 export function ResourceTabs({
@@ -293,7 +279,6 @@ export function ResourceTabs({
   actions,
   leading,
   chatArtifactKeys,
-  updatedTabKeys,
 }: ResourceTabsProps) {
   const PreviewModeIcon = PREVIEW_MODE_ICONS[previewMode ?? 'split']
   const nameLookup = useResourceNameLookup(workspaceId)
@@ -348,7 +333,9 @@ export function ResourceTabs({
   const inactiveCount = inactiveTabs.length
   // Names participate in fitting (tabs render at natural width), so capacity
   // must recompute when any label changes — not just when counts do.
-  const namesKey = inactiveTabs.map((r) => nameLookup.get(`${r.type}:${r.id}`) ?? r.title).join('')
+  const namesKey = inactiveTabs
+    .map((r) => nameLookup.get(`${r.type}:${r.id}`) ?? r.title)
+    .join('\u0000')
   useEffect(() => {
     if (!stripNode) return
     const compute = () => {
@@ -414,10 +401,9 @@ export function ResourceTabs({
           name: resolveName(resource),
           isActive: false,
           isChatArtifact: chatArtifactKeys?.has(key) ?? false,
-          isUpdated: updatedTabKeys?.has(key) ?? false,
         }
       }),
-    [overflowTabs, resolveName, chatArtifactKeys, updatedTabKeys]
+    [overflowTabs, resolveName, chatArtifactKeys]
   )
 
   const existingKeys = useMemo(
@@ -698,7 +684,6 @@ export function ResourceTabs({
               draggedIdx !== idx
             }
             displayName={resolveName(resource)}
-            showDot={updatedTabKeys?.has(`${resource.type}:${resource.id}`) ?? false}
             onDragStart={handleDragStart}
             onDragOver={handleDragOver}
             onDragLeave={handleDragLeave}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index bc43c798ad1..4e971d9beeb 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -60,11 +60,6 @@ interface MothershipViewProps {
    * group the resource switcher dropdown by provenance.
    */
   chatArtifactKeys?: ReadonlySet<string>
-  /**
-   * `type:id` keys of tabs whose artifact changed while unfocused — these
-   * carry the update dot in the strip.
-   */
-  updatedTabKeys?: ReadonlySet<string>
 }
 
 export const MothershipView = memo(
@@ -84,7 +79,6 @@ export const MothershipView = memo(
       genericResourceData,
       tabsLeading,
       chatArtifactKeys,
-      updatedTabKeys,
     }: MothershipViewProps,
     ref
   ) {
@@ -125,7 +119,6 @@ export const MothershipView = memo(
             chatId={chatId}
             leading={tabsLeading}
             chatArtifactKeys={chatArtifactKeys}
-            updatedTabKeys={updatedTabKeys}
             resources={resources}
             activeId={active?.id ?? null}
             onSelect={onSelectResource}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index 3565c8ec787..f9ebeaab296 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -212,16 +212,11 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     [resources]
   )
 
-  // Tabs whose artifact the chat touched while they weren't focused — they
-  // carry the update dot until viewed.
-  const [updatedTabKeys, setUpdatedTabKeys] = useState<Set<string>>(new Set())
-
   // Merge the active chat's artifacts into the strip. Tracking merged keys per
   // chat means a tab the user closed mid-chat isn't resurrected by the next
   // render, while re-entering the chat later re-opens its artifacts. The last
   // fresh artifact gets focus (on switch that's the chat's most recent one; on
-  // a live stream it's the resource the agent just touched); the rest are
-  // marked updated until viewed.
+  // a live stream it's the resource the agent just touched).
   const mergedChatKeyRef = useRef<string | null>(null)
   const mergedKeysRef = useRef<Set<string>>(new Set())
   const initialResourceIdRef = useRef(initialResourceId)
@@ -241,42 +236,20 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     const focusId =
       urlFocus && fresh.some((r) => r.id === urlFocus) ? urlFocus : fresh[fresh.length - 1].id
     openTabs(workspaceId, fresh, { focusId })
-    const unfocused = fresh.filter((r) => r.id !== focusId)
-    if (unfocused.length > 0) {
-      setUpdatedTabKeys((prev) => {
-        const next = new Set(prev)
-        for (const r of unfocused) next.add(`${r.type}:${r.id}`)
-        return next
-      })
-    }
   }, [resources, resolvedChatId, chatId, workspaceId, openTabs])
 
-  const clearUpdatedKey = useCallback((key: string) => {
-    setUpdatedTabKeys((prev) => {
-      if (!prev.has(key)) return prev
-      const next = new Set(prev)
-      next.delete(key)
-      return next
-    })
-  }, [])
-
   const handleSelectTab = useCallback(
     (id: string) => {
       setActiveTab(workspaceId, id)
-      const tab = useMothershipTabsStore
-        .getState()
-        .byWorkspace[workspaceId]?.tabs.find((t) => t.id === id)
-      if (tab) clearUpdatedKey(`${tab.type}:${tab.id}`)
     },
-    [setActiveTab, workspaceId, clearUpdatedKey]
+    [setActiveTab, workspaceId]
   )
 
   const handleCloseTab = useCallback(
     (resourceType: MothershipResourceType, resourceId: string) => {
       closeTab(workspaceId, resourceType, resourceId)
-      clearUpdatedKey(`${resourceType}:${resourceId}`)
     },
-    [closeTab, workspaceId, clearUpdatedKey]
+    [closeTab, workspaceId]
   )
 
   // Focus newly-appearing ephemeral resources (e.g. a streaming file preview),
@@ -559,7 +532,6 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
           resources={panelTabs}
           activeResourceId={storeActiveTabId}
           chatArtifactKeys={chatArtifactKeys}
-          updatedTabKeys={updatedTabKeys}
           onSelectResource={handleSelectTab}
           onAddResource={openResourceTab}
           onRemoveResource={handleCloseTab}

From 3f214c910d4c6fe7705c15efbf9af88e25754473 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 08:32:39 -0500
Subject: [PATCH 19/34] fix(chrome): pin the toggle+chat-switcher cluster so it
 never shifts between bars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The pair rendered as loose children of each bar, inheriting whichever gap that
bar used (gap-1 in the chat title bar, gap-1.5 in the tab strip, gap-2 in the
resource header) — so the switcher drifted a couple of pixels when the chat
pane closed or across pages. It now lives in its own gap-1 cluster everywhere,
keeping the toggle at 7px and the switcher at 41px in every state.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/resource-header/resource-header.tsx       | 9 ++++++---
 apps/sim/app/workspace/[workspaceId]/home/home.tsx       | 9 +++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 6a90e5ebd90..aefb316e606 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -116,9 +116,12 @@ export const ResourceHeader = memo(function ResourceHeader({
     >
       {/* Chrome controls live outside the overflow-hidden breadcrumb group so
           the toggle's 9px pull-out (7px edge inset, matching the chat title
-          bar) isn't clipped. */}
-      <SidebarToggle className='-ml-[9px]' />
-      <ChatSwitcher iconOnly />
+          bar) isn't clipped. The gap-1 cluster matches the chat title bar's
+          toggle+switcher rhythm so the pair never shifts between pages. */}
+      <div className='flex flex-shrink-0 items-center gap-1'>
+        <SidebarToggle className='-ml-[9px]' />
+        <ChatSwitcher iconOnly />
+      </div>
       <div className='flex min-w-0 flex-1 items-center justify-between gap-3'>
         <div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>
           {hasBreadcrumbs ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index f9ebeaab296..d8de9b37b7f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -541,12 +541,13 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
           genericResourceData={genericResourceData ?? undefined}
           tabsLeading={
             isChatCollapsed ? (
-              <>
-                {/* With the chat pane hidden, the tabs bar doubles as the title
-                    bar: sidebar toggle + compact chat switcher, no second row. */}
+              /* With the chat pane hidden, the tabs bar doubles as the title
+                 bar. The gap-1 cluster mirrors the chat title bar exactly so
+                 the toggle and switcher never shift when the pane closes. */
+              <div className='flex flex-shrink-0 items-center gap-1'>
                 <SidebarToggle className='-ml-[9px]' />
                 <ChatSwitcher chatId={activeChatId} onSelectChat={reopenChatPane} />
-              </>
+              </div>
             ) : undefined
           }
           className={cn(

From ba98a76cdc98697dab898a9d263567fea989c126 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 08:40:31 -0500
Subject: [PATCH 20/34] =?UTF-8?q?fix(resource-tabs):=20activate=20tabs=20i?=
 =?UTF-8?q?n=20place=20=E2=80=94=20selection=20never=20repositions=20the?=
 =?UTF-8?q?=20strip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drops the spotlight-first layout (clicking a tab yanked it to the left edge).
Tabs now render in strip order with the active one highlighted where it sits.
The width fit runs over the ordered list; if the active tab lands beyond the
fit (e.g. picked from the +N dropdown), it surfaces at the end of the visible
row with its width reserved, since it has no inline position to keep.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-tabs/resource-tabs.tsx           | 169 ++++++++----------
 1 file changed, 72 insertions(+), 97 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 9b4e5bd01ab..caa92ac9f4f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -149,6 +149,7 @@ function useResourceNameLookup(workspaceId: string): Map<string, string> {
 interface ResourceTabItemProps {
   resource: MothershipResource
   idx: number
+  isActive: boolean
   isHovered: boolean
   isDragging: boolean
   isSelected: boolean
@@ -165,14 +166,14 @@ interface ResourceTabItemProps {
 }
 
 /**
- * An inactive tab at its natural width — labels never truncate (beyond the
+ * A tab at its natural width — labels never truncate (beyond the
  * pathological-name ceiling); tabs that don't fit whole collapse into the +N
- * dropdown instead. The active resource never renders here — it gets the
- * spotlight title chip.
+ * dropdown instead. The active tab is highlighted in place, never moved.
  */
 const ResourceTabItem = memo(function ResourceTabItem({
   resource,
   idx,
+  isActive,
   isHovered,
   isDragging,
   isSelected,
@@ -211,9 +212,9 @@ const ResourceTabItem = memo(function ResourceTabItem({
         onMouseEnter={() => setHoveredTabId(resource.id)}
         onMouseLeave={() => setHoveredTabId(null)}
         className={cn(
-          chipVariants({ variant: 'ghost', flush: true }),
+          chipVariants({ variant: 'ghost', active: isActive, flush: true }),
           'relative max-w-[240px] shrink-0 pr-[20px] text-[var(--text-body)]',
-          isSelected && 'bg-[var(--surface-active)]',
+          isSelected && !isActive && 'bg-[var(--surface-active)]',
           isDragging && 'opacity-30'
         )}
       >
@@ -310,62 +311,75 @@ export function ResourceTabs({
     anchorIdRef.current = null
   }
 
-  // Spotlight layout: the active resource renders as the title chip; the rest
-  // compress inline as long as they genuinely fit, with only the true
-  // remainder collapsing into the +N chip.
+  // Tabs render in strip order and the active one is highlighted in place —
+  // selecting never repositions a visible tab. Only a tab surfacing from the
+  // +N dropdown joins the row (at the end), since it has no inline position.
   const activeResource = useMemo(
     () => resources.find((r) => r.id === activeId) ?? resources[0] ?? null,
     [resources, activeId]
   )
-  const inactiveTabs = useMemo(
-    () => resources.filter((r) => r !== activeResource),
-    [resources, activeResource]
-  )
 
-  // Width-aware capacity: measure the strip and the (name-dependent) title
-  // chip, then fit whole tab slots into what's left. The inline tab renders
-  // don't affect either measured node, so there's no layout feedback loop.
-  const activeChipRef = useRef<HTMLButtonElement>(null)
+  // Width-aware capacity: a hidden measuring row holds every tab at natural
+  // width; whole tabs are fitted in order. The inline renders don't affect the
+  // measured nodes, so there's no layout feedback loop.
   const measureRef = useRef<HTMLDivElement>(null)
   // Permissive until the first trustworthy measurement: all tabs inline (the
   // panel's overflow-hidden clips any excess during the expand animation).
-  const [inlineCapacity, setInlineCapacity] = useState(Number.MAX_SAFE_INTEGER)
-  const inactiveCount = inactiveTabs.length
+  const [stripLayout, setStripLayout] = useState({
+    prefix: Number.MAX_SAFE_INTEGER,
+    appendActive: false,
+  })
+  const resourceCount = resources.length
+  const activeIdx = activeResource ? resources.indexOf(activeResource) : -1
   // Names participate in fitting (tabs render at natural width), so capacity
   // must recompute when any label changes — not just when counts do.
-  const namesKey = inactiveTabs
+  const namesKey = resources
     .map((r) => nameLookup.get(`${r.type}:${r.id}`) ?? r.title)
     .join('\u0000')
   useEffect(() => {
     if (!stripNode) return
     const compute = () => {
       // Zero width means the strip isn't laid out yet (panel collapsed or
-      // mid-animation) — keep the previous capacity rather than trusting it.
+      // mid-animation) — keep the previous layout rather than trusting it.
       if (stripNode.clientWidth === 0) return
       const measureNode = measureRef.current
       if (!measureNode) return
-      // Natural (untruncated) width of every inactive tab, from the hidden
-      // measuring row — tabs are never squeezed, they fit whole or overflow.
       const tabWidths = Array.from(measureNode.children).map((child) =>
         Math.min((child as HTMLElement).offsetWidth, TAB_MAX_WIDTH)
       )
-      const activeWidth = activeChipRef.current ? activeChipRef.current.offsetWidth + STRIP_GAP : 0
       const addWidth = chatId ? ADD_BUTTON_WIDTH + STRIP_GAP : 0
-      const available = stripNode.clientWidth - activeWidth - addWidth
+      const available = stripNode.clientWidth - addWidth
+      const apply = (next: { prefix: number; appendActive: boolean }) =>
+        setStripLayout((prev) =>
+          prev.prefix === next.prefix && prev.appendActive === next.appendActive ? prev : next
+        )
       const totalAll = tabWidths.reduce((sum, w) => sum + w + STRIP_GAP, 0)
       if (totalAll <= available + STRIP_GAP) {
-        setInlineCapacity(inactiveCount)
+        apply({ prefix: resourceCount, appendActive: false })
         return
       }
-      const availableWithChip = available - (OVERFLOW_CHIP_WIDTH + STRIP_GAP)
-      let used = 0
-      let fit = 0
-      for (const width of tabWidths) {
-        if (used + width > availableWithChip) break
-        used += width + STRIP_GAP
-        fit += 1
+      const fitPrefix = (budget: number) => {
+        let used = 0
+        let fit = 0
+        for (const width of tabWidths) {
+          if (used + width > budget) break
+          used += width + STRIP_GAP
+          fit += 1
+        }
+        return fit
+      }
+      const budget = available - (OVERFLOW_CHIP_WIDTH + STRIP_GAP)
+      const prefix = fitPrefix(budget)
+      // The active tab must stay visible: when it lands beyond the fit, append
+      // it after the prefix, reserving its width.
+      if (activeIdx >= prefix && activeIdx >= 0) {
+        apply({
+          prefix: fitPrefix(budget - (tabWidths[activeIdx] + STRIP_GAP)),
+          appendActive: true,
+        })
+        return
       }
-      setInlineCapacity(fit)
+      apply({ prefix, appendActive: false })
     }
     compute()
     // The strip resizes with every panel/sidebar/window change, so observing
@@ -373,16 +387,19 @@ export function ResourceTabs({
     // first paint after the expand animation.
     const observer = new ResizeObserver(compute)
     observer.observe(stripNode)
-    if (activeChipRef.current) observer.observe(activeChipRef.current)
     window.addEventListener('resize', compute)
     return () => {
       observer.disconnect()
       window.removeEventListener('resize', compute)
     }
-  }, [stripNode, inactiveCount, chatId, activeResource, namesKey])
+  }, [stripNode, resourceCount, chatId, activeIdx, namesKey])
 
-  const inlineTabs = inactiveTabs.slice(0, inlineCapacity)
-  const overflowTabs = inactiveTabs.slice(inlineCapacity)
+  const prefixTabs = resources.slice(0, Math.min(stripLayout.prefix, resources.length))
+  const inlineTabs =
+    stripLayout.appendActive && activeResource && !prefixTabs.includes(activeResource)
+      ? [...prefixTabs, activeResource]
+      : prefixTabs
+  const overflowTabs = resources.filter((r) => !inlineTabs.includes(r))
 
   const resolveName = useCallback(
     (resource: MothershipResource) =>
@@ -435,18 +452,18 @@ export function ResourceTabs({
 
   const handleTabClick = useCallback(
     (e: React.MouseEvent, idx: number) => {
-      const resource = inactiveTabs[idx]
+      const resource = inlineTabs[idx]
       if (!resource) return
 
-      // Shift+click: contiguous range from anchor (within the inactive strip)
+      // Shift+click: contiguous range from anchor (within the visible strip)
       if (e.shiftKey) {
         const anchorId = anchorIdRef.current
-        const anchorIdx = anchorId ? inactiveTabs.findIndex((r) => r.id === anchorId) : -1
+        const anchorIdx = anchorId ? inlineTabs.findIndex((r) => r.id === anchorId) : -1
         if (anchorIdx !== -1) {
           const start = Math.min(anchorIdx, idx)
           const end = Math.max(anchorIdx, idx)
           const next = new Set<string>()
-          for (let i = start; i <= end; i++) next.add(inactiveTabs[i].id)
+          for (let i = start; i <= end; i++) next.add(inlineTabs[i].id)
           setSelectedIds(next)
           onSelect(resource.id)
           return
@@ -462,7 +479,7 @@ export function ResourceTabs({
           setSelectedIds(next)
           if (activeId === resource.id) {
             const fallback =
-              findNearestId(inactiveTabs, idx, next) ?? findNearestId(inactiveTabs, idx, null)
+              findNearestId(inlineTabs, idx, next) ?? findNearestId(inlineTabs, idx, null)
             if (fallback) onSelect(fallback)
           }
         } else {
@@ -478,7 +495,7 @@ export function ResourceTabs({
       setSelectedIds(new Set([resource.id]))
       onSelect(resource.id)
     },
-    [inactiveTabs, onSelect, selectedIds, activeId]
+    [inlineTabs, onSelect, selectedIds, activeId]
   )
 
   const handleRemove = useCallback(
@@ -505,27 +522,11 @@ export function ResourceTabs({
     [onRemoveResource, resources, selectedIds]
   )
 
-  const handleActiveDragStart = useCallback(
-    (e: React.DragEvent) => {
-      if (!activeResource) return
-      e.dataTransfer.effectAllowed = 'copy'
-      e.dataTransfer.setData(
-        SIM_RESOURCE_DRAG_TYPE,
-        JSON.stringify({
-          type: activeResource.type,
-          id: activeResource.id,
-          title: activeResource.title,
-        })
-      )
-    },
-    [activeResource]
-  )
-
   const handleDragStart = useCallback(
     (e: React.DragEvent, idx: number) => {
-      const resource = inactiveTabs[idx]
+      const resource = inlineTabs[idx]
       if (!resource) return
-      const selected = inactiveTabs.filter((r) => selectedIds.has(r.id))
+      const selected = inlineTabs.filter((r) => selectedIds.has(r.id))
       const isMultiDrag = selected.length > 1 && selectedIds.has(resource.id)
       if (isMultiDrag) {
         e.dataTransfer.effectAllowed = 'copy'
@@ -549,7 +550,7 @@ export function ResourceTabs({
         JSON.stringify({ type: resource.type, id: resource.id, title: resource.title })
       )
     },
-    [inactiveTabs, selectedIds]
+    [inlineTabs, selectedIds]
   )
 
   const handleDragOver = useCallback((e: React.DragEvent, idx: number) => {
@@ -579,15 +580,11 @@ export function ResourceTabs({
       const reorderedInline = [...inlineTabs]
       const [moved] = reorderedInline.splice(fromIdx, 1)
       reorderedInline.splice(insertAt, 0, moved)
-      // The strip's visual order is [active, inline..., overflow...] — persist
-      // exactly that so the view and store never disagree.
-      onReorderResources([
-        ...(activeResource ? [activeResource] : []),
-        ...reorderedInline,
-        ...overflowTabs,
-      ])
+      // The strip's visual order is [inline..., overflow...] — persist exactly
+      // that so the view and store never disagree.
+      onReorderResources([...reorderedInline, ...overflowTabs])
     },
-    [inlineTabs, overflowTabs, activeResource, onReorderResources, dropGapIdx]
+    [inlineTabs, overflowTabs, onReorderResources, dropGapIdx]
   )
 
   const handleDragEnd = useCallback(() => {
@@ -605,7 +602,7 @@ export function ResourceTabs({
     >
       {leading}
       {/* Without leading controls, the strip starts at the bar's left edge —
-          pull it out 9px so the title chip sits 7px from the edge, matching
+          pull it out 9px so the first tab sits 7px from the edge, matching
           the edge icon buttons' equal-distance rhythm. */}
       <div
         ref={attachStrip}
@@ -617,8 +614,8 @@ export function ResourceTabs({
         onDragOver={(e) => e.preventDefault()}
         onDrop={handleDrop}
       >
-        {/* Hidden measuring row: every inactive tab at natural width, so the
-            capacity pass fits whole tabs instead of guessing slot sizes. */}
+        {/* Hidden measuring row: every tab at natural width, so the capacity
+            pass fits whole tabs instead of guessing slot sizes. */}
         <div
           ref={measureRef}
           aria-hidden='true'
@@ -627,7 +624,7 @@ export function ResourceTabs({
             RESOURCE_TAB_GAP_CLASS
           )}
         >
-          {inactiveTabs.map((resource) => (
+          {resources.map((resource) => (
             <span
               key={resource.id}
               className={cn(
@@ -640,34 +637,12 @@ export function ResourceTabs({
             </span>
           ))}
         </div>
-        {activeResource && (
-          /* The title chip is just the active tab — the inline tabs are the
-             switcher, so it carries no dropdown of its own. */
-          <button
-            ref={activeChipRef}
-            type='button'
-            draggable
-            data-resource-tab-id={activeResource.id}
-            onDragStart={handleActiveDragStart}
-            className={cn(
-              chipVariants({ variant: 'ghost', active: true, flush: true }),
-              'min-w-0 shrink-0 cursor-default text-[var(--text-body)]'
-            )}
-          >
-            {getResourceConfig(activeResource.type).renderTabIcon(
-              activeResource,
-              'size-[16px] shrink-0'
-            )}
-            <span className='max-w-[220px] truncate font-medium text-[var(--text-primary)]'>
-              {resolveName(activeResource)}
-            </span>
-          </button>
-        )}
         {inlineTabs.map((resource, idx) => (
           <ResourceTabItem
             key={resource.id}
             resource={resource}
             idx={idx}
+            isActive={resource === activeResource}
             isHovered={hoveredTabId === resource.id}
             isDragging={draggedIdx === idx}
             isSelected={selectedIds.has(resource.id) && selectedIds.size > 1}

From d853d955737beb87f9e1c17cb46020631c018bb6 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 08:55:20 -0500
Subject: [PATCH 21/34] style(resource-tabs): align the +N dropdown to the
 workspace dropdown's chrome

Container now keeps the popover's canonical 6px inset and rounded-xl instead
of a p-0 override with its own 8px padding; rows drop to the canonical 13px
text with the 2px row gap; the forced 240px min-width goes down to 180 so the
dropdown hugs its content.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-tabs/resource-switcher-list.tsx       | 14 ++++++++------
 .../components/resource-tabs/resource-tabs.tsx     |  8 +++++---
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx
index c23ccfced20..1ce8d4c89f3 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-switcher-list.tsx
@@ -42,7 +42,9 @@ function SwitcherRow({
         className='flex h-full min-w-0 flex-1 items-center gap-2 px-2 pr-[26px] text-left'
       >
         {config.renderTabIcon(item.resource, 'size-[14px] shrink-0')}
-        <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-sm'>{item.name}</span>
+        <span className='min-w-0 flex-1 truncate text-[var(--text-body)] text-small'>
+          {item.name}
+        </span>
       </button>
       <button
         type='button'
@@ -60,6 +62,8 @@ function SwitcherRow({
  * The resource switcher dropdown's contents: every open tab, grouped by
  * provenance ("From this chat" vs the rest) when the active chat has surfaced
  * any of them. Rows select on click and expose a hover close control.
+ * Spacing mirrors the workspace dropdown: rows 30px/rounded-lg/13px with a
+ * 2px gap, inside the popover's canonical 6px inset.
  */
 export function ResourceSwitcherList({ items, onSelect, onClose }: ResourceSwitcherListProps) {
   const chatItems = items.filter((item) => item.isChatArtifact)
@@ -67,18 +71,16 @@ export function ResourceSwitcherList({ items, onSelect, onClose }: ResourceSwitc
   const showSections = chatItems.length > 0 && otherItems.length > 0
 
   return (
-    <div className='flex flex-col px-2 py-2'>
+    <div className='flex flex-col gap-0.5'>
       {showSections && (
-        <p className='px-2 py-1 font-medium text-[var(--text-muted)] text-caption'>
-          From this chat
-        </p>
+        <p className='px-2 py-1 font-medium text-[var(--text-muted)] text-xs'>From this chat</p>
       )}
       {(showSections ? chatItems : items).map((item) => (
         <SwitcherRow key={item.resource.id} item={item} onSelect={onSelect} onClose={onClose} />
       ))}
       {showSections && (
         <>
-          <p className='mt-1.5 px-2 py-1 font-medium text-[var(--text-muted)] text-caption'>
+          <p className='mt-1 px-2 py-1 font-medium text-[var(--text-muted)] text-xs'>
             Other open tabs
           </p>
           {otherItems.map((item) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index caa92ac9f4f..c23cae724b6 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -685,15 +685,17 @@ export function ResourceTabs({
                 <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
               </button>
             </PopoverAnchor>
-            {/* Anchored 6px below the 44px bar, matching the chat switcher. */}
+            {/* Anchored 6px below the 44px bar, matching the chat switcher.
+                Keeps the popover's canonical 6px inset and rounded-xl so the
+                chrome matches the workspace dropdown. */}
             <PopoverContent
               side='bottom'
               align='start'
               sideOffset={13}
-              minWidth={240}
+              minWidth={180}
               maxWidth={320}
               border
-              className={cn(POPOVER_ANIMATION_CLASSES, 'bg-[var(--bg)] p-0 dark:bg-[var(--bg)]')}
+              className={cn(POPOVER_ANIMATION_CLASSES, 'bg-[var(--bg)] dark:bg-[var(--bg)]')}
             >
               <ResourceSwitcherList
                 items={overflowItems}

From ff51b016a939240e5cd68c46299726378dc4fe93 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 09:13:48 -0500
Subject: [PATCH 22/34] feat(chat-switcher): opening a chat keeps the current
 page as the focused panel tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Selecting a chat from a resource page used to teleport to the chat view with
whatever the strip last held — the one thing missing was the page you were on.
The switcher now derives the page's resource from the pathname (page tabs for
tables/knowledge/logs/scheduled-tasks, item tabs for table/KB/workflow detail
routes), opens it focused in the workspace strip, and navigates with
?resource= pinned. The chat-entry merge respects that pin: a URL-pinned
resource that isn't one of the chat's artifacts keeps focus instead of being
displaced by the chat's most recent artifact.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../chat-switcher/chat-switcher.tsx           | 38 ++++++++++++++++++-
 .../app/workspace/[workspaceId]/home/home.tsx | 12 ++++--
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
index e1369630f7b..14075481550 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { useParams, useRouter } from 'next/navigation'
+import { useParams, usePathname, useRouter } from 'next/navigation'
 import {
   POPOVER_ANIMATION_CLASSES,
   Popover,
@@ -10,13 +10,39 @@ import {
   Tooltip,
 } from '@/components/emcn'
 import { ChevronDown, MessageCircle } from '@/components/emcn/icons'
+import {
+  isMothershipPageId,
+  MOTHERSHIP_PAGES,
+  type MothershipResource,
+} from '@/lib/copilot/resources/types'
 import { cn } from '@/lib/core/utils/cn'
 import { useSidebarToggleHidden } from '@/app/workspace/[workspaceId]/components/sidebar-toggle'
 import { ChatHistoryList } from '@/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list'
 import { useMothershipChats } from '@/hooks/queries/mothership-chats'
+import { useMothershipTabsStore } from '@/stores/mothership-tabs/store'
 
 const FALLBACK_TITLE = 'New chat'
 
+/**
+ * Resolves the resource the current page represents, so opening a chat keeps
+ * that page on screen as the focused panel tab instead of teleporting away.
+ * Titles are placeholders — the tab strip resolves live names from queries.
+ */
+function derivePageResource(pathname: string, workspaceId: string): MothershipResource | null {
+  const prefix = `/workspace/${workspaceId}/`
+  if (!pathname.startsWith(prefix)) return null
+  const [segment, detail] = pathname.slice(prefix.length).split('/')
+  if (segment === 'w' && detail) return { type: 'workflow', id: detail, title: 'Workflow' }
+  if (segment === 'tables' && detail) return { type: 'table', id: detail, title: 'Table' }
+  if (segment === 'knowledge' && detail) {
+    return { type: 'knowledgebase', id: detail, title: 'Knowledge Base' }
+  }
+  if (isMothershipPageId(segment)) {
+    return { type: 'page', id: segment, title: MOTHERSHIP_PAGES[segment] }
+  }
+  return null
+}
+
 interface ChatSwitcherProps {
   /**
    * The chat shown in the breadcrumb and highlighted in the list. Omitted on
@@ -54,6 +80,8 @@ export function ChatSwitcher({
   const isHidden = useSidebarToggleHidden()
   const { workspaceId } = useParams<{ workspaceId?: string }>()
   const router = useRouter()
+  const pathname = usePathname()
+  const openTabs = useMothershipTabsStore((state) => state.openTabs)
   const { data: tasks = [] } = useMothershipChats(workspaceId)
   const [open, setOpen] = useState(false)
 
@@ -78,6 +106,14 @@ export function ChatSwitcher({
     setOpen(false)
     onSelectChat?.(selectedChatId)
     if (selectedChatId === chatId) return
+    // Opening a chat never takes away what you're looking at: the current
+    // page becomes the focused panel tab, and the chat slides in beside it.
+    const pageResource = derivePageResource(pathname, workspaceId)
+    if (pageResource) {
+      openTabs(workspaceId, [pageResource], { focusId: pageResource.id })
+      router.push(`/workspace/${workspaceId}/chat/${selectedChatId}?resource=${pageResource.id}`)
+      return
+    }
     router.push(`/workspace/${workspaceId}/chat/${selectedChatId}`)
   }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index d8de9b37b7f..ad73b550f8a 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -233,9 +233,15 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     for (const r of fresh) mergedKeysRef.current.add(`${r.type}:${r.id}`)
     const urlFocus = initialResourceIdRef.current
     initialResourceIdRef.current = null
-    const focusId =
-      urlFocus && fresh.some((r) => r.id === urlFocus) ? urlFocus : fresh[fresh.length - 1].id
-    openTabs(workspaceId, fresh, { focusId })
+    // A URL-pinned resource wins outright: if it's one of this chat's fresh
+    // artifacts, focus it; otherwise it's already focused in the strip (the
+    // page the user opened the chat from), so the merge must not steal focus.
+    const focusId = urlFocus
+      ? fresh.some((r) => r.id === urlFocus)
+        ? urlFocus
+        : undefined
+      : fresh[fresh.length - 1].id
+    openTabs(workspaceId, fresh, focusId ? { focusId } : undefined)
   }, [resources, resolvedChatId, chatId, workspaceId, openTabs])
 
   const handleSelectTab = useCallback(

From 09a4066be9738d26e32b1c10d40d354042178b02 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 09:33:28 -0500
Subject: [PATCH 23/34] =?UTF-8?q?style(resource-tabs):=20overlay=20the=20c?=
 =?UTF-8?q?lose=20control=20on=20a=20gradient=20fade=20=E2=80=94=20no=20re?=
 =?UTF-8?q?served=20tab=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tabs carried a permanent 20px right padding for the hover ×, leaving dead
space on idle tabs. The × now overlays the label's tail on hover, sitting on
a gradient fade of the hover fill so it stays readable; idle tabs keep the
chip's symmetric padding and their width never changes on hover. The hidden
measuring row drops the same padding so fitting stays in sync.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-tabs/resource-tabs.tsx           | 30 +++++++++++--------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index c23cae724b6..4688d7c0290 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -213,25 +213,29 @@ const ResourceTabItem = memo(function ResourceTabItem({
         onMouseLeave={() => setHoveredTabId(null)}
         className={cn(
           chipVariants({ variant: 'ghost', active: isActive, flush: true }),
-          'relative max-w-[240px] shrink-0 pr-[20px] text-[var(--text-body)]',
+          'relative max-w-[240px] shrink-0 text-[var(--text-body)]',
           isSelected && !isActive && 'bg-[var(--surface-active)]',
           isDragging && 'opacity-30'
         )}
       >
         {config.renderTabIcon(resource, 'size-[16px] shrink-0')}
         <span className='min-w-0 truncate'>{displayName}</span>
+        {/* The close control overlays the label's tail on a gradient fade of
+            the hover fill, so tabs reserve no width for it when idle. */}
         {isHovered && (
-          <span
-            role='button'
-            tabIndex={-1}
-            onClick={(e) => onRemove(e, resource)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') onRemove(e, resource)
-            }}
-            className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center justify-center rounded-sm p-[2px] hover-hover:bg-[var(--surface-6)]'
-            aria-label={`Close ${displayName}`}
-          >
-            <X strokeWidth={2.5} className='size-[10px] text-[var(--text-icon)]' />
+          <span className='absolute inset-y-0 right-0 flex items-center rounded-r-lg bg-gradient-to-l from-65% from-[var(--surface-active)] to-transparent pr-[5px] pl-[16px]'>
+            <span
+              role='button'
+              tabIndex={-1}
+              onClick={(e) => onRemove(e, resource)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') onRemove(e, resource)
+              }}
+              className='flex items-center justify-center rounded-sm p-[2px] hover-hover:bg-[var(--surface-6)]'
+              aria-label={`Close ${displayName}`}
+            >
+              <X strokeWidth={2.5} className='size-[10px] text-[var(--text-icon)]' />
+            </span>
           </span>
         )}
       </button>
@@ -629,7 +633,7 @@ export function ResourceTabs({
               key={resource.id}
               className={cn(
                 chipVariants({ variant: 'ghost', flush: true }),
-                'whitespace-nowrap pr-[20px] text-[var(--text-body)]'
+                'whitespace-nowrap text-[var(--text-body)]'
               )}
             >
               {getResourceConfig(resource.type).renderTabIcon(resource, 'size-[16px] shrink-0')}

From 75760def7b06a878746801b154a30c1e592424e9 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 10:05:09 -0500
Subject: [PATCH 24/34] =?UTF-8?q?fix(mothership):=20agent-touched=20resour?=
 =?UTF-8?q?ces=20focus=20their=20tab=20=E2=80=94=20chat=20can=20drive=20th?=
 =?UTF-8?q?e=20panel=20again?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Asking the agent to "switch to Telecom_Leads_CRM" answered in prose but never
moved the panel. use-chat still carried the old focus-on-touch logic via its
internal setActiveResourceId, but the workspace tab-store migration orphaned
that state — nothing rendered it. Adds an onResourceTouched(resource) callback
fired at the three touch sites (stream resource ops, successful Read tool
calls, workflow activation), regardless of whether the resource was already an
artifact; home bridges it to the tab store with openTabs + focus, so the panel
follows the conversation. File-streaming suppression is respected.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../app/workspace/[workspaceId]/home/home.tsx |  6 ++++
 .../[workspaceId]/home/hooks/use-chat.ts      | 31 ++++++++++++++++---
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index ad73b550f8a..eb4cffb33c9 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -188,6 +188,12 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
     chatId,
     getMothershipUseChatOptions({
       onResourceEvent: handleResourceEvent,
+      // The panel follows the conversation: any resource the agent touches —
+      // even one that's already an open tab — surfaces and takes focus, so
+      // "switch to X" in chat actually switches the strip.
+      onResourceTouched: (resource) => {
+        openTabs(workspaceId, [resource], { focusId: resource.id })
+      },
       initialActiveResourceId: initialResourceId,
       onRequestStarted: ({ requestId, userMessageId }) => {
         captureEvent(posthogRef.current, 'task_request_started', {
diff --git a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
index 1ac75c76442..bd0dd8de693 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
@@ -1443,6 +1443,13 @@ function resolveLeafWorkflowPathSegment(segments: string[]): string | undefined
 
 export interface UseChatOptions {
   onResourceEvent?: () => void
+  /**
+   * Fired when the agent touches a resource — created, updated, or read —
+   * whether or not it was already an artifact. Lets the host surface and
+   * focus the resource's tab so the panel follows the conversation
+   * ("switch to Telecom_Leads_CRM" actually switches).
+   */
+  onResourceTouched?: (resource: MothershipResource) => void
   apiPath?: string
   stopPath?: string
   workflowId?: string
@@ -1469,7 +1476,11 @@ interface StopGenerationOptions {
 export function getMothershipUseChatOptions(
   options: Pick<
     UseChatOptions,
-    'onResourceEvent' | 'onStreamEnd' | 'initialActiveResourceId' | 'onRequestStarted'
+    | 'onResourceEvent'
+    | 'onResourceTouched'
+    | 'onStreamEnd'
+    | 'initialActiveResourceId'
+    | 'onRequestStarted'
   > = {}
 ): UseChatOptions {
   return {
@@ -1514,6 +1525,8 @@ export function useChat(
   const onResourceEventRef = useRef(options?.onResourceEvent)
   const revealedSimKeysRef = useRef<RevealedSimKeysByMessage>(new Map())
   onResourceEventRef.current = options?.onResourceEvent
+  const onResourceTouchedRef = useRef(options?.onResourceTouched)
+  onResourceTouchedRef.current = options?.onResourceTouched
   const apiPathRef = useRef(options?.apiPath ?? MOTHERSHIP_CHAT_API_PATH)
   apiPathRef.current = options?.apiPath ?? MOTHERSHIP_CHAT_API_PATH
   const stopPathRef = useRef(options?.stopPath ?? '/api/mothership/chat/stop')
@@ -2204,15 +2217,17 @@ export function useChat(
       }
 
       const meta = getWorkflowById(workspaceId, targetWorkflowId)
-      const wasAdded = addResource({
+      const workflowResource: MothershipResource = {
         type: 'workflow',
         id: targetWorkflowId,
         title: meta?.name ?? 'Workflow',
-      })
+      }
+      const wasAdded = addResource(workflowResource)
       if (!wasAdded && activeResourceIdRef.current !== targetWorkflowId) {
         setActiveResourceId(targetWorkflowId)
       }
       onResourceEventRef.current?.()
+      onResourceTouchedRef.current?.(workflowResource)
 
       return targetWorkflowId
     },
@@ -3199,8 +3214,11 @@ export function useChat(
                     typeof readArgs?.path === 'string' ? readArgs.path : undefined,
                     tc.result.output
                   )
-                  if (resource && addResource(resource)) {
-                    onResourceEventRef.current?.()
+                  if (resource) {
+                    if (addResource(resource)) {
+                      onResourceEventRef.current?.()
+                    }
+                    onResourceTouchedRef.current?.(resource)
                   }
                 }
 
@@ -3453,6 +3471,9 @@ export function useChat(
                 setActiveResourceId(nextResource.id)
               }
               onResourceEventRef.current?.()
+              if (!shouldSuppressFileResourceActivation) {
+                onResourceTouchedRef.current?.(nextResource)
+              }
 
               if (nextResource.type === 'workflow') {
                 const wasRegistered = ensureWorkflowInRegistry(

From 5c42aa85e77d0fde11f36f61ec1e9bc8eed8ede9 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 10:35:24 -0500
Subject: [PATCH 25/34] style(mothership-chat): messages fade into the input
 instead of hard-clipping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wraps the message scroller in a relative container and overlays a 40px
bottom strip — a bg gradient plus the faintest backdrop blur, both masked to
ramp in toward the edge — so scrolled content dissolves above the input
rather than cutting off at the scroller boundary. Applies to both chat
layouts; pointer-events pass through.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../mothership-chat/mothership-chat.tsx       | 75 +++++++++++--------
 1 file changed, 42 insertions(+), 33 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
index ce9d345804e..4599631a6e4 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
@@ -298,43 +298,52 @@ export function MothershipChat({
   return (
     <div className={cn('flex h-full min-h-0 flex-col', className)}>
       {layout === 'mothership-view' && <ChatTitleBar chatId={chatId} onClose={onCloseChat} />}
-      <div ref={setScrollContainer} className={cn(styles.scrollContainer, SCROLLBAR_AUTOHIDE)}>
-        {isLoading && !hasMessages ? (
-          <MothershipChatSkeleton layout={layout} />
-        ) : (
-          <div className={styles.content}>
-            {stagedMessages.map((msg, localIndex) => {
-              const index = stagedOffset + localIndex
-              if (msg.role === 'user') {
+      <div className='relative flex min-h-0 flex-1 flex-col'>
+        <div ref={setScrollContainer} className={cn(styles.scrollContainer, SCROLLBAR_AUTOHIDE)}>
+          {isLoading && !hasMessages ? (
+            <MothershipChatSkeleton layout={layout} />
+          ) : (
+            <div className={styles.content}>
+              {stagedMessages.map((msg, localIndex) => {
+                const index = stagedOffset + localIndex
+                if (msg.role === 'user') {
+                  return (
+                    <UserMessageRow
+                      key={msg.id}
+                      content={msg.content}
+                      contexts={msg.contexts}
+                      attachments={msg.attachments}
+                      rowClassName={styles.userRow}
+                      bubbleClassName={styles.userBubble}
+                      attachmentWidthClassName={styles.attachmentWidth}
+                    />
+                  )
+                }
+
+                const isLast = index === messages.length - 1
                 return (
-                  <UserMessageRow
+                  <AssistantMessageRow
                     key={msg.id}
-                    content={msg.content}
-                    contexts={msg.contexts}
-                    attachments={msg.attachments}
-                    rowClassName={styles.userRow}
-                    bubbleClassName={styles.userBubble}
-                    attachmentWidthClassName={styles.attachmentWidth}
+                    message={msg}
+                    isStreaming={isStreamActive && isLast}
+                    precedingUserContent={precedingUserContentByIndex[index]}
+                    chatId={chatId}
+                    rowClassName={styles.assistantRow}
+                    onOptionSelect={isLast ? stableOnOptionSelect : undefined}
+                    onWorkspaceResourceSelect={stableOnWorkspaceResourceSelect}
                   />
                 )
-              }
-
-              const isLast = index === messages.length - 1
-              return (
-                <AssistantMessageRow
-                  key={msg.id}
-                  message={msg}
-                  isStreaming={isStreamActive && isLast}
-                  precedingUserContent={precedingUserContentByIndex[index]}
-                  chatId={chatId}
-                  rowClassName={styles.assistantRow}
-                  onOptionSelect={isLast ? stableOnOptionSelect : undefined}
-                  onWorkspaceResourceSelect={stableOnWorkspaceResourceSelect}
-                />
-              )
-            })}
-          </div>
-        )}
+              })}
+            </div>
+          )}
+        </div>
+        {/* Messages dissolve into the input instead of hard-clipping: a bg
+            fade plus the faintest backdrop blur, both masked so they ramp in
+            toward the bottom edge. */}
+        <div
+          aria-hidden='true'
+          className='pointer-events-none absolute inset-x-0 bottom-0 h-[40px] bg-gradient-to-t from-[var(--bg)] to-transparent backdrop-blur-[1.5px] [mask-image:linear-gradient(to_top,black_20%,transparent)]'
+        />
       </div>
 
       <div

From d3b291b44592ecb697f3c6e348d773351d401dd3 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 10:48:37 -0500
Subject: [PATCH 26/34] feat(icons): vendor Hugeicons stroke-rounded set,
 remove lucide-react
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the icon system with self-hosted Hugeicons (free, stroke-rounded)
vendored into @/components/emcn/icons — zero runtime icon deps.

- Vendor 150+ icons from @hugeicons/core-free-icons into the emcn barrel via
  scripts/hugeicons-map.ts + scripts/hugeicons-generate.ts (dev-only source).
  Icons gain a `size` prop; 4 bespoke animated icons (Loader, RefreshCw,
  Download, Layout) kept custom.
- Migrate ~172 consumers off lucide-react to the emcn barrel; remove
  lucide-react dependency entirely (Github brand logo -> @/components/icons).
- Fix chevron sizing: replace ~24 non-square classes (h-[6px] w-[10px], tuned
  to the dead 10x6 viewBox) with canonical size-[14px].
- Sidebar/chat icon updates: Table->TableIcon, knowledge base->DatabaseIcon,
  Files nav->File, scheduled tasks->CalendarClock, Logs->ThirdBracketSquare,
  PanelLeft/PanelRight, BubbleChatDelay/Spark for the two chat bubbles.
- Send buttons -> ArrowUp02; integration row arrows -> ArrowRight02.
- Workflow icon -> WorkflowSquare04; Integrations -> Plug02.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 apps/sim/app/(auth)/login/login-form.tsx      |   2 +-
 .../reset-password/reset-password-form.tsx    |   2 +-
 apps/sim/app/(auth)/signup/signup-form.tsx    |   2 +-
 .../(landing)/blog/[slug]/share-button.tsx    |   3 +-
 .../components/auth-modal/auth-modal.tsx      |   2 +-
 .../features/components/features-preview.tsx  |   2 +-
 .../components/footer/footer-cta.tsx          |   2 +-
 .../landing-preview-home.tsx                  |   5 +-
 .../landing-preview-panel.tsx                 |   4 +-
 .../landing-preview-tables.tsx                |   4 +-
 .../preview-block-node.tsx                    |   2 +-
 .../components/course-progress.tsx            |   4 +-
 .../academy/(catalog)/[courseSlug]/page.tsx   |   2 +-
 .../certificate/[certificateNumber]/page.tsx  |   4 +-
 apps/sim/app/academy/(catalog)/page.tsx       |   2 +-
 .../[lessonSlug]/components/exercise-view.tsx |   4 +-
 .../[lessonSlug]/components/lesson-quiz.tsx   |   4 +-
 .../[courseSlug]/[lessonSlug]/page.tsx        |   2 +-
 .../components/validation-checklist.tsx       |   4 +-
 .../components/changelog-content.tsx          |   5 +-
 .../auth/password/password-auth.tsx           |   2 +-
 apps/sim/app/chat/components/input/input.tsx  |   4 +-
 .../app/chat/components/input/voice-input.tsx |   2 +-
 .../message-container/message-container.tsx   |   2 +-
 .../message/components/file-download.tsx      |   2 +-
 .../app/chat/components/message/message.tsx   |   2 +-
 .../voice-interface/voice-interface.tsx       |   2 +-
 .../app/credential-account/[token]/page.tsx   |   2 +-
 apps/sim/app/playground/page.tsx              |   2 +-
 .../[executionId]/resume-page-client.tsx      |   2 +-
 .../chat-switcher/chat-switcher.tsx           |  10 +-
 .../[workspaceId]/components/error/error.tsx  |   2 +-
 .../message-actions/message-actions.tsx       |   2 +-
 .../resource-header/resource-header.tsx       |   4 +-
 .../components/resource/resource.tsx          |   2 +-
 .../file-viewer/editor-context-menu.tsx       |   3 +-
 .../file-viewer/preview-toolbar.tsx           |   2 +-
 .../components/agent-group/agent-group.tsx    |   2 +-
 .../components/special-tags/special-tags.tsx  |   2 +-
 .../thinking-block/thinking-block.tsx         |   2 +-
 .../activity-view/inline-activity.tsx         |   2 +-
 .../resource-tabs/resource-panel-toggle.tsx   |   4 +-
 .../resource-tabs/resource-tabs.tsx           |   2 +-
 .../queued-messages/queued-messages.tsx       |  10 +-
 .../suggested-actions/suggested-actions.tsx   |  14 +-
 .../attached-files-list.tsx                   |   2 +-
 .../components/send-button/send-button.tsx    |   5 +-
 .../[block]/integration-block-detail.tsx      |   2 +-
 .../showcase-with-explore.tsx                 |   2 +-
 .../integrations/integrations.tsx             |   2 +-
 .../knowledge/[id]/[documentId]/document.tsx  |  12 +-
 .../[workspaceId]/knowledge/[id]/base.tsx     |   9 +-
 .../[id]/components/action-bar/action-bar.tsx |   2 +-
 .../add-connector-modal.tsx                   |   2 +-
 .../add-documents-modal.tsx                   |   2 +-
 .../connectors-section/connectors-section.tsx |  32 +-
 .../edit-connector-modal.tsx                  |   2 +-
 .../create-base-modal/create-base-modal.tsx   |   2 +-
 .../knowledge-header/knowledge-header.tsx     |   5 +-
 .../execution-snapshot/execution-snapshot.tsx |   6 +-
 .../components/trace-view/trace-view.tsx      |  20 +-
 .../components/log-details/log-details.tsx    |  12 +-
 .../slack-channel-selector.tsx                |   2 +-
 .../workflow-selector/workflow-selector.tsx   |   2 +-
 .../notifications/notifications.tsx           |   2 +-
 .../logs-toolbar/components/search/search.tsx |   2 +-
 .../components/logs-toolbar/logs-toolbar.tsx  |  10 +-
 .../app/workspace/[workspaceId]/not-found.tsx |   3 +-
 .../settings/components/admin/admin.tsx       |   4 +-
 .../settings/components/api-keys/api-keys.tsx |   2 +-
 .../settings/components/byok/byok.tsx         |   2 +-
 .../settings/components/copilot/copilot.tsx   |   2 +-
 .../credential-sets/credential-sets.tsx       |   3 +-
 .../components/custom-tools/custom-tools.tsx  |   2 +-
 .../settings/components/general/general.tsx   |   2 +-
 .../inbox-settings-tab/inbox-settings-tab.tsx |   2 +-
 .../inbox-task-list/inbox-task-list.tsx       |   2 +-
 .../settings/components/inbox/inbox.tsx       |   2 +-
 .../mcp-server-form-modal.tsx                 |   2 +-
 .../settings/components/mcp/mcp.tsx           |   3 +-
 .../workflow-mcp-servers.tsx                  |   3 +-
 .../workspace/[workspaceId]/skills/skills.tsx |   2 +-
 .../column-config-sidebar.tsx                 |   2 +-
 .../new-column-dropdown.tsx                   |   3 +-
 .../components/table-filter/table-filter.tsx  |   3 +-
 .../components/table-grid/table-find.tsx      |   3 +-
 .../workflow-sidebar/workflow-sidebar.tsx     |   7 +-
 .../components/action-bar/action-bar.tsx      |  10 +-
 .../w/[workflowId]/components/chat/chat.tsx   |  15 +-
 .../output-select/output-select.tsx           |   6 +-
 .../components/command-list/command-list.tsx  |   4 +-
 .../w/[workflowId]/components/error/index.tsx |   2 +-
 .../deploy-modal/components/a2a/a2a.tsx       |   2 +-
 .../deploy-modal/components/api/api.tsx       |   2 +-
 .../deploy-modal/components/chat/chat.tsx     |   4 +-
 .../general/components/versions.tsx           |   2 +-
 .../components/field-item/field-item.tsx      |   2 +-
 .../connection-blocks/connection-blocks.tsx   |   6 +-
 .../checkbox-list/checkbox-list.tsx           |   2 +-
 .../sub-block/components/code/code.tsx        |   2 +-
 .../condition-input/condition-input.tsx       |   2 +-
 .../credential-selector.tsx                   |   2 +-
 .../document-tag-entry/document-tag-entry.tsx |   2 +-
 .../env-var-dropdown/env-var-dropdown.tsx     |   2 +-
 .../components/eval-input/eval-input.tsx      |   2 +-
 .../components/file-upload/file-upload.tsx    |   2 +-
 .../components/filter-rule-row.tsx            |   2 +-
 .../grouped-checkbox-list.tsx                 |   2 +-
 .../knowledge-base-selector.tsx               |   2 +-
 .../knowledge-tag-filters.tsx                 |   2 +-
 .../components/long-input/long-input.tsx      |   2 +-
 .../messages-input/messages-input.tsx         |   2 +-
 .../selector-combobox/selector-combobox.tsx   |   2 +-
 .../components/short-input/short-input.tsx    |   2 +-
 .../components/skill-input/skill-input.tsx    |   4 +-
 .../slack-setup-wizard/slack-setup-wizard.tsx |   2 +-
 .../sort-builder/components/sort-rule-row.tsx |   2 +-
 .../components/starter/input-format.tsx       |   2 +-
 .../components/tag-dropdown/tag-dropdown.tsx  |   6 +-
 .../components/code-editor/code-editor.tsx    |   2 +-
 .../custom-tool-modal/custom-tool-modal.tsx   |   6 +-
 .../components/tools/credential-selector.tsx  |   2 +-
 .../tool-input/components/tools/parameter.tsx |   2 +-
 .../components/tool-input/tool-input.tsx      |  16 +-
 .../variables-input/variables-input.tsx       |   2 +-
 .../editor/components/sub-block/sub-block.tsx |  10 +-
 .../subflow-editor/subflow-editor.tsx         |   2 +-
 .../panel/components/editor/editor.tsx        |  12 +-
 .../panel/components/toolbar/toolbar.tsx      |   2 +-
 .../w/[workflowId]/components/panel/panel.tsx |   3 +-
 .../workflow-search-replace.tsx               |   2 +-
 .../components/subflows/loop/loop-config.ts   |   4 +-
 .../subflows/parallel/parallel-config.ts      |   4 +-
 .../components/subflows/subflow-node.tsx      |   4 +-
 .../filter-popover/filter-popover.tsx         |   2 +-
 .../components/structured-output.tsx          |   3 +-
 .../components/output-panel/output-panel.tsx  |  26 +-
 .../toggle-button/toggle-button.tsx           |   2 +-
 .../components/terminal/terminal.tsx          |  18 +-
 .../[workflowId]/components/terminal/utils.ts |  21 +-
 .../components/variables/variables.tsx        |   2 +-
 .../wand-prompt-bar/wand-prompt-bar.tsx       |   6 +-
 .../workflow-controls/workflow-controls.tsx   |   2 +-
 .../workflow-edge/workflow-edge.tsx           |   2 +-
 .../preview-editor/preview-editor.tsx         |  32 +-
 .../components/subflow/subflow.tsx            |   4 +-
 .../w/components/preview/preview.tsx          |   2 +-
 .../components/file-list/file-list.tsx        |   2 +-
 .../components/help-modal/help-modal.tsx      |   2 +-
 .../components/context-menu/context-menu.tsx  |   3 +-
 .../components/folder-item/folder-item.tsx    |   3 +-
 .../workflow-item/workflow-item.tsx           |   3 +-
 .../workspace-header/workspace-header.tsx     |   7 +-
 .../w/components/sidebar/sidebar.tsx          |  18 +-
 apps/sim/blocks/blocks/chat_trigger.ts        |   2 +-
 apps/sim/blocks/blocks/generic_webhook.ts     |   2 +-
 apps/sim/blocks/blocks/input_trigger.ts       |   2 +-
 apps/sim/blocks/blocks/manual_trigger.ts      |   2 +-
 apps/sim/blocks/blocks/schedule.ts            |   2 +-
 apps/sim/blocks/blocks/wait.ts                |   2 +-
 .../emcn/components/breadcrumb/breadcrumb.tsx |   2 +-
 .../emcn/components/calendar/calendar.tsx     |   2 +-
 .../emcn/components/callout/callout.tsx       |   8 +-
 .../emcn/components/checkbox/checkbox.tsx     |   2 +-
 .../chip-date-picker/chip-date-picker.tsx     |   2 +-
 .../chip-dropdown/chip-dropdown.tsx           |   4 +-
 .../emcn/components/chip-modal/chip-modal.tsx |   2 +-
 .../components/chip-select/chip-select.tsx    |   2 +-
 .../components/emcn/components/code/code.tsx  |   2 +-
 .../emcn/components/combobox/combobox.tsx     |   2 +-
 .../components/date-picker/date-picker.tsx    |   2 +-
 .../dropdown-menu/dropdown-menu.tsx           |   2 +-
 .../emcn/components/info-card/info-card.tsx   |   2 +-
 .../emcn/components/input-otp/input-otp.tsx   |   2 +-
 .../emcn/components/modal/modal.tsx           |   2 +-
 .../emcn/components/popover/popover.tsx       |   4 +-
 .../progress-item/progress-item.tsx           |   5 +-
 .../emcn/components/tag-input/tag-input.tsx   |   2 +-
 .../components/time-picker/time-picker.tsx    |   2 +-
 apps/sim/components/emcn/icons/arrow-down.tsx |  32 +-
 .../emcn/icons/arrow-left-right.tsx           |  53 ++++
 apps/sim/components/emcn/icons/arrow-left.tsx |  32 +-
 .../sim/components/emcn/icons/arrow-right.tsx |  32 +-
 .../components/emcn/icons/arrow-right2.tsx    |  39 +++
 .../components/emcn/icons/arrow-up-down.tsx   |  55 +++-
 .../components/emcn/icons/arrow-up-left.tsx   |  32 ++
 apps/sim/components/emcn/icons/arrow-up.tsx   |  32 +-
 apps/sim/components/emcn/icons/arrow-up2.tsx  |  39 +++
 apps/sim/components/emcn/icons/asterisk.tsx   |  40 ++-
 apps/sim/components/emcn/icons/ban.tsx        |  37 +++
 apps/sim/components/emcn/icons/bell.tsx       |  42 ++-
 apps/sim/components/emcn/icons/bell2.tsx      |  46 +++
 apps/sim/components/emcn/icons/book-open.tsx  |  39 ++-
 apps/sim/components/emcn/icons/bot.tsx        |  74 +++++
 .../emcn/icons/bubble-chat-delay.tsx          |  39 +++
 .../emcn/icons/bubble-chat-spark.tsx          |  38 +++
 apps/sim/components/emcn/icons/bug.tsx        |  79 +++--
 apps/sim/components/emcn/icons/building2.tsx  |  50 ++++
 .../components/emcn/icons/calendar-clock.tsx  |  60 ++++
 apps/sim/components/emcn/icons/calendar.tsx   |  55 +++-
 apps/sim/components/emcn/icons/camera.tsx     |  45 +++
 apps/sim/components/emcn/icons/card.tsx       |  34 ++-
 apps/sim/components/emcn/icons/check.tsx      |  31 +-
 .../components/emcn/icons/chevron-down.tsx    |  28 +-
 .../components/emcn/icons/chevron-left.tsx    |  32 ++
 .../components/emcn/icons/chevron-right.tsx   |  32 ++
 apps/sim/components/emcn/icons/chevron-up.tsx |  32 ++
 .../emcn/icons/chevrons-down-up.tsx           |  39 +++
 .../emcn/icons/chevrons-up-down.tsx           |  39 +++
 .../components/emcn/icons/circle-alert.tsx    |  45 ++-
 .../components/emcn/icons/circle-check.tsx    |  33 +-
 apps/sim/components/emcn/icons/circle-off.tsx |  37 +++
 apps/sim/components/emcn/icons/circle.tsx     |  33 ++
 .../components/emcn/icons/clipboard-list.tsx  |  70 ++++-
 apps/sim/components/emcn/icons/clipboard.tsx  |  41 ++-
 apps/sim/components/emcn/icons/clock.tsx      |  33 +-
 apps/sim/components/emcn/icons/columns2.tsx   |  33 +-
 apps/sim/components/emcn/icons/columns3.tsx   |  35 ++-
 apps/sim/components/emcn/icons/compass.tsx    |  53 ++++
 .../sim/components/emcn/icons/connections.tsx |  31 +-
 apps/sim/components/emcn/icons/credit.tsx     |  47 ++-
 apps/sim/components/emcn/icons/cursor.tsx     |  22 +-
 apps/sim/components/emcn/icons/database-x.tsx |  69 +++--
 apps/sim/components/emcn/icons/database.tsx   |  49 ++-
 apps/sim/components/emcn/icons/duplicate.tsx  |  39 ++-
 apps/sim/components/emcn/icons/expand.tsx     |  39 ++-
 .../components/emcn/icons/external-link.tsx   |  39 +++
 apps/sim/components/emcn/icons/eye-off.tsx    |  50 ++--
 apps/sim/components/emcn/icons/eye.tsx        |  35 ++-
 apps/sim/components/emcn/icons/file-text.tsx  |  46 +++
 apps/sim/components/emcn/icons/file-x.tsx     |  41 ++-
 apps/sim/components/emcn/icons/file.tsx       |  46 ++-
 apps/sim/components/emcn/icons/files.tsx      |  54 +++-
 apps/sim/components/emcn/icons/filter.tsx     |  32 ++
 .../sim/components/emcn/icons/fingerprint.tsx |  51 ++--
 .../sim/components/emcn/icons/folder-code.tsx |  54 ++--
 .../components/emcn/icons/folder-input.tsx    |  33 +-
 .../sim/components/emcn/icons/folder-open.tsx |  44 +++
 .../sim/components/emcn/icons/folder-plus.tsx |  33 +-
 apps/sim/components/emcn/icons/folder.tsx     |  25 +-
 apps/sim/components/emcn/icons/form-input.tsx |  39 +++
 apps/sim/components/emcn/icons/git-branch.tsx |  42 +++
 apps/sim/components/emcn/icons/globe.tsx      |  48 +++
 .../components/emcn/icons/graduation-cap.tsx  |  46 +++
 apps/sim/components/emcn/icons/hammer.tsx     |  39 ++-
 apps/sim/components/emcn/icons/hand.tsx       |  42 +--
 apps/sim/components/emcn/icons/hash.tsx       |  53 ++++
 .../sim/components/emcn/icons/help-circle.tsx |  47 ++-
 apps/sim/components/emcn/icons/history.tsx    |  44 +++
 apps/sim/components/emcn/icons/home.tsx       |  39 ++-
 apps/sim/components/emcn/icons/image-up.tsx   |  47 ++-
 apps/sim/components/emcn/icons/image.tsx      |  44 +++
 apps/sim/components/emcn/icons/index.ts       |  62 +++-
 apps/sim/components/emcn/icons/info.tsx       |  45 ++-
 .../sim/components/emcn/icons/integration.tsx |  44 ++-
 apps/sim/components/emcn/icons/key-round.tsx  |  39 +++
 apps/sim/components/emcn/icons/key.tsx        |  41 ++-
 .../sim/components/emcn/icons/library-big.tsx |  88 ++++++
 apps/sim/components/emcn/icons/library.tsx    |  90 +++++-
 apps/sim/components/emcn/icons/link.tsx       |  33 +-
 .../sim/components/emcn/icons/list-filter.tsx |  64 +++-
 apps/sim/components/emcn/icons/lock.tsx       |  36 ++-
 apps/sim/components/emcn/icons/log-in.tsx     |  40 ++-
 apps/sim/components/emcn/icons/log-out.tsx    |  40 ++-
 apps/sim/components/emcn/icons/logs.tsx       |  38 +++
 apps/sim/components/emcn/icons/mail.tsx       |  37 ++-
 .../emcn/icons/manage-workspace.tsx           |  72 +++--
 .../components/emcn/icons/message-circle.tsx  |  34 ++-
 apps/sim/components/emcn/icons/mic-off.tsx    |  38 +++
 apps/sim/components/emcn/icons/mic.tsx        |  38 ++-
 apps/sim/components/emcn/icons/minus.tsx      |  32 ++
 apps/sim/components/emcn/icons/moon.tsx       |  32 ++
 .../components/emcn/icons/more-horizontal.tsx |  34 +--
 .../components/emcn/icons/more-vertical.tsx   |  32 ++
 apps/sim/components/emcn/icons/music.tsx      |  48 +++
 apps/sim/components/emcn/icons/network.tsx    |  48 +++
 apps/sim/components/emcn/icons/no-wrap.tsx    |  33 +-
 apps/sim/components/emcn/icons/palette.tsx    |  42 ++-
 apps/sim/components/emcn/icons/panel-left.tsx |  39 ++-
 .../sim/components/emcn/icons/panel-right.tsx |  39 +++
 apps/sim/components/emcn/icons/paperclip.tsx  |  33 +-
 .../components/emcn/icons/pause-circle.tsx    |  33 ++
 apps/sim/components/emcn/icons/pause.tsx      |  35 ++-
 apps/sim/components/emcn/icons/pencil.tsx     |  33 +-
 apps/sim/components/emcn/icons/phone.tsx      |  39 +++
 apps/sim/components/emcn/icons/pin-off.tsx    |  51 +++-
 apps/sim/components/emcn/icons/pin.tsx        |  35 ++-
 apps/sim/components/emcn/icons/play.tsx       |  48 +--
 apps/sim/components/emcn/icons/plus.tsx       |  39 ++-
 apps/sim/components/emcn/icons/redo.tsx       |  27 +-
 apps/sim/components/emcn/icons/repeat.tsx     |  39 +++
 apps/sim/components/emcn/icons/rocket.tsx     |  45 +--
 apps/sim/components/emcn/icons/rotate-ccw.tsx |  39 +++
 apps/sim/components/emcn/icons/rows3.tsx      |  35 ++-
 apps/sim/components/emcn/icons/rss.tsx        |  46 +++
 apps/sim/components/emcn/icons/scan.tsx       |  39 +++
 apps/sim/components/emcn/icons/scissors.tsx   |  37 +++
 apps/sim/components/emcn/icons/search.tsx     |  39 ++-
 apps/sim/components/emcn/icons/select-all.tsx |  52 +++-
 .../components/emcn/icons/send-to-back.tsx    |  46 +++
 apps/sim/components/emcn/icons/send.tsx       |  30 +-
 apps/sim/components/emcn/icons/server.tsx     |  69 ++++-
 apps/sim/components/emcn/icons/settings.tsx   |  34 ++-
 apps/sim/components/emcn/icons/settings2.tsx  |  36 +++
 apps/sim/components/emcn/icons/share2.tsx     |  45 +++
 .../components/emcn/icons/shield-check.tsx    |  32 +-
 apps/sim/components/emcn/icons/shuffle.tsx    |  39 ++-
 apps/sim/components/emcn/icons/slash.tsx      |  33 +-
 apps/sim/components/emcn/icons/sparkles.tsx   |  37 +++
 apps/sim/components/emcn/icons/split.tsx      |  39 +++
 .../emcn/icons/square-arrow-up-right.tsx      |  33 +-
 apps/sim/components/emcn/icons/square.tsx     |  43 ++-
 apps/sim/components/emcn/icons/sun.tsx        |  36 +++
 apps/sim/components/emcn/icons/table-x.tsx    |  43 +--
 apps/sim/components/emcn/icons/table.tsx      |  38 ++-
 apps/sim/components/emcn/icons/tag.tsx        |  47 ++-
 apps/sim/components/emcn/icons/task.tsx       |  33 +-
 .../components/emcn/icons/terminal-window.tsx |  43 ++-
 apps/sim/components/emcn/icons/terminal.tsx   |  46 +++
 .../sim/components/emcn/icons/thumbs-down.tsx |  41 ++-
 apps/sim/components/emcn/icons/thumbs-up.tsx  |  39 ++-
 apps/sim/components/emcn/icons/trash.tsx      |  38 ++-
 apps/sim/components/emcn/icons/trash2.tsx     |  38 ++-
 .../components/emcn/icons/triangle-alert.tsx  |  43 ++-
 .../components/emcn/icons/type-boolean.tsx    |  35 ++-
 apps/sim/components/emcn/icons/type-json.tsx  |  46 ++-
 .../sim/components/emcn/icons/type-number.tsx |  48 ++-
 apps/sim/components/emcn/icons/type-text.tsx  |  40 ++-
 apps/sim/components/emcn/icons/undo.tsx       |  27 +-
 apps/sim/components/emcn/icons/unlock.tsx     |  38 ++-
 apps/sim/components/emcn/icons/upload.tsx     |  40 ++-
 apps/sim/components/emcn/icons/user-plus.tsx  |  48 ++-
 apps/sim/components/emcn/icons/user.tsx       |  39 ++-
 apps/sim/components/emcn/icons/users.tsx      |  55 +++-
 apps/sim/components/emcn/icons/wand2.tsx      |  44 +++
 apps/sim/components/emcn/icons/webhook.tsx    |  61 ++++
 apps/sim/components/emcn/icons/workflow-x.tsx |  58 ++--
 apps/sim/components/emcn/icons/workflow.tsx   |  49 ++-
 apps/sim/components/emcn/icons/wrap.tsx       |  53 +++-
 apps/sim/components/emcn/icons/wrench.tsx     |  42 ++-
 apps/sim/components/emcn/icons/x-circle.tsx   |  39 +++
 apps/sim/components/emcn/icons/x.tsx          |  32 +-
 apps/sim/components/emcn/icons/zoom-in.tsx    |  40 ++-
 apps/sim/components/emcn/icons/zoom-out.tsx   |  35 ++-
 apps/sim/components/ui/select.tsx             |   2 +-
 .../content/blog/enterprise/components.tsx    |   2 +-
 .../components/access-control.tsx             |   3 +-
 .../ee/audit-logs/components/audit-logs.tsx   |   2 +-
 apps/sim/ee/components/setting-row.tsx        |   2 +-
 .../components/data-drains-settings.tsx       |   2 +-
 apps/sim/ee/sso/components/sso-settings.tsx   |   2 +-
 .../components/whitelabeling-settings.tsx     |   2 +-
 .../company-domain/company-domain.ts          |   2 +-
 .../enrichments/company-info/company-info.ts  |   2 +-
 .../enrichments/phone-number/phone-number.ts  |   2 +-
 .../lib/copilot/tools/client/store-utils.ts   |   2 +-
 apps/sim/package.json                         |   2 +-
 apps/sim/scripts/hugeicons-generate.ts        | 143 +++++++++
 apps/sim/scripts/hugeicons-map.ts             | 201 +++++++++++++
 apps/sim/scripts/render-icon-gallery.tsx      | 282 ------------------
 apps/sim/stores/modals/search/store.ts        |   6 +-
 bun.lock                                      |   6 +-
 362 files changed, 6204 insertions(+), 2148 deletions(-)
 create mode 100644 apps/sim/components/emcn/icons/arrow-left-right.tsx
 create mode 100644 apps/sim/components/emcn/icons/arrow-right2.tsx
 create mode 100644 apps/sim/components/emcn/icons/arrow-up-left.tsx
 create mode 100644 apps/sim/components/emcn/icons/arrow-up2.tsx
 create mode 100644 apps/sim/components/emcn/icons/ban.tsx
 create mode 100644 apps/sim/components/emcn/icons/bell2.tsx
 create mode 100644 apps/sim/components/emcn/icons/bot.tsx
 create mode 100644 apps/sim/components/emcn/icons/bubble-chat-delay.tsx
 create mode 100644 apps/sim/components/emcn/icons/bubble-chat-spark.tsx
 create mode 100644 apps/sim/components/emcn/icons/building2.tsx
 create mode 100644 apps/sim/components/emcn/icons/calendar-clock.tsx
 create mode 100644 apps/sim/components/emcn/icons/camera.tsx
 create mode 100644 apps/sim/components/emcn/icons/chevron-left.tsx
 create mode 100644 apps/sim/components/emcn/icons/chevron-right.tsx
 create mode 100644 apps/sim/components/emcn/icons/chevron-up.tsx
 create mode 100644 apps/sim/components/emcn/icons/chevrons-down-up.tsx
 create mode 100644 apps/sim/components/emcn/icons/chevrons-up-down.tsx
 create mode 100644 apps/sim/components/emcn/icons/circle-off.tsx
 create mode 100644 apps/sim/components/emcn/icons/circle.tsx
 create mode 100644 apps/sim/components/emcn/icons/compass.tsx
 create mode 100644 apps/sim/components/emcn/icons/external-link.tsx
 create mode 100644 apps/sim/components/emcn/icons/file-text.tsx
 create mode 100644 apps/sim/components/emcn/icons/filter.tsx
 create mode 100644 apps/sim/components/emcn/icons/folder-open.tsx
 create mode 100644 apps/sim/components/emcn/icons/form-input.tsx
 create mode 100644 apps/sim/components/emcn/icons/git-branch.tsx
 create mode 100644 apps/sim/components/emcn/icons/globe.tsx
 create mode 100644 apps/sim/components/emcn/icons/graduation-cap.tsx
 create mode 100644 apps/sim/components/emcn/icons/hash.tsx
 create mode 100644 apps/sim/components/emcn/icons/history.tsx
 create mode 100644 apps/sim/components/emcn/icons/image.tsx
 create mode 100644 apps/sim/components/emcn/icons/key-round.tsx
 create mode 100644 apps/sim/components/emcn/icons/library-big.tsx
 create mode 100644 apps/sim/components/emcn/icons/logs.tsx
 create mode 100644 apps/sim/components/emcn/icons/mic-off.tsx
 create mode 100644 apps/sim/components/emcn/icons/minus.tsx
 create mode 100644 apps/sim/components/emcn/icons/moon.tsx
 create mode 100644 apps/sim/components/emcn/icons/more-vertical.tsx
 create mode 100644 apps/sim/components/emcn/icons/music.tsx
 create mode 100644 apps/sim/components/emcn/icons/network.tsx
 create mode 100644 apps/sim/components/emcn/icons/panel-right.tsx
 create mode 100644 apps/sim/components/emcn/icons/pause-circle.tsx
 create mode 100644 apps/sim/components/emcn/icons/phone.tsx
 create mode 100644 apps/sim/components/emcn/icons/repeat.tsx
 create mode 100644 apps/sim/components/emcn/icons/rotate-ccw.tsx
 create mode 100644 apps/sim/components/emcn/icons/rss.tsx
 create mode 100644 apps/sim/components/emcn/icons/scan.tsx
 create mode 100644 apps/sim/components/emcn/icons/scissors.tsx
 create mode 100644 apps/sim/components/emcn/icons/send-to-back.tsx
 create mode 100644 apps/sim/components/emcn/icons/settings2.tsx
 create mode 100644 apps/sim/components/emcn/icons/share2.tsx
 create mode 100644 apps/sim/components/emcn/icons/sparkles.tsx
 create mode 100644 apps/sim/components/emcn/icons/split.tsx
 create mode 100644 apps/sim/components/emcn/icons/sun.tsx
 create mode 100644 apps/sim/components/emcn/icons/terminal.tsx
 create mode 100644 apps/sim/components/emcn/icons/wand2.tsx
 create mode 100644 apps/sim/components/emcn/icons/webhook.tsx
 create mode 100644 apps/sim/components/emcn/icons/x-circle.tsx
 create mode 100644 apps/sim/scripts/hugeicons-generate.ts
 create mode 100644 apps/sim/scripts/hugeicons-map.ts
 delete mode 100644 apps/sim/scripts/render-icon-gallery.tsx

diff --git a/apps/sim/app/(auth)/login/login-form.tsx b/apps/sim/app/(auth)/login/login-form.tsx
index 86ce6997e9d..09dc29465e4 100644
--- a/apps/sim/app/(auth)/login/login-form.tsx
+++ b/apps/sim/app/(auth)/login/login-form.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import {
@@ -18,6 +17,7 @@ import {
   Label,
   Loader,
 } from '@/components/emcn'
+import { Eye, EyeOff } from '@/components/emcn/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { forgetPasswordContract } from '@/lib/api/contracts'
 import { client } from '@/lib/auth/auth-client'
diff --git a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
index f1627b8397d..9cbb80ee41f 100644
--- a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
+++ b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Eye, EyeOff } from 'lucide-react'
 import { Input, Label, Loader } from '@/components/emcn'
+import { Eye, EyeOff } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 
diff --git a/apps/sim/app/(auth)/signup/signup-form.tsx b/apps/sim/app/(auth)/signup/signup-form.tsx
index 90490160dff..4d90631bd26 100644
--- a/apps/sim/app/(auth)/signup/signup-form.tsx
+++ b/apps/sim/app/(auth)/signup/signup-form.tsx
@@ -3,11 +3,11 @@
 import { Suspense, useEffect, useMemo, useRef, useState } from 'react'
 import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
 import { createLogger } from '@sim/logger'
-import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { Input, Label, Loader } from '@/components/emcn'
+import { Eye, EyeOff } from '@/components/emcn/icons'
 import { client, useSession } from '@/lib/auth/auth-client'
 import { getEnv, isFalsy, isTruthy } from '@/lib/core/config/env'
 import { validateCallbackUrl } from '@/lib/core/security/input-validation'
diff --git a/apps/sim/app/(landing)/blog/[slug]/share-button.tsx b/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
index 679c6f44c6e..fd974f1e226 100644
--- a/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
@@ -1,14 +1,13 @@
 'use client'
 
 import { useState } from 'react'
-import { Share2 } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { Duplicate } from '@/components/emcn/icons'
+import { Duplicate, Share2 } from '@/components/emcn/icons'
 import { LinkedInIcon, xIcon as XIcon } from '@/components/icons'
 
 interface ShareButtonProps {
diff --git a/apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx b/apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx
index f64ee69b34c..3504badc09c 100644
--- a/apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx
+++ b/apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx
@@ -2,7 +2,6 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { X } from 'lucide-react'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import {
@@ -14,6 +13,7 @@ import {
   ModalTitle,
   ModalTrigger,
 } from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
 import { GithubIcon, GoogleIcon } from '@/components/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { type AuthProviderStatusResponse, getAuthProvidersContract } from '@/lib/api/contracts/auth'
diff --git a/apps/sim/app/(landing)/components/features/components/features-preview.tsx b/apps/sim/app/(landing)/components/features/components/features-preview.tsx
index 1db87f478e2..a865b6036ed 100644
--- a/apps/sim/app/(landing)/components/features/components/features-preview.tsx
+++ b/apps/sim/app/(landing)/components/features/components/features-preview.tsx
@@ -946,7 +946,7 @@ function MockFullTable({ revealedRows }: { revealedRows: number }) {
                   <div className='flex items-center gap-1.5'>
                     <ColumnTypeIcon />
                     <span className='font-medium text-[#1C1C1C] text-[13px]'>{col}</span>
-                    <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[#CCC]' />
+                    <ChevronDown className='ml-auto size-[14px] shrink-0 text-[#CCC]' />
                   </div>
                 </th>
               ))}
diff --git a/apps/sim/app/(landing)/components/footer/footer-cta.tsx b/apps/sim/app/(landing)/components/footer/footer-cta.tsx
index 31355a75f35..1ee3181ea68 100644
--- a/apps/sim/app/(landing)/components/footer/footer-cta.tsx
+++ b/apps/sim/app/(landing)/components/footer/footer-cta.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useCallback, useRef, useState } from 'react'
-import { ArrowUp } from 'lucide-react'
 import dynamic from 'next/dynamic'
+import { ArrowUp } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { captureClientEvent } from '@/lib/posthog/client'
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
index 3f411f608c5..a440d884cd5 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
@@ -2,9 +2,8 @@
 
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
-import { ArrowUp, Table } from 'lucide-react'
 import { Blimp, Checkbox, ChevronDown } from '@/components/emcn'
-import { TypeBoolean, TypeNumber, TypeText } from '@/components/emcn/icons'
+import { ArrowUp, Table, TypeBoolean, TypeNumber, TypeText } from '@/components/emcn/icons'
 import { captureClientEvent } from '@/lib/posthog/client'
 import { useLandingSubmit } from '@/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
 import { EASE_OUT } from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
@@ -221,7 +220,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
                         Mothership
                       </span>
                       <ChevronDown
-                        className='h-[7px] w-[9px] transition-transform duration-150'
+                        className='size-[14px] transition-transform duration-150'
                         style={{
                           color: C.TEXT_ICON,
                           transform: toolsExpanded ? 'rotate(0deg)' : 'rotate(-90deg)',
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
index 6028edde6de..6e75ab5db07 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
@@ -2,11 +2,11 @@
 
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { AnimatePresence, domMax, LazyMotion, m } from 'framer-motion'
-import { ArrowUp } from 'lucide-react'
 import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
 import { createPortal } from 'react-dom'
 import { Blimp, BubbleChatPreview, ChevronDown, MoreHorizontal, Play } from '@/components/emcn'
+import { ArrowUp } from '@/components/emcn/icons'
 import { AgentIcon, HubspotIcon, OpenAIIcon, SalesforceIcon } from '@/components/icons'
 import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
 import { captureClientEvent } from '@/lib/posthog/client'
@@ -432,7 +432,7 @@ function EditorTabContent({ editorPrompt, typedLength }: EditorTabContentProps)
               <div className='flex h-[32px] items-center gap-2 rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-2'>
                 {ModelIcon && <ModelIcon className='h-[14px] w-[14px] text-[#e6e6e6]' />}
                 <span className='flex-1 truncate font-medium text-[#e6e6e6] text-sm'>{model}</span>
-                <ChevronDown className='h-[7px] w-[9px] text-[#636363]' />
+                <ChevronDown className='size-[14px] text-[#636363]' />
               </div>
             </div>
           )}
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx
index da31dfcd20e..23166f85221 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx
@@ -446,7 +446,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
           <span className='select-none text-[var(--text-icon)] text-sm'>/</span>
           <span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
             {tableName}
-            <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+            <ChevronDown className='ml-2 size-[14px] shrink-0 text-[var(--text-muted)]' />
           </span>
         </div>
       </div>
@@ -472,7 +472,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
                       <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
                         {col.label}
                       </span>
-                      <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+                      <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />
                     </div>
                   </th>
                 )
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx
index 0e2af73d5da..b4f214432df 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx
@@ -2,9 +2,9 @@
 
 import { memo } from 'react'
 import { domAnimation, LazyMotion, m } from 'framer-motion'
-import { Database } from 'lucide-react'
 import { Handle, type NodeProps, Position } from 'reactflow'
 import { Blimp } from '@/components/emcn'
+import { Database } from '@/components/emcn/icons'
 import {
   AgentIcon,
   AnthropicIcon,
diff --git a/apps/sim/app/academy/(catalog)/[courseSlug]/components/course-progress.tsx b/apps/sim/app/academy/(catalog)/[courseSlug]/components/course-progress.tsx
index 4dd486620e3..b02f18ce105 100644
--- a/apps/sim/app/academy/(catalog)/[courseSlug]/components/course-progress.tsx
+++ b/apps/sim/app/academy/(catalog)/[courseSlug]/components/course-progress.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { useMemo, useSyncExternalStore } from 'react'
-import { CheckCircle2, Circle, ExternalLink, GraduationCap } from 'lucide-react'
 import Link from 'next/link'
 import { Loader } from '@/components/emcn'
+import { Circle, CircleCheck, ExternalLink, GraduationCap } from '@/components/emcn/icons'
 import {
   getCompletedLessonsFromSnapshot,
   getCompletedLessonsSnapshot,
@@ -77,7 +77,7 @@ export function CourseProgress({ course, courseSlug }: CourseProgressProps) {
                     className='flex items-center gap-3 rounded-[8px] border border-[#2A2A2A] bg-[#222] px-4 py-3 text-[14px] transition-colors hover:border-[#3A3A3A] hover:bg-[#272727]'
                   >
                     {completedIds.has(lesson.id) ? (
-                      <CheckCircle2 className='size-4 flex-shrink-0 text-[#4CAF50]' />
+                      <CircleCheck className='size-4 flex-shrink-0 text-[#4CAF50]' />
                     ) : (
                       <Circle className='size-4 flex-shrink-0 text-[#444]' />
                     )}
diff --git a/apps/sim/app/academy/(catalog)/[courseSlug]/page.tsx b/apps/sim/app/academy/(catalog)/[courseSlug]/page.tsx
index 4f0d96a1feb..c9dd650a846 100644
--- a/apps/sim/app/academy/(catalog)/[courseSlug]/page.tsx
+++ b/apps/sim/app/academy/(catalog)/[courseSlug]/page.tsx
@@ -1,7 +1,7 @@
-import { Clock, GraduationCap } from 'lucide-react'
 import type { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
+import { Clock, GraduationCap } from '@/components/emcn/icons'
 import { COURSES, getCourse } from '@/lib/academy/content'
 import { CourseProgress } from './components/course-progress'
 
diff --git a/apps/sim/app/academy/(catalog)/certificate/[certificateNumber]/page.tsx b/apps/sim/app/academy/(catalog)/certificate/[certificateNumber]/page.tsx
index f7f4a36f479..f6a6a4686e9 100644
--- a/apps/sim/app/academy/(catalog)/certificate/[certificateNumber]/page.tsx
+++ b/apps/sim/app/academy/(catalog)/certificate/[certificateNumber]/page.tsx
@@ -2,9 +2,9 @@ import { cache } from 'react'
 import { db } from '@sim/db'
 import { academyCertificate } from '@sim/db/schema'
 import { eq } from 'drizzle-orm'
-import { CheckCircle2, GraduationCap, XCircle } from 'lucide-react'
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
+import { CircleCheck, GraduationCap, XCircle } from '@/components/emcn/icons'
 import type { AcademyCertificate } from '@/lib/academy/types'
 import { academyCertificateMetadataSchema } from '@/lib/api/contracts/academy'
 
@@ -84,7 +84,7 @@ export default async function CertificatePage({ params }: CertificatePageProps)
 
           {certificate.status === 'active' ? (
             <div className='flex items-center justify-center gap-2 text-[#4CAF50]'>
-              <CheckCircle2 className='size-4' />
+              <CircleCheck className='size-4' />
               <span className='font-[430] text-[14px]'>Verified</span>
             </div>
           ) : (
diff --git a/apps/sim/app/academy/(catalog)/page.tsx b/apps/sim/app/academy/(catalog)/page.tsx
index b770d88c047..bd8ae67fe8d 100644
--- a/apps/sim/app/academy/(catalog)/page.tsx
+++ b/apps/sim/app/academy/(catalog)/page.tsx
@@ -1,5 +1,5 @@
-import { BookOpen, Clock } from 'lucide-react'
 import Link from 'next/link'
+import { BookOpen, Clock } from '@/components/emcn/icons'
 import { COURSES } from '@/lib/academy/content'
 
 export default function AcademyCatalogPage() {
diff --git a/apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/exercise-view.tsx b/apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/exercise-view.tsx
index 8978affbc87..a3a9874941d 100644
--- a/apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/exercise-view.tsx
+++ b/apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/exercise-view.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useState } from 'react'
-import { CheckCircle2 } from 'lucide-react'
+import { CircleCheck } from '@/components/emcn/icons'
 import { markLessonComplete } from '@/lib/academy/local-progress'
 import type { ExerciseBlockState, ExerciseDefinition, ExerciseEdgeState } from '@/lib/academy/types'
 import { SandboxCanvasProvider } from '@/app/academy/components/sandbox-canvas-provider'
@@ -56,7 +56,7 @@ export function ExerciseView({
       {completed && (
         <div className='pointer-events-none absolute inset-0 flex items-start justify-center pt-5'>
           <div className='pointer-events-auto flex items-center gap-2 rounded-full border border-[#3A4A3A] bg-[#1F2A1F]/95 px-4 py-2 font-[430] text-[#4CAF50] text-[13px] shadow-lg backdrop-blur-sm'>
-            <CheckCircle2 className='size-4' />
+            <CircleCheck className='size-4' />
             Exercise complete!
           </div>
         </div>
diff --git a/apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/lesson-quiz.tsx b/apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/lesson-quiz.tsx
index 045993db67a..bf5cced081a 100644
--- a/apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/lesson-quiz.tsx
+++ b/apps/sim/app/academy/[courseSlug]/[lessonSlug]/components/lesson-quiz.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { CheckCircle2, XCircle } from 'lucide-react'
+import { CircleCheck, XCircle } from '@/components/emcn/icons'
 import { markLessonComplete } from '@/lib/academy/local-progress'
 import type { QuizDefinition, QuizQuestion } from '@/lib/academy/types'
 import { cn } from '@/lib/core/utils/cn'
@@ -202,7 +202,7 @@ export function LessonQuiz({ lessonId, quizConfig, onPass }: LessonQuizProps) {
                 )}
               >
                 {isCorrect ? (
-                  <CheckCircle2 className='mt-0.5 size-3.5 flex-shrink-0' />
+                  <CircleCheck className='mt-0.5 size-3.5 flex-shrink-0' />
                 ) : (
                   <XCircle className='mt-0.5 size-3.5 flex-shrink-0' />
                 )}
diff --git a/apps/sim/app/academy/[courseSlug]/[lessonSlug]/page.tsx b/apps/sim/app/academy/[courseSlug]/[lessonSlug]/page.tsx
index 798051faa54..15f870ec778 100644
--- a/apps/sim/app/academy/[courseSlug]/[lessonSlug]/page.tsx
+++ b/apps/sim/app/academy/[courseSlug]/[lessonSlug]/page.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { use, useCallback, useEffect, useMemo, useState } from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
 import Image from 'next/image'
 import Link from 'next/link'
+import { ChevronLeft, ChevronRight } from '@/components/emcn/icons'
 import { getCourse } from '@/lib/academy/content'
 import { markLessonComplete } from '@/lib/academy/local-progress'
 import type { Lesson } from '@/lib/academy/types'
diff --git a/apps/sim/app/academy/components/validation-checklist.tsx b/apps/sim/app/academy/components/validation-checklist.tsx
index 977da84afaa..dd6f3186caa 100644
--- a/apps/sim/app/academy/components/validation-checklist.tsx
+++ b/apps/sim/app/academy/components/validation-checklist.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { CheckCircle2, Circle } from 'lucide-react'
+import { Circle, CircleCheck } from '@/components/emcn/icons'
 import type { ValidationRuleResult } from '@/lib/academy/types'
 import { cn } from '@/lib/core/utils/cn'
 
@@ -30,7 +30,7 @@ export function ValidationChecklist({ results, allPassed }: ValidationChecklistP
         {results.map((result) => (
           <li key={result.message} className='flex items-start gap-2'>
             {result.passed ? (
-              <CheckCircle2 className='mt-0.5 size-3.5 flex-shrink-0 text-[#4CAF50]' />
+              <CircleCheck className='mt-0.5 size-3.5 flex-shrink-0 text-[#4CAF50]' />
             ) : (
               <Circle className='mt-0.5 size-3.5 flex-shrink-0 text-[#444]' />
             )}
diff --git a/apps/sim/app/changelog/components/changelog-content.tsx b/apps/sim/app/changelog/components/changelog-content.tsx
index 395af926f9b..6449c763ce6 100644
--- a/apps/sim/app/changelog/components/changelog-content.tsx
+++ b/apps/sim/app/changelog/components/changelog-content.tsx
@@ -1,5 +1,6 @@
-import { BookOpen, Github, Rss } from 'lucide-react'
 import Link from 'next/link'
+import { BookOpen, Rss } from '@/components/emcn/icons'
+import { GithubIcon } from '@/components/icons'
 import ChangelogList from '@/app/changelog/components/timeline-list'
 
 export interface ChangelogEntry {
@@ -65,7 +66,7 @@ export default async function ChangelogContent() {
                 rel='noopener noreferrer'
                 className='inline-flex items-center gap-2 rounded-[5px] border border-[var(--white)] bg-[var(--white)] px-[9px] py-[5px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
               >
-                <Github className='size-4' />
+                <GithubIcon className='size-4' />
                 View on GitHub
               </Link>
               <Link
diff --git a/apps/sim/app/chat/components/auth/password/password-auth.tsx b/apps/sim/app/chat/components/auth/password/password-auth.tsx
index d8eca769951..479b5a91137 100644
--- a/apps/sim/app/chat/components/auth/password/password-auth.tsx
+++ b/apps/sim/app/chat/components/auth/password/password-auth.tsx
@@ -3,8 +3,8 @@
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Eye, EyeOff } from 'lucide-react'
 import { Input, Label, Loader } from '@/components/emcn'
+import { Eye, EyeOff } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import AuthBackground from '@/app/(auth)/components/auth-background'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
diff --git a/apps/sim/app/chat/components/input/input.tsx b/apps/sim/app/chat/components/input/input.tsx
index c31342c1e64..3a86a6f9516 100644
--- a/apps/sim/app/chat/components/input/input.tsx
+++ b/apps/sim/app/chat/components/input/input.tsx
@@ -4,8 +4,8 @@ import type React from 'react'
 import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
-import { ArrowUp, Mic, Paperclip, X } from 'lucide-react'
 import { Badge, Tooltip } from '@/components/emcn'
+import { ArrowUp2, Mic, Paperclip, X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { CHAT_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
@@ -351,7 +351,7 @@ export const ChatInput: React.FC<{
                         : 'bg-[#808080] dark:bg-[#808080]'
                     )}
                   >
-                    <ArrowUp
+                    <ArrowUp2
                       className='block size-[16px] text-white dark:text-black'
                       strokeWidth={2.25}
                     />
diff --git a/apps/sim/app/chat/components/input/voice-input.tsx b/apps/sim/app/chat/components/input/voice-input.tsx
index 675c2fb4a41..2576f2caa74 100644
--- a/apps/sim/app/chat/components/input/voice-input.tsx
+++ b/apps/sim/app/chat/components/input/voice-input.tsx
@@ -2,7 +2,7 @@
 
 import { useCallback } from 'react'
 import { domAnimation, LazyMotion, m } from 'framer-motion'
-import { Mic } from 'lucide-react'
+import { Mic } from '@/components/emcn/icons'
 
 interface VoiceInputProps {
   onVoiceStart: () => void
diff --git a/apps/sim/app/chat/components/message-container/message-container.tsx b/apps/sim/app/chat/components/message-container/message-container.tsx
index d85be38058e..b1c96d85d41 100644
--- a/apps/sim/app/chat/components/message-container/message-container.tsx
+++ b/apps/sim/app/chat/components/message-container/message-container.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { memo, type RefObject } from 'react'
-import { ArrowDown } from 'lucide-react'
+import { ArrowDown } from '@/components/emcn/icons'
 import { Button } from '@/components/ui/button'
 import { type ChatMessage, ClientChatMessage } from '@/app/chat/components/message/message'
 
diff --git a/apps/sim/app/chat/components/message/components/file-download.tsx b/apps/sim/app/chat/components/message/components/file-download.tsx
index bd5aa880dcc..ed9d41adc2e 100644
--- a/apps/sim/app/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/chat/components/message/components/file-download.tsx
@@ -3,8 +3,8 @@
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { sleep } from '@sim/utils/helpers'
-import { Music } from 'lucide-react'
 import { Button, Download, Loader } from '@/components/emcn'
+import { Music } from '@/components/emcn/icons'
 import { DefaultFileIcon, getDocumentIcon } from '@/components/icons/document-icons'
 import type { ChatFile } from '@/app/chat/components/message/message'
 
diff --git a/apps/sim/app/chat/components/message/message.tsx b/apps/sim/app/chat/components/message/message.tsx
index a005c7257a5..98f905eecb8 100644
--- a/apps/sim/app/chat/components/message/message.tsx
+++ b/apps/sim/app/chat/components/message/message.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { memo, useState } from 'react'
-import { Check, File as FileIcon, FileText, Image as ImageIcon } from 'lucide-react'
 import { Duplicate, Tooltip } from '@/components/emcn'
+import { Check, File as FileIcon, FileText, Image as ImageIcon } from '@/components/emcn/icons'
 import {
   ChatFileDownload,
   ChatFileDownloadAll,
diff --git a/apps/sim/app/chat/components/voice-interface/voice-interface.tsx b/apps/sim/app/chat/components/voice-interface/voice-interface.tsx
index f313b24046e..95eb8884fe1 100644
--- a/apps/sim/app/chat/components/voice-interface/voice-interface.tsx
+++ b/apps/sim/app/chat/components/voice-interface/voice-interface.tsx
@@ -2,8 +2,8 @@
 
 import { type RefObject, useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Mic, MicOff, Phone } from 'lucide-react'
 import dynamic from 'next/dynamic'
+import { Mic, MicOff, Phone } from '@/components/emcn/icons'
 import { Button } from '@/components/ui/button'
 import { requestJson } from '@/lib/api/client/request'
 import { speechTokenContract } from '@/lib/api/contracts/media/speech'
diff --git a/apps/sim/app/credential-account/[token]/page.tsx b/apps/sim/app/credential-account/[token]/page.tsx
index a9ba15dca2a..d3fbbbbdf32 100644
--- a/apps/sim/app/credential-account/[token]/page.tsx
+++ b/apps/sim/app/credential-account/[token]/page.tsx
@@ -2,8 +2,8 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Mail } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
+import { Mail } from '@/components/emcn/icons'
 import { GmailIcon, OutlookIcon } from '@/components/icons'
 import { ApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index bd5a2ebb64f..d17fa432da5 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useState, useSyncExternalStore } from 'react'
-import { ArrowLeft, Folder, Moon, Sun } from 'lucide-react'
 import { notFound, useRouter } from 'next/navigation'
 import {
   Avatar,
@@ -88,6 +87,7 @@ import {
   ZoomIn,
   ZoomOut,
 } from '@/components/emcn'
+import { ArrowLeft, Folder, Moon, Sun } from '@/components/emcn/icons'
 import { env, isTruthy } from '@/lib/core/config/env'
 
 function Section({ title, children }: { title: string; children: React.ReactNode }) {
diff --git a/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx b/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
index 4f962ccce10..700cc8fa944 100644
--- a/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
+++ b/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
@@ -2,8 +2,8 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { RefreshCw } from 'lucide-react'
 import { useRouter } from 'next/navigation'
+import { RefreshCw } from '@/components/emcn/icons'
 
 const logger = createLogger('ResumePage')
 
diff --git a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
index 14075481550..a44d88107ba 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
@@ -9,7 +9,7 @@ import {
   PopoverContent,
   Tooltip,
 } from '@/components/emcn'
-import { ChevronDown, MessageCircle } from '@/components/emcn/icons'
+import { BubbleChatDelay, ChevronDown } from '@/components/emcn/icons'
 import {
   isMothershipPageId,
   MOTHERSHIP_PAGES,
@@ -128,8 +128,8 @@ export function ChatSwitcher({
         open && 'bg-[var(--surface-active)]'
       )}
     >
-      <MessageCircle className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-      <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+      <BubbleChatDelay className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
     </button>
   ) : (
     <button
@@ -142,11 +142,11 @@ export function ChatSwitcher({
         open && 'bg-[var(--surface-active)]'
       )}
     >
-      <MessageCircle className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      <BubbleChatDelay className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
       <span className='min-w-0 truncate font-medium text-[14px] text-[var(--text-primary)]'>
         {title}
       </span>
-      <ChevronDown className='ml-0.5 h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+      <ChevronDown className='ml-0.5 size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
     </button>
   )
 
diff --git a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
index f6279b6f9f3..a9f74247ca9 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
@@ -2,8 +2,8 @@
 
 import { type ReactNode, useEffect } from 'react'
 import { createLogger } from '@sim/logger'
-import { TriangleAlert } from 'lucide-react'
 import { Button } from '@/components/emcn'
+import { TriangleAlert } from '@/components/emcn/icons'
 
 /** Props shape required by Next.js error boundary files (`error.tsx`). */
 export interface ErrorBoundaryProps {
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
index d6c1b8b8c24..cc81dba28a5 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { memo, useEffect, useRef, useState } from 'react'
-import { GitBranch } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import {
   Check,
@@ -17,6 +16,7 @@ import {
   Tooltip,
   toast,
 } from '@/components/emcn'
+import { GitBranch } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { useSubmitCopilotFeedback } from '@/hooks/queries/copilot-feedback'
 import { useForkMothershipChat } from '@/hooks/queries/mothership-chats'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index aefb316e606..364e7b928e4 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -1,5 +1,4 @@
 import { Fragment, forwardRef, memo, useEffect, useRef, useState } from 'react'
-import { ArrowUpLeft } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
   Button,
@@ -20,6 +19,7 @@ import {
   useFloatingTooltip,
   useIsOverflowing,
 } from '@/components/emcn'
+import { ArrowUpLeft } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { ChatSwitcher } from '@/app/workspace/[workspaceId]/components/chat-switcher'
 import { InlineRenameInput } from '@/app/workspace/[workspaceId]/components/inline-rename-input'
@@ -304,7 +304,7 @@ const BreadcrumbSegment = memo(function BreadcrumbSegment({
               {...tooltipHandlers}
             >
               {content}
-              <ChevronDown className='ml-auto h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+              <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align='start'>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
index 4f4785e9a11..532687240dc 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
@@ -9,8 +9,8 @@ import {
   useRef,
   useState,
 } from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { ArrowDown, ArrowUp, Button, Checkbox, Loader, Plus, Skeleton } from '@/components/emcn'
+import { ChevronLeft, ChevronRight } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
 import type { BreadcrumbItem, CreateAction, HeaderAction } from './components/resource-header'
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/editor-context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/editor-context-menu.tsx
index 27ed6d8464c..a2009b9af10 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/editor-context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/editor-context-menu.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { Scissors } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,7 +8,7 @@ import {
   DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { Clipboard, Duplicate, Search, SelectAll } from '@/components/emcn/icons'
+import { Clipboard, Duplicate, Scissors, Search, SelectAll } from '@/components/emcn/icons'
 
 interface EditorContextMenuProps {
   isOpen: boolean
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar.tsx
index b161d2f8bce..f0d358464f5 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-toolbar.tsx
@@ -1,5 +1,5 @@
-import { ChevronLeft, ChevronRight, ZoomIn, ZoomOut } from 'lucide-react'
 import { Button } from '@/components/emcn'
+import { ChevronLeft, ChevronRight, ZoomIn, ZoomOut } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 interface PreviewNavigationControls {
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
index 85513baaa74..3b18c638bec 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
@@ -91,7 +91,7 @@ export function AgentGroup({
           <span className='text-[var(--text-body)] text-sm'>{agentLabel}</span>
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              'size-[14px] text-[var(--text-icon)] transition-transform duration-150',
               !expanded && '-rotate-90'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
index 50538e2bd2d..67a3ecebe87 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
@@ -432,7 +432,7 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
           <span className='text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              'size-[14px] text-[var(--text-icon)] transition-transform duration-150',
               !expanded && '-rotate-90'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/thinking-block/thinking-block.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/thinking-block/thinking-block.tsx
index ce7788cb136..1eba244dfed 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/thinking-block/thinking-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/thinking-block/thinking-block.tsx
@@ -103,7 +103,7 @@ export function ThinkingBlock({
         <span className='text-[var(--text-body)] text-sm'>{label}</span>
         <ChevronDown
           className={cn(
-            'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+            'size-[14px] text-[var(--text-icon)] transition-transform duration-150',
             !expanded && '-rotate-90'
           )}
         />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/inline-activity.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/inline-activity.tsx
index d971d72b150..27b6d386500 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/inline-activity.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/activity-view/inline-activity.tsx
@@ -116,7 +116,7 @@ const InlineAgentGroup = memo(function InlineAgentGroup({
         {visible.length > 0 && (
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              'size-[14px] text-[var(--text-icon)] transition-transform duration-150',
               !expanded && '-rotate-90'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle.tsx
index 524db557c01..bacf2c96139 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-panel-toggle.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { Button, Tooltip } from '@/components/emcn'
-import { PanelLeft } from '@/components/emcn/icons'
+import { PanelRight } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import {
   RESOURCE_TAB_ICON_BUTTON_CLASS,
@@ -46,7 +46,7 @@ export function ResourcePanelToggle({
       aria-label={isCollapsed ? 'Expand resource view' : 'Collapse resource view'}
       className={cn(RESOURCE_TAB_ICON_BUTTON_CLASS, placeholder && 'invisible', className)}
     >
-      <PanelLeft className={cn(RESOURCE_TAB_ICON_CLASS, '-scale-x-100')} />
+      <PanelRight className={RESOURCE_TAB_ICON_CLASS} />
     </Button>
   )
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 4688d7c0290..f341d1ec5ac 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -686,7 +686,7 @@ export function ResourceTabs({
                 )}
               >
                 +{overflowTabs.length}
-                <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+                <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
               </button>
             </PopoverAnchor>
             {/* Anchored 6px below the 44px bar, matching the chat switcher.
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
index 95be7793ae5..72844427ef3 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
@@ -1,8 +1,16 @@
 'use client'
 
 import { useCallback, useRef, useState } from 'react'
-import { ArrowUp, ChevronDown, ChevronRight, Paperclip, Pencil, Trash2, X } from 'lucide-react'
 import { Tooltip } from '@/components/emcn'
+import {
+  ArrowUp,
+  ChevronDown,
+  ChevronRight,
+  Paperclip,
+  Pencil,
+  Trash2,
+  X,
+} from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { UserMessageContent } from '@/app/workspace/[workspaceId]/home/components/user-message-content'
 import type { QueuedMessage } from '@/app/workspace/[workspaceId]/home/types'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
index 43f08589dde..9c81bcb721d 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/suggested-actions/suggested-actions.tsx
@@ -4,14 +4,8 @@ import { type ComponentType, type CSSProperties, useMemo, useState } from 'react
 import { stripVersionSuffix } from '@sim/utils/string'
 import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
-import {
-  ArrowRight,
-  ChevronDown,
-  chipVariants,
-  Expandable,
-  ExpandableContent,
-} from '@/components/emcn'
-import { Shuffle, Table } from '@/components/emcn/icons'
+import { ChevronDown, chipVariants, Expandable, ExpandableContent } from '@/components/emcn'
+import { ArrowRight2, Shuffle, Table } from '@/components/emcn/icons'
 import { GmailIcon, SlackIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
 import {
@@ -385,7 +379,7 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
           <span className='text-[var(--text-muted)] text-small'>Suggested actions</span>
           <ChevronDown
             className={cn(
-              'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
+              'size-[14px] text-[var(--text-icon)] transition-transform duration-150',
               !expanded && '-rotate-90'
             )}
           />
@@ -428,7 +422,7 @@ export function SuggestedActions({ onSelectPrompt }: SuggestedActionsProps) {
                   <span className='flex-1 truncate text-[var(--text-body)] text-sm'>
                     {action.label}
                   </span>
-                  <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+                  <ArrowRight2 className='size-[16px] shrink-0 text-[var(--text-icon)]' />
                 </button>
               )
             })}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx
index 36690900b35..b0e83793c53 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list/attached-files-list.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import React from 'react'
-import { X } from 'lucide-react'
 import { Loader, Tooltip } from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import type { AttachedFile } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button.tsx
index 3eedfd22d3f..f6ad81a75dd 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/send-button/send-button.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import React from 'react'
-import { ArrowUp, Button } from '@/components/emcn'
+import { Button } from '@/components/emcn'
+import { ArrowUp2 } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import {
   SEND_BUTTON_ACTIVE,
@@ -47,7 +48,7 @@ export const SendButton = React.memo(function SendButton({
       disabled={!canSubmit}
       className={cn(SEND_BUTTON_BASE, canSubmit ? SEND_BUTTON_ACTIVE : SEND_BUTTON_DISABLED)}
     >
-      <ArrowUp className='block h-[16px] w-[16px] text-white dark:text-black' />
+      <ArrowUp2 className='block h-[16px] w-[16px] text-white dark:text-black' />
     </Button>
   )
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
index 6e0da9b5413..1ed66f69f24 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { ArrowLeft, ArrowRight, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { Chip, ChipDropdown, ChipLink } from '@/components/emcn'
+import { ArrowLeft, ArrowRight, Plus } from '@/components/emcn/icons'
 import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
 import { cn } from '@/lib/core/utils/cn'
 import {
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx
index 6e880a319e5..e3c81dab506 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/showcase-with-explore/showcase-with-explore.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { ArrowRight } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { Chip } from '@/components/emcn'
+import { ArrowRight } from '@/components/emcn/icons'
 import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
 import { IntegrationsShowcase } from '@/app/workspace/[workspaceId]/integrations/components/integrations-showcase'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
index fc2ccf2b660..ee854862bae 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/integrations.tsx
@@ -270,7 +270,7 @@ export function Integrations() {
                       ? selectedCategory
                       : formatIntegrationType(selectedCategory)}
                   </span>
-                  <ChevronDown className='h-[7px] w-[9px] text-[var(--text-icon)]' />
+                  <ChevronDown className='size-[14px] text-[var(--text-icon)]' />
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align='end' className='min-w-[160px]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
index bdb10d9a224..449ffb5af99 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -2,7 +2,6 @@
 
 import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ChevronDown, ChevronUp, FileText, Pencil, Tag } from 'lucide-react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import {
   Badge,
@@ -14,7 +13,14 @@ import {
   ChipModalHeader,
   Trash,
 } from '@/components/emcn'
-import { Database } from '@/components/emcn/icons'
+import {
+  ChevronDown,
+  ChevronUp,
+  Database,
+  FileText,
+  Pencil,
+  TagIcon,
+} from '@/components/emcn/icons'
 import { SearchHighlight } from '@/components/ui/search-highlight'
 import type { ChunkData } from '@/lib/knowledge/types'
 import { formatTokenCount } from '@/lib/tokenization'
@@ -497,7 +503,7 @@ export function Document({
                 ...(userPermissions.canEdit
                   ? [
                       { label: 'Rename', icon: Pencil, onClick: handleStartDocRename },
-                      { label: 'Tags', icon: Tag, onClick: handleShowTags },
+                      { label: 'Tags', icon: TagIcon, onClick: handleShowTags },
                       { label: 'Delete', icon: Trash, onClick: handleShowDeleteDoc },
                     ]
                   : []),
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
index 24a46713d03..707f7ce2684 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -5,7 +5,6 @@ import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
 import { format } from 'date-fns'
-import { AlertCircle, Pencil, Plus, Tag, X } from 'lucide-react'
 import { useParams, usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import {
@@ -25,7 +24,7 @@ import {
   Tooltip,
   Trash,
 } from '@/components/emcn'
-import { Database, DatabaseX } from '@/components/emcn/icons'
+import { CircleAlert, Database, DatabaseX, Pencil, Plus, TagIcon, X } from '@/components/emcn/icons'
 import { SearchHighlight } from '@/components/ui/search-highlight'
 import { cn } from '@/lib/core/utils/cn'
 import { ADD_CONNECTOR_SEARCH_PARAM } from '@/lib/credentials/client-state'
@@ -129,7 +128,7 @@ const getStatusBadge = (doc: DocumentData) => {
       )
     case 'failed':
       return doc.processingError ? (
-        <Badge variant='red' size='sm' icon={AlertCircle}>
+        <Badge variant='red' size='sm' icon={CircleAlert}>
           Failed
         </Badge>
       ) : (
@@ -823,7 +822,7 @@ export function KnowledgeBase({
               },
               {
                 label: 'Tags',
-                icon: Tag,
+                icon: TagIcon,
                 disabled: !userPermissions.canEdit,
                 onClick: () => setShowTagsModal(true),
               },
@@ -1555,7 +1554,7 @@ function TagFilterValueControl({ entry, onChange }: TagFilterValueControlProps)
 }
 
 /**
- * Tag filter section rendered inside the combined filter popover.
+ * TagIcon filter section rendered inside the combined filter popover.
  */
 function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectionProps) {
   const activeCount = entries.filter((f) => f.tagSlot && f.value.trim()).length
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
index f82e10a7ea8..56ebce0548c 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
@@ -1,6 +1,6 @@
 import { domAnimation, LazyMotion, m } from 'framer-motion'
-import { Circle, CircleOff } from 'lucide-react'
 import { Button, Tooltip, Trash2 } from '@/components/emcn'
+import { Circle, CircleOff } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
index 286502d5507..c037a9dcb32 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import { ArrowLeft, ArrowLeftRight, Info, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   ArrowRight,
@@ -21,6 +20,7 @@ import {
   Search,
   Tooltip,
 } from '@/components/emcn'
+import { ArrowLeft, ArrowLeftRight, Info, Plus } from '@/components/emcn/icons'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
index 3b66cf55c16..20b41e70eea 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -2,7 +2,6 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { RotateCcw, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Button,
@@ -16,6 +15,7 @@ import {
   Label,
   Loader,
 } from '@/components/emcn'
+import { RotateCcw, X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { formatFileSize, validateKnowledgeBaseFile } from '@/lib/uploads/utils/file-utils'
 import { ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
index a50f6d9875f..2717420971e 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
@@ -3,18 +3,6 @@
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { format, formatDistanceToNow, isPast } from 'date-fns'
-import {
-  AlertCircle,
-  AlertTriangle,
-  CheckCircle2,
-  ChevronDown,
-  Pause,
-  Play,
-  RefreshCw,
-  Settings,
-  Trash,
-  XCircle,
-} from 'lucide-react'
 import {
   Badge,
   Button,
@@ -28,6 +16,18 @@ import {
   Skeleton,
   Tooltip,
 } from '@/components/emcn'
+import {
+  ChevronDown,
+  CircleAlert,
+  CircleCheck,
+  Pause,
+  Play,
+  RefreshCw,
+  Settings,
+  Trash,
+  TriangleAlert,
+  XCircle,
+} from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { consumeOAuthReturnContext, writeOAuthReturnContext } from '@/lib/credentials/client-state'
 import { getCanonicalScopesForProvider, getProviderIdFromServiceId } from '@/lib/oauth'
@@ -388,7 +388,7 @@ function ConnectorCard({
               )}
             </div>
             {connector.status === 'disabled' && (
-              <AlertTriangle className='-right-0.5 -top-0.5 absolute size-3 text-[var(--caution)]' />
+              <TriangleAlert className='-right-0.5 -top-0.5 absolute size-3 text-[var(--caution)]' />
             )}
           </div>
           <div className='flex min-w-0 flex-col gap-0.5'>
@@ -427,7 +427,7 @@ function ConnectorCard({
               {connector.lastSyncError && (
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <AlertCircle className='size-3 text-[var(--text-error)]' />
+                    <CircleAlert className='size-3 text-[var(--text-error)]' />
                   </Tooltip.Trigger>
                   <Tooltip.Content>{connector.lastSyncError}</Tooltip.Content>
                 </Tooltip.Root>
@@ -535,7 +535,7 @@ function ConnectorCard({
         <div className='border-[var(--border-muted)] border-t px-2 py-2'>
           <div className='flex flex-col gap-2 rounded-md border border-[var(--border-muted)] bg-[var(--surface-3)] px-2.5 py-2'>
             <div className='flex items-center gap-1.5 font-medium text-[var(--text-primary)] text-caption'>
-              <AlertTriangle className='size-3 flex-shrink-0 text-[var(--caution)]' />
+              <TriangleAlert className='size-3 flex-shrink-0 text-[var(--caution)]' />
               Connector disabled after repeated sync failures
             </div>
             <p className='text-[var(--text-muted)] text-caption leading-snug'>
@@ -690,7 +690,7 @@ function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
               ) : isError ? (
                 <XCircle className='size-3 text-[var(--text-error)]' />
               ) : (
-                <CheckCircle2 className='size-3 text-[var(--success)]' />
+                <CircleCheck className='size-3 text-[var(--success)]' />
               )}
             </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
index 39677d94434..c8d63dcd97a 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
@@ -2,7 +2,6 @@
 
 import { useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowLeftRight, ExternalLink, Info, RotateCcw } from 'lucide-react'
 import {
   Button,
   ButtonGroup,
@@ -19,6 +18,7 @@ import {
   Skeleton,
   Tooltip,
 } from '@/components/emcn'
+import { ArrowLeftRight, ExternalLink, Info, RotateCcw } from '@/components/emcn/icons'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
 import { ConnectorSelectorField } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/connector-selector-field'
 import { SYNC_INTERVALS } from '@/app/workspace/[workspaceId]/knowledge/[id]/components/consts'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
index 12d5cd7205f..581285798cf 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
@@ -4,7 +4,6 @@ import { memo, useEffect, useRef, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { RotateCcw, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -25,6 +24,7 @@ import {
   Label,
   Loader,
 } from '@/components/emcn'
+import { RotateCcw, X } from '@/components/emcn/icons'
 import type { StrategyOptions } from '@/lib/chunkers/types'
 import { cn } from '@/lib/core/utils/cn'
 import { formatFileSize, validateKnowledgeBaseFile } from '@/lib/uploads/utils/file-utils'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
index 7d1e623ee1d..0b1938dde58 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { AlertTriangle, LibraryBig, MoreHorizontal } from 'lucide-react'
 import Link from 'next/link'
 import {
   Button,
@@ -13,7 +12,7 @@ import {
   DropdownMenuTrigger,
   Tooltip,
 } from '@/components/emcn'
-import { ChevronDown } from '@/components/emcn/icons'
+import { ChevronDown, LibraryBig, MoreHorizontal, TriangleAlert } from '@/components/emcn/icons'
 import { Trash } from '@/components/emcn/icons/trash'
 import { filterButtonClass } from '@/app/workspace/[workspaceId]/knowledge/components/constants'
 import { useUpdateKnowledgeBase } from '@/hooks/queries/kb/knowledge'
@@ -123,7 +122,7 @@ export function KnowledgeHeader({ breadcrumbs, options }: KnowledgeHeaderProps)
               {!hasWorkspace && (
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <AlertTriangle className='size-4 text-amber-500' />
+                    <TriangleAlert className='size-4 text-amber-500' />
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top'>Not assigned to workspace</Tooltip.Content>
                 </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
index 64169b66793..03c9783c687 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
@@ -2,7 +2,6 @@
 
 import type React from 'react'
 import { useRef, useState } from 'react'
-import { AlertCircle } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
   DropdownMenu,
@@ -17,6 +16,7 @@ import {
   ModalDescription,
   ModalHeader,
 } from '@/components/emcn'
+import { CircleAlert } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { Preview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useExecutionSnapshot } from '@/hooks/queries/logs'
@@ -110,7 +110,7 @@ export function ExecutionSnapshot({
           style={{ height, width }}
         >
           <div className='flex items-center gap-2 text-[var(--text-error)]'>
-            <AlertCircle className='size-[16px]' />
+            <CircleAlert className='size-[16px]' />
             <span className='text-small'>Failed to load run snapshot: {error.message}</span>
           </div>
         </div>
@@ -138,7 +138,7 @@ export function ExecutionSnapshot({
           style={{ height, width }}
         >
           <div className='flex items-center gap-3 text-[var(--text-warning)]'>
-            <AlertCircle className='size-[20px]' />
+            <CircleAlert className='size-[20px]' />
             <span className='font-medium text-base'>Logged State Not Found</span>
           </div>
           <div className='max-w-md text-center text-[var(--text-secondary)] text-small'>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
index 0a90434e568..b056473f897 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
@@ -3,16 +3,6 @@
 import type React from 'react'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { formatDuration } from '@sim/utils/formatting'
-import {
-  ArrowDown,
-  ArrowUp,
-  Check,
-  ChevronsDownUp,
-  ChevronsUpDown,
-  Clipboard,
-  Search,
-  X,
-} from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
   Badge,
@@ -29,6 +19,16 @@ import {
   Search as SearchIcon,
   Tooltip,
 } from '@/components/emcn'
+import {
+  ArrowDown,
+  ArrowUp,
+  Check,
+  ChevronsDownUp,
+  ChevronsUpDown,
+  Clipboard,
+  Search,
+  X,
+} from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { TraceSpan } from '@/lib/logs/types'
 import {
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index 271e07ac503..a83bae5e3ce 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -2,7 +2,6 @@
 
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { formatDuration } from '@sim/utils/formatting'
-import { ArrowDown, ArrowUp, Check, ChevronUp, Clipboard, Search, X } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
   Button,
@@ -20,7 +19,16 @@ import {
   Search as SearchIcon,
   Tooltip,
 } from '@/components/emcn'
-import { Workflow } from '@/components/emcn/icons'
+import {
+  ArrowDown,
+  ArrowUp,
+  Check,
+  ChevronUp,
+  Clipboard,
+  Search,
+  Workflow,
+  X,
+} from '@/components/emcn/icons'
 import type { WorkflowLogRow } from '@/lib/api/contracts/logs'
 import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
 import { apportionCredits, dollarsToCredits } from '@/lib/billing/credits/conversion'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx
index 7010954417d..82d2bae0cd3 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx
@@ -3,8 +3,8 @@
 import { useCallback, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { Hash, Lock } from 'lucide-react'
 import { ChipCombobox, type ComboboxOption } from '@/components/emcn'
+import { Hash, Lock } from '@/components/emcn/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { slackChannelsSelectorContract } from '@/lib/api/contracts'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx
index 239f80572de..91febcbf013 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useMemo } from 'react'
-import { X } from 'lucide-react'
 import { Badge, ChipCombobox, type ComboboxOption, Label, Skeleton } from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
 import { useWorkflows } from '@/hooks/queries/workflows'
 
 interface WorkflowSelectorProps {
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
index 841354ca37a..673186b1ba6 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
@@ -4,7 +4,6 @@ import type { ReactNode } from 'react'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { Plus, X } from 'lucide-react'
 import {
   Badge,
   Button,
@@ -21,6 +20,7 @@ import {
   TagInput,
   type TagItem,
 } from '@/components/emcn'
+import { Plus, X } from '@/components/emcn/icons'
 import { SlackIcon } from '@/components/icons'
 import type {
   NotificationAlertRule,
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
index 55b8c9fef3f..7313602f4ec 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
@@ -2,9 +2,9 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { Search, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Badge, Button } from '@/components/emcn'
+import { Search, X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { getTriggerOptions } from '@/lib/logs/get-trigger-options'
 import { type ParsedFilter, parseQuery } from '@/lib/logs/query-parser'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
index d16921f748c..1f4f7ec56c6 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
-import { ArrowUp, Bell, Library, MoreHorizontal, RefreshCw } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
@@ -16,7 +15,14 @@ import {
   DropdownMenuTrigger,
   Loader,
 } from '@/components/emcn'
-import { Workflow } from '@/components/emcn/icons'
+import {
+  ArrowUp,
+  Bell,
+  Library,
+  MoreHorizontal,
+  RefreshCw,
+  Workflow,
+} from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { hasActiveFilters } from '@/lib/logs/filters'
 import { getTriggerOptions } from '@/lib/logs/get-trigger-options'
diff --git a/apps/sim/app/workspace/[workspaceId]/not-found.tsx b/apps/sim/app/workspace/[workspaceId]/not-found.tsx
index ed65206a744..fe0c7e36251 100644
--- a/apps/sim/app/workspace/[workspaceId]/not-found.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/not-found.tsx
@@ -1,10 +1,9 @@
 'use client'
 
-import { Compass } from 'lucide-react'
 import Link from 'next/link'
 import { useParams, useRouter } from 'next/navigation'
 import { Button, buttonVariants } from '@/components/emcn'
-import { ArrowLeft, Home } from '@/components/emcn/icons'
+import { ArrowLeft, Compass, Home } from '@/components/emcn/icons'
 import { ErrorShell } from '@/app/workspace/[workspaceId]/components'
 
 export default function WorkspaceNotFound() {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index 27205e91dfe..e7e7dab2c24 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -2,7 +2,6 @@
 
 import { useCallback, useMemo, useState } from 'react'
 import { getErrorMessage } from '@sim/utils/errors'
-import { WrenchIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
@@ -14,6 +13,7 @@ import {
   Search,
   Switch,
 } from '@/components/emcn'
+import { Wrench } from '@/components/emcn/icons'
 import { AgentSkillsIcon, McpIcon } from '@/components/icons'
 import type { MothershipEnvironment, MothershipSettings } from '@/lib/api/contracts'
 import { useSession } from '@/lib/auth/auth-client'
@@ -203,7 +203,7 @@ export function Admin() {
           return {
             label: tool.title,
             value,
-            icon: WrenchIcon,
+            icon: Wrench,
           }
         }),
       })
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index c581cb75389..9b3fefc6d82 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -3,7 +3,6 @@
 import { useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { formatDate } from '@sim/utils/formatting'
-import { Info, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Chip,
@@ -16,6 +15,7 @@ import {
   Switch,
   Tooltip,
 } from '@/components/emcn'
+import { Info, Plus } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
index 388cfab9043..3230b890529 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
@@ -3,7 +3,6 @@
 import { useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { Eye, EyeOff } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Button,
@@ -17,6 +16,7 @@ import {
   ChipModalHeader,
   Search,
 } from '@/components/emcn'
+import { Eye, EyeOff } from '@/components/emcn/icons'
 import {
   AnthropicIcon,
   BasetenIcon,
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
index 2c96f665267..d8afa179153 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -4,7 +4,6 @@ import { useMemo, useState } from 'react'
 // import { useParams } from 'next/navigation'
 import { createLogger } from '@sim/logger'
 import { formatDate } from '@sim/utils/formatting'
-import { Plus } from 'lucide-react'
 import {
   Chip,
   ChipInput,
@@ -18,6 +17,7 @@ import {
   SecretReveal,
   // Switch,
 } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 // import { useMcpServers, useUpdateMcpServer } from '@/hooks/queries/mcp'
 import {
   type CopilotKey,
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
index a09f15b35f2..bcd92b94ac2 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
@@ -2,7 +2,6 @@
 
 import { useCallback, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Plus } from 'lucide-react'
 import {
   Avatar,
   AvatarFallback,
@@ -23,7 +22,7 @@ import {
   TagInput,
   type TagItem,
 } from '@/components/emcn'
-import { ArrowLeft } from '@/components/emcn/icons'
+import { ArrowLeft, Plus } from '@/components/emcn/icons'
 import { GmailIcon, OutlookIcon } from '@/components/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
index d5645cf7100..b6e9399e363 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
@@ -3,7 +3,6 @@
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Chip,
@@ -14,6 +13,7 @@ import {
   ChipModalHeader,
   Search,
 } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 import { CustomToolModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal'
 import { useCustomTools, useDeleteCustomTool } from '@/hooks/queries/custom-tools'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index e66e95b144c..732aee25dae 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -2,7 +2,6 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Camera, Check, Info, Pencil } from 'lucide-react'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import {
@@ -19,6 +18,7 @@ import {
   Switch,
   Tooltip,
 } from '@/components/emcn'
+import { Camera, Check, Info, Pencil } from '@/components/emcn/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { telemetryContract } from '@/lib/api/contracts/telemetry'
 import { signOut, useSession } from '@/lib/auth/auth-client'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
index 7954a229ab1..a70eeeeab8e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-settings-tab/inbox-settings-tab.tsx
@@ -2,7 +2,6 @@
 
 import { useCallback, useState } from 'react'
 import { getErrorMessage } from '@sim/utils/errors'
-import { Check, Clipboard, Pencil, Plus, Trash2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
@@ -16,6 +15,7 @@ import {
   ChipModalHeader,
   Tooltip,
 } from '@/components/emcn'
+import { Check, Clipboard, Pencil, Plus, Trash2 } from '@/components/emcn/icons'
 import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section'
 import {
   useAddInboxSender,
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
index 7f87e271258..031b34801b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/components/inbox-task-list/inbox-task-list.tsx
@@ -2,9 +2,9 @@
 
 import { useCallback, useMemo, useState } from 'react'
 import { formatRelativeTime } from '@sim/utils/formatting'
-import { ArrowRight, Paperclip } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { Badge, ChipInput, ChipSelect, Search } from '@/components/emcn'
+import { ArrowRight, Paperclip } from '@/components/emcn/icons'
 import type { InboxTaskItem } from '@/hooks/queries/inbox'
 import { useInboxConfig, useInboxTasks } from '@/hooks/queries/inbox'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
index 83cffbf0979..46c6476a4f4 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { ArrowRight } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { Chip } from '@/components/emcn'
+import { ArrowRight } from '@/components/emcn/icons'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
 import {
   InboxEnableToggle,
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
index 07de4f49e02..7e677fec6cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { ChevronDown, ChevronRight } from 'lucide-react'
 import {
   Button,
   Chip,
@@ -15,6 +14,7 @@ import {
   ChipTextarea,
   SecretInput,
 } from '@/components/emcn'
+import { ChevronDown, ChevronRight } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { McpAuthType, McpTransport } from '@/lib/mcp/types'
 import {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
index 855d85731e0..393fef23751 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { ChevronDown, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
@@ -17,7 +16,7 @@ import {
   Search,
   Tooltip,
 } from '@/components/emcn'
-import { ArrowLeft } from '@/components/emcn/icons'
+import { ArrowLeft, ChevronDown, Plus } from '@/components/emcn/icons'
 import { requestJson } from '@/lib/api/client/request'
 import { getWorkflowStateContract } from '@/lib/api/contracts/workflows'
 import { cn } from '@/lib/core/utils/cn'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index 10c2ac731ac..bb7b9ac91ba 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -3,7 +3,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { Check, Clipboard, Plus, Server } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
@@ -25,7 +24,7 @@ import {
   Label,
   Tooltip,
 } from '@/components/emcn'
-import { ArrowLeft, Search } from '@/components/emcn/icons'
+import { ArrowLeft, Check, Clipboard, Plus, Search, Server } from '@/components/emcn/icons'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { CreateWorkflowMcpServerModal } from '@/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/components'
diff --git a/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx b/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
index 9834538adcf..64ba1aa43e1 100644
--- a/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/skills/skills.tsx
@@ -3,7 +3,6 @@
 import { useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { ArrowRight, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Chip,
@@ -14,6 +13,7 @@ import {
   ChipModalHeader,
   Search,
 } from '@/components/emcn'
+import { ArrowRight, Plus } from '@/components/emcn/icons'
 import { AgentSkillsIcon } from '@/components/icons'
 import { IntegrationTabsHeader } from '@/app/workspace/[workspaceId]/integrations/components/integration-tabs-header'
 import { ShowcaseWithExplore } from '@/app/workspace/[workspaceId]/integrations/components/showcase-with-explore'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
index a33dbbffde7..dcc28780267 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/column-config-sidebar/column-config-sidebar.tsx
@@ -3,8 +3,8 @@
 import type React from 'react'
 import { useState } from 'react'
 import { toError } from '@sim/utils/errors'
-import { X } from 'lucide-react'
 import { Button, ChipCombobox, FieldDivider, Input, Label, Switch, toast } from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
 import { cn } from '@/lib/core/utils/cn'
 import type { ColumnDefinition } from '@/lib/table'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx
index 045e44390f2..8fbcf499897 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { Sparkles } from 'lucide-react'
 import {
   Button,
   DropdownMenu,
@@ -9,7 +8,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { Plus } from '@/components/emcn/icons'
+import { Plus, Sparkles } from '@/components/emcn/icons'
 import { isWorkflowColumnsEnabledClient } from '@/lib/core/config/feature-flags'
 import type { ColumnDefinition } from '@/lib/table'
 import { COLUMN_TYPE_OPTIONS } from '../column-config-sidebar'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index 58c57bfe23f..3b4a2777950 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -2,7 +2,6 @@
 
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
 import { generateShortId } from '@sim/utils/id'
-import { X } from 'lucide-react'
 import {
   Button,
   DropdownMenu,
@@ -10,7 +9,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/emcn'
-import { ChevronDown, Plus } from '@/components/emcn/icons'
+import { ChevronDown, Plus, X } from '@/components/emcn/icons'
 import type { Filter, FilterRule } from '@/lib/table'
 import { COMPARISON_OPERATORS, VALUELESS_OPERATORS } from '@/lib/table/query-builder/constants'
 import { filterRulesToFilter, filterToRules } from '@/lib/table/query-builder/converters'
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-find.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-find.tsx
index ade072a6784..d5ef25dd21d 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-find.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-find.tsx
@@ -1,9 +1,8 @@
 'use client'
 
 import type React from 'react'
-import { ChevronDown, ChevronUp } from 'lucide-react'
 import { Button, Input } from '@/components/emcn'
-import { Loader, X } from '@/components/emcn/icons'
+import { ChevronDown, ChevronUp, Loader, X } from '@/components/emcn/icons'
 
 export interface TableFindProps {
   query: string
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index c310aadbb63..b2cd2dc2120 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -5,7 +5,6 @@ import { useMemo, useState } from 'react'
 import { toError } from '@sim/utils/errors'
 import { generateId } from '@sim/utils/id'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { ExternalLink, RepeatIcon, SplitIcon, X } from 'lucide-react'
 import {
   Button,
   ButtonGroup,
@@ -20,7 +19,7 @@ import {
   Tooltip,
   toast,
 } from '@/components/emcn'
-import { ArrowLeft, ChevronDown } from '@/components/emcn/icons'
+import { ArrowLeft, ChevronDown, ExternalLink, Repeat, Split, X } from '@/components/emcn/icons'
 import { findValidationIssue, isValidationError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import type {
@@ -488,8 +487,8 @@ export function WorkflowSidebarBody({
           .charAt(0)
           .toUpperCase()
         if (blockConfig?.icon) blockIcon = blockConfig.icon
-        else if (f.blockType === 'loop') blockIcon = RepeatIcon
-        else if (f.blockType === 'parallel') blockIcon = SplitIcon
+        else if (f.blockType === 'loop') blockIcon = Repeat
+        else if (f.blockType === 'parallel') blockIcon = Split
         group = {
           blockId: f.blockId,
           blockName: f.blockName,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index 37b9f8c145f..156d7a7f0c3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -1,7 +1,15 @@
 import { memo, useCallback } from 'react'
-import { ArrowLeftRight, ArrowUpDown, Circle, CircleOff, Lock, LogOut, Unlock } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
 import { Button, Duplicate, PlayOutline, Tooltip, Trash2, toast } from '@/components/emcn'
+import {
+  ArrowLeftRight,
+  ArrowUpDown,
+  Circle,
+  CircleOff,
+  Lock,
+  LogOut,
+  Unlock,
+} from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { isInputDefinitionTrigger } from '@/lib/workflows/triggers/input-definition-triggers'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index 588ff6da5cc..8f06fcdc9d1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -3,7 +3,6 @@
 import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
-import { AlertCircle, ArrowUp, MoreVertical, Paperclip, Square, X } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
 import {
   Badge,
@@ -17,7 +16,15 @@ import {
   Tooltip,
   Trash,
 } from '@/components/emcn'
-import { Download } from '@/components/emcn/icons'
+import {
+  ArrowUp2,
+  CircleAlert,
+  Download,
+  MoreVertical,
+  Paperclip,
+  Square,
+  X,
+} from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import {
@@ -1033,7 +1040,7 @@ export function Chat() {
             <div>
               <div className='rounded-lg border border-[var(--terminal-status-error-border)] bg-[var(--terminal-status-error-bg)]'>
                 <div className='flex items-start gap-2'>
-                  <AlertCircle className='mt-0.5 size-3 shrink-0 text-[var(--text-error)]' />
+                  <CircleAlert className='mt-0.5 size-3 shrink-0 text-[var(--text-error)]' />
                   <div className='flex-1'>
                     <div className='mb-1 font-medium text-[var(--text-error)] text-caption'>
                       File upload error
@@ -1164,7 +1171,7 @@ export function Chat() {
                         : 'bg-[#808080] dark:bg-[#808080]'
                     )}
                   >
-                    <ArrowUp
+                    <ArrowUp2
                       className='h-3.5 w-3.5 text-white dark:text-black'
                       strokeWidth={2.25}
                     />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
index fb8d6b8e609..71f141a60a9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -2,9 +2,9 @@
 
 import type React from 'react'
 import { useMemo } from 'react'
-import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
 import { Combobox, type ComboboxOptionGroup } from '@/components/emcn'
+import { Repeat, Split } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import {
   type FlattenOutputsBlockInput,
@@ -263,9 +263,9 @@ export function OutputSelect({
       if (blockConfig?.icon) {
         blockIcon = blockConfig.icon
       } else if (firstOutput.blockType === 'loop') {
-        blockIcon = RepeatIcon
+        blockIcon = Repeat
       } else if (firstOutput.blockType === 'parallel') {
-        blockIcon = SplitIcon
+        blockIcon = Split
       }
 
       return {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index 6b53eab1f3b..45b9f582154 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -2,10 +2,10 @@
 
 import { useCallback } from 'react'
 import { createLogger } from '@sim/logger'
-import { Search } from 'lucide-react'
 import Image from 'next/image'
 import { useParams, useRouter } from 'next/navigation'
 import { Button, Library } from '@/components/emcn'
+import { Search } from '@/components/emcn/icons'
 import { AgentIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
@@ -20,7 +20,7 @@ const logger = createLogger('WorkflowCommandList')
 interface CommandItem {
   /** Display label for the command */
   label: string
-  /** Icon component from lucide-react */
+  /** Icon component from @/components/emcn/icons */
   icon: React.ComponentType<{ className?: string }>
   /** Keyboard shortcut keys (can be single or array for multiple keys) */
   shortcut: string | string[]
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
index 3013f2356fe..691db34e315 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
@@ -2,9 +2,9 @@
 
 import { Component, type ReactNode, useEffect } from 'react'
 import { createLogger } from '@sim/logger'
-import { RefreshCw } from 'lucide-react'
 import { ReactFlowProvider } from 'reactflow'
 import { Button } from '@/components/emcn'
+import { RefreshCw } from '@/components/emcn/icons'
 import { Panel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
 import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
index 90c3222cf4c..936a74b6775 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
-import { Check, Clipboard } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Button,
@@ -19,6 +18,7 @@ import {
   Textarea,
   Tooltip,
 } from '@/components/emcn'
+import { Check, Clipboard } from '@/components/emcn/icons'
 import type { AgentAuthentication, AgentCapabilities } from '@/lib/a2a/types'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { normalizeInputFormatValue } from '@/lib/workflows/input-format'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
index d79cee99f51..1ff43f2d55e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useState } from 'react'
-import { Check, Clipboard } from 'lucide-react'
 import {
   Button,
   ButtonGroup,
@@ -12,6 +11,7 @@ import {
   Skeleton,
   Tooltip,
 } from '@/components/emcn'
+import { Check, Clipboard } from '@/components/emcn/icons'
 import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
 
 interface WorkflowDeploymentInfo {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
index 5453db52424..8351f5b697d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { AlertTriangle, Check, Clipboard, Eye, EyeOff, RefreshCw } from 'lucide-react'
 import {
   Button,
   ButtonGroup,
@@ -23,6 +22,7 @@ import {
   Textarea,
   Tooltip,
 } from '@/components/emcn'
+import { Check, Clipboard, Eye, EyeOff, RefreshCw, TriangleAlert } from '@/components/emcn/icons'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { generatePassword } from '@/lib/core/security/encryption'
 import { cn } from '@/lib/core/utils/cn'
@@ -318,7 +318,7 @@ export function ChatDeploy({
       >
         {errors.general && (
           <div className='flex items-center gap-2 rounded-md border border-[color-mix(in_srgb,var(--text-error)_20%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-3 py-2 text-[var(--text-error)] text-small'>
-            <AlertTriangle className='size-4 flex-shrink-0' />
+            <TriangleAlert className='size-4 flex-shrink-0' />
             <span>{errors.general}</span>
           </div>
         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index eee59c4ece7..f0589b5702a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -2,7 +2,6 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { formatDateTime } from '@sim/utils/formatting'
-import { FileText, MoreVertical, Pencil, RotateCcw, SendToBack } from 'lucide-react'
 import {
   Button,
   Input,
@@ -13,6 +12,7 @@ import {
   Skeleton,
   Tooltip,
 } from '@/components/emcn'
+import { FileText, MoreVertical, Pencil, RotateCcw, SendToBack } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
 import { useUpdateDeploymentVersion } from '@/hooks/queries/deployments'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
index 413df1010c6..cc5a942d042 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
@@ -3,8 +3,8 @@
 import { useCallback } from 'react'
 import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
-import { ChevronDown } from 'lucide-react'
 import { Badge } from '@/components/emcn'
+import { ChevronDown } from '@/components/emcn/icons'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import type { ConnectedBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
index 9eda8e6930e..430fc375198 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -3,9 +3,9 @@
 import { useCallback, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
-import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
 import { ChevronDown } from '@/components/emcn'
+import { Repeat, Split } from '@/components/emcn/icons'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import {
   FieldItem,
@@ -117,10 +117,10 @@ function ConnectionItem({
 
   if (!blockConfig) {
     if (connection.type === 'loop') {
-      Icon = RepeatIcon as typeof Icon
+      Icon = Repeat as typeof Icon
       bgColor = '#2FB3FF'
     } else if (connection.type === 'parallel') {
-      Icon = SplitIcon as typeof Icon
+      Icon = Split as typeof Icon
       bgColor = '#FEE12B'
     }
   }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/checkbox-list/checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/checkbox-list/checkbox-list.tsx
index 401ee1f57a1..18597e7e601 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/checkbox-list/checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/checkbox-list/checkbox-list.tsx
@@ -1,5 +1,5 @@
-import { Info } from 'lucide-react'
 import { Checkbox, Label, Tooltip } from '@/components/emcn'
+import { Info } from '@/components/emcn/icons'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index dde99273492..1d4499cbb9a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react'
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { Check, Wand2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { Check, Wand2 } from '@/components/emcn/icons'
 import 'prismjs/components/prism-python'
 import { createLogger } from '@sim/logger'
 import Editor from 'react-simple-code-editor'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index edcebec5324..5aea0272250 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -1,7 +1,6 @@
 import type { ReactElement } from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ChevronDown, ChevronsUpDown, ChevronUp, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import Editor from 'react-simple-code-editor'
 import {
@@ -14,6 +13,7 @@ import {
   Textarea,
   Tooltip,
 } from '@/components/emcn'
+import { ChevronDown, ChevronsUpDown, ChevronUp, Plus } from '@/components/emcn/icons'
 import { Trash } from '@/components/emcn/icons/trash'
 import { cn } from '@/lib/core/utils/cn'
 import {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
index efe8ed36480..3bb3ab5fff2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { ExternalLink, KeyRound, Users } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Combobox } from '@/components/emcn/components'
+import { ExternalLink, KeyRound, Users } from '@/components/emcn/icons'
 import { getSubscriptionAccessState } from '@/lib/billing/client'
 import { getPollingProviderFromOAuth } from '@/lib/credential-sets/providers'
 import { consumeOAuthReturnContext, writeOAuthReturnContext } from '@/lib/credentials/client-state'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index 6a6c44acd2e..4a06ae74f12 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -2,7 +2,6 @@
 
 import { useMemo, useRef } from 'react'
 import { generateId } from '@sim/utils/id'
-import { Plus } from 'lucide-react'
 import {
   Badge,
   Button,
@@ -12,6 +11,7 @@ import {
   Label,
   Trash,
 } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { FIELD_TYPE_LABELS, getPlaceholderForFieldType } from '@/lib/knowledge/constants'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx
index b534fc63bed..5801d3f28e0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown/env-var-dropdown.tsx
@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useState } from 'react'
-import { Plus } from 'lucide-react'
 import {
   Popover,
   PopoverAnchor,
@@ -8,6 +7,7 @@ import {
   PopoverScrollArea,
   PopoverSection,
 } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { writePendingCredentialCreateRequest } from '@/lib/credentials/client-state'
 import type { WorkspaceEnvironmentData } from '@/lib/environment/api'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index f088a9ac34e..795c2f67d0c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useRef } from 'react'
 import { generateId } from '@sim/utils/id'
-import { Plus } from 'lucide-react'
 import { Button, Input, Label, Textarea, Tooltip } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 import { Trash } from '@/components/emcn/icons/trash'
 import { cn } from '@/lib/core/utils/cn'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index 3a23ba74e8a..b585e29546c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -6,9 +6,9 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { generateShortId } from '@sim/utils/id'
 import { randomFloat } from '@sim/utils/random'
 import { useQueryClient } from '@tanstack/react-query'
-import { X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Combobox } from '@/components/emcn/components'
+import { X } from '@/components/emcn/icons'
 import { Progress } from '@/components/ui/progress'
 import { isApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
index a8609445c75..9917030b8c0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
@@ -1,5 +1,4 @@
 import { useRef } from 'react'
-import { Plus } from 'lucide-react'
 import {
   Badge,
   Button,
@@ -9,6 +8,7 @@ import {
   Label,
   Trash,
 } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import type { FilterRule } from '@/lib/table/query-builder/constants'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index 0c2f8397cc3..8ab3ec79c36 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { Settings2 } from 'lucide-react'
 import { Button, Checkbox, ChipModal, ChipModalBody, ChipModalHeader } from '@/components/emcn'
+import { Settings2 } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
index 51449de47d4..7d4f479ab9d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
@@ -2,9 +2,9 @@
 
 import { useCallback, useMemo } from 'react'
 import { useQueries } from '@tanstack/react-query'
-import { X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Combobox, type ComboboxOption } from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
 import { PackageSearchIcon } from '@/components/icons'
 import type { KnowledgeBaseData } from '@/lib/knowledge/types'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index d2b4aeb4b17..2d414d94839 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -2,7 +2,6 @@
 
 import { useRef } from 'react'
 import { generateId } from '@sim/utils/id'
-import { Plus } from 'lucide-react'
 import {
   Badge,
   Button,
@@ -12,6 +11,7 @@ import {
   Label,
   Trash,
 } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { FIELD_TYPE_LABELS, getPlaceholderForFieldType } from '@/lib/knowledge/constants'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index a1e35db6103..d2636c7922f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -8,8 +8,8 @@ import {
   useState,
 } from 'react'
 import { createLogger } from '@sim/logger'
-import { ChevronsUpDown, Wand2 } from 'lucide-react'
 import { Textarea } from '@/components/emcn'
+import { ChevronsUpDown, Wand2 } from '@/components/emcn/icons'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/core/utils/cn'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index f170ef8f2f9..dabb11da4b4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -9,8 +9,8 @@ import {
 } from 'react'
 import { generateShortId } from '@sim/utils/id'
 import { isEqual } from 'es-toolkit'
-import { ChevronDown, ChevronsUpDown, ChevronUp, Plus } from 'lucide-react'
 import { Button, Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
+import { ChevronDown, ChevronsUpDown, ChevronUp, Plus } from '@/components/emcn/icons'
 import { Trash } from '@/components/emcn/icons/trash'
 import { cn } from '@/lib/core/utils/cn'
 import { EnvVarDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
index 809a816bad2..686fbb415ed 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
@@ -1,7 +1,7 @@
 import type React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { X } from 'lucide-react'
 import { Button, Combobox as EditableCombobox } from '@/components/emcn/components'
+import { X } from '@/components/emcn/icons'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { SubBlockInputController } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sub-block-input-controller'
 import { getWorkflowSearchLabelHighlight } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-search-highlight'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index e60edda8780..5c5aae218fe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { Wand2 } from 'lucide-react'
 import { useReactFlow } from 'reactflow'
 import { Input } from '@/components/emcn'
+import { Wand2 } from '@/components/emcn/icons'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/core/utils/cn'
 import {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
index ad209d07f42..203a9df0859 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { useCallback, useMemo, useState } from 'react'
-import { Plus, XIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Combobox, type ComboboxOptionGroup } from '@/components/emcn'
+import { Plus, X } from '@/components/emcn/icons'
 import { AgentSkillsIcon } from '@/components/icons'
 import { SkillModal } from '@/app/workspace/[workspaceId]/skills/components/skill-modal'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
@@ -177,7 +177,7 @@ export function SkillInput({
                         className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                         aria-label='Remove skill'
                       >
-                        <XIcon className='size-[13px]' />
+                        <X className='size-[13px]' />
                       </button>
                     )}
                   </div>
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..0ce29305b3c 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
@@ -1,9 +1,9 @@
 'use client'
 
 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 { Check, ChevronRight, Clipboard, Info } from '@/components/emcn/icons'
 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'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
index 7efda864aed..236cea911f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
@@ -1,5 +1,5 @@
-import { Plus } from 'lucide-react'
 import { Badge, Button, Combobox, type ComboboxOption, Label, Trash } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import type { SortRule } from '@/lib/table/query-builder/constants'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 26e2595220f..50623e3bfb6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useRef } from 'react'
 import { generateId } from '@sim/utils/id'
-import { Plus } from 'lucide-react'
+import { Plus } from '@/components/emcn/icons'
 import { Trash } from '@/components/emcn/icons/trash'
 import 'prismjs/components/prism-json'
 import Editor from 'react-simple-code-editor'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
index 142d6805859..b998d7ad8fa 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react'
 import { isEqual } from 'es-toolkit'
-import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 import {
@@ -14,6 +13,7 @@ import {
   PopoverSection,
   usePopoverContext,
 } from '@/components/emcn'
+import { Repeat, Split } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import {
   getEffectiveBlockOutputType,
@@ -1766,9 +1766,9 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                   if (blockConfig?.icon) {
                     tagIcon = blockConfig.icon
                   } else if (group.blockType === 'loop') {
-                    tagIcon = RepeatIcon
+                    tagIcon = Repeat
                   } else if (group.blockType === 'parallel') {
-                    tagIcon = SplitIcon
+                    tagIcon = Split
                   }
 
                   const normalizedBlockName = normalizeName(group.blockName)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
index c96898a6483..1fc3c250a87 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
@@ -1,7 +1,6 @@
 import type { ReactElement } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import 'prismjs/components/prism-json'
-import { Wand2 } from 'lucide-react'
 import Editor from 'react-simple-code-editor'
 import {
   CODE_LINE_HEIGHT_PX,
@@ -11,6 +10,7 @@ import {
   highlight,
   languages,
 } from '@/components/emcn'
+import { Wand2 } from '@/components/emcn/icons'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/core/utils/cn'
 import {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
index 35abcc11476..9dd8a112854 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { AlertCircle, ArrowUp } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
@@ -21,6 +20,7 @@ import {
   PopoverScrollArea,
   PopoverSection,
 } from '@/components/emcn'
+import { ArrowUp, CircleAlert } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import {
   checkEnvVarTrigger,
@@ -854,7 +854,7 @@ try {
                   <Label htmlFor='json-schema'>JSON Schema</Label>
                   {schemaError && (
                     <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-caption'>
-                      <AlertCircle className='size-3 flex-shrink-0' />
+                      <CircleAlert className='size-3 flex-shrink-0' />
                       <span className='truncate'>{schemaError}</span>
                     </div>
                   )}
@@ -946,7 +946,7 @@ try {
                   <Label htmlFor='function-code'>Code</Label>
                   {codeError && !codeGeneration.isStreaming && (
                     <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-caption'>
-                      <AlertCircle className='size-3 flex-shrink-0' />
+                      <CircleAlert className='size-3 flex-shrink-0' />
                       <span className='truncate'>{codeError}</span>
                     </div>
                   )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
index 1d4093bfacf..20ba0ac3f5a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { createElement, useCallback, useMemo, useRef, useState } from 'react'
-import { ExternalLink } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Combobox } from '@/components/emcn/components'
+import { ExternalLink } from '@/components/emcn/icons'
 import { consumeOAuthReturnContext, writeOAuthReturnContext } from '@/lib/credentials/client-state'
 import {
   getCanonicalScopesForProvider,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
index a19a6c56699..61027485377 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
@@ -2,8 +2,8 @@
 
 import type React from 'react'
 import { useRef, useState } from 'react'
-import { ArrowLeftRight, ArrowUp } from 'lucide-react'
 import { Button, Input, Label, Tooltip } from '@/components/emcn'
+import { ArrowLeftRight, ArrowUp } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { WandControlHandlers } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
index e7bfd632a3c..291f7a13333 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -1,7 +1,6 @@
 import type React from 'react'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowLeft, ChevronRight, ServerIcon, WrenchIcon, XIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
@@ -16,6 +15,7 @@ import {
   Switch,
   Tooltip,
 } from '@/components/emcn'
+import { ArrowLeft, ChevronRight, Server, Wrench, X } from '@/components/emcn/icons'
 import { McpIcon, WorkflowIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
 import {
@@ -1369,7 +1369,7 @@ export const ToolInput = memo(function ToolInput({
         serverToolItems.push({
           label: `Use all ${toolCount} tools`,
           value: `mcp-server-all-${mcpServerDrilldown}`,
-          iconElement: createToolIcon('#6366F1', ServerIcon),
+          iconElement: createToolIcon('#6366F1', Server),
           onSelect: () => {
             if (allAlreadySelected) return
             // Remove existing individual tools from this server to avoid duplicates
@@ -1447,7 +1447,7 @@ export const ToolInput = memo(function ToolInput({
       actionItems.push({
         label: 'Create Tool',
         value: 'action-create-tool',
-        icon: WrenchIcon,
+        icon: Wrench,
         onSelect: () => {
           setCustomToolModalOpen(true)
           setOpen(false)
@@ -1479,7 +1479,7 @@ export const ToolInput = memo(function ToolInput({
           return {
             label: customTool.title,
             value: `custom-${customTool.id}`,
-            iconElement: createToolIcon('#3B82F6', WrenchIcon),
+            iconElement: createToolIcon('#3B82F6', Wrench),
             disabled: isPreview || alreadySelected,
             onSelect: () => {
               if (alreadySelected) return
@@ -1512,7 +1512,7 @@ export const ToolInput = memo(function ToolInput({
         serverItems.push({
           label: `${serverName} (${toolCount} tools)`,
           value: `mcp-server-folder-${serverId}`,
-          iconElement: createToolIcon('#6366F1', ServerIcon),
+          iconElement: createToolIcon('#6366F1', Server),
           suffixElement: <ChevronRight className='size-[12px] text-[var(--text-tertiary)]' />,
           onSelect: () => {
             setMcpServerDrilldown(serverId)
@@ -1807,7 +1807,7 @@ export const ToolInput = memo(function ToolInput({
                     }}
                   >
                     {isCustomTool ? (
-                      <WrenchIcon className='size-[10px] text-white' />
+                      <Wrench className='size-[10px] text-white' />
                     ) : isMcpTool ? (
                       <IconComponent icon={McpIcon} className='size-[10px] text-white' />
                     ) : isWorkflowTool ? (
@@ -1936,7 +1936,7 @@ export const ToolInput = memo(function ToolInput({
                           className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                           aria-label='Remove tool'
                         >
-                          <XIcon className='size-[13px]' />
+                          <X className='size-[13px]' />
                         </button>
                       </PopoverTrigger>
                       <PopoverContent
@@ -1974,7 +1974,7 @@ export const ToolInput = memo(function ToolInput({
                       className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                       aria-label='Remove tool'
                     >
-                      <XIcon className='size-[13px]' />
+                      <X className='size-[13px]' />
                     </button>
                   )}
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 751d48e48cb..9436d2e63db 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
 import { generateId } from '@sim/utils/id'
-import { Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
@@ -11,6 +10,7 @@ import {
   Label,
   Textarea,
 } from '@/components/emcn'
+import { Plus } from '@/components/emcn/icons'
 import { Trash } from '@/components/emcn/icons/trash'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 7c133360224..9da9e022ec0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -1,15 +1,15 @@
 import { type JSX, type MouseEvent, memo, useCallback, useMemo, useRef, useState } from 'react'
 import { isEqual } from 'es-toolkit'
+import { useParams } from 'next/navigation'
+import { Button, Input, Label, Tooltip } from '@/components/emcn/components'
 import {
-  AlertTriangle,
   ArrowLeftRight,
   ArrowUp,
   Check,
   Clipboard,
   ExternalLink,
-} from 'lucide-react'
-import { useParams } from 'next/navigation'
-import { Button, Input, Label, Tooltip } from '@/components/emcn/components'
+  TriangleAlert,
+} from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { FilterRule, SortRule } from '@/lib/table/query-builder/constants'
 import {
@@ -262,7 +262,7 @@ const renderLabel = (
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <span className='inline-flex'>
-                  <AlertTriangle className='size-3 flex-shrink-0 cursor-pointer text-destructive' />
+                  <TriangleAlert className='size-3 flex-shrink-0 cursor-pointer text-destructive' />
                 </span>
               </Tooltip.Trigger>
               <Tooltip.Content side='top'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
index 0f767ef26e6..218991758f2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { ChevronUp } from 'lucide-react'
 import SimpleCodeEditor from 'react-simple-code-editor'
 import { Code as CodeEditor, Combobox, getCodeEditorProps, Input, Label } from '@/components/emcn'
+import { ChevronUp } from '@/components/emcn/icons'
 import { WORKFLOW_SEARCH_SUBFLOW_FIELD_IDS } from '@/lib/workflows/search-replace/subflow-fields'
 import {
   formatDisplayText,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 9e32b7fb919..c1e1a38e4ce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -2,6 +2,11 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { isEqual } from 'es-toolkit'
+import { useParams } from 'next/navigation'
+import { usePostHog } from 'posthog-js/react'
+import { useShallow } from 'zustand/react/shallow'
+import { useStoreWithEqualityFn } from 'zustand/traditional'
+import { Button, FieldDivider, Loader, Tooltip } from '@/components/emcn'
 import {
   BookOpen,
   Check,
@@ -11,12 +16,7 @@ import {
   Lock,
   Pencil,
   Unlock,
-} from 'lucide-react'
-import { useParams } from 'next/navigation'
-import { usePostHog } from 'posthog-js/react'
-import { useShallow } from 'zustand/react/shallow'
-import { useStoreWithEqualityFn } from 'zustand/traditional'
-import { Button, FieldDivider, Loader, Tooltip } from '@/components/emcn'
+} from '@/components/emcn/icons'
 import { captureEvent } from '@/lib/posthog/client'
 import {
   buildCanonicalIndex,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index 769c75c678e..c7857ad8011 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -12,9 +12,9 @@ import {
   useState,
 } from 'react'
 import clsx from 'clsx'
-import { ChevronDown, Search } from 'lucide-react'
 import { usePostHog } from 'posthog-js/react'
 import { Button, chipVariants, Expandable, ExpandableContent, Info } from '@/components/emcn'
+import { ChevronDown, Search } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { captureEvent } from '@/lib/posthog/client'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index c0120135bb6..420584d71ab 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -4,7 +4,6 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
-import { History, Plus, Square } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import { useShallow } from 'zustand/react/shallow'
@@ -34,7 +33,7 @@ import {
   Trash,
   toast,
 } from '@/components/emcn'
-import { Download, Lock, Unlock } from '@/components/emcn/icons'
+import { Download, History, Lock, Plus, Square, Unlock } from '@/components/emcn/icons'
 import { VariableIcon } from '@/components/icons'
 import { requestJson } from '@/lib/api/client/request'
 import {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
index 7d0915e64ee..3b209a2c6ef 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ChevronDown, ChevronRight, ChevronUp, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
 import { Button, Input, toast } from '@/components/emcn'
+import { ChevronDown, ChevronRight, ChevronUp, X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { getWorkflowSearchDependentClears } from '@/lib/workflows/search-replace/dependencies'
 import { indexWorkflowSearchMatches } from '@/lib/workflows/search-replace/indexer'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config.ts
index 0e8395d5b85..0f37e7c12fc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config.ts
@@ -1,4 +1,4 @@
-import { RepeatIcon } from 'lucide-react'
+import { Repeat } from '@/components/emcn/icons'
 
 /**
  * Loop tool configuration for the toolbar.
@@ -7,7 +7,7 @@ import { RepeatIcon } from 'lucide-react'
 export const LoopTool = {
   type: 'loop',
   name: 'Loop',
-  icon: RepeatIcon,
+  icon: Repeat,
   bgColor: '#2FB3FF',
   docsLink: 'https://docs.sim.ai/blocks/loop',
 } as const
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config.ts
index 758dd084ea7..f1d5980cfcd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config.ts
@@ -1,4 +1,4 @@
-import { SplitIcon } from 'lucide-react'
+import { Split } from '@/components/emcn/icons'
 
 /**
  * Parallel tool configuration for the toolbar.
@@ -7,7 +7,7 @@ import { SplitIcon } from 'lucide-react'
 export const ParallelTool = {
   type: 'parallel',
   name: 'Parallel',
-  icon: SplitIcon,
+  icon: Split,
   bgColor: '#FEE12B',
   docsLink: 'https://docs.sim.ai/blocks/parallel',
 } as const
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index 2a8b2ab989a..34dc487399f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react'
-import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position, useReactFlow } from 'reactflow'
 import { Badge } from '@/components/emcn'
+import { Repeat, Split } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
@@ -112,7 +112,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
 
   const startHandleId = data.kind === 'loop' ? 'loop-start-source' : 'parallel-start-source'
   const endHandleId = data.kind === 'loop' ? 'loop-end-source' : 'parallel-end-source'
-  const BlockIcon = data.kind === 'loop' ? RepeatIcon : SplitIcon
+  const BlockIcon = data.kind === 'loop' ? Repeat : Split
   const blockIconBg = data.kind === 'loop' ? '#2FB3FF' : '#FEE12B'
   const blockName = data.name || (data.kind === 'loop' ? 'Loop' : 'Parallel')
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx
index 1495bc999c0..13b991e0daf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx
@@ -2,7 +2,6 @@
 
 import { memo } from 'react'
 import clsx from 'clsx'
-import { Filter } from 'lucide-react'
 import {
   Button,
   Popover,
@@ -13,6 +12,7 @@ import {
   PopoverSection,
   PopoverTrigger,
 } from '@/components/emcn'
+import { Filter } from '@/components/emcn/icons'
 import type {
   BlockInfo,
   TerminalFilters,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
index 2607270ab85..165a1844bb9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
@@ -67,8 +67,7 @@ const BADGE_VARIANTS: Record<ValueType, BadgeVariant> = {
  */
 const STYLES = {
   row: 'group flex min-h-[30px] cursor-pointer items-center gap-2 rounded-lg px-2 -mx-2 hover-hover:bg-[var(--surface-active)]',
-  chevron:
-    'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+  chevron: 'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
   keyName: 'text-sm text-[var(--text-primary)]',
   badge: 'rounded-sm px-1 py-[0px] text-xs',
   summary: 'text-sm text-[var(--text-secondary)]',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index d13e7366b75..591f2a034b3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -2,31 +2,31 @@
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
+import Link from 'next/link'
+import {
+  Button,
+  Code,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverItem,
+  PopoverTrigger,
+  Tooltip,
+} from '@/components/emcn'
 import {
   ArrowDown,
   ArrowUp,
   Check,
   Clipboard,
   Database,
+  Download,
   MoreHorizontal,
   Palette,
   Pause,
   Search,
   Trash2,
   X,
-} from 'lucide-react'
-import Link from 'next/link'
-import {
-  Button,
-  Code,
-  Input,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
-  Tooltip,
-} from '@/components/emcn'
-import { Download } from '@/components/emcn/icons'
+} from '@/components/emcn/icons'
 import {
   OutputContextMenu,
   StructuredOutput,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx
index 43b2c9dc3c6..5d4fdcf90be 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx
@@ -3,8 +3,8 @@
 import type React from 'react'
 import { memo } from 'react'
 import clsx from 'clsx'
-import { ChevronDown } from 'lucide-react'
 import { Button } from '@/components/emcn'
+import { ChevronDown } from '@/components/emcn/icons'
 
 export interface ToggleButtonProps {
   isExpanded: boolean
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index ad28af998bf..84c3bfcfcb8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -4,7 +4,6 @@ import type React from 'react'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { formatDuration } from '@sim/utils/formatting'
 import clsx from 'clsx'
-import { ArrowDown, ArrowUp, Database, MoreHorizontal, Palette, Pause, Trash2 } from 'lucide-react'
 import Link from 'next/link'
 import { List, type RowComponentProps, useListRef } from 'react-window'
 import {
@@ -16,7 +15,16 @@ import {
   PopoverTrigger,
   Tooltip,
 } from '@/components/emcn'
-import { Download } from '@/components/emcn/icons'
+import {
+  ArrowDown,
+  ArrowUp,
+  Database,
+  Download,
+  MoreHorizontal,
+  Palette,
+  Pause,
+  Trash2,
+} from '@/components/emcn/icons'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { sendMothershipMessage } from '@/lib/mothership/events'
@@ -205,7 +213,7 @@ const IterationNodeRow = memo(function IterationNodeRow({
           {hasChildren && (
             <ChevronDown
               className={clsx(
-                'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
                 !isExpanded && '-rotate-90'
               )}
             />
@@ -313,7 +321,7 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
           {hasChildren && (
             <ChevronDown
               className={clsx(
-                'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
                 !isExpanded && '-rotate-90'
               )}
             />
@@ -438,7 +446,7 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
           {hasChildren && (
             <ChevronDown
               className={clsx(
-                'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
+                'size-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
                 !isExpanded && '-rotate-90'
               )}
             />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts
index f7f5400fbfd..4eb0c527cdd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts
@@ -1,12 +1,5 @@
 import type React from 'react'
-import {
-  AlertTriangleIcon,
-  BanIcon,
-  NetworkIcon,
-  RepeatIcon,
-  SplitIcon,
-  XCircleIcon,
-} from 'lucide-react'
+import { Ban, Network, Repeat, Split, TriangleAlert, XCircle } from '@/components/emcn/icons'
 import { getBlock } from '@/blocks'
 import { isWorkflowBlockType } from '@/executor/constants'
 import { TERMINAL_BLOCK_COLUMN_WIDTH } from '@/stores/constants'
@@ -43,27 +36,27 @@ export function getBlockIcon(
   }
 
   if (blockType === 'loop') {
-    return RepeatIcon
+    return Repeat
   }
 
   if (blockType === 'parallel') {
-    return SplitIcon
+    return Split
   }
 
   if (blockType === 'workflow') {
-    return NetworkIcon
+    return Network
   }
 
   if (blockType === 'error') {
-    return XCircleIcon
+    return XCircle
   }
 
   if (blockType === 'validation') {
-    return AlertTriangleIcon
+    return TriangleAlert
   }
 
   if (blockType === 'cancelled') {
-    return BanIcon
+    return Ban
   }
 
   return null
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index 3345e3859a8..5f6b3f8d82e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Plus, X } from 'lucide-react'
 import Editor from 'react-simple-code-editor'
 import { useShallow } from 'zustand/react/shallow'
 import {
@@ -17,6 +16,7 @@ import {
   Label,
   languages,
 } from '@/components/emcn'
+import { Plus, X } from '@/components/emcn/icons'
 import { Trash } from '@/components/emcn/icons/trash'
 import { cn } from '@/lib/core/utils/cn'
 import { validateName } from '@/lib/core/utils/validation'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
index 093b0645c1a..fecb7234cbe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-import { SendIcon, XIcon } from 'lucide-react'
+import { Send, X } from '@/components/emcn/icons'
 import { Button } from '@/components/ui/button'
 import { cn } from '@/lib/core/utils/cn'
 
@@ -120,7 +120,7 @@ export function WandPromptBar({
           onClick={handleCancel}
           className='size-8 rounded-full text-muted-foreground hover-hover:bg-accent/50 hover-hover:text-foreground'
         >
-          <XIcon className='size-4' />
+          <X className='size-4' />
         </Button>
 
         {!isStreaming && (
@@ -131,7 +131,7 @@ export function WandPromptBar({
             className='size-8 rounded-full text-muted-foreground hover-hover:bg-primary/10 hover-hover:text-foreground'
             disabled={isLoading || isStreaming || !promptValue.trim()}
           >
-            <SendIcon className='size-4' />
+            <Send className='size-4' />
           </Button>
         )}
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
index 39c97cb0b0f..d0e35a4fb25 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -2,7 +2,6 @@
 
 import { memo, useCallback, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Scan } from 'lucide-react'
 import { useReactFlow } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
 import {
@@ -19,6 +18,7 @@ import {
   Tooltip,
   Undo,
 } from '@/components/emcn'
+import { Scan } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { createCommand } from '@/app/workspace/[workspaceId]/utils/commands-utils'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
index ed4840eae81..e5684a5881d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
@@ -1,7 +1,7 @@
 import { memo, useMemo } from 'react'
-import { X } from 'lucide-react'
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getSmoothStepPath } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
+import { X } from '@/components/emcn/icons'
 import type { EdgeDiffStatus } from '@/lib/workflows/diff/types'
 import { useLastRunEdges } from '@/stores/execution'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index c5c4728c56b..ac27cdfd967 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -2,20 +2,6 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { formatDuration } from '@sim/utils/formatting'
-import {
-  ArrowDown,
-  ArrowUp,
-  Check,
-  ChevronDown as ChevronDownIcon,
-  ChevronUp,
-  Clipboard,
-  ExternalLink,
-  Maximize2,
-  RepeatIcon,
-  Search,
-  SplitIcon,
-  X,
-} from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { ReactFlowProvider } from 'reactflow'
 import {
@@ -29,6 +15,20 @@ import {
   Label,
   Tooltip,
 } from '@/components/emcn'
+import {
+  ArrowDown,
+  ArrowUp,
+  Check,
+  ChevronDown as ChevronDownIcon,
+  ChevronUp,
+  Clipboard,
+  Expand,
+  ExternalLink,
+  Repeat,
+  Search,
+  Split,
+  X,
+} from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
@@ -1105,7 +1105,7 @@ function PreviewEditorContent({
 
   if (isSubflow) {
     const isLoop = block.type === 'loop'
-    const SubflowIcon = isLoop ? RepeatIcon : SplitIcon
+    const SubflowIcon = isLoop ? Repeat : Split
     const subflowBgColor = isLoop ? '#2FB3FF' : '#FEE12B'
     const subflowName = block.name || (isLoop ? 'Loop' : 'Parallel')
 
@@ -1439,7 +1439,7 @@ function PreviewEditorContent({
                               className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
                             >
                               {isExecutionMode && onDrillDown ? (
-                                <Maximize2 className='size-[12px]' />
+                                <Expand className='size-[12px]' />
                               ) : (
                                 <ExternalLink className='size-[12px]' />
                               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
index 7cb8fa07a46..4a0cc92b14e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
@@ -1,9 +1,9 @@
 'use client'
 
 import { memo } from 'react'
-import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position } from 'reactflow'
 import { Badge } from '@/components/emcn'
+import { Repeat, Split } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 
@@ -42,7 +42,7 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
   } = data
 
   const isLoop = kind === 'loop'
-  const BlockIcon = isLoop ? RepeatIcon : SplitIcon
+  const BlockIcon = isLoop ? Repeat : Split
   const blockIconBg = isLoop ? '#2FB3FF' : '#FEE12B'
   const blockName = name || (isLoop ? 'Loop' : 'Parallel')
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
index adaab38e200..186edd6b694 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
@@ -2,8 +2,8 @@
 
 import type React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { ArrowLeft } from 'lucide-react'
 import { Button, Tooltip } from '@/components/emcn'
+import { ArrowLeft } from '@/components/emcn/icons'
 import { redactApiKeys } from '@/lib/core/security/redaction'
 import { cn } from '@/lib/core/utils/cn'
 import { PreviewEditor } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/file-list/file-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/file-list/file-list.tsx
index 61f7f0236bc..f89698c5f00 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/file-list/file-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/file-list/file-list.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { memo, useMemo, useState } from 'react'
-import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
+import { ChevronRight } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import type { WorkspaceFileFolderApi } from '@/hooks/queries/workspace-file-folders'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
index 6d00bf75084..025dea859e9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
@@ -5,7 +5,6 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { createLogger } from '@sim/logger'
 import { useMutation } from '@tanstack/react-query'
 import imageCompression from 'browser-image-compression'
-import { X } from 'lucide-react'
 import Image from 'next/image'
 import { Controller, useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -17,6 +16,7 @@ import {
   ChipModalFooter,
   ChipModalHeader,
 } from '@/components/emcn'
+import { X } from '@/components/emcn/icons'
 
 const logger = createLogger('HelpModal')
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
index 094e1d5a43d..97e8fe77d52 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { Pin, PinOff } from 'lucide-react'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -18,6 +17,8 @@ import {
   LogOut,
   Mail,
   Pencil,
+  Pin,
+  PinOff,
   Plus,
   SquareArrowUpRight,
   Trash,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index 75020e50eca..6f7eeaeb0c2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -4,10 +4,9 @@ import { useCallback, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { generateId } from '@sim/utils/id'
 import clsx from 'clsx'
-import { ChevronRight, Folder, FolderOpen, MoreHorizontal } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { chipVariants } from '@/components/emcn'
-import { Lock } from '@/components/emcn/icons'
+import { ChevronRight, Folder, FolderOpen, Lock, MoreHorizontal } from '@/components/emcn/icons'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index 3dbf0475cd1..1388ff6a33a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -2,11 +2,10 @@
 
 import { useCallback, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
-import { MoreHorizontal } from 'lucide-react'
 import Link from 'next/link'
 import { useParams } from 'next/navigation'
 import { chipVariants } from '@/components/emcn'
-import { Lock } from '@/components/emcn/icons'
+import { Lock, MoreHorizontal } from '@/components/emcn/icons'
 import { SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 731d0c6c13f..721acf786a7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -2,7 +2,6 @@
 
 import { memo, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { MoreHorizontal } from 'lucide-react'
 import {
   ChevronDown,
   Chip,
@@ -19,7 +18,7 @@ import {
   Send,
   Skeleton,
 } from '@/components/emcn'
-import { ManageWorkspace, PanelLeft } from '@/components/emcn/icons'
+import { ManageWorkspace, MoreHorizontal, PanelLeft } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { isBillingEnabled } from '@/app/workspace/[workspaceId]/settings/navigation'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
@@ -358,7 +357,7 @@ function WorkspaceHeaderImpl({
                   <span className='min-w-0 truncate text-[var(--text-body)] text-sm'>
                     {activeWorkspace.name}
                   </span>
-                  <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+                  <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
                 </>
               )}
             </button>
@@ -627,7 +626,7 @@ function WorkspaceHeaderImpl({
               <span className='min-w-0 truncate text-[var(--text-body)] text-sm'>
                 {activeWorkspace.name}
               </span>
-              <ChevronDown className='h-[6px] w-[10px] flex-shrink-0 text-[var(--text-icon)]' />
+              <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
             </>
           )}
         </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 68e808d6a73..88ac12f135a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -2,7 +2,6 @@
 
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { MoreHorizontal } from 'lucide-react'
 import { useParams, usePathname, useRouter } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
 import {
@@ -15,7 +14,6 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   FolderPlus,
-  Library,
   Loader,
   Skeleton,
   Tooltip,
@@ -23,12 +21,14 @@ import {
 } from '@/components/emcn'
 import {
   BookOpen,
-  Clock,
+  BubbleChatSpark,
+  CalendarClock,
   Database,
-  Files,
+  File,
   HelpCircle,
   Integration,
-  MessageCircle,
+  Logs,
+  MoreHorizontal,
   Plus,
   Search,
   Settings,
@@ -436,7 +436,7 @@ export const Sidebar = memo(function Sidebar({ variant = 'docked' }: SidebarProp
         {
           id: 'home',
           label: 'New chat',
-          icon: MessageCircle,
+          icon: BubbleChatSpark,
           href: `/workspace/${workspaceId}/home`,
         },
         {
@@ -470,7 +470,7 @@ export const Sidebar = memo(function Sidebar({ variant = 'docked' }: SidebarProp
         {
           id: 'files',
           label: 'Files',
-          icon: Files,
+          icon: File,
           href: `/workspace/${workspaceId}/files`,
           hidden: permissionConfig.hideFilesTab,
         },
@@ -484,13 +484,13 @@ export const Sidebar = memo(function Sidebar({ variant = 'docked' }: SidebarProp
         {
           id: 'scheduled-tasks',
           label: 'Scheduled tasks',
-          icon: Clock,
+          icon: CalendarClock,
           href: `/workspace/${workspaceId}/scheduled-tasks`,
         },
         {
           id: 'logs',
           label: 'Logs',
-          icon: Library,
+          icon: Logs,
           href: `/workspace/${workspaceId}/logs`,
         },
       ].filter((item) => !item.hidden),
diff --git a/apps/sim/blocks/blocks/chat_trigger.ts b/apps/sim/blocks/blocks/chat_trigger.ts
index 34fa5d0cce2..2061cea3ab8 100644
--- a/apps/sim/blocks/blocks/chat_trigger.ts
+++ b/apps/sim/blocks/blocks/chat_trigger.ts
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react'
 import { createElement } from 'react'
-import { MessageCircle } from 'lucide-react'
+import { MessageCircle } from '@/components/emcn/icons'
 import type { BlockConfig } from '@/blocks/types'
 
 const ChatTriggerIcon = (props: SVGProps<SVGSVGElement>) => createElement(MessageCircle, props)
diff --git a/apps/sim/blocks/blocks/generic_webhook.ts b/apps/sim/blocks/blocks/generic_webhook.ts
index 08cd69108c2..c530a0a3379 100644
--- a/apps/sim/blocks/blocks/generic_webhook.ts
+++ b/apps/sim/blocks/blocks/generic_webhook.ts
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react'
 import { createElement } from 'react'
-import { Webhook } from 'lucide-react'
+import { Webhook } from '@/components/emcn/icons'
 import type { BlockConfig } from '@/blocks/types'
 import { getTrigger } from '@/triggers'
 
diff --git a/apps/sim/blocks/blocks/input_trigger.ts b/apps/sim/blocks/blocks/input_trigger.ts
index 51de24d6e86..a50e2f88a48 100644
--- a/apps/sim/blocks/blocks/input_trigger.ts
+++ b/apps/sim/blocks/blocks/input_trigger.ts
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react'
 import { createElement } from 'react'
-import { FormInput } from 'lucide-react'
+import { FormInput } from '@/components/emcn/icons'
 import type { BlockConfig } from '@/blocks/types'
 
 const InputTriggerIcon = (props: SVGProps<SVGSVGElement>) => createElement(FormInput, props)
diff --git a/apps/sim/blocks/blocks/manual_trigger.ts b/apps/sim/blocks/blocks/manual_trigger.ts
index ded5616efb9..f7c0f27d710 100644
--- a/apps/sim/blocks/blocks/manual_trigger.ts
+++ b/apps/sim/blocks/blocks/manual_trigger.ts
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react'
 import { createElement } from 'react'
-import { Play } from 'lucide-react'
+import { Play } from '@/components/emcn/icons'
 import type { BlockConfig } from '@/blocks/types'
 
 const ManualTriggerIcon = (props: SVGProps<SVGSVGElement>) => createElement(Play, props)
diff --git a/apps/sim/blocks/blocks/schedule.ts b/apps/sim/blocks/blocks/schedule.ts
index 0757eca0e7c..68279cb5882 100644
--- a/apps/sim/blocks/blocks/schedule.ts
+++ b/apps/sim/blocks/blocks/schedule.ts
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react'
 import { createElement } from 'react'
-import { Clock } from 'lucide-react'
+import { Clock } from '@/components/emcn/icons'
 import type { BlockConfig } from '@/blocks/types'
 
 const ScheduleIcon = (props: SVGProps<SVGSVGElement>) => createElement(Clock, props)
diff --git a/apps/sim/blocks/blocks/wait.ts b/apps/sim/blocks/blocks/wait.ts
index 25f882025be..e48f13ab83e 100644
--- a/apps/sim/blocks/blocks/wait.ts
+++ b/apps/sim/blocks/blocks/wait.ts
@@ -1,6 +1,6 @@
 import type { SVGProps } from 'react'
 import { createElement } from 'react'
-import { PauseCircle } from 'lucide-react'
+import { PauseCircle } from '@/components/emcn/icons'
 import type { BlockConfig } from '@/blocks/types'
 
 const WaitIcon = (props: SVGProps<SVGSVGElement>) => createElement(PauseCircle, props)
diff --git a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx b/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
index 931c6ca51ec..9b1c5a99024 100644
--- a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
+++ b/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
@@ -1,6 +1,6 @@
 import type * as React from 'react'
-import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
+import { ChevronRight } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 interface BreadcrumbItem {
diff --git a/apps/sim/components/emcn/components/calendar/calendar.tsx b/apps/sim/components/emcn/components/calendar/calendar.tsx
index 82fada85647..78d81b73260 100644
--- a/apps/sim/components/emcn/components/calendar/calendar.tsx
+++ b/apps/sim/components/emcn/components/calendar/calendar.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { ChevronLeft, ChevronRight } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 const MONTHS = [
diff --git a/apps/sim/components/emcn/components/callout/callout.tsx b/apps/sim/components/emcn/components/callout/callout.tsx
index e4826c5b129..dd0c3d91f80 100644
--- a/apps/sim/components/emcn/components/callout/callout.tsx
+++ b/apps/sim/components/emcn/components/callout/callout.tsx
@@ -1,6 +1,6 @@
 import type * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { AlertTriangle, CheckCircle2, Info } from 'lucide-react'
+import { CircleCheck, Info, TriangleAlert } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 const calloutVariants = cva('flex items-center gap-2 rounded-lg border p-2.5 text-[12px]', {
@@ -24,9 +24,9 @@ const calloutVariants = cva('flex items-center gap-2 rounded-lg border p-2.5 tex
 const DEFAULT_ICONS = {
   default: Info,
   info: Info,
-  success: CheckCircle2,
-  warning: AlertTriangle,
-  destructive: AlertTriangle,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  destructive: TriangleAlert,
 } as const
 
 interface CalloutProps
diff --git a/apps/sim/components/emcn/components/checkbox/checkbox.tsx b/apps/sim/components/emcn/components/checkbox/checkbox.tsx
index ae63f9f26ce..98ffa7593f2 100644
--- a/apps/sim/components/emcn/components/checkbox/checkbox.tsx
+++ b/apps/sim/components/emcn/components/checkbox/checkbox.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { Check, Minus } from 'lucide-react'
+import { Check, Minus } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 /**
diff --git a/apps/sim/components/emcn/components/chip-date-picker/chip-date-picker.tsx b/apps/sim/components/emcn/components/chip-date-picker/chip-date-picker.tsx
index 3bccd7df0ad..ea0621dade2 100644
--- a/apps/sim/components/emcn/components/chip-date-picker/chip-date-picker.tsx
+++ b/apps/sim/components/emcn/components/chip-date-picker/chip-date-picker.tsx
@@ -72,7 +72,7 @@ const ChipDatePicker = forwardRef<HTMLButtonElement, ChipDatePickerProps>(functi
             aria-hidden
             className='inline-flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'
           >
-            <ChevronDown className='h-[6px] w-[10px]' />
+            <ChevronDown className='size-[14px]' />
           </span>
         </button>
       </PopoverPrimitive.Trigger>
diff --git a/apps/sim/components/emcn/components/chip-dropdown/chip-dropdown.tsx b/apps/sim/components/emcn/components/chip-dropdown/chip-dropdown.tsx
index 25ee72e8097..d44468252d6 100644
--- a/apps/sim/components/emcn/components/chip-dropdown/chip-dropdown.tsx
+++ b/apps/sim/components/emcn/components/chip-dropdown/chip-dropdown.tsx
@@ -117,7 +117,7 @@ type ChipDropdownProps = ChipDropdownSingleProps | ChipDropdownMultiProps
  *
  * The trigger reuses `chipVariants` for visual parity with `Chip`. The label
  * is `flex-1`, so the trailing chevron is pushed flush right. The chevron is
- * owned by the component and rendered at `h-[6px] w-[10px]` (matching the
+ * owned by the component and rendered at `size-[14px]` (matching the
  * workspace-header chevron) — there is intentionally no `rightIcon` prop. The
  * trigger and menu shell are identical across modes; only the selection
  * semantics (label, item handlers, open state, search) branch on `multiple`.
@@ -283,7 +283,7 @@ const ChipDropdown = forwardRef<HTMLButtonElement, ChipDropdownProps>(
               {displayLabel}
             </span>
             <span aria-hidden className={chevronSlotClass}>
-              <ChevronDown className='h-[6px] w-[10px]' />
+              <ChevronDown className='size-[14px]' />
             </span>
           </button>
         </DropdownMenuTrigger>
diff --git a/apps/sim/components/emcn/components/chip-modal/chip-modal.tsx b/apps/sim/components/emcn/components/chip-modal/chip-modal.tsx
index 7bbd8d81fd7..eca05217bb2 100644
--- a/apps/sim/components/emcn/components/chip-modal/chip-modal.tsx
+++ b/apps/sim/components/emcn/components/chip-modal/chip-modal.tsx
@@ -38,7 +38,6 @@
 'use client'
 
 import * as React from 'react'
-import { X } from 'lucide-react'
 import { Button } from '@/components/emcn/components/button/button'
 import {
   ChipDropdown,
@@ -50,6 +49,7 @@ import { ChipTextarea } from '@/components/emcn/components/chip-textarea/chip-te
 import { Label } from '@/components/emcn/components/label/label'
 import { Modal, ModalContent } from '@/components/emcn/components/modal/modal'
 import { TagInput, type TagItem } from '@/components/emcn/components/tag-input/tag-input'
+import { X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 
diff --git a/apps/sim/components/emcn/components/chip-select/chip-select.tsx b/apps/sim/components/emcn/components/chip-select/chip-select.tsx
index 46170df76d3..1b7ec6cadfc 100644
--- a/apps/sim/components/emcn/components/chip-select/chip-select.tsx
+++ b/apps/sim/components/emcn/components/chip-select/chip-select.tsx
@@ -223,7 +223,7 @@ export function ChipSelect({
             aria-hidden
             className='inline-flex size-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'
           >
-            <ChevronDown className='h-[6px] w-[10px]' />
+            <ChevronDown className='size-[14px]' />
           </span>
         </button>
       </DropdownMenuTrigger>
diff --git a/apps/sim/components/emcn/components/code/code.tsx b/apps/sim/components/emcn/components/code/code.tsx
index c9abf751fad..5c8a1b47bd5 100644
--- a/apps/sim/components/emcn/components/code/code.tsx
+++ b/apps/sim/components/emcn/components/code/code.tsx
@@ -10,9 +10,9 @@ import {
   useRef,
   useState,
 } from 'react'
-import { ChevronRight } from 'lucide-react'
 import { highlight, languages } from 'prismjs'
 import { List, type RowComponentProps, useDynamicRowHeight, useListRef } from 'react-window'
+import { ChevronRight } from '@/components/emcn/icons'
 import 'prismjs/components/prism-javascript'
 import 'prismjs/components/prism-python'
 import 'prismjs/components/prism-json'
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index 18465d3da7e..da690c36f6b 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -15,7 +15,7 @@ import {
   useState,
 } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { Check, ChevronDown, Search } from 'lucide-react'
+import { Check, ChevronDown, Search } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { Loader } from '../../icons'
 import { Input } from '../input/input'
diff --git a/apps/sim/components/emcn/components/date-picker/date-picker.tsx b/apps/sim/components/emcn/components/date-picker/date-picker.tsx
index 4aa1c3dc074..124658f290a 100644
--- a/apps/sim/components/emcn/components/date-picker/date-picker.tsx
+++ b/apps/sim/components/emcn/components/date-picker/date-picker.tsx
@@ -26,7 +26,6 @@
 
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react'
 import { Button } from '@/components/emcn/components/button/button'
 import {
   Popover,
@@ -34,6 +33,7 @@ import {
   PopoverContent,
 } from '@/components/emcn/components/popover/popover'
 import { TimePicker } from '@/components/emcn/components/time-picker/time-picker'
+import { ChevronDown, ChevronLeft, ChevronRight } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 /**
diff --git a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
index f8db30090e3..4ee89db0ad0 100644
--- a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
+++ b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
@@ -22,8 +22,8 @@
 
 import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { Check, ChevronRight, Circle, Search } from 'lucide-react'
 import { chipFieldSurfaceClass } from '@/components/emcn/components/chip-input/chip-field-chrome'
+import { Check, ChevronRight, Circle, Search } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 const ANIMATION_CLASSES =
diff --git a/apps/sim/components/emcn/components/info-card/info-card.tsx b/apps/sim/components/emcn/components/info-card/info-card.tsx
index b803620ff00..f60ba6ba7e6 100644
--- a/apps/sim/components/emcn/components/info-card/info-card.tsx
+++ b/apps/sim/components/emcn/components/info-card/info-card.tsx
@@ -20,7 +20,7 @@
 'use client'
 
 import * as React from 'react'
-import { Check } from 'lucide-react'
+import { Check } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 export interface InfoCardProps extends React.HTMLAttributes<HTMLDivElement> {}
diff --git a/apps/sim/components/emcn/components/input-otp/input-otp.tsx b/apps/sim/components/emcn/components/input-otp/input-otp.tsx
index 8951c415895..6f9b12a9fbd 100644
--- a/apps/sim/components/emcn/components/input-otp/input-otp.tsx
+++ b/apps/sim/components/emcn/components/input-otp/input-otp.tsx
@@ -28,7 +28,7 @@
 
 import * as React from 'react'
 import { OTPInput, OTPInputContext } from 'input-otp'
-import { Minus } from 'lucide-react'
+import { Minus } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 /**
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index 5ec679c3d5d..462d744645a 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -39,8 +39,8 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
-import { X } from 'lucide-react'
 import { usePathname } from 'next/navigation'
+import { X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { Button } from '../button/button'
 import { focusFirstTextInput, focusFirstTextInputIn } from './auto-focus'
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
index 485b9a2198b..ca215f9ecd6 100644
--- a/apps/sim/components/emcn/components/popover/popover.tsx
+++ b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -6,7 +6,7 @@
  * Basic usage with folders:
  * ```tsx
  * import { Popover, PopoverAnchor, PopoverBackButton, PopoverContent, PopoverFolder, PopoverItem } from '@/components/emcn'
- * import { Workflow, Bot } from 'lucide-react'
+ * import { Workflow, Bot } from '@/components/emcn/icons'
  *
  * function MyMenu() {
  *   const [workflows, setWorkflows] = useState([])
@@ -52,8 +52,8 @@
 import * as React from 'react'
 import { DismissableLayerBranch } from '@radix-ui/react-dismissable-layer'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
-import { Check, ChevronLeft, ChevronRight, Search } from 'lucide-react'
 import { createPortal } from 'react-dom'
+import { Check, ChevronLeft, ChevronRight, Search } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 type PopoverSize = 'sm' | 'md'
diff --git a/apps/sim/components/emcn/components/progress-item/progress-item.tsx b/apps/sim/components/emcn/components/progress-item/progress-item.tsx
index 03ac17da363..ac715b822c3 100644
--- a/apps/sim/components/emcn/components/progress-item/progress-item.tsx
+++ b/apps/sim/components/emcn/components/progress-item/progress-item.tsx
@@ -1,7 +1,6 @@
 import { forwardRef, type HTMLAttributes } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { AlertTriangle } from 'lucide-react'
-import { Check, Loader, Square, X } from '@/components/emcn/icons'
+import { Check, Loader, Square, TriangleAlert, X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 const progressItemVariants = cva('flex items-start gap-2.5 px-3 py-3 text-[12px]', {
@@ -23,7 +22,7 @@ function StatusIcon({ status }: { status: ProgressStatus }) {
   if (status === 'success')
     return <Check className={cn(ICON_CLASS, 'text-[var(--badge-success-text)]')} />
   if (status === 'error')
-    return <AlertTriangle className={cn(ICON_CLASS, 'text-[var(--text-error)]')} />
+    return <TriangleAlert className={cn(ICON_CLASS, 'text-[var(--text-error)]')} />
   return <Loader animate className={cn(ICON_CLASS, 'text-[var(--text-icon)]')} />
 }
 
diff --git a/apps/sim/components/emcn/components/tag-input/tag-input.tsx b/apps/sim/components/emcn/components/tag-input/tag-input.tsx
index 66db9c9c52b..2c1a3482f00 100644
--- a/apps/sim/components/emcn/components/tag-input/tag-input.tsx
+++ b/apps/sim/components/emcn/components/tag-input/tag-input.tsx
@@ -39,9 +39,9 @@
 
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { Paperclip, Plus, X } from 'lucide-react'
 import { ChipTag, chipTagVariants } from '@/components/emcn/components/chip-tag/chip-tag'
 import { Tooltip } from '@/components/emcn/components/tooltip/tooltip'
+import { Paperclip, Plus, X } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { handleKeyboardActivation } from '@/lib/core/utils/keyboard'
 
diff --git a/apps/sim/components/emcn/components/time-picker/time-picker.tsx b/apps/sim/components/emcn/components/time-picker/time-picker.tsx
index 0fbb163ffba..15e004e3d1c 100644
--- a/apps/sim/components/emcn/components/time-picker/time-picker.tsx
+++ b/apps/sim/components/emcn/components/time-picker/time-picker.tsx
@@ -27,12 +27,12 @@
 
 import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { ChevronDown } from 'lucide-react'
 import {
   Popover,
   PopoverAnchor,
   PopoverContent,
 } from '@/components/emcn/components/popover/popover'
+import { ChevronDown } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 /**
diff --git a/apps/sim/components/emcn/icons/arrow-down.tsx b/apps/sim/components/emcn/icons/arrow-down.tsx
index baf36fa64d8..c545de6b305 100644
--- a/apps/sim/components/emcn/icons/arrow-down.tsx
+++ b/apps/sim/components/emcn/icons/arrow-down.tsx
@@ -1,26 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ArrowDown icon component
- * @param props - SVG properties including className, fill, etc.
+ * ArrowDown icon (Hugeicons stroke-rounded: ArrowDown01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ArrowDown(props: SVGProps<SVGSVGElement>) {
+export function ArrowDown({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M4 11.25L10.25 17.5L16.5 11.25' />
-      <path d='M10.25 3V17.5' />
+      <path
+        d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/arrow-left-right.tsx b/apps/sim/components/emcn/icons/arrow-left-right.tsx
new file mode 100644
index 00000000000..9c6044b99f8
--- /dev/null
+++ b/apps/sim/components/emcn/icons/arrow-left-right.tsx
@@ -0,0 +1,53 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ArrowLeftRight icon (Hugeicons stroke-rounded: ArrowLeftRightIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ArrowLeftRight({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M19.9999 17L3.99994 17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17 14C17 14 19.9999 16.2095 19.9999 17C19.9999 17.7906 16.9999 20 16.9999 20'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M4.99994 7L19.9999 7'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6.99992 4C6.99992 4 3.99995 6.20947 3.99994 7.00002C3.99993 7.79058 6.99994 10 6.99994 10'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/arrow-left.tsx b/apps/sim/components/emcn/icons/arrow-left.tsx
index e7835e2137e..c2915587783 100644
--- a/apps/sim/components/emcn/icons/arrow-left.tsx
+++ b/apps/sim/components/emcn/icons/arrow-left.tsx
@@ -1,26 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ArrowLeft icon component
- * @param props - SVG properties including className, fill, etc.
+ * ArrowLeft icon (Hugeicons stroke-rounded: ArrowLeft01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ArrowLeft(props: SVGProps<SVGSVGElement>) {
+export function ArrowLeft({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M9.25 4L3 10.25L9.25 16.5' />
-      <path d='M3 10.25H17.5' />
+      <path
+        d='M15 6C15 6 9.00001 10.4189 9 12C8.99999 13.5812 15 18 15 18'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/arrow-right.tsx b/apps/sim/components/emcn/icons/arrow-right.tsx
index 81d052f2ce5..3c0c4cfafe4 100644
--- a/apps/sim/components/emcn/icons/arrow-right.tsx
+++ b/apps/sim/components/emcn/icons/arrow-right.tsx
@@ -1,26 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ArrowRight icon component
- * @param props - SVG properties including className, fill, etc.
+ * ArrowRight icon (Hugeicons stroke-rounded: ArrowRight01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ArrowRight(props: SVGProps<SVGSVGElement>) {
+export function ArrowRight({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M11.25 4L17.5 10.25L11.25 16.5' />
-      <path d='M17.5 10.25H3' />
+      <path
+        d='M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/arrow-right2.tsx b/apps/sim/components/emcn/icons/arrow-right2.tsx
new file mode 100644
index 00000000000..461f3457b0b
--- /dev/null
+++ b/apps/sim/components/emcn/icons/arrow-right2.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ArrowRight2 icon (Hugeicons stroke-rounded: ArrowRight02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ArrowRight2({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M18.5 12L4.99997 12'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13 18C13 18 19 13.5811 19 12C19 10.4188 13 6 13 6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/arrow-up-down.tsx b/apps/sim/components/emcn/icons/arrow-up-down.tsx
index e22a0048168..32124140b17 100644
--- a/apps/sim/components/emcn/icons/arrow-up-down.tsx
+++ b/apps/sim/components/emcn/icons/arrow-up-down.tsx
@@ -1,28 +1,53 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ArrowUpDown icon component for sort toggles
- * @param props - SVG properties including className, fill, etc.
+ * ArrowUpDown icon (Hugeicons stroke-rounded: ArrowUpDownIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ArrowUpDown(props: SVGProps<SVGSVGElement>) {
+export function ArrowUpDown({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M1.5 8L5.5 4L9.5 8' />
-      <path d='M5.5 4V16.5' />
-      <path d='M11 12.5L15 16.5L19 12.5' />
-      <path d='M15 4V16.5' />
+      <path
+        d='M7 4V20'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17 19L17 4'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M10 6.99998C10 6.99998 7.79053 4.00001 6.99998 4C6.20942 3.99999 4 7 4 7'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20 17C20 17 17.7905 20 17 20C16.2094 20 14 17 14 17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/arrow-up-left.tsx b/apps/sim/components/emcn/icons/arrow-up-left.tsx
new file mode 100644
index 00000000000..17915cd275b
--- /dev/null
+++ b/apps/sim/components/emcn/icons/arrow-up-left.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ArrowUpLeft icon (Hugeicons stroke-rounded: ArrowUpLeft01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ArrowUpLeft({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M15 6.65032C15 6.65032 8.06166 6.10759 7.08461 7.08463C6.10755 8.06167 6.65037 15 6.65037 15M7.5 7.5L17.5 17.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/arrow-up.tsx b/apps/sim/components/emcn/icons/arrow-up.tsx
index 3444bf53f0e..3d56e19d136 100644
--- a/apps/sim/components/emcn/icons/arrow-up.tsx
+++ b/apps/sim/components/emcn/icons/arrow-up.tsx
@@ -1,26 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ArrowUp icon component
- * @param props - SVG properties including className, fill, etc.
+ * ArrowUp icon (Hugeicons stroke-rounded: ArrowUp01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ArrowUp(props: SVGProps<SVGSVGElement>) {
+export function ArrowUp({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M4 9.25L10.25 3L16.5 9.25' />
-      <path d='M10.25 3V17.5' />
+      <path
+        d='M17.9998 15C17.9998 15 13.5809 9.00001 11.9998 9C10.4187 8.99999 5.99985 15 5.99985 15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/arrow-up2.tsx b/apps/sim/components/emcn/icons/arrow-up2.tsx
new file mode 100644
index 00000000000..4b3e93201b9
--- /dev/null
+++ b/apps/sim/components/emcn/icons/arrow-up2.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ArrowUp2 icon (Hugeicons stroke-rounded: ArrowUp02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ArrowUp2({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M12 5.5V19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M18 11C18 11 13.5811 5.00001 12 5C10.4188 4.99999 6 11 6 11'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/asterisk.tsx b/apps/sim/components/emcn/icons/asterisk.tsx
index 1bd4e9ae64f..cd70344b147 100644
--- a/apps/sim/components/emcn/icons/asterisk.tsx
+++ b/apps/sim/components/emcn/icons/asterisk.tsx
@@ -1,27 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Asterisk icon component - required field indicator
- * @param props - SVG properties including className, fill, etc.
+ * Asterisk icon (Hugeicons stroke-rounded: AsteriskIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Asterisk(props: SVGProps<SVGSVGElement>) {
+export function Asterisk({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M10.25 3V17.5' />
-      <path d='M4 6.625L16.5 13.875' />
-      <path d='M4 13.875L16.5 6.625' />
+      <path
+        d='M12 7.5V16.5M15.8971 9.75L8.10289 14.25M15.897 14.25L8.10275 9.75'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6.47867 6.76926C2.20958 10.8137 1.22078 16.4342 4.27013 19.323C6.87609 21.7918 11.5879 21.4667 15.5675 18.7956L20 20.5L18.0841 16.6688C21.8721 12.6801 22.6403 7.43426 19.7299 4.67697C16.6805 1.78811 10.7478 2.72486 6.47867 6.76926Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/ban.tsx b/apps/sim/components/emcn/icons/ban.tsx
new file mode 100644
index 00000000000..90b5df6df9e
--- /dev/null
+++ b/apps/sim/components/emcn/icons/ban.tsx
@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Ban icon (Hugeicons stroke-rounded: UnavailableIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Ban({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M5.25 5L19.25 19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22.25 12C22.25 6.47715 17.7728 2 12.25 2C6.72715 2 2.25 6.47715 2.25 12C2.25 17.5228 6.72715 22 12.25 22C17.7728 22 22.25 17.5228 22.25 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/bell.tsx b/apps/sim/components/emcn/icons/bell.tsx
index 2df065b92df..fbe3738ee59 100644
--- a/apps/sim/components/emcn/icons/bell.tsx
+++ b/apps/sim/components/emcn/icons/bell.tsx
@@ -1,26 +1,46 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Bell icon component - notification bell
- * @param props - SVG properties including className, fill, etc.
+ * Bell icon (Hugeicons stroke-rounded: Notification03Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Bell(props: SVGProps<SVGSVGElement>) {
+export function Bell({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       aria-hidden='true'
       {...props}
     >
-      <path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' />
-      <path d='M10.3 21a1.94 1.94 0 0 0 3.4 0' />
+      <path
+        d='M20 18.5011L18.349 7.93407C17.8603 4.80601 15.166 2.5 12 2.5C8.83398 2.5 6.13971 4.80601 5.65098 7.93407L4 18.5011'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20 18.5C20 16.8431 16.4183 15.5 12 15.5C7.58172 15.5 4 16.8431 4 18.5C4 20.1569 7.58172 21.5 12 21.5C16.4183 21.5 20 20.1569 20 18.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13 18.5H11'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/bell2.tsx b/apps/sim/components/emcn/icons/bell2.tsx
new file mode 100644
index 00000000000..752286dd5ae
--- /dev/null
+++ b/apps/sim/components/emcn/icons/bell2.tsx
@@ -0,0 +1,46 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Bell2 icon (Hugeicons stroke-rounded: Notification03Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Bell2({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M20 18.5011L18.349 7.93407C17.8603 4.80601 15.166 2.5 12 2.5C8.83398 2.5 6.13971 4.80601 5.65098 7.93407L4 18.5011'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20 18.5C20 16.8431 16.4183 15.5 12 15.5C7.58172 15.5 4 16.8431 4 18.5C4 20.1569 7.58172 21.5 12 21.5C16.4183 21.5 20 20.1569 20 18.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13 18.5H11'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/book-open.tsx b/apps/sim/components/emcn/icons/book-open.tsx
index d635e85a1fb..9254bbfc35c 100644
--- a/apps/sim/components/emcn/icons/book-open.tsx
+++ b/apps/sim/components/emcn/icons/book-open.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * BookOpen icon component - open book
- * @param props - SVG properties including className, fill, etc.
+ * BookOpen icon (Hugeicons stroke-rounded: BookOpen01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function BookOpen(props: SVGProps<SVGSVGElement>) {
+export function BookOpen({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 2.75C0.75 2.75 3.25 0.75 6.25 0.75C9.25 0.75 10.25 2.75 10.25 2.75V18.75C10.25 18.75 9.25 17.25 6.25 17.25C3.25 17.25 0.75 18.75 0.75 18.75V2.75Z' />
-      <path d='M10.25 2.75C10.25 2.75 11.25 0.75 14.25 0.75C17.25 0.75 19.75 2.75 19.75 2.75V18.75C19.75 18.75 17.25 17.25 14.25 17.25C11.25 17.25 10.25 18.75 10.25 18.75' />
+      <path
+        d='M5.33333 3.00001C7.79379 2.99657 10.1685 3.88709 12 5.5V21C10.1685 19.3871 7.79379 18.4966 5.33333 18.5C3.77132 18.5 2.99032 18.5 2.64526 18.2792C2.4381 18.1466 2.35346 18.0619 2.22086 17.8547C2 17.5097 2 16.8941 2 15.6629V6.40322C2 4.97543 2 4.26154 2.54874 3.68286C3.09748 3.10418 3.65923 3.07432 4.78272 3.0146C4.965 3.00491 5.14858 3.00001 5.33333 3.00001Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M18.6667 3.00001C16.2062 2.99657 13.8315 3.88709 12 5.5V21C13.8315 19.3871 16.2062 18.4966 18.6667 18.5C20.2287 18.5 21.0097 18.5 21.3547 18.2792C21.5619 18.1466 21.6465 18.0619 21.7791 17.8547C22 17.5097 22 16.8941 22 15.6629V6.40322C22 4.97543 22 4.26154 21.4513 3.68286C20.9025 3.10418 20.3408 3.07432 19.2173 3.0146C19.035 3.00491 18.8514 3.00001 18.6667 3.00001Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/bot.tsx b/apps/sim/components/emcn/icons/bot.tsx
new file mode 100644
index 00000000000..11669b75fea
--- /dev/null
+++ b/apps/sim/components/emcn/icons/bot.tsx
@@ -0,0 +1,74 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Bot icon (Hugeicons stroke-rounded: BotIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Bot({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M13 7H11C8.19108 7 6.78661 7 5.77772 7.67412C5.34096 7.96596 4.96596 8.34096 4.67412 8.77772C4 9.78661 4 11.1911 4 14C4 16.8089 4 18.2134 4.67412 19.2223C4.96596 19.659 5.34096 20.034 5.77772 20.3259C6.78661 21 8.19108 21 11 21H13C15.8089 21 17.2134 21 18.2223 20.3259C18.659 20.034 19.034 19.659 19.3259 19.2223C20 18.2134 20 16.8089 20 14C20 11.1911 20 9.78661 19.3259 8.77772C19.034 8.34096 18.659 7.96596 18.2223 7.67412C17.2134 7 15.8089 7 13 7Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M4 14H2'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M10 17H14'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22 14H20'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15 11V13'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9 11V13'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 7C12 5.11438 12 4.17157 11.4142 3.58579C10.8284 3 9.88562 3 8 3'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/bubble-chat-delay.tsx b/apps/sim/components/emcn/icons/bubble-chat-delay.tsx
new file mode 100644
index 00000000000..490cf2b7f83
--- /dev/null
+++ b/apps/sim/components/emcn/icons/bubble-chat-delay.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * BubbleChatDelay icon (Hugeicons stroke-rounded: BubbleChatDelayIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function BubbleChatDelay({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C10.3719 21.5 8.8394 21.0904 7.5 20.3687C5.63177 19.362 4.37462 20.2979 3.26592 20.4658C3.09774 20.4913 2.93024 20.4302 2.80997 20.31C2.62741 20.1274 2.59266 19.8451 2.6935 19.6074C3.12865 18.5818 3.5282 16.6382 2.98341 15C2.6698 14.057 2.5 13.0483 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 7V12L15 14'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/bubble-chat-spark.tsx b/apps/sim/components/emcn/icons/bubble-chat-spark.tsx
new file mode 100644
index 00000000000..bfe3f640c54
--- /dev/null
+++ b/apps/sim/components/emcn/icons/bubble-chat-spark.tsx
@@ -0,0 +1,38 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * BubbleChatSpark icon (Hugeicons stroke-rounded: BubbleChatSparkIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function BubbleChatSpark({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C10.3719 21.5 8.8394 21.0904 7.5 20.3687C5.63177 19.362 4.37462 20.2979 3.26592 20.4658C3.09774 20.4913 2.93024 20.4302 2.80997 20.31C2.62741 20.1274 2.59266 19.8451 2.6935 19.6074C3.12865 18.5818 3.5282 16.6382 2.98341 15C2.6698 14.057 2.5 13.0483 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11.9649 8.02864C11.9727 7.99045 12.0273 7.99045 12.0351 8.02864C12.4402 10.0108 13.9892 11.5598 15.9714 11.9649C16.0095 11.9727 16.0095 12.0273 15.9714 12.0351C13.9892 12.4402 12.4402 13.9892 12.0351 15.9714C12.0273 16.0095 11.9727 16.0095 11.9649 15.9714C11.5598 13.9892 10.0108 12.4402 8.02864 12.0351C7.99045 12.0273 7.99045 11.9727 8.02864 11.9649C10.0108 11.5598 11.5598 10.0108 11.9649 8.02864Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/bug.tsx b/apps/sim/components/emcn/icons/bug.tsx
index 6fda698dea5..e325b6d9f17 100644
--- a/apps/sim/components/emcn/icons/bug.tsx
+++ b/apps/sim/components/emcn/icons/bug.tsx
@@ -1,33 +1,72 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Bug icon component - debug beetle
- * @param props - SVG properties including className, fill, etc.
+ * Bug icon (Hugeicons stroke-rounded: Bug01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Bug(props: SVGProps<SVGSVGElement>) {
+export function Bug({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M6.25 4.75L4.25 2.75' />
-      <path d='M14.25 4.75L16.25 2.75' />
-      <path d='M6.25 14.75L4.25 16.75' />
-      <path d='M14.25 14.75L16.25 16.75' />
-      <path d='M0.75 9.75H4.75' />
-      <path d='M15.75 9.75H19.75' />
-      <rect x='4.75' y='4.75' width='11' height='13' rx='5.5' />
-      <path d='M4.75 9.75H15.75' />
-      <line x1='10.25' y1='9.75' x2='10.25' y2='17.75' />
+      <path
+        d='M3.01309 4.99084C2.89323 6.05084 3.55249 8.42285 6.48923 8.42285'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17.5951 8.38081C18.8357 8.57881 21.1132 7.49881 20.9957 5.00281'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20.9928 20.9989C21.0528 19.9429 20.1777 17.5549 17.599 17.4229'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6.45163 17.4708C5.65013 17.2308 3.01306 18.3348 3.01306 20.9988'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9.3299 6.11884C9.35388 5.09884 9.84533 2.99884 12.0029 2.99884C13.9208 2.99884 14.5861 4.61884 14.676 6.11884M6.26131 9.41884C6.38118 8.63884 7.29216 6.81484 9.36586 6.63484C11.4635 6.55564 14.3403 6.58684 14.8797 6.67084C15.5869 6.73377 17.2951 7.43884 17.7506 9.41884C17.9124 10.4388 17.8285 11.8788 17.8524 12.7188C17.8165 13.5588 17.9207 15.2623 17.7565 16.1388C17.6367 17.0988 16.9894 18.4668 16.1024 19.3068C14.7838 20.7228 11.1639 22.2108 8.03534 19.4508C6.41713 17.8908 6.30925 16.3788 6.18939 15.7788C6.15725 15.4571 6.15875 13.8763 6.16541 12.3588C6.14144 11.046 6.17235 9.78063 6.26131 9.41884Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3.01306 12.8988H5.9498'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20.9929 12.8988L18.1161 12.8988'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12.0033 16.4988L12.0033 20.2788'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/building2.tsx b/apps/sim/components/emcn/icons/building2.tsx
new file mode 100644
index 00000000000..fc4abd9da70
--- /dev/null
+++ b/apps/sim/components/emcn/icons/building2.tsx
@@ -0,0 +1,50 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Building2 icon (Hugeicons stroke-rounded: Building06Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Building2({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M12 2H6C3.518 2 3 2.518 3 5V22H15V5C15 2.518 14.482 2 12 2Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M18 8H15V22H21V11C21 8.518 20.482 8 18 8Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8 6L10 6M8 9L10 9M8 12L10 12'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11.5 22V18C11.5 17.0572 11.5 16.5858 11.2071 16.2929C10.9142 16 10.4428 16 9.5 16H8.5C7.55719 16 7.08579 16 6.79289 16.2929C6.5 16.5858 6.5 17.0572 6.5 18V22'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/calendar-clock.tsx b/apps/sim/components/emcn/icons/calendar-clock.tsx
new file mode 100644
index 00000000000..64e457a18f1
--- /dev/null
+++ b/apps/sim/components/emcn/icons/calendar-clock.tsx
@@ -0,0 +1,60 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * CalendarClock icon (Hugeicons stroke-rounded: CalendarClockIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function CalendarClock({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M15.5 2V6M7.5 2V6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20.3985 8C20.2706 6.69989 19.9816 5.82475 19.3284 5.17157C18.1569 4 16.2712 4 12.5 4H10.5C6.72876 4 4.84315 4 3.67157 5.17157C2.5 6.34315 2.5 8.22876 2.5 12V14C2.5 17.7712 2.5 19.6569 3.67157 20.8284C4.47975 21.6366 5.6277 21.8873 7.5 21.965'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M2.5 10H7.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15.5 22C18.8137 22 21.5 19.3137 21.5 16C21.5 12.6863 18.8137 10 15.5 10C12.1863 10 9.5 12.6863 9.5 16C9.5 19.3137 12.1863 22 15.5 22Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15.5 13V16L17.5 17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/calendar.tsx b/apps/sim/components/emcn/icons/calendar.tsx
index a957bb9f6c3..bb5d7344458 100644
--- a/apps/sim/components/emcn/icons/calendar.tsx
+++ b/apps/sim/components/emcn/icons/calendar.tsx
@@ -1,28 +1,53 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Calendar icon component - displays a calendar with date clips
- * @param props - SVG properties including className, fill, etc.
+ * Calendar icon (Hugeicons stroke-rounded: Calendar01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Calendar(props: SVGProps<SVGSVGElement>) {
+export function Calendar({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 5.25C0.75 3.87 1.87 2.75 3.25 2.75H17.25C18.63 2.75 19.75 3.87 19.75 5.25V16.25C19.75 17.63 18.63 18.75 17.25 18.75H3.25C1.87 18.75 0.75 17.63 0.75 16.25V5.25Z' />
-      <path d='M0.75 8.25H19.75' />
-      <path d='M6.25 0.25V5.25' />
-      <path d='M14.25 0.25V5.25' />
+      <path
+        d='M16 2V6M8 2V6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13 4H11C7.22876 4 5.34315 4 4.17157 5.17157C3 6.34315 3 8.22876 3 12V14C3 17.7712 3 19.6569 4.17157 20.8284C5.34315 22 7.22876 22 11 22H13C16.7712 22 18.6569 22 19.8284 20.8284C21 19.6569 21 17.7712 21 14V12C21 8.22876 21 6.34315 19.8284 5.17157C18.6569 4 16.7712 4 13 4Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 10H21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M10 18.5002L9.99999 13.8474C9.99999 13.6557 9.86325 13.5002 9.69458 13.5002H9M14 18.4983L15.4855 13.8923C15.4951 13.8626 15.5 13.8315 15.5 13.8002C15.5 13.6346 15.3657 13.5002 15.2 13.5002L13 13.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/camera.tsx b/apps/sim/components/emcn/icons/camera.tsx
new file mode 100644
index 00000000000..0821512e127
--- /dev/null
+++ b/apps/sim/components/emcn/icons/camera.tsx
@@ -0,0 +1,45 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Camera icon (Hugeicons stroke-rounded: Camera01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Camera({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M12.6974 3.5H11.303C10.5884 3.5 10.2311 3.5 9.91067 3.612C9.71499 3.68039 9.53113 3.77879 9.36568 3.90367C9.09474 4.10816 8.89655 4.40544 8.50018 5L8.50017 5.00001C8.29717 5.30453 7.99794 5.75337 7.87867 5.87871C7.58314 6.18927 7.19563 6.39666 6.77329 6.47029C6.60284 6.5 6.41985 6.5 6.05387 6.5C5.07379 6.5 4.58376 6.5 4.18307 6.61342C3.18074 6.89716 2.39734 7.68055 2.1136 8.68289C2.00018 9.08357 2.00018 9.57361 2.00018 10.5537V14.5C2.00018 17.3284 2.00018 18.7426 2.87886 19.6213C3.75754 20.5 5.17176 20.5 8.00018 20.5H16.0002C18.8286 20.5 20.2428 20.5 21.1215 19.6213C22.0002 18.7426 22.0002 17.3284 22.0002 14.5V10.5537C22.0002 9.57361 22.0002 9.08357 21.8868 8.68289C21.603 7.68055 20.8196 6.89716 19.8173 6.61342C19.4166 6.5 18.9266 6.5 17.9465 6.5C17.5805 6.5 17.3975 6.5 17.2271 6.47029C16.8047 6.39666 16.4172 6.18927 16.1217 5.87871C16.0024 5.75336 15.7032 5.30451 15.5002 5C15.1038 4.40544 14.9056 4.10816 14.6347 3.90367C14.4692 3.77879 14.2854 3.68039 14.0897 3.612C13.7693 3.5 13.412 3.5 12.6974 3.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16.0002 13C16.0002 15.2091 14.2093 17 12.0002 17C9.79104 17 8.00018 15.2091 8.00018 13C8.00018 10.7909 9.79104 9 12.0002 9C14.2093 9 16.0002 10.7909 16.0002 13Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M19.1252 9.5H19.0002M19.2502 9.5C19.2502 9.63807 19.1383 9.75 19.0002 9.75C18.8621 9.75 18.7502 9.63807 18.7502 9.5C18.7502 9.36193 18.8621 9.25 19.0002 9.25C19.1383 9.25 19.2502 9.36193 19.2502 9.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/card.tsx b/apps/sim/components/emcn/icons/card.tsx
index ac0461deae8..c9ed8834a53 100644
--- a/apps/sim/components/emcn/icons/card.tsx
+++ b/apps/sim/components/emcn/icons/card.tsx
@@ -1,25 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Card icon component
- * @param props - SVG properties including className, fill, etc.
+ * Card icon (Hugeicons stroke-rounded: Cards01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Card(props: SVGProps<SVGSVGElement>) {
+export function Card({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='15'
-      height='12'
-      viewBox='0 0 15 12'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M8.17 0C9.41 0 10.38 0 11.15 0.09C11.92 0.17 12.55 0.36 13.07 0.77C13.23 0.89 13.37 1.03 13.5 1.18C13.95 1.67 14.15 2.28 14.24 3.02C14.33 3.75 14.334 4.67 14.334 5.83C14.334 7 14.33 7.92 14.24 8.65C14.15 9.39 13.95 9.99 13.5 10.49C13.37 10.638 13.23 10.775 13.07 10.9C12.55 11.31 11.92 11.49 11.15 11.58C10.38 11.67 9.41 11.666 8.17 11.666H6.17C4.93 11.666 3.95 11.67 3.19 11.58C2.41 11.49 1.78 11.31 1.26 10.9C1.11 10.775 0.96 10.638 0.83 10.49C0.39 9.99 0.19 9.39 0.09 8.65C0 7.92 0 7 0 5.83C-1.12e-10 4.67 0 3.75 0.09 3.02C0.19 2.28 0.39 1.67 0.83 1.18C0.96 1.03 1.11 0.89 1.26 0.77C1.78 0.36 2.41 0.17 3.19 0.09C3.95 0 4.93 0 6.17 0H8.17ZM1.01 4.33C1 4.76 1 5.26 1 5.83C1 7.03 1 7.87 1.08 8.52C1.165 9.16 1.32 9.54 1.58 9.83C1.67 9.93 1.77 10.03 1.88 10.11C2.2 10.36 2.61 10.51 3.3 10.59C4 10.67 4.9 10.666 6.17 10.666H8.17C9.43 10.666 10.34 10.67 11.03 10.59C11.72 10.51 12.138 10.36 12.45 10.11C12.56 10.03 12.67 9.93 12.76 9.83C13.02 9.54 13.169 9.16 13.25 8.52C13.33 7.87 13.334 7.03 13.334 5.83C13.334 5.26 13.33 4.76 13.32 4.33H1.01ZM6.83 8C7.11 8 7.33 8.22 7.33 8.5C7.33 8.78 7.11 9 6.83 9H5.83C5.56 9 5.33 8.78 5.33 8.5C5.33 8.22 5.56 8 5.83 8H6.83ZM11.167 8C11.44 8 11.667 8.22 11.667 8.5C11.67 8.78 11.443 9 11.167 9H8.83C8.56 9 8.33 8.78 8.33 8.5C8.33 8.22 8.56 8 8.83 8H11.167ZM6.17 1C4.9 1 4 1 3.3 1.08C2.61 1.16 2.2 1.3 1.88 1.55C1.77 1.64 1.67 1.74 1.58 1.84C1.32 2.13 1.165 2.51 1.08 3.14C1.08 3.21 1.07 3.27 1.06 3.33H13.27C13.26 3.27 13.26 3.21 13.25 3.14C13.169 2.51 13.02 2.13 12.76 1.84C12.67 1.74 12.56 1.64 12.45 1.55C12.138 1.3 11.72 1.16 11.03 1.08C10.34 1 9.43 1 8.17 1H6.17Z'
-        fill='currentColor'
+        d='M3 11C3 8.17157 3 6.75736 3.87868 5.87868C4.75736 5 6.17157 5 9 5H11C13.8284 5 15.2426 5 16.1213 5.87868C17 6.75736 17 8.17157 17 11V16C17 18.8284 17 20.2426 16.1213 21.1213C15.2426 22 13.8284 22 11 22H9C6.17157 22 4.75736 22 3.87868 21.1213C3 20.2426 3 18.8284 3 16V11Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8.04435 11.762L8.42742 11.3048C9.15621 10.4349 9.52061 10 10 10C10.4794 10 10.8438 10.4349 11.5726 11.3048L11.9556 11.762C12.6519 12.593 13 13.0086 13 13.5C13 13.9914 12.6519 14.407 11.9556 15.238L11.5726 15.6952C10.8438 16.5651 10.4794 17 10 17C9.52061 17 9.15621 16.5651 8.42742 15.6952L8.04435 15.238C7.34812 14.407 7 13.9914 7 13.5C7 13.0086 7.34812 12.593 8.04435 11.762Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16.9244 19C18.0202 18.3874 18.3929 17.0406 19.1383 14.3469L20.1925 10.5375C20.938 7.84378 21.3107 6.49694 20.678 5.4359C20.0453 4.37485 18.6543 4.01397 15.8724 3.2922L13.9052 2.78183C11.1232 2.06006 9.73225 1.69918 8.63642 2.31177C7.85623 2.74792 7.44258 3.55626 7 4.95786'
         stroke='currentColor'
-        strokeWidth='0.3'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/check.tsx b/apps/sim/components/emcn/icons/check.tsx
index 6a7c153bc70..3176733ace1 100644
--- a/apps/sim/components/emcn/icons/check.tsx
+++ b/apps/sim/components/emcn/icons/check.tsx
@@ -1,25 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Check icon component - checkmark
- * @param props - SVG properties including className, fill, etc.
+ * Check icon (Hugeicons stroke-rounded: Tick02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Check(props: SVGProps<SVGSVGElement>) {
+export function Check({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M18.25 2.75L7.25 15.75L1.75 10.25' />
+      <path
+        d='M5 14L8.5 17.5L19 6.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/chevron-down.tsx b/apps/sim/components/emcn/icons/chevron-down.tsx
index 7a85e52f3bd..17f9b41fed4 100644
--- a/apps/sim/components/emcn/icons/chevron-down.tsx
+++ b/apps/sim/components/emcn/icons/chevron-down.tsx
@@ -1,27 +1,31 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ChevronDown icon component
- * @param props - SVG properties including className, fill, etc.
+ * ChevronDown icon (Hugeicons stroke-rounded: ChevronDownIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ChevronDown(props: SVGProps<SVGSVGElement>) {
+export function ChevronDown({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='10'
-      height='6'
-      viewBox='0 0 10 6'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M1 1L5 5L9 1'
+        d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9'
         stroke='currentColor'
-        strokeWidth='1.2'
-        strokeLinecap='square'
-        strokeLinejoin='miter'
-        fill='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/chevron-left.tsx b/apps/sim/components/emcn/icons/chevron-left.tsx
new file mode 100644
index 00000000000..90eb98df839
--- /dev/null
+++ b/apps/sim/components/emcn/icons/chevron-left.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ChevronLeft icon (Hugeicons stroke-rounded: ChevronLeftIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ChevronLeft({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M15 18C15 18 9.00001 13.5811 9 12C8.99999 10.4188 15 6 15 6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/chevron-right.tsx b/apps/sim/components/emcn/icons/chevron-right.tsx
new file mode 100644
index 00000000000..9c99cea678d
--- /dev/null
+++ b/apps/sim/components/emcn/icons/chevron-right.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ChevronRight icon (Hugeicons stroke-rounded: ChevronRightIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ChevronRight({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M9.00005 18C9.00005 18 15 13.5811 15 12C15 10.4188 9 6 9 6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/chevron-up.tsx b/apps/sim/components/emcn/icons/chevron-up.tsx
new file mode 100644
index 00000000000..46d9e1d04df
--- /dev/null
+++ b/apps/sim/components/emcn/icons/chevron-up.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ChevronUp icon (Hugeicons stroke-rounded: ChevronUpIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ChevronUp({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M18 15C18 15 13.5811 9.00001 12 9C10.4188 8.99999 6 15 6 15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/chevrons-down-up.tsx b/apps/sim/components/emcn/icons/chevrons-down-up.tsx
new file mode 100644
index 00000000000..1403165c101
--- /dev/null
+++ b/apps/sim/components/emcn/icons/chevrons-down-up.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ChevronsDownUp icon (Hugeicons stroke-rounded: ChevronsDownUpIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ChevronsDownUp({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M7 19C7 19 10.6824 14 12 14C13.3176 14 17 19 17 19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7 5.00004C7 5.00004 10.6824 9.99999 12 10C13.3176 10 17 5 17 5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/chevrons-up-down.tsx b/apps/sim/components/emcn/icons/chevrons-up-down.tsx
new file mode 100644
index 00000000000..156c56ce6e4
--- /dev/null
+++ b/apps/sim/components/emcn/icons/chevrons-up-down.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ChevronsUpDown icon (Hugeicons stroke-rounded: UnfoldMoreIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ChevronsUpDown({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M18 14C18 14 13.5811 19 12 19C10.4188 19 6 14 6 14'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M18 9.99996C18 9.99996 13.5811 5.00001 12 5C10.4188 4.99999 6 10 6 10'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/circle-alert.tsx b/apps/sim/components/emcn/icons/circle-alert.tsx
index 91bd25154f4..0b8e09dfa5e 100644
--- a/apps/sim/components/emcn/icons/circle-alert.tsx
+++ b/apps/sim/components/emcn/icons/circle-alert.tsx
@@ -1,27 +1,48 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * CircleAlert icon component - circular alert used for error intent.
- * @param props - SVG properties including className, fill, etc.
+ * CircleAlert icon (Hugeicons stroke-rounded: AlertCircleIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function CircleAlert(props: SVGProps<SVGSVGElement>) {
+export function CircleAlert({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       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' />
+      <circle
+        cx='12'
+        cy='12'
+        r='10'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 8V12'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12.125 15.75H12M12.25 15.75C12.25 15.8881 12.1381 16 12 16C11.8619 16 11.75 15.8881 11.75 15.75C11.75 15.6119 11.8619 15.5 12 15.5C12.1381 15.5 12.25 15.6119 12.25 15.75Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/circle-check.tsx b/apps/sim/components/emcn/icons/circle-check.tsx
index 759ae6f51a0..e54c0572caa 100644
--- a/apps/sim/components/emcn/icons/circle-check.tsx
+++ b/apps/sim/components/emcn/icons/circle-check.tsx
@@ -1,26 +1,37 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * CircleCheck icon component - circular checkmark used for success intent.
- * @param props - SVG properties including className, fill, etc.
+ * CircleCheck icon (Hugeicons stroke-rounded: CheckmarkCircle01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function CircleCheck(props: SVGProps<SVGSVGElement>) {
+export function CircleCheck({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       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' />
+      <path
+        d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8 12.75C8 12.75 9.6 13.6625 10.4 15C10.4 15 12.8 9.75 16 8'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/circle-off.tsx b/apps/sim/components/emcn/icons/circle-off.tsx
new file mode 100644
index 00000000000..1865088f021
--- /dev/null
+++ b/apps/sim/components/emcn/icons/circle-off.tsx
@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * CircleOff icon (Hugeicons stroke-rounded: UnavailableIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function CircleOff({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M5.25 5L19.25 19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22.25 12C22.25 6.47715 17.7728 2 12.25 2C6.72715 2 2.25 6.47715 2.25 12C2.25 17.5228 6.72715 22 12.25 22C17.7728 22 22.25 17.5228 22.25 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/circle.tsx b/apps/sim/components/emcn/icons/circle.tsx
new file mode 100644
index 00000000000..85114bd905b
--- /dev/null
+++ b/apps/sim/components/emcn/icons/circle.tsx
@@ -0,0 +1,33 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Circle icon (Hugeicons stroke-rounded: CircleIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Circle({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <circle
+        cx='12'
+        cy='12'
+        r='10'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/clipboard-list.tsx b/apps/sim/components/emcn/icons/clipboard-list.tsx
index 605fd5543bf..f20386b302f 100644
--- a/apps/sim/components/emcn/icons/clipboard-list.tsx
+++ b/apps/sim/components/emcn/icons/clipboard-list.tsx
@@ -1,29 +1,67 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ClipboardList icon component - clipboard with checklist lines
- * @param props - SVG properties including className, fill, etc.
+ * ClipboardList icon (Hugeicons stroke-rounded: ClipboardListIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ClipboardList(props: SVGProps<SVGSVGElement>) {
+export function ClipboardList({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M3.75 4.25C3.75 2.87 4.87 1.75 6.25 1.75H14.25C15.63 1.75 16.75 2.87 16.75 4.25V17.25C16.75 18.63 15.63 19.75 14.25 19.75H6.25C4.87 19.75 3.75 18.63 3.75 17.25V4.25Z' />
-      <path d='M7.75 0.75H12.75V3.25C12.75 3.8 12.3 4.25 11.75 4.25H8.75C8.2 4.25 7.75 3.8 7.75 3.25V0.75Z' />
-      <path d='M7.75 8.75H12.75' />
-      <path d='M7.75 11.75H12.75' />
-      <path d='M7.75 14.75H10.75' />
+      <path
+        d='M12 11H16'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 16H16'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8 11H8.01'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8 16H8.01'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16 3.5C17.5535 3.54681 18.48 3.72007 19.1213 4.36137C20 5.24004 20 6.65424 20 9.48263L20 15.9995C20 18.8279 20 20.2421 19.1213 21.1208C18.2426 21.9995 16.8284 21.9995 14 21.9995L10 21.9995C7.17158 21.9995 5.75737 21.9995 4.87869 21.1208C4.00001 20.2421 4.00001 18.8279 4 15.9995L4.00001 9.48269C4.00001 6.65425 4 5.24004 4.87868 4.36136C5.51997 3.72007 6.44651 3.54681 7.9999 3.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/clipboard.tsx b/apps/sim/components/emcn/icons/clipboard.tsx
index 1bf26d7af58..ee8d6b3437b 100644
--- a/apps/sim/components/emcn/icons/clipboard.tsx
+++ b/apps/sim/components/emcn/icons/clipboard.tsx
@@ -1,26 +1,41 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Clipboard icon component
- * @param props - SVG properties including className, fill, etc.
+ * Clipboard icon (Hugeicons stroke-rounded: ClipboardIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Clipboard(props: SVGProps<SVGSVGElement>) {
+export function Clipboard({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.75'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M3.75 4.25C3.75 2.87 4.87 1.75 6.25 1.75H14.25C15.63 1.75 16.75 2.87 16.75 4.25V17.25C16.75 18.63 15.63 19.75 14.25 19.75H6.25C4.87 19.75 3.75 18.63 3.75 17.25V4.25Z' />
-      <path d='M7.75 0.75H12.75V3.25C12.75 3.8 12.3 4.25 11.75 4.25H8.75C8.2 4.25 7.75 3.8 7.75 3.25V0.75Z' />
+      <path
+        d='M17.0235 3.03358L16.0689 2.77924C13.369 2.05986 12.019 1.70018 10.9555 2.31074C9.89196 2.9213 9.53023 4.26367 8.80678 6.94841L7.78366 10.7452C7.0602 13.4299 6.69848 14.7723 7.3125 15.8298C7.92652 16.8874 9.27651 17.247 11.9765 17.9664L12.9311 18.2208C15.631 18.9401 16.981 19.2998 18.0445 18.6893C19.108 18.0787 19.4698 16.7363 20.1932 14.0516L21.2163 10.2548C21.9398 7.57005 22.3015 6.22768 21.6875 5.17016C21.0735 4.11264 19.7235 3.75295 17.0235 3.03358Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16.8538 7.43306C16.8538 8.24714 16.1901 8.90709 15.3714 8.90709C14.5527 8.90709 13.889 8.24714 13.889 7.43306C13.889 6.61898 14.5527 5.95904 15.3714 5.95904C16.1901 5.95904 16.8538 6.61898 16.8538 7.43306Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 20.9463L11.0477 21.2056C8.35403 21.9391 7.00722 22.3059 5.94619 21.6833C4.88517 21.0608 4.52429 19.6921 3.80253 16.9547L2.78182 13.0834C2.06006 10.346 1.69918 8.97731 2.31177 7.89904C2.84167 6.96631 4 7.00027 5.5 7.00015'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/clock.tsx b/apps/sim/components/emcn/icons/clock.tsx
index 4e423ffb290..48acd467bea 100644
--- a/apps/sim/components/emcn/icons/clock.tsx
+++ b/apps/sim/components/emcn/icons/clock.tsx
@@ -1,26 +1,33 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Clock icon component - circular clock face with hour and minute hands
- * @param props - SVG properties including className, fill, etc.
+ * Clock icon (Hugeicons stroke-rounded: Clock01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Clock(props: SVGProps<SVGSVGElement>) {
+export function Clock({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <circle cx='10.25' cy='9.75' r='9' />
-      <path d='M10.25 4.75V9.75L13.75 12.25' />
+      <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='1.5' />
+      <path
+        d='M12 8V12L14 14'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/columns2.tsx b/apps/sim/components/emcn/icons/columns2.tsx
index d5c5013ebc7..02fb9744d96 100644
--- a/apps/sim/components/emcn/icons/columns2.tsx
+++ b/apps/sim/components/emcn/icons/columns2.tsx
@@ -1,26 +1,33 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Columns2 icon component - displays two vertical columns in a rounded container
- * @param props - SVG properties including className, fill, etc.
+ * Columns2 icon (Hugeicons stroke-rounded: LayoutTwoColumnIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Columns2(props: SVGProps<SVGSVGElement>) {
+export function Columns2({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 3.25C0.75 1.87 1.87 0.75 3.25 0.75H17.25C18.63 0.75 19.75 1.87 19.75 3.25V16.25C19.75 17.63 18.63 18.75 17.25 18.75H3.25C1.87 18.75 0.75 17.63 0.75 16.25V3.25Z' />
-      <path d='M10.25 0.75V18.75' />
+      <path
+        d='M3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path d='M12 2.5V21.5' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/columns3.tsx b/apps/sim/components/emcn/icons/columns3.tsx
index 2d1b1eeb31b..decf12465b8 100644
--- a/apps/sim/components/emcn/icons/columns3.tsx
+++ b/apps/sim/components/emcn/icons/columns3.tsx
@@ -1,27 +1,34 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Columns3 icon component - displays three vertical columns in a rounded container
- * @param props - SVG properties including className, fill, etc.
+ * Columns3 icon (Hugeicons stroke-rounded: LayoutThreeColumnIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Columns3(props: SVGProps<SVGSVGElement>) {
+export function Columns3({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 3.25C0.75 1.87 1.87 0.75 3.25 0.75H17.25C18.63 0.75 19.75 1.87 19.75 3.25V16.25C19.75 17.63 18.63 18.75 17.25 18.75H3.25C1.87 18.75 0.75 17.63 0.75 16.25V3.25Z' />
-      <path d='M7.25 0.75V18.75' />
-      <path d='M13.25 0.75V18.75' />
+      <path
+        d='M20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path d='M8.5 2.5V21.5' stroke='currentColor' strokeWidth='1.5' />
+      <path d='M15.5 2.5V21.5' stroke='currentColor' strokeWidth='1.5' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/compass.tsx b/apps/sim/components/emcn/icons/compass.tsx
new file mode 100644
index 00000000000..51b6853a25d
--- /dev/null
+++ b/apps/sim/components/emcn/icons/compass.tsx
@@ -0,0 +1,53 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Compass icon (Hugeicons stroke-rounded: Compass01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Compass({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M10 10L5 22M14 10L19 22'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 4L12 2'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <circle cx='12' cy='7' r='3' stroke='currentColor' strokeWidth='1.5' />
+      <path
+        d='M3 13C4.99073 16.0242 8.27968 18 12 18C15.7203 18 19.0093 16.0242 21 13'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 17V19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/connections.tsx b/apps/sim/components/emcn/icons/connections.tsx
index 55bbcedfc82..db71452c34f 100644
--- a/apps/sim/components/emcn/icons/connections.tsx
+++ b/apps/sim/components/emcn/icons/connections.tsx
@@ -1,25 +1,36 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Connections icon component
- * @param props - SVG properties including className, fill, etc.
+ * Connections icon (Hugeicons stroke-rounded: ConnectIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Connections(props: SVGProps<SVGSVGElement>) {
+export function Connections({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='13'
-      height='13'
-      viewBox='0 0 13 13'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M10.167 0C11.73 0 13 1.27 13 2.83C13 4.23 11.993 5.38 10.667 5.62V7.34C10.99 7.34 11.27 7.35 11.51 7.38C11.89 7.43 12.23 7.54 12.51 7.82C12.79 8.1 12.9 8.45 12.95 8.82C13 9.18 13 9.63 13 10.167C13 10.7 13 11.155 12.95 11.51C12.9 11.89 12.79 12.23 12.51 12.51C12.23 12.79 11.89 12.9 11.51 12.95C11.155 13 10.7 13 10.167 13C9.63 13 9.18 13 8.82 12.95C8.45 12.9 8.1 12.79 7.82 12.51C7.54 12.23 7.43 11.89 7.38 11.51C7.35 11.27 7.34 10.99 7.34 10.667H5.66C5.66 10.99 5.65 11.27 5.62 11.51C5.57 11.89 5.46 12.23 5.18 12.51C4.9 12.79 4.55 12.9 4.18 12.95C3.82 13 3.37 13 2.83 13C2.3 13 1.85 13 1.49 12.95C1.11 12.9 0.77 12.79 0.49 12.51C0.21 12.23 0.1 11.89 0.05 11.51C0 11.155 -5.3e-07 10.7 0 10.167C0 9.63 0 9.18 0.05 8.82C0.1 8.45 0.21 8.1 0.49 7.82C0.77 7.54 1.11 7.43 1.49 7.38C1.85 7.33 2.3 7.33 2.83 7.33C3.37 7.33 3.82 7.33 4.18 7.38C4.55 7.43 4.9 7.54 5.18 7.82C5.46 8.1 5.57 8.45 5.62 8.82C5.65 9.06 5.66 9.34 5.66 9.67H7.34C7.34 9.34 7.35 9.06 7.38 8.82C7.43 8.45 7.54 8.1 7.82 7.82C8.1 7.54 8.45 7.43 8.82 7.38C9.06 7.35 9.34 7.34 9.67 7.34V5.62C8.5 5.41 7.59 4.5 7.38 3.33H5.66C5.66 3.66 5.65 3.94 5.62 4.18C5.57 4.55 5.46 4.9 5.18 5.18C4.9 5.46 4.55 5.57 4.18 5.62C3.82 5.67 3.37 5.67 2.83 5.67C2.3 5.67 1.85 5.67 1.49 5.62C1.11 5.57 0.77 5.46 0.49 5.18C0.21 4.9 0.1 4.55 0.05 4.18C0 3.82 0 3.37 0 2.83C-5.67e-07 2.3 0 1.85 0.05 1.49C0.1 1.11 0.21 0.77 0.49 0.49C0.77 0.21 1.11 0.1 1.49 0.05C1.85 0 2.3 -5.67e-07 2.83 0C3.37 0 3.82 0 4.18 0.05C4.55 0.1 4.9 0.21 5.18 0.49C5.46 0.77 5.57 1.11 5.62 1.49C5.65 1.73 5.66 2.01 5.66 2.33H7.38C7.62 1.01 8.77 0 10.167 0ZM2.83 8.33C2.27 8.33 1.9 8.33 1.62 8.37C1.36 8.41 1.26 8.47 1.2 8.53C1.13 8.59 1.07 8.69 1.04 8.95C1 9.23 1 9.6 1 10.167C1 10.73 1 11.1 1.04 11.38C1.07 11.64 1.13 11.74 1.2 11.8C1.26 11.87 1.36 11.93 1.62 11.96C1.9 12 2.27 12 2.83 12C3.4 12 3.77 12 4.05 11.96C4.31 11.93 4.41 11.87 4.47 11.8C4.53 11.74 4.59 11.64 4.63 11.38C4.67 11.1 4.67 10.73 4.67 10.167C4.67 9.6 4.67 9.23 4.63 8.95C4.59 8.69 4.53 8.59 4.47 8.53C4.41 8.47 4.31 8.41 4.05 8.37C3.77 8.33 3.4 8.33 2.83 8.33ZM10.167 8.33C9.6 8.33 9.23 8.33 8.95 8.37C8.69 8.41 8.59 8.47 8.53 8.53C8.47 8.59 8.41 8.69 8.37 8.95C8.33 9.23 8.33 9.6 8.33 10.167C8.33 10.73 8.33 11.1 8.37 11.38C8.41 11.64 8.47 11.74 8.53 11.8C8.59 11.87 8.69 11.93 8.95 11.96C9.23 12 9.6 12 10.167 12C10.73 12 11.1 12 11.38 11.96C11.64 11.93 11.74 11.87 11.8 11.8C11.87 11.74 11.93 11.64 11.96 11.38C12 11.1 12 10.73 12 10.167C12 9.6 12 9.23 11.96 8.95C11.93 8.69 11.87 8.59 11.8 8.53C11.74 8.47 11.64 8.41 11.38 8.37C11.1 8.33 10.73 8.33 10.167 8.33ZM2.83 1C2.27 1 1.9 1 1.62 1.04C1.36 1.07 1.26 1.13 1.2 1.2C1.13 1.26 1.07 1.36 1.04 1.62C1 1.9 1 2.27 1 2.83C1 3.4 1 3.77 1.04 4.05C1.07 4.31 1.13 4.41 1.2 4.47C1.26 4.53 1.36 4.59 1.62 4.63C1.9 4.67 2.27 4.67 2.83 4.67C3.4 4.67 3.77 4.67 4.05 4.63C4.31 4.59 4.41 4.53 4.47 4.47C4.53 4.41 4.59 4.31 4.63 4.05C4.67 3.77 4.67 3.4 4.67 2.83C4.67 2.27 4.67 1.9 4.63 1.62C4.59 1.36 4.53 1.26 4.47 1.2C4.41 1.13 4.31 1.07 4.05 1.04C3.77 1 3.4 1 2.83 1ZM10.167 1C9.15 1 8.33 1.82 8.33 2.83C8.33 3.85 9.15 4.67 10.167 4.67C11.18 4.67 12 3.85 12 2.83C12 1.82 11.18 1 10.167 1Z'
-        fill='currentColor'
+        d='M4.51255 19.4866C7.02498 21.8794 10.016 20.9223 11.2124 19.9532C11.8314 19.4518 12.1097 19.1277 12.3489 18.8884C13.1864 18.1107 13.1326 17.3331 12.5882 16.711C12.3704 16.462 10.9731 15.1198 9.63313 13.7439C8.93922 13.0499 8.46066 12.5595 8.05149 12.1647C7.50354 11.6185 7.02499 10.9922 6.30715 11.0101C5.64913 11.0101 5.17057 11.5904 4.57237 12.1886C3.88422 12.8767 3.37598 13.7439 3.19652 14.5216C2.65814 16.7947 3.49562 18.4098 4.51255 19.4866ZM4.51255 19.4866L2.00012 21.999'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M19.4867 4.51472C16.9736 2.12078 13.9929 3.09593 12.7962 4.06548C12.177 4.56712 11.8987 4.89138 11.6593 5.13078C10.8216 5.90881 10.8755 6.68683 11.42 7.30926C11.4983 7.39881 11.7292 7.62975 12.055 7.95281M19.4867 4.51472C20.504 5.59199 21.3528 7.22547 20.8142 9.49971C20.6347 10.2777 20.1264 11.1453 19.438 11.8338C18.8397 12.4323 18.361 13.0128 17.7028 13.0128C16.9847 13.0308 16.6121 12.5115 16.064 11.9651M19.4867 4.51472L21.9999 2.0011M16.064 11.9651C15.6547 11.5701 15.07 10.9721 14.3759 10.2777C13.5175 9.39612 12.6355 8.52831 12.055 7.95281M16.064 11.9651L14.5024 13.4896M10.5114 9.50609L12.055 7.95281'
         stroke='currentColor'
-        strokeWidth='0.2'
+        strokeLinecap='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/credit.tsx b/apps/sim/components/emcn/icons/credit.tsx
index 5e5a4e0c43b..5e20ac335ad 100644
--- a/apps/sim/components/emcn/icons/credit.tsx
+++ b/apps/sim/components/emcn/icons/credit.tsx
@@ -1,26 +1,47 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Credit icon component - circular token with inner ring
- * @param props - SVG properties including className, fill, etc.
+ * Credit icon (Hugeicons stroke-rounded: CreditCardIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Credit(props: SVGProps<SVGSVGElement>) {
+export function Credit({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <circle cx='10.25' cy='9.75' r='8.5' />
-      <circle cx='10.25' cy='9.75' r='3.5' />
+      <path
+        d='M2 12C2 8.46252 2 6.69377 3.0528 5.5129C3.22119 5.32403 3.40678 5.14935 3.60746 4.99087C4.86213 4 6.74142 4 10.5 4H13.5C17.2586 4 19.1379 4 20.3925 4.99087C20.5932 5.14935 20.7788 5.32403 20.9472 5.5129C22 6.69377 22 8.46252 22 12C22 15.5375 22 17.3062 20.9472 18.4871C20.7788 18.676 20.5932 18.8506 20.3925 19.0091C19.1379 20 17.2586 20 13.5 20H10.5C6.74142 20 4.86213 20 3.60746 19.0091C3.40678 18.8506 3.22119 18.676 3.0528 18.4871C2 17.3062 2 15.5375 2 12Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M10 16H11.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M14.5 16L18 16'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path d='M2 9H22' stroke='currentColor' strokeLinejoin='round' strokeWidth='1.5' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/cursor.tsx b/apps/sim/components/emcn/icons/cursor.tsx
index 9c0d3ad67f2..92082fa27ee 100644
--- a/apps/sim/components/emcn/icons/cursor.tsx
+++ b/apps/sim/components/emcn/icons/cursor.tsx
@@ -1,22 +1,30 @@
 import type { SVGProps } from 'react'
 
-export function Cursor(props: SVGProps<SVGSVGElement>) {
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Cursor icon (Hugeicons stroke-rounded: Cursor01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Cursor({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M20.51 10.78C21.12 10.54 21.431 10.42 21.52 10.25C21.59 10.099 21.59 9.92 21.51 9.78C21.42 9.61 21.109 9.5 20.486 9.28L4.6 3.57C4.09 3.39 3.83 3.3 3.67 3.36C3.52 3.41 3.41 3.52 3.36 3.66C3.3 3.83 3.39 4.09 3.57 4.6L9.277 20.49C9.5 21.11 9.61 21.42 9.78 21.51C9.92 21.59 10.1 21.59 10.25 21.52C10.42 21.43 10.54 21.12 10.78 20.51L13.37 13.83C13.42 13.707 13.44 13.65 13.48 13.6C13.51 13.55 13.55 13.51 13.6 13.479C13.65 13.44 13.71 13.42 13.828 13.37L20.51 10.78Z'
+        d='M5.10772 14.3857L5.58594 7.91256C5.61875 7.46854 5.64642 7.05187 5.67232 6.66186C5.85017 3.98379 5.94481 2.55876 7.04807 2.10979C8.15132 1.66082 9.2022 2.61969 11.1771 4.42168C11.4647 4.68413 11.772 4.96446 12.1018 5.26093L16.9102 9.58273C18.2626 10.7983 18.9389 11.4062 18.9934 11.9885C19.0309 12.3882 18.9067 12.7862 18.6489 13.0924C18.2733 13.5385 17.3734 13.6473 15.5737 13.8647C14.8156 13.9563 14.4365 14.0021 14.2073 14.2038C14.0479 14.344 13.9376 14.5321 13.8925 14.7404C13.8277 15.0399 13.9707 15.3964 14.2567 16.1095L15.7394 19.8058C15.9107 20.2328 15.9963 20.4464 15.995 20.6429C15.9932 20.9078 15.8865 21.1609 15.6986 21.3462C15.5591 21.4837 15.3471 21.57 14.9232 21.7425C14.4993 21.915 14.2873 22.0013 14.0921 22C13.8292 21.9982 13.5778 21.8907 13.3939 21.7015C13.2574 21.561 13.1717 21.3475 13.0004 20.9204L11.5177 17.2241C11.2317 16.5111 11.0887 16.1545 10.8355 15.9844C10.6595 15.8662 10.4503 15.8081 10.239 15.8187C9.935 15.834 9.63074 16.0663 9.02224 16.5308C7.57763 17.6337 6.85532 18.1851 6.27746 18.1269C5.88085 18.0871 5.51701 17.8877 5.26831 17.574C4.90595 17.1169 4.9732 16.2065 5.10772 14.3857Z'
         stroke='currentColor'
-        strokeWidth='1.55'
-        strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/database-x.tsx b/apps/sim/components/emcn/icons/database-x.tsx
index 0752bb28e23..91e042be48f 100644
--- a/apps/sim/components/emcn/icons/database-x.tsx
+++ b/apps/sim/components/emcn/icons/database-x.tsx
@@ -1,30 +1,65 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Database-X icon component - cylinder database with an X mark indicating a missing or deleted knowledge base
- * @param props - SVG properties including className, fill, etc.
+ * DatabaseX icon (Hugeicons stroke-rounded: Database01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function DatabaseX(props: SVGProps<SVGSVGElement>) {
+export function DatabaseX({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <ellipse cx='10.25' cy='3.75' rx='8.5' ry='3' />
-      <path d='M1.75 3.75V9.75C1.75 11.41 5.55 12.75 10.25 12.75C14.95 12.75 18.75 11.41 18.75 9.75V3.75' />
-      <path d='M1.75 9.75V12.5' />
-      <path d='M18.75 9.75V15.75C18.75 17.41 14.95 18.75 10.25 18.75C9 18.75 7.75 18.6 6.75 18.3' />
-      <path d='M1 16L5 20' />
-      <path d='M5 16L1 20' />
+      <path
+        d='M3 12C3 7.75736 3 5.63604 4.31802 4.31802C5.63604 3 7.75736 3 12 3C16.2426 3 18.364 3 19.682 4.31802C21 5.63604 21 7.75736 21 12C21 16.2426 21 18.364 19.682 19.682C18.364 21 16.2426 21 12 21C7.75736 21 5.63604 21 4.31802 19.682C3 18.364 3 16.2426 3 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 12H21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11 7.5L17 7.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7.125 7.5H7M7.25 7.5C7.25 7.63807 7.13807 7.75 7 7.75C6.86193 7.75 6.75 7.63807 6.75 7.5C6.75 7.36193 6.86193 7.25 7 7.25C7.13807 7.25 7.25 7.36193 7.25 7.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11 16.5L17 16.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7.125 16.5H7M7.25 16.5C7.25 16.6381 7.13807 16.75 7 16.75C6.86193 16.75 6.75 16.6381 6.75 16.5C6.75 16.3619 6.86193 16.25 7 16.25C7.13807 16.25 7.25 16.3619 7.25 16.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/database.tsx b/apps/sim/components/emcn/icons/database.tsx
index d0a221cdeb2..9ff2959d483 100644
--- a/apps/sim/components/emcn/icons/database.tsx
+++ b/apps/sim/components/emcn/icons/database.tsx
@@ -1,27 +1,48 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Database icon component - cylinder with horizontal dividers
- * @param props - SVG properties including className, fill, etc.
+ * Database icon (Hugeicons stroke-rounded: DatabaseIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Database(props: SVGProps<SVGSVGElement>) {
+export function Database({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <ellipse cx='10.25' cy='3.75' rx='8.5' ry='3' />
-      <path d='M1.75 3.75V9.75C1.75 11.41 5.55 12.75 10.25 12.75C14.95 12.75 18.75 11.41 18.75 9.75V3.75' />
-      <path d='M1.75 9.75V15.75C1.75 17.41 5.55 18.75 10.25 18.75C14.95 18.75 18.75 17.41 18.75 15.75V9.75' />
+      <ellipse cx='12' cy='5' rx='8' ry='3' stroke='currentColor' strokeWidth='1.5' />
+      <path
+        d='M7 10.842C7.60158 11.0229 8.27434 11.1718 9 11.282'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20 12C20 13.6569 16.4183 15 12 15C7.58172 15 4 13.6569 4 12'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7 17.842C7.60158 18.0229 8.27434 18.1718 9 18.282'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20 5V19C20 20.6569 16.4183 22 12 22C7.58172 22 4 20.6569 4 19V5'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/duplicate.tsx b/apps/sim/components/emcn/icons/duplicate.tsx
index 36e235f3fde..62243c4781a 100644
--- a/apps/sim/components/emcn/icons/duplicate.tsx
+++ b/apps/sim/components/emcn/icons/duplicate.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Duplicate icon component - two overlapping rounded rectangles
- * @param props - SVG properties including className, fill, etc.
+ * Duplicate icon (Hugeicons stroke-rounded: Copy01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Duplicate(props: SVGProps<SVGSVGElement>) {
+export function Duplicate({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M14.25 0.75H2.75C1.64543 0.75 0.75 1.64543 0.75 2.75V14.25' />
-      <rect x='5.25' y='5.25' width='14' height='14' rx='2' />
+      <path
+        d='M9 15C9 12.1716 9 10.7574 9.87868 9.87868C10.7574 9 12.1716 9 15 9L16 9C18.8284 9 20.2426 9 21.1213 9.87868C22 10.7574 22 12.1716 22 15V16C22 18.8284 22 20.2426 21.1213 21.1213C20.2426 22 18.8284 22 16 22H15C12.1716 22 10.7574 22 9.87868 21.1213C9 20.2426 9 18.8284 9 16L9 15Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16.9999 9C16.9975 6.04291 16.9528 4.51121 16.092 3.46243C15.9258 3.25989 15.7401 3.07418 15.5376 2.90796C14.4312 2 12.7875 2 9.5 2C6.21252 2 4.56878 2 3.46243 2.90796C3.25989 3.07417 3.07418 3.25989 2.90796 3.46243C2 4.56878 2 6.21252 2 9.5C2 12.7875 2 14.4312 2.90796 15.5376C3.07417 15.7401 3.25989 15.9258 3.46243 16.092C4.51121 16.9528 6.04291 16.9975 9 16.9999'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/expand.tsx b/apps/sim/components/emcn/icons/expand.tsx
index 7d5d4f048e8..08479749dda 100644
--- a/apps/sim/components/emcn/icons/expand.tsx
+++ b/apps/sim/components/emcn/icons/expand.tsx
@@ -1,43 +1,38 @@
 import type { SVGProps } from 'react'
 
-export function Expand(props: SVGProps<SVGSVGElement>) {
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Expand icon (Hugeicons stroke-rounded: ArrowExpand01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Expand({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M15 3H21V9'
-        stroke='currentColor'
-        strokeWidth='1.55'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M9 21H3V15'
-        stroke='currentColor'
-        strokeWidth='1.55'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M21 3L14 10'
+        d='M16.4999 3.26621C17.3443 3.25421 20.1408 2.67328 20.7337 3.26621C21.3266 3.85913 20.7457 6.65559 20.7337 7.5M20.5059 3.49097L13.5021 10.4961'
         stroke='currentColor'
-        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
       <path
-        d='M3 21L10 14'
+        d='M3.26636 16.5001C3.25436 17.3445 2.67343 20.141 3.26636 20.7339C3.85928 21.3268 6.65574 20.7459 7.50015 20.7339M10.502 13.4976L3.49824 20.5027'
         stroke='currentColor'
-        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/external-link.tsx b/apps/sim/components/emcn/icons/external-link.tsx
new file mode 100644
index 00000000000..089354bbfd6
--- /dev/null
+++ b/apps/sim/components/emcn/icons/external-link.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * ExternalLink icon (Hugeicons stroke-rounded: LinkSquare02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ExternalLink({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M11.0991 3.00012C7.45013 3.00669 5.53932 3.09629 4.31817 4.31764C3.00034 5.63568 3.00034 7.75704 3.00034 11.9997C3.00034 16.2424 3.00034 18.3638 4.31817 19.6818C5.63599 20.9999 7.75701 20.9999 11.9991 20.9999C16.241 20.9999 18.3621 20.9999 19.6799 19.6818C20.901 18.4605 20.9906 16.5493 20.9972 12.8998'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20.556 3.49612L11.0487 13.0586M20.556 3.49612C20.062 3.00151 16.7343 3.04761 16.0308 3.05762M20.556 3.49612C21.05 3.99074 21.0039 7.32273 20.9939 8.02714'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/eye-off.tsx b/apps/sim/components/emcn/icons/eye-off.tsx
index 62cc6922ae8..e3f461cfab5 100644
--- a/apps/sim/components/emcn/icons/eye-off.tsx
+++ b/apps/sim/components/emcn/icons/eye-off.tsx
@@ -1,33 +1,45 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Eye-off icon. Companion to {@link Eye}; used for "hide" affordances where
- * something is being concealed without being destroyed (e.g. hide a workflow
- * output column from the table while keeping it re-addable from the sidebar).
- *
- * Uses currentColor so it inherits the surrounding text color.
- *
- * @param props - SVG properties including className, fill, etc.
+ * EyeOff icon (Hugeicons stroke-rounded: ViewOffSlashIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function EyeOff(props: SVGProps<SVGSVGElement>) {
+export function EyeOff({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='14'
-      height='14'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='2'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M9.88 9.88a3 3 0 1 0 4.24 4.24' />
-      <path d='M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68' />
-      <path d='M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61' />
-      <line x1='2' y1='2' x2='22' y2='22' />
+      <path
+        d='M19.439 15.439C20.3636 14.5212 21.0775 13.6091 21.544 12.955C21.848 12.5287 22 12.3155 22 12C22 11.6845 21.848 11.4713 21.544 11.045C20.1779 9.12944 16.6892 5 12 5C11.0922 5 10.2294 5.15476 9.41827 5.41827M6.74742 6.74742C4.73118 8.1072 3.24215 9.94266 2.45604 11.045C2.15201 11.4713 2 11.6845 2 12C2 12.3155 2.15201 12.5287 2.45604 12.955C3.8221 14.8706 7.31078 19 12 19C13.9908 19 15.7651 18.2557 17.2526 17.2526'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9.85786 10C9.32783 10.53 9 11.2623 9 12.0711C9 13.6887 10.3113 15 11.9289 15C12.7377 15 13.47 14.6722 14 14.1421'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 3L21 21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/eye.tsx b/apps/sim/components/emcn/icons/eye.tsx
index dce17a570f7..01ed926471b 100644
--- a/apps/sim/components/emcn/icons/eye.tsx
+++ b/apps/sim/components/emcn/icons/eye.tsx
@@ -1,26 +1,35 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Eye icon component - almond outline with circular pupil
- * @param props - SVG properties including className, fill, etc.
+ * Eye icon (Hugeicons stroke-rounded: ViewIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Eye(props: SVGProps<SVGSVGElement>) {
+export function Eye({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 9.75C3 4.25 6.75 1.75 10.25 1.75C13.75 1.75 17.5 4.25 19.75 9.75C17.5 15.25 13.75 17.75 10.25 17.75C6.75 17.75 3 15.25 0.75 9.75Z' />
-      <circle cx='10.25' cy='9.75' r='3.25' />
+      <path
+        d='M21.544 11.045C21.848 11.4713 22 11.6845 22 12C22 12.3155 21.848 12.5287 21.544 12.955C20.1779 14.8706 16.6892 19 12 19C7.31078 19 3.8221 14.8706 2.45604 12.955C2.15201 12.5287 2 12.3155 2 12C2 11.6845 2.15201 11.4713 2.45604 11.045C3.8221 9.12944 7.31078 5 12 5C16.6892 5 20.1779 9.12944 21.544 11.045Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/file-text.tsx b/apps/sim/components/emcn/icons/file-text.tsx
new file mode 100644
index 00000000000..d29f8318c05
--- /dev/null
+++ b/apps/sim/components/emcn/icons/file-text.tsx
@@ -0,0 +1,46 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * FileText icon (Hugeicons stroke-rounded: File02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function FileText({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M8 17H16'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8 13H12'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13 2.5V3C13 5.82843 13 7.24264 13.8787 8.12132C14.7574 9 16.1716 9 19 9H19.5M20 10.6569V14C20 17.7712 20 19.6569 18.8284 20.8284C17.6569 22 15.7712 22 12 22C8.22876 22 6.34315 22 5.17157 20.8284C4 19.6569 4 17.7712 4 14V9.45584C4 6.21082 4 4.58831 4.88607 3.48933C5.06508 3.26731 5.26731 3.06508 5.48933 2.88607C6.58831 2 8.21082 2 11.4558 2C12.1614 2 12.5141 2 12.8372 2.11401C12.9044 2.13772 12.9702 2.165 13.0345 2.19575C13.3436 2.34355 13.593 2.593 14.0919 3.09188L18.8284 7.82843C19.4065 8.40649 19.6955 8.69552 19.8478 9.06306C20 9.4306 20 9.83935 20 10.6569Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/file-x.tsx b/apps/sim/components/emcn/icons/file-x.tsx
index 0d956f71337..be8ee5d2e5d 100644
--- a/apps/sim/components/emcn/icons/file-x.tsx
+++ b/apps/sim/components/emcn/icons/file-x.tsx
@@ -1,28 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * File-X icon component - document with an X mark indicating a missing or deleted file
- * @param props - SVG properties including className, fill, etc.
+ * FileX icon (Hugeicons stroke-rounded: FileRemoveIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function FileX(props: SVGProps<SVGSVGElement>) {
+export function FileX({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M3.25 12.5V2.75C3.25 1.65 4.15 0.75 5.25 0.75H12.25L17.25 5.75V16.75C17.25 17.85 16.35 18.75 15.25 18.75H9.5' />
-      <path d='M12.25 0.75V5.75H17.25' />
-      <path d='M3.25 15L7.25 19' />
-      <path d='M7.25 15L3.25 19' />
+      <path
+        d='M4 11.9949L4 14.5404C4 17.7871 4 19.4104 4.88607 20.5099C5.06508 20.732 5.26731 20.9344 5.48933 21.1135C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.8859C12.9044 21.8622 12.9702 21.8349 13.0345 21.8042C13.3436 21.6563 13.593 21.4067 14.0919 20.9076L18.8284 16.1686C19.4065 15.5903 19.6955 15.3011 19.8478 14.9334C20 14.5656 20 14.1567 20 13.3388V9.99394C20 6.2208 20 4.33423 18.8284 3.16206C17.8971 2.23022 16.5144 2.03917 14.0919 2M13 21.4997V20.9995C13 18.1696 13 16.7547 13.8787 15.8756C14.7574 14.9965 16.1716 14.9965 19 14.9965H19.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11 9L4 2M11 2L4 9'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/file.tsx b/apps/sim/components/emcn/icons/file.tsx
index 42ec984b409..cc27d468ccc 100644
--- a/apps/sim/components/emcn/icons/file.tsx
+++ b/apps/sim/components/emcn/icons/file.tsx
@@ -1,26 +1,46 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * File icon component - single document with folded corner
- * @param props - SVG properties including className, fill, etc.
+ * File icon (Hugeicons stroke-rounded: File01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function File(props: SVGProps<SVGSVGElement>) {
+export function File({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M12.25 0.75H5.25C4.15 0.75 3.25 1.65 3.25 2.75V16.75C3.25 17.85 4.15 18.75 5.25 18.75H15.25C16.35 18.75 17.25 17.85 17.25 16.75V5.75L12.25 0.75Z' />
-      <path d='M12.25 0.75V5.75H17.25' />
+      <path
+        d='M8 7L16 7'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8 11L12 11'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13 21.5V21C13 18.1716 13 16.7574 13.8787 15.8787C14.7574 15 16.1716 15 19 15H19.5M20 13.3431V10C20 6.22876 20 4.34315 18.8284 3.17157C17.6569 2 15.7712 2 12 2C8.22877 2 6.34315 2 5.17157 3.17157C4 4.34314 4 6.22876 4 10L4 14.5442C4 17.7892 4 19.4117 4.88607 20.5107C5.06508 20.7327 5.26731 20.9349 5.48933 21.1139C6.58831 22 8.21082 22 11.4558 22C12.1614 22 12.5141 22 12.8372 21.886C12.9044 21.8623 12.9702 21.835 13.0345 21.8043C13.3436 21.6564 13.593 21.407 14.0919 20.9081L18.8284 16.1716C19.4065 15.5935 19.6955 15.3045 19.8478 14.9369C20 14.5694 20 14.1606 20 13.3431Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/files.tsx b/apps/sim/components/emcn/icons/files.tsx
index c7ed29bfdbb..ef3448b2142 100644
--- a/apps/sim/components/emcn/icons/files.tsx
+++ b/apps/sim/components/emcn/icons/files.tsx
@@ -1,27 +1,53 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Files icon component - stacked documents with folded corner on the front doc
- * @param props - SVG properties including className, fill, etc.
+ * Files icon (Hugeicons stroke-rounded: Files01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Files(props: SVGProps<SVGSVGElement>) {
+export function Files({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M11.25 1.75H4.25C3.14543 1.75 2.25 2.64543 2.25 3.75V14.75' />
-      <path d='M14.25 4.75H7.25C6.14543 4.75 5.25 5.64543 5.25 6.75V17.75C5.25 18.8546 6.14543 19.75 7.25 19.75H17.25C18.3546 19.75 19.25 18.8546 19.25 17.75V9.75L14.25 4.75Z' />
-      <path d='M14.25 4.75V9.75H19.25' />
+      <path
+        d='M14.4998 19H12.4998C9.67139 19 8.25718 19 7.3785 18.1213C6.49982 17.2426 6.49982 15.8284 6.49982 13V8C6.49982 5.17157 6.49982 3.75736 7.3785 2.87868C8.25718 2 9.67139 2 12.4998 2H13.843C14.6605 2 15.0692 2 15.4368 2.15224C15.8043 2.30448 16.0933 2.59351 16.6714 3.17157L19.3282 5.82843C19.9063 6.40648 20.1953 6.69552 20.3476 7.06306C20.4998 7.4306 20.4998 7.83935 20.4998 8.65685V13C20.4998 15.8284 20.4998 17.2426 19.6211 18.1213C18.7425 19 17.3282 19 14.4998 19Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M14.9998 2.5V3.5C14.9998 5.38562 14.9998 6.32843 15.5856 6.91421C16.1714 7.5 17.1142 7.5 18.9998 7.5H19.9998'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6.49945 5C4.8426 5 3.49945 6.34315 3.49945 8V16C3.49945 18.8285 3.49945 20.2427 4.37813 21.1213C5.25681 22 6.67102 22 9.49945 22H14.4998C16.1566 22 17.4998 20.6568 17.4998 19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M10 11H14M10 15H17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/filter.tsx b/apps/sim/components/emcn/icons/filter.tsx
new file mode 100644
index 00000000000..70cc0d83847
--- /dev/null
+++ b/apps/sim/components/emcn/icons/filter.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Filter icon (Hugeicons stroke-rounded: FilterIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Filter({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M8.85746 12.5061C6.36901 10.6456 4.59564 8.59915 3.62734 7.44867C3.3276 7.09253 3.22938 6.8319 3.17033 6.3728C2.96811 4.8008 2.86701 4.0148 3.32795 3.5074C3.7889 3 4.60404 3 6.23433 3H17.7657C19.396 3 20.2111 3 20.672 3.5074C21.133 4.0148 21.0319 4.8008 20.8297 6.37281C20.7706 6.83191 20.6724 7.09254 20.3726 7.44867C19.403 8.60062 17.6261 10.6507 15.1326 12.5135C14.907 12.6821 14.7583 12.9567 14.7307 13.2614C14.4837 15.992 14.2559 17.4876 14.1141 18.2442C13.8853 19.4657 12.1532 20.2006 11.226 20.8563C10.6741 21.2466 10.0043 20.782 9.93278 20.1778C9.79643 19.0261 9.53961 16.6864 9.25927 13.2614C9.23409 12.9539 9.08486 12.6761 8.85746 12.5061Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/fingerprint.tsx b/apps/sim/components/emcn/icons/fingerprint.tsx
index d801a4c3609..680adb3ba3f 100644
--- a/apps/sim/components/emcn/icons/fingerprint.tsx
+++ b/apps/sim/components/emcn/icons/fingerprint.tsx
@@ -1,33 +1,46 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Fingerprint icon component — unique constraint indicator
- * @param props - SVG properties including className, fill, etc.
+ * Fingerprint icon (Hugeicons stroke-rounded: FingerPrintIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Fingerprint(props: SVGProps<SVGSVGElement>) {
+export function Fingerprint({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4' />
-      <path d='M14 13.12c0 2.38 0 6.38-1 8.88' />
-      <path d='M17.29 21.02c.12-.6.43-2.3.5-3.02' />
-      <path d='M2 12a10 10 0 0 1 18-6' />
-      <path d='M2 16h.01' />
-      <path d='M21.8 16c.2-2 .131-5.354 0-6' />
-      <path d='M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2' />
-      <path d='M8.65 22c.21-.66.45-1.32.57-2' />
-      <path d='M9 6.8a6 6 0 0 1 9 5.2v2' />
+      <path
+        d='M7.42857 3.36201C11.3996 0.664089 17.136 2.12432 19.2301 6.41803M10.8571 21.9236C15.5839 22.5822 20 18.8952 20 14.2103V10.3333M7.42857 20.6058C5.35602 19.1977 4 16.8583 4 14.2103V9.75757C4 8.57285 4.27144 7.44988 4.75704 6.44444'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16 13.8C16 16.1196 14.2091 18 12 18C9.79086 18 8 16.1196 8 13.8V10.2C8 9.55584 8.13811 8.94555 8.38493 8.4M12 6C14.2091 6 16 7.8804 16 10.2'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 10.5L12 13.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/folder-code.tsx b/apps/sim/components/emcn/icons/folder-code.tsx
index d6ef5f67a4a..99ad2324cd9 100644
--- a/apps/sim/components/emcn/icons/folder-code.tsx
+++ b/apps/sim/components/emcn/icons/folder-code.tsx
@@ -1,40 +1,46 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * FolderCode icon component
- * @param props - SVG properties including className, fill, etc.
+ * FolderCode icon (Hugeicons stroke-rounded: FolderCodeIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function FolderCode(props: SVGProps<SVGSVGElement>) {
+export function FolderCode({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='15'
-      height='13'
-      viewBox='0 0 15 13'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M4.32e-07 5.83V3.8C4.32e-07 3.2 0 2.72 0.03 2.33C0.07 1.94 0.14 1.6 0.32 1.28C0.54 0.88 0.88 0.54 1.28 0.32C1.6 0.14 1.94 0.07 2.33 0.03C2.72 0 3.2 5.96e-05 3.8 5.96e-05C4.53 5.93e-05 5.03 -0.01 5.48 0.16C6.47 0.53 6.87 1.45 7.19 2.1L7.48 2.67H10.33C11.025 2.67 11.58 2.67 12.03 2.71C12.48 2.76 12.874 2.86 13.222 3.09C13.495 3.27 13.73 3.51 13.91 3.78C14.14 4.13 14.24 4.52 14.29 4.97C14.33 5.42 14.33 5.98 14.33 6.67C14.33 7.83 14.33 8.73 14.26 9.46C14.19 10.19 14.03 10.78 13.69 11.3C13.41 11.71 13.05 12.07 12.63 12.35C12.11 12.7 11.52 12.85 10.79 12.93C10.07 13 9.16 13 8 13H7.17C5.61 13 4.39 13 3.44 12.87C2.48 12.74 1.72 12.47 1.12 11.877C0.53 11.28 0.26 10.52 0.13 9.56C0 8.61 4.32e-07 7.39 4.32e-07 5.83ZM1 5.83C1 7.42 1 8.56 1.12 9.42C1.23 10.28 1.45 10.79 1.83 11.17C2.21 11.55 2.72 11.77 3.58 11.88C4.44 12 5.58 12 7.17 12H8C9.18 12 10.029 12 10.69 11.93C11.34 11.87 11.75 11.74 12.07 11.52C12.38 11.32 12.65 11.05 12.86 10.74C13.07 10.42 13.2 10.01 13.27 9.35C13.33 8.7 13.33 7.85 13.33 6.67C13.33 5.95 13.33 5.46 13.29 5.07C13.26 4.7 13.19 4.49 13.08 4.33C12.97 4.17 12.83 4.03 12.67 3.92C12.51 3.81 12.3 3.74 11.93 3.71C11.54 3.67 11.046 3.67 10.33 3.67H5.17C4.89 3.67 4.67 3.44 4.67 3.17C4.67 2.89 4.89 2.67 5.17 2.67H6.36L6.3 2.55C5.92 1.8 5.68 1.3 5.12 1.1C4.89 1.01 4.61 1 3.8 1C3.18 1 2.75 1 2.42 1.03C2.1 1.06 1.91 1.11 1.77 1.19C1.53 1.33 1.33 1.53 1.19 1.77C1.11 1.91 1.06 2.1 1.03 2.42C1 2.75 1 3.18 1 3.8V5.83Z'
-        fill='currentColor'
+        d='M8 7H16.75C18.8567 7 19.91 7 20.6667 7.50559C20.9943 7.72447 21.2755 8.00572 21.4944 8.33329C22 9.08996 22 10.1433 22 12.25C22 15.7612 22 17.5167 21.1573 18.7779C20.7926 19.3238 20.3238 19.7926 19.7779 20.1573C18.5167 21 16.7612 21 13.25 21H12C7.28595 21 4.92893 21 3.46447 19.5355C2 18.0711 2 15.714 2 11V7.94427C2 6.1278 2 5.21956 2.38032 4.53806C2.65142 4.05227 3.05227 3.65142 3.53806 3.38032C4.21956 3 5.1278 3 6.94427 3C8.10802 3 8.6899 3 9.19926 3.19101C10.3622 3.62712 10.8418 4.68358 11.3666 5.73313L12 7'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M14 17C14 17 17 14.7905 17 14C17 13.2094 14 11 14 11'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9.99998 17C9.99998 17 7.00001 14.7905 7 14C6.99999 13.2094 10 11 10 11'
         stroke='currentColor'
-        strokeWidth='0.3'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
       />
-      <g transform='translate(0, 0.3)'>
-        <path
-          d='M9.83 6.12C9.617 5.94 9.3 5.96 9.12 6.17C8.94 6.38 8.96 6.7 9.17 6.88L9.79 7.41C9.83 7.44 9.86 7.47 9.89 7.5C9.86 7.53 9.83 7.56 9.79 7.59L9.17 8.12C8.96 8.3 8.94 8.62 9.12 8.83C9.3 9.04 9.617 9.06 9.83 8.88L10.44 8.35C10.56 8.25 10.69 8.14 10.778 8.04C10.86 7.94 10.97 7.79 10.99 7.59L11 7.5L10.99 7.41C10.97 7.21 10.86 7.06 10.778 6.96C10.69 6.86 10.56 6.75 10.44 6.65L9.83 6.12Z'
-          fill='currentColor'
-        />
-        <path
-          d='M4.51 6.12C4.72 5.94 5.03 5.96 5.21 6.17C5.39 6.38 5.37 6.7 5.16 6.88L4.55 7.41C4.51 7.44 4.47 7.47 4.44 7.5C4.47 7.53 4.51 7.56 4.55 7.59L5.16 8.12C5.37 8.3 5.39 8.62 5.21 8.83C5.03 9.04 4.72 9.06 4.51 8.88L3.89 8.35C3.78 8.25 3.65 8.14 3.56 8.04C3.469 7.94 3.36 7.79 3.34 7.59L3.33 7.5L3.34 7.41C3.36 7.21 3.469 7.06 3.56 6.96C3.65 6.86 3.78 6.75 3.89 6.65L4.51 6.12Z'
-          fill='currentColor'
-        />
-        <path
-          d='M7.37 5.65C7.47 5.39 7.76 5.27 8.02 5.37C8.28 5.47 8.4 5.76 8.3 6.02L6.96 9.35C6.86 9.61 6.57 9.73 6.31 9.63C6.06 9.53 5.93 9.24 6.04 8.98L7.37 5.65Z'
-          fill='currentColor'
-        />
-      </g>
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/folder-input.tsx b/apps/sim/components/emcn/icons/folder-input.tsx
index 3a47e4e9b1c..0d0960b057a 100644
--- a/apps/sim/components/emcn/icons/folder-input.tsx
+++ b/apps/sim/components/emcn/icons/folder-input.tsx
@@ -1,36 +1,37 @@
 import type { SVGProps } from 'react'
 
-export function FolderInput(props: SVGProps<SVGSVGElement>) {
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * FolderInput icon (Hugeicons stroke-rounded: FolderUploadIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function FolderInput({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1'
-        stroke='currentColor'
-        strokeWidth='2'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M2 13h10'
+        d='M22 16C21.4102 15.3932 19.8403 13 19 13C18.1597 13 16.5898 15.3932 16 16M19 14L19 21'
         stroke='currentColor'
-        strokeWidth='2'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
       <path
-        d='m9 16 3-3-3-3'
+        d='M15.0035 21H12.0027C7.28739 21 4.92973 21 3.46487 19.5355C2 18.0711 2 15.714 2 11V7.94427C2 6.1278 2 5.21956 2.38042 4.53806C2.6516 4.05227 3.05255 3.65142 3.53848 3.38032C4.22017 3 5.12865 3 6.94562 3C8.10968 3 8.69172 3 9.20122 3.19101C10.3645 3.62712 10.8442 4.68358 11.3691 5.73313L12.0027 7M8.00163 7H16.754C18.8613 7 19.9149 7 20.6718 7.50559C20.9995 7.72447 21.2808 8.00572 21.4997 8.33329C21.8937 8.92282 21.9808 9.69244 22 11'
         stroke='currentColor'
-        strokeWidth='2'
         strokeLinecap='round'
-        strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/folder-open.tsx b/apps/sim/components/emcn/icons/folder-open.tsx
new file mode 100644
index 00000000000..8391d90035c
--- /dev/null
+++ b/apps/sim/components/emcn/icons/folder-open.tsx
@@ -0,0 +1,44 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * FolderOpen icon (Hugeicons stroke-rounded: FolderOpenIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function FolderOpen({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M2.5 20V8.87695C2.5 7.58945 2.5 6.9457 2.78533 6.47048C2.9541 6.18939 3.18939 5.9541 3.47048 5.78533C3.9457 5.5 4.59449 5.5 5.89206 5.5C6.52339 5.5 6.83906 5.5 7.12612 5.58819C7.31759 5.64702 7.49914 5.73428 7.66469 5.84705C7.91289 6.01611 8.10859 6.26074 8.5 6.75C8.89141 7.23926 9.08711 7.48389 9.33531 7.65295C9.50086 7.76572 9.68241 7.85298 9.87388 7.91181C10.1609 8 10.4742 8 11.1008 8H15C16.4045 8 17.1067 8 17.6111 8.33706C17.8295 8.48298 18.017 8.67048 18.1629 8.88886C18.5 9.39331 18.5 10.0955 18.5 11.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M4.42028 14.0144L3.63368 16.0144C2.65618 18.4998 2.16743 19.7425 2.7524 20.6213C3.33737 21.5 4.65337 21.5 7.28537 21.5H15.1903C16.4249 21.5 17.0422 21.5 17.5295 21.1795C18.0169 20.859 18.2702 20.2865 18.7769 19.1415L19.6618 17.1415C20.7866 14.5992 21.349 13.3281 20.7679 12.4141C20.1868 11.5 18.8163 11.5 16.0752 11.5H8.07196C6.78232 11.5 6.1375 11.5 5.63811 11.8439C5.13872 12.1877 4.89924 12.7966 4.42028 14.0144Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11.5 4.51456C12.4151 3.28409 13.6662 2.55594 15.5125 2.50161C16.1155 2.48386 16.7152 2.61395 17.2682 2.85544C18.5748 3.42601 19.4185 4.15644 20 5.5L21.5 3'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/folder-plus.tsx b/apps/sim/components/emcn/icons/folder-plus.tsx
index 3962c329729..6e32a3eaf19 100644
--- a/apps/sim/components/emcn/icons/folder-plus.tsx
+++ b/apps/sim/components/emcn/icons/folder-plus.tsx
@@ -1,40 +1,37 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * FolderPlus icon component
- * @param props - SVG properties including className, fill, etc.
+ * FolderPlus icon (Hugeicons stroke-rounded: FolderAddIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function FolderPlus(props: SVGProps<SVGSVGElement>) {
+export function FolderPlus({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M10.3 20H4C3.47 20 2.96 19.79 2.59 19.41C2.21 19.04 2 18.53 2 18V5C2 4.47 2.21 3.96 2.59 3.59C2.96 3.21 3.47 3 4 3H7.98C8.31 3 8.64 3.08 8.94 3.23C9.23 3.39 9.49 3.62 9.67 3.9L10.33 5.1C10.51 5.38 10.76 5.6 11.05 5.76C11.343 5.92 11.67 6 12 6H20C20.53 6 21.04 6.21 21.41 6.59C21.79 6.96 22 7.47 22 8V11.3'
-        stroke='currentColor'
-        strokeWidth='1.55'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M18 15V21'
+        d='M13 21H12C7.28595 21 4.92893 21 3.46447 19.5355C2 18.0711 2 15.714 2 11V7.94427C2 6.1278 2 5.21956 2.38032 4.53806C2.65142 4.05227 3.05227 3.65142 3.53806 3.38032C4.21956 3 5.1278 3 6.94427 3C8.10802 3 8.6899 3 9.19926 3.19101C10.3622 3.62712 10.8418 4.68358 11.3666 5.73313L12 7M8 7H16.75C18.8567 7 19.91 7 20.6667 7.50559C20.9943 7.72447 21.2755 8.00572 21.4944 8.33329C21.9796 9.05942 21.9992 10.0588 22 12'
         stroke='currentColor'
-        strokeWidth='1.55'
         strokeLinecap='round'
-        strokeLinejoin='round'
+        strokeWidth='1.5'
       />
       <path
-        d='M15 18H21'
+        d='M18 13V21M22 17H14'
         stroke='currentColor'
-        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/folder.tsx b/apps/sim/components/emcn/icons/folder.tsx
index 584ac90f1cb..884de28f04e 100644
--- a/apps/sim/components/emcn/icons/folder.tsx
+++ b/apps/sim/components/emcn/icons/folder.tsx
@@ -1,25 +1,30 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Folder icon component
- * @param props - SVG properties including className, fill, etc.
+ * Folder icon (Hugeicons stroke-rounded: Folder01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Folder(props: SVGProps<SVGSVGElement>) {
+export function Folder({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='14.5'
-      height='13'
-      viewBox='0 0 14.5 13'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M4.32e-07 5.83V3.8C4.32e-07 3.2 0 2.72 0.03 2.33C0.07 1.94 0.14 1.6 0.32 1.28C0.54 0.88 0.88 0.54 1.28 0.32C1.6 0.14 1.94 0.07 2.33 0.03C2.72 0 3.2 5.96e-05 3.8 5.96e-05C4.53 5.93e-05 5.03 -0.01 5.48 0.16C6.47 0.53 6.87 1.45 7.19 2.1L7.48 2.67H10.33C11.025 2.67 11.58 2.67 12.03 2.71C12.48 2.76 12.874 2.86 13.222 3.09C13.495 3.27 13.73 3.51 13.91 3.78C14.14 4.13 14.24 4.52 14.29 4.97C14.33 5.42 14.33 5.98 14.33 6.67C14.33 7.83 14.33 8.73 14.26 9.46C14.19 10.19 14.03 10.78 13.69 11.3C13.41 11.71 13.05 12.07 12.63 12.35C12.11 12.7 11.52 12.85 10.79 12.93C10.07 13 9.16 13 8 13H7.17C5.61 13 4.39 13 3.44 12.87C2.48 12.74 1.72 12.47 1.12 11.877C0.53 11.28 0.26 10.52 0.13 9.56C0 8.61 4.32e-07 7.39 4.32e-07 5.83ZM1 5.83C1 7.42 1 8.56 1.12 9.42C1.23 10.28 1.45 10.79 1.83 11.17C2.21 11.55 2.72 11.77 3.58 11.88C4.44 12 5.58 12 7.17 12H8C9.18 12 10.029 12 10.69 11.93C11.34 11.87 11.75 11.74 12.07 11.52C12.38 11.32 12.65 11.05 12.86 10.74C13.07 10.42 13.2 10.01 13.27 9.35C13.33 8.7 13.33 7.85 13.33 6.67C13.33 5.95 13.33 5.46 13.29 5.07C13.26 4.7 13.19 4.49 13.08 4.33C12.97 4.17 12.83 4.03 12.67 3.92C12.51 3.81 12.3 3.74 11.93 3.71C11.54 3.67 11.046 3.67 10.33 3.67H5.17C4.89 3.67 4.67 3.44 4.67 3.17C4.67 2.89 4.89 2.67 5.17 2.67H6.36L6.3 2.55C5.92 1.8 5.68 1.3 5.12 1.1C4.89 1.01 4.61 1 3.8 1C3.18 1 2.75 1 2.42 1.03C2.1 1.06 1.91 1.11 1.77 1.19C1.53 1.33 1.33 1.53 1.19 1.77C1.11 1.91 1.06 2.1 1.03 2.42C1 2.75 1 3.18 1 3.8V5.83Z'
-        fill='currentColor'
+        d='M8 7H16.75C18.8567 7 19.91 7 20.6667 7.50559C20.9943 7.72447 21.2755 8.00572 21.4944 8.33329C22 9.08996 22 10.1433 22 12.25C22 15.7612 22 17.5167 21.1573 18.7779C20.7926 19.3238 20.3238 19.7926 19.7779 20.1573C18.5167 21 16.7612 21 13.25 21H12C7.28595 21 4.92893 21 3.46447 19.5355C2 18.0711 2 15.714 2 11V7.94427C2 6.1278 2 5.21956 2.38032 4.53806C2.65142 4.05227 3.05227 3.65142 3.53806 3.38032C4.21956 3 5.1278 3 6.94427 3C8.10802 3 8.6899 3 9.19926 3.19101C10.3622 3.62712 10.8418 4.68358 11.3666 5.73313L12 7'
         stroke='currentColor'
-        strokeWidth='0.3'
+        strokeLinecap='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/form-input.tsx b/apps/sim/components/emcn/icons/form-input.tsx
new file mode 100644
index 00000000000..84bcd42cc06
--- /dev/null
+++ b/apps/sim/components/emcn/icons/form-input.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * FormInput icon (Hugeicons stroke-rounded: CursorTextIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function FormInput({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M13 17L11.0714 12.5M3 17L4.92857 12.5M4.92857 12.5L7.02295 7.61311C7.21207 7.17183 7.54728 7 8 7C8.45272 7 8.78793 7.17183 8.97705 7.61311L11.0714 12.5M4.92857 12.5H11.0714'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16 3.00008C16.8333 2.99261 18 3.50003 18.5 4.50003M18.5 4.50003C19 3.50003 20.1667 3.00005 21 3.00008M18.5 4.50003L18.5 19.5M21 21C20.1667 21.0074 19 20.5 18.5 19.5M18.5 19.5C18 20.5 16.8333 21 16 21M20 12H17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/git-branch.tsx b/apps/sim/components/emcn/icons/git-branch.tsx
new file mode 100644
index 00000000000..082a096490b
--- /dev/null
+++ b/apps/sim/components/emcn/icons/git-branch.tsx
@@ -0,0 +1,42 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * GitBranch icon (Hugeicons stroke-rounded: GitBranchIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function GitBranch({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M7 19H13C15.8284 19 17.2426 19 18.1213 18.1213C19 17.2426 19 15.8284 19 13V10M19 10C19.7002 10 21.0085 11.9943 21.5 12.5M19 10C18.2998 10 16.9915 11.9943 16.5 12.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M5 7L5 17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <circle cx='5' cy='5' r='2' stroke='currentColor' strokeWidth='1.5' />
+      <circle cx='19' cy='5' r='2' stroke='currentColor' strokeWidth='1.5' />
+      <circle cx='5' cy='19' r='2' stroke='currentColor' strokeWidth='1.5' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/globe.tsx b/apps/sim/components/emcn/icons/globe.tsx
new file mode 100644
index 00000000000..9db1b1c9bad
--- /dev/null
+++ b/apps/sim/components/emcn/icons/globe.tsx
@@ -0,0 +1,48 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Globe icon (Hugeicons stroke-rounded: GlobalIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Globe({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20 5.69899C19.0653 5.76636 17.8681 6.12824 17.0379 7.20277C15.5385 9.14361 14.039 9.30556 13.0394 8.65861C11.5399 7.6882 12.8 6.11636 11.0401 5.26215C9.89313 4.70542 9.73321 3.19045 10.3716 2'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M2 11C2.7625 11.6621 3.83046 12.2682 5.08874 12.2682C7.68843 12.2682 8.20837 12.7649 8.20837 14.7518C8.20837 16.7387 8.20837 16.7387 8.72831 18.2288C9.06651 19.1981 9.18472 20.1674 8.5106 21'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22 13.4523C21.1129 12.9411 20 12.7308 18.8734 13.5405C16.7177 15.0898 15.2314 13.806 14.5619 15.0889C13.5765 16.9775 17.0957 17.5711 14 22'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/graduation-cap.tsx b/apps/sim/components/emcn/icons/graduation-cap.tsx
new file mode 100644
index 00000000000..948f100e829
--- /dev/null
+++ b/apps/sim/components/emcn/icons/graduation-cap.tsx
@@ -0,0 +1,46 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * GraduationCap icon (Hugeicons stroke-rounded: Mortarboard02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function GraduationCap({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M2 8C2 9.34178 10.0949 13 11.9861 13C13.8772 13 21.9722 9.34178 21.9722 8C21.9722 6.65822 13.8772 3 11.9861 3C10.0949 3 2 6.65822 2 8Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M5.99414 11L6.23925 16.6299C6.24415 16.7426 6.25634 16.8555 6.28901 16.9635C6.38998 17.2973 6.57608 17.6006 6.86 17.8044C9.08146 19.3985 14.8901 19.3985 17.1115 17.8044C17.3956 17.6006 17.5816 17.2973 17.6826 16.9635C17.7152 16.8555 17.7274 16.7426 17.7324 16.6299L17.9774 11'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20.4734 9.5V16.5M20.4734 16.5C19.6814 17.9463 19.3312 18.7212 18.9755 20C18.8983 20.455 18.9596 20.6843 19.2732 20.8879C19.4006 20.9706 19.5537 21 19.7055 21H21.2259C21.3876 21 21.5507 20.9663 21.6838 20.8745C21.9753 20.6735 22.0503 20.453 21.9713 20C21.6595 18.8126 21.2623 18.0008 20.4734 16.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/hammer.tsx b/apps/sim/components/emcn/icons/hammer.tsx
index eb187c4db8a..88d76b377ed 100644
--- a/apps/sim/components/emcn/icons/hammer.tsx
+++ b/apps/sim/components/emcn/icons/hammer.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Hammer icon component - build/construction tool
- * @param props - SVG properties including className, fill, etc.
+ * Hammer icon (Hugeicons stroke-rounded: HammerIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Hammer(props: SVGProps<SVGSVGElement>) {
+export function Hammer({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M7 6.75L10.25 3.5L16.75 10L13.5 13.25Z' />
-      <path d='M10.25 10L3.25 17' />
+      <path
+        d='M17.0794 6.53297L15.4953 4.94738C14.2496 3.70049 12.5601 3 10.7985 3C9.95308 3 9.52971 4.02309 10.1275 4.62145L10.5245 5.01883C11.9169 6.41256 11.9169 8.67222 10.5245 10.0659L13.0456 12.5895L14.5583 11.0754L16.0709 12.5895C15.514 13.147 15.514 14.0508 16.0709 14.6083L16.5752 15.113C16.9876 15.5258 17.1938 15.7322 17.4162 15.8426C17.8394 16.0525 18.3363 16.0525 18.7595 15.8426C18.9819 15.7322 19.1881 15.5258 19.6005 15.113L21.1132 13.5989C21.5256 13.1861 21.7318 12.9797 21.842 12.7571C22.0517 12.3335 22.0517 11.8361 21.842 11.4125C21.7318 11.1898 21.5256 10.9834 21.1132 10.5706L20.6089 10.0659C20.052 9.50845 19.149 9.50845 18.592 10.0659L17.0794 8.55181C17.6363 7.99432 17.6363 7.09046 17.0794 6.53297Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M10.6074 10L2.52431 17.9822C2.1886 18.3138 2 18.7634 2 19.2322C2 20.2085 2.80146 21 3.7901 21C4.26487 21 4.72019 20.8138 5.0559 20.4822L13.6453 12'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/hand.tsx b/apps/sim/components/emcn/icons/hand.tsx
index 024e32b5563..afb3af4d86e 100644
--- a/apps/sim/components/emcn/icons/hand.tsx
+++ b/apps/sim/components/emcn/icons/hand.tsx
@@ -1,43 +1,31 @@
 import type { SVGProps } from 'react'
 
-export function Hand(props: SVGProps<SVGSVGElement>) {
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Hand icon (Hugeicons stroke-rounded: Hold01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Hand({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M6.5 11V6.5C6.5 5.67 7.17 5 8 5C8.83 5 9.5 5.67 9.5 6.5V11'
-        stroke='currentColor'
-        strokeWidth='1.55'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M9.5 10.5V5.5C9.5 4.67 10.17 4 11 4C11.83 4 12.5 4.67 12.5 5.5V10.5'
-        stroke='currentColor'
-        strokeWidth='1.55'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M12.5 10.5V6.5C12.5 5.67 13.17 5 14 5C14.83 5 15.5 5.67 15.5 6.5V10.5'
-        stroke='currentColor'
-        strokeWidth='1.55'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M15.5 10.5V8.5C15.5 7.67 16.17 7 17 7C17.83 7 18.5 7.67 18.5 8.5V15.5C18.5 18.81 15.81 21.5 12.5 21.5H11.5C8.19 21.5 5.5 18.81 5.5 15.5V13C5.5 12.17 6.17 11.5 7 11.5C7.83 11.5 8.5 12.17 8.5 13'
+        d='M14 5.5C14 4.67157 14.6716 4 15.5 4C16.3284 4 17 4.67157 17 5.5V12M11.0002 10V5L11 3.5C11 2.67157 11.6716 2 12.5 2C13.3284 2 14 2.67157 14 3.5V5.5M14 5.5V11M11.0002 5C10.9999 4.17187 10.3284 3.50064 9.50021 3.50064C8.67178 3.50064 8.00021 4.17221 8.00021 5.00064L8 13.4624L6.3797 11.837C5.66877 11.1239 4.49772 11.1889 3.86965 11.9765C3.38907 12.5791 3.3758 13.4315 3.83738 14.0489L7.43707 18.6471C8.12579 19.5269 8.5 20.8829 8.5 22.0002M18 22.0002V20.8356C18 20.3038 18.2148 19.7964 18.5652 19.3964C18.9703 18.9339 19.4769 18.2939 19.6689 17.792C20 16.9269 20 15.8402 20 13.6668L20.0004 12.1943L20 7.5C20 6.67157 19.3284 6 18.5 6C17.6716 6 17 6.67157 17 7.5'
         stroke='currentColor'
-        strokeWidth='1.55'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/hash.tsx b/apps/sim/components/emcn/icons/hash.tsx
new file mode 100644
index 00000000000..8de9aca278b
--- /dev/null
+++ b/apps/sim/components/emcn/icons/hash.tsx
@@ -0,0 +1,53 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Hash icon (Hugeicons stroke-rounded: HashtagIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Hash({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M14 21L18 3'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6 21L10 3'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M5 8H21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 16H19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/help-circle.tsx b/apps/sim/components/emcn/icons/help-circle.tsx
index 8ea21b8f8cd..08c79528a43 100644
--- a/apps/sim/components/emcn/icons/help-circle.tsx
+++ b/apps/sim/components/emcn/icons/help-circle.tsx
@@ -1,27 +1,48 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * HelpCircle icon component - question mark in a circle
- * @param props - SVG properties including className, fill, etc.
+ * HelpCircle icon (Hugeicons stroke-rounded: HelpCircleIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function HelpCircle(props: SVGProps<SVGSVGElement>) {
+export function HelpCircle({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <circle cx='12' cy='12' r='10' />
-      <path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' />
-      <line x1='12' y1='17' x2='12.01' y2='17' />
+      <circle
+        cx='12'
+        cy='12'
+        r='10'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9.5 9.5C9.5 8.11929 10.6193 7 12 7C13.3807 7 14.5 8.11929 14.5 9.5C14.5 10.3569 14.0689 11.1131 13.4117 11.5636C12.7283 12.0319 12 12.6716 12 13.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12.125 16.75H12M12.25 16.75C12.25 16.8881 12.1381 17 12 17C11.8619 17 11.75 16.8881 11.75 16.75C11.75 16.6119 11.8619 16.5 12 16.5C12.1381 16.5 12.25 16.6119 12.25 16.75Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/history.tsx b/apps/sim/components/emcn/icons/history.tsx
new file mode 100644
index 00000000000..3d18817c918
--- /dev/null
+++ b/apps/sim/components/emcn/icons/history.tsx
@@ -0,0 +1,44 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * History icon (Hugeicons stroke-rounded: TimeQuarterPassIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function History({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M8.37574 3C8.16183 3.07993 7.95146 3.16712 7.74492 3.26126M20.7177 16.3011C20.8199 16.0799 20.9141 15.8542 21 15.6245M18.4988 19.3647C18.6705 19.2044 18.8365 19.0381 18.9963 18.866M15.2689 21.3723C15.463 21.2991 15.6541 21.22 15.8421 21.1351M12.156 21.9939C11.9251 22.0019 11.6926 22.0019 11.4616 21.9939M7.78731 21.1404C7.96811 21.2217 8.15183 21.2978 8.33825 21.3683M4.67255 18.9208C4.80924 19.0657 4.95029 19.2064 5.0955 19.3428M2.6327 15.6645C2.70758 15.8622 2.78867 16.0569 2.87572 16.2483M2.00497 12.5053C1.99848 12.2972 1.9985 12.0878 2.00497 11.8794M2.62545 8.73714C2.69901 8.54165 2.77864 8.34913 2.8641 8.1598M4.65602 5.47923C4.80068 5.32514 4.95025 5.17573 5.1045 5.03124'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5M13.5 12C13.5 11.1716 12.8284 10.5 12 10.5M13.5 12H16M12 10.5V6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22 12C22 6.47715 17.5228 2 12 2'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/home.tsx b/apps/sim/components/emcn/icons/home.tsx
index 4f2a46fd6d8..1316424e61e 100644
--- a/apps/sim/components/emcn/icons/home.tsx
+++ b/apps/sim/components/emcn/icons/home.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Home icon component - house with door
- * @param props - SVG properties including className, fill, etc.
+ * Home icon (Hugeicons stroke-rounded: Home01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Home(props: SVGProps<SVGSVGElement>) {
+export function Home({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 9.5L10.25 1L19.75 9.5V16.25C19.75 17.63 18.63 18.75 17.25 18.75H3.25C1.87 18.75 0.75 17.63 0.75 16.25V9.5Z' />
-      <path d='M7.25 18.75V13C7.25 12.45 7.7 12 8.25 12H12.25C12.8 12 13.25 12.45 13.25 13V18.75' />
+      <path
+        d='M3 11.9896V14.5C3 17.7998 3 19.4497 4.02513 20.4749C5.05025 21.5 6.70017 21.5 10 21.5H14C17.2998 21.5 18.9497 21.5 19.9749 20.4749C21 19.4497 21 17.7998 21 14.5V11.9896C21 10.3083 21 9.46773 20.6441 8.74005C20.2882 8.01237 19.6247 7.49628 18.2976 6.46411L16.2976 4.90855C14.2331 3.30285 13.2009 2.5 12 2.5C10.7991 2.5 9.76689 3.30285 7.70242 4.90855L5.70241 6.46411C4.37533 7.49628 3.71179 8.01237 3.3559 8.74005C3 9.46773 3 10.3083 3 11.9896Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15.0002 17C14.2007 17.6224 13.1504 18 12.0002 18C10.8499 18 9.79971 17.6224 9.00018 17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/image-up.tsx b/apps/sim/components/emcn/icons/image-up.tsx
index 862595c7c47..79014666f5d 100644
--- a/apps/sim/components/emcn/icons/image-up.tsx
+++ b/apps/sim/components/emcn/icons/image-up.tsx
@@ -1,29 +1,44 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ImageUp icon component - picture frame with sun and mountain silhouette.
- * Universal "image" glyph used for actions that set or upload an image
- * (e.g., workspace logo).
- * @param props - SVG properties including className, fill, etc.
+ * ImageUp icon (Hugeicons stroke-rounded: Image01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ImageUp(props: SVGProps<SVGSVGElement>) {
+export function ImageUp({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='0.75' y='0.75' width='18.5' height='18' rx='2.5' />
-      <circle cx='6.25' cy='6.25' r='1.75' />
-      <path d='M17.25 12.75L12.25 7.75L2.75 17.25' />
+      <circle
+        cx='7.5'
+        cy='7.5'
+        r='1.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M5 21C9.37246 15.775 14.2741 8.88406 21.4975 13.5424'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/image.tsx b/apps/sim/components/emcn/icons/image.tsx
new file mode 100644
index 00000000000..8379e3797b8
--- /dev/null
+++ b/apps/sim/components/emcn/icons/image.tsx
@@ -0,0 +1,44 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Image icon (Hugeicons stroke-rounded: Image01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Image({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <circle
+        cx='7.5'
+        cy='7.5'
+        r='1.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M5 21C9.37246 15.775 14.2741 8.88406 21.4975 13.5424'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/index.ts b/apps/sim/components/emcn/icons/index.ts
index db03bcdf9fe..aa38c9519d6 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -1,26 +1,46 @@
 export { ArrowDown } from './arrow-down'
 export { ArrowLeft } from './arrow-left'
+export { ArrowLeftRight } from './arrow-left-right'
 export { ArrowRight } from './arrow-right'
+export { ArrowRight2 } from './arrow-right2'
 export { ArrowUp } from './arrow-up'
 export { ArrowUpDown } from './arrow-up-down'
+export { ArrowUpLeft } from './arrow-up-left'
+export { ArrowUp2 } from './arrow-up2'
 export { Asterisk } from './asterisk'
+export { Ban } from './ban'
 export { Bell } from './bell'
+export { Bell2 } from './bell2'
 export { Blimp } from './blimp'
 export { BookOpen } from './book-open'
+export { Bot } from './bot'
 export { BubbleChatClose } from './bubble-chat-close'
+export { BubbleChatDelay } from './bubble-chat-delay'
 export { BubbleChatPreview } from './bubble-chat-preview'
+export { BubbleChatSpark } from './bubble-chat-spark'
 export { Bug } from './bug'
+export { Building2 } from './building2'
 export { Calendar } from './calendar'
+export { CalendarClock } from './calendar-clock'
+export { Camera } from './camera'
 export { Card } from './card'
 export { Check } from './check'
 export { ChevronDown } from './chevron-down'
+export { ChevronLeft } from './chevron-left'
+export { ChevronRight } from './chevron-right'
+export { ChevronUp } from './chevron-up'
+export { ChevronsDownUp } from './chevrons-down-up'
+export { ChevronsUpDown } from './chevrons-up-down'
+export { Circle } from './circle'
 export { CircleAlert } from './circle-alert'
 export { CircleCheck } from './circle-check'
+export { CircleOff } from './circle-off'
 export { Clipboard } from './clipboard'
 export { ClipboardList } from './clipboard-list'
 export { Clock } from './clock'
 export { Columns2 } from './columns2'
 export { Columns3 } from './columns3'
+export { Compass } from './compass'
 export { Connections } from './connections'
 export { Credit } from './credit'
 export { Cursor } from './cursor'
@@ -30,47 +50,68 @@ export { DocumentAttachment } from './document-attachment'
 export { Download } from './download'
 export { Duplicate } from './duplicate'
 export { Expand } from './expand'
+export { ExternalLink } from './external-link'
 export { Eye } from './eye'
 export { EyeOff } from './eye-off'
 export { File } from './file'
+export { FileText } from './file-text'
 export { FileX } from './file-x'
 export { Files } from './files'
+export { Filter } from './filter'
 export { Fingerprint } from './fingerprint'
 export { Folder } from './folder'
 export { FolderCode } from './folder-code'
 export { FolderInput } from './folder-input'
+export { FolderOpen } from './folder-open'
 export { FolderPlus } from './folder-plus'
+export { FormInput } from './form-input'
+export { GitBranch } from './git-branch'
+export { Globe } from './globe'
+export { GraduationCap } from './graduation-cap'
 export { Hammer } from './hammer'
 export { Hand } from './hand'
+export { Hash } from './hash'
 export { HelpCircle } from './help-circle'
 export { HexSimple } from './hex-simple'
+export { History } from './history'
 export { Home } from './home'
+export { Image } from './image'
 export { ImageUp } from './image-up'
-// `Info` (lucide-style icon) is intentionally not re-exported here: the emcn barrel
-// already exports an `Info` tooltip component, and re-exporting both collides. The
-// toast imports this icon directly from './info', so the barrel export is unneeded.
+export { Info } from './info'
 export { Integration } from './integration'
 export { Key } from './key'
+export { KeyRound } from './key-round'
 export { KeySquare } from './key-square'
 export { Layout } from './layout'
 export { Library } from './library'
+export { LibraryBig } from './library-big'
 export { Link } from './link'
 export { ListFilter } from './list-filter'
 export { Loader } from './loader'
 export { Lock } from './lock'
 export { LogIn } from './log-in'
 export { LogOut } from './log-out'
+export { Logs } from './logs'
 export { Mail } from './mail'
 export { ManageWorkspace } from './manage-workspace'
 export { MessageCircle } from './message-circle'
 export { Mic } from './mic'
+export { MicOff } from './mic-off'
+export { Minus } from './minus'
+export { Moon } from './moon'
 export { MoreHorizontal } from './more-horizontal'
+export { MoreVertical } from './more-vertical'
+export { Music } from './music'
+export { Network } from './network'
 export { NoWrap } from './no-wrap'
 export { Palette } from './palette'
 export { PanelLeft } from './panel-left'
+export { PanelRight } from './panel-right'
 export { Paperclip } from './paperclip'
 export { Pause } from './pause'
+export { PauseCircle } from './pause-circle'
 export { Pencil } from './pencil'
+export { Phone } from './phone'
 export { PillsRing } from './pills-ring'
 export { Pin } from './pin'
 export { PinOff } from './pin-off'
@@ -78,23 +119,35 @@ export { Play, PlayOutline } from './play'
 export { Plus } from './plus'
 export { Redo } from './redo'
 export { RefreshCw } from './refresh-cw'
+export { Repeat } from './repeat'
 export { Rocket } from './rocket'
+export { RotateCcw } from './rotate-ccw'
 export { Rows3 } from './rows3'
+export { Rss } from './rss'
+export { Scan } from './scan'
+export { Scissors } from './scissors'
 export { Search } from './search'
 export { SelectAll } from './select-all'
 export { Send } from './send'
+export { SendToBack } from './send-to-back'
 export { Server } from './server'
 export { Settings } from './settings'
+export { Settings2 } from './settings2'
+export { Share2 } from './share2'
 export { ShieldCheck } from './shield-check'
 export { Shuffle } from './shuffle'
 export { Sim } from './sim'
 export { Slash } from './slash'
+export { Sparkles } from './sparkles'
+export { Split } from './split'
 export { Square } from './square'
 export { SquareArrowUpRight } from './square-arrow-up-right'
+export { Sun } from './sun'
 export { Table } from './table'
 export { TableX } from './table-x'
 export { TagIcon } from './tag'
 export { Task } from './task'
+export { Terminal } from './terminal'
 export { TerminalWindow } from './terminal-window'
 export { ThumbsDown } from './thumbs-down'
 export { ThumbsUp } from './thumbs-up'
@@ -112,11 +165,14 @@ export { Upload } from './upload'
 export { User } from './user'
 export { UserPlus } from './user-plus'
 export { Users } from './users'
+export { Wand2 } from './wand2'
+export { Webhook } from './webhook'
 export { Wordmark } from './wordmark'
 export { Workflow } from './workflow'
 export { WorkflowX } from './workflow-x'
 export { Wrap } from './wrap'
 export { Wrench } from './wrench'
 export { X } from './x'
+export { XCircle } from './x-circle'
 export { ZoomIn } from './zoom-in'
 export { ZoomOut } from './zoom-out'
diff --git a/apps/sim/components/emcn/icons/info.tsx b/apps/sim/components/emcn/icons/info.tsx
index 0f370f12266..85a15539b73 100644
--- a/apps/sim/components/emcn/icons/info.tsx
+++ b/apps/sim/components/emcn/icons/info.tsx
@@ -1,27 +1,48 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Info icon component - circular info used for info intent.
- * @param props - SVG properties including className, fill, etc.
+ * Info icon (Hugeicons stroke-rounded: InformationCircleIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Info(props: SVGProps<SVGSVGElement>) {
+export function Info({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       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' />
+      <circle
+        cx='12'
+        cy='12'
+        r='10'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 16V12'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12.125 8.25H12M12.25 8.25C12.25 8.11193 12.1381 8 12 8C11.8619 8 11.75 8.11193 11.75 8.25C11.75 8.38807 11.8619 8.5 12 8.5C12.1381 8.5 12.25 8.38807 12.25 8.25Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/integration.tsx b/apps/sim/components/emcn/icons/integration.tsx
index 84a19d170ae..ca444e59507 100644
--- a/apps/sim/components/emcn/icons/integration.tsx
+++ b/apps/sim/components/emcn/icons/integration.tsx
@@ -1,26 +1,44 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Integration icon component - two overlapping rounded squares, diagonally offset.
- * @param props - SVG properties including className, fill, etc.
+ * Integration icon (Hugeicons stroke-rounded: Plug02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Integration(props: SVGProps<SVGSVGElement>) {
+export function Integration({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='1.5' y='1' width='12' height='12' rx='2' />
-      <rect x='8.5' y='8' width='12' height='12' rx='2' />
+      <path
+        d='M14 8V11M10 11V8'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8.00297 12.0267C7.95812 11.4726 8.42638 11 9.02009 11H14.9799C15.5736 11 16.0419 11.4726 15.997 12.0267L15.8745 13.5403C15.7864 14.6285 15.4008 15.6771 14.7546 16.5856L14.3541 17.1487C13.9759 17.6805 13.3385 18 12.6558 18H11.3442C10.6615 18 10.0241 17.6805 9.64588 17.1487L9.24535 16.5856C8.59923 15.6771 8.2136 14.6285 8.12551 13.5403L8.00297 12.0267Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16 21.2109C19.5318 19.6644 22 16.1323 22 12.0224C22 6.4872 17.5228 2 12 2C6.47715 2 2 6.4872 2 12.0224C2 17.2199 5.94741 21.4933 11.0014 21.9955C11.551 22.0501 12 21.5962 12 21.0426V18.0359'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/key-round.tsx b/apps/sim/components/emcn/icons/key-round.tsx
new file mode 100644
index 00000000000..7ecaf0ad14d
--- /dev/null
+++ b/apps/sim/components/emcn/icons/key-round.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * KeyRound icon (Hugeicons stroke-rounded: Key01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function KeyRound({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M15.5 14.5C18.8137 14.5 21.5 11.8137 21.5 8.5C21.5 5.18629 18.8137 2.5 15.5 2.5C12.1863 2.5 9.5 5.18629 9.5 8.5C9.5 9.38041 9.68962 10.2165 10.0303 10.9697L2.5 18.5V21.5H5.5V19.5H7.5V17.5H9.5L13.0303 13.9697C13.7835 14.3104 14.6196 14.5 15.5 14.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17.5 6.5L16.5 7.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/key.tsx b/apps/sim/components/emcn/icons/key.tsx
index b8407642cb5..c09d8f398fb 100644
--- a/apps/sim/components/emcn/icons/key.tsx
+++ b/apps/sim/components/emcn/icons/key.tsx
@@ -1,28 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Key icon component
- * @param props - SVG properties including className, fill, etc.
+ * Key icon (Hugeicons stroke-rounded: Key01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Key(props: SVGProps<SVGSVGElement>) {
+export function Key({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <circle cx='6.75' cy='10.25' r='3.5' />
-      <path d='M10.25 10.25H19' />
-      <path d='M14.5 10.25V13.5' />
-      <path d='M17.5 10.25V12.5' />
+      <path
+        d='M15.5 14.5C18.8137 14.5 21.5 11.8137 21.5 8.5C21.5 5.18629 18.8137 2.5 15.5 2.5C12.1863 2.5 9.5 5.18629 9.5 8.5C9.5 9.38041 9.68962 10.2165 10.0303 10.9697L2.5 18.5V21.5H5.5V19.5H7.5V17.5H9.5L13.0303 13.9697C13.7835 14.3104 14.6196 14.5 15.5 14.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17.5 6.5L16.5 7.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/library-big.tsx b/apps/sim/components/emcn/icons/library-big.tsx
new file mode 100644
index 00000000000..68fd61398b0
--- /dev/null
+++ b/apps/sim/components/emcn/icons/library-big.tsx
@@ -0,0 +1,88 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * LibraryBig icon (Hugeicons stroke-rounded: Bookshelf01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function LibraryBig({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M5.5 20V22M19.5 20V22'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 11L21 11'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 14V8C3 5.17157 3 3.75736 3.93037 2.87868C4.86073 2 6.35814 2 9.35294 2H14.6471C17.6419 2 19.1393 2 20.0696 2.87868C21 3.75736 21 5.17157 21 8V14C21 16.8284 21 18.2426 20.0696 19.1213C19.1393 20 17.6419 20 14.6471 20H9.35294C6.35814 20 4.86073 20 3.93037 19.1213C3 18.2426 3 16.8284 3 14Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13.5 11L11.5 6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7 11V6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8 19.5V15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 20V15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17 11V6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16 20L17 15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/library.tsx b/apps/sim/components/emcn/icons/library.tsx
index 1bd3d0b8428..30012435cd2 100644
--- a/apps/sim/components/emcn/icons/library.tsx
+++ b/apps/sim/components/emcn/icons/library.tsx
@@ -1,28 +1,88 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Library icon component - displays stacked books/documents
- * @param props - SVG properties including className, fill, etc.
+ * Library icon (Hugeicons stroke-rounded: Bookshelf01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Library(props: SVGProps<SVGSVGElement>) {
+export function Library({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 4.75C0.75 3.35 0.75 2.65 1.02 2.12C1.26 1.64 1.64 1.26 2.12 1.02C2.65 0.75 3.35 0.75 4.75 0.75C6.15 0.75 6.85 0.75 7.38 1.02C7.86 1.26 8.24 1.64 8.48 2.12C8.75 2.65 8.75 3.35 8.75 4.75V14.75C8.75 16.15 8.75 16.85 8.48 17.385C8.24 17.86 7.86 18.24 7.38 18.48C6.85 18.75 6.15 18.75 4.75 18.75C3.35 18.75 2.65 18.75 2.12 18.48C1.64 18.24 1.26 17.86 1.02 17.385C0.75 16.85 0.75 16.15 0.75 14.75V4.75Z' />
-      <path d='M0.75 6.75H8.75' />
-      <path d='M10.2 6.02C9.84 4.69 9.67 4.02 9.79 3.45C9.9 2.94 10.16 2.48 10.55 2.13C10.98 1.74 11.64 1.56 12.97 1.2C14.29 0.84 14.96 0.67 15.53 0.79C16.04 0.9 16.49 1.16 16.84 1.55C17.23 1.99 17.41 2.65 17.77 3.98L20.3 13.48C20.66 14.81 20.83 15.48 20.71 16.054C20.604 16.56 20.34 17.02 19.95 17.37C19.52 17.76 18.86 17.94 17.53 18.3C16.21 18.66 15.54 18.83 14.97 18.71C14.46 18.6 14.01 18.34 13.66 17.95C13.27 17.51 13.09 16.85 12.73 15.52L10.2 6.02Z' />
-      <path d='M10.75 7.75L17.25 5.75' />
+      <path
+        d='M5.5 20V22M19.5 20V22'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 11L21 11'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 14V8C3 5.17157 3 3.75736 3.93037 2.87868C4.86073 2 6.35814 2 9.35294 2H14.6471C17.6419 2 19.1393 2 20.0696 2.87868C21 3.75736 21 5.17157 21 8V14C21 16.8284 21 18.2426 20.0696 19.1213C19.1393 20 17.6419 20 14.6471 20H9.35294C6.35814 20 4.86073 20 3.93037 19.1213C3 18.2426 3 16.8284 3 14Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13.5 11L11.5 6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7 11V6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8 19.5V15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 20V15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17 11V6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16 20L17 15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/link.tsx b/apps/sim/components/emcn/icons/link.tsx
index b0a89c82da7..90a6e28a665 100644
--- a/apps/sim/components/emcn/icons/link.tsx
+++ b/apps/sim/components/emcn/icons/link.tsx
@@ -1,26 +1,37 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Link icon component
- * @param props - SVG properties including className, size, etc.
+ * Link icon (Hugeicons stroke-rounded: Link01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Link(props: SVGProps<SVGSVGElement>) {
+export function Link({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       aria-hidden='true'
       {...props}
     >
-      <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' />
-      <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' />
+      <path
+        d='M9.14339 10.691L9.35031 10.4841C11.329 8.50532 14.5372 8.50532 16.5159 10.4841C18.4947 12.4628 18.4947 15.671 16.5159 17.6497L13.6497 20.5159C11.671 22.4947 8.46279 22.4947 6.48405 20.5159C4.50532 18.5372 4.50532 15.329 6.48405 13.3503L6.9484 12.886'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17.0516 11.114L17.5159 10.6497C19.4947 8.67095 19.4947 5.46279 17.5159 3.48405C15.5372 1.50532 12.329 1.50532 10.3503 3.48405L7.48405 6.35031C5.50532 8.32904 5.50532 11.5372 7.48405 13.5159C9.46279 15.4947 12.671 15.4947 14.6497 13.5159L14.8566 13.309'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/list-filter.tsx b/apps/sim/components/emcn/icons/list-filter.tsx
index 71ca24cef27..f652f9438ae 100644
--- a/apps/sim/components/emcn/icons/list-filter.tsx
+++ b/apps/sim/components/emcn/icons/list-filter.tsx
@@ -1,27 +1,63 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ListFilter icon component for filter controls
- * @param props - SVG properties including className, fill, etc.
+ * ListFilter icon (Hugeicons stroke-rounded: FilterHorizontalIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ListFilter(props: SVGProps<SVGSVGElement>) {
+export function ListFilter({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M1.5 4.5H19' />
-      <path d='M5 10.25H15.5' />
-      <path d='M8.25 16H12.25' />
+      <path
+        d='M3 7H6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 17H9'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M18 17L21 17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15 7L21 7'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6 7C6 6.06812 6 5.60218 6.15224 5.23463C6.35523 4.74458 6.74458 4.35523 7.23463 4.15224C7.60218 4 8.06812 4 9 4C9.93188 4 10.3978 4 10.7654 4.15224C11.2554 4.35523 11.6448 4.74458 11.8478 5.23463C12 5.60218 12 6.06812 12 7C12 7.93188 12 8.39782 11.8478 8.76537C11.6448 9.25542 11.2554 9.64477 10.7654 9.84776C10.3978 10 9.93188 10 9 10C8.06812 10 7.60218 10 7.23463 9.84776C6.74458 9.64477 6.35523 9.25542 6.15224 8.76537C6 8.39782 6 7.93188 6 7Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 17C12 16.0681 12 15.6022 12.1522 15.2346C12.3552 14.7446 12.7446 14.3552 13.2346 14.1522C13.6022 14 14.0681 14 15 14C15.9319 14 16.3978 14 16.7654 14.1522C17.2554 14.3552 17.6448 14.7446 17.8478 15.2346C18 15.6022 18 16.0681 18 17C18 17.9319 18 18.3978 17.8478 18.7654C17.6448 19.2554 17.2554 19.6448 16.7654 19.8478C16.3978 20 15.9319 20 15 20C14.0681 20 13.6022 20 13.2346 19.8478C12.7446 19.6448 12.3552 19.2554 12.1522 18.7654C12 18.3978 12 17.9319 12 17Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/lock.tsx b/apps/sim/components/emcn/icons/lock.tsx
index e409698f54a..c9307fa2460 100644
--- a/apps/sim/components/emcn/icons/lock.tsx
+++ b/apps/sim/components/emcn/icons/lock.tsx
@@ -1,26 +1,36 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Lock icon component - closed padlock
- * @param props - SVG properties including className, fill, etc.
+ * Lock icon (Hugeicons stroke-rounded: LockIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Lock(props: SVGProps<SVGSVGElement>) {
+export function Lock({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='2.75' y='8.75' width='15' height='10' rx='2' />
-      <path d='M5.75 8.75V5.75C5.75 3.26 7.76 1.25 10.25 1.25C12.74 1.25 14.75 3.26 14.75 5.75V8.75' />
+      <path
+        d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 13C13.1046 13 14 12.1046 14 11C14 9.89543 13.1046 9 12 9C10.8954 9 10 9.89543 10 11C10 12.1046 10.8954 13 12 13ZM12 13L12 16'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/log-in.tsx b/apps/sim/components/emcn/icons/log-in.tsx
index b75b8362783..f23de4bfab8 100644
--- a/apps/sim/components/emcn/icons/log-in.tsx
+++ b/apps/sim/components/emcn/icons/log-in.tsx
@@ -1,27 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * LogIn icon component - arrow entering a door
- * @param props - SVG properties including className, fill, etc.
+ * LogIn icon (Hugeicons stroke-rounded: Login03Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function LogIn(props: SVGProps<SVGSVGElement>) {
+export function LogIn({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M11.75 0.75H16.25C17.35 0.75 18.25 1.65 18.25 2.75V16.75C18.25 17.85 17.35 18.75 16.25 18.75H11.75' />
-      <path d='M8.25 13.75L12.25 9.75L8.25 5.75' />
-      <path d='M12.25 9.75H1.25' />
+      <path
+        d='M6 18C6 18.4644 6 18.6965 6.022 18.8918C6.20482 20.5145 7.48545 21.7952 9.10814 21.978C9.30345 22 9.53562 22 9.99998 22H13C16.2998 22 17.9497 22 18.9749 20.9749C20 19.9498 20 18.2998 20 15L20 8.99998C20 5.70016 20 4.05024 18.9748 3.02512C17.9497 2 16.2998 2 13 2H9.99998C9.53563 2 9.30345 2 9.10814 2.02201C7.48545 2.20483 6.20482 3.48547 6.022 5.10816C6 5.30347 6 5.53565 6 6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M4.07612 11.1183C4 11.3021 4 11.535 4 12.001C4 12.4669 4 12.6999 4.07612 12.8837C4.17761 13.1287 4.37229 13.3234 4.61732 13.4249C4.80109 13.501 5.03406 13.501 5.5 13.501H10.5C10.5002 15.2503 10.511 16.1299 11.0623 16.3858C11.0829 16.3954 11.1037 16.4042 11.1249 16.4124C11.7045 16.6353 12.3999 16.0139 13.7907 14.7711C15.2576 13.4602 15.9912 12.7851 16 11.957C15.9912 11.1289 15.2576 10.4538 13.7907 9.14301C12.3999 7.90018 11.7045 7.27876 11.1249 7.50171C11.1037 7.50985 11.0829 7.51869 11.0623 7.52822C10.5018 7.78844 10.5 8.69318 10.5 10.501H5.5C5.03406 10.501 4.80109 10.501 4.61732 10.5771C4.37229 10.6786 4.17761 10.8733 4.07612 11.1183Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/log-out.tsx b/apps/sim/components/emcn/icons/log-out.tsx
index 658493c7591..a85698123fc 100644
--- a/apps/sim/components/emcn/icons/log-out.tsx
+++ b/apps/sim/components/emcn/icons/log-out.tsx
@@ -1,27 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * LogOut icon component - arrow exiting a door
- * @param props - SVG properties including className, fill, etc.
+ * LogOut icon (Hugeicons stroke-rounded: Logout03Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function LogOut(props: SVGProps<SVGSVGElement>) {
+export function LogOut({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M8.75 0.75H3.75C2.65 0.75 1.75 1.65 1.75 2.75V16.75C1.75 17.85 2.65 18.75 3.75 18.75H8.75' />
-      <path d='M14.25 13.75L18.25 9.75L14.25 5.75' />
-      <path d='M7.75 9.75H18.25' />
+      <path
+        d='M18 18C18 18.4644 18 18.6965 17.978 18.8918C17.7952 20.5145 16.5145 21.7952 14.8919 21.978C14.6965 22 14.4644 22 14 22H11C7.70017 22 6.05025 22 5.02513 20.9749C4 19.9498 4 18.2998 4 15L4.00001 8.99998C4.00001 5.70016 4.00003 4.05024 5.02514 3.02512C6.05027 2 7.70018 2 11 2H14C14.4644 2 14.6965 2 14.8919 2.02201C16.5145 2.20483 17.7952 3.48547 17.978 5.10816C18 5.30347 18 5.53565 18 6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8.07612 11.1183C8 11.3021 8 11.535 8 12.001C8 12.4669 8 12.6999 8.07612 12.8837C8.17761 13.1287 8.37229 13.3234 8.61732 13.4249C8.80109 13.501 9.03406 13.501 9.5 13.501H14.5C14.5002 15.2503 14.511 16.1299 15.0623 16.3858C15.0829 16.3954 15.1037 16.4042 15.1249 16.4124C15.7045 16.6353 16.3999 16.0139 17.7907 14.7711C19.2576 13.4602 19.9912 12.7851 20 11.957C19.9912 11.1289 19.2576 10.4538 17.7907 9.14301C16.3999 7.90018 15.7045 7.27876 15.1249 7.50171C15.1037 7.50985 15.0829 7.51869 15.0623 7.52822C14.5018 7.78844 14.5 8.69318 14.5 10.501H9.5C9.03406 10.501 8.80109 10.501 8.61732 10.5771C8.37229 10.6786 8.17761 10.8733 8.07612 11.1183Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/logs.tsx b/apps/sim/components/emcn/icons/logs.tsx
new file mode 100644
index 00000000000..19bc2a0cfb1
--- /dev/null
+++ b/apps/sim/components/emcn/icons/logs.tsx
@@ -0,0 +1,38 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Logs icon (Hugeicons stroke-rounded: ThirdBracketSquareIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Logs({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M14 16C14.9241 16 15.6733 15.4883 15.6733 14.8571C15.6733 13.6365 15.6869 13.1336 16.755 12.4041C17.0817 12.1809 17.0817 11.8191 16.755 11.5959C15.6869 10.8664 15.6733 10.3635 15.6733 9.14286C15.6733 8.51167 14.9241 8 14 8M10 16C9.07588 16 8.32673 15.4883 8.32673 14.8571C8.32673 13.6365 8.31312 13.1336 7.24505 12.4041C6.91832 12.1809 6.91832 11.8191 7.24504 11.5959C8.31312 10.8664 8.32673 10.3635 8.32673 9.14286C8.32673 8.51167 9.07588 8 10 8'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/mail.tsx b/apps/sim/components/emcn/icons/mail.tsx
index 9901d405b31..32442048864 100644
--- a/apps/sim/components/emcn/icons/mail.tsx
+++ b/apps/sim/components/emcn/icons/mail.tsx
@@ -1,26 +1,37 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Mail icon component - envelope
- * @param props - SVG properties including className, fill, etc.
+ * Mail icon (Hugeicons stroke-rounded: Mail01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Mail(props: SVGProps<SVGSVGElement>) {
+export function Mail({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='0.75' y='2.75' width='19' height='14' rx='2' />
-      <path d='M0.75 5.75L10.25 11.75L19.75 5.75' />
+      <path
+        d='M2 6L8.91302 9.91697C11.4616 11.361 12.5384 11.361 15.087 9.91697L22 6'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M2.01577 13.4756C2.08114 16.5412 2.11383 18.0739 3.24496 19.2094C4.37608 20.3448 5.95033 20.3843 9.09883 20.4634C11.0393 20.5122 12.9607 20.5122 14.9012 20.4634C18.0497 20.3843 19.6239 20.3448 20.7551 19.2094C21.8862 18.0739 21.9189 16.5412 21.9842 13.4756C22.0053 12.4899 22.0053 11.5101 21.9842 10.5244C21.9189 7.45886 21.8862 5.92609 20.7551 4.79066C19.6239 3.65523 18.0497 3.61568 14.9012 3.53657C12.9607 3.48781 11.0393 3.48781 9.09882 3.53656C5.95033 3.61566 4.37608 3.65521 3.24495 4.79065C2.11382 5.92608 2.08114 7.45885 2.01576 10.5244C1.99474 11.5101 1.99475 12.4899 2.01577 13.4756Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/manage-workspace.tsx b/apps/sim/components/emcn/icons/manage-workspace.tsx
index 88dd62e06f3..e2e9239b431 100644
--- a/apps/sim/components/emcn/icons/manage-workspace.tsx
+++ b/apps/sim/components/emcn/icons/manage-workspace.tsx
@@ -1,33 +1,67 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ManageWorkspace icon component - horizontal sliders / controls
- * @param props - SVG properties including className, fill, etc.
+ * ManageWorkspace icon (Hugeicons stroke-rounded: UserGroupIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ManageWorkspace(props: SVGProps<SVGSVGElement>) {
+export function ManageWorkspace({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M21 4h-7' />
-      <path d='M10 4H3' />
-      <path d='M21 12h-9' />
-      <path d='M8 12H3' />
-      <path d='M21 20h-7' />
-      <path d='M10 20H3' />
-      <path d='M14 2v4' />
-      <path d='M8 10v4' />
-      <path d='M14 18v4' />
+      <path
+        d='M15.5 11C15.5 9.067 13.933 7.5 12 7.5C10.067 7.5 8.5 9.067 8.5 11C8.5 12.933 10.067 14.5 12 14.5C13.933 14.5 15.5 12.933 15.5 11Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15.4827 11.3499C15.8047 11.4475 16.1462 11.5 16.5 11.5C18.433 11.5 20 9.933 20 8C20 6.067 18.433 4.5 16.5 4.5C14.6851 4.5 13.1928 5.8814 13.0173 7.65013'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M10.9827 7.65013C10.8072 5.8814 9.31492 4.5 7.5 4.5C5.567 4.5 4 6.067 4 8C4 9.933 5.567 11.5 7.5 11.5C7.85381 11.5 8.19535 11.4475 8.51727 11.3499'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22 16.5C22 13.7386 19.5376 11.5 16.5 11.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17.5 19.5C17.5 16.7386 15.0376 14.5 12 14.5C8.96243 14.5 6.5 16.7386 6.5 19.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7.5 11.5C4.46243 11.5 2 13.7386 2 16.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/message-circle.tsx b/apps/sim/components/emcn/icons/message-circle.tsx
index 8626f8c9e1a..b1d4b249616 100644
--- a/apps/sim/components/emcn/icons/message-circle.tsx
+++ b/apps/sim/components/emcn/icons/message-circle.tsx
@@ -1,25 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * MessageCircle icon component - round chat bubble with tail
- * @param props - SVG properties including className, fill, etc.
+ * MessageCircle icon (Hugeicons stroke-rounded: BubbleChatIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function MessageCircle(props: SVGProps<SVGSVGElement>) {
+export function MessageCircle({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       aria-hidden='true'
       {...props}
     >
-      <path d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z' />
+      <path
+        d='M21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C10.3719 21.5 8.8394 21.0904 7.5 20.3687C5.63177 19.362 4.37462 20.2979 3.26592 20.4658C3.09774 20.4913 2.93024 20.4302 2.80997 20.31C2.62741 20.1274 2.59266 19.8451 2.6935 19.6074C3.12865 18.5818 3.5282 16.6382 2.98341 15C2.6698 14.057 2.5 13.0483 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12.1257 12H12.0007M8.125 12H8M16.125 12H16M12.2507 12C12.2507 12.1381 12.1388 12.25 12.0007 12.25C11.8627 12.25 11.7507 12.1381 11.7507 12C11.7507 11.8619 11.8627 11.75 12.0007 11.75C12.1388 11.75 12.2507 11.8619 12.2507 12ZM8.25 12C8.25 12.1381 8.13807 12.25 8 12.25C7.86193 12.25 7.75 12.1381 7.75 12C7.75 11.8619 7.86193 11.75 8 11.75C8.13807 11.75 8.25 11.8619 8.25 12ZM16.25 12C16.25 12.1381 16.1381 12.25 16 12.25C15.8619 12.25 15.75 12.1381 15.75 12C15.75 11.8619 15.8619 11.75 16 11.75C16.1381 11.75 16.25 11.8619 16.25 12Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/mic-off.tsx b/apps/sim/components/emcn/icons/mic-off.tsx
new file mode 100644
index 00000000000..0331401436e
--- /dev/null
+++ b/apps/sim/components/emcn/icons/mic-off.tsx
@@ -0,0 +1,38 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * MicOff icon (Hugeicons stroke-rounded: MicOff01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function MicOff({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path d='M2 2L22 22' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
+      <path
+        d='M4 11C4 15.4183 7.58172 19 12 19M12 19C13.9545 19 15.7454 18.2991 17.1348 17.1348M12 19V22M12 22H15M12 22H9M20 11C20 12.6514 19.4996 14.1859 18.6422 15.4603'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17.0078 6.99599C17.0078 4.23457 14.7692 2.01599 12.0078 2.01599C10.139 2.01599 8.5379 2.98126 7.67981 4.49999M17.0078 6.99599L13.9798 7.00799M17.0078 6.99599V11.004M7.00781 6.99599V11.016C7.00781 13.7774 9.24639 16.016 12.0078 16.016C13.1432 16.016 14.1725 15.6256 15.0118 14.988M16.4465 13.26C16.8051 12.5705 17.0078 11.8469 17.0078 11.016V11.004M14.1829 11.004H17.0078'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/mic.tsx b/apps/sim/components/emcn/icons/mic.tsx
index 4a59eabd042..cbb7df532af 100644
--- a/apps/sim/components/emcn/icons/mic.tsx
+++ b/apps/sim/components/emcn/icons/mic.tsx
@@ -1,27 +1,37 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Mic icon component - microphone with stand for voice input
- * @param props - SVG properties including className, fill, etc.
+ * Mic icon (Hugeicons stroke-rounded: Mic01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Mic(props: SVGProps<SVGSVGElement>) {
+export function Mic({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='7.25' y='0.75' width='6' height='12' rx='3' />
-      <path d='M3.75 9.25V10.25C3.75 13.8399 6.66015 16.75 10.25 16.75C13.8399 16.75 16.75 13.8399 16.75 10.25V9.25' />
-      <path d='M10.25 16.75V19.25' />
+      <path
+        d='M17 7V11C17 13.7614 14.7614 16 12 16C9.23858 16 7 13.7614 7 11V7C7 4.23858 9.23858 2 12 2C14.7614 2 17 4.23858 17 7Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path d='M17 7H14M17 11H14' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
+      <path
+        d='M20 11C20 15.4183 16.4183 19 12 19M12 19C7.58172 19 4 15.4183 4 11M12 19V22M12 22H15M12 22H9'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/minus.tsx b/apps/sim/components/emcn/icons/minus.tsx
new file mode 100644
index 00000000000..f3fee9d9246
--- /dev/null
+++ b/apps/sim/components/emcn/icons/minus.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Minus icon (Hugeicons stroke-rounded: MinusSignIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Minus({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M20 12L4 12'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/moon.tsx b/apps/sim/components/emcn/icons/moon.tsx
new file mode 100644
index 00000000000..ae701992e85
--- /dev/null
+++ b/apps/sim/components/emcn/icons/moon.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Moon icon (Hugeicons stroke-rounded: Moon02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Moon({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M21.5 14.0784C20.3003 14.7189 18.9301 15.0821 17.4751 15.0821C12.7491 15.0821 8.91792 11.2509 8.91792 6.52485C8.91792 5.06986 9.28105 3.69968 9.92163 2.5C5.66765 3.49698 2.5 7.31513 2.5 11.8731C2.5 17.1899 6.8101 21.5 12.1269 21.5C16.6849 21.5 20.503 18.3324 21.5 14.0784Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/more-horizontal.tsx b/apps/sim/components/emcn/icons/more-horizontal.tsx
index 505c0ef01d2..024636cb318 100644
--- a/apps/sim/components/emcn/icons/more-horizontal.tsx
+++ b/apps/sim/components/emcn/icons/more-horizontal.tsx
@@ -1,31 +1,31 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * MoreHorizontal icon component (three horizontal dots)
- * @param props - SVG properties including className, fill, etc.
+ * MoreHorizontal icon (Hugeicons stroke-rounded: MoreHorizontalIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function MoreHorizontal(props: SVGProps<SVGSVGElement>) {
+export function MoreHorizontal({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='12'
-      height='3'
-      viewBox='0 0 12 3'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M10.64 2.72C10.46 2.72 10.29 2.68 10.122 2.61C9.96 2.54 9.81 2.44 9.68 2.32C9.56 2.19 9.46 2.04 9.39 1.88C9.32 1.71 9.28 1.54 9.28 1.36C9.28 1.18 9.32 1 9.39 0.84C9.45 0.67 9.55 0.52 9.68 0.4C9.81 0.27 9.96 0.17 10.12 0.1C10.286 0.04 10.46 5.74e-05 10.641 7.02e-08C11 0 11.35 0.14 11.6 0.4C11.86 0.65 12 1 12 1.36C12 1.72 11.86 2.06 11.6 2.32C11.35 2.57 11 2.72 10.64 2.72Z'
-        fill='currentColor'
-      />
-      <path
-        d='M6 2.72C6.75 2.72 7.36 2.11 7.36 1.36C7.36 0.61 6.75 0 6 0C5.25 0 4.64 0.61 4.64 1.36C4.64 2.11 5.25 2.72 6 2.72Z'
-        fill='currentColor'
-      />
-      <path
-        d='M1.36 2.72C2.11 2.72 2.72 2.11 2.72 1.36C2.72 0.61 2.11 0 1.36 0C0.61 0 0 0.61 0 1.36C0 2.11 0.61 2.72 1.36 2.72Z'
-        fill='currentColor'
+        d='M6.00449 12.5V12M18.0045 12.5V12M12.0045 12.5V12M7.00449 12.5C7.00449 11.9477 6.55677 11.5 6.00449 11.5C5.4522 11.5 5.00449 11.9477 5.00449 12.5C5.00449 13.0523 5.4522 13.5 6.00449 13.5C6.55677 13.5 7.00449 13.0523 7.00449 12.5ZM19.0045 12.5C19.0045 11.9477 18.5568 11.5 18.0045 11.5C17.4522 11.5 17.0045 11.9477 17.0045 12.5C17.0045 13.0523 17.4522 13.5 18.0045 13.5C18.5568 13.5 19.0045 13.0523 19.0045 12.5ZM13.0045 12.5C13.0045 11.9477 12.5568 11.5 12.0045 11.5C11.4522 11.5 11.0045 11.9477 11.0045 12.5C11.0045 13.0523 11.4522 13.5 12.0045 13.5C12.5568 13.5 13.0045 13.0523 13.0045 12.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/more-vertical.tsx b/apps/sim/components/emcn/icons/more-vertical.tsx
new file mode 100644
index 00000000000..c2dafb87559
--- /dev/null
+++ b/apps/sim/components/emcn/icons/more-vertical.tsx
@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * MoreVertical icon (Hugeicons stroke-rounded: MoreVerticalIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function MoreVertical({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M11.9967 12.5V12M11.9967 6.5V6M11.9967 18.5V18M12.9967 12.5C12.9967 11.9477 12.549 11.5 11.9967 11.5C11.4444 11.5 10.9967 11.9477 10.9967 12.5C10.9967 13.0523 11.4444 13.5 11.9967 13.5C12.549 13.5 12.9967 13.0523 12.9967 12.5ZM12.9967 6.5C12.9967 5.94772 12.549 5.5 11.9967 5.5C11.4444 5.5 10.9967 5.94772 10.9967 6.5C10.9967 7.05228 11.4444 7.5 11.9967 7.5C12.549 7.5 12.9967 7.05228 12.9967 6.5ZM12.9967 18.5C12.9967 17.9477 12.549 17.5 11.9967 17.5C11.4444 17.5 10.9967 17.9477 10.9967 18.5C10.9967 19.0523 11.4444 19.5 11.9967 19.5C12.549 19.5 12.9967 19.0523 12.9967 18.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/music.tsx b/apps/sim/components/emcn/icons/music.tsx
new file mode 100644
index 00000000000..cd9e6c89cef
--- /dev/null
+++ b/apps/sim/components/emcn/icons/music.tsx
@@ -0,0 +1,48 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Music icon (Hugeicons stroke-rounded: MusicNote01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Music({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M7 9.5C7 10.8807 5.88071 12 4.5 12C3.11929 12 2 10.8807 2 9.5C2 8.11929 3.11929 7 4.5 7C5.88071 7 7 8.11929 7 9.5ZM7 9.5V2C7.33333 2.5 7.6 4.6 10 5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <circle cx='10.5' cy='19.5' r='2.5' stroke='currentColor' strokeWidth='1.5' />
+      <circle cx='20' cy='18' r='2' stroke='currentColor' strokeWidth='1.5' />
+      <path
+        d='M13 19.5L13 11C13 10.09 13 9.63502 13.2466 9.35248C13.4932 9.06993 13.9938 9.00163 14.9949 8.86504C18.0085 8.45385 20.2013 7.19797 21.3696 6.42937C21.6498 6.24509 21.7898 6.15295 21.8949 6.20961C22 6.26627 22 6.43179 22 6.76283V17.9259'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13 13C17.8 13 21 10.6667 22 10'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/network.tsx b/apps/sim/components/emcn/icons/network.tsx
new file mode 100644
index 00000000000..38b5a43fe2c
--- /dev/null
+++ b/apps/sim/components/emcn/icons/network.tsx
@@ -0,0 +1,48 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Network icon (Hugeicons stroke-rounded: GlobalIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Network({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20 5.69899C19.0653 5.76636 17.8681 6.12824 17.0379 7.20277C15.5385 9.14361 14.039 9.30556 13.0394 8.65861C11.5399 7.6882 12.8 6.11636 11.0401 5.26215C9.89313 4.70542 9.73321 3.19045 10.3716 2'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M2 11C2.7625 11.6621 3.83046 12.2682 5.08874 12.2682C7.68843 12.2682 8.20837 12.7649 8.20837 14.7518C8.20837 16.7387 8.20837 16.7387 8.72831 18.2288C9.06651 19.1981 9.18472 20.1674 8.5106 21'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22 13.4523C21.1129 12.9411 20 12.7308 18.8734 13.5405C16.7177 15.0898 15.2314 13.806 14.5619 15.0889C13.5765 16.9775 17.0957 17.5711 14 22'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/no-wrap.tsx b/apps/sim/components/emcn/icons/no-wrap.tsx
index 0bcabfa5f28..5f1ba70d0f0 100644
--- a/apps/sim/components/emcn/icons/no-wrap.tsx
+++ b/apps/sim/components/emcn/icons/no-wrap.tsx
@@ -1,29 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * NoWrap icon component - shows text extending horizontally without wrapping
- * @param props - SVG properties including className, fill, etc.
+ * NoWrap icon (Hugeicons stroke-rounded: ArrowRight01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function NoWrap(props: SVGProps<SVGSVGElement>) {
+export function NoWrap({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M3 8h18' />
-      <path d='M3 12h18' />
-      <path d='M3 16h15' />
-      <path d='m21 16-3 3' />
-      <path d='m21 16-3-3' />
+      <path
+        d='M9.00005 6C9.00005 6 15 10.4189 15 12C15 13.5812 9 18 9 18'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/palette.tsx b/apps/sim/components/emcn/icons/palette.tsx
index ebfcd61fa7e..3bf2e0dc331 100644
--- a/apps/sim/components/emcn/icons/palette.tsx
+++ b/apps/sim/components/emcn/icons/palette.tsx
@@ -1,29 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Palette icon component - artist's color palette
- * @param props - SVG properties including className, fill, etc.
+ * Palette icon (Hugeicons stroke-rounded: PaintBoardIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Palette(props: SVGProps<SVGSVGElement>) {
+export function Palette({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M10.25 0.75C5.56 0.75 0.75 4.25 0.75 9.75C0.75 14.97 5.03 18.75 10.25 18.75C11.08 18.75 11.75 18.08 11.75 17.25C11.75 16.87 11.6 16.52 11.35 16.26C11.1 15.99 10.95 15.64 10.95 15.25C10.95 14.42 11.62 13.75 12.45 13.75H14.25C17.01 13.75 19.75 11.51 19.75 8.75C19.75 4.47 15.45 0.75 10.25 0.75Z' />
-      <circle cx='5.75' cy='7.25' r='1' />
-      <circle cx='9.25' cy='4.5' r='1' />
-      <circle cx='13.5' cy='5' r='1' />
-      <circle cx='6.25' cy='11.5' r='1' />
+      <path
+        d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C12.8417 22 14 22.1163 14 21C14 20.391 13.6832 19.9212 13.3686 19.4544C12.9082 18.7715 12.4523 18.0953 13 17C13.6667 15.6667 14.7778 15.6667 16.4815 15.6667C17.3334 15.6667 18.3334 15.6667 19.5 15.5C21.601 15.1999 22 13.9084 22 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <circle cx='9.5' cy='8.5' r='1.5' stroke='currentColor' strokeWidth='1.5' />
+      <circle cx='16.5' cy='9.5' r='1.5' stroke='currentColor' strokeWidth='1.5' />
+      <path
+        d='M7.125 15H7M7.25 15C7.25 15.1381 7.13807 15.25 7 15.25C6.86193 15.25 6.75 15.1381 6.75 15C6.75 14.8619 6.86193 14.75 7 14.75C7.13807 14.75 7.25 14.8619 7.25 15Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/panel-left.tsx b/apps/sim/components/emcn/icons/panel-left.tsx
index 136d2d137e0..8e87fd6239f 100644
--- a/apps/sim/components/emcn/icons/panel-left.tsx
+++ b/apps/sim/components/emcn/icons/panel-left.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * PanelLeft icon component - sidebar panel layout
- * @param props - SVG properties including className, fill, etc.
+ * PanelLeft icon (Hugeicons stroke-rounded: PanelLeftIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function PanelLeft(props: SVGProps<SVGSVGElement>) {
+export function PanelLeft({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 3.25C0.75 1.87 1.87 0.75 3.25 0.75H17.25C18.63 0.75 19.75 1.87 19.75 3.25V16.25C19.75 17.63 18.63 18.75 17.25 18.75H3.25C1.87 18.75 0.75 17.63 0.75 16.25V3.25Z' />
-      <path d='M8.25 0.75V18.75' />
+      <path
+        d='M13 3H11C7.22876 3 5.34315 3 4.17157 4.17157C3 5.34315 3 7.22876 3 11V13C3 16.7712 3 18.6569 4.17157 19.8284C5.34315 21 7.22876 21 11 21H13C16.7712 21 18.6569 21 19.8284 19.8284C21 18.6569 21 16.7712 21 13V11C21 7.22876 21 5.34315 19.8284 4.17157C18.6569 3 16.7712 3 13 3Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9 3V21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/panel-right.tsx b/apps/sim/components/emcn/icons/panel-right.tsx
new file mode 100644
index 00000000000..d24f65d2923
--- /dev/null
+++ b/apps/sim/components/emcn/icons/panel-right.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * PanelRight icon (Hugeicons stroke-rounded: PanelRightIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function PanelRight({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M13 3H11C7.22876 3 5.34315 3 4.17157 4.17157C3 5.34315 3 7.22876 3 11V13C3 16.7712 3 18.6569 4.17157 19.8284C5.34315 21 7.22876 21 11 21H13C16.7712 21 18.6569 21 19.8284 19.8284C21 18.6569 21 16.7712 21 13V11C21 7.22876 21 5.34315 19.8284 4.17157C18.6569 3 16.7712 3 13 3Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15 3V21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/paperclip.tsx b/apps/sim/components/emcn/icons/paperclip.tsx
index 5bb3e6f9f69..b4d6d0b99e5 100644
--- a/apps/sim/components/emcn/icons/paperclip.tsx
+++ b/apps/sim/components/emcn/icons/paperclip.tsx
@@ -1,27 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Paperclip icon component - attachment clip
- * @param props - SVG properties including className, fill, etc.
+ * Paperclip icon (Hugeicons stroke-rounded: Attachment01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Paperclip(props: SVGProps<SVGSVGElement>) {
+export function Paperclip({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <g transform='rotate(-13.6501 10.25 10.25)'>
-        <path d='M18.25 9.75L10.4 17.6C8.46 19.54 5.31 19.54 3.37 17.6C1.43 15.66 1.43 12.51 3.37 10.57L11.22 2.72C12.51 1.43 14.61 1.43 15.9 2.72C17.19 4.01 17.19 6.11 15.9 7.4L8.05 15.25C7.4 15.9 6.35 15.9 5.7 15.25C5.05 14.6 5.05 13.55 5.7 12.9L12.9 5.7' />
-      </g>
+      <path
+        d='M5.82338 12L4.27922 10.4558C2.57359 8.75022 2.57359 5.98485 4.27922 4.27922C5.98485 2.57359 8.75022 2.57359 10.4558 4.27922L19.7208 13.5442C21.4264 15.2498 21.4264 18.0152 19.7208 19.7208C18.0152 21.4264 15.2498 21.4264 13.5442 19.7208L10.0698 16.2464C9.00379 15.1804 9.00379 13.4521 10.0698 12.386C11.1358 11.32 12.8642 11.32 13.9302 12.386L15.8604 14.3162'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/pause-circle.tsx b/apps/sim/components/emcn/icons/pause-circle.tsx
new file mode 100644
index 00000000000..7ce68e8e2ca
--- /dev/null
+++ b/apps/sim/components/emcn/icons/pause-circle.tsx
@@ -0,0 +1,33 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * PauseCircle icon (Hugeicons stroke-rounded: PauseCircleIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function PauseCircle({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <circle cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='1.5' />
+      <path
+        d='M9.5 9L9.5 15M14.5 9V15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/pause.tsx b/apps/sim/components/emcn/icons/pause.tsx
index abb83672a77..649c53060e3 100644
--- a/apps/sim/components/emcn/icons/pause.tsx
+++ b/apps/sim/components/emcn/icons/pause.tsx
@@ -1,26 +1,35 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Pause icon component - two vertical bars
- * @param props - SVG properties including className, fill, etc.
+ * Pause icon (Hugeicons stroke-rounded: PauseIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Pause(props: SVGProps<SVGSVGElement>) {
+export function Pause({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M6.25 2.75V16.75' />
-      <path d='M14.25 2.75V16.75' />
+      <path
+        d='M4 7C4 5.58579 4 4.87868 4.43934 4.43934C4.87868 4 5.58579 4 7 4C8.41421 4 9.12132 4 9.56066 4.43934C10 4.87868 10 5.58579 10 7V17C10 18.4142 10 19.1213 9.56066 19.5607C9.12132 20 8.41421 20 7 20C5.58579 20 4.87868 20 4.43934 19.5607C4 19.1213 4 18.4142 4 17V7Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M14 7C14 5.58579 14 4.87868 14.4393 4.43934C14.8787 4 15.5858 4 17 4C18.4142 4 19.1213 4 19.5607 4.43934C20 4.87868 20 5.58579 20 7V17C20 18.4142 20 19.1213 19.5607 19.5607C19.1213 20 18.4142 20 17 20C15.5858 20 14.8787 20 14.4393 19.5607C14 19.1213 14 18.4142 14 17V7Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/pencil.tsx b/apps/sim/components/emcn/icons/pencil.tsx
index 5f3c7f5eee0..4ce2a47748e 100644
--- a/apps/sim/components/emcn/icons/pencil.tsx
+++ b/apps/sim/components/emcn/icons/pencil.tsx
@@ -1,26 +1,33 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Pencil icon component - edit/rename indicator
- * @param props - SVG properties including className, fill, etc.
+ * Pencil icon (Hugeicons stroke-rounded: PencilEdit01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Pencil(props: SVGProps<SVGSVGElement>) {
+export function Pencil({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M14.25 0.75L19.25 5.75L5.75 19.25H0.75V14.25L14.25 0.75Z' />
-      <path d='M10.75 4.25L15.75 9.25' />
+      <path
+        d='M15.2141 5.98239L16.6158 4.58063C17.39 3.80646 18.6452 3.80646 19.4194 4.58063C20.1935 5.3548 20.1935 6.60998 19.4194 7.38415L18.0176 8.78591M15.2141 5.98239L6.98023 14.2163C5.93493 15.2616 5.41226 15.7842 5.05637 16.4211C4.70047 17.058 4.3424 18.5619 4 20C5.43809 19.6576 6.94199 19.2995 7.57889 18.9436C8.21579 18.5877 8.73844 18.0651 9.78375 17.0198L18.0176 8.78591M15.2141 5.98239L18.0176 8.78591'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path d='M11 20H17' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/phone.tsx b/apps/sim/components/emcn/icons/phone.tsx
new file mode 100644
index 00000000000..1ae5ec6a4eb
--- /dev/null
+++ b/apps/sim/components/emcn/icons/phone.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Phone icon (Hugeicons stroke-rounded: SmartPhone01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Phone({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M13.5 2H10.5C8.14298 2 6.96447 2 6.23223 2.73223C5.5 3.46447 5.5 4.64298 5.5 7V17C5.5 19.357 5.5 20.5355 6.23223 21.2678C6.96447 22 8.14298 22 10.5 22H13.5C15.857 22 17.0355 22 17.7678 21.2678C18.5 20.5355 18.5 19.357 18.5 17V7C18.5 4.64298 18.5 3.46447 17.7678 2.73223C17.0355 2 15.857 2 13.5 2Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12.125 19H12M12.25 19C12.25 19.1381 12.1381 19.25 12 19.25C11.8619 19.25 11.75 19.1381 11.75 19C11.75 18.8619 11.8619 18.75 12 18.75C12.1381 18.75 12.25 18.8619 12.25 19Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/pin-off.tsx b/apps/sim/components/emcn/icons/pin-off.tsx
index 0f1bf606275..6a953c3b40b 100644
--- a/apps/sim/components/emcn/icons/pin-off.tsx
+++ b/apps/sim/components/emcn/icons/pin-off.tsx
@@ -1,28 +1,53 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * PinOff icon component - thumbtack pin with diagonal strike-through
- * @param props - SVG properties including className, fill, etc.
+ * PinOff icon (Hugeicons stroke-rounded: PinOffIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function PinOff(props: SVGProps<SVGSVGElement>) {
+export function PinOff({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.75'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       aria-hidden='true'
       {...props}
     >
-      <path d='M12 17v5' />
-      <path d='M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89' />
-      <path d='m2 2 20 20' />
-      <path d='M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11' />
+      <path
+        d='M7.5 8C6.95863 8.1281 6.49932 8.14239 5.99268 8.45891C5.07234 9.03388 4.85108 9.71674 5.08821 10.7612C5.94028 14.5139 9.48599 18.0596 13.2388 18.9117C14.2834 19.1489 14.9661 18.928 15.5416 18.0077C15.8411 17.5288 15.8716 17.0081 16 16.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 7.79915C12.1776 7.77794 12.3182 7.74034 12.4295 7.68235C13.3997 7.17686 13.9291 5.53361 14.4498 4.60009C14.9311 3.73715 15.1718 3.30567 15.7379 3.10227C16.3041 2.89888 16.6448 3.02205 17.3262 3.26839C18.9197 3.8445 20.1555 5.08032 20.7316 6.6738C20.9779 7.35521 21.1011 7.69591 20.8977 8.26204C20.6943 8.82817 20.2628 9.06884 19.3999 9.55018C18.4608 10.074 16.7954 10.6108 16.2905 11.5898C16.2345 11.6983 16.1978 11.8327 16.1769 12'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 21L8 16'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 3L21 21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/pin.tsx b/apps/sim/components/emcn/icons/pin.tsx
index 0e9fbfec2a0..03a670c1923 100644
--- a/apps/sim/components/emcn/icons/pin.tsx
+++ b/apps/sim/components/emcn/icons/pin.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Pin icon component - thumbtack pin
- * @param props - SVG properties including className, fill, etc.
+ * Pin icon (Hugeicons stroke-rounded: PinIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Pin(props: SVGProps<SVGSVGElement>) {
+export function Pin({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.75'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       aria-hidden='true'
       {...props}
     >
-      <path d='M12 17v5' />
-      <path d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z' />
+      <path
+        d='M3 21L8 16'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13.2585 18.8714C9.51516 18.0215 5.97844 14.4848 5.12853 10.7415C4.99399 10.1489 4.92672 9.85266 5.12161 9.37197C5.3165 8.89129 5.55457 8.74255 6.03071 8.44509C7.10705 7.77265 8.27254 7.55888 9.48209 7.66586C11.1793 7.81598 12.0279 7.89104 12.4512 7.67048C12.8746 7.44991 13.1622 6.93417 13.7376 5.90269L14.4664 4.59604C14.9465 3.73528 15.1866 3.3049 15.7513 3.10202C16.316 2.89913 16.6558 3.02199 17.3355 3.26771C18.9249 3.84236 20.1576 5.07505 20.7323 6.66449C20.978 7.34417 21.1009 7.68401 20.898 8.2487C20.6951 8.8134 20.2647 9.05346 19.4039 9.53358L18.0672 10.2792C17.0376 10.8534 16.5229 11.1406 16.3024 11.568C16.0819 11.9955 16.162 12.8256 16.3221 14.4859C16.4399 15.7068 16.2369 16.88 15.5555 17.9697C15.2577 18.4458 15.1088 18.6839 14.6283 18.8786C14.1477 19.0733 13.8513 19.006 13.2585 18.8714Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/play.tsx b/apps/sim/components/emcn/icons/play.tsx
index dc292b3d39e..8b7a9a0fe83 100644
--- a/apps/sim/components/emcn/icons/play.tsx
+++ b/apps/sim/components/emcn/icons/play.tsx
@@ -1,48 +1,56 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Play icon component (filled/solid version)
- * @param props - SVG properties including className, fill, etc.
+ * Play icon (Hugeicons stroke-rounded: PlayIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Play(props: SVGProps<SVGSVGElement>) {
+export function Play({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='10'
-      height='10'
-      viewBox='0 0 10 10'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M6.13 1.7C7.08 2.24 7.83 2.66 8.37 3.05C8.9 3.44 9.3 3.85 9.44 4.4C9.55 4.79 9.55 5.21 9.44 5.6C9.3 6.15 8.9 6.56 8.37 6.95C7.83 7.34 7.08 7.76 6.13 8.3L6.13 8.3L6.13 8.3C5.21 8.83 4.44 9.27 3.85 9.52C3.25 9.77 2.71 9.9 2.19 9.75C1.8 9.64 1.45 9.43 1.16 9.15C0.78 8.76 0.63 8.22 0.55 7.58C0.48 6.93 0.48 6.1 0.48 5.03V5.03V4.97V4.97C0.48 3.9 0.48 3.07 0.55 2.42C0.63 1.78 0.78 1.24 1.16 0.85C1.45 0.57 1.8 0.36 2.19 0.25C2.71 0.1 3.25 0.23 3.85 0.48C4.44 0.73 5.21 1.17 6.13 1.7L6.13 1.7Z'
-        fill='currentColor'
+        d='M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
 }
 
 /**
- * Play icon component (stroke/outline version)
- * @param props - SVG properties including className, stroke, etc.
+ * PlayOutline icon (Hugeicons stroke-rounded: PlayIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function PlayOutline(props: SVGProps<SVGSVGElement>) {
+export function PlayOutline({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M14.26 5.39C16.17 6.48 17.67 7.33 18.73 8.11C19.81 8.89 20.6 9.71 20.89 10.79C21.09 11.58 21.09 12.42 20.89 13.21C20.6 14.29 19.81 15.11 18.73 15.89C17.67 16.67 16.17 17.52 14.26 18.61C12.42 19.65 10.87 20.53 9.69 21.04C8.51 21.54 7.42 21.8 6.37 21.5C5.6 21.28 4.89 20.86 4.33 20.29C3.56 19.51 3.25 18.44 3.1 17.15C2.96 15.87 2.96 14.19 2.96 12.06V11.94C2.96 9.81 2.96 8.13 3.1 6.85C3.25 5.56 3.56 4.49 4.33 3.71C4.89 3.14 5.6 2.72 6.37 2.5C7.42 2.2 8.51 2.46 9.69 2.96C10.87 3.47 12.42 4.35 14.26 5.39Z' />
+      <path
+        d='M18.8906 12.846C18.5371 14.189 16.8667 15.138 13.5257 17.0361C10.296 18.8709 8.6812 19.7884 7.37983 19.4196C6.8418 19.2671 6.35159 18.9776 5.95624 18.5787C5 17.6139 5 15.7426 5 12C5 8.2574 5 6.3861 5.95624 5.42132C6.35159 5.02245 6.8418 4.73288 7.37983 4.58042C8.6812 4.21165 10.296 5.12907 13.5257 6.96393C16.8667 8.86197 18.5371 9.811 18.8906 11.154C19.0365 11.7084 19.0365 12.2916 18.8906 12.846Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/plus.tsx b/apps/sim/components/emcn/icons/plus.tsx
index 90d9aab7c79..45b760b9c59 100644
--- a/apps/sim/components/emcn/icons/plus.tsx
+++ b/apps/sim/components/emcn/icons/plus.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Plus icon component
- * @param props - SVG properties including className, fill, etc.
+ * Plus icon (Hugeicons stroke-rounded: Add01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Plus(props: SVGProps<SVGSVGElement>) {
+export function Plus({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M10.25 3V17.5' />
-      <path d='M3 10.25H17.5' />
+      <path
+        d='M12.001 5.00003V19.002'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M19.002 12.002L4.99998 12.002'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/redo.tsx b/apps/sim/components/emcn/icons/redo.tsx
index b75c282e9ba..3821b8fb05a 100644
--- a/apps/sim/components/emcn/icons/redo.tsx
+++ b/apps/sim/components/emcn/icons/redo.tsx
@@ -1,33 +1,38 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Redo icon component
- * @param props - SVG properties including className, fill, etc.
+ * Redo icon (Hugeicons stroke-rounded: ArrowTurnForwardIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Redo(props: SVGProps<SVGSVGElement>) {
+export function Redo({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='12'
-      height='12'
-      viewBox='0 0 12 12'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M9.5 4.5H4C2.62 4.5 1.5 5.62 1.5 7C1.5 8.38 2.62 9.5 4 9.5H7'
+        d='M13 6H8.5C6.01472 6 4 8.01472 4 10.5C4 12.9853 6.01472 15 8.5 15H20'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
       <path
-        d='M8 2.5L10 4.5L8 6.5'
+        d='M17 12C17 12 20 14.2095 20 15C20 15.7906 17 18 17 18'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/repeat.tsx b/apps/sim/components/emcn/icons/repeat.tsx
new file mode 100644
index 00000000000..62efdeb4872
--- /dev/null
+++ b/apps/sim/components/emcn/icons/repeat.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Repeat icon (Hugeicons stroke-rounded: RepeatIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Repeat({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M16.3884 3L17.3913 3.97574C17.8393 4.41165 18.0633 4.62961 17.9844 4.81481C17.9056 5 17.5888 5 16.9552 5H9.19422C5.22096 5 2 8.13401 2 12C2 13.4872 2.47668 14.8662 3.2895 16'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7.61156 21L6.60875 20.0243C6.16074 19.5883 5.93673 19.3704 6.01557 19.1852C6.09441 19 6.4112 19 7.04478 19H14.8058C18.779 19 22 15.866 22 12C22 10.5128 21.5233 9.13383 20.7105 8'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/rocket.tsx b/apps/sim/components/emcn/icons/rocket.tsx
index 5c224e0ccd7..37878c3165b 100644
--- a/apps/sim/components/emcn/icons/rocket.tsx
+++ b/apps/sim/components/emcn/icons/rocket.tsx
@@ -1,30 +1,41 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Rocket icon component
- * @param props - SVG properties including className, fill, etc.
+ * Rocket icon (Hugeicons stroke-rounded: Rocket01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Rocket(props: SVGProps<SVGSVGElement>) {
+export function Rocket({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M11 1.75C8.5 4.75 7.25 8.75 7.25 12.75V15.75H14.75V12.75C14.75 8.75 13.5 4.75 11 1.75Z' />
-      <path d='M7.25 12.75L4.25 15.75H7.25' />
-      <path d='M14.75 12.75L17.75 15.75H14.75' />
-      <circle cx='11' cy='9.75' r='1.75' />
-      <path d='M9 15.75V18.25' />
-      <path d='M13 15.75V18.25' />
+      <path
+        d='M11.8013 6.48949L13.2869 5.00392C14.9596 3.3312 17.1495 2.63737 19.4671 2.52399C20.3686 2.47989 20.8193 2.45784 21.1807 2.81928C21.5422 3.18071 21.5201 3.63143 21.476 4.53289C21.3626 6.8505 20.6688 9.04042 18.9961 10.7131L17.5105 12.1987C16.2871 13.4221 15.9393 13.77 16.1961 15.097C16.4496 16.1107 16.6949 17.0923 15.9578 17.8294C15.0637 18.7235 14.2481 18.7235 13.354 17.8294L6.17058 10.646C5.27649 9.75188 5.27646 8.9363 6.17058 8.04219C6.90767 7.30509 7.88929 7.55044 8.90297 7.80389C10.23 8.06073 10.5779 7.71289 11.8013 6.48949Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path d='M2.5 21.5L7.5 16.5' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
+      <path d='M8.5 21.5L10.5 19.5' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
+      <path d='M2.5 15.5L4.5 13.5' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
+      <path
+        d='M17.125 7H17M17.25 7C17.25 7.13807 17.1381 7.25 17 7.25C16.8619 7.25 16.75 7.13807 16.75 7C16.75 6.86193 16.8619 6.75 17 6.75C17.1381 6.75 17.25 6.86193 17.25 7Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/rotate-ccw.tsx b/apps/sim/components/emcn/icons/rotate-ccw.tsx
new file mode 100644
index 00000000000..102629fa6fd
--- /dev/null
+++ b/apps/sim/components/emcn/icons/rotate-ccw.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * RotateCcw icon (Hugeicons stroke-rounded: RotateLeft01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function RotateCcw({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M20.0071 14.5662L19.3587 14.1731C18.7986 13.8508 18.3579 13.3564 18.102 12.7634L15.68 7.15102C15.5927 6.94865 15.4729 6.77988 15.328 6.64097C14.6876 6.02689 13.5808 6.28697 13.0432 6.99226C12.0506 8.29448 13.3839 9.52751 13.1022 10.6133L5.35908 6.26089C3.55799 5.28913 2.0024 7.87074 3.79277 9.06333L8.37607 11.6124C7.4934 12.765 5.25512 18.3551 8.12341 20.0599C8.28646 20.1568 8.4672 20.2213 8.64852 20.2773C8.76516 20.3134 8.88186 20.3496 8.99761 20.3857C9.8979 20.6667 11.6003 21.02 12.7668 20.9182C13.9811 20.8123 14.7421 21.4597 15.68 21.9995'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9.36184 4.96447C9.75873 5.36011 11.4854 5.24597 12.1223 5.16653M9.36184 4.96447C8.96494 4.56883 8.95358 2.63679 9.03328 2.0019M9.36184 4.96447C10.3829 3.19624 14.4425 0.375691 18.4708 3.19624C20.4175 4.55924 20.6922 5.4182 21 5.99362'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/rows3.tsx b/apps/sim/components/emcn/icons/rows3.tsx
index 70ae9195db9..726a23f5d43 100644
--- a/apps/sim/components/emcn/icons/rows3.tsx
+++ b/apps/sim/components/emcn/icons/rows3.tsx
@@ -1,27 +1,34 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Rows3 icon component - displays three horizontal rows in a rounded container
- * @param props - SVG properties including className, fill, etc.
+ * Rows3 icon (Hugeicons stroke-rounded: LayoutThreeRowIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Rows3(props: SVGProps<SVGSVGElement>) {
+export function Rows3({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 3.25C0.75 1.87 1.87 0.75 3.25 0.75H17.25C18.63 0.75 19.75 1.87 19.75 3.25V16.25C19.75 17.63 18.63 18.75 17.25 18.75H3.25C1.87 18.75 0.75 17.63 0.75 16.25V3.25Z' />
-      <path d='M0.75 6.75H19.75' />
-      <path d='M0.75 12.75H19.75' />
+      <path
+        d='M20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28248 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28248 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path d='M21.5 8.5L2.5 8.5' stroke='currentColor' strokeWidth='1.5' />
+      <path d='M21.5 15.5L2.5 15.5' stroke='currentColor' strokeWidth='1.5' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/rss.tsx b/apps/sim/components/emcn/icons/rss.tsx
new file mode 100644
index 00000000000..b2330478e7e
--- /dev/null
+++ b/apps/sim/components/emcn/icons/rss.tsx
@@ -0,0 +1,46 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Rss icon (Hugeicons stroke-rounded: RssIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Rss({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M19.5 19.5C19.5 11.2157 12.7843 4.5 4.5 4.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12.5 19.5C12.5 15.0817 8.91828 11.5 4.5 11.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M5.25 19H5M5.5 19C5.5 19.2761 5.27614 19.5 5 19.5C4.72386 19.5 4.5 19.2761 4.5 19C4.5 18.7239 4.72386 18.5 5 18.5C5.27614 18.5 5.5 18.7239 5.5 19Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/scan.tsx b/apps/sim/components/emcn/icons/scan.tsx
new file mode 100644
index 00000000000..d505a47de5a
--- /dev/null
+++ b/apps/sim/components/emcn/icons/scan.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Scan icon (Hugeicons stroke-rounded: ScanIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Scan({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M16.0042 2.5C17.9974 2.61348 19.2576 2.93381 20.1619 3.83811C21.0662 4.74243 21.3865 6.00268 21.5 7.99598M7.99582 2.5C6.00261 2.61348 4.74241 2.93381 3.83812 3.83811C2.9338 4.74243 2.61347 6.00268 2.5 7.99598M21.5 16.004C21.3865 17.9973 21.0662 19.2576 20.1619 20.1619C19.2576 21.0662 17.9973 21.3865 16.004 21.5M2.5 16.004C2.61347 17.9973 2.9338 19.2576 3.83812 20.1619C4.74244 21.0662 6.00268 21.3865 7.99597 21.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M5 12H19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/scissors.tsx b/apps/sim/components/emcn/icons/scissors.tsx
new file mode 100644
index 00000000000..7edc9c7cf5c
--- /dev/null
+++ b/apps/sim/components/emcn/icons/scissors.tsx
@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Scissors icon (Hugeicons stroke-rounded: Scissor01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Scissors({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13.4368 9.55807L10.6 12M10.6 12L7 15M10.6 12L13.4949 14.3865M10.6 12L7 9M16 8.5C16 9.32843 15.3284 10 14.5 10C13.6716 10 13 9.32843 13 8.5C13 7.67157 13.6716 7 14.5 7C15.3284 7 16 7.67157 16 8.5ZM16 15.5C16 16.3284 15.3284 17 14.5 17C13.6716 17 13 16.3284 13 15.5C13 14.6716 13.6716 14 14.5 14C15.3284 14 16 14.6716 16 15.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/search.tsx b/apps/sim/components/emcn/icons/search.tsx
index 78a2742d707..eda8c76baab 100644
--- a/apps/sim/components/emcn/icons/search.tsx
+++ b/apps/sim/components/emcn/icons/search.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Search icon component (magnifying glass)
- * @param props - SVG properties including className, fill, etc.
+ * Search icon (Hugeicons stroke-rounded: Search01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Search(props: SVGProps<SVGSVGElement>) {
+export function Search({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <circle cx='8.5' cy='8.5' r='7.5' />
-      <path d='M14 14L18 18' />
+      <path
+        d='M17 17L21 21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19C15.4183 19 19 15.4183 19 11Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/select-all.tsx b/apps/sim/components/emcn/icons/select-all.tsx
index a57f4a87c8f..cff36901868 100644
--- a/apps/sim/components/emcn/icons/select-all.tsx
+++ b/apps/sim/components/emcn/icons/select-all.tsx
@@ -1,28 +1,52 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * SelectAll icon component - four L-shaped corner brackets indicating a selection region
- * @param props - SVG properties including className, fill, etc.
+ * SelectAll icon (Hugeicons stroke-rounded: AlignSelectionIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function SelectAll(props: SVGProps<SVGSVGElement>) {
+export function SelectAll({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='2'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M8 4H4V8' />
-      <path d='M16 4H20V8' />
-      <path d='M20 16V20H16' />
-      <path d='M8 20H4V16' />
+      <path
+        d='M20 6V18M18 4H6M18 20H6M4 18V6'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22 4C22 5.10457 21.1046 6 20 6C18.8954 6 18 5.10457 18 4C18 2.89543 18.8954 2 20 2C21.1046 2 22 2.89543 22 4Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6 4C6 5.10457 5.10457 6 4 6C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 18.8954 18 20 18C21.1046 18 22 18.8954 22 20Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6 20C6 21.1046 5.10457 22 4 22C2.89543 22 2 21.1046 2 20C2 18.8954 2.89543 18 4 18C5.10457 18 6 18.8954 6 20Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/send-to-back.tsx b/apps/sim/components/emcn/icons/send-to-back.tsx
new file mode 100644
index 00000000000..1f0b71b4c84
--- /dev/null
+++ b/apps/sim/components/emcn/icons/send-to-back.tsx
@@ -0,0 +1,46 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * SendToBack icon (Hugeicons stroke-rounded: LayerSendToBackIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function SendToBack({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M12 21.5V7M15 19C14.4102 19.6068 12.8403 22 12 22C11.1597 22 9.58984 19.6068 9 19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20.2327 11.5C21.4109 12.062 22 12.4405 22 13.0001C22 13.6934 21.0958 14.1087 19.2873 14.9395L15.8901 16.5M3.76727 11.5C2.58909 12.062 2 12.4405 2 13.0001C2 13.6934 2.90423 14.1087 4.7127 14.9395L8.1099 16.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8.11012 10.5L4.7127 8.93936C2.90423 8.10863 2 7.69326 2 7C2 6.30674 2.90423 5.89137 4.7127 5.06064L9.60573 2.81298C10.7856 2.27099 11.3755 2 12 2C12.6245 2 13.2144 2.27099 14.3943 2.81298L19.2873 5.06064C21.0958 5.89137 22 6.30674 22 7C22 7.69326 21.0958 8.10863 19.2873 8.93937L15.8899 10.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/send.tsx b/apps/sim/components/emcn/icons/send.tsx
index 3ec578aafd6..501b6e18979 100644
--- a/apps/sim/components/emcn/icons/send.tsx
+++ b/apps/sim/components/emcn/icons/send.tsx
@@ -1,26 +1,30 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Send icon component - paper plane / arrow
- * @param props - SVG properties including className, fill, etc.
+ * Send icon (Hugeicons stroke-rounded: Navigation03Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Send(props: SVGProps<SVGSVGElement>) {
+export function Send({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M19.5 1.5L9 12' />
-      <path d='M19.5 1.5L13.5 19.5L9 12L1.5 8.5L19.5 1.5Z' />
+      <path
+        d='M11.922 4.79004C16.6963 3.16245 19.0834 2.34866 20.3674 3.63261C21.6513 4.91656 20.8375 7.30371 19.21 12.078L18.1016 15.3292C16.8517 18.9958 16.2267 20.8291 15.1964 20.9808C14.9195 21.0216 14.6328 20.9971 14.3587 20.9091C13.3395 20.5819 12.8007 18.6489 11.7231 14.783C11.4841 13.9255 11.3646 13.4967 11.0924 13.1692C11.0134 13.0742 10.9258 12.9866 10.8308 12.9076C10.5033 12.6354 10.0745 12.5159 9.21705 12.2769C5.35111 11.1993 3.41814 10.6605 3.0909 9.64127C3.00292 9.36724 2.97837 9.08053 3.01916 8.80355C3.17088 7.77332 5.00419 7.14834 8.6708 5.89838L11.922 4.79004Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/server.tsx b/apps/sim/components/emcn/icons/server.tsx
index 5b2fbe32daf..6782d033905 100644
--- a/apps/sim/components/emcn/icons/server.tsx
+++ b/apps/sim/components/emcn/icons/server.tsx
@@ -1,28 +1,67 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Server icon component - stacked server boxes
- * @param props - SVG properties including className, fill, etc.
+ * Server icon (Hugeicons stroke-rounded: ServerStack01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Server(props: SVGProps<SVGSVGElement>) {
+export function Server({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='1.75' y='0.75' width='17' height='7.5' rx='1.5' />
-      <rect x='1.75' y='11.25' width='17' height='7.5' rx='1.5' />
-      <circle cx='5.75' cy='4.5' r='0.75' fill='currentColor' />
-      <circle cx='5.75' cy='15' r='0.75' fill='currentColor' />
+      <path
+        d='M19 4H5C4.06812 4 3.60218 4 3.23463 4.15224C2.74458 4.35523 2.35523 4.74458 2.15224 5.23463C2 5.60218 2 6.06812 2 7C2 7.93188 2 8.39782 2.15224 8.76537C2.35523 9.25542 2.74458 9.64477 3.23463 9.84776C3.60218 10 4.06812 10 5 10H19C19.9319 10 20.3978 10 20.7654 9.84776C21.2554 9.64477 21.6448 9.25542 21.8478 8.76537C22 8.39782 22 7.93188 22 7C22 6.06812 22 5.60218 21.8478 5.23463C21.6448 4.74458 21.2554 4.35523 20.7654 4.15224C20.3978 4 19.9319 4 19 4Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M19 14H5C4.06812 14 3.60218 14 3.23463 14.1522C2.74458 14.3552 2.35523 14.7446 2.15224 15.2346C2 15.6022 2 16.0681 2 17C2 17.9319 2 18.3978 2.15224 18.7654C2.35523 19.2554 2.74458 19.6448 3.23463 19.8478C3.60218 20 4.06812 20 5 20H19C19.9319 20 20.3978 20 20.7654 19.8478C21.2554 19.6448 21.6448 19.2554 21.8478 18.7654C22 18.3978 22 17.9319 22 17C22 16.0681 22 15.6022 21.8478 15.2346C21.6448 14.7446 21.2554 14.3552 20.7654 14.1522C20.3978 14 19.9319 14 19 14Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6.125 7H6M6.25 7C6.25 7.13807 6.13807 7.25 6 7.25C5.86193 7.25 5.75 7.13807 5.75 7C5.75 6.86193 5.86193 6.75 6 6.75C6.13807 6.75 6.25 6.86193 6.25 7Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M10.125 7H10M10.25 7C10.25 7.13807 10.1381 7.25 10 7.25C9.86193 7.25 9.75 7.13807 9.75 7C9.75 6.86193 9.86193 6.75 10 6.75C10.1381 6.75 10.25 6.86193 10.25 7Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6.125 17H6M6.25 17C6.25 17.1381 6.13807 17.25 6 17.25C5.86193 17.25 5.75 17.1381 5.75 17C5.75 16.8619 5.86193 16.75 6 16.75C6.13807 16.75 6.25 16.8619 6.25 17Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M10.125 17H10M10.25 17C10.25 17.1381 10.1381 17.25 10 17.25C9.86193 17.25 9.75 17.1381 9.75 17C9.75 16.8619 9.86193 16.75 10 16.75C10.1381 16.75 10.25 16.8619 10.25 17Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/settings.tsx b/apps/sim/components/emcn/icons/settings.tsx
index 8064409535b..f8f0453ac6c 100644
--- a/apps/sim/components/emcn/icons/settings.tsx
+++ b/apps/sim/components/emcn/icons/settings.tsx
@@ -1,26 +1,36 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Settings icon component - gear/cog
- * @param props - SVG properties including className, fill, etc.
+ * Settings icon (Hugeicons stroke-rounded: Settings01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Settings(props: SVGProps<SVGSVGElement>) {
+export function Settings({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <circle cx='12' cy='12' r='3' />
-      <path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z' />
+      <path
+        d='M21.3175 7.14139L20.8239 6.28479C20.4506 5.63696 20.264 5.31305 19.9464 5.18388C19.6288 5.05472 19.2696 5.15664 18.5513 5.36048L17.3311 5.70418C16.8725 5.80994 16.3913 5.74994 15.9726 5.53479L15.6357 5.34042C15.2766 5.11043 15.0004 4.77133 14.8475 4.37274L14.5136 3.37536C14.294 2.71534 14.1842 2.38533 13.9228 2.19657C13.6615 2.00781 13.3143 2.00781 12.6199 2.00781H11.5051C10.8108 2.00781 10.4636 2.00781 10.2022 2.19657C9.94085 2.38533 9.83106 2.71534 9.61149 3.37536L9.27753 4.37274C9.12465 4.77133 8.84845 5.11043 8.48937 5.34042L8.15249 5.53479C7.73374 5.74994 7.25259 5.80994 6.79398 5.70418L5.57375 5.36048C4.85541 5.15664 4.49625 5.05472 4.17867 5.18388C3.86109 5.31305 3.67445 5.63696 3.30115 6.28479L2.80757 7.14139C2.45766 7.74864 2.2827 8.05227 2.31666 8.37549C2.35061 8.69871 2.58483 8.95918 3.05326 9.48012L4.0843 10.6328C4.3363 10.9518 4.51521 11.5078 4.51521 12.0077C4.51521 12.5078 4.33636 13.0636 4.08433 13.3827L3.05326 14.5354C2.58483 15.0564 2.35062 15.3168 2.31666 15.6401C2.2827 15.9633 2.45766 16.2669 2.80757 16.8741L3.30114 17.7307C3.67443 18.3785 3.86109 18.7025 4.17867 18.8316C4.49625 18.9608 4.85542 18.8589 5.57377 18.655L6.79394 18.3113C7.25263 18.2055 7.73387 18.2656 8.15267 18.4808L8.4895 18.6752C8.84851 18.9052 9.12464 19.2442 9.2775 19.6428L9.61149 20.6403C9.83106 21.3003 9.94085 21.6303 10.2022 21.8191C10.4636 22.0078 10.8108 22.0078 11.5051 22.0078H12.6199C13.3143 22.0078 13.6615 22.0078 13.9228 21.8191C14.1842 21.6303 14.294 21.3003 14.5136 20.6403L14.8476 19.6428C15.0004 19.2442 15.2765 18.9052 15.6356 18.6752L15.9724 18.4808C16.3912 18.2656 16.8724 18.2055 17.3311 18.3113L18.5513 18.655C19.2696 18.8589 19.6288 18.9608 19.9464 18.8316C20.264 18.7025 20.4506 18.3785 20.8239 17.7307L21.3175 16.8741C21.6674 16.2669 21.8423 15.9633 21.8084 15.6401C21.7744 15.3168 21.5402 15.0564 21.0718 14.5354L20.0407 13.3827C19.7887 13.0636 19.6098 12.5078 19.6098 12.0077C19.6098 11.5078 19.7888 10.9518 20.0407 10.6328L21.0718 9.48012C21.5402 8.95918 21.7744 8.69871 21.8084 8.37549C21.8423 8.05227 21.6674 7.74864 21.3175 7.14139Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15.5195 12C15.5195 13.933 13.9525 15.5 12.0195 15.5C10.0865 15.5 8.51953 13.933 8.51953 12C8.51953 10.067 10.0865 8.5 12.0195 8.5C13.9525 8.5 15.5195 10.067 15.5195 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/settings2.tsx b/apps/sim/components/emcn/icons/settings2.tsx
new file mode 100644
index 00000000000..47271104050
--- /dev/null
+++ b/apps/sim/components/emcn/icons/settings2.tsx
@@ -0,0 +1,36 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Settings2 icon (Hugeicons stroke-rounded: Settings02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Settings2({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M21.011 14.0965C21.5329 13.9558 21.7939 13.8854 21.8969 13.7508C22 13.6163 22 13.3998 22 12.9669V11.0332C22 10.6003 22 10.3838 21.8969 10.2493C21.7938 10.1147 21.5329 10.0443 21.011 9.90358C19.0606 9.37759 17.8399 7.33851 18.3433 5.40087C18.4817 4.86799 18.5509 4.60156 18.4848 4.44529C18.4187 4.28902 18.2291 4.18134 17.8497 3.96596L16.125 2.98673C15.7528 2.77539 15.5667 2.66972 15.3997 2.69222C15.2326 2.71472 15.0442 2.90273 14.6672 3.27873C13.208 4.73448 10.7936 4.73442 9.33434 3.27864C8.95743 2.90263 8.76898 2.71463 8.60193 2.69212C8.43489 2.66962 8.24877 2.77529 7.87653 2.98663L6.15184 3.96587C5.77253 4.18123 5.58287 4.28891 5.51678 4.44515C5.45068 4.6014 5.51987 4.86787 5.65825 5.4008C6.16137 7.3385 4.93972 9.37763 2.98902 9.9036C2.46712 10.0443 2.20617 10.1147 2.10308 10.2492C2 10.3838 2 10.6003 2 11.0332V12.9669C2 13.3998 2 13.6163 2.10308 13.7508C2.20615 13.8854 2.46711 13.9558 2.98902 14.0965C4.9394 14.6225 6.16008 16.6616 5.65672 18.5992C5.51829 19.1321 5.44907 19.3985 5.51516 19.5548C5.58126 19.7111 5.77092 19.8188 6.15025 20.0341L7.87495 21.0134C8.24721 21.2247 8.43334 21.3304 8.6004 21.3079C8.76746 21.2854 8.95588 21.0973 9.33271 20.7213C10.7927 19.2644 13.2088 19.2643 14.6689 20.7212C15.0457 21.0973 15.2341 21.2853 15.4012 21.3078C15.5682 21.3303 15.7544 21.2246 16.1266 21.0133L17.8513 20.034C18.2307 19.8187 18.4204 19.711 18.4864 19.5547C18.5525 19.3984 18.4833 19.132 18.3448 18.5991C17.8412 16.6616 19.0609 14.6226 21.011 14.0965Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/share2.tsx b/apps/sim/components/emcn/icons/share2.tsx
new file mode 100644
index 00000000000..ad02b68b4eb
--- /dev/null
+++ b/apps/sim/components/emcn/icons/share2.tsx
@@ -0,0 +1,45 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Share2 icon (Hugeicons stroke-rounded: Share08Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Share2({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M21 6.5C21 8.15685 19.6569 9.5 18 9.5C16.3431 9.5 15 8.15685 15 6.5C15 4.84315 16.3431 3.5 18 3.5C19.6569 3.5 21 4.84315 21 6.5Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9 12C9 13.6569 7.65685 15 6 15C4.34315 15 3 13.6569 3 12C3 10.3431 4.34315 9 6 9C7.65685 9 9 10.3431 9 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M21 17.5C21 19.1569 19.6569 20.5 18 20.5C16.3431 20.5 15 19.1569 15 17.5C15 15.8431 16.3431 14.5 18 14.5C19.6569 14.5 21 15.8431 21 17.5Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8.72852 10.7495L15.2285 7.75M8.72852 13.25L15.2285 16.2495'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/shield-check.tsx b/apps/sim/components/emcn/icons/shield-check.tsx
index 97161d72608..677bc5ad4c9 100644
--- a/apps/sim/components/emcn/icons/shield-check.tsx
+++ b/apps/sim/components/emcn/icons/shield-check.tsx
@@ -1,26 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ShieldCheck icon component - shield with checkmark
- * @param props - SVG properties including className, fill, etc.
+ * ShieldCheck icon (Hugeicons stroke-rounded: Shield01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ShieldCheck(props: SVGProps<SVGSVGElement>) {
+export function ShieldCheck({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M10.25 1.25L2.25 5.25V10.25C2.25 15.25 5.65 19.85 10.25 20.75C14.85 19.85 18.25 15.25 18.25 10.25V5.25L10.25 1.25Z' />
-      <path d='M7.25 10.75L9.25 12.75L13.25 8.75' />
+      <path
+        d='M18.7088 3.49534C16.8165 2.55382 14.5009 2 12 2C9.4991 2 7.1835 2.55382 5.29116 3.49534C4.36318 3.95706 3.89919 4.18792 3.4496 4.91378C3 5.63965 3 6.34248 3 7.74814V11.2371C3 16.9205 7.54236 20.0804 10.173 21.4338C10.9067 21.8113 11.2735 22 12 22C12.7265 22 13.0933 21.8113 13.8269 21.4338C16.4576 20.0804 21 16.9205 21 11.2371L21 7.74814C21 6.34249 21 5.63966 20.5504 4.91378C20.1008 4.18791 19.6368 3.95706 18.7088 3.49534Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/shuffle.tsx b/apps/sim/components/emcn/icons/shuffle.tsx
index 08e60fe69a3..c02ac27219d 100644
--- a/apps/sim/components/emcn/icons/shuffle.tsx
+++ b/apps/sim/components/emcn/icons/shuffle.tsx
@@ -1,28 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Shuffle icon component for re-rolling / randomizing a set.
- * @param props - SVG properties including className, fill, etc.
+ * Shuffle icon (Hugeicons stroke-rounded: ShuffleIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Shuffle(props: SVGProps<SVGSVGElement>) {
+export function Shuffle({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M3 17h5c4 0 4-10 8-10h4' />
-      <path d='M17 4l3 3-3 3' />
-      <path d='M3 7h5c4 0 4 10 8 10h4' />
-      <path d='M17 14l3 3-3 3' />
+      <path
+        d='M19.5576 4L20.4551 4.97574C20.8561 5.41165 21.0566 5.62961 20.9861 5.81481C20.9155 6 20.632 6 20.0649 6C18.7956 6 17.2771 5.79493 16.1111 6.4733C15.3903 6.89272 14.8883 7.62517 14.0392 9M3 18H4.58082C6.50873 18 7.47269 18 8.2862 17.5267C9.00708 17.1073 9.50904 16.3748 10.3582 15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M19.5576 20L20.4551 19.0243C20.8561 18.5883 21.0566 18.3704 20.9861 18.1852C20.9155 18 20.632 18 20.0649 18C18.7956 18 17.2771 18.2051 16.1111 17.5267C15.2976 17.0534 14.7629 16.1815 13.6935 14.4376L10.7038 9.5624C9.63441 7.81853 9.0997 6.9466 8.2862 6.4733C7.47269 6 6.50873 6 4.58082 6H3'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/slash.tsx b/apps/sim/components/emcn/icons/slash.tsx
index 92c269aba7b..bfdb00920b4 100644
--- a/apps/sim/components/emcn/icons/slash.tsx
+++ b/apps/sim/components/emcn/icons/slash.tsx
@@ -1,27 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Slash icon component - forward slash "/" glyph for the skills trigger.
- * Matches the weight and optical box of Plus/Paperclip (viewBox -1 -2 24 24,
- * strokeWidth 1.55, round caps). Centered at (10.25, 10.25) like Plus.
- * @param props - SVG properties including className, fill, etc.
+ * Slash icon (Hugeicons stroke-rounded: MinusSignIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Slash(props: SVGProps<SVGSVGElement>) {
+export function Slash({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M14 3L6.5 17.5' />
+      <path
+        d='M20 12L4 12'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/sparkles.tsx b/apps/sim/components/emcn/icons/sparkles.tsx
new file mode 100644
index 00000000000..62d647fb76f
--- /dev/null
+++ b/apps/sim/components/emcn/icons/sparkles.tsx
@@ -0,0 +1,37 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Sparkles icon (Hugeicons stroke-rounded: SparklesIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Sparkles({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M15 2L15.5387 4.39157C15.9957 6.42015 17.5798 8.00431 19.6084 8.46127L22 9L19.6084 9.53873C17.5798 9.99569 15.9957 11.5798 15.5387 13.6084L15 16L14.4613 13.6084C14.0043 11.5798 12.4202 9.99569 10.3916 9.53873L8 9L10.3916 8.46127C12.4201 8.00431 14.0043 6.42015 14.4613 4.39158L15 2Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7 12L7.38481 13.7083C7.71121 15.1572 8.84275 16.2888 10.2917 16.6152L12 17L10.2917 17.3848C8.84275 17.7112 7.71121 18.8427 7.38481 20.2917L7 22L6.61519 20.2917C6.28879 18.8427 5.15725 17.7112 3.70827 17.3848L2 17L3.70827 16.6152C5.15725 16.2888 6.28879 15.1573 6.61519 13.7083L7 12Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/split.tsx b/apps/sim/components/emcn/icons/split.tsx
new file mode 100644
index 00000000000..83e30af64d8
--- /dev/null
+++ b/apps/sim/components/emcn/icons/split.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Split icon (Hugeicons stroke-rounded: SplitIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Split({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M21 8.5V6.6C21 4.90294 21 4.05442 20.4728 3.52721C19.9456 3 19.0971 3 17.4 3H15.5M20 4L14.5 9.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 8.5V6.6C3 4.90294 3 4.05442 3.52721 3.52721C4.05442 3 4.90294 3 6.6 3H8.5M4 4L9.65686 9.65686C10.813 10.813 11.391 11.391 11.6955 12.1261C12 12.8612 12 13.6787 12 15.3137V21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/square-arrow-up-right.tsx b/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
index 2afafc228e8..da65bb066de 100644
--- a/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
+++ b/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
@@ -1,27 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * SquareArrowUpRight icon — a rounded square with an arrow pointing top-right inside it.
- * @param props - SVG properties including className, fill, etc.
+ * SquareArrowUpRight icon (Hugeicons stroke-rounded: ArrowUpRight01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function SquareArrowUpRight(props: SVGProps<SVGSVGElement>) {
+export function SquareArrowUpRight({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='1.25' y='0.75' width='18' height='18' rx='2.5' />
-      <path d='M9.75 5.25H14.25V9.75' />
-      <path d='M14.25 5.25L6.25 14.25' />
+      <path
+        d='M9 6.65032C9 6.65032 15.9383 6.10759 16.9154 7.08463C17.8924 8.06167 17.3496 15 17.3496 15M16.5 7.5L6.5 17.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/square.tsx b/apps/sim/components/emcn/icons/square.tsx
index 66bea3a4a09..1b8b0f842be 100644
--- a/apps/sim/components/emcn/icons/square.tsx
+++ b/apps/sim/components/emcn/icons/square.tsx
@@ -1,27 +1,44 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Square icon (stroke/outline version) — used as the "stop" glyph in
- * media-control-style buttons (per-row run/stop, table action bar, context
- * menus). Same visual as `lucide-react`'s `Square` so existing call sites
- * migrate without any visual change.
+ * Square icon (Hugeicons stroke-rounded: Square01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Square(props: SVGProps<SVGSVGElement>) {
+export function Square({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.75'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <rect x='3' y='3' width='18' height='18' rx='2' />
+      <path
+        d='M2.71474 7.02474C4.70574 6.91997 5.95498 7.07715 6.73577 8.91069C7.55559 11.111 9.58562 17.2403 10.0931 18.6548C10.6397 20.174 11.3424 21.2218 14.2313 20.9598'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M14.9999 7.0073C12.137 6.98235 9.7947 11.7222 8.49339 13.9923C7.06196 16.6117 4.6025 21.1519 1.9999 20.9773'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22.0001 8.99985H18.0001L21.2002 6.59981C21.7038 6.22212 22.0001 5.62938 22.0001 4.9999C22.0001 3.89538 21.1046 2.99999 20 3C18.8955 3.00001 17.9999 3.89543 17.9999 4.99998'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/sun.tsx b/apps/sim/components/emcn/icons/sun.tsx
new file mode 100644
index 00000000000..78b59de6587
--- /dev/null
+++ b/apps/sim/components/emcn/icons/sun.tsx
@@ -0,0 +1,36 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Sun icon (Hugeicons stroke-rounded: Sun03Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Sun({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 2V3.5M12 20.5V22M19.0708 19.0713L18.0101 18.0106M5.98926 5.98926L4.9286 4.9286M22 12H20.5M3.5 12H2M19.0713 4.92871L18.0106 5.98937M5.98975 18.0107L4.92909 19.0714'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/table-x.tsx b/apps/sim/components/emcn/icons/table-x.tsx
index abbb3785d75..a8fb987d0e6 100644
--- a/apps/sim/components/emcn/icons/table-x.tsx
+++ b/apps/sim/components/emcn/icons/table-x.tsx
@@ -1,30 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Table-X icon component - grid table with an X mark indicating a missing or deleted table
- * @param props - SVG properties including className, fill, etc.
+ * TableX icon (Hugeicons stroke-rounded: Table01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function TableX(props: SVGProps<SVGSVGElement>) {
+export function TableX({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 12.5V3.25C0.75 1.87 1.87 0.75 3.25 0.75H17.25C18.63 0.75 19.75 1.87 19.75 3.25V16.25C19.75 17.63 18.63 18.75 17.25 18.75H7.5' />
-      <path d='M0.75 6.75H19.75' />
-      <path d='M0.75 12.75H19.75' />
-      <path d='M10.25 0.75V18.75' />
-      <path d='M1 16L5 20' />
-      <path d='M5 16L1 20' />
+      <path
+        d='M20 10C20 10 22.375 11.8222 21.375 14.6667C20.375 17.5111 21.375 19.4074 22 20M20 10H4M20 10V4M4 10C4 10 1.625 11.8222 2.625 14.6667C3.625 17.5111 2.625 19.4074 2 20M4 10V4M22 4H20.75H20M2 4H3.25H4M4 4H20'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11 7H13'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/table.tsx b/apps/sim/components/emcn/icons/table.tsx
index 57be040a2c2..7a2a4d0a140 100644
--- a/apps/sim/components/emcn/icons/table.tsx
+++ b/apps/sim/components/emcn/icons/table.tsx
@@ -1,28 +1,36 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Table icon component - displays a grid table
- * @param props - SVG properties including className, fill, etc.
+ * Table icon (Hugeicons stroke-rounded: TableIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Table(props: SVGProps<SVGSVGElement>) {
+export function Table({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 3.25C0.75 1.87 1.87 0.75 3.25 0.75H17.25C18.63 0.75 19.75 1.87 19.75 3.25V16.25C19.75 17.63 18.63 18.75 17.25 18.75H3.25C1.87 18.75 0.75 17.63 0.75 16.25V3.25Z' />
-      <path d='M0.75 6.75H19.75' />
-      <path d='M0.75 12.75H19.75' />
-      <path d='M10.25 0.75V18.75' />
+      <path
+        d='M3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path d='M2.5 9L21.5 9' stroke='currentColor' strokeWidth='1.5' />
+      <path d='M2.5 13L21.5 13' stroke='currentColor' strokeWidth='1.5' />
+      <path d='M2.5 17L21.5 17' stroke='currentColor' strokeWidth='1.5' />
+      <path d='M12 21.5L12 9' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/tag.tsx b/apps/sim/components/emcn/icons/tag.tsx
index 00741809712..4fa20de8bf2 100644
--- a/apps/sim/components/emcn/icons/tag.tsx
+++ b/apps/sim/components/emcn/icons/tag.tsx
@@ -1,26 +1,47 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Tag icon component - price tag / label
- * @param props - SVG properties including className, fill, etc.
+ * TagIcon icon (Hugeicons stroke-rounded: Tag01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function TagIcon(props: SVGProps<SVGSVGElement>) {
+export function TagIcon({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 9.75V3.25C0.75 1.87 1.87 0.75 3.25 0.75H9.75L19.25 10.25L10.25 19.25L0.75 9.75Z' />
-      <circle cx='5.75' cy='5.75' r='1.25' />
+      <circle
+        cx='1.5'
+        cy='1.5'
+        r='1.5'
+        transform='matrix(1 0 0 -1 16 8.00024)'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M2.77423 11.1439C1.77108 12.2643 1.7495 13.9546 2.67016 15.1437C4.49711 17.5033 6.49674 19.5029 8.85633 21.3298C10.0454 22.2505 11.7357 22.2289 12.8561 21.2258C15.8979 18.5022 18.6835 15.6559 21.3719 12.5279C21.6377 12.2187 21.8039 11.8397 21.8412 11.4336C22.0062 9.63798 22.3452 4.46467 20.9403 3.05974C19.5353 1.65481 14.362 1.99377 12.5664 2.15876C12.1603 2.19608 11.7813 2.36233 11.472 2.62811C8.34412 5.31646 5.49781 8.10211 2.77423 11.1439Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7.00002 14.0002L10 17.0002'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/task.tsx b/apps/sim/components/emcn/icons/task.tsx
index 85b39b243b8..9178a766ad3 100644
--- a/apps/sim/components/emcn/icons/task.tsx
+++ b/apps/sim/components/emcn/icons/task.tsx
@@ -1,26 +1,37 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Task icon component - inbox tray representing incoming tasks
- * @param props - SVG properties including className, fill, etc.
+ * Task icon (Hugeicons stroke-rounded: CheckmarkSquare01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Task(props: SVGProps<SVGSVGElement>) {
+export function Task({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       aria-hidden='true'
       {...props}
     >
-      <polyline points='22 12 16 12 14 15 10 15 8 12 2 12' />
-      <path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z' />
+      <path
+        d='M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M8 13.75C8 13.75 9.6 14.6625 10.4 16C10.4 16 12.8 10.75 16 9'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/terminal-window.tsx b/apps/sim/components/emcn/icons/terminal-window.tsx
index 9eb411955a6..15411f82a98 100644
--- a/apps/sim/components/emcn/icons/terminal-window.tsx
+++ b/apps/sim/components/emcn/icons/terminal-window.tsx
@@ -1,27 +1,46 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Terminal window icon component
- * @param props - SVG properties including className, fill, etc.
+ * TerminalWindow icon (Hugeicons stroke-rounded: ComputerTerminal01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function TerminalWindow(props: SVGProps<SVGSVGElement>) {
+export function TerminalWindow({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='16'
-      height='14'
-      viewBox='0 0 16 14'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M3 0C1.34 0 0 1.34 0 3V11C0 12.66 1.34 14 3 14H13C14.66 14 16 12.66 16 11V3C16 1.34 14.66 0 13 0H3ZM1 3C1 1.9 1.9 1 3 1H13C14.1 1 15 1.9 15 3V4H1V3ZM1 5H15V11C15 12.1 14.1 13 13 13H3C1.9 13 1 12.1 1 11V5Z'
-        fill='currentColor'
+        d='M7.5 7.5L8.72654 8.55719C9.24218 9.00163 9.5 9.22386 9.5 9.5C9.5 9.77614 9.24218 9.99836 8.72654 10.4428L7.5 11.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11.5 12.5H15.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 21C15.7497 21 17.6246 21 18.9389 20.0451C19.3634 19.7367 19.7367 19.3634 20.0451 18.9389C21 17.6246 21 15.7497 21 12C21 8.25027 21 6.3754 20.0451 5.06107C19.7367 4.6366 19.3634 4.26331 18.9389 3.95491C17.6246 3 15.7497 3 12 3C8.25027 3 6.3754 3 5.06107 3.95491C4.6366 4.26331 4.26331 4.6366 3.95491 5.06107C3 6.3754 3 8.25027 3 12C3 15.7497 3 17.6246 3.95491 18.9389C4.26331 19.3634 4.6366 19.7367 5.06107 20.0451C6.3754 21 8.25027 21 12 21Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
       />
-      <circle cx='3.5' cy='2.5' r='0.75' fill='currentColor' />
-      <circle cx='5.75' cy='2.5' r='0.75' fill='currentColor' />
-      <circle cx='8' cy='2.5' r='0.75' fill='currentColor' />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/terminal.tsx b/apps/sim/components/emcn/icons/terminal.tsx
new file mode 100644
index 00000000000..24727a8841e
--- /dev/null
+++ b/apps/sim/components/emcn/icons/terminal.tsx
@@ -0,0 +1,46 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Terminal icon (Hugeicons stroke-rounded: ComputerTerminal01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Terminal({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M7.5 7.5L8.72654 8.55719C9.24218 9.00163 9.5 9.22386 9.5 9.5C9.5 9.77614 9.24218 9.99836 8.72654 10.4428L7.5 11.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11.5 12.5H15.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 21C15.7497 21 17.6246 21 18.9389 20.0451C19.3634 19.7367 19.7367 19.3634 20.0451 18.9389C21 17.6246 21 15.7497 21 12C21 8.25027 21 6.3754 20.0451 5.06107C19.7367 4.6366 19.3634 4.26331 18.9389 3.95491C17.6246 3 15.7497 3 12 3C8.25027 3 6.3754 3 5.06107 3.95491C4.6366 4.26331 4.26331 4.6366 3.95491 5.06107C3 6.3754 3 8.25027 3 12C3 15.7497 3 17.6246 3.95491 18.9389C4.26331 19.3634 4.6366 19.7367 5.06107 20.0451C6.3754 21 8.25027 21 12 21Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/thumbs-down.tsx b/apps/sim/components/emcn/icons/thumbs-down.tsx
index 1f3c3f59c36..c8807f56b54 100644
--- a/apps/sim/components/emcn/icons/thumbs-down.tsx
+++ b/apps/sim/components/emcn/icons/thumbs-down.tsx
@@ -1,28 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ThumbsDown icon component
- * @param props - SVG properties including className, fill, etc.
+ * ThumbsDown icon (Hugeicons stroke-rounded: ThumbsDownIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ThumbsDown(props: SVGProps<SVGSVGElement>) {
+export function ThumbsDown({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <g transform='scale(1,-1) translate(0,-20)'>
-        <path d='M6 8v12' />
-        <path d='M14 3.88L13 8h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 16.5 20H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L11 0a3.13 3.13 0 0 1 3 3.88Z' />
-      </g>
+      <path
+        d='M2 11.5C2 12.6046 2.89543 13.5 4 13.5C5.65685 13.5 7 12.1569 7 10.5V6.5C7 4.84315 5.65685 3.5 4 3.5C2.89543 3.5 2 4.39543 2 5.5V11.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15.4787 16.1937L15.2124 15.3337C14.9942 14.6289 14.8851 14.2765 14.969 13.9982C15.0369 13.7731 15.1859 13.579 15.389 13.4513C15.64 13.2935 16.0197 13.2935 16.7791 13.2935H17.1831C19.7532 13.2935 21.0382 13.2935 21.6452 12.5327C21.7145 12.4458 21.7762 12.3533 21.8296 12.2563C22.2965 11.4079 21.7657 10.2649 20.704 7.9789C19.7297 5.88111 19.2425 4.83222 18.338 4.21485C18.2505 4.15508 18.1605 4.0987 18.0683 4.04586C17.116 3.5 15.9362 3.5 13.5764 3.5H13.0646C10.2057 3.5 8.77628 3.5 7.88814 4.36053C7 5.22106 7 6.60607 7 9.37607V10.3497C7 11.8054 7 12.5332 7.25834 13.1994C7.51668 13.8656 8.01135 14.4134 9.00069 15.5089L13.0921 20.0394C13.1947 20.1531 13.246 20.2099 13.2913 20.2493C13.7135 20.6167 14.3652 20.5754 14.7344 20.1577C14.774 20.1129 14.8172 20.0501 14.9036 19.9245C15.0388 19.728 15.1064 19.6297 15.1654 19.5323C15.6928 18.6609 15.8524 17.6256 15.6108 16.6429C15.5838 16.5331 15.5488 16.4199 15.4787 16.1937Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/thumbs-up.tsx b/apps/sim/components/emcn/icons/thumbs-up.tsx
index 771d7d15b24..83c4b575e20 100644
--- a/apps/sim/components/emcn/icons/thumbs-up.tsx
+++ b/apps/sim/components/emcn/icons/thumbs-up.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ThumbsUp icon component
- * @param props - SVG properties including className, fill, etc.
+ * ThumbsUp icon (Hugeicons stroke-rounded: ThumbsUpIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ThumbsUp(props: SVGProps<SVGSVGElement>) {
+export function ThumbsUp({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M6 8v12' />
-      <path d='M14 3.88L13 8h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 16.5 20H3a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L11 0a3.13 3.13 0 0 1 3 3.88Z' />
+      <path
+        d='M2 12.5C2 11.3954 2.89543 10.5 4 10.5C5.65685 10.5 7 11.8431 7 13.5V17.5C7 19.1569 5.65685 20.5 4 20.5C2.89543 20.5 2 19.6046 2 18.5V12.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15.4787 7.80626L15.2124 8.66634C14.9942 9.37111 14.8851 9.72349 14.969 10.0018C15.0369 10.2269 15.1859 10.421 15.389 10.5487C15.64 10.7065 16.0197 10.7065 16.7791 10.7065H17.1831C19.7532 10.7065 21.0382 10.7065 21.6452 11.4673C21.7145 11.5542 21.7762 11.6467 21.8296 11.7437C22.2965 12.5921 21.7657 13.7351 20.704 16.0211C19.7297 18.1189 19.2425 19.1678 18.338 19.7852C18.2505 19.8449 18.1605 19.9013 18.0683 19.9541C17.116 20.5 15.9362 20.5 13.5764 20.5H13.0646C10.2057 20.5 8.77628 20.5 7.88814 19.6395C7 18.7789 7 17.3939 7 14.6239V13.6503C7 12.1946 7 11.4668 7.25834 10.8006C7.51668 10.1344 8.01135 9.58664 9.00069 8.49112L13.0921 3.96056C13.1947 3.84694 13.246 3.79012 13.2913 3.75075C13.7135 3.38328 14.3652 3.42464 14.7344 3.84235C14.774 3.8871 14.8172 3.94991 14.9036 4.07554C15.0388 4.27205 15.1064 4.37031 15.1654 4.46765C15.6928 5.33913 15.8524 6.37436 15.6108 7.35715C15.5838 7.46692 15.5488 7.5801 15.4787 7.80626Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/trash.tsx b/apps/sim/components/emcn/icons/trash.tsx
index 6c9a9fc078b..424bfb6bfbc 100644
--- a/apps/sim/components/emcn/icons/trash.tsx
+++ b/apps/sim/components/emcn/icons/trash.tsx
@@ -1,23 +1,43 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Trash icon component
- * @param props - SVG properties including className, fill, etc.
+ * Trash icon (Hugeicons stroke-rounded: Delete02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Trash(props: SVGProps<SVGSVGElement>) {
+export function Trash({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='14'
-      height='14'
-      viewBox='0 0 14 14'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M7.02 0.73C7.32 0.73 7.57 0.73 7.77 0.75C7.99 0.77 8.19 0.81 8.38 0.91C8.46 0.95 8.53 1 8.6 1.05C8.78 1.18 8.91 1.34 9.02 1.53C9.12 1.7 9.23 1.93 9.36 2.2L9.64 2.77H12.25C12.49 2.77 12.69 2.97 12.69 3.21C12.69 3.45 12.49 3.65 12.25 3.65H11.79L11.45 9.08C11.4 9.82 11.37 10.41 11.29 10.873C11.22 11.35 11.1 11.74 10.86 12.085C10.64 12.4 10.36 12.67 10.03 12.87C9.67 13.08 9.27 13.18 8.79 13.23C8.32 13.27 7.74 13.27 7 13.27C6.26 13.27 5.67 13.27 5.2 13.23C4.72 13.18 4.32 13.085 3.96 12.87C3.63 12.67 3.35 12.4 3.13 12.082C2.89 11.74 2.77 11.34 2.69 10.87C2.62 10.4 2.59 9.82 2.54 9.08L2.21 3.65H1.75C1.51 3.65 1.31 3.45 1.31 3.21C1.31 2.97 1.51 2.77 1.75 2.77H4.42L4.65 2.25C4.78 1.98 4.88 1.74 4.99 1.56C5.1 1.37 5.22 1.2 5.4 1.06C5.47 1.01 5.55 0.96 5.625 0.92C5.82 0.81 6.03 0.77 6.25 0.75C6.46 0.73 6.72 0.73 7.02 0.73ZM3.41 9.02C3.46 9.78 3.49 10.32 3.56 10.73C3.62 11.14 3.71 11.39 3.85 11.583C4 11.8 4.19 11.98 4.42 12.12C4.62 12.24 4.87 12.316 5.28 12.36C5.7 12.4 6.24 12.4 7 12.4C7.75 12.4 8.29 12.4 8.71 12.36C9.12 12.32 9.37 12.241 9.57 12.12C9.8 11.98 9.99 11.8 10.14 11.585C10.28 11.39 10.37 11.14 10.43 10.74C10.5 10.32 10.53 9.78 10.58 9.03L10.91 3.65H3.09L3.41 9.02ZM5.54 5.69C5.78 5.69 5.98 5.88 5.98 6.125V9.625C5.98 9.87 5.78 10.06 5.54 10.06C5.3 10.06 5.1 9.87 5.1 9.625V6.125C5.1 5.88 5.3 5.69 5.54 5.69ZM8.46 5.69C8.7 5.69 8.9 5.88 8.9 6.125V9.625C8.9 9.87 8.7 10.06 8.46 10.06C8.22 10.06 8.02 9.87 8.02 9.625V6.125C8.02 5.88 8.22 5.69 8.46 5.69ZM7.02 1.6C6.7 1.6 6.49 1.6 6.33 1.62C6.17 1.63 6.09 1.66 6.04 1.69C6 1.71 5.97 1.73 5.93 1.75C5.88 1.8 5.83 1.86 5.75 1.99C5.67 2.13 5.58 2.33 5.45 2.62L5.38 2.77H8.67L8.57 2.58C8.44 2.3 8.35 2.11 8.27 1.98C8.19 1.85 8.13 1.79 8.08 1.75C8.05 1.73 8.02 1.7 7.98 1.69C7.92 1.66 7.85 1.63 7.7 1.62C7.54 1.6 7.33 1.6 7.02 1.6Z'
-        fill='currentColor'
+        d='M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path d='M9.5 16.5L9.5 10.5' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
+      <path
+        d='M14.5 16.5L14.5 10.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/trash2.tsx b/apps/sim/components/emcn/icons/trash2.tsx
index 9148d809864..2b0dbc15a14 100644
--- a/apps/sim/components/emcn/icons/trash2.tsx
+++ b/apps/sim/components/emcn/icons/trash2.tsx
@@ -1,23 +1,43 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Trash2 icon component
- * @param props - SVG properties including className, fill, etc.
+ * Trash2 icon (Hugeicons stroke-rounded: Delete02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Trash2(props: SVGProps<SVGSVGElement>) {
+export function Trash2({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='14'
-      height='15'
-      viewBox='0 0 14 15'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M6.67 0C7.01 0 7.31 0 7.57 0.02C7.942 0.06 8.3 0.17 8.6 0.4C8.82 0.57 8.98 0.77 9.11 0.99C9.24 1.2 9.36 1.46 9.5 1.75L9.79 2.33H12.667C13.035 2.33 13.33 2.63 13.334 3C13.334 3.37 13.04 3.67 12.667 3.67H12.085L11.72 9.6C11.67 10.44 11.63 11.1 11.55 11.63C11.46 12.176 11.32 12.63 11.05 13.02C10.8 13.39 10.48 13.69 10.11 13.92C9.7 14.172 9.24 14.28 8.7 14.33H4.62C4.08 14.28 3.62 14.17 3.21 13.92C2.84 13.69 2.52 13.38 2.27 13.02C1.99 12.63 1.86 12.172 1.77 11.63C1.69 11.1 1.65 10.43 1.6 9.6L1.25 3.67H0.67C0.3 3.67 0 3.37 0 3C0 2.63 0.3 2.33 0.67 2.33H3.61L3.84 1.81C3.98 1.51 4.1 1.25 4.22 1.03C4.36 0.8 4.51 0.59 4.74 0.41C5.05 0.18 5.41 0.06 5.79 0.02C6.08 0 6.38 0 6.67 0ZM5 6.14C4.72 6.14 4.5 6.37 4.5 6.64V10.641C4.5 10.92 4.72 11.14 5 11.141C5.28 11.141 5.5 10.917 5.5 10.641V6.64C5.5 6.365 5.28 6.14 5 6.14ZM8.33 6.14C8.06 6.14 7.83 6.365 7.83 6.64V10.641C7.83 10.917 8.06 11.141 8.33 11.141C8.61 11.14 8.83 10.92 8.83 10.641V6.64C8.83 6.37 8.61 6.14 8.33 6.14ZM6.69 1.33C6.32 1.33 6.09 1.33 5.91 1.35C5.66 1.37 5.51 1.47 5.38 1.69C5.3 1.84 5.21 2.03 5.07 2.33H8.31C8.16 2.02 8.06 1.82 7.97 1.68C7.84 1.47 7.69 1.37 7.45 1.35C7.27 1.33 7.05 1.33 6.69 1.33Z'
-        fill='currentColor'
+        d='M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path d='M9.5 16.5L9.5 10.5' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
+      <path
+        d='M14.5 16.5L14.5 10.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/triangle-alert.tsx b/apps/sim/components/emcn/icons/triangle-alert.tsx
index 659ddb412d4..1701572cf53 100644
--- a/apps/sim/components/emcn/icons/triangle-alert.tsx
+++ b/apps/sim/components/emcn/icons/triangle-alert.tsx
@@ -1,27 +1,46 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * TriangleAlert icon component - triangular warning used for warning intent.
- * @param props - SVG properties including className, fill, etc.
+ * TriangleAlert icon (Hugeicons stroke-rounded: Alert02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function TriangleAlert(props: SVGProps<SVGSVGElement>) {
+export function TriangleAlert({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width={width ?? size}
+      height={height ?? size}
       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' />
+      <path
+        d='M13.9248 21H10.0752C5.44476 21 3.12955 21 2.27636 19.4939C1.42317 17.9879 2.60736 15.9914 4.97574 11.9985L6.90057 8.75333C9.17559 4.91778 10.3131 3 12 3C13.6869 3 14.8244 4.91777 17.0994 8.75332L19.0243 11.9985C21.3926 15.9914 22.5768 17.9879 21.7236 19.4939C20.8704 21 18.5552 21 13.9248 21Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 9V13'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12.125 16.75H12M12.25 16.75C12.25 16.8881 12.1381 17 12 17C11.8619 17 11.75 16.8881 11.75 16.75C11.75 16.6119 11.8619 16.5 12 16.5C12.1381 16.5 12.25 16.6119 12.25 16.75Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/type-boolean.tsx b/apps/sim/components/emcn/icons/type-boolean.tsx
index 49f5c40bd54..ebef2e7968c 100644
--- a/apps/sim/components/emcn/icons/type-boolean.tsx
+++ b/apps/sim/components/emcn/icons/type-boolean.tsx
@@ -1,26 +1,35 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Type boolean icon component - checkbox for boolean columns
- * @param props - SVG properties including className, fill, etc.
+ * TypeBoolean icon (Hugeicons stroke-rounded: ToggleOnIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function TypeBoolean(props: SVGProps<SVGSVGElement>) {
+export function TypeBoolean({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1.75 -1.5 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='2.5' y='2.75' width='15.5' height='15.5' rx='2.5' />
-      <path d='M6.25 10.75L9.25 13.75L14.25 7.25' />
+      <path
+        d='M19 12C19 13.6569 17.6569 15 16 15C14.3431 15 13 13.6569 13 12C13 10.3431 14.3431 9 16 9C17.6569 9 19 10.3431 19 12Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16 6H8C4.68629 6 2 8.68629 2 12C2 15.3137 4.68629 18 8 18H16C19.3137 18 22 15.3137 22 12C22 8.68629 19.3137 6 16 6Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/type-json.tsx b/apps/sim/components/emcn/icons/type-json.tsx
index 1cceb276f18..15c132639e3 100644
--- a/apps/sim/components/emcn/icons/type-json.tsx
+++ b/apps/sim/components/emcn/icons/type-json.tsx
@@ -1,26 +1,46 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Type JSON icon component - curly braces for JSON columns
- * @param props - SVG properties including className, fill, etc.
+ * TypeJson icon (Hugeicons stroke-rounded: CodeSquareIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function TypeJson(props: SVGProps<SVGSVGElement>) {
+export function TypeJson({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1.75 -1.75 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M5.75 1.25C3.54 1.25 1.75 3.04 1.75 5.25V7.75C1.75 9.13 0.63 10.25 -0.75 10.25C0.63 10.25 1.75 11.37 1.75 12.75V15.25C1.75 17.46 3.54 19.25 5.75 19.25' />
-      <path d='M14.75 1.25C16.96 1.25 18.75 3.04 18.75 5.25V7.75C18.75 9.13 19.87 10.25 21.25 10.25C19.87 10.25 18.75 11.37 18.75 12.75V15.25C18.75 17.46 16.96 19.25 14.75 19.25' />
+      <path
+        d='M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9.5 9.5L7.96682 10.8215C7.32228 11.377 7 11.6548 7 12C7 12.3452 7.32227 12.623 7.96682 13.1785L9.5 14.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M14.5 9.5L16.0332 10.8215C16.6777 11.377 17 11.6548 17 12C17 12.3452 16.6777 12.623 16.0332 13.1785L14.5 14.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/type-number.tsx b/apps/sim/components/emcn/icons/type-number.tsx
index 42f46ad47ba..8f4a3ba1479 100644
--- a/apps/sim/components/emcn/icons/type-number.tsx
+++ b/apps/sim/components/emcn/icons/type-number.tsx
@@ -1,28 +1,46 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Type number icon component - hash symbol for number columns
- * @param props - SVG properties including className, fill, etc.
+ * TypeNumber icon (Hugeicons stroke-rounded: TextNumberSignIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function TypeNumber(props: SVGProps<SVGSVGElement>) {
+export function TypeNumber({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1.75 -1.5 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M3.25 7.25H17.75' />
-      <path d='M2.75 13.75H17.25' />
-      <path d='M8.25 1.25L6.25 19.75' />
-      <path d='M14.25 1.25L12.25 19.75' />
+      <path
+        d='M2 20V7.02172C2 5.10465 2 4.00007 2.4389 4.00007C2.95995 4.00007 3.33531 4.66033 4.25033 6.27292L10.7497 17.7271C11.6647 19.3397 12.0233 20 12.5611 20C13 20 13 18.8954 13 16.9784V4'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16 13L22 13'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16.5806 4.58081C17.3546 3.80672 20.6454 3.80672 21.4194 4.58081C22.1935 5.35489 22.1935 8.6456 21.4194 9.41968C20.6454 10.1938 17.3546 10.1938 16.5806 9.41968C15.8065 8.6456 15.8065 5.35489 16.5806 4.58081Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/type-text.tsx b/apps/sim/components/emcn/icons/type-text.tsx
index 63b2a01d97e..1a472f970a8 100644
--- a/apps/sim/components/emcn/icons/type-text.tsx
+++ b/apps/sim/components/emcn/icons/type-text.tsx
@@ -1,27 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Type text icon component - letter T for string columns
- * @param props - SVG properties including className, fill, etc.
+ * TypeText icon (Hugeicons stroke-rounded: TextFontIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function TypeText(props: SVGProps<SVGSVGElement>) {
+export function TypeText({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1.75 -1.5 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M3.25 2.25H17.25' />
-      <path d='M10.25 2.25V18.75' />
-      <path d='M7.25 18.75H13.25' />
+      <path
+        d='M14 19L11.1069 10.7479C9.76348 6.91597 9.09177 5 8 5C6.90823 5 6.23652 6.91597 4.89309 10.7479L2 19M4.5 12H11.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M21.9692 13.9392V18.4392M21.9692 13.9392C22.0164 13.1161 22.0182 12.4891 21.9194 11.9773C21.6864 10.7709 20.4258 10.0439 19.206 9.89599C18.0385 9.75447 17.1015 10.055 16.1535 11.4363M21.9692 13.9392L19.1256 13.9392C18.6887 13.9392 18.2481 13.9603 17.8272 14.0773C15.2545 14.7925 15.4431 18.4003 18.0233 18.845C18.3099 18.8944 18.6025 18.9156 18.8927 18.9026C19.5703 18.8724 20.1955 18.545 20.7321 18.1301C21.3605 17.644 21.9692 16.9655 21.9692 15.9392V13.9392Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/undo.tsx b/apps/sim/components/emcn/icons/undo.tsx
index c3ef3af85f1..3c078b7de87 100644
--- a/apps/sim/components/emcn/icons/undo.tsx
+++ b/apps/sim/components/emcn/icons/undo.tsx
@@ -1,33 +1,38 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Undo icon component
- * @param props - SVG properties including className, fill, etc.
+ * Undo icon (Hugeicons stroke-rounded: ArrowTurnBackwardIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Undo(props: SVGProps<SVGSVGElement>) {
+export function Undo({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='12'
-      height='12'
-      viewBox='0 0 12 12'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
       <path
-        d='M2.5 4.5H8C9.38 4.5 10.5 5.62 10.5 7C10.5 8.38 9.38 9.5 8 9.5H5'
+        d='M11 6H15.5C17.9853 6 20 8.01472 20 10.5C20 12.9853 17.9853 15 15.5 15H4'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
       <path
-        d='M4 2.5L2 4.5L4 6.5'
+        d='M6.99998 12C6.99998 12 4.00001 14.2095 4 15C3.99999 15.7906 7 18 7 18'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/unlock.tsx b/apps/sim/components/emcn/icons/unlock.tsx
index 2311ce3e6c7..bcd5f66f126 100644
--- a/apps/sim/components/emcn/icons/unlock.tsx
+++ b/apps/sim/components/emcn/icons/unlock.tsx
@@ -1,26 +1,38 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Unlock icon component - open padlock
- * @param props - SVG properties including className, fill, etc.
+ * Unlock icon (Hugeicons stroke-rounded: SquareUnlock02Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Unlock(props: SVGProps<SVGSVGElement>) {
+export function Unlock({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='2.75' y='8.75' width='15' height='10' rx='2' />
-      <path d='M5.75 8.75V5.75C5.75 3.26 7.76 1.25 10.25 1.25C12.74 1.25 14.75 3.26 14.75 5.75' />
+      <path d='M12 16.5V14.5' stroke='currentColor' strokeLinecap='round' strokeWidth='1.5' />
+      <path
+        d='M4.26781 18.8447C4.49269 20.515 5.87613 21.8235 7.55966 21.9009C8.97627 21.966 10.4153 22 12 22C13.5847 22 15.0237 21.966 16.4403 21.9009C18.1239 21.8235 19.5073 20.515 19.7322 18.8447C19.879 17.7547 20 16.6376 20 15.5C20 14.3624 19.879 13.2453 19.7322 12.1553C19.5073 10.485 18.1239 9.17649 16.4403 9.09909C15.0237 9.03397 13.5847 9 12 9C10.4153 9 8.97627 9.03397 7.55966 9.09909C5.87613 9.17649 4.49269 10.485 4.26781 12.1553C4.12105 13.2453 4 14.3624 4 15.5C4 16.6376 4.12105 17.7547 4.26781 18.8447Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7.5 9V6.5C7.5 4.01472 9.51472 2 12 2C13.9593 2 15.5 3.5 16 5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/upload.tsx b/apps/sim/components/emcn/icons/upload.tsx
index d1ac11b4a05..fc9ecd9c67f 100644
--- a/apps/sim/components/emcn/icons/upload.tsx
+++ b/apps/sim/components/emcn/icons/upload.tsx
@@ -1,27 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Upload icon component - arrow pointing up with base line
- * @param props - SVG properties including className, fill, etc.
+ * Upload icon (Hugeicons stroke-rounded: Upload01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Upload(props: SVGProps<SVGSVGElement>) {
+export function Upload({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M0.75 12.75V16.75C0.75 17.8546 1.64543 18.75 2.75 18.75H17.75C18.8546 18.75 19.75 17.8546 19.75 16.75V12.75' />
-      <path d='M10.25 14.75V1.75' />
-      <path d='M5.25 6.75L10.25 1.75L15.25 6.75' />
+      <path
+        d='M2.99994 17C2.99994 17.93 2.99994 18.395 3.10216 18.7765C3.37956 19.8117 4.18821 20.6204 5.22348 20.8978C5.60498 21 6.06997 21 6.99994 21L16.9999 21C17.9299 21 18.3949 21 18.7764 20.8978C19.8117 20.6204 20.6203 19.8117 20.8977 18.7765C20.9999 18.395 20.9999 17.93 20.9999 17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16.5 7.49993C16.5 7.49993 13.1858 2.99997 12 2.99996C10.8141 2.99995 7.50002 7.49996 7.50002 7.49996M12 3.99996V16'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/user-plus.tsx b/apps/sim/components/emcn/icons/user-plus.tsx
index d2c6a30ea71..eb5faee98cb 100644
--- a/apps/sim/components/emcn/icons/user-plus.tsx
+++ b/apps/sim/components/emcn/icons/user-plus.tsx
@@ -1,28 +1,46 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * UserPlus icon component — person silhouette with a plus sign in the bottom-right
- * @param props - SVG properties including className, fill, etc.
+ * UserPlus icon (Hugeicons stroke-rounded: UserAdd01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function UserPlus(props: SVGProps<SVGSVGElement>) {
+export function UserPlus({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M4.5 5A2.5 2.5 0 1 0 9.5 5A2.5 2.5 0 1 0 4.5 5Z' />
-      <path d='M3 17V14A3 3 0 0 1 6 11H8A3 3 0 0 1 11 14' />
-      <path d='M15.5 13V17' />
-      <path d='M13.5 15H17.5' />
+      <path
+        d='M15 8C15 5.23858 12.7614 3 10 3C7.23858 3 5 5.23858 5 8C5 10.7614 7.23858 13 10 13C12.7614 13 15 10.7614 15 8Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17.5 21L17.5 14M14 17.5H21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 20C3 16.134 6.13401 13 10 13C11.4872 13 12.8662 13.4638 14 14.2547'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/user.tsx b/apps/sim/components/emcn/icons/user.tsx
index 3241e182688..605be403868 100644
--- a/apps/sim/components/emcn/icons/user.tsx
+++ b/apps/sim/components/emcn/icons/user.tsx
@@ -1,26 +1,39 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * User icon component - single person silhouette
- * @param props - SVG properties including className, fill, etc.
+ * User icon (Hugeicons stroke-rounded: UserIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function User(props: SVGProps<SVGSVGElement>) {
+export function User({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <circle cx='10.25' cy='6.25' r='4' />
-      <path d='M2.25 18.75C2.25 14.33 5.83 10.75 10.25 10.75C14.67 10.75 18.25 14.33 18.25 18.75' />
+      <path
+        d='M17 8.5C17 5.73858 14.7614 3.5 12 3.5C9.23858 3.5 7 5.73858 7 8.5C7 11.2614 9.23858 13.5 12 13.5C14.7614 13.5 17 11.2614 17 8.5Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M19 20.5C19 16.634 15.866 13.5 12 13.5C8.13401 13.5 5 16.634 5 20.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/users.tsx b/apps/sim/components/emcn/icons/users.tsx
index 2169b250b1e..40c469b08a4 100644
--- a/apps/sim/components/emcn/icons/users.tsx
+++ b/apps/sim/components/emcn/icons/users.tsx
@@ -1,28 +1,53 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Users icon component - two person silhouettes
- * @param props - SVG properties including className, fill, etc.
+ * Users icon (Hugeicons stroke-rounded: UserMultipleIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Users(props: SVGProps<SVGSVGElement>) {
+export function Users({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <circle cx='8.25' cy='5.75' r='3.5' />
-      <path d='M0.75 18.75C0.75 14.61 4.11 11.25 8.25 11.25C12.39 11.25 15.75 14.61 15.75 18.75' />
-      <path d='M14.25 0.93C15.11 0.63 16.04 0.73 16.83 1.19C17.62 1.65 18.17 2.42 18.33 3.32C18.49 4.21 18.25 5.13 17.68 5.83C17.11 6.54 16.27 6.95 15.37 6.97' />
-      <path d='M16.75 11.43C18.08 11.67 19.29 12.35 20.17 13.37C21.05 14.39 21.53 15.69 21.53 17.03V18.75' />
+      <path
+        d='M13 11C13 8.79086 11.2091 7 9 7C6.79086 7 5 8.79086 5 11C5 13.2091 6.79086 15 9 15C11.2091 15 13 13.2091 13 11Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M11.0386 7.55773C11.0131 7.37547 11 7.18927 11 7C11 4.79086 12.7909 3 15 3C17.2091 3 19 4.79086 19 7C19 9.20914 17.2091 11 15 11C14.2554 11 13.5584 10.7966 12.9614 10.4423'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M15 21C15 17.6863 12.3137 15 9 15C5.68629 15 3 17.6863 3 21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M21 17C21 13.6863 18.3137 11 15 11'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/wand2.tsx b/apps/sim/components/emcn/icons/wand2.tsx
new file mode 100644
index 00000000000..f25a59586d4
--- /dev/null
+++ b/apps/sim/components/emcn/icons/wand2.tsx
@@ -0,0 +1,44 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Wand2 icon (Hugeicons stroke-rounded: MagicWand01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Wand2({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M13.9258 12.7775L11.7775 10.6292C11.4847 10.3364 11.3383 10.19 11.1803 10.1117C10.8798 9.96277 10.527 9.96277 10.2264 10.1117C10.0685 10.19 9.92207 10.3364 9.62923 10.6292C9.33638 10.9221 9.18996 11.0685 9.11169 11.2264C8.96277 11.527 8.96277 11.8798 9.11169 12.1803C9.18996 12.3383 9.33638 12.4847 9.62923 12.7775L11.7775 14.9258M13.9258 12.7775L20.3708 19.2225C20.6636 19.5153 20.81 19.6617 20.8883 19.8197C21.0372 20.1202 21.0372 20.473 20.8883 20.7736C20.81 20.9315 20.6636 21.0779 20.3708 21.3708C20.0779 21.6636 19.9315 21.81 19.7736 21.8883C19.473 22.0372 19.1202 22.0372 18.8197 21.8883C18.6617 21.81 18.5153 21.6636 18.2225 21.3708L11.7775 14.9258M13.9258 12.7775L11.7775 14.9258'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17 2L17.2948 2.7966C17.6813 3.84117 17.8746 4.36345 18.2556 4.74445C18.6366 5.12545 19.1588 5.31871 20.2034 5.70523L21 6L20.2034 6.29477C19.1588 6.68129 18.6366 6.87456 18.2556 7.25555C17.8746 7.63655 17.6813 8.15883 17.2948 9.2034L17 10L16.7052 9.2034C16.3187 8.15884 16.1254 7.63655 15.7444 7.25555C15.3634 6.87455 14.8412 6.68129 13.7966 6.29477L13 6L13.7966 5.70523C14.8412 5.31871 15.3634 5.12545 15.7444 4.74445C16.1254 4.36345 16.3187 3.84117 16.7052 2.7966L17 2Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6 4L6.22108 4.59745C6.51097 5.38087 6.65592 5.77259 6.94167 6.05834C7.22741 6.34408 7.61913 6.48903 8.40255 6.77892L9 7L8.40255 7.22108C7.61913 7.51097 7.22741 7.65592 6.94166 7.94167C6.65592 8.22741 6.51097 8.61913 6.22108 9.40255L6 10L5.77892 9.40255C5.48903 8.61913 5.34408 8.22741 5.05833 7.94167C4.77259 7.65592 4.38087 7.51097 3.59745 7.22108L3 7L3.59745 6.77892C4.38087 6.48903 4.77259 6.34408 5.05833 6.05833C5.34408 5.77259 5.48903 5.38087 5.77892 4.59745L6 4Z'
+        stroke='currentColor'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/webhook.tsx b/apps/sim/components/emcn/icons/webhook.tsx
new file mode 100644
index 00000000000..82df93ca0e5
--- /dev/null
+++ b/apps/sim/components/emcn/icons/webhook.tsx
@@ -0,0 +1,61 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * Webhook icon (Hugeicons stroke-rounded: WebhookIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function Webhook({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M5.062 13C3.83229 13.6824 3 14.994 3 16.5C3 18.7091 4.79086 20.5 7 20.5C9.20914 20.5 11 18.7091 11 16.5H17'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 7.5L15.0571 13.0027C15.6323 12.6825 16.2949 12.5 17 12.5C19.2091 12.5 21 14.2909 21 16.5C21 18.7091 19.2091 20.5 17 20.5C16.0541 20.5 15.1848 20.1716 14.5 19.6227'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M12 8.5C12.5523 8.5 13 8.05228 13 7.5C13 6.94772 12.5523 6.5 12 6.5M12 8.5C11.4477 8.5 11 8.05228 11 7.5C11 6.94772 11.4477 6.5 12 6.5M12 8.5V6.5'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M7 17.5C7.55228 17.5 8 17.0523 8 16.5C8 15.9477 7.55228 15.5 7 15.5M7 17.5C6.44772 17.5 6 17.0523 6 16.5C6 15.9477 6.44772 15.5 7 15.5M7 17.5V15.5'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M17 17.5C17.5523 17.5 18 17.0523 18 16.5C18 15.9477 17.5523 15.5 17 15.5M17 17.5C16.4477 17.5 16 17.0523 16 16.5C16 15.9477 16.4477 15.5 17 15.5M17 17.5V15.5'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M16 7.5C16 5.29086 14.2091 3.5 12 3.5C9.79086 3.5 8 5.29086 8 7.5C8 9.004 8.83007 10.3141 10.0571 10.9973L7 16.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/workflow-x.tsx b/apps/sim/components/emcn/icons/workflow-x.tsx
index b7fe11530fe..26fd14b73ce 100644
--- a/apps/sim/components/emcn/icons/workflow-x.tsx
+++ b/apps/sim/components/emcn/icons/workflow-x.tsx
@@ -1,30 +1,54 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Workflow-X icon component - workflow graph with an X mark indicating a missing or deleted workflow
- * @param props - SVG properties including className, fill, etc.
+ * WorkflowX icon (Hugeicons stroke-rounded: WorkflowSquare01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function WorkflowX(props: SVGProps<SVGSVGElement>) {
+export function WorkflowX({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <circle cx='10.25' cy='3.5' r='2.75' />
-      <path d='M10.25 6.25V10' />
-      <path d='M5 12a2 2 0 0 1 2-2h6.5a2 2 0 0 1 2 2v2' />
-      <rect x='11.5' y='14' width='7.5' height='4.75' rx='1.75' />
-      <path d='M1.25 15L5.25 19' />
-      <path d='M5.25 15L1.25 19' />
+      <path
+        d='M6 5.5C6 4.56538 6 4.09808 6.20096 3.75C6.33261 3.52197 6.52197 3.33261 6.75 3.20096C7.09808 3 7.56538 3 8.5 3H11.5C12.4346 3 12.9019 3 13.25 3.20096C13.478 3.33261 13.6674 3.52197 13.799 3.75C14 4.09808 14 4.56538 14 5.5C14 6.43462 14 6.90192 13.799 7.25C13.6674 7.47803 13.478 7.66739 13.25 7.79904C12.9019 8 12.4346 8 11.5 8H8.5C7.56538 8 7.09808 8 6.75 7.79904C6.52197 7.66739 6.33261 7.47803 6.20096 7.25C6 6.90192 6 6.43462 6 5.5Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6 15.5C6 14.5654 6 14.0981 6.20096 13.75C6.33261 13.522 6.52197 13.3326 6.75 13.201C7.09808 13 7.56538 13 8.5 13H11.5C12.4346 13 12.9019 13 13.25 13.201C13.478 13.3326 13.6674 13.522 13.799 13.75C14 14.0981 14 14.5654 14 15.5C14 16.4346 14 16.9019 13.799 17.25C13.6674 17.478 13.478 17.6674 13.25 17.799C12.9019 18 12.4346 18 11.5 18H8.5C7.56538 18 7.09808 18 6.75 17.799C6.52197 17.6674 6.33261 17.478 6.20096 17.25C6 16.9019 6 16.4346 6 15.5Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M20.8398 17.1408C21.6133 16.3673 22 15.9806 22 15.5C22 15.0194 21.6133 14.6327 20.8398 13.8592L20.6408 13.6602C19.8673 12.8867 19.4806 12.5 19 12.5C18.5194 12.5 18.1327 12.8867 17.3592 13.6602L17.1602 13.8592C16.3867 14.6327 16 15.0194 16 15.5C16 15.9806 16.3867 16.3673 17.1602 17.1408L17.3592 17.3398C18.1327 18.1133 18.5194 18.5 19 18.5C19.4806 18.5 19.8673 18.1133 20.6408 17.3398L20.8398 17.1408Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6.006 5.5H2.00781M2.00781 5.5V2M2.00781 5.5V12C2.00781 13.1037 1.85651 14.4679 2.89627 15.1629C3.40049 15.5 4.1024 15.5 5.50623 15.5M14.0024 15.5H16.0015M19.0001 12.5V9.5C19.0001 7.61438 19.0001 6.67157 18.4146 6.08579C17.8291 5.5 16.8867 5.5 15.0019 5.5H14.0024'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M22.0001 22C21.0682 22 20.6023 22 20.2348 21.8695C19.7447 21.6955 19.3554 21.3618 19.1524 20.9417C19.0001 20.6267 19.0001 20.2273 19.0001 19.4286V19'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/workflow.tsx b/apps/sim/components/emcn/icons/workflow.tsx
index 6ee0d55c27c..5b02a4658c0 100644
--- a/apps/sim/components/emcn/icons/workflow.tsx
+++ b/apps/sim/components/emcn/icons/workflow.tsx
@@ -1,26 +1,49 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Workflow icon component - two nested concentric rounded squares conveying a workflow
- * @param props - SVG properties including className, fill, etc.
+ * Workflow icon (Hugeicons stroke-rounded: WorkflowSquare04Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Workflow(props: SVGProps<SVGSVGElement>) {
+export function Workflow({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <rect x='1.25' y='0.75' width='18' height='18' rx='4' />
-      <rect x='6.25' y='5.75' width='8' height='8' rx='2' />
+      <path
+        d='M15 18C15 16.5858 15 15.8787 15.4393 15.4393C15.8787 15 16.5858 15 18 15C19.4142 15 20.1213 15 20.5607 15.4393C21 15.8787 21 16.5858 21 18C21 19.4142 21 20.1213 20.5607 20.5607C20.1213 21 19.4142 21 18 21C16.5858 21 15.8787 21 15.4393 20.5607C15 20.1213 15 19.4142 15 18Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 9C3 7.58579 3 6.87868 3.43934 6.43934C3.87868 6 4.58579 6 6 6C7.41421 6 8.12132 6 8.56066 6.43934C9 6.87868 9 7.58579 9 9C9 10.4142 9 11.1213 8.56066 11.5607C8.12132 12 7.41421 12 6 12C4.58579 12 3.87868 12 3.43934 11.5607C3 11.1213 3 10.4142 3 9Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M9 9H12C14.8284 9 16.2426 9 17.1213 9.87868C18 10.7574 18 12.1716 18 15'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6 12V22M6 6V2'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/wrap.tsx b/apps/sim/components/emcn/icons/wrap.tsx
index faaf08d9fc4..1cce312fac1 100644
--- a/apps/sim/components/emcn/icons/wrap.tsx
+++ b/apps/sim/components/emcn/icons/wrap.tsx
@@ -1,28 +1,53 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Wrap icon component - shows text wrapping to next line
- * @param props - SVG properties including className, fill, etc.
+ * Wrap icon (Hugeicons stroke-rounded: TextWrapIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Wrap(props: SVGProps<SVGSVGElement>) {
+export function Wrap({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
       viewBox='0 0 24 24'
       fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
-      xmlns='http://www.w3.org/2000/svg'
       aria-hidden='true'
       {...props}
     >
-      <path d='M3 6h18' />
-      <path d='M3 12h15a3 3 0 1 1 0 6h-4' />
-      <path d='m11 15 3 3-3 3' />
-      <path d='M3 18h7' />
+      <path
+        d='M3 3H21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 15H9'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 21H9'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M3 9H16.5C18.9853 9 21 11.0147 21 13.5C21 15.9853 18.9853 18 16.5 18H12M12 18C12 17.1597 14.3932 15.5898 15 15M12 18C12 18.8403 14.3932 20.4102 15 21'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/wrench.tsx b/apps/sim/components/emcn/icons/wrench.tsx
index 96c4e046426..1c2f643bcbf 100644
--- a/apps/sim/components/emcn/icons/wrench.tsx
+++ b/apps/sim/components/emcn/icons/wrench.tsx
@@ -1,25 +1,43 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * Wrench icon component - adjustable wrench tool
- * @param props - SVG properties including className, fill, etc.
+ * Wrench icon (Hugeicons stroke-rounded: Wrench01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function Wrench(props: SVGProps<SVGSVGElement>) {
+export function Wrench({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M15.09 1.41C13.78 0.74 12.25 0.63 10.85 1.11C9.45 1.59 8.3 2.62 7.68 3.96C7.06 5.3 7.02 6.84 7.57 8.2L1.25 14.52C0.86 14.91 0.86 15.54 1.25 15.93L3.57 18.25C3.96 18.64 4.59 18.64 4.98 18.25L11.3 11.93C12.66 12.48 14.2 12.44 15.54 11.82C16.88 11.2 17.91 10.05 18.39 8.65C18.87 7.25 18.76 5.72 18.09 4.41L14.87 7.63L12.25 7.25L11.87 4.63L15.09 1.41Z' />
+      <path
+        d='M20.3584 13.3567C19.1689 14.546 16.9308 14.4998 13.4992 14.4998C11.2914 14.4998 9.50138 12.7071 9.50024 10.4993C9.50024 7.07001 9.454 4.83065 10.6435 3.64138C11.8329 2.45212 12.3583 2.50027 17.6274 2.50027C18.1366 2.49809 18.3929 3.11389 18.0329 3.47394L15.3199 6.18714C14.6313 6.87582 14.6294 7.99233 15.3181 8.68092C16.0068 9.36952 17.1234 9.36959 17.8122 8.68109L20.5259 5.96855C20.886 5.60859 21.5019 5.86483 21.4997 6.37395C21.4997 11.6422 21.5479 12.1675 20.3584 13.3567Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M13.5 14.5L7.32842 20.6716C6.22386 21.7761 4.433 21.7761 3.32843 20.6716C2.22386 19.567 2.22386 17.7761 3.32843 16.6716L9.5 10.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M5.50896 18.5H5.5'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='2'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/x-circle.tsx b/apps/sim/components/emcn/icons/x-circle.tsx
new file mode 100644
index 00000000000..f285a3b3c49
--- /dev/null
+++ b/apps/sim/components/emcn/icons/x-circle.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+/**
+ * XCircle icon (Hugeicons stroke-rounded: CancelCircleIcon)
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function XCircle({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      <path
+        d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M14.9994 15L9 9M9.00064 15L15 9'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/x.tsx b/apps/sim/components/emcn/icons/x.tsx
index b61874a492c..24996e02b1f 100644
--- a/apps/sim/components/emcn/icons/x.tsx
+++ b/apps/sim/components/emcn/icons/x.tsx
@@ -1,26 +1,32 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * X icon component - close / clear / dismiss
- * @param props - SVG properties including className, fill, etc.
+ * X icon (Hugeicons stroke-rounded: Cancel01Icon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function X(props: SVGProps<SVGSVGElement>) {
+export function X({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='24'
-      height='24'
-      viewBox='-1 -2 24 24'
-      fill='none'
-      stroke='currentColor'
-      strokeWidth='1.55'
-      strokeLinecap='round'
-      strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <path d='M15.25 4.75L4.75 15.25' />
-      <path d='M4.75 4.75L15.25 15.25' />
+      <path
+        d='M18 6L6.00081 17.9992M17.9992 18L6 6.00085'
+        stroke='currentColor'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        strokeWidth='1.5'
+      />
     </svg>
   )
 }
diff --git a/apps/sim/components/emcn/icons/zoom-in.tsx b/apps/sim/components/emcn/icons/zoom-in.tsx
index f83e6f5fc24..7d5e6aed7d1 100644
--- a/apps/sim/components/emcn/icons/zoom-in.tsx
+++ b/apps/sim/components/emcn/icons/zoom-in.tsx
@@ -1,49 +1,45 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ZoomIn icon component
- * @param props - SVG properties including className, fill, etc.
+ * ZoomIn icon (Hugeicons stroke-rounded: ZoomInAreaIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ZoomIn(props: SVGProps<SVGSVGElement>) {
+export function ZoomIn({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='12'
-      height='12'
-      viewBox='0 0 12 12'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <circle
-        cx='5'
-        cy='5'
-        r='3.5'
-        stroke='currentColor'
-        strokeWidth='0.85'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
       <path
-        d='M5 3.5V6.5'
+        d='M18.5016 19.1217L21 21.6217M20 15.1217C20 12.0842 17.5376 9.62173 14.5 9.62173C11.4624 9.62173 9 12.0842 9 15.1217C9 18.1593 11.4624 20.6217 14.5 20.6217C17.5376 20.6217 20 18.1593 20 15.1217Z'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
       <path
-        d='M3.5 5H6.5'
+        d='M14.5 13.1217V17.1217M16.5 15.1217H12.5'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
       <path
-        d='M7.5 7.5L10.5 10.5'
+        d='M10 3.62173H14M3 10.6217V14.6217M6.5 21.6217C4.567 21.6217 3 20.0547 3 18.1217M17.5 3.62173C19.433 3.62173 21 5.18873 21 7.12173M3 7.12173C3 5.18873 4.567 3.62173 6.5 3.62173'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/emcn/icons/zoom-out.tsx b/apps/sim/components/emcn/icons/zoom-out.tsx
index d5a78f8e61e..30788a51c42 100644
--- a/apps/sim/components/emcn/icons/zoom-out.tsx
+++ b/apps/sim/components/emcn/icons/zoom-out.tsx
@@ -1,42 +1,45 @@
 import type { SVGProps } from 'react'
 
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
 /**
- * ZoomOut icon component
- * @param props - SVG properties including className, fill, etc.
+ * ZoomOut icon (Hugeicons stroke-rounded: ZoomOutAreaIcon)
+ * @param props - SVG properties including className, size, fill, etc.
  */
-export function ZoomOut(props: SVGProps<SVGSVGElement>) {
+export function ZoomOut({ size = 24, width, height, ...props }: IconProps) {
   return (
     <svg
-      width='12'
-      height='12'
-      viewBox='0 0 12 12'
-      fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
       aria-hidden='true'
       {...props}
     >
-      <circle
-        cx='5'
-        cy='5'
-        r='3.5'
+      <path
+        d='M18.5016 18.5L21 21M20 14.5C20 11.4624 17.5376 9 14.5 9C11.4624 9 9 11.4624 9 14.5C9 17.5376 11.4624 20 14.5 20C17.5376 20 20 17.5376 20 14.5Z'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
       <path
-        d='M3.5 5H6.5'
+        d='M16.5 14.5H12.5'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
       <path
-        d='M7.5 7.5L10.5 10.5'
+        d='M10 3H14M3 10V14M6.5 21C4.567 21 3 19.433 3 17.5M17.5 3C19.433 3 21 4.567 21 6.5M3 6.5C3 4.567 4.567 3 6.5 3'
         stroke='currentColor'
-        strokeWidth='0.85'
         strokeLinecap='round'
         strokeLinejoin='round'
+        strokeWidth='1.5'
       />
     </svg>
   )
diff --git a/apps/sim/components/ui/select.tsx b/apps/sim/components/ui/select.tsx
index b773a4dcb1b..2b94a227e2d 100644
--- a/apps/sim/components/ui/select.tsx
+++ b/apps/sim/components/ui/select.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import * as SelectPrimitive from '@radix-ui/react-select'
-import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import { Check, ChevronDown, ChevronUp } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 
 const Select = SelectPrimitive.Root
diff --git a/apps/sim/content/blog/enterprise/components.tsx b/apps/sim/content/blog/enterprise/components.tsx
index 1cfa15a6ebd..4bef608ee42 100644
--- a/apps/sim/content/blog/enterprise/components.tsx
+++ b/apps/sim/content/blog/enterprise/components.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { ArrowRight, ChevronRight } from 'lucide-react'
+import { ArrowRight, ChevronRight } from '@/components/emcn/icons'
 
 interface ContactButtonProps {
   href: string
diff --git a/apps/sim/ee/access-control/components/access-control.tsx b/apps/sim/ee/access-control/components/access-control.tsx
index 43975cd1330..83294ae9bfe 100644
--- a/apps/sim/ee/access-control/components/access-control.tsx
+++ b/apps/sim/ee/access-control/components/access-control.tsx
@@ -2,7 +2,6 @@
 
 import { useCallback, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowRight, ChevronDown, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Avatar,
@@ -23,7 +22,7 @@ import {
   Skeleton,
   Switch,
 } from '@/components/emcn'
-import { ArrowLeft } from '@/components/emcn/icons'
+import { ArrowLeft, ArrowRight, ChevronDown, Plus } from '@/components/emcn/icons'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { cn } from '@/lib/core/utils/cn'
 import type { PermissionGroupConfig } from '@/lib/permission-groups/types'
diff --git a/apps/sim/ee/audit-logs/components/audit-logs.tsx b/apps/sim/ee/audit-logs/components/audit-logs.tsx
index 717b66288a9..ba92fe23c29 100644
--- a/apps/sim/ee/audit-logs/components/audit-logs.tsx
+++ b/apps/sim/ee/audit-logs/components/audit-logs.tsx
@@ -3,7 +3,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { formatDateTime } from '@sim/utils/formatting'
-import { ChevronDown } from 'lucide-react'
 import {
   Badge,
   Button,
@@ -14,6 +13,7 @@ import {
   RefreshCw,
   Search,
 } from '@/components/emcn'
+import { ChevronDown } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { getEndDateFromTimeRange, getStartDateFromTimeRange } from '@/lib/logs/filters'
 import type { EnterpriseAuditLogEntry } from '@/app/api/v1/audit-logs/format'
diff --git a/apps/sim/ee/components/setting-row.tsx b/apps/sim/ee/components/setting-row.tsx
index 0527082496a..8e57786769a 100644
--- a/apps/sim/ee/components/setting-row.tsx
+++ b/apps/sim/ee/components/setting-row.tsx
@@ -1,5 +1,5 @@
-import { Info } from 'lucide-react'
 import { Label, Tooltip } from '@/components/emcn'
+import { Info } from '@/components/emcn/icons'
 
 interface SettingRowProps {
   label: string
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 6c46fdc581a..e571874f26d 100644
--- a/apps/sim/ee/data-drains/components/data-drains-settings.tsx
+++ b/apps/sim/ee/data-drains/components/data-drains-settings.tsx
@@ -3,7 +3,6 @@
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { ChevronDown, Plus } from 'lucide-react'
 import {
   Badge,
   Button,
@@ -31,6 +30,7 @@ import {
   TableRow,
   toast,
 } from '@/components/emcn'
+import { ChevronDown, Plus } from '@/components/emcn/icons'
 import type { CreateDataDrainBody, DataDrain, DataDrainRun } from '@/lib/api/contracts/data-drains'
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
diff --git a/apps/sim/ee/sso/components/sso-settings.tsx b/apps/sim/ee/sso/components/sso-settings.tsx
index f3df66ebaee..2c115dd9f37 100644
--- a/apps/sim/ee/sso/components/sso-settings.tsx
+++ b/apps/sim/ee/sso/components/sso-settings.tsx
@@ -3,7 +3,6 @@
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
-import { Check, ChevronDown, Clipboard, Eye, EyeOff } from 'lucide-react'
 import {
   Button,
   ChipCombobox,
@@ -16,6 +15,7 @@ import {
   Switch,
   toast,
 } from '@/components/emcn'
+import { Check, ChevronDown, Clipboard, Eye, EyeOff } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { isBillingEnabled } from '@/lib/core/config/feature-flags'
diff --git a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
index f6cf33511d3..f4c9d889a7f 100644
--- a/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
+++ b/apps/sim/ee/whitelabeling/components/whitelabeling-settings.tsx
@@ -3,10 +3,10 @@
 import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Image as ImageIcon, X } from 'lucide-react'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
 import { Button, ChipInput, Label, Loader, toast } from '@/components/emcn'
+import { Image as ImageIcon, X } from '@/components/emcn/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { HEX_COLOR_REGEX } from '@/lib/branding'
diff --git a/apps/sim/enrichments/company-domain/company-domain.ts b/apps/sim/enrichments/company-domain/company-domain.ts
index 7d6fc95860d..0bdc2aa1195 100644
--- a/apps/sim/enrichments/company-domain/company-domain.ts
+++ b/apps/sim/enrichments/company-domain/company-domain.ts
@@ -1,4 +1,4 @@
-import { Globe } from 'lucide-react'
+import { Globe } from '@/components/emcn/icons'
 import { normalizeDomain, str, toolProvider } from '@/enrichments/providers'
 import type { EnrichmentConfig } from '@/enrichments/types'
 
diff --git a/apps/sim/enrichments/company-info/company-info.ts b/apps/sim/enrichments/company-info/company-info.ts
index b3fdc541ecd..824ed075264 100644
--- a/apps/sim/enrichments/company-info/company-info.ts
+++ b/apps/sim/enrichments/company-info/company-info.ts
@@ -1,5 +1,5 @@
 import { filterUndefined } from '@sim/utils/object'
-import { Building2 } from 'lucide-react'
+import { Building2 } from '@/components/emcn/icons'
 import { normalizeDomain, str, toolProvider } from '@/enrichments/providers'
 import type { EnrichmentConfig } from '@/enrichments/types'
 
diff --git a/apps/sim/enrichments/phone-number/phone-number.ts b/apps/sim/enrichments/phone-number/phone-number.ts
index 6a7ad186cdd..00940b6064b 100644
--- a/apps/sim/enrichments/phone-number/phone-number.ts
+++ b/apps/sim/enrichments/phone-number/phone-number.ts
@@ -1,5 +1,5 @@
 import { filterUndefined } from '@sim/utils/object'
-import { Phone } from 'lucide-react'
+import { Phone } from '@/components/emcn/icons'
 import { firstNonEmpty, normalizeDomain, str, toolProvider } from '@/enrichments/providers'
 import type { EnrichmentConfig } from '@/enrichments/types'
 
diff --git a/apps/sim/lib/copilot/tools/client/store-utils.ts b/apps/sim/lib/copilot/tools/client/store-utils.ts
index dafa45ecc6d..c3133857f33 100644
--- a/apps/sim/lib/copilot/tools/client/store-utils.ts
+++ b/apps/sim/lib/copilot/tools/client/store-utils.ts
@@ -1,6 +1,6 @@
 import type { ComponentType } from 'react'
-import { FileText } from 'lucide-react'
 import { Loader } from '@/components/emcn'
+import { FileText } from '@/components/emcn/icons'
 import { Read as ReadTool } from '@/lib/copilot/generated/tool-catalog-v1'
 import { VFS_DIR_TO_RESOURCE } from '@/lib/copilot/resources/types'
 import { isToolHiddenInUi } from '@/lib/copilot/tools/client/hidden-tools'
diff --git a/apps/sim/package.json b/apps/sim/package.json
index 32de651190d..2a86c72e48d 100644
--- a/apps/sim/package.json
+++ b/apps/sim/package.json
@@ -150,7 +150,6 @@
     "jszip": "3.10.1",
     "jwt-decode": "^4.0.0",
     "lru-cache": "11.3.6",
-    "lucide-react": "^0.479.0",
     "mammoth": "^1.9.0",
     "mermaid": "11.15.0",
     "micromatch": "4.0.8",
@@ -206,6 +205,7 @@
     "zustand": "^5.0.13"
   },
   "devDependencies": {
+    "@hugeicons/core-free-icons": "4.2.0",
     "@sim/testing": "workspace:*",
     "@sim/tsconfig": "workspace:*",
     "@tailwindcss/typography": "0.5.19",
diff --git a/apps/sim/scripts/hugeicons-generate.ts b/apps/sim/scripts/hugeicons-generate.ts
new file mode 100644
index 00000000000..725940cad27
--- /dev/null
+++ b/apps/sim/scripts/hugeicons-generate.ts
@@ -0,0 +1,143 @@
+/**
+ * Generate emcn icon components from Hugeicons (free, stroke-rounded) assets.
+ * - Overwrites existing emcn icon files whose every export maps to a Hugeicons glyph.
+ * - Creates new files for mapped exports that don't exist yet.
+ * - Leaves keep-custom files (Sim, Blimp, brand bubbles, bespoke animated) untouched.
+ * - Rebuilds index.ts barrel from the full export set.
+ */
+import { readFileSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { HUGEICONS_MAP } from './hugeicons-map'
+
+const HERE = fileURLToPath(new URL('.', import.meta.url))
+const ICONS_DIR = join(HERE, '../components/emcn/icons')
+const INDEX = join(ICONS_DIR, 'index.ts')
+
+const kebab = (s: string) =>
+  s
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+    .toLowerCase()
+
+type IconNode = [string, Record<string, string>]
+
+/** Load a Hugeicons node array and serialize it to JSX child elements. */
+async function hugeiconsInner(hugeName: string): Promise<string> {
+  const mod = await import(`@hugeicons/core-free-icons/${hugeName}`)
+  const nodes = mod.default as IconNode[]
+  return nodes
+    .map(([tag, attrs]) => {
+      const a = Object.entries(attrs)
+        .filter(([k]) => k !== 'key')
+        .map(([k, v]) => `${k}='${v}'`)
+        .join(' ')
+      return `<${tag} ${a} />`
+    })
+    .join('\n      ')
+}
+
+function parseBarrel(): {
+  fileToExports: Record<string, string[]>
+  exportToFile: Record<string, string>
+} {
+  const src = readFileSync(INDEX, 'utf8')
+  const fileToExports: Record<string, string[]> = {}
+  const exportToFile: Record<string, string> = {}
+  const re = /export\s+\{([^}]*)\}\s+from\s+'\.\/([^']+)'/g
+  let m: RegExpExecArray | null
+  while ((m = re.exec(src))) {
+    const names = m[1]
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean)
+    fileToExports[m[2]] = names
+    for (const n of names) exportToFile[n] = m[2]
+  }
+  return { fileToExports, exportToFile }
+}
+
+function componentBlock(name: string, hugeName: string, inner: string): string {
+  return `/**
+ * ${name} icon (Hugeicons stroke-rounded: ${hugeName})
+ * @param props - SVG properties including className, size, fill, etc.
+ */
+export function ${name}({ size = 24, width, height, ...props }: IconProps) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      width={width ?? size}
+      height={height ?? size}
+      viewBox='0 0 24 24'
+      fill='none'
+      aria-hidden='true'
+      {...props}
+    >
+      ${inner}
+    </svg>
+  )
+}`
+}
+
+function fileContents(blocks: string[]): string {
+  return `import type { SVGProps } from 'react'
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  /** Square size in px applied to width and height; overridden by explicit width/height or a className size. */
+  size?: number | string
+}
+
+${blocks.join('\n\n')}
+`
+}
+
+const { fileToExports, exportToFile } = parseBarrel()
+const existingExports = new Set(Object.keys(exportToFile))
+
+// Pre-resolve all inner SVG markup (async import) once.
+const innerByName: Record<string, string> = {}
+for (const [name, huge] of Object.entries(HUGEICONS_MAP)) {
+  if (huge == null) continue
+  innerByName[name] = await hugeiconsInner(huge)
+}
+
+let regenerated = 0
+let created = 0
+const written: Record<string, string[]> = {}
+
+// 1. Regenerate existing files whose every export is mapped.
+for (const [file, names] of Object.entries(fileToExports)) {
+  if (names.some((n) => HUGEICONS_MAP[n] == null)) continue
+  written[file] = names
+  const blocks = names.map((n) => componentBlock(n, HUGEICONS_MAP[n] as string, innerByName[n]))
+  writeFileSync(join(ICONS_DIR, `${file}.tsx`), fileContents(blocks))
+  regenerated++
+}
+
+// 2. Create new files for mapped exports that don't exist yet.
+for (const [name, huge] of Object.entries(HUGEICONS_MAP)) {
+  if (huge == null || existingExports.has(name)) continue
+  const file = kebab(name)
+  written[file] = [name]
+  exportToFile[name] = file
+  writeFileSync(
+    join(ICONS_DIR, `${file}.tsx`),
+    fileContents([componentBlock(name, huge, innerByName[name])])
+  )
+  created++
+}
+
+// 3. Rebuild the barrel.
+const allFiles = new Set<string>([...Object.keys(fileToExports), ...Object.keys(written)])
+const lines: Array<{ first: string; line: string }> = []
+for (const file of allFiles) {
+  const names = written[file] ?? fileToExports[file]
+  const sorted = [...names].sort()
+  lines.push({ first: sorted[0], line: `export { ${sorted.join(', ')} } from './${file}'` })
+}
+lines.sort((a, b) => a.first.toLowerCase().localeCompare(b.first.toLowerCase()))
+writeFileSync(INDEX, lines.map((l) => l.line).join('\n') + '\n')
+
+const unmapped = [...existingExports].filter((n) => !(n in HUGEICONS_MAP))
+console.log(`Regenerated: ${regenerated}, new: ${created}, barrel: ${lines.length}`)
+if (unmapped.length) console.log(`Not in map (kept original): ${unmapped.join(', ')}`)
diff --git a/apps/sim/scripts/hugeicons-map.ts b/apps/sim/scripts/hugeicons-map.ts
new file mode 100644
index 00000000000..775ad496fef
--- /dev/null
+++ b/apps/sim/scripts/hugeicons-map.ts
@@ -0,0 +1,201 @@
+/**
+ * Mapping from our emcn icon export name -> Hugeicons (free, stroke-rounded) export name.
+ * `null` = keep our existing custom glyph (brand/mascot/bespoke animated), do not vendor.
+ * Keys mirror the previous map so already-migrated consumers stay valid.
+ */
+export const HUGEICONS_MAP: Record<string, string | null> = {
+  // Arrows & chevrons
+  ArrowDown: 'ArrowDown01Icon',
+  ArrowLeft: 'ArrowLeft01Icon',
+  ArrowRight: 'ArrowRight01Icon',
+  ArrowUp: 'ArrowUp01Icon',
+  ArrowUpDown: 'ArrowUpDownIcon',
+  ArrowLeftRight: 'ArrowLeftRightIcon',
+  ArrowUpLeft: 'ArrowUpLeft01Icon',
+  ArrowRight2: 'ArrowRight02Icon',
+  ArrowUp2: 'ArrowUp02Icon',
+  ChevronDown: 'ChevronDownIcon',
+  ChevronUp: 'ChevronUpIcon',
+  ChevronLeft: 'ChevronLeftIcon',
+  ChevronRight: 'ChevronRightIcon',
+  ChevronsUpDown: 'UnfoldMoreIcon',
+  ChevronsDownUp: 'ChevronsDownUpIcon',
+  RotateCcw: 'RotateLeft01Icon',
+  RefreshCw: null,
+  Undo: 'ArrowTurnBackwardIcon',
+  Redo: 'ArrowTurnForwardIcon',
+  Shuffle: 'ShuffleIcon',
+  Repeat: 'RepeatIcon',
+  Split: 'SplitIcon',
+  SendToBack: 'LayerSendToBackIcon',
+
+  // Actions & controls
+  Search: 'Search01Icon',
+  Plus: 'Add01Icon',
+  Minus: 'MinusSignIcon',
+  X: 'Cancel01Icon',
+  Check: 'Tick02Icon',
+  Pencil: 'PencilEdit01Icon',
+  Trash: 'Delete02Icon',
+  Trash2: 'Delete02Icon',
+  Settings: 'Settings01Icon',
+  Settings2: 'Settings02Icon',
+  MoreHorizontal: 'MoreHorizontalIcon',
+  MoreVertical: 'MoreVerticalIcon',
+  Send: 'Navigation03Icon',
+  Download: null,
+  Upload: 'Upload01Icon',
+  Duplicate: 'Copy01Icon',
+  Clipboard: 'ClipboardIcon',
+  ClipboardList: 'ClipboardListIcon',
+  Scissors: 'Scissor01Icon',
+  Scan: 'ScanIcon',
+  SelectAll: 'AlignSelectionIcon',
+  Expand: 'ArrowExpand01Icon',
+  Cursor: 'Cursor01Icon',
+  Hammer: 'HammerIcon',
+  Wrench: 'Wrench01Icon',
+  Wand2: 'MagicWand01Icon',
+  Share2: 'Share08Icon',
+  ExternalLink: 'LinkSquare02Icon',
+  SquareArrowUpRight: 'ArrowUpRight01Icon',
+  Link: 'Link01Icon',
+
+  // Files, folders, data
+  File: 'File01Icon',
+  FileText: 'File02Icon',
+  FileX: 'FileRemoveIcon',
+  Files: 'Files01Icon',
+  Folder: 'Folder01Icon',
+  FolderOpen: 'FolderOpenIcon',
+  FolderPlus: 'FolderAddIcon',
+  FolderInput: 'FolderUploadIcon',
+  FolderCode: 'FolderCodeIcon',
+  Table: 'TableIcon',
+  TableX: 'Table01Icon',
+  Database: 'DatabaseIcon',
+  DatabaseX: 'Database01Icon',
+  Library: 'Bookshelf01Icon',
+  LibraryBig: 'Bookshelf01Icon',
+  Columns2: 'LayoutTwoColumnIcon',
+  Columns3: 'LayoutThreeColumnIcon',
+  Rows3: 'LayoutThreeRowIcon',
+  Layout: null,
+  PanelLeft: 'PanelLeftIcon',
+  PanelRight: 'PanelRightIcon',
+  Logs: 'ThirdBracketSquareIcon',
+  Card: 'Cards01Icon',
+  Image: 'Image01Icon',
+  ImageUp: 'Image01Icon',
+  Paperclip: 'Attachment01Icon',
+  Filter: 'FilterIcon',
+  ListFilter: 'FilterHorizontalIcon',
+
+  // Status & primitives
+  Eye: 'ViewIcon',
+  EyeOff: 'ViewOffSlashIcon',
+  Lock: 'LockIcon',
+  Unlock: 'SquareUnlock02Icon',
+  Key: 'Key01Icon',
+  KeyRound: 'Key01Icon',
+  Info: 'InformationCircleIcon',
+  HelpCircle: 'HelpCircleIcon',
+  Square: 'Square01Icon',
+  Circle: 'CircleIcon',
+  CircleOff: 'UnavailableIcon',
+  Ban: 'UnavailableIcon',
+  Network: 'GlobalIcon',
+  CircleCheck: 'CheckmarkCircle01Icon',
+  CircleAlert: 'AlertCircleIcon',
+  XCircle: 'CancelCircleIcon',
+  TriangleAlert: 'Alert02Icon',
+  ShieldCheck: 'Shield01Icon',
+  Asterisk: 'AsteriskIcon',
+  Slash: 'MinusSignIcon',
+  Calendar: 'Calendar01Icon',
+  CalendarClock: 'CalendarClockIcon',
+  Clock: 'Clock01Icon',
+  Loader: null,
+  Bell: 'Notification03Icon',
+  Pin: 'PinIcon',
+  PinOff: 'PinOffIcon',
+  TagIcon: 'Tag01Icon',
+  Credit: 'CreditCardIcon',
+  Bug: 'Bug01Icon',
+  History: 'TimeQuarterPassIcon',
+  Hash: 'HashtagIcon',
+
+  // Media / comms
+  PlayOutline: 'PlayIcon',
+  Play: 'PlayIcon',
+  Pause: 'PauseIcon',
+  PauseCircle: 'PauseCircleIcon',
+  Mic: 'Mic01Icon',
+  MicOff: 'MicOff01Icon',
+  Camera: 'Camera01Icon',
+  Music: 'MusicNote01Icon',
+  Phone: 'SmartPhone01Icon',
+  Mail: 'Mail01Icon',
+  MessageCircle: 'BubbleChatIcon',
+  BubbleChatDelay: 'BubbleChatDelayIcon',
+  BubbleChatSpark: 'BubbleChatSparkIcon',
+  Bell2: 'Notification03Icon',
+
+  // People
+  User: 'UserIcon',
+  Users: 'UserMultipleIcon',
+  UserPlus: 'UserAdd01Icon',
+  ManageWorkspace: 'UserGroupIcon',
+
+  // Objects / domain
+  Home: 'Home01Icon',
+  Rocket: 'Rocket01Icon',
+  Server: 'ServerStack01Icon',
+  Terminal: 'ComputerTerminal01Icon',
+  TerminalWindow: 'ComputerTerminal01Icon',
+  Palette: 'PaintBoardIcon',
+  Globe: 'GlobalIcon',
+  Compass: 'Compass01Icon',
+  Building2: 'Building06Icon',
+  GraduationCap: 'Mortarboard02Icon',
+  Sparkles: 'SparklesIcon',
+  Bot: 'BotIcon',
+  Webhook: 'WebhookIcon',
+  Workflow: 'WorkflowSquare04Icon',
+  WorkflowX: 'WorkflowSquare01Icon',
+  Connections: 'ConnectIcon',
+  Integration: 'Plug02Icon',
+  GitBranch: 'GitBranchIcon',
+  Rss: 'RssIcon',
+  FormInput: 'CursorTextIcon',
+  Moon: 'Moon02Icon',
+  Sun: 'Sun03Icon',
+  Task: 'CheckmarkSquare01Icon',
+  LogIn: 'Login03Icon',
+  LogOut: 'Logout03Icon',
+  Fingerprint: 'FingerPrintIcon',
+  Wrap: 'TextWrapIcon',
+  NoWrap: 'ArrowRight01Icon',
+  ZoomIn: 'ZoomInAreaIcon',
+  ZoomOut: 'ZoomOutAreaIcon',
+  ThumbsUp: 'ThumbsUpIcon',
+  ThumbsDown: 'ThumbsDownIcon',
+  Hand: 'Hold01Icon',
+  BookOpen: 'BookOpen01Icon',
+
+  // Type markers
+  TypeText: 'TextFontIcon',
+  TypeNumber: 'TextNumberSignIcon',
+  TypeBoolean: 'ToggleOnIcon',
+  TypeJson: 'CodeSquareIcon',
+
+  // Brand / mascot — keep custom
+  Sim: null,
+  Wordmark: null,
+  Blimp: null,
+  Github: null,
+  HexSimple: null,
+  PillsRing: null,
+  BubbleChatPreview: null,
+  BubbleChatClose: null,
+}
diff --git a/apps/sim/scripts/render-icon-gallery.tsx b/apps/sim/scripts/render-icon-gallery.tsx
deleted file mode 100644
index 845b8fc5c0f..00000000000
--- a/apps/sim/scripts/render-icon-gallery.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import { readFileSync, readdirSync, writeFileSync } from 'node:fs'
-import { join } from 'node:path'
-import { createElement } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
-import * as Lucide from 'lucide-react'
-
-const ICONS_DIR = join(import.meta.dir, '../components/emcn/icons')
-
-/** Extract { exportName: svgMarkup } from every emcn icon .tsx file. */
-function extractEmcn(): Record<string, string> {
-  const out: Record<string, string> = {}
-  for (const file of readdirSync(ICONS_DIR)) {
-    if (!file.endsWith('.tsx')) continue
-    const src = readFileSync(join(ICONS_DIR, file), 'utf8')
-    const re = /export\s+(?:function|const)\s+(\w+)[\s\S]*?(<svg[\s\S]*?<\/svg>)/g
-    let m: RegExpExecArray | null
-    while ((m = re.exec(src))) {
-      out[m[1]] = jsxSvgToHtml(m[2])
-    }
-  }
-  return out
-}
-
-/** Convert a JSX <svg> string into browser-renderable HTML. */
-function jsxSvgToHtml(jsx: string): string {
-  return jsx
-    .replace(/\{\.\.\.[^}]*\}/g, '') // {...props}
-    .replace(/[\w-]+=\{[^}]*\}/g, '') // attr={expr}
-    .replace(/\bclassName=/g, 'class=')
-    .replace(/\bstrokeWidth=/g, 'stroke-width=')
-    .replace(/\bstrokeLinecap=/g, 'stroke-linecap=')
-    .replace(/\bstrokeLinejoin=/g, 'stroke-linejoin=')
-    .replace(/\bstrokeMiterlimit=/g, 'stroke-miterlimit=')
-    .replace(/\bstrokeDasharray=/g, 'stroke-dasharray=')
-    .replace(/\bstrokeOpacity=/g, 'stroke-opacity=')
-    .replace(/\bfillRule=/g, 'fill-rule=')
-    .replace(/\bclipRule=/g, 'clip-rule=')
-    .replace(/\bfillOpacity=/g, 'fill-opacity=')
-    .replace(/\bclipPath=/g, 'clip-path=')
-    .replace(/\bwidth='[^']*'/, '') // strip fixed size → CSS sizes it
-    .replace(/\bheight='[^']*'/, '')
-    .replace(/aria-hidden='true'/g, '')
-}
-
-function lucideSvg(name: string): string | null {
-  const Comp = (Lucide as Record<string, unknown>)[name]
-  if (!Comp) return null
-  try {
-    return renderToStaticMarkup(
-      createElement(Comp as React.ComponentType, { width: 24, height: 24, strokeWidth: 1.75 })
-    )
-  } catch {
-    return null
-  }
-}
-
-const emcn = extractEmcn()
-
-type Item = { name: string; count: string; src: 'emcn' | 'lucide'; lucide?: string }
-type Section = { title: string; note?: string; items: Item[] }
-
-const e = (name: string, count: string): Item => ({ name, count, src: 'emcn' })
-const l = (name: string, count: string, lucide?: string): Item => ({
-  name,
-  count,
-  src: 'lucide',
-  lucide: lucide ?? name,
-})
-
-const sections: Section[] = [
-  {
-    title: 'TIER 1 · Core — Arrows & Chevrons',
-    note: 'Redesign first. Tier-2 chevrons/arrows are rotations of these.',
-    items: [
-      e('ChevronDown', '21 +24'),
-      e('ArrowLeft', '14 +5'),
-      e('ArrowUp', '11 +15'),
-      e('ArrowDown', '10 +6'),
-      e('ArrowRight', '6 +7'),
-      e('ArrowUpDown', '1 +1'),
-    ],
-  },
-  {
-    title: 'TIER 1 · Core — Actions & Controls',
-    items: [
-      e('Search', '44 +14'),
-      e('Plus', '27 +29'),
-      e('X', '16 +31'),
-      e('Check', '16 +23'),
-      e('Pencil', '16 +7'),
-      e('Trash', '25'),
-      e('Trash2', '2 +4'),
-      e('Settings', '11 +2'),
-      e('MoreHorizontal', '9 +9'),
-      e('Send', '13'),
-      e('Download', '18'),
-      e('Upload', '17'),
-      e('Duplicate', '11'),
-      e('RefreshCw', '3 +5'),
-    ],
-  },
-  {
-    title: 'TIER 1 · Core — Files, Folders & Data',
-    items: [
-      e('File', '23 +1'),
-      e('Files', '18'),
-      e('Folder', '15 +3'),
-      e('FolderPlus', '4'),
-      e('Table', '21 +1'),
-      e('Database', '19 +3'),
-      e('Library', '12 +1'),
-      e('Clipboard', '4 +12'),
-    ],
-  },
-  {
-    title: 'TIER 1 · Core — Status & Primitives',
-    items: [
-      e('Eye', '10 +7'),
-      e('EyeOff', '1 +7'),
-      e('Lock', '7 +3'),
-      e('Unlock', '3 +2'),
-      e('Key', '9 +1'),
-      e('Info', '5 +10'),
-      e('Square', '7 +2'),
-      e('Calendar', '10'),
-      e('Clock', '2 +4'),
-      e('Loader', '10'),
-      e('User', '10 +1'),
-      e('Users', '5 +2'),
-      e('Link', '10'),
-      e('Bell', '2 +2'),
-      e('Pin', '3 +2'),
-      e('PinOff', '2 +1'),
-      e('Paperclip', '1 +5'),
-      e('PlayOutline', '15'),
-      e('Pause', '4 +3'),
-    ],
-  },
-  {
-    title: 'TIER 1 · Core — Type Markers (design as a unified set)',
-    items: [
-      e('TypeText', '4'),
-      e('TypeNumber', '4'),
-      e('TypeBoolean', '4'),
-      e('TypeJson', '2'),
-    ],
-  },
-  {
-    title: 'TIER 0 · Name-aliases — no design, just alias existing emcn glyph',
-    note: 'Shown is the existing emcn glyph each lucide name maps to.',
-    items: [
-      e('X', 'XIcon'),
-      e('Send', 'SendIcon'),
-      e('Server', 'ServerIcon'),
-      e('Wrench', 'WrenchIcon'),
-      e('TagIcon', 'Tag'),
-      e('TriangleAlert', 'AlertTriangle'),
-      e('CircleAlert', 'AlertCircle'),
-      e('CircleCheck', 'CheckCircle2'),
-    ],
-  },
-  {
-    title: 'TIER 2 · lucide-only — derivable from a core glyph (rotate / compose / variant)',
-    items: [
-      l('ChevronRight', '18'),
-      l('ChevronUp', '9'),
-      l('ChevronLeft', '6'),
-      l('ChevronsUpDown', '4'),
-      l('MoreVertical', '2'),
-      l('ArrowLeftRight', '5'),
-      l('ArrowUpLeft', '1'),
-      l('RotateCcw', '4'),
-      l('XCircle', '3'),
-      l('PauseCircle', '1'),
-      l('Circle', '5'),
-      l('CircleOff', '2'),
-      l('Minus', '1'),
-      l('Settings2', '1'),
-      l('KeyRound', '1'),
-      l('LibraryBig', '1'),
-      l('FolderOpen', '1'),
-      l('FileText', '4'),
-      l('MicOff', '1'),
-      l('Filter', '1'),
-      l('Image', '2'),
-      l('ExternalLink', '8'),
-    ],
-  },
-  {
-    title: 'TIER 3 · lucide-only — net-new glyphs to design from scratch',
-    items: [
-      l('RepeatIcon', '10', 'Repeat'),
-      l('SplitIcon', '10', 'Split'),
-      l('Wand2', '4'),
-      l('GraduationCap', '3'),
-      l('Bot', '1'),
-      l('Building2', '1'),
-      l('Camera', '1'),
-      l('Compass', '1'),
-      l('FormInput', '1'),
-      l('GitBranch', '1'),
-      l('Github', '1'),
-      l('Globe', '1'),
-      l('Hash', '1'),
-      l('History', '1'),
-      l('MessageCircle', '1'),
-      l('Moon', '1'),
-      l('Music', '1'),
-      l('Phone', '1'),
-      l('Rss', '1'),
-      l('Scan', '1'),
-      l('Scissors', '1'),
-      l('SendToBack', '1'),
-      l('Share2', '1'),
-      l('Sparkles', '1'),
-      l('Sun', '1'),
-      l('Webhook', '1'),
-      l('Workflow', '1'),
-    ],
-  },
-]
-
-function cell(it: Item): string {
-  let svg: string | null
-  let label: string
-  if (it.src === 'emcn') {
-    svg = emcn[it.name] ?? null
-    label = it.name
-  } else {
-    svg = lucideSvg(it.lucide ?? it.name)
-    label = it.name
-  }
-  const art = svg
-    ? `<div class="art">${svg}</div>`
-    : `<div class="art missing">?</div>`
-  return `<div class="cell"><div class="box">${art}</div><div class="name">${label}</div><div class="count">${it.count}</div></div>`
-}
-
-const body = sections
-  .map(
-    (s) => `
-  <section>
-    <h2>${s.title} <span class="n">(${s.items.length})</span></h2>
-    ${s.note ? `<p class="note">${s.note}</p>` : ''}
-    <div class="grid">${s.items.map(cell).join('')}</div>
-  </section>`
-  )
-  .join('')
-
-const total = sections.reduce((a, s) => a + s.items.length, 0)
-
-const html = `<!doctype html>
-<html><head><meta charset="utf-8"><title>Sim icon update map</title>
-<style>
-  :root { --ink:#1a1a1a; --muted:#8a8a8a; --line:#ececec; --bg:#fff; }
-  * { box-sizing: border-box; }
-  body { margin:0; font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:#fafafa; padding:32px 40px 80px; }
-  header h1 { font-size:22px; margin:0 0 2px; }
-  header p { color:var(--muted); margin:0 0 28px; }
-  section { margin:0 0 36px; }
-  h2 { font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:8px; margin:0 0 4px; }
-  h2 .n { color:var(--muted); font-weight:400; }
-  .note { color:var(--muted); font-size:12px; margin:6px 0 14px; }
-  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:14px; }
-  .cell { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px 10px; background:var(--bg); border:1px solid var(--line); border-radius:10px; }
-  .box { width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--ink); }
-  .art svg { width:24px; height:24px; display:block; }
-  .art.missing { color:#c00; font-size:20px; }
-  .name { font-size:11px; font-weight:500; text-align:center; word-break:break-word; }
-  .count { font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
-</style></head>
-<body>
-  <header>
-    <h1>Sim — icons to update (${total})</h1>
-    <p>Counts = emcn usage + lucide sites to migrate. Artwork is the current live glyph.</p>
-  </header>
-  ${body}
-</body></html>`
-
-const outPath = join(import.meta.dir, '../../../icon-gallery.html')
-writeFileSync(outPath, html)
-console.log(`Wrote ${outPath} — ${total} icons`)
diff --git a/apps/sim/stores/modals/search/store.ts b/apps/sim/stores/modals/search/store.ts
index ad2bb6004a2..816c3866e09 100644
--- a/apps/sim/stores/modals/search/store.ts
+++ b/apps/sim/stores/modals/search/store.ts
@@ -1,6 +1,6 @@
-import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { create } from 'zustand'
 import { devtools } from 'zustand/middleware'
+import { Repeat, Split } from '@/components/emcn/icons'
 import { getToolOperationsIndex } from '@/lib/search/tool-operations'
 import { getTriggersForSidebar } from '@/lib/workflows/triggers/trigger-utils'
 import { getAllBlocks } from '@/blocks'
@@ -121,14 +121,14 @@ export const useSearchModalStore = create<SearchModalState>()(
           {
             id: 'loop',
             name: 'Loop',
-            icon: RepeatIcon,
+            icon: Repeat,
             bgColor: '#2FB3FF',
             type: 'loop',
           },
           {
             id: 'parallel',
             name: 'Parallel',
-            icon: SplitIcon,
+            icon: Split,
             bgColor: '#FEE12B',
             type: 'parallel',
           },
diff --git a/bun.lock b/bun.lock
index b6430a74258..af26294a26a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -204,7 +204,6 @@
         "jszip": "3.10.1",
         "jwt-decode": "^4.0.0",
         "lru-cache": "11.3.6",
-        "lucide-react": "^0.479.0",
         "mammoth": "^1.9.0",
         "mermaid": "11.15.0",
         "micromatch": "4.0.8",
@@ -260,6 +259,7 @@
         "zustand": "^5.0.13",
       },
       "devDependencies": {
+        "@hugeicons/core-free-icons": "4.2.0",
         "@sim/testing": "workspace:*",
         "@sim/tsconfig": "workspace:*",
         "@tailwindcss/typography": "0.5.19",
@@ -916,6 +916,8 @@
 
     "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
 
+    "@hugeicons/core-free-icons": ["@hugeicons/core-free-icons@4.2.0", "", {}, "sha512-V1G/Ph9TbmEow+pKnupZRWQjdORR/TGGr3JVRZOWkomdJ/5N6GgLuKPgBDs7G0kZ0//9LL34AGOUzWe3K+umNA=="],
+
     "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
 
     "@iconify/utils": ["@iconify/utils@3.1.3", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "import-meta-resolve": "^4.2.0" } }, "sha512-LPKOXPn/zV+zis1oOfGWogaXVpqUybF3ZS6SCZIsz8vg0ivVp9+fVqyYB7xq0aiST/VhUQYGO1qo6uoYSiEJqw=="],
@@ -4380,8 +4382,6 @@
 
     "sim/@types/node": ["@types/node@24.2.1", "", { "dependencies": { "undici-types": "~7.10.0" } }, "sha512-DRh5K+ka5eJic8CjH7td8QpYEV6Zo10gfRkjHCO3weqZHWDtAaSTFtl4+VMqOJ4N5jcuhZ9/l+yy8rVgw7BQeQ=="],
 
-    "sim/lucide-react": ["lucide-react@0.479.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-aBhNnveRhorBOK7uA4gDjgaf+YlHMdMhQ/3cupk6exM10hWlEU+2QtWYOfhXhjAsmdb6LeKR+NZnow4UxRRiTQ=="],
-
     "sim/tailwind-merge": ["tailwind-merge@2.6.1", "", {}, "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ=="],
 
     "sim/tailwindcss": ["tailwindcss@3.4.19", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.7", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ=="],

From b981a06309b3edcf0165ff9a6d6cbe45b32746e6 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 10:57:36 -0500
Subject: [PATCH 27/34] style(chat-history): scrollbar hugs the dropdown edge
 with a slim inset thumb

The list scroller sat inside the panel's 8px gutter, so the full-width global
scrollbar floated mid-panel and read as a fat dead column. The scroller now
bleeds to the dropdown edge (-mx-2/px-2, the workspace dropdown's pattern) so
the scrollbar occupies the former padding, and the thumb is clipped to a 4px
pill inset 2px from the edge (transparent border + content-box clip), with
scrollbar-width:thin for Firefox. Row alignment is unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../home/components/chat-history/chat-history-list.tsx       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
index c3e41acb419..1b74d340da6 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
@@ -142,8 +142,11 @@ export function ChatHistoryList({
           className='w-full bg-transparent text-[var(--text-body)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none'
         />
       </div>
+      {/* The scroller bleeds to the dropdown's edge (-mx-2/px-2) so the
+          scrollbar hugs it instead of floating mid-panel; the thumb is
+          clipped to a 4px pill inset 2px from the edge. */}
       <div
-        className='flex flex-col overflow-y-auto overscroll-contain'
+        className='-mx-2 flex flex-col overflow-y-auto overscroll-contain px-2 [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:bg-clip-content [&::-webkit-scrollbar-thumb]:[border:2px_solid_transparent]'
         style={{ maxHeight: CONFIG.LIST_MAX_HEIGHT }}
       >
         {isLoading ? (

From 1bc72e600ea484014b4b8dedca4dc10cf18310ef Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 11:02:31 -0500
Subject: [PATCH 28/34] feat(icons): vendor Hugeicons stroke-rounded set,
 remove lucide-react
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the icon system with self-hosted Hugeicons (free, stroke-rounded)
vendored into @/components/emcn/icons — zero runtime icon deps.

- Vendor 150+ icons from @hugeicons/core-free-icons into the emcn barrel via
  scripts/hugeicons-map.ts + scripts/hugeicons-generate.ts (dev-only source).
  Icons gain a `size` prop; 4 bespoke animated icons (Loader, RefreshCw,
  Download, Layout) kept custom.
- Migrate ~172 consumers off lucide-react to the emcn barrel; remove
  lucide-react dependency entirely (Github brand logo -> @/components/icons).
- Fix chevron sizing: replace ~24 non-square classes (h-[6px] w-[10px], tuned
  to the dead 10x6 viewBox) with canonical size-[14px].
- Sidebar/chat icon updates: Table->TableIcon, knowledge base->DatabaseIcon,
  Files nav->File, scheduled tasks->CalendarClock, Logs->ThirdBracketSquare,
  PanelLeft/PanelRight, BubbleChatDelay/Spark for the two chat bubbles.
- Send buttons -> ArrowUp02; integration row arrows -> ArrowRight02.
- Workflow icon -> WorkflowSquare08; Integrations -> Plug02.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/chat-history/chat-history-list.tsx |  5 ++++-
 apps/sim/components/emcn/icons/workflow.tsx       | 15 ++++++++++-----
 apps/sim/scripts/hugeicons-map.ts                 |  2 +-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
index 1b74d340da6..59ea0f4d6cd 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
@@ -165,7 +165,10 @@ export function ChatHistoryList({
           </p>
         ) : (
           buckets.map((bucket) => (
-            <div key={bucket.key} className='mt-1.5 first:mt-0'>
+            /* gap-0.5 keeps adjacent row fills from touching — two flush
+               rounded surfaces read as one broken shape (matches the
+               workspace and +N dropdowns). */
+            <div key={bucket.key} className='mt-1.5 flex flex-col gap-0.5 first:mt-0'>
               <p className='px-2 py-1 font-medium text-[var(--text-muted)] text-caption'>
                 {bucket.label}
               </p>
diff --git a/apps/sim/components/emcn/icons/workflow.tsx b/apps/sim/components/emcn/icons/workflow.tsx
index 5b02a4658c0..225a7375d67 100644
--- a/apps/sim/components/emcn/icons/workflow.tsx
+++ b/apps/sim/components/emcn/icons/workflow.tsx
@@ -6,7 +6,7 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 }
 
 /**
- * Workflow icon (Hugeicons stroke-rounded: WorkflowSquare04Icon)
+ * Workflow icon (Hugeicons stroke-rounded: WorkflowSquare08Icon)
  * @param props - SVG properties including className, size, fill, etc.
  */
 export function Workflow({ size = 24, width, height, ...props }: IconProps) {
@@ -21,24 +21,29 @@ export function Workflow({ size = 24, width, height, ...props }: IconProps) {
       {...props}
     >
       <path
-        d='M15 18C15 16.5858 15 15.8787 15.4393 15.4393C15.8787 15 16.5858 15 18 15C19.4142 15 20.1213 15 20.5607 15.4393C21 15.8787 21 16.5858 21 18C21 19.4142 21 20.1213 20.5607 20.5607C20.1213 21 19.4142 21 18 21C16.5858 21 15.8787 21 15.4393 20.5607C15 20.1213 15 19.4142 15 18Z'
+        d='M3 19C3 20.4142 3 21.1213 3.43934 21.5607C3.87868 22 4.58579 22 6 22C7.41421 22 8.12132 22 8.56066 21.5607C9 21.1213 9 20.4142 9 19C9 17.5858 9 16.8787 8.56066 16.4393C8.12132 16 7.41421 16 6 16C4.58579 16 3.87868 16 3.43934 16.4393C3 16.8787 3 17.5858 3 19Z'
         stroke='currentColor'
         strokeWidth='1.5'
       />
       <path
-        d='M3 9C3 7.58579 3 6.87868 3.43934 6.43934C3.87868 6 4.58579 6 6 6C7.41421 6 8.12132 6 8.56066 6.43934C9 6.87868 9 7.58579 9 9C9 10.4142 9 11.1213 8.56066 11.5607C8.12132 12 7.41421 12 6 12C4.58579 12 3.87868 12 3.43934 11.5607C3 11.1213 3 10.4142 3 9Z'
+        d='M3 5C3 6.41421 3 7.12132 3.43934 7.56066C3.87868 8 4.58579 8 6 8C7.41421 8 8.12132 8 8.56066 7.56066C9 7.12132 9 6.41421 9 5C9 3.58579 9 2.87868 8.56066 2.43934C8.12132 2 7.41421 2 6 2C4.58579 2 3.87868 2 3.43934 2.43934C3 2.87868 3 3.58579 3 5Z'
         stroke='currentColor'
         strokeWidth='1.5'
       />
       <path
-        d='M9 9H12C14.8284 9 16.2426 9 17.1213 9.87868C18 10.7574 18 12.1716 18 15'
+        d='M15 14C15 15.4142 15 16.1213 15.4393 16.5607C15.8787 17 16.5858 17 18 17C19.4142 17 20.1213 17 20.5607 16.5607C21 16.1213 21 15.4142 21 14C21 12.5858 21 11.8787 20.5607 11.4393C20.1213 11 19.4142 11 18 11C16.5858 11 15.8787 11 15.4393 11.4393C15 11.8787 15 12.5858 15 14Z'
+        stroke='currentColor'
+        strokeWidth='1.5'
+      />
+      <path
+        d='M6 8V16'
         stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
         strokeWidth='1.5'
       />
       <path
-        d='M6 12V22M6 6V2'
+        d='M15 14H12C8.68629 14 6 11.3137 6 8'
         stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
diff --git a/apps/sim/scripts/hugeicons-map.ts b/apps/sim/scripts/hugeicons-map.ts
index 775ad496fef..4eaeaaf5cf7 100644
--- a/apps/sim/scripts/hugeicons-map.ts
+++ b/apps/sim/scripts/hugeicons-map.ts
@@ -161,7 +161,7 @@ export const HUGEICONS_MAP: Record<string, string | null> = {
   Sparkles: 'SparklesIcon',
   Bot: 'BotIcon',
   Webhook: 'WebhookIcon',
-  Workflow: 'WorkflowSquare04Icon',
+  Workflow: 'WorkflowSquare08Icon',
   WorkflowX: 'WorkflowSquare01Icon',
   Connections: 'ConnectIcon',
   Integration: 'Plug02Icon',

From c8fba0a9583ae3460bbb8811e5ac9f6630237ac7 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 11:09:29 -0500
Subject: [PATCH 29/34] style(chat-history): tighten row right inset toward the
 scrollbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rows ended 8px of padding plus the 8px scrollbar gutter from the dropdown
edge, leaving a wide dead column on the right. The scroller keeps its 8px
left inset but drops the right to 2px — the scrollbar gutter itself supplies
the remaining visual breathing room, so rows now run nearly up to the thumb.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../chat-history/chat-history-list.tsx         |  9 +++++----
 .../resource-registry/resource-registry.tsx    | 18 +++++++++---------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
index 59ea0f4d6cd..2e6bd9f226c 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list.tsx
@@ -142,11 +142,12 @@ export function ChatHistoryList({
           className='w-full bg-transparent text-[var(--text-body)] text-sm placeholder:text-[var(--text-muted)] focus:outline-none'
         />
       </div>
-      {/* The scroller bleeds to the dropdown's edge (-mx-2/px-2) so the
-          scrollbar hugs it instead of floating mid-panel; the thumb is
-          clipped to a 4px pill inset 2px from the edge. */}
+      {/* The scroller bleeds to the dropdown's edge (-mx-2) so the scrollbar
+          hugs it instead of floating mid-panel; the thumb is clipped to a 4px
+          pill inset 2px from the edge. Right padding is just 2px — the
+          scrollbar gutter supplies the rest of the row's visual inset. */}
       <div
-        className='-mx-2 flex flex-col overflow-y-auto overscroll-contain px-2 [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:bg-clip-content [&::-webkit-scrollbar-thumb]:[border:2px_solid_transparent]'
+        className='-mx-2 flex flex-col overflow-y-auto overscroll-contain pr-0.5 pl-2 [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:bg-clip-content [&::-webkit-scrollbar-thumb]:[border:2px_solid_transparent]'
         style={{ maxHeight: CONFIG.LIST_MAX_HEIGHT }}
       >
         {isLoading ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
index 5ca50dc623e..ef6dbf0ee7f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -3,13 +3,13 @@
 import type { ElementType, ReactNode } from 'react'
 import type { QueryClient } from '@tanstack/react-query'
 import {
-  Calendar,
-  Connections,
+  CalendarClock,
   Database,
   File as FileIcon,
   Folder as FolderIcon,
+  Integration,
   Layout,
-  Library,
+  Logs,
   Table as TableIcon,
   Task,
   TerminalWindow,
@@ -100,8 +100,8 @@ function IntegrationDropdownItem({ item }: DropdownItemRenderProps) {
 const PAGE_ICONS: Record<MothershipPageId, ElementType> = {
   tables: TableIcon,
   knowledge: Database,
-  logs: Library,
-  'scheduled-tasks': Calendar,
+  logs: Logs,
+  'scheduled-tasks': CalendarClock,
 }
 
 function getPageIcon(pageId: string): ElementType {
@@ -201,18 +201,18 @@ export const RESOURCE_REGISTRY: Record<MothershipResourceType, ResourceTypeConfi
   log: {
     type: 'log',
     label: 'Logs',
-    icon: Library,
+    icon: Logs,
     renderTabIcon: (_resource, className) => (
-      <Library className={cn(className, 'text-[var(--text-icon)]')} />
+      <Logs className={cn(className, 'text-[var(--text-icon)]')} />
     ),
     renderDropdownItem: (props) => <LogDropdownItem {...props} />,
   },
   integration: {
     type: 'integration',
     label: 'Integrations',
-    icon: Connections,
+    icon: Integration,
     renderTabIcon: (_resource, className) => (
-      <Connections className={cn(className, 'text-[var(--text-icon)]')} />
+      <Integration className={cn(className, 'text-[var(--text-icon)]')} />
     ),
     renderDropdownItem: (props) => <IntegrationDropdownItem {...props} />,
   },

From 9007ee827a6e6b8e918f31c0ce7e8fca235759c1 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 11:20:18 -0500
Subject: [PATCH 30/34] =?UTF-8?q?fix(mothership):=20chat=20titles=20genera?=
 =?UTF-8?q?te=20again=20=E2=80=94=20fallback=20to=20local=20providers=20wh?=
 =?UTF-8?q?en=20the=20copilot=20backend=20rejects=20the=20title=20call?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

No new architecture: the existing pipeline (fireTitleGeneration on first
message → Go /api/generate-chat-title → DB write → session/title SSE +
renamed pubsub → query invalidation → chat switcher) is unchanged and was
already wired end-to-end since the original mothership PR (#3411). It was
silently failing at one link: the Go backend returns 400 "API key
validation failed" for the title endpoint (while accepting chat traffic
with the same key), so every chat kept a NULL title and the switcher
showed "New chat" forever.

Two changes inside requestChatTitle, both reusing existing infra:
- include userId in the Go request body, matching what the chat loop
  already sends (the likely cause of the per-user key validation failure)
- on backend failure, generate the title locally via the existing
  provider layer (executeProviderRequest + getBYOKKey/getRotatingApiKey),
  trying claude-haiku-4-5 → gpt-4.1-mini → gemini-2.5-flash-lite. This
  also gives self-hosted deployments named chats, which the hosted-only
  path never could.

Both callers (chat stream + inbox executor) now pass workspaceId so the
fallback can honor workspace BYOK keys.

Verified live: new chat retitled to "Postgres Index Naming Best
Practices" mid-stream; logs show Go 400 → openai/gpt-4.1-mini fallback.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../lib/copilot/request/lifecycle/start.ts    | 106 +++++++++++++++++-
 apps/sim/lib/mothership/inbox/executor.ts     |   1 +
 2 files changed, 103 insertions(+), 4 deletions(-)

diff --git a/apps/sim/lib/copilot/request/lifecycle/start.ts b/apps/sim/lib/copilot/request/lifecycle/start.ts
index 69682f0019f..2d4755345fb 100644
--- a/apps/sim/lib/copilot/request/lifecycle/start.ts
+++ b/apps/sim/lib/copilot/request/lifecycle/start.ts
@@ -3,7 +3,9 @@ import { db } from '@sim/db'
 import { copilotChats } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
+import { truncate } from '@sim/utils/string'
 import { eq } from 'drizzle-orm'
+import { getBYOKKey } from '@/lib/api-key/byok'
 import { createRunSegment } from '@/lib/copilot/async-runs/repository'
 import { chatPubSub } from '@/lib/copilot/chat-status'
 import {
@@ -41,6 +43,7 @@ import {
 import { SSE_RESPONSE_HEADERS } from '@/lib/copilot/request/session/sse'
 import { reportTrace, TraceCollector } from '@/lib/copilot/request/trace'
 import { getMothershipBaseURL, getMothershipSourceEnvHeaders } from '@/lib/copilot/server/agent-url'
+import { getRotatingApiKey } from '@/lib/core/config/api-keys'
 import { env } from '@/lib/core/config/env'
 
 export { SSE_RESPONSE_HEADERS }
@@ -466,6 +469,7 @@ function fireTitleGeneration(params: {
     model: titleModel,
     provider: titleProvider,
     userId,
+    workspaceId,
     otelContext,
   })
     .then(async (title) => {
@@ -497,9 +501,10 @@ export async function requestChatTitle(params: {
   model: string
   provider?: string
   userId?: string
+  workspaceId?: string
   otelContext?: Context
 }): Promise<string | null> {
-  const { message, model, provider, userId, otelContext } = params
+  const { message, model, provider, userId, workspaceId, otelContext } = params
   if (!message || !model) return null
 
   const headers: Record<string, string> = {
@@ -520,6 +525,7 @@ export async function requestChatTitle(params: {
         message,
         model,
         ...(provider ? { provider } : {}),
+        ...(userId ? { userId } : {}),
       }),
       otelContext,
       spanName: 'sim → go /api/generate-chat-title',
@@ -536,13 +542,105 @@ export async function requestChatTitle(params: {
         status: response.status,
         error: payload,
       })
-      return null
+      return generateChatTitleLocally({ message, workspaceId })
     }
 
     const title = typeof payload?.title === 'string' ? payload.title.trim() : ''
-    return title || null
+    return title || generateChatTitleLocally({ message, workspaceId })
   } catch (error) {
     logger.error('Error generating chat title:', error)
-    return null
+    return generateChatTitleLocally({ message, workspaceId })
+  }
+}
+
+/**
+ * Fast, cheap models to try (in order) when generating a title without the
+ * copilot backend. A candidate is usable when a key resolves from the
+ * workspace's BYOK keys, the singular env key, or the hosted rotation pool.
+ */
+const LOCAL_TITLE_MODELS = [
+  { providerId: 'anthropic', model: 'claude-haiku-4-5', rotationId: 'anthropic' },
+  { providerId: 'openai', model: 'gpt-4.1-mini', rotationId: 'openai' },
+  { providerId: 'google', model: 'gemini-2.5-flash-lite', rotationId: 'gemini' },
+] as const
+
+const LOCAL_TITLE_SYSTEM_PROMPT =
+  'Generate a concise title (2-6 words) for a conversation that starts with the ' +
+  'user message below. Capture the topic, not the phrasing. Respond with the ' +
+  'title only — no quotes, no trailing punctuation, no explanation.'
+
+function resolveLocalTitleEnvKey(providerId: string): string | undefined {
+  if (providerId === 'openai') return env.OPENAI_API_KEY
+  if (providerId === 'google') return env.GEMINI_API_KEY
+  return undefined
+}
+
+/**
+ * Fallback title generation that runs against the app's own provider
+ * integrations, so self-hosted deployments (and any copilot-backend outage)
+ * still get named chats instead of a permanent "New chat".
+ */
+async function generateChatTitleLocally(params: {
+  message: string
+  workspaceId?: string
+}): Promise<string | null> {
+  const { message, workspaceId } = params
+
+  for (const candidate of LOCAL_TITLE_MODELS) {
+    let apiKey = (await getBYOKKey(workspaceId, candidate.providerId))?.apiKey
+    apiKey ??= resolveLocalTitleEnvKey(candidate.providerId)
+    if (!apiKey) {
+      try {
+        apiKey = getRotatingApiKey(candidate.rotationId)
+      } catch {
+        continue
+      }
+    }
+
+    try {
+      const { executeProviderRequest } = await import('@/providers')
+      const response = await executeProviderRequest(candidate.providerId, {
+        model: candidate.model,
+        apiKey,
+        systemPrompt: LOCAL_TITLE_SYSTEM_PROMPT,
+        messages: [{ role: 'user', content: truncate(message, 600) }],
+        temperature: 0.3,
+        maxTokens: 64,
+        stream: false,
+      })
+      if (!response || typeof response !== 'object' || !('content' in response)) continue
+      const title = sanitizeGeneratedTitle(response.content)
+      if (title) {
+        logger.info('Generated chat title via local provider fallback', {
+          provider: candidate.providerId,
+          model: candidate.model,
+        })
+        return title
+      }
+    } catch (error) {
+      logger.warn('Local chat title generation failed', {
+        provider: candidate.providerId,
+        model: candidate.model,
+        error: getErrorMessage(error),
+      })
+    }
   }
+
+  return null
+}
+
+/**
+ * Normalizes model output into a clean single-line title: first line only,
+ * surrounding quotes and trailing punctuation stripped, capped at the
+ * 200-character limit the chat update contract enforces.
+ */
+function sanitizeGeneratedTitle(raw: string): string | null {
+  const firstLine = raw.trim().split('\n')[0] ?? ''
+  const cleaned = firstLine
+    .replace(/^["'“”‘’`]+/, '')
+    .replace(/["'“”‘’`]+$/, '')
+    .replace(/[.。!?]+$/, '')
+    .trim()
+  if (!cleaned) return null
+  return truncate(cleaned, 200)
 }
diff --git a/apps/sim/lib/mothership/inbox/executor.ts b/apps/sim/lib/mothership/inbox/executor.ts
index 871dfa033a7..c086bc0c58a 100644
--- a/apps/sim/lib/mothership/inbox/executor.ts
+++ b/apps/sim/lib/mothership/inbox/executor.ts
@@ -113,6 +113,7 @@ export async function executeInboxTask(taskId: string): Promise<void> {
         message: titleInput,
         model: 'claude-opus-4-6',
         userId,
+        workspaceId: ws.id,
       })
         .then(async (title) => {
           if (title && chatId) {

From 6bedb57164f495a581e2c69440b8b25854015501 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 12:17:19 -0500
Subject: [PATCH 31/34] =?UTF-8?q?refactor(resource-actions):=20retire=20op?=
 =?UTF-8?q?en-in-page=20buttons=20=E2=80=94=20collapsing=20the=20chat=20is?=
 =?UTF-8?q?=20the=20expand?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every panel tab carried a ↗ that navigated to the standalone page, but with
the collapsible chat pane the panel already becomes that full-page view in
place. Removes the open actions for workflow, file, knowledge base, table,
log, page, file-folder, and integration tabs (five action components deleted
outright), keeping only the genuinely additive actions: run/stop workflow,
export CSV, and download file.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../resource-content/resource-content.tsx     | 348 +++---------------
 1 file changed, 49 insertions(+), 299 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
index 94d1a17755c..21e72fedeb0 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -3,7 +3,6 @@
 import { lazy, memo, Suspense, useEffect, useMemo, useRef } from 'react'
 import { createLogger } from '@sim/logger'
 import { stripVersionSuffix } from '@sim/utils/string'
-import { useRouter } from 'next/navigation'
 import { Button, PlayOutline, Skeleton, Tooltip } from '@/components/emcn'
 import {
   Connections,
@@ -12,7 +11,6 @@ import {
   Folder as FolderIcon,
   Library,
   Square,
-  SquareArrowUpRight,
   Workflow as WorkflowIcon,
   WorkflowX,
 } from '@/components/emcn/icons'
@@ -348,143 +346,29 @@ interface ResourceActionsProps {
   resource: MothershipResource
 }
 
+/**
+ * Per-type panel actions. Open-in-page controls were retired: collapsing the
+ * chat pane gives the same full-page view without losing context, so only
+ * genuinely additive actions (run, export, download) remain.
+ */
 export function ResourceActions({ workspaceId, resource }: ResourceActionsProps) {
   switch (resource.type) {
     case 'workflow':
-      return <EmbeddedWorkflowActions workspaceId={workspaceId} workflowId={resource.id} />
+      return <EmbeddedWorkflowActions workflowId={resource.id} />
     case 'file':
       return <EmbeddedFileActions workspaceId={workspaceId} fileId={resource.id} />
-    case 'knowledgebase':
-      return (
-        <EmbeddedKnowledgeBaseActions workspaceId={workspaceId} knowledgeBaseId={resource.id} />
-      )
     case 'table':
-      return (
-        <EmbeddedTableActions
-          workspaceId={workspaceId}
-          tableId={resource.id}
-          tableName={resource.title}
-        />
-      )
-    case 'log':
-      return <EmbeddedLogActions workspaceId={workspaceId} logId={resource.id} />
-    case 'page':
-      return <EmbeddedPageActions workspaceId={workspaceId} pageId={resource.id} />
-    case 'filefolder':
-      return <EmbeddedFileFolderActions workspaceId={workspaceId} folderId={resource.id} />
-    case 'integration':
-      return <EmbeddedIntegrationActions workspaceId={workspaceId} blockType={resource.id} />
-    case 'folder':
-    case 'generic':
-      return null
+      return <EmbeddedTableActions tableId={resource.id} tableName={resource.title} />
     default:
       return null
   }
 }
 
-interface EmbeddedFileFolderActionsProps {
-  workspaceId: string
-  folderId: string
-}
-
-function EmbeddedFileFolderActions({ workspaceId, folderId }: EmbeddedFileFolderActionsProps) {
-  const router = useRouter()
-
-  const handleOpenInFiles = () => {
-    router.push(`/workspace/${workspaceId}/files?folderId=${encodeURIComponent(folderId)}`)
-  }
-
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <Button
-          variant='subtle'
-          onClick={handleOpenInFiles}
-          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-          aria-label='Open in files'
-        >
-          <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-        </Button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side='bottom'>
-        <p>Open in files</p>
-      </Tooltip.Content>
-    </Tooltip.Root>
-  )
-}
-
-interface EmbeddedIntegrationActionsProps {
-  workspaceId: string
-  blockType: string
-}
-
-function EmbeddedIntegrationActions({ workspaceId, blockType }: EmbeddedIntegrationActionsProps) {
-  const router = useRouter()
-  const integration = useMemo(() => findIntegrationByBlockType(blockType), [blockType])
-
-  if (!integration) return null
-
-  const handleOpenIntegration = () => {
-    router.push(`/workspace/${workspaceId}/integrations/${integration.slug}`)
-  }
-
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <Button
-          variant='subtle'
-          onClick={handleOpenIntegration}
-          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-          aria-label='Open integration'
-        >
-          <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-        </Button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side='bottom'>
-        <p>Open integration</p>
-      </Tooltip.Content>
-    </Tooltip.Root>
-  )
-}
-
-interface EmbeddedPageActionsProps {
-  workspaceId: string
-  pageId: string
-}
-
-function EmbeddedPageActions({ workspaceId, pageId }: EmbeddedPageActionsProps) {
-  const router = useRouter()
-
-  const handleOpenPage = () => {
-    router.push(`/workspace/${workspaceId}/${pageId}`)
-  }
-
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <Button
-          variant='subtle'
-          onClick={handleOpenPage}
-          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-          aria-label='Open full page'
-        >
-          <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-        </Button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side='bottom'>
-        <p>Open full page</p>
-      </Tooltip.Content>
-    </Tooltip.Root>
-  )
-}
-
 interface EmbeddedWorkflowActionsProps {
-  workspaceId: string
   workflowId: string
 }
 
-export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWorkflowActionsProps) {
-  const router = useRouter()
+function EmbeddedWorkflowActions({ workflowId }: EmbeddedWorkflowActionsProps) {
   const { navigateToSettings } = useSettingsNavigation()
   const { userPermissions: effectivePermissions } = useWorkspacePermissionsContext()
   const setActiveWorkflow = useWorkflowRegistry((state) => state.setActiveWorkflow)
@@ -520,80 +404,25 @@ export function EmbeddedWorkflowActions({ workspaceId, workflowId }: EmbeddedWor
     await handleRunWorkflow()
   }
 
-  const handleOpenWorkflow = () => {
-    window.open(`/workspace/${workspaceId}/w/${workflowId}`, '_blank')
-  }
-
-  return (
-    <>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={handleOpenWorkflow}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label='Open workflow'
-          >
-            <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='bottom'>
-          <p>Open workflow</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={() => void handleRun()}
-            disabled={isRunButtonDisabled}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label={isExecuting ? 'Stop workflow' : 'Run workflow'}
-          >
-            {isExecuting ? (
-              <Square className={RESOURCE_TAB_ICON_CLASS} />
-            ) : (
-              <PlayOutline className={RESOURCE_TAB_ICON_CLASS} />
-            )}
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='bottom'>
-          <p>{isExecuting ? 'Stop' : 'Run workflow'}</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
-    </>
-  )
-}
-
-interface EmbeddedKnowledgeBaseActionsProps {
-  workspaceId: string
-  knowledgeBaseId: string
-}
-
-export function EmbeddedKnowledgeBaseActions({
-  workspaceId,
-  knowledgeBaseId,
-}: EmbeddedKnowledgeBaseActionsProps) {
-  const router = useRouter()
-
-  const handleOpenKnowledgeBase = () => {
-    router.push(`/workspace/${workspaceId}/knowledge/${knowledgeBaseId}`)
-  }
-
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
         <Button
           variant='subtle'
-          onClick={handleOpenKnowledgeBase}
+          onClick={() => void handleRun()}
+          disabled={isRunButtonDisabled}
           className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-          aria-label='Open knowledge base'
+          aria-label={isExecuting ? 'Stop workflow' : 'Run workflow'}
         >
-          <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
+          {isExecuting ? (
+            <Square className={RESOURCE_TAB_ICON_CLASS} />
+          ) : (
+            <PlayOutline className={RESOURCE_TAB_ICON_CLASS} />
+          )}
         </Button>
       </Tooltip.Trigger>
       <Tooltip.Content side='bottom'>
-        <p>Open knowledge base</p>
+        <p>{isExecuting ? 'Stop' : 'Run workflow'}</p>
       </Tooltip.Content>
     </Tooltip.Root>
   )
@@ -602,18 +431,11 @@ export function EmbeddedKnowledgeBaseActions({
 const tableLogger = createLogger('EmbeddedTableActions')
 
 interface EmbeddedTableActionsProps {
-  workspaceId: string
   tableId: string
   tableName: string
 }
 
-function EmbeddedTableActions({ workspaceId, tableId, tableName }: EmbeddedTableActionsProps) {
-  const router = useRouter()
-
-  const handleOpenTable = () => {
-    router.push(`/workspace/${workspaceId}/tables/${tableId}`)
-  }
-
+function EmbeddedTableActions({ tableId, tableName }: EmbeddedTableActionsProps) {
   const handleExport = async () => {
     try {
       await downloadTableExport(tableId, tableName)
@@ -623,38 +445,21 @@ function EmbeddedTableActions({ workspaceId, tableId, tableName }: EmbeddedTable
   }
 
   return (
-    <>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={handleOpenTable}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label='Open table'
-          >
-            <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='bottom'>
-          <p>Open table</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={() => void handleExport()}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label='Export table as CSV'
-          >
-            <Download className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='bottom'>
-          <p>Export CSV</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
-    </>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          variant='subtle'
+          onClick={() => void handleExport()}
+          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+          aria-label='Export table as CSV'
+        >
+          <Download className={RESOURCE_TAB_ICON_CLASS} />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='bottom'>
+        <p>Export CSV</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
   )
 }
 
@@ -666,7 +471,6 @@ interface EmbeddedFileActionsProps {
 }
 
 function EmbeddedFileActions({ workspaceId, fileId }: EmbeddedFileActionsProps) {
-  const router = useRouter()
   const { data: files = [] } = useWorkspaceFiles(workspaceId)
   const file = useMemo(() => files.find((f) => f.id === fileId), [files, fileId])
 
@@ -679,44 +483,23 @@ function EmbeddedFileActions({ workspaceId, fileId }: EmbeddedFileActionsProps)
     }
   }
 
-  const handleOpenInFiles = () => {
-    router.push(`/workspace/${workspaceId}/files/${encodeURIComponent(fileId)}`)
-  }
-
   return (
-    <>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={handleOpenInFiles}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label='Open in files'
-          >
-            <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='bottom'>
-          <p>Open in files</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
-      <Tooltip.Root>
-        <Tooltip.Trigger asChild>
-          <Button
-            variant='subtle'
-            onClick={() => void handleDownload()}
-            disabled={!file}
-            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-            aria-label='Download file'
-          >
-            <Download className={RESOURCE_TAB_ICON_CLASS} />
-          </Button>
-        </Tooltip.Trigger>
-        <Tooltip.Content side='bottom'>
-          <p>Download</p>
-        </Tooltip.Content>
-      </Tooltip.Root>
-    </>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Button
+          variant='subtle'
+          onClick={() => void handleDownload()}
+          disabled={!file}
+          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+          aria-label='Download file'
+        >
+          <Download className={RESOURCE_TAB_ICON_CLASS} />
+        </Button>
+      </Tooltip.Trigger>
+      <Tooltip.Content side='bottom'>
+        <p>Download</p>
+      </Tooltip.Content>
+    </Tooltip.Root>
   )
 }
 
@@ -1011,36 +794,3 @@ function EmbeddedLog({ workspaceId, logId, onNotFound }: EmbeddedLogProps) {
     </div>
   )
 }
-
-interface EmbeddedLogActionsProps {
-  workspaceId: string
-  logId: string
-}
-
-export function EmbeddedLogActions({ workspaceId, logId }: EmbeddedLogActionsProps) {
-  const router = useRouter()
-  const { data: log } = useLogDetail(logId, workspaceId)
-
-  const handleOpenInLogs = () => {
-    const param = log?.executionId ? `?executionId=${log.executionId}` : ''
-    router.push(`/workspace/${workspaceId}/logs${param}`)
-  }
-
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>
-        <Button
-          variant='subtle'
-          onClick={handleOpenInLogs}
-          className={RESOURCE_TAB_ICON_BUTTON_CLASS}
-          aria-label='Open in logs'
-        >
-          <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
-        </Button>
-      </Tooltip.Trigger>
-      <Tooltip.Content side='bottom'>
-        <p>Open in logs</p>
-      </Tooltip.Content>
-    </Tooltip.Root>
-  )
-}

From 14fa20db9fb917a059683be3d3c7bbdd5d1b9f8c Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 12:20:28 -0500
Subject: [PATCH 32/34] style(chat): unify on the bubble-clock icon and rename
 "All Chats" to "Recents"

The title-bar chat switcher and the home tray launcher pointed at the same
chat history with different icons and names. Both now use the BubbleChatDelay
icon (the switcher's chat-bubble-with-clock), and the launcher (plus the
switcher's tooltip and aria labels) reads "Recents".

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/chat-switcher/chat-switcher.tsx         |  4 ++--
 .../home/components/chat-history/chat-history.tsx      | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
index a44d88107ba..83bc72fc6b0 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
@@ -120,7 +120,7 @@ export function ChatSwitcher({
   const trigger = iconOnly ? (
     <button
       type='button'
-      aria-label='All Chats'
+      aria-label='Recents'
       onClick={() => setOpen((prev) => !prev)}
       className={cn(
         'flex h-[30px] flex-shrink-0 items-center gap-1 rounded-lg px-1.5 transition-colors',
@@ -158,7 +158,7 @@ export function ChatSwitcher({
             <Tooltip.Root>
               <Tooltip.Trigger asChild>{trigger}</Tooltip.Trigger>
               <Tooltip.Content side='bottom'>
-                <p>All Chats</p>
+                <p>Recents</p>
               </Tooltip.Content>
             </Tooltip.Root>
           </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx
index 043d342d662..a44e4fc8a6f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-history/chat-history.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { Expandable, ExpandableContent } from '@/components/emcn'
-import { Clock } from '@/components/emcn/icons'
+import { BubbleChatDelay } from '@/components/emcn/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { ChatHistoryList } from '@/app/workspace/[workspaceId]/home/components/chat-history/chat-history-list'
 
@@ -19,7 +19,7 @@ interface ChatHistoryProps {
 /**
  * A launcher into the workspace's prior Mothership chats, docked into the grey
  * shelf beneath the home input (Codex tray pattern). Collapsed, it's a compact
- * "All Chats" chip; opening animates a searchable, recency-grouped list open
+ * "Recents" chip; opening animates a searchable, recency-grouped list open
  * INSIDE the grey tray — the shelf grows downward while the centered input
  * rides upward, in lockstep (300ms ease). Lives on the new-chat home view so a
  * chat can be resumed without the (collapsible) sidebar.
@@ -64,15 +64,15 @@ export function ChatHistory({ onSelectChat }: ChatHistoryProps) {
           type='button'
           onClick={() => setOpen((prev) => !prev)}
           aria-expanded={open}
-          aria-label='All chats'
+          aria-label='Recents'
           className={cn(
             'flex items-center gap-1.5 rounded-[8px] px-2 py-1 transition-colors',
             'hover-hover:bg-[var(--surface-active)]',
             open && 'bg-[var(--surface-active)]'
           )}
         >
-          <Clock className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
-          <span className='text-[var(--text-body)] text-sm'>All Chats</span>
+          <BubbleChatDelay className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+          <span className='text-[var(--text-body)] text-sm'>Recents</span>
         </button>
       </div>
 

From 34ba9e7f36294ec4d0a02b1c5cc7cafc3bb13400 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 15:10:34 -0500
Subject: [PATCH 33/34] =?UTF-8?q?feat(emcn):=20ThinkingLoader=20=E2=80=94?=
 =?UTF-8?q?=20the=20Recents=20icon=20spins=20while=20the=20chat=20generate?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

New emcn thinking-loader component wired through the chat title bar and
switcher: while a response streams, the switcher's bubble-clock icon becomes
a spinner so work-in-progress reads even with the messages off screen. Also
refreshes the paperclip and slash icons, simplifies the pending-tag indicator
to use the shared loader, trims dead tailwind config, and adds a playground
demo.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/sim/app/playground/page.tsx              |  34 +++
 .../chat-switcher/chat-switcher.tsx           |  18 +-
 .../components/special-tags/special-tags.tsx  |  21 +-
 .../chat-title-bar/chat-title-bar.tsx         |  11 +-
 .../mothership-chat/mothership-chat.tsx       |   4 +-
 .../app/workspace/[workspaceId]/home/home.tsx |   6 +-
 apps/sim/components/emcn/components/index.ts  |   5 +
 .../thinking-loader.module.css                | 267 ++++++++++++++++++
 .../thinking-loader/thinking-loader.tsx       | 215 ++++++++++++++
 apps/sim/components/emcn/icons/paperclip.tsx  |   4 +-
 apps/sim/components/emcn/icons/slash.tsx      |   5 +-
 apps/sim/tailwind.config.ts                   |   5 -
 12 files changed, 563 insertions(+), 32 deletions(-)
 create mode 100644 apps/sim/components/emcn/components/thinking-loader/thinking-loader.module.css
 create mode 100644 apps/sim/components/emcn/components/thinking-loader/thinking-loader.tsx

diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index 2fcb1f6f422..c43953acbd3 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -75,6 +75,7 @@ import {
   TagInput,
   type TagItem,
   Textarea,
+  ThinkingLoader,
   TimePicker,
   ToastProvider,
   Tooltip,
@@ -1007,6 +1008,39 @@ export default function PlaygroundPage() {
               </VariantRow>
             </Section>
 
+            {/* ThinkingLoader */}
+            <Section title='ThinkingLoader'>
+              <VariantRow label='cycle (default)'>
+                <div className='flex items-center gap-6'>
+                  <ThinkingLoader />
+                  <ThinkingLoader size={28} />
+                  <ThinkingLoader size={40} />
+                  <ThinkingLoader label='Thinking…' />
+                </div>
+              </VariantRow>
+              {(
+                [
+                  'metaballs',
+                  'orbit',
+                  'relay',
+                  'corners',
+                  'burst',
+                  'compass',
+                  'squeeze',
+                  'maze',
+                ] as const
+              ).map((variant) => (
+                <VariantRow key={variant} label={variant}>
+                  <div className='flex items-center gap-6'>
+                    <ThinkingLoader variant={variant} />
+                    <ThinkingLoader variant={variant} size={28} />
+                    <ThinkingLoader variant={variant} size={40} />
+                    <ThinkingLoader variant={variant} label='Thinking…' />
+                  </div>
+                </VariantRow>
+              ))}
+            </Section>
+
             {/* Icons */}
             <Section title='Icons'>
               <div className='grid grid-cols-6 gap-4 sm:grid-cols-8 md:grid-cols-10'>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
index 83bc72fc6b0..493fc88783a 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/chat-switcher/chat-switcher.tsx
@@ -7,6 +7,7 @@ import {
   Popover,
   PopoverAnchor,
   PopoverContent,
+  ThinkingLoader,
   Tooltip,
 } from '@/components/emcn'
 import { BubbleChatDelay, ChevronDown } from '@/components/emcn/icons'
@@ -64,6 +65,12 @@ interface ChatSwitcherProps {
    * to reopen a hidden chat pane (including re-picking the current chat).
    */
   onSelectChat?: (chatId: string) => void
+  /**
+   * The chat is generating a response — the recents icon becomes a spinner so
+   * the title bar signals work in progress even when the messages are off
+   * screen (collapsed pane, scrolled away).
+   */
+  isWorking?: boolean
 }
 
 /**
@@ -76,6 +83,7 @@ export function ChatSwitcher({
   isNewChat = false,
   iconOnly = false,
   onSelectChat,
+  isWorking = false,
 }: ChatSwitcherProps) {
   const isHidden = useSidebarToggleHidden()
   const { workspaceId } = useParams<{ workspaceId?: string }>()
@@ -117,6 +125,12 @@ export function ChatSwitcher({
     router.push(`/workspace/${workspaceId}/chat/${selectedChatId}`)
   }
 
+  const chipIcon = isWorking ? (
+    <ThinkingLoader size={18} className='flex-shrink-0' />
+  ) : (
+    <BubbleChatDelay className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+  )
+
   const trigger = iconOnly ? (
     <button
       type='button'
@@ -128,7 +142,7 @@ export function ChatSwitcher({
         open && 'bg-[var(--surface-active)]'
       )}
     >
-      <BubbleChatDelay className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      {chipIcon}
       <ChevronDown className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
     </button>
   ) : (
@@ -142,7 +156,7 @@ export function ChatSwitcher({
         open && 'bg-[var(--surface-active)]'
       )}
     >
-      <BubbleChatDelay className='size-[16px] flex-shrink-0 text-[var(--text-icon)]' />
+      {chipIcon}
       <span className='min-w-0 truncate font-medium text-[14px] text-[var(--text-primary)]'>
         {title}
       </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
index a3b61917c4b..fcf217c500b 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
@@ -8,6 +8,7 @@ import {
   Expandable,
   ExpandableContent,
   SecretReveal,
+  ThinkingLoader,
 } from '@/components/emcn'
 import { canonicalWorkspaceFilePath } from '@/lib/copilot/vfs/path-utils'
 import { cn } from '@/lib/core/utils/cn'
@@ -356,13 +357,6 @@ export function parseSpecialTags(content: string, isStreaming: boolean): ParsedS
   return { segments, hasPendingTag }
 }
 
-const THINKING_BLOCKS = [
-  { color: '#2ABBF8', delay: '0s' },
-  { color: '#00F701', delay: '0.2s' },
-  { color: '#FA4EDF', delay: '0.6s' },
-  { color: '#FFCC02', delay: '0.4s' },
-] as const
-
 interface SpecialTagsProps {
   segment: Exclude<ContentSegment, { type: 'text' }>
   onOptionSelect?: (id: string) => void
@@ -401,17 +395,8 @@ export function SpecialTags({
  */
 export function PendingTagIndicator() {
   return (
-    <div className='flex animate-stream-fade-in items-center gap-2 py-2'>
-      <div className='grid size-[16px] grid-cols-2 gap-[1.5px]'>
-        {THINKING_BLOCKS.map((block, i) => (
-          <div
-            key={i}
-            className='animate-thinking-block rounded-xs'
-            style={{ backgroundColor: block.color, animationDelay: block.delay }}
-          />
-        ))}
-      </div>
-      <span className='text-[var(--text-body)] text-sm'>Thinking…</span>
+    <div className='flex animate-stream-fade-in items-center py-2'>
+      <ThinkingLoader label='Thinking…' />
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
index 9667810bfd9..b6e658f7595 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/components/chat-title-bar/chat-title-bar.tsx
@@ -15,6 +15,8 @@ interface ChatTitleBarProps {
   onSelectChat?: (chatId: string) => void
   /** Renders a close (×) control at the bar's right edge that hides the chat pane. */
   onClose?: () => void
+  /** The chat is generating a response — the switcher's recents icon becomes a spinner. */
+  isWorking?: boolean
 }
 
 /**
@@ -23,7 +25,7 @@ interface ChatTitleBarProps {
  * straight between chats without returning to the new-chat view. Selecting a
  * chat navigates to it.
  */
-export function ChatTitleBar({ chatId, onSelectChat, onClose }: ChatTitleBarProps) {
+export function ChatTitleBar({ chatId, onSelectChat, onClose, isWorking }: ChatTitleBarProps) {
   return (
     <div className='flex h-[44px] flex-shrink-0 items-center gap-1 border-[var(--border)] border-b px-4'>
       {/* Edge controls pull out by 9px so their 30px hover pills sit 7px from
@@ -31,7 +33,12 @@ export function ChatTitleBar({ chatId, onSelectChat, onClose }: ChatTitleBarProp
       <SidebarToggle className='-ml-[9px]' />
       {/* The title bar only renders on chat surfaces, so no chat id means the
           new-chat empty state — never fall back to the most recent chat. */}
-      <ChatSwitcher chatId={chatId} isNewChat={!chatId} onSelectChat={onSelectChat} />
+      <ChatSwitcher
+        chatId={chatId}
+        isNewChat={!chatId}
+        onSelectChat={onSelectChat}
+        isWorking={isWorking}
+      />
       {onClose && (
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
index 6a6d70d573c..ded9fadbbcd 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx
@@ -308,7 +308,9 @@ export function MothershipChat({
       onWorkspaceResourceSelect={onWorkspaceResourceSelect}
     >
       <div className={cn('flex h-full min-h-0 flex-col', className)}>
-        {layout === 'mothership-view' && <ChatTitleBar chatId={chatId} onClose={onCloseChat} />}
+        {layout === 'mothership-view' && (
+          <ChatTitleBar chatId={chatId} onClose={onCloseChat} isWorking={isStreamActive} />
+        )}
         <div className='relative flex min-h-0 flex-1 flex-col'>
           <div ref={setScrollContainer} className={cn(styles.scrollContainer, SCROLLBAR_AUTOHIDE)}>
             {isLoading && !hasMessages ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index 9d5063dd27a..4c1ffc094fd 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -628,7 +628,11 @@ export function Home({ chatId, userName, userId, initialResourceId = null }: Hom
                    the toggle and switcher never shift when the pane closes. */
                 <div className='flex flex-shrink-0 items-center gap-1'>
                   <SidebarToggle className='-ml-[9px]' />
-                  <ChatSwitcher chatId={activeChatId} onSelectChat={reopenChatPane} />
+                  <ChatSwitcher
+                    chatId={activeChatId}
+                    onSelectChat={reopenChatPane}
+                    isWorking={isSending || isReconnecting}
+                  />
                 </div>
               ) : undefined
             }
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index 134733fd363..cb39c4023ab 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -155,6 +155,11 @@ export {
 } from './table/table'
 export { type FileInputOptions, TagInput, type TagItem } from './tag-input/tag-input'
 export { Textarea } from './textarea/textarea'
+export {
+  ThinkingLoader,
+  type ThinkingLoaderProps,
+  type ThinkingLoaderVariant,
+} from './thinking-loader/thinking-loader'
 export { TimePicker, timePickerVariants } from './time-picker/time-picker'
 export { ToastProvider, toast, useToast } from './toast/toast'
 export {
diff --git a/apps/sim/components/emcn/components/thinking-loader/thinking-loader.module.css b/apps/sim/components/emcn/components/thinking-loader/thinking-loader.module.css
new file mode 100644
index 00000000000..3f07b2c214e
--- /dev/null
+++ b/apps/sim/components/emcn/components/thinking-loader/thinking-loader.module.css
@@ -0,0 +1,267 @@
+/**
+ * ThinkingLoader gooey animation
+ *
+ * Metaball technique on the SVG alpha channel: ink shapes are blurred with
+ * feGaussianBlur, then feColorMatrix crushes the soft alpha back to hard
+ * edges. Unlike the CSS blur+contrast trick this needs no solid backdrop and
+ * no blend mode, so the loader composites cleanly on any background.
+ *
+ * Every variant is authored in the shared 100x100 viewBox. All stages stack
+ * inside one filtered group; because the alpha crush happens after the
+ * stages composite, crossfading two stages reads as one pattern melting
+ * into the next, which is what drives the cycling morph.
+ *
+ * Ink color rides on currentColor: near-black on light surfaces, off-white
+ * in dark mode.
+ */
+
+.frame {
+  color: #4f4f4f;
+  flex: none;
+}
+
+:global(.dark) .frame {
+  color: #d6d6d6;
+}
+
+.labelRow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Claude-style shimmer: the text paints from a gradient with a light band
+   that sweeps across the glyphs via background-clip. */
+.label {
+  font-size: 14px;
+  /* season is a variable font (300–800): 450 is a true intermediate weight,
+     present without the heaviness 500 shows on light surfaces. */
+  font-weight: 450;
+  background-image: linear-gradient(90deg, #4a4a4a 40%, #b0b0b0 50%, #4a4a4a 60%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: label-shimmer 2.2s linear infinite;
+}
+
+:global(.dark) .label {
+  background-image: linear-gradient(90deg, #b9b9b9 40%, #f8f8f8 50%, #b9b9b9 60%);
+}
+
+@keyframes label-shimmer {
+  to {
+    background-position: 200% 0;
+  }
+}
+
+.stage {
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.stageActive {
+  opacity: 1;
+}
+
+/* metaballs — two circles drift apart and melt back together */
+.metaballsA {
+  animation: metaballs-a 1s infinite alternate;
+}
+.metaballsB {
+  animation: metaballs-b 1s infinite alternate;
+}
+@keyframes metaballs-a {
+  90%,
+  100% {
+    transform: translateX(30px);
+  }
+}
+@keyframes metaballs-b {
+  90%,
+  100% {
+    transform: translateX(-30px);
+  }
+}
+
+/* orbit — two blobs chase each other around a square track */
+.orbitA,
+.orbitB {
+  animation: orbit 2s infinite;
+}
+.orbitB {
+  animation-delay: -1s;
+}
+@keyframes orbit {
+  0% {
+    transform: translate(0, 0);
+  }
+  25% {
+    transform: translate(40px, 0);
+  }
+  50% {
+    transform: translate(40px, 40px);
+  }
+  75% {
+    transform: translate(0, 40px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+/* relay — a ball stretches between two goal posts */
+.relayBall {
+  animation: relay 1s infinite;
+}
+@keyframes relay {
+  90%,
+  100% {
+    transform: translateX(60px);
+  }
+}
+
+/* corners — four dots rotate around a center square */
+.cornersA {
+  animation: corners-a 0.8s infinite;
+}
+.cornersB {
+  animation: corners-b 0.8s infinite;
+}
+.cornersC {
+  animation: corners-c 0.8s infinite;
+}
+.cornersD {
+  animation: corners-d 0.8s infinite;
+}
+@keyframes corners-a {
+  100% {
+    transform: translate(50px, 0);
+  }
+}
+@keyframes corners-b {
+  100% {
+    transform: translate(0, 50px);
+  }
+}
+@keyframes corners-c {
+  100% {
+    transform: translate(-50px, 0);
+  }
+}
+@keyframes corners-d {
+  100% {
+    transform: translate(0, -50px);
+  }
+}
+
+/* burst — four dots repeatedly fling out of a center cross */
+.burstUp {
+  animation: burst-up 0.8s infinite;
+}
+.burstDown {
+  animation: burst-down 0.8s infinite;
+}
+.burstLeft {
+  animation: burst-left 0.8s infinite;
+}
+.burstRight {
+  animation: burst-right 0.8s infinite;
+}
+@keyframes burst-up {
+  100% {
+    transform: translateY(-50px);
+  }
+}
+@keyframes burst-down {
+  100% {
+    transform: translateY(50px);
+  }
+}
+@keyframes burst-left {
+  100% {
+    transform: translateX(-50px);
+  }
+}
+@keyframes burst-right {
+  100% {
+    transform: translateX(50px);
+  }
+}
+
+/* compass — one dot tours the four cardinal points */
+.compassMover {
+  animation: compass 2s infinite;
+}
+@keyframes compass {
+  0% {
+    transform: translate(0, 0);
+  }
+  25% {
+    transform: translate(25px, 25px);
+  }
+  50% {
+    transform: translate(0, 50px);
+  }
+  75% {
+    transform: translate(-25px, 25px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+/* squeeze — two bars pinch together inside the ring arcs */
+.squeezeBarL {
+  animation: squeeze-l 0.6s infinite alternate;
+}
+.squeezeBarR {
+  animation: squeeze-r 0.6s infinite alternate;
+}
+@keyframes squeeze-l {
+  0%,
+  30% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(10px);
+  }
+}
+@keyframes squeeze-r {
+  0%,
+  30% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-10px);
+  }
+}
+
+/* maze — a dot traces the channel between two L-shaped walls */
+.mazeDot {
+  animation: maze 2s infinite;
+}
+@keyframes maze {
+  0% {
+    transform: translate(0, 0);
+  }
+  25% {
+    transform: translate(45px, 0);
+  }
+  50% {
+    transform: translate(45px, 45px);
+  }
+  75% {
+    transform: translate(0, 45px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .frame *,
+  .label {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/components/thinking-loader/thinking-loader.tsx b/apps/sim/components/emcn/components/thinking-loader/thinking-loader.tsx
new file mode 100644
index 00000000000..700ae8e5746
--- /dev/null
+++ b/apps/sim/components/emcn/components/thinking-loader/thinking-loader.tsx
@@ -0,0 +1,215 @@
+'use client'
+
+import { type ReactNode, useEffect, useId, useState } from 'react'
+import styles from '@/components/emcn/components/thinking-loader/thinking-loader.module.css'
+import { cn } from '@/lib/core/utils/cn'
+
+const VARIANTS = [
+  'metaballs',
+  'orbit',
+  'relay',
+  'corners',
+  'burst',
+  'compass',
+  'squeeze',
+  'maze',
+] as const
+
+export type ThinkingLoaderVariant = (typeof VARIANTS)[number]
+
+/**
+ * One full animation loop per variant (duration × 2 for alternate
+ * animations). While cycling, each pattern holds for exactly one loop
+ * before morphing to the next.
+ */
+const VARIANT_LOOP_MS: Record<ThinkingLoaderVariant, number> = {
+  metaballs: 2000,
+  orbit: 2000,
+  relay: 1000,
+  corners: 800,
+  burst: 800,
+  compass: 2000,
+  squeeze: 1200,
+  maze: 2000,
+}
+
+/**
+ * Ink shapes per variant, authored in the shared 100x100 viewBox.
+ * Geometry mirrors the intrinsic CSS loaders these were adapted from,
+ * contain-fit to the canvas. Animations live in the CSS module.
+ */
+const VARIANT_SHAPES: Record<ThinkingLoaderVariant, ReactNode> = {
+  metaballs: (
+    <>
+      <circle className={styles.metaballsA} cx='20' cy='50' r='20' />
+      <circle className={styles.metaballsB} cx='80' cy='50' r='20' />
+    </>
+  ),
+  orbit: (
+    <>
+      <rect className={styles.orbitA} x='10' y='10' width='40' height='40' />
+      <rect className={styles.orbitB} x='10' y='10' width='40' height='40' />
+    </>
+  ),
+  relay: (
+    <>
+      <rect x='10' y='30' width='20' height='40' />
+      <rect x='70' y='30' width='20' height='40' />
+      <circle className={styles.relayBall} cx='20' cy='50' r='10' />
+    </>
+  ),
+  corners: (
+    <>
+      <rect x='25' y='25' width='50' height='50' />
+      <circle className={styles.cornersA} cx='25' cy='25' r='12.5' />
+      <circle className={styles.cornersB} cx='75' cy='25' r='12.5' />
+      <circle className={styles.cornersC} cx='75' cy='75' r='12.5' />
+      <circle className={styles.cornersD} cx='25' cy='75' r='12.5' />
+    </>
+  ),
+  burst: (
+    <>
+      <rect x='12.5' y='43.75' width='75' height='12.5' />
+      <rect x='43.75' y='12.5' width='12.5' height='75' />
+      <circle cx='50' cy='50' r='12.5' />
+      <circle className={styles.burstUp} cx='50' cy='50' r='12.5' />
+      <circle className={styles.burstDown} cx='50' cy='50' r='12.5' />
+      <circle className={styles.burstLeft} cx='50' cy='50' r='12.5' />
+      <circle className={styles.burstRight} cx='50' cy='50' r='12.5' />
+    </>
+  ),
+  compass: (
+    <>
+      <circle cx='50' cy='25' r='12.5' />
+      <circle cx='25' cy='50' r='12.5' />
+      <circle cx='75' cy='50' r='12.5' />
+      <circle cx='50' cy='75' r='12.5' />
+      <circle className={styles.compassMover} cx='50' cy='25' r='12.5' />
+    </>
+  ),
+  squeeze: (
+    <>
+      <path
+        d='M 21.36 37.5 A 31.25 31.25 0 0 1 78.64 37.5'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='12.5'
+      />
+      <path
+        d='M 21.36 62.5 A 31.25 31.25 0 0 0 78.64 62.5'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='12.5'
+      />
+      <rect className={styles.squeezeBarL} x='15' y='37.5' width='12.5' height='25' />
+      <rect className={styles.squeezeBarR} x='72.5' y='37.5' width='12.5' height='25' />
+    </>
+  ),
+  maze: (
+    <>
+      <path d='M 12.5 12.5 H 87.5 V 27.5 H 27.5 V 87.5 H 12.5 Z' />
+      <path d='M 87.5 12.5 V 87.5 H 12.5 V 72.5 H 72.5 V 12.5 Z' />
+      <circle className={styles.mazeDot} cx='27.5' cy='27.5' r='15' />
+    </>
+  ),
+}
+
+export interface ThinkingLoaderProps {
+  /** Pin one pattern. When omitted, the loader morphs between all patterns at random. */
+  variant?: ThinkingLoaderVariant
+  /** Rendered square size in px. Defaults to 20. */
+  size?: number
+  /** Optional status text (e.g. "Thinking…") rendered beside the goo with a shimmer sweep. */
+  label?: string
+  /** Layout-only classes (margins, alignment). The loader owns its chrome. */
+  className?: string
+}
+
+/**
+ * Gooey mono thinking indicator shown wherever chat is working.
+ * Ink is near-black on light surfaces and off-white on dark surfaces.
+ *
+ * The goo filter operates on the alpha channel of transparent SVG shapes,
+ * so the loader needs no backdrop and composites on any background. All
+ * patterns share one filtered group, so the default cycling mode melts one
+ * pattern into the next instead of hard-swapping.
+ *
+ * @example
+ * ```tsx
+ * <ThinkingLoader label='Thinking…' />
+ * ```
+ */
+export function ThinkingLoader({ variant, size = 20, label, className }: ThinkingLoaderProps) {
+  // useId emits colons, which break url(#...) filter references — strip them.
+  const id = useId().replace(/[^a-zA-Z0-9-]/g, '')
+  const filterId = `tl-goo-${id}`
+  const clipId = `tl-clip-${id}`
+  const windowClipId = `tl-window-${id}`
+  const [cycleVariant, setCycleVariant] = useState<ThinkingLoaderVariant>('metaballs')
+  const cycling = variant === undefined
+
+  useEffect(() => {
+    if (!cycling) return
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+    const timeout = setTimeout(() => {
+      setCycleVariant((prev) => {
+        const others = VARIANTS.filter((v) => v !== prev)
+        return others[Math.floor(Math.random() * others.length)]
+      })
+    }, VARIANT_LOOP_MS[cycleVariant])
+    return () => clearTimeout(timeout)
+  }, [cycling, cycleVariant])
+
+  const shown = variant ?? cycleVariant
+  const stages = cycling ? VARIANTS : [shown]
+
+  const loader = (
+    <svg
+      role={label ? undefined : 'status'}
+      aria-label={label ? undefined : 'Thinking'}
+      aria-hidden={label ? true : undefined}
+      viewBox='0 0 100 100'
+      width={size}
+      height={size}
+      className={cn(styles.frame, !label && className)}
+    >
+      <defs>
+        <filter id={filterId} x='-30%' y='-30%' width='160%' height='160%'>
+          <feGaussianBlur in='SourceGraphic' stdDeviation='5' result='blur' />
+          <feColorMatrix in='blur' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9' />
+        </filter>
+        {/* Shapes clip BEFORE the goo filter, so anything exiting the frame
+            melts into the edge instead of getting a hard post-filter cut. */}
+        <clipPath id={clipId}>
+          <rect width='100' height='100' />
+        </clipPath>
+        {/* The original burst loader hid its flying dots under a 10px border,
+            swallowing them at the inner window — this clip reproduces it. */}
+        <clipPath id={windowClipId}>
+          <rect x='12.5' y='12.5' width='75' height='75' />
+        </clipPath>
+      </defs>
+      <g filter={`url(#${filterId})`} fill='currentColor'>
+        {stages.map((v) => (
+          <g
+            key={v}
+            clipPath={`url(#${v === 'burst' ? windowClipId : clipId})`}
+            className={cn(styles.stage, v === shown && styles.stageActive)}
+          >
+            {VARIANT_SHAPES[v]}
+          </g>
+        ))}
+      </g>
+    </svg>
+  )
+
+  if (!label) return loader
+
+  return (
+    <span role='status' className={cn(styles.labelRow, className)}>
+      {loader}
+      <span className={styles.label}>{label}</span>
+    </span>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/paperclip.tsx b/apps/sim/components/emcn/icons/paperclip.tsx
index b4d6d0b99e5..039f820b803 100644
--- a/apps/sim/components/emcn/icons/paperclip.tsx
+++ b/apps/sim/components/emcn/icons/paperclip.tsx
@@ -6,7 +6,8 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 }
 
 /**
- * Paperclip icon (Hugeicons stroke-rounded: Attachment01Icon)
+ * Paperclip icon (Hugeicons stroke-rounded: Attachment01Icon, mirrored so the
+ * clip leans bottom-left to top-right, pairing with the angled Slash icon)
  * @param props - SVG properties including className, size, fill, etc.
  */
 export function Paperclip({ size = 24, width, height, ...props }: IconProps) {
@@ -22,6 +23,7 @@ export function Paperclip({ size = 24, width, height, ...props }: IconProps) {
     >
       <path
         d='M5.82338 12L4.27922 10.4558C2.57359 8.75022 2.57359 5.98485 4.27922 4.27922C5.98485 2.57359 8.75022 2.57359 10.4558 4.27922L19.7208 13.5442C21.4264 15.2498 21.4264 18.0152 19.7208 19.7208C18.0152 21.4264 15.2498 21.4264 13.5442 19.7208L10.0698 16.2464C9.00379 15.1804 9.00379 13.4521 10.0698 12.386C11.1358 11.32 12.8642 11.32 13.9302 12.386L15.8604 14.3162'
+        transform='translate(24 0) scale(-1 1)'
         stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
diff --git a/apps/sim/components/emcn/icons/slash.tsx b/apps/sim/components/emcn/icons/slash.tsx
index bfdb00920b4..6b2e2053833 100644
--- a/apps/sim/components/emcn/icons/slash.tsx
+++ b/apps/sim/components/emcn/icons/slash.tsx
@@ -6,7 +6,8 @@ interface IconProps extends SVGProps<SVGSVGElement> {
 }
 
 /**
- * Slash icon (Hugeicons stroke-rounded: MinusSignIcon)
+ * Slash icon — a 45° stroke leaning bottom-left to top-right, matching the
+ * mirrored Paperclip's angle so the two read as an intentional pair
  * @param props - SVG properties including className, size, fill, etc.
  */
 export function Slash({ size = 24, width, height, ...props }: IconProps) {
@@ -21,7 +22,7 @@ export function Slash({ size = 24, width, height, ...props }: IconProps) {
       {...props}
     >
       <path
-        d='M20 12L4 12'
+        d='M18 6L6 18'
         stroke='currentColor'
         strokeLinecap='round'
         strokeLinejoin='round'
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
index fd60c537e2f..706222782a9 100644
--- a/apps/sim/tailwind.config.ts
+++ b/apps/sim/tailwind.config.ts
@@ -180,10 +180,6 @@ export default {
           from: { opacity: '0' },
           to: { opacity: '1' },
         },
-        'thinking-block': {
-          '0%, 100%': { opacity: '0.15' },
-          '30%, 55%': { opacity: '1' },
-        },
         'slide-in-right': {
           from: { transform: 'translateX(40px)' },
           to: { transform: 'translateX(0)' },
@@ -210,7 +206,6 @@ export default {
         'ring-pulse': 'ring-pulse 1.5s ease-in-out infinite',
         'stream-fade-in': 'stream-fade-in 300ms ease-out forwards',
         'stream-fade-in-delayed': 'stream-fade-in 300ms ease-out 1.5s forwards',
-        'thinking-block': 'thinking-block 1.6s ease-in-out infinite',
         'slide-in-right': 'slide-in-right 350ms ease-out forwards',
         'slide-in-bottom': 'slide-in-bottom 400ms cubic-bezier(0.16, 1, 0.3, 1)',
         'collapsible-down': 'collapsible-down 300ms cubic-bezier(0.4, 0, 0.2, 1)',

From 8bf590c8ef998e0826236aef5485f22ee8891792 Mon Sep 17 00:00:00 2001
From: andresdjasso <andresdjasso@users.noreply.github.com>
Date: Thu, 11 Jun 2026 15:10:45 -0500
Subject: [PATCH 34/34] =?UTF-8?q?style(integrations):=20sidebar=20toggle?=
 =?UTF-8?q?=20in=20the=20tabs=20header=20=E2=80=94=20no=20chat=20switcher?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Integrations/Skills header gets the canonical 44px bar with the sidebar
toggle at the standard 7px edge spot. The chat switcher stays off this page;
the tab chips keep their original 8.5px vertical inset.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../integration-tabs-header.tsx                   | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header/integration-tabs-header.tsx b/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header/integration-tabs-header.tsx
index 2ce50402bb8..951310df5d9 100644
--- a/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header/integration-tabs-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header/integration-tabs-header.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { ChipLink } from '@/components/emcn'
+import { ChatSwitcher } from '@/app/workspace/[workspaceId]/components/chat-switcher'
 import { SidebarToggle } from '@/app/workspace/[workspaceId]/components/sidebar-toggle'
 
 interface IntegrationTabsHeaderProps {
@@ -20,11 +21,15 @@ export function IntegrationTabsHeader({
 }: IntegrationTabsHeaderProps) {
   return (
     <div className='flex h-[44px] flex-shrink-0 items-center bg-[var(--bg)] px-4'>
-      {/* The sidebar toggle matches ResourceHeader's 9px pull-out inside the
-          canonical 44px bar, landing on the same 7px edge spot as every other
-          page. The 44px bar keeps the 27px chips at the same 8.5px inset the
-          old padding produced. */}
-      <SidebarToggle className='-ml-[9px] mr-2' />
+      {/* Chrome controls match ResourceHeader's toggle+switcher cluster (9px
+          pull-out, gap-1 rhythm) inside the canonical 44px bar, so the pair
+          lands on the same 7px/7px spot as every other page and never shifts
+          during navigation. The 44px bar keeps the 27px chips at the same
+          8.5px inset the old padding produced. */}
+      <div className='mr-2 flex flex-shrink-0 items-center gap-1'>
+        <SidebarToggle className='-ml-[9px]' />
+        <ChatSwitcher iconOnly />
+      </div>
       <ChipLink href={`/workspace/${workspaceId}/integrations`} active={active === 'integrations'}>
         Integrations
       </ChipLink>