@@ -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.
 
@@ -518,15 +518,10 @@ html #nd-sidebar button[data-active="true"] {
   color: var(--text-body) !important;
 }
 
-/* Hover state — the app's nav Chip hovers to --surface-hover, one step below the
-   --surface-active it paints the current page with, so the row under the pointer
-   never impersonates the selected one. 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.
-
-   The :not([data-active]) guard is what holds the active row at --surface-active
-   through hover, matching the app's active Chip: hover names what you would open,
-   and on the page already open there is nothing to name. */
+/* 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-hover) !important;
 
@@ -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,10 +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-hover` under the pointer and `--surface-active` when the
- * row is the page you are on. The active row keeps that surface through hover,
- * matching `chipVariants`: hover says what you would open, and on the page you
- * already have open there is nothing to say.
+ * 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
@@ -56,44 +54,32 @@ function isActive(url: string, pathname: string, nested = true): boolean {
  */
 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'
-const ITEM_ACTIVE_MOBILE = 'bg-[var(--surface-active)]'
+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)]'
-/*
- * Unprefixed, and applied only when the row is inactive. It used to live in
- * `ITEM_BASE` at every width, which was harmless only while hover and active
- * painted the same surface; now that hover is the dimmer of the two, an
- * unconditional hover would make the current page fade under the pointer on any
- * viewport below `lg`.
+/**
+ * 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 = 'hover:bg-[var(--surface-hover)]'
+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 = 'hover:bg-[var(--surface-hover)]'
+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>
   )
@@ -127,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>
@@ -153,11 +132,9 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
               className={cn(
                 'flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
                 'text-[var(--text-body)]',
-                active && ITEM_ACTIVE_MOBILE,
                 '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}
@@ -166,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-hover)]',
-                  'lg:cursor-pointer lg:rounded-md lg:p-1 lg:transition-colors'
+                  'rounded-md p-1 transition-colors lg:cursor-pointer',
+                  chipHoverSurfaceClass
                 )}
                 aria-label={open ? 'Collapse' : 'Expand'}
               >
 
@@ -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'
 
@@ -52,7 +59,7 @@ function NavItem({
       onClick={onClick}
       className={cn(
         'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors',
-        isActive ? 'bg-[var(--c-active)]' : 'hover-hover:bg-[var(--c-hover)]'
+        isActive ? chipActiveSurfaceClass : chipHoverSurfaceClass
       )}
     >
       <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
@@ -77,15 +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)',
-          '--c-hover': 'var(--surface-hover)',
-        } 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]'>
@@ -113,7 +112,7 @@ export function LandingPreviewSidebar({
           onClick={onSelectHome}
           className={cn(
             'mx-0.5 flex h-[28px] items-center gap-2 rounded-[8px] px-2 transition-colors',
-            isHomeActive ? 'bg-[var(--c-active)]' : 'hover-hover:bg-[var(--c-hover)]'
+            isHomeActive ? chipActiveSurfaceClass : chipHoverSurfaceClass
           )}
         >
           <Home className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
@@ -157,9 +156,7 @@ export function LandingPreviewSidebar({
                   onClick={() => onSelectWorkflow(workflow.id)}
                   className={cn(
                     'mx-0.5 flex h-[28px] w-full items-center gap-2 rounded-[8px] px-2 transition-colors',
-                    isActive
-                      ? 'bg-[var(--surface-active)]'
-                      : 'hover-hover:bg-[var(--surface-hover)]'
+                    isActive ? chipActiveSurfaceClass : chipHoverSurfaceClass
                   )}
                 >
                   <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
 
@@ -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)]' />
@@ -76,7 +79,7 @@ export function QueuedMessages({
                 key={msg.id}
                 className={cn(
                   'flex items-center gap-2 py-1.5 pr-2 pl-3.5 transition-colors',
-                  isEditing ? 'bg-[var(--surface-active)]' : 'hover-hover:bg-[var(--surface-hover)]'
+                  isEditing ? chipActiveSurfaceClass : chipHoverSurfaceClass
                 )}
               >
                 <div className='flex size-[16px] shrink-0 items-center justify-center'>
 
@@ -5,6 +5,8 @@ import {
   Badge,
   Chip,
   ChipConfirmModal,
+  chipContentIconClass,
+  cn,
   Loader,
   Modal,
   ModalBody,
@@ -874,6 +876,9 @@ function GeneralFooter({
     </div>
   )
   const deployActionLoading = isSubmitting || isDeploymentSettling
+  const deployLoader = deployActionLoading ? (
+    <Loader className={cn(chipContentIconClass, 'text-current')} animate />
+  ) : null
 
   if (!isDeployed) {
     return (
@@ -884,7 +889,7 @@ function GeneralFooter({
             variant='primary'
             onClick={onDeploy}
             disabled={isDeployBlocked}
-            leftAdornment={deployActionLoading ? <Loader className='size-[14px]' animate /> : null}
+            leftAdornment={deployLoader}
           >
             Deploy
           </Chip>
@@ -905,7 +910,7 @@ function GeneralFooter({
             variant='primary'
             onClick={onRedeploy}
             disabled={isDeployBlocked}
-            leftAdornment={deployActionLoading ? <Loader className='size-[14px]' animate /> : null}
+            leftAdornment={deployLoader}
           >
             Update
           </Chip>
 
@@ -1,8 +1,8 @@
 'use client'
 
 import { memo } from 'react'
+import { chipIconSlotClass, cn } from '@sim/emcn'
 import { WorkflowTypeIcon } from '@sim/workflow-renderer'
-import clsx from 'clsx'
 import {
   getBlockColor,
   getBlockIcon,
@@ -14,12 +14,7 @@ export interface EntryBlockTileProps {
   blockType: string
 }
 
-/**
- * A log row's block tile.
- *
- * Accented through the canvas's own derivation, so a row reads as the card it
- * ran from rather than as a second, unrelated colour scheme.
- */
+/** A log row's block tile. @see getEntryAccentType */
 export const EntryBlockTile = memo(function EntryBlockTile({ blockType }: EntryBlockTileProps) {
   const BlockIcon = getBlockIcon(blockType)
   const bgColor = getBlockColor(blockType)
@@ -31,10 +26,10 @@ export const EntryBlockTile = memo(function EntryBlockTile({ blockType }: EntryB
 
   return (
     <div
-      className='flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full'
+      className={cn(chipIconSlotClass, 'overflow-hidden rounded-md [&_img]:size-full')}
       style={{ background: bgColor }}
     >
-      {BlockIcon && <BlockIcon className={clsx('size-[10px]', getTileIconColorClass(bgColor))} />}
+      {BlockIcon && <BlockIcon className={cn('size-[10px]', getTileIconColorClass(bgColor))} />}
     </div>
   )
 })
@@ -11,7 +11,14 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Badge, ChevronDown, chipContentGap, cn, disclosureChevronClass } from '@sim/emcn'
+import {
+  Badge,
+  ChevronDown,
+  chipGeometryClass,
+  chipHoverSurfaceClass,
+  cn,
+  disclosureChevronClass,
+} from '@sim/emcn'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import { isUserFileDisplayMetadata } from '@/lib/core/utils/user-file'
 import {
@@ -25,7 +32,6 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
 
 type ValueType = 'null' | 'undefined' | 'array' | 'string' | 'number' | 'boolean' | 'object'
-type BadgeVariant = 'gray-secondary' | 'red'
 
 interface NodeEntry {
   key: string
@@ -56,34 +62,25 @@ const CONFIG = {
 } as const
 
 /**
- * The tag a value's type is announced with.
- *
- * One neutral form for every type, because the hue was never carrying the
- * information: the tag already spells the type out, and the value beside it
- * shows it again through quotes, digits or brackets. A colour per type was a
- * third encoding of a fact stated twice — and it was the expensive one, since
- * four saturated tags on every row left the one colour that means something in
- * this pane, the red of a failed value, competing with decoration instead of
- * being the only thing that stands out. Red stays; nothing else is coloured.
- *
- * Built from `--surface-4` / `--text-secondary` rather than the bespoke
- * `--badge-*` palette, so the tag ages with the platform's surface tokens.
+ * One neutral tag for every value type. Per-type hues re-encoded a fact the tag
+ * text and the value already state, and left red — the only signal that matters
+ * — competing with decoration. Red stays; nothing else is coloured.
  */
-const VALUE_TYPE_BADGE_VARIANT: BadgeVariant = 'gray-secondary'
+const VALUE_TYPE_BADGE_VARIANT = 'gray-secondary' as const
 
 /**
- * Styling constants for the output tree.
- *
- * A value row is the same chip as a log row on the left, and reuses the same
- * shared constants — the two panes sit side by side, so a key here reading in a
- * different grey from a block name there is immediately visible.
+ * Styling constants for the output tree — the same chip as a log row.
  *
- * `row` cannot take `chipGeometryClass` wholesale: a wrapped value grows past
- * one line, so it needs `min-h-[30px]` where a chip is fixed at `h-[30px]`. The
- * rest of the pill — radius, padding, gap, text size — is the chip's.
+ * `row` overrides the pill's fixed `h-[30px]` with `h-auto min-h-[30px]`: a
+ * wrapped value grows past one line.
  */
 const STYLES = {
-  row: `group flex min-h-[30px] cursor-pointer items-center ${chipContentGap} -mx-2 rounded-lg px-2 text-sm transition-colors hover-hover:bg-[var(--surface-hover)]`,
+  row: cn(
+    'group flex cursor-pointer transition-colors',
+    chipGeometryClass,
+    '-mx-2 h-auto min-h-[30px]',
+    chipHoverSurfaceClass
+  ),
   chevron: disclosureChevronClass,
   keyName: 'text-sm text-[var(--text-body)]',
   badge: BADGE_STYLE,