refactor(ui): centralize overlay action buttons in EMCN

[BillLeoutsakosvl346]

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]

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

Project	Deployment	Actions	Updated
docs	Ready	Preview	Sep 22, 2026 8:30pm UTC

[greptile-apps]

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]

Loading

_{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]

@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]

@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]

@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]

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]

@greptile

[BillLeoutsakosvl346]

@cubic-dev-ai review this PR

[cubic-dev-ai]

@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]

@greptile

[BillLeoutsakosvl346]

@cubic-dev-ai review this PR

[cubic-dev-ai]

@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]

@greptile

[BillLeoutsakosvl346]

@cubic-dev-ai review this PR

[cubic-dev-ai]

@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}