improvement(ui): align terminal with the workflow design system, fix row hover states (#6534)

* improvement(ui): align terminal with the workflow design system, fix row hover states

Terminal:
- derive log-row block tiles the way the canvas does (role accent for core
  blocks and subflows, provider colour only for role-less integrations)
- compose rows from chipGeometryClass, chipContentLabelClass and
  disclosureChevronClass instead of re-deriving the pill
- align the output tree's greys with the log rows; share ROW_STYLES.nested
  and BADGE_STYLE instead of duplicating the literals
- neutralise value-type badges so red is the only colour in the tree
- unify the row/separator gutter; normalise icon sizes to size-[14px]
- drop dead flattenEntryTree and the RunningBadge re-exports

Hover model (chipVariants, PopoverItem, Combobox, docs sidebar, terminal):
- hover paints --surface-hover, one step below the --surface-active a
  selected row keeps, so a hovered row no longer impersonates the selected one
- an active row holds its surface through hover instead of brightening

Deploy modal:
- move the footer actions onto the Chip family, primary action as
  Chip variant='primary' to match every other modal footer

* improvement(emcn): extract the row-state surface pair, simplify the terminal rows

Review follow-ups from /simplify and /cleanup:

- add chipHoverSurfaceClass / chipActiveSurfaceClass to chip-chrome as the one
  home for the two-surface row model, and route chipVariants, PopoverItem,
  Combobox, the docs sidebar, the landing preview and queued messages through
  them instead of restating the literals
- terminal ROW_STYLES now renders chipVariants rather than re-deriving its
  output, and the four rows share content/label/status classes resolved once
- structured-output composes chipGeometryClass with an h-auto override rather
  than restating four of its literals
- getEntryAccentType collapses to one expression, dropping the SYNTHETIC_BLOCK
  types coupling
- collapse the chip compound variants to two array-matched entries
- deploy modal: hoist the shared loader adornment, size it with
  chipContentIconClass so it matches every other chip icon
- landing preview drops its --c-active/--c-hover inline aliases for the tokens
- trim the rationale to one canonical copy with cross-references, and convert
  the block comments on declarations to TSDoc

* improvement(workflow): align canvas controls with the canvas surface and icon scale

- floating controls sit on --surface-2, the surface the block cards use, rather
  than --surface-1 (the sidebar/panel surface)
- undo/redo/fit glyphs drop 16px -> the platform's 14px default, and the mode
  dropdown's own 12px icons come up to match; the control had three icon sizes
- inactive buttons hover to --surface-hover instead of --surface-5, which was
  the active mode button's resting fill, so hovering one looked selected
- inner radius goes concentric with the 4px padding (rounded-sm inside
  rounded-lg)

* improvement(workflow): give the canvas-mode chevron the same treatment as its siblings

It was the only control in the cluster with no hover fill and a different rest
colour (--text-muted against the others' --text-secondary), so it read fainter
and behaved differently under the pointer. It is also a disclosure chevron, so
it now uses disclosureChevronClass instead of a hand-rolled duration-100 copy,
and a real 20px box instead of the !p-1.5 override plus -m-1 hit-area hack.

* test(terminal): lock the log-row accent rule against the block toolbar

getEntryAccentType encodes a cross-surface rule — a block must be accented the
same way in the terminal as in the block toolbar — and nothing enforced it. The
table covers every branch: core blocks mapped and unmapped, role-bearing and
role-less integrations and triggers, the config-less subflows, and the
synthesized error/validation/cancelled rows that must keep their status fill.

Verified failing: reverting the guard to an unconditional return reds two of
the four cases.

* fix(workflow): make notifications track panel and terminal resize live

The toast stack insets by --panel-width / --terminal-height, but a resize drag
writes those to the resized subtree only (.panel-container / .terminal-container)
rather than to :root, because a custom-property write on :root recalculates the
whole document (~150x slower). The stack is portalled to <body>, so it shares no
ancestor with either and kept reading the stale :root value — it held its
pre-drag position and jumped once the drag committed, while the canvas controls,
which are laid out inside the shrinking canvas, tracked the drag in realtime.

useDragResize now accepts several target subtrees and writes each one, so the
scoped recalc is preserved and every consumer follows the drag frame by frame.
The stack is found through a new data-toast-viewport attribute.

Also drops the canvas controls from bottom-4 to bottom-2: the toast clears the
terminal by 8px (it anchors from the viewport, and the terminal is inset by
CONTENT_WINDOW_GAP), where the controls measure from the canvas floor and so
sat at twice the gap.

* improvement(workflow): inset the canvas controls 8px off both edges

The toast stack clears the terminal and the panel by 8px — it anchors from the
viewport at --terminal-height/--panel-width + 16px, and both are themselves
inset by CONTENT_WINDOW_GAP (8px). The controls measure from the canvas floor
and wall instead, so their 16px read as twice the gap on both axes.

* improvement(workflow): lift the canvas controls and toasts to a 12px clearance

8px sat them too close to the terminal. 12 is on the same 4px grid as the
surrounding spacing, where 10 would have been the only off-grid value in the
area. Both surfaces clear the terminal and the panel by the same amount, so they
read as one row; the toast's literals move into named insets rather than staying
bare numbers in a style object.

* refactor(hooks): split the drag's resize target from its other var consumers

getTarget briefly accepted a list, which made the first entry both the resized
element and the drag's liveness reference. A toast auto-dismisses after 5s, so
had one ever led that list, its mid-drag unmount would have read as the drag
target detaching and skipped the final recompute on release. The co-consumers
now come through getExtraTargets, which is written but never consulted for
liveness, and can come and go freely.

* fix(emcn): stop the combobox cursor diverging from what Enter commits

The option rows painted --surface-active from CSS :hover as well as from
isHighlighted. CSS :hover tracks the pointer continuously while highlightedIndex
only advances on mouseenter, so once the list scrolled under a stationary
pointer the row that looked selected was not the one Enter would commit —
Enter reads filteredOptions[highlightedIndex].

isHighlighted is now the single source of truth for the cursor, so paint and
commit cannot disagree. The row under a stationary pointer may lag a scroll
until the mouse moves, but it lags in agreement with what Enter will do, which
is the invariant worth keeping. Disabled options also stop painting on hover,
matching the mouseenter guard that already refused to highlight them.

The 'All' row keeps its own hover: it clears the highlight rather than taking
it, so it has no isHighlighted paint to fall back on.

* fix(toast): derive the workflow inset from the shell's actual padding

WORKFLOW_INSET_PX baked in the 8px the workspace shell normally insets the panel
and terminal by, so the stack's 20px resolved to a 12px clearance — matching the
canvas controls. But the shell drops to p-0 on the desktop title-bar shell with a
collapsed sidebar, and there the stack would have sat 20px out while the
controls, laid out inside the shell, stayed at 12.

The stack now adds --workspace-content-gap (published on :root, zeroed by the
same condition that zeroes the padding) to a flat 12, so the two surfaces hold
the same clearance in both configurations. Before this PR they matched in the
p-0 case at 16px each, so this closes a divergence the PR would otherwise have
introduced.

Author: waleedlatif1

.claude/rules/emcn-components.md

@@ -11,7 +11,7 @@ Import components, `cn`, and tokens from the `@sim/emcn` barrel; icons come from
 
 Never hand-roll the chip pill from raw class strings (they go stale). Compose from the canonical sources:
 
-- **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, and `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
+- **Surface, typography + content tokens:** `chip/chip-chrome.ts` — `chipFilledSurfaceTokens`, `chipFieldSurfaceClass`, `chipFieldTextClass` (text fields and the dropdown search box build on these), plus the chip-content chrome `chipContentGap`, `chipGeometryClass`, `chipContentIconClass`, `chipContentLabelClass`, `cellIconNodeClass` (non-chip surfaces that must visually match chip content, e.g. resource table cells), and the row-state pair `chipHoverSurfaceClass` / `chipActiveSurfaceClass` (hover vs. selected — mutually exclusive, so a selected row holds its surface through hover; every hand-rolled row imports these rather than restating the literals). All are re-exported from the `@sim/emcn` barrel — no subpath import needed.
 - **Pill geometry:** `chip/chip.tsx` — `chipVariants` (30px tall, `rounded-lg`, `px-2`, icon↔text `gap-1.5`). Every pill-shaped trigger (`ChipDropdown`, `ChipSelect`, `ChipSwitch`) reuses it for visual parity.
 
 Canonical look: normal font-weight (never `font-medium`/`font-semibold`), value text `--text-body`, icons `--text-icon` at `size-[14px]`, placeholder `--text-muted`, `transition-colors`, **no focus ring** (the caret marks focus). Filled surface is `--surface-5` light / `--surface-4` dark with a `--border-1` border.

apps/docs/app/global.css

@@ -518,19 +518,13 @@ html #nd-sidebar button[data-active="true"] {
   color: var(--text-body) !important;
 }
 
-/* Hover state — the app's nav Chip hovers to --surface-active. These rules must
-   carry !important to beat fumadocs' own sidebar styles, which also means they
-   override the Tailwind hover utilities on the items; keep the two in step. */
+/* Hover state — emcn's two-surface row model (see `chipHoverSurfaceClass`).
+   These rules must carry !important to beat fumadocs' own sidebar styles, which
+   also means they override the Tailwind hover utilities on the items; keep the
+   two in step. */
 html #nd-sidebar a:not(:has(span.font-mono)):hover:not([data-active="true"]),
 html #nd-sidebar button:hover:not([data-active="true"]) {
-  background-color: var(--surface-active) !important;
-}
-
-/* An active item darkens one surface on hover, matching the app's active Chip */
-html #nd-sidebar a[data-active="true"]:not(:has(span.font-mono)):hover,
-html #nd-sidebar button[data-active="true"]:hover {
-  background-color: var(--surface-6) !important;
-  color: var(--text-body) !important;
+  background-color: var(--surface-hover) !important;
 }
 
 /* Hide search, platform, and collapse button from sidebar completely */

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { type ReactNode, useState } from 'react'
+import { chipActiveSurfaceClass, chipHoverSurfaceClass } from '@sim/emcn'
 import { ChevronRight } from '@sim/emcn/icons'
 import type { Folder, Item, Separator } from 'fumadocs-core/page-tree'
 import { useSidebar } from 'fumadocs-ui/components/sidebar/base'
@@ -43,7 +44,7 @@ function isActive(url: string, pathname: string, nested = true): boolean {
 /**
  * Rows mirror the app sidebar's chip pill: 30px tall, `rounded-lg`, `px-2`, 14px
  * at normal weight, `--text-body` at rest AND when active — only the background
- * moves, to `--surface-active`, then `--surface-6` when an active row is hovered.
+ * moves, on the two-surface model — see emcn's `chipHoverSurfaceClass`.
  *
  * Height, horizontal padding, weight and color are additionally pinned in
  * `global.css` (`html #nd-sidebar a…`), which needs `!important` to beat
@@ -52,40 +53,33 @@ function isActive(url: string, pathname: string, nested = true): boolean {
  * the stylesheet is what actually lands on desktop.
  */
 const ITEM_BASE =
-  'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-[var(--text-body)] text-sm transition-colors hover:bg-[var(--surface-active)]'
-const ITEM_ACTIVE_MOBILE = 'bg-[var(--surface-active)]'
+  'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-[var(--text-body)] text-sm transition-colors'
+const ITEM_ACTIVE_MOBILE = chipActiveSurfaceClass
 
 const ITEM_DESKTOP =
   'lg:mb-[0.0625rem] lg:block lg:rounded-lg lg:px-2 lg:font-normal lg:text-sm lg:leading-tight'
 const ITEM_TEXT = 'lg:text-[var(--text-body)]'
-const ITEM_HOVER = 'lg:hover:bg-[var(--surface-active)]'
-const ITEM_ACTIVE =
-  'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)] lg:hover:bg-[var(--surface-6)]'
+/**
+ * Unprefixed, and applied only to inactive rows — an unconditional hover in
+ * `ITEM_BASE` would fade the current page under the pointer below `lg`.
+ */
+const ITEM_HOVER = chipHoverSurfaceClass
+const ITEM_ACTIVE = 'lg:bg-[var(--surface-active)] lg:font-normal lg:text-[var(--text-body)]'
 
 const FOLDER_TEXT = 'lg:text-[var(--text-body)] lg:font-normal'
-const FOLDER_HOVER = 'lg:hover:bg-[var(--surface-active)]'
-const FOLDER_ACTIVE =
-  'lg:bg-[var(--surface-active)] lg:text-[var(--text-body)] lg:hover:bg-[var(--surface-6)]'
+const FOLDER_HOVER = chipHoverSurfaceClass
+const FOLDER_ACTIVE = 'lg:bg-[var(--surface-active)] lg:text-[var(--text-body)]'
+
+const itemClass = (active: boolean) =>
+  cn(ITEM_BASE, ITEM_DESKTOP, ITEM_TEXT, active ? cn(ITEM_ACTIVE_MOBILE, ITEM_ACTIVE) : ITEM_HOVER)
 
 export function SidebarItem({ item }: { item: Item }) {
   const pathname = usePathname()
   const { prefetch } = useSidebar()
   const active = isActive(item.url, pathname, false)
 
   return (
-    <Link
-      href={item.url}
-      prefetch={prefetch}
-      data-active={active}
-      className={cn(
-        ITEM_BASE,
-        active && ITEM_ACTIVE_MOBILE,
-        ITEM_DESKTOP,
-        ITEM_TEXT,
-        !active && ITEM_HOVER,
-        active && ITEM_ACTIVE
-      )}
-    >
+    <Link href={item.url} prefetch={prefetch} data-active={active} className={itemClass(active)}>
       {item.name}
     </Link>
   )
@@ -119,14 +113,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
         href={item.index.url}
         prefetch={prefetch}
         data-active={active}
-        className={cn(
-          ITEM_BASE,
-          active && ITEM_ACTIVE_MOBILE,
-          ITEM_DESKTOP,
-          ITEM_TEXT,
-          !active && ITEM_HOVER,
-          active && ITEM_ACTIVE
-        )}
+        className={itemClass(active)}
       >
         {item.name}
       </Link>
@@ -144,12 +131,10 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
               data-active={active}
               className={cn(
                 'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
-                'text-[var(--text-body)] hover:bg-[var(--surface-active)]',
-                active && ITEM_ACTIVE_MOBILE,
+                'text-[var(--text-body)]',
                 'lg:block lg:flex-1 lg:rounded-lg lg:px-2 lg:text-sm lg:leading-tight',
                 FOLDER_TEXT,
-                !active && FOLDER_HOVER,
-                active && FOLDER_ACTIVE
+                active ? cn(ITEM_ACTIVE_MOBILE, FOLDER_ACTIVE) : FOLDER_HOVER
               )}
             >
               {item.name}
@@ -158,8 +143,8 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
               <button
                 onClick={toggleOpen}
                 className={cn(
-                  'rounded-md p-1 hover:bg-[var(--surface-active)]',
-                  'lg:cursor-pointer lg:rounded-md lg:p-1 lg:transition-colors lg:hover:bg-[var(--surface-active)]'
+                  'rounded-md p-1 transition-colors lg:cursor-pointer',
+                  chipHoverSurfaceClass
                 )}
                 aria-label={open ? 'Collapse' : 'Expand'}
               >
@@ -172,7 +157,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
             onClick={toggleOpen}
             className={cn(
               'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
-              'text-[var(--text-body)] hover:bg-[var(--surface-active)]',
+              'text-[var(--text-body)]',
               'lg:flex lg:w-full lg:cursor-pointer lg:items-center lg:justify-between lg:rounded-lg lg:px-2 lg:text-left lg:text-sm lg:leading-tight',
               FOLDER_TEXT,
               FOLDER_HOVER

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx

@@ -1,5 +1,12 @@
 'use client'
-import { ChevronDown, cn, Home, Library } from '@sim/emcn'
+import {
+  ChevronDown,
+  chipActiveSurfaceClass,
+  chipHoverSurfaceClass,
+  cn,
+  Home,
+  Library,
+} from '@sim/emcn'
 import { Database, File, HelpCircle, Search, Settings, Table, Workflow } from '@sim/emcn/icons'
 import type { PreviewWorkflow } from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
 
@@ -51,8 +58,8 @@ function NavItem({
       type='button'
       onClick={onClick}
       className={cn(
-        'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[var(--c-active)]',
-        isActive && 'bg-[var(--c-active)]'
+        'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors',
+        isActive ? chipActiveSurfaceClass : chipHoverSurfaceClass
       )}
     >
       <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
@@ -77,10 +84,7 @@ export function LandingPreviewSidebar({
   const isHomeActive = activeView === 'home'
 
   return (
-    <div
-      className='flex h-full w-[248px] flex-shrink-0 flex-col bg-[var(--surface-1)] pt-3'
-      style={{ '--c-active': 'var(--surface-active)' } as React.CSSProperties}
-    >
+    <div className='flex h-full w-[248px] flex-shrink-0 flex-col bg-[var(--surface-1)] pt-3'>
       {/* Workspace Header */}
       <div className='flex-shrink-0 px-2.5'>
         <div className='pointer-events-none flex h-[32px] w-full items-center gap-2 rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] pr-2 pl-[5px]'>
@@ -107,8 +111,8 @@ export function LandingPreviewSidebar({
           type='button'
           onClick={onSelectHome}
           className={cn(
-            'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[var(--c-active)]',
-            isHomeActive && 'bg-[var(--c-active)]'
+            'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors',
+            isHomeActive ? chipActiveSurfaceClass : chipHoverSurfaceClass
           )}
         >
           <Home className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
@@ -151,8 +155,8 @@ export function LandingPreviewSidebar({
                   type='button'
                   onClick={() => onSelectWorkflow(workflow.id)}
                   className={cn(
-                    'mx-0.5 flex h-[28px] w-full items-center gap-2 rounded-[8px] px-2 transition-colors hover-hover:bg-[var(--surface-active)]',
-                    isActive && 'bg-[var(--surface-active)]'
+                    'mx-0.5 flex h-[28px] w-full items-center gap-2 rounded-[8px] px-2 transition-colors',
+                    isActive ? chipActiveSurfaceClass : chipHoverSurfaceClass
                   )}
                 >
                   <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />

apps/sim/app/_styles/globals.css

@@ -22,6 +22,18 @@
   --panel-width: 320px; /* PANEL_WIDTH.DEFAULT */
   --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
   --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
+  /**
+   * The padding `.workspace-content-shell` insets the panel and terminal from
+   * the viewport by (CONTENT_WINDOW_GAP).
+   *
+   * Published here because surfaces portalled to `<body>` — the toast stack —
+   * position against those elements from the viewport, so they must add back
+   * whatever separates the element from the viewport edge. Reading it rather
+   * than hardcoding 8px is what keeps the toast and the canvas controls on the
+   * same clearance when the shell drops its padding; the controls are laid out
+   * inside the shell and so need no correction.
+   */
+  --workspace-content-gap: 8px;
   --output-panel-width: 560px; /* OUTPUT_PANEL_WIDTH.DEFAULT */
   /**
    * Neutral border and divider thickness. Standard-density displays cannot draw
@@ -162,6 +174,14 @@ html[data-sim-desktop-title-bar="inset"]
   --workspace-content-title-bar-inset: var(--desktop-title-bar-height);
 }
 
+/* The one case the shell drops its padding entirely (see `workspace-chrome.tsx`:
+   `isCollapsed && '[[data-sim-desktop-title-bar=inset]_&]:p-0'`). Declared on the
+   root so the portalled toast stack — which cannot inherit from the shell — sees
+   it too, and keeps the same clearance the in-shell canvas controls keep. */
+html[data-sim-desktop-title-bar="inset"]:has(.workspace-content-shell[data-sidebar-collapsed]) {
+  --workspace-content-gap: 0px;
+}
+
 .workspace-root code,
 .workspace-root kbd,
 .workspace-root samp,

apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useRef, useState } from 'react'
-import { cn, Tooltip } from '@sim/emcn'
+import { chipActiveSurfaceClass, chipHoverSurfaceClass, cn, Tooltip } from '@sim/emcn'
 import { ArrowUp, ChevronDown, ChevronRight, Paperclip, Pencil, Trash, X } from '@sim/emcn/icons'
 import { UserMessageContent } from '@/app/workspace/[workspaceId]/home/components/user-message-content'
 import type { QueuedMessage } from '@/app/workspace/[workspaceId]/home/types'
@@ -54,7 +54,10 @@ export function QueuedMessages({
       <button
         type='button'
         onClick={() => setIsExpanded(!isExpanded)}
-        className='flex w-full items-center gap-1.5 px-3.5 py-2 transition-colors hover-hover:bg-[var(--surface-active)]'
+        className={cn(
+          'flex w-full items-center gap-1.5 px-3.5 py-2 transition-colors',
+          chipHoverSurfaceClass
+        )}
       >
         {isExpanded ? (
           <ChevronDown className='size-[14px] text-[var(--text-icon)]' />
@@ -75,8 +78,8 @@ export function QueuedMessages({
               <div
                 key={msg.id}
                 className={cn(
-                  'flex items-center gap-2 py-1.5 pr-2 pl-3.5 transition-colors hover-hover:bg-[var(--surface-active)]',
-                  isEditing && 'bg-[var(--surface-active)]'
+                  'flex items-center gap-2 py-1.5 pr-2 pl-3.5 transition-colors',
+                  isEditing ? chipActiveSurfaceClass : chipHoverSurfaceClass
                 )}
               >
                 <div className='flex size-[16px] shrink-0 items-center justify-center'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   Badge,
-  Button,
+  Chip,
   ChipCombobox,
   ChipInput,
   type ComboboxOption,
@@ -506,9 +506,9 @@ export function McpDeploy({
           <p className='text-[var(--text-muted)] text-small'>
             Create an MCP Server to expose your workflows as tools.
           </p>
-          <Button variant='tertiary' onClick={() => setShowCreateModal(true)}>
+          <Chip variant='primary' onClick={() => setShowCreateModal(true)}>
             Create MCP Server
-          </Button>
+          </Chip>
         </div>
         <CreateWorkflowMcpServerModal
           open={showCreateModal}