Skip to content

refactor(ui): use native terminal row buttons - #8263

Merged
waleedlatif1 merged 4 commits into
stagingfrom
codex/emcn-next-terminal-rows
Sep 25, 2026
Merged

waleedlatif1 merged 4 commits into
stagingfrom
codex/emcn-next-terminal-rows

Conversation

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor

Summary

  • Replace terminal log rows' role-based divs with native buttons while reusing their EMCN chip treatment.
  • Keep selection, expansion, status, and block tile visuals; use inline descendants so button markup stays valid.

Type of Change

  • Improvement

Testing

  • Terminal row tests: 4 passed; shared block tile tests: 7 passed.
  • App, workflow-renderer, and EMCN type checks and Biome passed.
  • Local design diff 3.10.7: no confirmed findings; one reviewed local-control advisory for the feature-owned row button.
  • Matched light and dark captures at 16px and 20px root text: idle, focus, Enter, and Space states are pixel-identical below the fixture label.

Checklist

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

@vercel

vercel Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

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

1 Skipped Deployment
Project Deployment Actions Updated
docs Skipped Skipped Sep 24, 2026 8:09pm UTC

Request Review

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@greptile

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@cubic-dev-ai review this PR

@cubic-dev-ai

cubic-dev-ai Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

@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 cubic-dev-ai Bot left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 9 files

Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic

@cubic-dev-ai cubic-dev-ai Bot left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

All reported issues were addressed across 9 files

Requires human review: Auto-approval blocked by 1 unresolved issue from a previous review of this commit.

Re-trigger cubic

@greptile-apps

greptile-apps Bot commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

RetriggerConfidence Score: 5/5

The PR appears safe to merge; no outstanding findings remain.

Summary

Replaces terminal log rows with native buttons while preserving selection, disclosure, status, and tile presentation. Updates the shared tile renderer to support inline button content and adds rendering and interaction tests.

Reviews (3) · Last reviewed commit: "fix(terminal): identify current output w..."

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@greptile

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@cubic-dev-ai review this PR

@cubic-dev-ai

cubic-dev-ai Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

@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 cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

No issues found across 9 files

Confidence score: 5/5

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

Re-trigger cubic

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@greptile

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@cubic-dev-ai review this PR

@cubic-dev-ai

cubic-dev-ai Bot commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

@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 cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

No issues found across 9 files

Confidence score: 5/5

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

Re-trigger cubic

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

Visual and interaction review: native terminal rows

Change. Terminal output rows use a native button through TerminalRowButton. It preserves the EMCN chip surface, block tile, labels, status badge, selection, and disclosure behavior. Native Enter/Space activation replaces the hand-written role='button' keyboard handler. The selected output is marked with aria-current; inline span tile/status markup keeps button contents valid.

Representative source excerpts from the block row:

Before

<div
  data-entry-id={entry.id}
  role='button'
  tabIndex={0}
  className={isSelected ? ROW_STYLES.rowSelected : ROW_STYLES.row}
  onClick={(e) => {
    e.stopPropagation()
    onSelect(entry)
  }}
  onKeyDown={(event) =>
    handleKeyboardActivation(event, () => onSelect(entry), { stopPropagation: true })
  }
>

After

<TerminalRowButton
  data-entry-id={entry.id}
  selected={isSelected}
  onClick={() => onSelect(entry)}
>

Images. These are isolated source-derived terminal-row fixtures, not a running workflow terminal. The Before side recreates the staged row markup and the After side renders TerminalRowButton with the real tile and status recipes. Four row kinds are shown. The later PR commits added aria-current and tests without changing these visual classes; separate focused tests cover the semantic and keyboard behavior.

Idle state Before After
Light, 16px root Terminal rows before, light 16px Terminal rows after, light 16px
Dark, 16px root Terminal rows before, dark 16px Terminal rows after, dark 16px
Light, 20px root Terminal rows before, light 20px Terminal rows after, light 20px
Dark, 20px root Terminal rows before, dark 20px Terminal rows after, dark 20px

@waleedlatif1
waleedlatif1 merged commit e6e3a1f into staging Sep 25, 2026
37 checks passed
@waleedlatif1
waleedlatif1 deleted the codex/emcn-next-terminal-rows branch September 25, 2026 00:09

This branch was previously deployed

1 inactive deployment
Preview — 3732bad2 Deployed Sep 24, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants