Refactor the right-panel shell tab close glyph from a hover-gated <span
onClick> to a real semantic <button> via the existing `closeButton` slot on
Tabs.Trigger (sibling-renders alongside the trigger, no nested-button HTML).
Adds the ARIA APG closable-tabs Delete pattern, focus management on close,
and a right-click context menu so screen-reader / keyboard users have a
discoverable close path beyond the global `mod+w` shortcut.

Driven by PR #878 review (consult with codex@xhigh). The thread argued for
either a focusable per-tab × button (B) or "ship as is, keyboard users use
mod+w" (A). Codex pointed out the established ARIA APG path: Delete on the
focused tab + context menu, with the close button itself not adding a Tab
stop. That's A+ — preserves the chromeless visual, gives AT users a proper
keyboard close, doesn't bloat the tab-strip Tab order.

Changes in this commit:

session-sortable-shell-tab.tsx
- Drop the `tab-icon-swap` span and the onClick hover guard entirely.
- Pass `closeButton={<IconButton ...>}` to Tabs.Trigger (sibling slot).
- IconButton is `tabIndex={-1}` + `aria-label="Close <label> tab"`; the
  trigger itself remains the focusable unit.
- `aria-keyshortcuts="Delete"` on the trigger + onKeyDown handler so
  Delete/Backspace on a focused closable trigger closes the tab.
- Focus management: before calling onClose, find the wrapper's next/prev
  sibling [data-slot="tabs-trigger-wrapper"] and `requestAnimationFrame`
  focus its [data-slot="tabs-trigger"] after Solid commits the removal —
  no focus loss to body.
- Right-click and Shift+F10 open a ContextMenu with "Close tab" (only on
  closable tabs; Status has no menu since it has no actions).
- Only pass `closeButton` when `props.closable`. Passing `<Show
  when={props.closable}>...</Show>` would still render an empty
  `[data-slot="tabs-trigger-close-button"]` div on Status (Tabs.Trigger's
  outer Show checks JSX truthiness, not the inner condition) — then the
  hover-swap CSS would fade Status's icon out with nothing to replace it.

tabs.css (sidepanel variant)
- Replace the previous `tab-icon-swap` opacity rules with the new positioning:
  - wrapper: `position: relative` (anchor for the absolute close slot).
  - default icon: hover-only opacity transition.
  - close button slot: `position: absolute; left: 10px; top: 50%` matching
    the trigger's leading-icon cell, 14x14, `opacity: 0; pointer-events: none`
    at rest; `opacity: 1; pointer-events: auto` on wrapper :hover.
- Intentionally NOT triggered on `:focus-within` — keyboard arrow nav across
  the tablist would otherwise flip every focused tab's icon to × on the way
  past. Keyboard users have Delete advertised via aria-keyshortcuts.

Verification:
- `bun run --filter=@opencode-ai/app typecheck` clean
- `bun run --filter=@opencode-ai/ui typecheck` clean
- `bun run --filter=@opencode-ai/app snap right-panel-titlebar` passes;
  resting visual identical to pre-refactor (icons visible at rest, × hidden).

Refs PR #878 reviewer's third P2 round.

CodeRabbit flagged the hardcoded `left: 10px` on the sidepanel
`[data-slot="tabs-trigger-close-button"]` slot as coupled to the
`px-2.5` trigger padding in session-sortable-shell-tab.tsx. Add a
maintainer note in the CSS comment block pointing at the TSX site so the
coupling is discoverable on edit. Keeping the cheap fix (comment) rather
than the larger one (lift the offset to a CSS custom property set from
the component) since the coupling is local to one variant.

Refs PR #878 CodeRabbit review.

The right-panel shell tab strip (Status / Files / Review) carried an
app-level override in packages/app/src/index.css that painted
var(--sidebar) on the selected trigger. This pre-dates PR #878 (the
override has been there since the phase-1 desktop port in PR #35) but
PR #878 reshaped the strip and surfaced the inconsistency: Status (the
default landing tab) got a chip while Files / Review did not, so the
selected tab visibly bulged wider than its siblings.

The sidepanel comment in packages/ui/src/components/tabs.css already
spelled out the intended active marker — 'weight + color shift only.
No chip background, no brand underline' — but the app-level rule
overrode it.

Drop the rule. All three triggers now share a transparent background;
the selected tab is conveyed by fg-strong + 500 weight, matching the
tabs.css comment and DESIGN.md's restrained warm-neutral palette.

Verification (TDD)

- New e2e spec session-shell-tab-consistency.spec.ts asserts at the
  rendered seam that all three triggers share the same computed
  background-color. Red on HEAD~1 (Status rgb(248, 246, 243) vs Files
  rgba(0, 0, 0, 0)), green after the index.css deletion. The
  assertion does not hard-code 'transparent' — the contract is
  'agree with each other'.
- bun run --filter=@opencode-ai/app typecheck OK
- bun run --filter=@opencode-ai/app snap right-panel-titlebar — light
  + dark grid shows all three tabs at equal visual weight.

PR #878 left two visual contracts unresolved on the right-panel tab strip:
the selected-tab chip was still the opaque var(--sidebar) hex that read too
heavy now that the strip lives in the titlebar, and the close × overflowed
its slot because (a) the inner Icon is fixed at 16×16 in icon.css, (b) the
slot was sized with literal 14px / 10px values that ignore this app's
13px html base font-size — so 'size-3.5' (used by the leading icon span and
icon-button) actually renders ~11px, leaving the × off-center by 2-3px and
visually bigger than its neighbours.

Changes:

- packages/app/src/index.css: switch the selected-tab chip from
  var(--sidebar) (opaque #f2f1ee / #1d1d1b) to var(--row-active-overlay)
  (rgba black/white at 6% — the exact overlay the sidebar session row uses
  for its own selected state). Single selection vocabulary across the app.

- packages/ui/src/components/tabs.css:
  * Drop the redundant font-weight: 500 on [data-selected] — every sidepanel
    trigger already picks up 500 from text-h3 (--font-weight-h3), so the
    rule was setting an existing value and produced no visible emphasis.
    Selection is now color shift (fg-weak → fg-strong) + chip only, with
    constant tab widths under selection.
  * Replace literal 14px / 10px on the close-button slot with rem-aware
    values (0.875rem width/height, 0.625rem left) so it tracks 'size-3.5'
    and the trigger's 'px-2.5' padding under the 13px html base. The slot
    now matches the leading icon span exactly in size and position.
  * Constrain the inner [data-component='icon'] in the close-button slot
    to 8×8 (was 16×16 from icon.css) so the × reads as a subordinate
    affordance instead of a peer of the 16×16 leading icon.
  * Suppress the IconButton's own --hover-overlay background inside the
    slot so the × renders as a bare glyph, not a chip-shaped button.
  * Drop the 100ms opacity transition on the icon ↔ × swap — the fade
    produced a 'both icons visible' mid-frame whenever the cursor crossed
    multiple closable tabs in quick succession. Instant swap eliminates it.
  * Refresh the surrounding comments to describe the row-active-overlay
    chip + rem-aware footprint, replacing the now-incorrect 'no chip' and
    '14×14 cell' descriptions.

Verification:

- New packages/app/e2e/session/session-tab-chip-contract.spec.ts pins the
  contract: chip computes to a low-alpha rgba (overlay band, not opaque);
  the close-button slot's width/height equal the leading icon span's
  width/height; the visible × glyph is 6–10px; the leading icon and ×
  centers align within 1px; the swap has zero transition; Status (the
  non-closable tab) never renders an × and keeps its icon on hover.
  All 5 assertions pass post-fix.

- New packages/app/e2e/snap/right-panel-tabs-hover.snap.ts captures three
  states (rest / hover Files / hover Review) in light + dark — the
  existing right-panel-titlebar snap intentionally parks the mouse at
  (0,0) and would not catch hover-state regressions. Visually confirms
  chip is the lighter overlay, × is small and centered, no double-icon
  artifact.

Two visual regressions on the right-panel tab strip flagged after PR #878
shipped:

  1. Hovering a tab produced no chip background — the strip felt dead and
     clicks landed without any visual lead-in. UX expects hover to preview
     the selection (lighter overlay), then click to lock in (heavier).
  2. Status / Files / Review / Terminal labels have different lengths, so
     the chips rendered visibly mismatched.

Fixes:

  - app: scoped two right-panel chip rules to the wrapper (matches the
    sidebar session row's chip-on-container vocabulary):
      hover  → --row-hover-overlay  (4% overlay)
      :has([data-selected]) → --row-active-overlay (6% overlay)
    Hover rule carries :not(:disabled) to tie specificity (0,6,0) with the
    sidepanel base rule that forces transparent bg on hover; later
    declaration order wins.

  - ui: sidepanel trigger gets min-width: 7.5rem (~97px @ 13px html base)
    plus justify-content: flex-start. Base trigger uses
    justify-content: center, which works for content-sized tabs but drifts
    the leading icon to the cell center as soon as min-width pushes the
    trigger wider than its content — the close-button slot stays at
    left: 0.625rem (absolute), so centering content offsets × from the
    leading icon by half the slack. background-color: 120ms transition
    added so the hover overlay fades in rather than snapping.

E2e contract: 6 → 8 assertions. Adds 'hover paints a chip preview' and
'all sidepanel tabs share a uniform min-width chip'. Updated the selected-
overlay assertion to sample the wrapper (where the chip now lives) instead
of the inner trigger button.

Verified:
  - bun script/e2e-local.ts -- session-tab-chip-contract → 8/8
  - bun run typecheck → 8/8
  - bun run snap right-panel-tabs-hover → grid shows hover + selected
    overlays in both light and dark themes, × stays aligned with the
    leading icon at the wider chip width.

PR #878 left the close-button slot anchored by `position: absolute;
left: 0.625rem` — a literal mirror of the trigger's `px-2.5` padding —
so the × visually drifted from the leading icon whenever a layout knob
moved one side out of step. The previous round added `min-width` to
unify chip widths and that surfaced the gap: even with
`justify-content: flex-start` to keep the leading icon at
padding-inline-start, the slot's absolute coordinate system and the
trigger's flex flow never shared a single source of truth. The
icon-button's base `margin: -0.25rem` also nudged the × ~3.25px off
the leading icon's center.

Refactor the sidepanel variant to a single-cell grid:

  - wrapper is `display: grid; grid-template-columns: 1fr` with a
    `--tab-leading-inset: 0.625rem` token
  - trigger and close-button slot both `grid-area: 1 / 1` so they
    overlay in the same cell
  - both flex-anchor their first child at
    `padding-inline-start: var(--tab-leading-inset)` (the trigger
    inherits it via SortableTab's `px-2.5` Tailwind class; the slot
    sets it explicitly)
  - close-button slot drops `position: absolute`, `left`, `width`,
    `height`, `transform` — there is no positional contract left to
    couple
  - sidepanel close-button clears the base `icon-button { margin:
    -0.25rem }` so the × icon's center sits on the leading icon's
    center

Padding tweaks now propagate to both sides via one custom property;
a future change to chip padding cannot resurrect the drift.

Width: `min-width` drops 7.5rem → 5.5rem. The earlier value was
sized to also fit "Terminal" but read too wide for the common
3-tab strip; Terminal is allowed to extend past the min naturally
(the strip already scrolls horizontally).

Tests:
  - rewrote the size assertion to check the × glyph alone (the slot
    is no longer a small fixed-size box, so slot-vs-leading width
    comparison is meaningless)
  - alignment test now measures the close icon-button center, not
    the slot center
  - uniform-width threshold updated to 5.5rem

Verified:
  - bun script/e2e-local.ts -- session-tab-chip-contract → 8/8
  - bun run typecheck → 8/8
  - bun run snap right-panel-tabs-hover → leading icon and × land
    on the same column across all 4 cells in light + dark; the
    three short labels share a uniform chip width.

Round-of-rounds polish on the right-panel tab strip. After PR #878
shipped, the chip + × geometry drifted three different visual debts
into the same surface — heavy chip, off-grid spacing, half-empty
cells. This commit lands one coherent set of values, all locked to
DESIGN.md L233's nine-step 4pt grid:

  shape            radius-lg 14px (full pill on 28-high tab)
  width            min-width 5.5rem (~71.5px), short chips share a
                   uniform footprint; longer labels (Terminal) extend
                   past it naturally
  padX             8px         (was 10 / px-2.5 — off-grid)
  gap-inner        8px         (was 6 / gap-1.5 — off-grid)
  gap-list         8px         (was 0  — chips read as a single band)
  hover chip       --row-hover-overlay  (4%, matches sidebar row)
  selected chip    --row-active-overlay (6%, matches sidebar row)
  × ↔ leading      grid overlay, same padding-inline-start token

Changes:

  - ui/tabs.css sidepanel block: tabs-list gets gap 0.5rem; wrapper
    gets border-radius var(--radius-lg) and --tab-leading-inset
    drops 0.625rem → 0.5rem to track the new padding.
  - app/SortableTab tsx classes: gap-1.5 px-2.5 → gap-2 px-2 so
    the trigger's Tailwind padding/gap line up with the slot's
    --tab-leading-inset.
  - e2e contract spec: width assertion goes back to the 5.5rem
    floor (an earlier round had inverted it to assert no min-width;
    that decision was reverted after the v4 HTML review).

Decision trail (HTML variants):
  docs/design/scratch/2026-05-24-right-panel-tabs-v2.html   (8-cell
  selected-color × hover-strength × padX × gap matrix)
  …-v3.html (locked colour, padX × gap)
  …-v4.html (locked padX 8, gap-inner × gap-list — variant 4 "全 8"
  selected by user, criterion: simplest + 4pt-compliant)

Verified:
  bun script/e2e-local.ts -- session-tab-chip-contract → 8/8
  bun run typecheck                                    → 8/8
  bun run snap right-panel-tabs-hover                  → chip pills
  read as separate cells in light + dark; × overlays leading icon
  pixel-for-pixel.

PR #878 shipped a new right-panel + titlebar tabs portal architecture
but left four visible regressions and a click-occlusion bug that
surfaced only at 4+ open tabs. This PR closes all of them, plus the
follow-up review items the maintainer + Codex + GPT Pro + CodeRabbit
raised over five rounds of review.

## What broke

1. **Visual** — sidepanel host paints `bg-base` and covered the right
   utility toggle; `.titlebar-icon` selector was bound to the icon-button
   primitive and silently dropped `aria-expanded` chip on chips that
   re-used the class; tab chip × glyph rendered at 16px overflowing the
   11px slot (`html { font-size: 13px }` made `size-3.5` ≈ 11px, but
   tabs.css used 14/10px literals throughout); selected closable tab
   with mouse parked away showed both leading icon + × because the base
   `:has([data-selected]) close-button { opacity: 1 }` (4 attrs) beat
   the sidepanel `:hover` rule (3 attrs).

2. **Click occlusion (regression-review P1)** — titlebar tabs slot was
   absolute-positioned over `#pawwork-titlebar-right` and used
   `pointer-events: none` + opt-back-in on every interactive descendant
   to keep the toggle clickable through the overlay. At 4+ tabs the
   `+` dropdown trigger got pushed into the toggle's x range, and
   `pointer-events: auto` (mandatory for the dropdown to open)
   intercepted clicks meant for the toggle. Same shape would have
   re-broken every time a tab was added.

## How it's fixed

- **chip visuals** — selected/hover backgrounds switched to
  `--row-active-overlay` / `--row-hover-overlay` (same vocabulary as
  the sidebar session row); tabs.css ported to rem-aware spacing tokens
  on the 4pt grid; inner close-button Icon clamped to 8×8; sidepanel
  close-button selector lifted to 4+ attrs so the hover-only rule wins.

- **rail restructure (option D after consulting Codex)** — the titlebar
  tabs slot moved from absolute overlay to an **in-flow flex sibling**
  of the toggle inside the right grid column. The toggle is naturally
  pushed left by `--right-panel-width` when the panel opens and slides
  back to the viewport edge when it closes (existing 240ms transition
  carries it smoothly). Disjoint geometry, no pointer-events
  choreography, no z-index. Full chain (`pointer-events: none` on slot,
  list, spacer, opt-in on every interactive descendant) deleted.

- **rail full-height seam** — outer right rail gets `self-stretch` so
  the tabs slot's `border-l` reaches the full 44px titlebar height and
  meets the right-panel body's `border-l` as one continuous separator.
  Without it `items-center` on the grid root collapsed the rail to
  toggle row height (≈30px) and the seam broke above/below the toggle.

- **viewport gate** — `tabsRailActive` gated on `createMediaQuery
  ("(min-width: 768px)")` to match SessionSidePanel's own desktop
  predicate. Without it, opening the panel at desktop width and
  shrinking the viewport below 768px would leave the titlebar
  reserving panel-width of empty rail and push the toggle off-screen.

- **route gate** — `tabsRailActive` also gated on the session pathname
  so navigating to home/settings with the panel left open doesn't claim
  panel-width and push the StatusPopover fallback inboard.

## Tests

- `session-tab-chip-contract.spec.ts` — 11 assertions covering the
  chip's {selected/unselected} × {hover/no-hover} matrix, × glyph size
  and center alignment, instant icon swap, min-width parity between
  closable / non-closable, 4pt grid pinning. Scoped to
  `[data-component="tabs"][data-variant="sidepanel"][data-scope="right-panel"]`
  root so unrelated tablists can't pollute.
- `titlebar-right-rail-contract.spec.ts` — split out as a separate
  spec covering the rail architecture: toggle stays clickable with the
  full 4-tab set open (closes the regression P1), slot height matches
  titlebar height (closes the seam followup), slot width collapses to
  0 below the desktop breakpoint with `expect.poll` to wait out the
  viewport → media query → memo → DOM chain.
- `right-panel-tabs-hover.snap.ts` — visual snap target capturing
  rest / hover-Files / hover-Review states in light + dark themes,
  with per-element opacity / bounding-box dumps for forensic diffing.

## CSS anchor positioning support

The new close-button positioning depends on `position-anchor` /
`anchor()` / `anchor-scope`. PawWork ships only as an Electron
(Chromium 134 in Electron 40) desktop app on macOS + Windows per
AGENTS.md, well above the Chromium 125 anchor-positioning floor.
`bun run dev` web mode is a developer convenience, not a shipped
surface; no fallback needed.

## Verified

- `bun test` (1544 pass)
- `bun run typecheck` (clean)
- `bun run test:e2e session-tab-chip-contract.spec.ts` (11/11)
- `bun run test:e2e titlebar-right-rail-contract.spec.ts` (3/3)
- `bun run snap right-panel-titlebar` (visual: toggle left of tabs
  portal, all 4 tabs + `+` visible, panel border-l flush with titlebar
  slot border-l, seam continuous)
- Adjacent `right-panel-width.spec.ts` failures (`[role="tablist"]`
  expected as aside descendant, turn-list visibility) reproduce on
  HEAD too — pre-existing, unrelated to this change.

## Review rounds closed

1. Initial reshape (chip visuals + × geometry + selected/hover matrix)
2. Codex consult on rail architecture choice → option D adopted
3. Codex review of D landed → caught `pr-2` misalignment, missing
   route gate, comment drift
4. Maintainer P2 review → seam full-height fix
5. Maintainer P2 review → viewport breakpoint gate
6. CodeRabbit → DOM scope tightening + post-resize poll convergence
7. CodeQL → js/redos false-positive on comment, reworded
8. Pushed back on CodeRabbit's `Control+\`` → `modKey` suggestion
   (terminal.toggle is hardcoded ctrl+\` on every platform)

## Follow-up scope (deferred)

- Lift the desktop/route/state predicate to shared layout state and
  extract `DESKTOP_BREAKPOINT` constant (CodeRabbit nit, low value).
- snap-spec nits (waitForTimeout → state-based, trackSession
  placement, toBe(3) → toBeGreaterThanOrEqual) — separate PR.

Closes the regression-review thread on PR #878 follow-up.