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

Author: waleedlatif1

apps/docs/app/global.css

@@ -518,19 +518,18 @@ 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 — 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. */
 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

@@ -43,7 +43,10 @@ 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, 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.
  *
  * Height, horizontal padding, weight and color are additionally pinned in
  * `global.css` (`html #nd-sidebar a…`), which needs `!important` to beat
@@ -52,20 +55,25 @@ 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)]'
+  '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_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 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`.
+ */
+const ITEM_HOVER = 'hover:bg-[var(--surface-hover)]'
+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 = 'hover:bg-[var(--surface-hover)]'
+const FOLDER_ACTIVE = 'lg:bg-[var(--surface-active)] lg:text-[var(--text-body)]'
 
 export function SidebarItem({ item }: { item: Item }) {
   const pathname = usePathname()
@@ -144,7 +152,7 @@ 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)]',
+                '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,
@@ -158,8 +166,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 hover:bg-[var(--surface-hover)]',
+                  'lg:cursor-pointer lg:rounded-md lg:p-1 lg:transition-colors'
                 )}
                 aria-label={open ? 'Collapse' : 'Expand'}
               >
@@ -172,7 +180,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

@@ -51,8 +51,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 ? 'bg-[var(--c-active)]' : 'hover-hover:bg-[var(--c-hover)]'
       )}
     >
       <Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
@@ -79,7 +79,12 @@ export function LandingPreviewSidebar({
   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}
+      style={
+        {
+          '--c-active': 'var(--surface-active)',
+          '--c-hover': 'var(--surface-hover)',
+        } as React.CSSProperties
+      }
     >
       {/* Workspace Header */}
       <div className='flex-shrink-0 px-2.5'>
@@ -107,8 +112,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 ? 'bg-[var(--c-active)]' : 'hover-hover:bg-[var(--c-hover)]'
           )}
         >
           <Home className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
@@ -151,8 +156,10 @@ 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
+                      ? 'bg-[var(--surface-active)]'
+                      : 'hover-hover:bg-[var(--surface-hover)]'
                   )}
                 >
                   <Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />

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

@@ -75,8 +75,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 ? 'bg-[var(--surface-active)]' : 'hover-hover:bg-[var(--surface-hover)]'
                 )}
               >
                 <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}

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

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from 'react'
 import {
   Badge,
-  Button,
+  Chip,
   ChipConfirmModal,
   Loader,
   Modal,
@@ -624,16 +624,14 @@ export function DeployModal({
             <ModalFooter className='items-center justify-between'>
               <div />
               <div className='flex items-center gap-2'>
-                <Button variant='default' onClick={() => setIsApiInfoModalOpen(true)}>
-                  Edit API Info
-                </Button>
-                <Button
-                  variant='tertiary'
+                <Chip onClick={() => setIsApiInfoModalOpen(true)}>Edit API Info</Chip>
+                <Chip
+                  variant='primary'
                   onClick={() => setIsCreateKeyModalOpen(true)}
                   disabled={createButtonDisabled}
                 >
                   Generate API Key
-                </Button>
+                </Chip>
               </div>
             </ModalFooter>
           )}
@@ -642,18 +640,13 @@ export function DeployModal({
               <div />
               <div className='flex items-center gap-2'>
                 {chatExists && (
-                  <Button
-                    type='button'
-                    variant='default'
-                    onClick={handleChatDelete}
-                    disabled={chatSubmitting}
-                  >
+                  <Chip type='button' onClick={handleChatDelete} disabled={chatSubmitting}>
                     Delete
-                  </Button>
+                  </Chip>
                 )}
-                <Button
+                <Chip
                   type='button'
-                  variant='tertiary'
+                  variant='primary'
                   onClick={handleChatFormSubmit}
                   disabled={chatSubmitting || !isChatFormValid}
                 >
@@ -668,17 +661,16 @@ export function DeployModal({
                       : chatExists
                         ? 'Update'
                         : 'Launch Chat'}
-                </Button>
+                </Chip>
               </div>
             </ModalFooter>
           )}
           {activeTab === 'mcp' && isDeployed && hasMcpServers && (
             <ModalFooter className='items-center justify-between'>
               <div />
               <div className='flex items-center gap-2'>
-                <Button
+                <Chip
                   type='button'
-                  variant='default'
                   onClick={() =>
                     navigateToSettings({
                       section: 'workflow-mcp-servers',
@@ -687,18 +679,18 @@ export function DeployModal({
                   }
                 >
                   Manage
-                </Button>
+                </Chip>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <span>
-                      <Button
+                      <Chip
                         type='button'
-                        variant='tertiary'
+                        variant='primary'
                         onClick={handleMcpToolFormSubmit}
                         disabled={mcpToolSubmitting || !mcpToolCanSave}
                       >
                         {mcpToolSubmitting ? 'Saving...' : 'Save Tool'}
-                      </Button>
+                      </Chip>
                     </span>
                   </Tooltip.Trigger>
                   {mcpToolSaveDisabledReason && (
@@ -888,10 +880,14 @@ function GeneralFooter({
       <ModalFooter className='items-center justify-between'>
         {status}
         <div className='flex items-center gap-2'>
-          <Button variant='tertiary' onClick={onDeploy} disabled={isDeployBlocked}>
-            {deployActionLoading && <Loader className='mr-1.5 size-3.5' animate />}
+          <Chip
+            variant='primary'
+            onClick={onDeploy}
+            disabled={isDeployBlocked}
+            leftAdornment={deployActionLoading ? <Loader className='size-[14px]' animate /> : null}
+          >
             Deploy
-          </Button>
+          </Chip>
         </div>
       </ModalFooter>
     )
@@ -901,14 +897,18 @@ function GeneralFooter({
     <ModalFooter className='items-center justify-between'>
       {status}
       <div className='flex items-center gap-2'>
-        <Button variant='default' onClick={onUndeploy} disabled={isUndeploying || isSubmitting}>
+        <Chip onClick={onUndeploy} disabled={isUndeploying || isSubmitting}>
           {isUndeploying ? 'Undeploying...' : 'Undeploy'}
-        </Button>
+        </Chip>
         {(needsRedeployment || isDeploymentSettling) && (
-          <Button variant='tertiary' onClick={onRedeploy} disabled={isDeployBlocked}>
-            {deployActionLoading && <Loader className='mr-1.5 size-3.5' animate />}
+          <Chip
+            variant='primary'
+            onClick={onRedeploy}
+            disabled={isDeployBlocked}
+            leftAdornment={deployActionLoading ? <Loader className='size-[14px]' animate /> : null}
+          >
             Update
-          </Button>
+          </Chip>
         )}
       </div>
     </ModalFooter>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/entry-block-tile/entry-block-tile.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { memo } from 'react'
+import { WorkflowTypeIcon } from '@sim/workflow-renderer'
+import clsx from 'clsx'
+import {
+  getBlockColor,
+  getBlockIcon,
+  getEntryAccentType,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils'
+import { getTileIconColorClass } from '@/blocks/icon-color'
+
+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.
+ */
+export const EntryBlockTile = memo(function EntryBlockTile({ blockType }: EntryBlockTileProps) {
+  const BlockIcon = getBlockIcon(blockType)
+  const bgColor = getBlockColor(blockType)
+  const accentType = getEntryAccentType(blockType)
+
+  if (BlockIcon && accentType) {
+    return <WorkflowTypeIcon type={accentType} Icon={BlockIcon} />
+  }
+
+  return (
+    <div
+      className='flex size-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-md [&_img]:size-full'
+      style={{ background: bgColor }}
+    >
+      {BlockIcon && <BlockIcon className={clsx('size-[10px]', getTileIconColorClass(bgColor))} />}
+    </div>
+  )
+})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/entry-block-tile/index.ts

@@ -0,0 +1 @@
+export { EntryBlockTile, type EntryBlockTileProps } from './entry-block-tile'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx

@@ -13,11 +13,11 @@ import {
 } from '@sim/emcn'
 import { ListFilter } from '@sim/emcn/icons'
 import clsx from 'clsx'
+import { EntryBlockTile } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/entry-block-tile'
 import type {
   BlockInfo,
   TerminalFilters,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
-import { getBlockIcon } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils'
 
 /**
  * Props for the FilterPopover component
@@ -94,7 +94,6 @@ export const FilterPopover = memo(function FilterPopover({
             <PopoverSection className='!mt-0'>Blocks</PopoverSection>
             <PopoverScrollArea className='max-h-[100px]'>
               {uniqueBlocks.map((block) => {
-                const BlockIcon = getBlockIcon(block.blockType)
                 const isSelected = filters.blockIds.has(block.blockId)
 
                 return (
@@ -104,7 +103,7 @@ export const FilterPopover = memo(function FilterPopover({
                     showCheck={isSelected}
                     onClick={() => toggleBlock(block.blockId)}
                   >
-                    {BlockIcon && <BlockIcon className='size-3' />}
+                    <EntryBlockTile blockType={block.blockType} />
                     <span className='flex-1'>{block.blockName}</span>
                   </PopoverItem>
                 )