improvement(ui): align terminal with the workflow design system, fix row hover states by waleedlatif1 · Pull Request #6534 · simstudioai/sim

waleedlatif1 · 2026-08-11T06:24:52Z

Summary

Terminal → workflow design system

Log-row block tiles now derive their colour the way the canvas does — semantic role accent for core blocks and subflows, provider colour only for role-less integrations. Previously every row painted the raw bgColor, so an Agent block was a purple swatch in the terminal and an inverse chip on the canvas.
Rows compose chipGeometryClass / chipContentLabelClass / disclosureChevronClass instead of re-deriving the pill; the output tree's greys now match the log rows, and it shares ROW_STYLES.nested + BADGE_STYLE instead of duplicating those literals.
Value-type badges go neutral so red is the only colour in the output tree — the hue was a third encoding of a fact the label and the value already state, and it was competing with the one colour that means something there.
Unified the row/separator gutter (they disagreed by 4px on the right edge), normalised icon sizes to size-[14px], dropped dead flattenEntryTree and the RunningBadge re-exports.

Row hover model (chipVariants, PopoverItem, Combobox, docs sidebar, terminal, landing preview, queued messages)

Hover now paints --surface-hover, one step below the --surface-active a selected row keeps. Hover used to land on --surface-active too, so a row the pointer merely passed over was painted exactly like the selected one.
An active row holds its surface through hover instead of brightening to --surface-6, which read as the selection changing under the cursor.
The two tokens were already named for this model; the code just wasn't using them that way. The resulting hover:selected strength ratio is ~0.65, which matches Material's 8%/12% state-layer spec.

Deploy modal

Footer actions moved onto the Chip family, primary action as Chip variant='primary', matching every other modal footer in the app. The spinner uses leftAdornment so the component owns the gap.

Type of Change

Improvement

Testing

Typecheck clean on apps/sim, apps/docs, packages/emcn, packages/workflow-renderer. Tests pass: emcn (62), workflow-renderer (62), terminal utils (22), panel + sidebar (174). Not visually verified — browser tooling was unavailable for this session, so the colour-relationship changes in particular are worth a look before merge.

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

…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

vercel · 2026-08-11T06:24:58Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview	Aug 11, 2026 7:24am

cursor · 2026-08-11T06:25:03Z

PR Summary

Medium Risk
Wide UI and foundational @sim/emcn chip tokens affect lists, terminal, toast positioning, and live resize behavior across the workspace; regressions are mostly visual/layout rather than data or auth.

Overview
This PR standardizes row hover vs. selected across the design system: inactive rows use --surface-hover, selected rows keep --surface-active without brightening on hover, via exported chipHoverSurfaceClass / chipActiveSurfaceClass wired into chipVariants, popovers, combobox options, docs sidebar, landing preview, queued messages, and workflow canvas controls.

Terminal and output log rows now compose chipVariants and shared chrome tokens; block tiles use new EntryBlockTile and getEntryAccentType so accents match the canvas toolbar. The structured output tree shares row styling and neutral value-type badges (errors stay red). Gutter alignment, size-[14px] icons, and small dead-code cleanup are included.

Workspace chrome: --workspace-content-gap on :root (0 when desktop shell drops padding) keeps the portalled toast stack aligned with in-shell controls; panel/terminal resize drags also update [data-toast-viewport] through useDragResize’s getExtraTargets. Canvas workflow controls move to bottom-3 / left-3 and surface-2.

Deploy modal footers switch from Button to Chip (primary for main actions, leftAdornment for loaders). MCP empty state uses Chip variant='primary'. EMCN docs/rules note the row-state pair for hand-rolled lists.

^{Reviewed by Cursor Bugbot for commit a13712c. Configure here.}

greptile-apps · 2026-08-11T06:27:53Z

Greptile Summary

The PR aligns terminal and row-state styling with shared EMCN design-system primitives while updating deploy actions and resize-related layout behavior.

Reuses canonical chip geometry, content, active, and hover classes across terminal rows, sidebars, comboboxes, popovers, and queued messages.
Derives terminal block-tile colors from semantic roles while retaining runtime provider colors for role-less integrations.
Migrates deploy-modal footer actions to the Chip family and removes obsolete terminal utilities and exports.
Updates workspace spacing variables and resize hooks to keep panels, terminal surfaces, controls, and toasts aligned.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
packages/emcn/src/components/chip/chip-chrome.ts	Adds canonical hover and active row-state classes for reuse across component and application surfaces.
apps/docs/components/docs-layout/sidebar-components.tsx	Replaces duplicated sidebar state colors with shared EMCN classes while keeping active and hover states mutually exclusive.
apps/docs/app/global.css	Keeps the required high-specificity Fumadocs override synchronized with the shared hover token and removes active-row brightening.
apps/sim/app/(landing)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx	Fully removes the previously flagged inline token aliases and uses canonical active and hover classes.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/entry-block-tile/entry-block-tile.tsx	Centralizes terminal block-tile rendering and preserves the permitted runtime provider-color fallback.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx	Reuses shared terminal row and tile styling instead of duplicating visual chrome.
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx	Migrates modal footer actions to the design-system Chip controls.
apps/sim/hooks/use-drag-resize.ts	Updates shared drag-resize behavior and CSS-variable handling for the revised panel and terminal layout.

_{Reviews (10): Last reviewed commit: "fix(toast): derive the workflow inset fr..." | Re-trigger Greptile}

…erminal 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

…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)

waleedlatif1 · 2026-08-11T06:47:48Z

@greptile

waleedlatif1 · 2026-08-11T06:47:53Z

@cursor review

…t 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.

waleedlatif1 · 2026-08-11T06:50:47Z

@greptile

waleedlatif1 · 2026-08-11T06:50:52Z

@cursor review

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.

waleedlatif1 · 2026-08-11T06:57:16Z

@greptile

waleedlatif1 · 2026-08-11T06:57:17Z

@cursor review

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.

waleedlatif1 · 2026-08-11T07:02:22Z

@greptile

waleedlatif1 · 2026-08-11T07:02:23Z

@cursor review

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.

waleedlatif1 · 2026-08-11T07:04:33Z

@greptile

waleedlatif1 · 2026-08-11T07:04:35Z

@cursor review

…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.

waleedlatif1 · 2026-08-11T07:06:32Z

@greptile

waleedlatif1 · 2026-08-11T07:06:34Z

@cursor review

…nsumers 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.

waleedlatif1 · 2026-08-11T07:09:39Z

@greptile

waleedlatif1 · 2026-08-11T07:09:40Z

@cursor review

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.

waleedlatif1 · 2026-08-11T07:14:46Z

@greptile

waleedlatif1 · 2026-08-11T07:14:47Z

@cursor review

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.

waleedlatif1 · 2026-08-11T07:20:20Z

@greptile

waleedlatif1 · 2026-08-11T07:20:26Z

@cursor review

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit a13712c. Configure here.}

greptile-apps Bot reviewed Aug 11, 2026

View reviewed changes

Comment thread apps/docs/app/global.css

Comment thread ...g)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx Outdated

vercel Bot deployed to Preview August 11, 2026 06:30 View deployment

waleedlatif1 added 2 commits August 10, 2026 23:45

vercel Bot temporarily deployed to Preview August 11, 2026 06:50 Inactive

vercel Bot temporarily deployed to Preview August 11, 2026 06:57 Inactive

cursor Bot reviewed Aug 11, 2026

View reviewed changes

Comment thread packages/emcn/src/components/combobox/combobox.tsx Outdated

vercel Bot temporarily deployed to Preview August 11, 2026 07:04 Inactive

vercel Bot temporarily deployed to Preview August 11, 2026 07:09 Inactive

cursor Bot reviewed Aug 11, 2026

View reviewed changes

Comment thread packages/emcn/src/components/toast/toast.tsx Outdated

vercel Bot deployed to Preview August 11, 2026 07:24 View deployment

waleedlatif1 mentioned this pull request Aug 11, 2026

v0.8.0: new workflow UI, v2 API, salesforce JWT, provenance improvements, incidentio tools, block retries #6533

Closed

waleedlatif1 merged commit 2f43148 into staging Aug 11, 2026
30 checks passed

waleedlatif1 deleted the improvement/terminal-design-alignment branch August 11, 2026 07:28

cursor Bot reviewed Aug 11, 2026

View reviewed changes

Uh oh!

Conversation

waleedlatif1 commented Aug 11, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

greptile-apps Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Uh oh!

Uh oh!

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

waleedlatif1 commented Aug 11, 2026

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Aug 11, 2026 •

edited

Loading

cursor Bot commented Aug 11, 2026 •

edited

Loading

greptile-apps Bot commented Aug 11, 2026 •

edited

Loading