Skip to content

feat(app): add shell mode toggle button to v2 composer toolbar#33609

Open
dzianisv wants to merge 3 commits into
anomalyco:devfrom
dzianisv:shell-mode-button
Open

feat(app): add shell mode toggle button to v2 composer toolbar#33609
dzianisv wants to merge 3 commits into
anomalyco:devfrom
dzianisv:shell-mode-button

Conversation

@dzianisv

@dzianisv dzianisv commented Jun 24, 2026

Copy link
Copy Markdown

Issue for this PR

Closes #26513

Type of change

  • Bug fix
  • New feature
  • Refactor / code improvement
  • Documentation

What does this PR do?

Adds an explicit shell mode toggle button (console icon) to the v2 composer toolbar, making shell mode discoverable without requiring users to know the ! shortcut or Cmd+Shift+X keybind.

Changes:

  • Adds a console icon to the v2 icon sprite (packages/ui/src/v2/components/icon.tsx).
  • Inserts an IconButtonV2 shell mode toggle button in the v2 composer toolbar, between the attach (+) button and the agent picker.
  • Button uses data-state="pressed" + aria-pressed when shell mode is active.
  • Clicking toggles normal ↔ shell mode (same as ! / Cmd+Shift+X).
  • All existing entry points preserved (!, keybinds, Esc to exit).
  • Adds e2e/regression/prompt-shell-mode-button.spec.ts with 7 tests.

Tests

Test What it catches
button visible in v2 toolbar accidental removal
click enters shell mode aria-pressed, data-state="pressed", font-mono! class
second click exits shell mode toggle-off path
Escape exits shell mode keyboard parity
! shortcut parity button reflects keyboard-entry state
Ctrl+Shift+X keybind parity registered keybind still works
button absent in v1 layout no accidental v1 toolbar leakage

How did you verify your code works?

  • bun turbo typecheck — 24/24 packages pass.
  • Playwright regression spec covers all HIGH/MEDIUM findings from code review.

Checklist

  • I have tested my changes locally
  • I have not included unrelated changes in this PR

dzianisv added 3 commits June 24, 2026 07:03
Adds an explicit shell mode toggle button (console icon) to the v2
composer toolbar, making shell mode discoverable without requiring
users to know the '!' shortcut or Cmd+Shift+X keybind.

The button sits between the attach (+) button and the agent picker.
It toggles between normal and shell mode, rendering with a pressed
state indicator when shell mode is active.

Also adds the 'console' icon to the v2 icon sprite so it renders
consistently with other v2 toolbar icons.

Resolves: anomalyco#26513
Covers:
- button is visible in v2 composer toolbar
- button click enters shell mode (aria-pressed=true, font-mono class)
- second click exits shell mode
- Escape key exits shell mode entered via button
- existing '!' shortcut still works and button reflects state
- Add toBeFocused() wait before keyboard.press('!') and Ctrl+Shift+X
  to ensure focus is settled on the contenteditable before keydown
- Add v1 layout negative test: button must not appear when
  newLayoutDesigns is false (catches accidental v1 toolbar leakage)
- Add data-state='pressed' assertion alongside aria-pressed to verify
  the visual pressed state on IconButtonV2 is actually set
- Tighten font-mono class assertion to exact Tailwind class 'font-mono!'
  via toHaveAttribute('class', /font-mono!/) — avoids false substring matches
- Add Ctrl+Shift+X keybind test to verify the registered mod+shift+x
  shortcut still enters shell mode with button state parity
@dzianisv dzianisv force-pushed the shell-mode-button branch from 2a72ce8 to 33ae00a Compare June 24, 2026 07:04
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.

[FEATURE]: desktop - Introduce explicit Shell mode

1 participant