refactor(ui): centralize overlay action buttons in EMCN by BillLeoutsakosvl346 · Pull Request #7990 · simstudioai/sim

BillLeoutsakosvl346 · 2026-09-18T22:53:48Z

Summary

Nine product Copy, Search and Expand buttons repeat transparent overlay styling in log details, workflow previews and the deployment preview. Add EMCN OverlayActionButton, built on the existing Button, and migrate all nine locations across four consumer files.

The component owns its 20px/28px geometry, border, background blur and one adaptive hover treatment: surface-3 in light mode and surface-5 in dark mode. The four workflow-preview actions previously used surface-4 on hover; their hover fill changes from #f5f5f5 to #f7f7f7 in light mode and #292929 to #363636 in dark mode. Resting appearance, sizes, corners and behavior stay unchanged. The canonical --border token replaces its equivalent --border-1 alias.

Product code keeps positioning, icons, copy feedback, tooltips, labels and handlers. The specialized component excludes inherited styling props that cannot meaningfully affect its geometry. Existing Button, landing pages and global CSS are unchanged. Audit tooling and screenshots remain outside this PR.

Validation

346 EMCN tests pass across 33 suites, including both preserved adaptive sizes, native ref/prop/event forwarding, tooltip composition and disabled clicks.
All 26 workspace type checks and lint checks, API validation, import-specifier checks and diff checks pass.
Light/dark browser checks of the real components with compiled application CSS confirm the intended hover colors and unchanged 20px geometry and 5px corners. Matching screenshots and 3× crops are saved externally; this is isolated component coverage, not full product navigation.
Product searches find no remaining old overlay recipes or retired overlay surface props. The initial category migration removed all 52 targeted findings; unrelated audit findings remain outside this change.

vercel · 2026-09-18T22:53:56Z

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

Project	Deployment	Actions	Updated
docs	Ready	Preview	Sep 24, 2026 10:18pm UTC

greptile-apps · 2026-09-18T22:56:38Z

Confidence Score: 5/5

The PR appears safe to merge; no outstanding correctness, security, or repository-rule issue remains.

Summary

Centralizes nine overlay controls behind a reusable EMCN OverlayActionButton.

Adds adaptive 20px and 28px variants with shared border, blur, and hover styling.
Migrates copy, search, and preview-expansion controls while retaining their positioning, labels, icons, tooltips, and handlers.
Exports the component and adds focused coverage for appearance, prop/ref forwarding, tooltip composition, keyboard events, and disabled behavior.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  OAB[EMCN OverlayActionButton]
  OAB --> LD[Log detail copy/search actions]
  OAB --> TV[Trace view copy/search actions]
  OAB --> PE[Workflow preview copy/search actions]
  OAB --> DP[Deployment preview expand action]

_{Reviews (6) · Last reviewed commit: "refactor(ui): centralize overlay action ..."}

cubic-dev-ai

No issues found across 6 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-18T23:07:39Z

@greptileai please re-review PR #7990 at commit 7a463bc. Added four focused OverlayActionButton test cases following the existing action-button conventions: the three migrated appearances (both sizes and hover treatments, with Button class precedence), plus native ref/prop/event forwarding through Tooltip and disabled-click suppression. All 347 EMCN tests, type checks, repository lint and API validation pass. Runtime source is unchanged.

BillLeoutsakosvl346 · 2026-09-19T19:58:58Z

@greptileai @cubic-dev-ai Please review the current head. The requested overlay-button test coverage is present and all three focused tests pass.

cubic-dev-ai · 2026-09-19T19:59:05Z

@greptileai @cubic-dev-ai Please review the current head. The requested overlay-button test coverage is present and all three focused tests pass.

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 7 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-21T17:57:03Z

Before / after visual comparison

Copy, copied, search and preview overlay actions reuse the common Button treatment.

Within each numbered tile: first control = before; second control = after.

Rendered component fixtures with application CSS and local data, rather than authenticated product-page screenshots. These are representative visual examples, not end-to-end behavior coverage.

Current PR head checked at posting: f1e45e4288.

Additional theme/state comparisons

BillLeoutsakosvl346 · 2026-09-22T19:59:33Z

@greptile

BillLeoutsakosvl346 · 2026-09-22T19:59:34Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-09-22T19:59:39Z

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 7 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-22T20:28:25Z

@greptile

BillLeoutsakosvl346 · 2026-09-22T20:28:26Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-09-22T20:28:32Z

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 7 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

BillLeoutsakosvl346 · 2026-09-22T20:48:51Z

@greptile

BillLeoutsakosvl346 · 2026-09-22T20:48:52Z

@cubic-dev-ai review this PR

cubic-dev-ai · 2026-09-22T20:48:57Z

@cubic-dev-ai review this PR

@BillLeoutsakosvl346 I have started the AI code review. It will take a few minutes to complete.

cubic-dev-ai

No issues found across 7 files

Confidence score: 5/5

Automated review surfaced no issues in the provided summaries.
No files require special attention.

_{Re-trigger cubic}

* improvement(ui): share workflow preview actions * improvement(ui): reuse inline and overlay workflow actions * refactor(emcn): share Code.Viewer appearances (#8238) * Add shared Code.Viewer appearances for product surfaces * Test flat virtualized Code.Viewer terminal chrome --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * Share table sidebar shell and scroll body (#8249) * Share table sidebar shell and scroll body * test(tables): cover shared sidebar dialog state * test(tables): preserve sidebar scroll state --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * Keep workflow preview values readable (#8256) * fix(ui): keep preview values readable and restore version tint * fix(ui): keep preview file actions inert --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com>

* improvement(emcn): share ordinary action geometry in Button * improvement(ui): share additional-field disclosures * fix(ui): preserve tiny actions and use shared sidebar geometry * improvement(ui): use shared geometry for standard icon actions (#8153) Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * refactor(ui): centralize overlay action buttons in EMCN (#7990) * refactor(ui): centralize overlay action buttons in EMCN * improvement(ui): share workflow preview actions (#8065) * improvement(ui): share workflow preview actions * improvement(ui): reuse inline and overlay workflow actions * refactor(emcn): share Code.Viewer appearances (#8238) * Add shared Code.Viewer appearances for product surfaces * Test flat virtualized Code.Viewer terminal chrome --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * Share table sidebar shell and scroll body (#8249) * Share table sidebar shell and scroll body * test(tables): cover shared sidebar dialog state * test(tables): preserve sidebar scroll state --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * Keep workflow preview values readable (#8256) * fix(ui): keep preview values readable and restore version tint * fix(ui): keep preview file actions inert --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com> --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Waleed <walif6@gmail.com> * improvement(ui): reuse shared button and focus treatments (#8187) * improvement(ui): reuse shared button and focus treatments * fix(emcn): include outline reset in muted focus ring * fix(ui): make closed table sidebars inert and strengthen focus ring * Carry code search overlay into the live EMCN stack (#8275) * refactor(ui): share code search overlay controls * refactor(emcn): own compact code search field chrome * test(ui): cover floating compact code search * refactor(emcn): compose compact search from shared chip surface --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> * fix(ui): announce code search result changes * docs(ui): describe shared table sidebar exports --------- Co-authored-by: Bill Leoutsakos <billleoutsakos@Bills-MacBook-Pro.local> Co-authored-by: Codex <codex@openai.com> Co-authored-by: Waleed <walif6@gmail.com>

vercel Bot deployed to Preview September 18, 2026 22:55 View deployment

greptile-apps Bot reviewed Sep 18, 2026

View reviewed changes

Comment thread packages/emcn/src/components/overlay-action-button/overlay-action-button.tsx

cubic-dev-ai Bot reviewed Sep 18, 2026

View reviewed changes

vercel Bot deployed to Preview September 18, 2026 23:09 View deployment

vercel Bot deployed to Preview September 19, 2026 16:38 View deployment

cubic-dev-ai Bot reviewed Sep 19, 2026

View reviewed changes

BillLeoutsakosvl346 changed the base branch from staging to codex/control-fix-field-disclosures September 22, 2026 19:59

BillLeoutsakosvl346 force-pushed the codex/control-fix-overlay-action-buttons branch from f1e45e4 to e5c205a Compare September 22, 2026 19:59

vercel Bot deployed to Preview September 22, 2026 20:01 View deployment

cubic-dev-ai Bot reviewed Sep 22, 2026

View reviewed changes

refactor(ui): centralize overlay action buttons in EMCN

9c2953d

BillLeoutsakosvl346 force-pushed the codex/control-fix-overlay-action-buttons branch from e5c205a to 9c2953d Compare September 22, 2026 20:28

vercel Bot deployed to Preview September 22, 2026 20:30 View deployment

cubic-dev-ai Bot reviewed Sep 22, 2026

View reviewed changes

greptile-apps Bot reviewed Sep 22, 2026

View reviewed changes

Comment thread packages/emcn/src/components/overlay-action-button/overlay-action-button.test.tsx

cubic-dev-ai Bot reviewed Sep 22, 2026

View reviewed changes

vercel Bot deployed to Preview September 24, 2026 22:18 View deployment

BillLeoutsakosvl346 merged commit f64118f into codex/control-fix-field-disclosures Sep 24, 2026
6 checks passed

waleedlatif1 deleted the codex/control-fix-overlay-action-buttons branch September 24, 2026 23:57

Conversation

BillLeoutsakosvl346 commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Validation

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Confidence Score: 5/5

Summary

Uh oh!

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

BillLeoutsakosvl346 commented Sep 18, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 19, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

BillLeoutsakosvl346 commented Sep 21, 2026

Before / after visual comparison

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

BillLeoutsakosvl346 commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot commented Sep 22, 2026

Uh oh!

cubic-dev-ai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

BillLeoutsakosvl346 commented Sep 18, 2026 •

edited

Loading

vercel Bot commented Sep 18, 2026 •

edited

Loading

greptile-apps Bot commented Sep 18, 2026 •

edited

Loading