Skip to content

fix(app): calmer background shell pill - #59480

Merged
kitlangton merged 1 commit into
devfrom
shell-pill
Oct 28, 2026
Merged

kitlangton merged 1 commit into
devfrom
shell-pill

Conversation

@kitlangton

Copy link
Copy Markdown
Contributor

Hovering a background shell in the pill no longer draws a blue ring around the row.

The pill above the composer lists running background shells. Pointing at a row moves keyboard focus onto it, and the panel styled focus with the bright focus border, so a plain hover looked like a selected or broken row. Rows now get only the menu's usual quiet hover fill.

Origin: Kit's Scrawl capture of the pill (board card OCD-210).

Before: hovering the dev-server row draws a 2 px blue outline inside it.

before

After: the row shows the soft grey hover fill that every other menu uses.

after

- panel row :focus-visible / [data-state=focus]  →  outline: 2px solid border-focus
+ (removed: rows use menu.css's [data-highlighted] hover fill)

What clicking a row should do (today it jumps the chat to the shell call, which shows no output) is a separate decision: D-38 on the board.

Visual

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="72" viewBox="0 0 240 72" fill="none">
  <style>
    .ring{animation:ring 3s ease-in-out infinite}
    .fill{animation:fill 3s ease-in-out infinite}
    @keyframes ring{0%,40%{opacity:.9}55%,100%{opacity:0}}
    @keyframes fill{0%,40%{opacity:0}55%,100%{opacity:.12}}
    @media (prefers-reduced-motion:reduce){.ring,.fill{animation:none}.ring{opacity:0}.fill{opacity:.12}}
  </style>
  <rect x="20" y="10" width="200" height="40" rx="8" stroke="currentColor" stroke-opacity=".25"/>
  <rect class="fill" x="24" y="14" width="192" height="16" rx="4" fill="currentColor" opacity=".12"/>
  <rect class="ring" x="25" y="15" width="190" height="14" rx="4" stroke="currentColor" stroke-width="2" opacity="0"/>
  <rect x="30" y="20" width="110" height="4" rx="2" fill="currentColor" opacity=".7"/>
  <rect x="30" y="38" width="90" height="4" rx="2" fill="currentColor" opacity=".45"/>
  <rect x="20" y="56" width="40" height="12" rx="6" fill="currentColor" opacity=".3"/>
</svg>

Read: activity-chips.css. Checks: app typecheck and the activity chips component test pass. Argon review not run: no subagent tool in this session.

@opencode-agent opencode-agent 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.

The change looks sound. I read the code and ran the type check (tsc -b) and the activity elapsed browser test, both passing. I couldn't check it visually: there is no browser in the sandbox for the Playwright component spec.

Keyboard users still see which row is active, because the menu's [data-highlighted] fill shows for keyboard focus as well as hover. The stop button can't be reached by Tab (tabIndex={-1}), so dropping its ring doesn't matter. Other menus don't give their rows an outline either.

Public API: unchanged.

No concerns.

@thdxr
thdxr changed the base branch from beta to dev October 27, 2026 16:37
@kitlangton
kitlangton merged commit 6f80292 into dev Oct 28, 2026
20 checks passed
@kitlangton
kitlangton deleted the shell-pill branch October 28, 2026 20:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant