Mark the active panel with an accent line, not a tinted header

Tinting the whole header strip of the focused panel was too much: the
strip changed color every time focus moved. Both panels now share one
neutral header strip, and the active panel is marked by a thin accent
line along its top edge (an inset shadow, so switching panels never
shifts the layout).

Co-Authored-By: Claude <noreply@anthropic.com>

docs/architecture.md

@@ -46,9 +46,10 @@ no-op functions, reassigned in `src/bun/index.ts` after everything exists:
 `src/bun/windows.ts` — `buildPreload(mode, settings, ctx?)` injects
 `__APP_PLATFORM`, `__APP_MODE` (`main|editor|manager|settings`), `__APP_CTX`
 before any page script, plus the persisted theme attributes and interface
-scale so the first paint is already right. `ui/src/main.ts` picks the root component from
-`APP_MODE`; all four roots use selector `app-root` (index.html hosts only that
-tag). `chromeOptions()` is the ONLY place the native frame is decided, spread by
+scale so the first paint is already right. `ui/src/main.ts` picks the root
+component from `APP_MODE`; all four roots use selector `app-root` (index.html
+hosts only that tag). `chromeOptions()` is the ONLY place the native frame is
+decided, spread by
 the main window and `openSecondaryWindow`: macOS `hiddenInset` +
 `trafficLightOffset {x:12,y:13}` (the UI renders an `h-10 pl-24` drag-region
 header via `IS_MAC_CHROME`); other platforms keep the native titlebar and a
@@ -308,9 +309,10 @@ dark neutrals are a **warm gray family (hue 107)** anchored on `#1a1a19`
 and cool surfaces clash. **Surface layers**, each its own shade: `--chrome`
 (frame — tab/transfer/status bars, editor/manager header+footer strips, the
 manager's connection sidebar), `--toolbar` (each file panel's header strip —
-session strip, path bar, column headers — and the editor's search bar; the
-ACTIVE panel's strip is `--toolbar-active`, a `color-mix` of `--primary` into
-`--toolbar`, so it follows the accent), `--background` (file lists, editor
+session strip, path bar, column headers — and the editor's search bar; both
+panels share one neutral strip, and the ACTIVE panel is marked by a 0.125rem
+`--primary` line along its top edge, an inset box-shadow on the session strip so
+switching panels never shifts layout), `--background` (file lists, editor
 text, forms; `--row-alt` stripes odd file rows, skipped on the cursor/selected
 row so two `bg-*` utilities never fight) and `--card` (popovers, dialogs,
 toasts). Dark climbs frame 0.165 < list 0.218 < header 0.265 < card 0.285;
@@ -318,7 +320,7 @@ light steps greys out from white content: frame 0.935 < header 0.965 < list =
 card 1. **`--accent` is translucent** (6% zinc-900 light, 9% white dark):
 hover/selected states sit on every layer, and an opaque hover vanishes on a
 surface of its own lightness. The "darker" tone is true-black AMOLED: chrome,
-background, toolbar (+active) and row-alt are all `#000` (the layers collapse
+background, toolbar and row-alt are all `#000` (the layers collapse
 on purpose), elevation survives only via `--card`/`--accent` (opaque there),
 and `--border`/`--input` go to 16%/18% white because those lines then carry the
 whole layout. Accent tones: one

docs/gotchas.md

@@ -60,12 +60,13 @@ touching the adjacent code.
 
 - **A new surface token needs an AMOLED line, or AMOLED stops being
   all-black.** The two `[data-dark-tone='darker']` blocks re-declare every
-  surface (`--chrome`, `--toolbar`, `--toolbar-active`, `--row-alt`, …) as
-  `#000`; a token added only to the dark blocks shows through in AMOLED.
+  surface (`--chrome`, `--toolbar`, `--row-alt`, …) as `#000`; a token added
+  only to the dark blocks shows through in AMOLED.
 - **Never declare one token in both the AMOLED blocks and the accent dark
   formula blocks.** Both are (0,3,0), so source order decides and the later
-  accent block wins. That is why `--toolbar-active` lives in the base theme
-  blocks — its `var(--primary)` resolves per accent on `:root` anyway.
+  accent block wins. A token that must follow the accent belongs in the base
+  theme blocks instead — a `var(--primary)` there still resolves per accent on
+  `:root`.
 - **Hover/selected color is a translucent overlay (`--accent`).** An opaque
   hover vanishes on a surface of its own lightness — light's old 0.967 hover
   on the 0.965 header strip did exactly that. Keep `--accent` alpha-based when

ui/src/app/skins/shadlike/file-panel/file-panel.html

@@ -1,5 +1,8 @@
 <!-- session strip -->
-<div class="relative flex items-center gap-1.5 border-b border-border px-2 py-1" [class]="headerSurface()">
+<div
+  class="relative flex items-center gap-1.5 border-b border-border bg-toolbar px-2 py-1"
+  [style.box-shadow]="activeMarker()"
+>
   <button
     (click)="toggleMenu()"
     class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-(length:--path-font) font-medium hover:bg-accent"
@@ -158,7 +161,7 @@
 </div>
 
 <!-- path bar -->
-<div class="flex items-center gap-1 border-b border-border px-2 py-1.5" [class]="headerSurface()">
+<div class="flex items-center gap-1 border-b border-border bg-toolbar px-2 py-1.5">
   <button
     (click)="panel().up()"
     [disabled]="blocked()"
@@ -195,8 +198,7 @@
 <div
   (contextmenu)="headerContextMenu($event)"
   [style.grid-template-columns]="gridTemplate()"
-  class="grid border-b border-border text-[0.6875rem] font-medium text-muted-foreground"
-  [class]="headerSurface()"
+  class="grid border-b border-border bg-toolbar text-[0.6875rem] font-medium text-muted-foreground"
 >
   <button class="px-2 py-1 text-left hover:text-foreground" (click)="panel().toggleSort('name')">
     {{ i18n.t('columns.name') }} {{ sortIndicator('name') }}

ui/src/app/skins/shadlike/file-panel/file-panel.ts

@@ -55,9 +55,11 @@ export class FilePanel {
   private readonly rpc = inject(RpcService);
   readonly panel = computed(() => this.panels.get(this.side()));
   readonly isActive = computed(() => this.panels.activeSide() === this.side());
-  /** The header strip's surface (session strip, path bar, column headers):
-   *  the active panel's carries the accent tint. */
-  readonly headerSurface = computed(() => (this.isActive() ? 'bg-toolbar-active' : 'bg-toolbar'));
+  /** The active panel's marker: an accent line along its top edge. Inset, so
+   *  switching panels never shifts the layout. */
+  readonly activeMarker = computed(() =>
+    this.isActive() ? 'inset 0 0.125rem 0 var(--primary)' : null,
+  );
   readonly isRemote = computed(() => this.panel().sessionId() !== 'local');
   /** Input is ignored while the panel is connecting or a listing is in flight. */
   readonly blocked = computed(() => this.panel().busy());

ui/src/styles.css

@@ -19,8 +19,6 @@
   --background: oklch(1 0 0);
   --chrome: oklch(0.935 0.002 286.375);
   --toolbar: oklch(0.965 0.001 286.375);
-  /* the active panel's header strip: a whisper of the accent (graphite: neutral) */
-  --toolbar-active: color-mix(in oklab, var(--primary) 8%, var(--toolbar));
   --row-alt: oklch(0.978 0.001 286.375);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -60,7 +58,6 @@
   --background: oklch(0.2178 0.002 107);
   --chrome: oklch(0.165 0.002 107);
   --toolbar: oklch(0.265 0.002 107);
-  --toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
   --row-alt: oklch(0.232 0.002 107);
   --foreground: oklch(0.982 0.003 107);
   /* above --toolbar, so a popover never reads darker than the strip it covers */
@@ -93,7 +90,6 @@
     --background: oklch(0.2178 0.002 107);
     --chrome: oklch(0.165 0.002 107);
     --toolbar: oklch(0.265 0.002 107);
-    --toolbar-active: color-mix(in oklab, var(--primary) 10%, var(--toolbar));
     --row-alt: oklch(0.232 0.002 107);
     --foreground: oklch(0.982 0.003 107);
     --card: oklch(0.285 0.002 107);
@@ -127,8 +123,8 @@
    #000 (OLED pixels actually off). Elevation survives only through --card and
    --accent; --border/--input are raised to 16%/18% because on pure black those
    lines are the only thing defining panes, bars and rows. The surface layers
-   (--toolbar, its active tint, --row-alt) collapse to black too: AMOLED stays
-   one flat black on purpose, so every NEW surface token needs a line here.
+   (--toolbar, --row-alt) collapse to black too: AMOLED stays one flat black on
+   purpose, so every NEW surface token needs a line here.
    Duplicated for forced-dark and system-dark like the token blocks above — the
    extra attribute outranks them. Never declare a token both here and in the
    accent dark formula blocks below: same (0,3,0) specificity, the later wins. */
@@ -136,7 +132,6 @@
   --background: oklch(0 0 0);
   --chrome: oklch(0 0 0);
   --toolbar: oklch(0 0 0);
-  --toolbar-active: oklch(0 0 0);
   --row-alt: oklch(0 0 0);
   --card: oklch(0.21 0.002 107);
   --secondary: oklch(0.274 0.003 107);
@@ -151,7 +146,6 @@
     --background: oklch(0 0 0);
     --chrome: oklch(0 0 0);
     --toolbar: oklch(0 0 0);
-    --toolbar-active: oklch(0 0 0);
     --row-alt: oklch(0 0 0);
     --card: oklch(0.21 0.002 107);
     --secondary: oklch(0.274 0.003 107);
@@ -167,7 +161,6 @@
   --color-background: var(--background);
   --color-chrome: var(--chrome);
   --color-toolbar: var(--toolbar);
-  --color-toolbar-active: var(--toolbar-active);
   --color-row-alt: var(--row-alt);
   --color-foreground: var(--foreground);
   --color-card: var(--card);