GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — improvement(ui): align terminal with the workflow design system, fix row hover states by waleedlatif1 · Pull Request #6534 · simstudioai/sim

Conversation

@waleedlatif1

@waleedlatif1 waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator

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)

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction
@waleedlatif1
improvement(ui): align terminal with the workflow design system, fix …
2894a3d
…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

vercel Bot commented Aug 11, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown

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

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

Request Review

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@cursor

cursor Bot commented Aug 11, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown

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.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@greptile-apps

greptile-apps Bot commented Aug 11, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor

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

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

greptile-apps[bot]
greptile-apps Bot reviewed Aug 11, 2026
View reviewed changes
Comment thread apps/docs/app/global.css Resolved

Uh oh!

There was an error while loading. Please reload this page.

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

Uh oh!

There was an error while loading. Please reload this page.

@vercel
vercel Bot deployed to Preview August 11, 2026 06:30
View deployment
waleedlatif1 added 2 commits August 10, 2026 23:45
@waleedlatif1
improvement(emcn): extract the row-state surface pair, simplify the t…
559bebe
…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
@waleedlatif1
improvement(workflow): align canvas controls with the canvas surface …
8059c49
…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

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1
improvement(workflow): give the canvas-mode chevron the same treatmen…
bda4d98
…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.
@vercel
vercel Bot temporarily deployed to Preview August 11, 2026 06:50 Inactive
@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1
test(terminal): lock the log-row accent rule against the block toolbar
aa9e0c8
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.
@vercel
vercel Bot temporarily deployed to Preview August 11, 2026 06:57 Inactive
@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1
fix(workflow): make notifications track panel and terminal resize live
9ec7abb
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

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

cursor[bot]
cursor Bot reviewed Aug 11, 2026
View reviewed changes
Comment thread packages/emcn/src/components/combobox/combobox.tsx Resolved

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1
improvement(workflow): inset the canvas controls 8px off both edges
0835452
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.
@vercel
vercel Bot temporarily deployed to Preview August 11, 2026 07:04 Inactive
@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1
improvement(workflow): lift the canvas controls and toasts to a 12px …
9ffd45c
…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

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1
refactor(hooks): split the drag's resize target from its other var co…
252045b
…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.
@vercel
vercel Bot temporarily deployed to Preview August 11, 2026 07:09 Inactive
@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1
fix(emcn): stop the combobox cursor diverging from what Enter commits
77b0db9
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

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

cursor[bot]
cursor Bot reviewed Aug 11, 2026
View reviewed changes
Comment thread packages/emcn/src/components/toast/toast.tsx Resolved

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1
fix(toast): derive the workflow inset from the shell's actual padding
a13712c
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

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@greptile

greptile-apps[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1

waleedlatif1 commented Aug 11, 2026

Copy link
Copy Markdown
Collaborator Author

@cursor review

cursor[bot] reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@vercel
vercel Bot deployed to Preview August 11, 2026 07:24
View deployment
@waleedlatif1 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
waleedlatif1 merged commit 2f43148 into staging Aug 11, 2026
30 checks passed

Uh oh!

There was an error while loading. Please reload this page.

@waleedlatif1
waleedlatif1 deleted the improvement/terminal-design-alignment branch August 11, 2026 07:28
cursor[bot]
cursor Bot reviewed Aug 11, 2026
View reviewed changes

@cursor cursor Bot left a comment

Copy link
Copy Markdown

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
@waleedlatif1 waleedlatif1 mentioned this pull request Aug 12, 2026
v0.8.0: desktop app, workflow UI, v2 endpoints #6606
Merged

This branch was successfully deployed

1 active deployment
Preview — a13712cf Deployed Aug 11, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments
@cursor cursor[bot] cursor[bot] left review comments

Uh oh!

There was an error while loading. Please reload this page.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Uh oh!

There was an error while loading. Please reload this page.

1 participant

@waleedlatif1
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.