@brimveyn/aimux 1.23.7 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brimveyn/aimux",
-  "version": "1.23.7",
+  "version": "1.24.0",
   "description": "A terminal multiplexer for AI CLIs. Run Claude, Codex, OpenCode, Kimi side-by-side with tabbed navigation, split panes, and persistent sessions.",
   "keywords": [
     "ai",
@@ -66,7 +66,7 @@
     "bump:terminal_manager": "bun run scripts/bump-protocol.ts terminal-manager"
   },
   "dependencies": {
-    "@brimveyn/aimux-config": "0.10.7",
+    "@brimveyn/aimux-config": "0.10.8",
     "@opentui/core": "^0.1.90",
     "@opentui/react": "^0.1.90",
     "@resvg/resvg-wasm": "^2.6.2",

package/src/input/keymap/key-chord.ts

@@ -11,8 +11,11 @@ export type KeyChord = string
 const SPECIAL_NAMES: Record<string, string> = {
   BS: 'backspace',
   CR: 'return',
+  Del: 'delete',
   Down: 'down',
+  End: 'end',
   Esc: 'escape',
+  Home: 'home',
   Left: 'left',
   Right: 'right',
   Space: 'space',
@@ -38,6 +41,12 @@ export function keyInputToChord(key: KeyInput): KeyChord {
   let prefix = ''
   if (ctrl) prefix += 'C-'
   if (meta) prefix += 'M-'
+  // Only for named keys. On a single character shift is already in the character
+  // itself (handled above), so an `S-` there would be a chord nothing produces.
+  // Whether Shift+Enter arrives at all is the terminal's call — it needs the
+  // kitty keyboard protocol or modifyOtherThanKeys to report the modifier, and
+  // where it does not the Ctrl+Enter binding beside it still fires.
+  if (shift && baseName.length > 1) prefix += 'S-'
 
   return `${prefix}${baseName}`
 }
@@ -136,6 +145,7 @@ function parseAngleBracketToken(inner: string): KeyChord {
   let prefix = ''
   if (ctrl) prefix += 'C-'
   if (meta) prefix += 'M-'
+  if (shift && keyName.length > 1) prefix += 'S-'
 
   return `${prefix}${keyName}`
 }

package/src/input/keymap/key-format.ts

@@ -2,8 +2,11 @@ import { type KeyChord, parseKeyNotation } from './key-chord'
 
 const SPECIAL_DISPLAY: Record<string, string> = {
   backspace: 'Backspace',
+  delete: 'Del',
   down: '↓',
+  end: 'End',
   escape: 'Esc',
+  home: 'Home',
   left: '←',
   return: 'Enter',
   right: '→',
@@ -25,6 +28,10 @@ export function formatChord(chord: KeyChord, leader?: KeyChord): string {
 
   let ctrl = false
   let meta = false
+  // Shift rides as an `S-` prefix on named keys (`S-return`), and as an
+  // uppercase letter on the rest. Both end up as "Shift+…" here; without this
+  // the help overlay printed the raw chord.
+  let shift = false
   let rest = chord
 
   while (true) {
@@ -38,10 +45,15 @@ export function formatChord(chord: KeyChord, leader?: KeyChord): string {
       rest = rest.slice(2)
       continue
     }
+    if (rest.startsWith('S-')) {
+      shift = true
+      rest = rest.slice(2)
+      continue
+    }
     break
   }
 
-  if (!ctrl && !meta) {
+  if (!ctrl && !meta && !shift) {
     if (rest.length === 1 && /^[A-Z]$/.test(rest)) {
       return `Shift+${rest}`
     }
@@ -51,6 +63,7 @@ export function formatChord(chord: KeyChord, leader?: KeyChord): string {
   const parts: string[] = []
   if (ctrl) parts.push('Ctrl')
   if (meta) parts.push('Alt')
+  if (shift) parts.push('Shift')
   parts.push(formatModifierKey(rest))
   return parts.join('+')
 }

package/src/input/modes/handlers/shared.ts

@@ -40,11 +40,59 @@ export function handleModalSelectionKeys(
   return null
 }
 
+/**
+ * Cursor motion for a key no binding claimed.
+ *
+ * Every modal that accepts typing is a `passthrough()` mode, and this is the one
+ * function they all fall through to — so a motion added here reaches every text
+ * field in the app at once, without a binding per modal. The modals that do bind
+ * an arrow (the update prompt's row of buttons, the git and settings screens)
+ * resolve it before it ever gets here.
+ */
+function handleCursorMotion(key: KeyInput): KeyResult | null {
+  const word = key.ctrl || key.meta
+  switch (key.name) {
+    case 'left':
+      return result([
+        word
+          ? { to: 'word-left', type: 'move-modal-cursor' }
+          : { delta: -1, type: 'move-modal-cursor' },
+      ])
+    case 'right':
+      return result([
+        word
+          ? { to: 'word-right', type: 'move-modal-cursor' }
+          : { delta: 1, type: 'move-modal-cursor' },
+      ])
+    case 'home':
+      return result([{ to: 'home', type: 'move-modal-cursor' }])
+    case 'end':
+      return result([{ to: 'end', type: 'move-modal-cursor' }])
+    // Only reached in a modal that leaves Up/Down unbound — the ones that drive a
+    // list with them hand their own action a `moveModalCursorInField` fallback.
+    case 'up':
+      return result([{ to: 'line-up', type: 'move-modal-cursor' }])
+    case 'down':
+      return result([{ to: 'line-down', type: 'move-modal-cursor' }])
+    default:
+      return null
+  }
+}
+
 export function handleTextInput(key: KeyInput): KeyResult | null {
+  const motion = handleCursorMotion(key)
+  if (motion) return motion
+
   if (key.name === 'backspace') {
     return result([{ char: '\b', type: 'update-command-edit' }])
   }
 
+  // DEL, the counterpart to backspace: both are commands rather than text
+  // because neither can arrive as a typed character.
+  if (key.name === 'delete') {
+    return result([{ char: '\x7f', type: 'update-command-edit' }])
+  }
+
   if (key.name === 'space') {
     return result([{ char: ' ', type: 'update-command-edit' }])
   }

package/src/state/actions.ts

@@ -7,6 +7,7 @@
 import type { ModeId } from '@brimveyn/aimux-config'
 
 import type { LayoutNode, SplitDirection } from './layout-tree'
+import type { CursorTarget } from './text-cursor'
 import type {
   AssistantId,
   BarSide,
@@ -32,7 +33,7 @@ import type {
 } from './types'
 
 export type ModalAction =
-  | { type: 'move-modal-cursor'; delta?: number; to?: 'home' | 'end' }
+  | { type: 'move-modal-cursor'; delta?: number; to?: CursorTarget }
   | {
       type: 'open-new-tab-modal'
       pendingWorkspace?: PendingWorkspaceLaunch

package/src/state/reducers/modal-state.ts

@@ -16,6 +16,7 @@ import {
   filterSnippets,
   getNewTabAssistantOptions,
 } from '../selectors'
+import { applyEdit, moveCursor } from '../text-cursor'
 import { reduceGitCommitModalState } from './git-commit-modal-state'
 
 function emptyModal() {
@@ -106,6 +107,19 @@ function getCreateWorkspaceFieldValue(
   return field === 'prompt' ? modal.prompt : modal.baseQuery
 }
 
+/**
+ * The buffer a cursor motion applies to. Every modal but one keeps the field it
+ * is editing in `editBuffer` — the multi-field ones (snippet editor, commit
+ * message) swap it on Tab — so that is the default. Create-workspace is the
+ * exception: its two fields are named, and neither is `editBuffer`.
+ */
+function getModalCursorText(state: AppState): string | null {
+  if (state.modal.type === 'create-workspace') {
+    return getCreateWorkspaceFieldValue(state.modal, state.modal.activeField)
+  }
+  return state.modal.editBuffer
+}
+
 export function reduceModalState(state: AppState, action: AppAction): AppState | null {
   // The one modal with a stage machine of its own, in its own file.
   const gitCommit = reduceGitCommitModalState(state, action)
@@ -604,14 +618,10 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
       return { ...state, modal: { ...state.modal, selectedIndex: clamped } }
     }
     case 'move-modal-cursor': {
-      if (state.modal.editBuffer === null) return state
-      const len = state.modal.editBuffer.length
-      const current = state.modal.cursorPos ?? len
-      let next = current
-      if (action.to === 'home') next = 0
-      else if (action.to === 'end') next = len
-      else if (typeof action.delta === 'number') next = current + action.delta
-      next = clampCursor(next, len)
+      const text = getModalCursorText(state)
+      if (text === null) return state
+      const current = clampCursor(state.modal.cursorPos ?? text.length, text.length)
+      const next = moveCursor(text, current, action)
       if (next === current) return state
       return { ...state, modal: { ...state.modal, cursorPos: next } }
     }
@@ -656,16 +666,9 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         const field = state.modal.activeField
         const current = getCreateWorkspaceFieldValue(state.modal, field)
         const at = clampCursor(state.modal.cursorPos ?? current.length, current.length)
-        let text: string
-        let pos: number
-        if (action.char === '\b') {
-          if (at === 0) return state
-          text = current.slice(0, at - 1) + current.slice(at)
-          pos = at - 1
-        } else {
-          text = current.slice(0, at) + action.char + current.slice(at)
-          pos = at + action.char.length
-        }
+        const edit = applyEdit(current, at, action.char)
+        if (edit === null) return state
+        const { pos, text } = edit
         if (field === 'prompt') {
           return {
             ...state,
@@ -690,16 +693,9 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
       }
       const buffer = state.modal.editBuffer
       const cursor = clampCursor(state.modal.cursorPos ?? buffer.length, buffer.length)
-      let nextBuffer: string
-      let nextCursor: number
-      if (action.char === '\b') {
-        if (cursor === 0) return state
-        nextBuffer = buffer.slice(0, cursor - 1) + buffer.slice(cursor)
-        nextCursor = cursor - 1
-      } else {
-        nextBuffer = buffer.slice(0, cursor) + action.char + buffer.slice(cursor)
-        nextCursor = cursor + action.char.length
-      }
+      const edit = applyEdit(buffer, cursor, action.char)
+      if (edit === null) return state
+      const { pos: nextCursor, text: nextBuffer } = edit
       const isNewTabEditing = state.modal.type === 'new-tab' && state.modal.editingCommand !== null
       const resetIndex =
         !isNewTabEditing &&

package/src/state/text-cursor.ts

@@ -0,0 +1,117 @@
+/**
+ * Cursor motion inside a modal's text buffer.
+ *
+ * Pure string maths, kept out of the reducer so it can be read and tested on its
+ * own — the reducer only decides *which* buffer a motion applies to.
+ *
+ * ponytail: lines are `\n`-delimited, not visually wrapped. A paragraph that the
+ * input box soft-wraps over three rows is one line here, so Up/Down step over
+ * the whole paragraph. Fixing that means the motion needs the box's width, which
+ * lives in the renderer, not the store — worth doing only if the wrapped fields
+ * ever get long enough for it to bite.
+ */
+
+/** Where a motion wants to go. `home`/`end` are line-wise, so they do the right thing in a one-line field too. */
+export type CursorTarget = 'end' | 'home' | 'line-down' | 'line-up' | 'word-left' | 'word-right'
+
+function clamp(value: number, max: number): number {
+  return Math.max(0, Math.min(max, value))
+}
+
+/**
+ * The `[start, end)` of the line `at` sits on. `end` is the newline's index (or
+ * the buffer's length on the last line), so it is where `End` parks.
+ */
+function lineBounds(text: string, at: number): { end: number; start: number } {
+  // `lastIndexOf` clamps a negative `fromIndex` to 0, which would find a leading
+  // newline and put the start one past it — so column 0 is answered directly.
+  const start = at === 0 ? 0 : text.lastIndexOf('\n', at - 1) + 1
+  const newline = text.indexOf('\n', at)
+  return { end: newline === -1 ? text.length : newline, start }
+}
+
+const isWordChar = (ch: string | undefined): boolean => ch !== undefined && /\S/.test(ch)
+
+/** Left edge of the word before the cursor: skip the gap, then the word. */
+function wordLeft(text: string, at: number): number {
+  let i = at
+  while (i > 0 && !isWordChar(text[i - 1])) i--
+  while (i > 0 && isWordChar(text[i - 1])) i--
+  return i
+}
+
+/** Right edge of the word after the cursor, by the same rule. */
+function wordRight(text: string, at: number): number {
+  let i = at
+  while (i < text.length && !isWordChar(text[i])) i++
+  while (i < text.length && isWordChar(text[i])) i++
+  return i
+}
+
+/** The same column on the line above, or as near to it as that line reaches. */
+function lineUp(text: string, at: number): number {
+  const { start } = lineBounds(text, at)
+  // Already on the first line: Up parks at its start rather than doing nothing,
+  // which is what every editor does with it.
+  if (start === 0) return 0
+  const previous = lineBounds(text, start - 1)
+  return Math.min(previous.start + (at - start), previous.end)
+}
+
+/** The same column on the line below. */
+function lineDown(text: string, at: number): number {
+  const { end, start } = lineBounds(text, at)
+  if (end === text.length) return text.length
+  const next = lineBounds(text, end + 1)
+  return Math.min(next.start + (at - start), next.end)
+}
+
+/** Resolve one motion against `text`, clamped to it. */
+export function moveCursor(
+  text: string,
+  at: number,
+  motion: { delta?: number; to?: CursorTarget }
+): number {
+  const from = clamp(at, text.length)
+  if (motion.to === undefined) {
+    return clamp(from + (motion.delta ?? 0), text.length)
+  }
+  switch (motion.to) {
+    case 'home':
+      return lineBounds(text, from).start
+    case 'end':
+      return lineBounds(text, from).end
+    case 'word-left':
+      return wordLeft(text, from)
+    case 'word-right':
+      return wordRight(text, from)
+    case 'line-up':
+      return lineUp(text, from)
+    case 'line-down':
+      return lineDown(text, from)
+    default:
+      motion.to satisfies never
+      return from
+  }
+}
+
+/**
+ * Apply one edit at the cursor. `\b` deletes behind it, `\x7f` in front of it —
+ * neither can arrive as typed text, which is why they double as the two commands.
+ */
+export function applyEdit(
+  text: string,
+  at: number,
+  char: string
+): { pos: number; text: string } | null {
+  const from = clamp(at, text.length)
+  if (char === '\b') {
+    if (from === 0) return null
+    return { pos: from - 1, text: text.slice(0, from - 1) + text.slice(from) }
+  }
+  if (char === '\x7f') {
+    if (from === text.length) return null
+    return { pos: from, text: text.slice(0, from) + text.slice(from + 1) }
+  }
+  return { pos: from + char.length, text: text.slice(0, from) + char + text.slice(from) }
+}

package/src/ui/breaking-update-screen.tsx

@@ -2,6 +2,7 @@ import { useKeyboard } from '@opentui/react'
 
 import { ModalShell } from './components/modals/shared/modal-shell'
 import { ListItem } from './components/primitives/list-item'
+import { useSelectionInk } from './selection-ink'
 import { uiTokens } from './ui-tokens'
 
 interface BreakingUpdateScreenProps {
@@ -9,6 +10,7 @@ interface BreakingUpdateScreenProps {
 }
 
 export function BreakingUpdateScreen({ onConfirm }: BreakingUpdateScreenProps) {
+  const ink = useSelectionInk()
   useKeyboard((key) => {
     if (key.name === 'return') {
       key.preventDefault()
@@ -24,7 +26,11 @@ export function BreakingUpdateScreen({ onConfirm }: BreakingUpdateScreenProps) {
           <text>The terminal manager must be restarted.</text>
           <text>You will lose your current terminal states.</text>
         </box>
-        <ListItem active direction="row" title={<text>OK — Restart terminal manager</text>} />
+        <ListItem
+          active
+          direction="row"
+          title={<text fg={ink}>OK — Restart terminal manager</text>}
+        />
       </box>
     </ModalShell>
   )

package/src/ui/components/layout/bar-footer.tsx

@@ -53,11 +53,9 @@ export function BarFooter({ contentWidth }: { contentWidth: number }) {
 
   return (
     <box flexDirection="column" flexShrink={0}>
-      <box flexShrink={0}>
-        <text fg={t.border} selectable={false} wrapMode="none">
-          {'─'.repeat(Math.max(1, contentWidth))}
-        </text>
-      </box>
+      {/* A blank row, not a rule: the footer is set off from the last widget by
+          the gap alone. */}
+      <box height={1} flexShrink={0} />
       {/* Each entry is its own <text>, with a spacer box between them: one string
           holding both would make the whole footer a single click target. */}
       <box flexDirection="row" flexShrink={0} paddingLeft={1} paddingRight={1}>

package/src/ui/components/layout/bar.tsx

@@ -20,6 +20,12 @@ export interface BarBoundaryResizeInfo {
   totalSize: number
 }
 
+/**
+ * Columns between the widgets and the terminal: one to grab for a resize, one so
+ * the content is not flush against the edge. Both grab.
+ */
+const GUTTER = 2
+
 interface BarProps {
   side: BarSide
   onResizeDrag?: (event: OtuiMouseEvent) => boolean
@@ -28,8 +34,6 @@ interface BarProps {
   onBoundaryResizeStart?: (info: BarBoundaryResizeInfo) => void
 }
 
-const RESIZE_HANDLE = '─'
-
 /**
  * One edge bar hosting a vertical stack of widgets. Both bars are this
  * component; the only asymmetry is which side the resize handle sits on.
@@ -78,11 +82,21 @@ export function Bar({
   if (width === 0) return null
 
   const visible = visibleWidgets(bar)
-  const contentWidth = Math.max(1, width - 1)
-
-  // Drag handle on the side facing the terminal.
+  const contentWidth = Math.max(1, width - GUTTER)
+
+  // The gutter on the side facing the terminal: the resize grip and the widgets'
+  // inset from the terminal are the same two columns — the padding is not dead
+  // space, both cells start a resize. Painted with the bar, not in the page
+  // colour: a page-coloured strip here left a seam between the bar and the tab
+  // bar above it, which are the same panel. What separates the bar from the
+  // terminal is the terminal's own background, nothing drawn.
   const edge = (
-    <box width={1} flexShrink={0} backgroundColor={t.border} onMouseDown={handleEdgeMouseDown} />
+    <box
+      width={GUTTER}
+      flexShrink={0}
+      backgroundColor={t.backgroundPanel}
+      onMouseDown={handleEdgeMouseDown}
+    />
   )
 
   const body = (
@@ -93,7 +107,6 @@ export function Bar({
           bodyRef={bodyRef}
           contentWidth={contentWidth}
           grow={widget.grow}
-          handleColor={t.border}
           index={index}
           isLast={index === visible.length - 1}
           onBoundaryResizeStart={onBoundaryResizeStart}
@@ -109,7 +122,7 @@ export function Bar({
       width={width}
       padding={0}
       flexDirection="row"
-      backgroundColor={t.background}
+      backgroundColor={t.backgroundPanel}
       gap={0}
       overflow="hidden"
       rightClickMenu={buildBarContextMenu(bars, side)}
@@ -118,7 +131,17 @@ export function Bar({
       onMouseUp={handleMouseUp}
     >
       {side === 'right' ? edge : null}
-      <box width={contentWidth} flexGrow={1} flexDirection="column" overflow="hidden">
+      {/* The bar is one surface, top to bottom: widgets, the gaps between them,
+          the footer and the gutter all share it, and it runs straight into the
+          tab bar above. Painting each widget separately left the gaps and the
+          footer showing the page colour through, which read as seams. */}
+      <box
+        width={contentWidth}
+        flexGrow={1}
+        flexDirection="column"
+        overflow="hidden"
+        backgroundColor={t.backgroundPanel}
+      >
         {body}
         {side === 'left' ? <BarFooter contentWidth={contentWidth} /> : null}
       </box>
@@ -131,7 +154,6 @@ function BarWidgetSlot({
   bodyRef,
   contentWidth,
   grow,
-  handleColor,
   index,
   isLast,
   onBoundaryResizeStart,
@@ -141,7 +163,6 @@ function BarWidgetSlot({
   bodyRef: React.RefObject<BoxRenderable | null>
   contentWidth: number
   grow: number
-  handleColor: string
   index: number
   isLast: boolean
   side: BarSide
@@ -181,12 +202,16 @@ function BarWidgetSlot({
       >
         {render(contentWidth)}
       </ContextMenuBox>
+      {/* The boundary between two widgets: a blank grabbable row, no rule drawn
+          in it. Widgets read as separate because of the gap, the same way
+          opencode separates its surfaces. */}
       {isLast ? null : (
-        <box minHeight={1} flexShrink={0} onMouseDown={handleBoundaryMouseDown}>
-          <text fg={handleColor} selectable={false}>
-            {RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}
-          </text>
-        </box>
+        <box
+          minHeight={1}
+          width={contentWidth}
+          flexShrink={0}
+          onMouseDown={handleBoundaryMouseDown}
+        />
       )}
     </>
   )

package/src/ui/components/layout/sidebar/project-list.tsx

@@ -234,7 +234,6 @@ export function ProjectList({ contentWidth }: ProjectListProps) {
               <ProjectRow
                 key={`ws:${project.id}`}
                 project={project}
-                inCurrentGroup={isCurrentProject}
                 projectIndex={projectIndex}
                 dragging={draggingId === project.id}
                 contentWidth={contentWidth}
@@ -249,7 +248,6 @@ export function ProjectList({ contentWidth }: ProjectListProps) {
                   workspace={workspace}
                   projectIndex={projectIndex}
                   isActiveItem={isCurrentProject && workspace.id === activeWorkspaceId}
-                  inCurrentGroup={isCurrentProject}
                   contentWidth={contentWidth}
                 />
               )
@@ -300,13 +298,6 @@ function DropGap({ active, contentWidth, index, setGapRef }: DropGapProps) {
 
 interface ProjectRowProps {
   project: ProjectRecord
-  /**
-   * True when this row belongs to the current project (selection scope).
-   *
-   * There is deliberately no `isActiveItem`: the cursor lives on workspace
-   * rows, and this row is the heading they sit under.
-   */
-  inCurrentGroup: boolean
   /** 1-based index in the visible order, so the "+" can switch projects first. */
   projectIndex: number
   dragging: boolean
@@ -318,7 +309,6 @@ interface ProjectRowProps {
 const ProjectRow = memo(function ProjectRow({
   contentWidth,
   dragging,
-  inCurrentGroup,
   onDragStart,
   project,
   projectIndex,
@@ -329,12 +319,12 @@ const ProjectRow = memo(function ProjectRow({
   const base = useBaseTheme()
   // Only the drag highlight is "selected"-strength here. A heading that lights
   // up like a cursor row is what made the project look like a workspace.
-  let bgColor: string | undefined
-  if (dragging) {
-    bgColor = base.backgroundElement
-  } else if (inCurrentGroup) {
-    bgColor = base.backgroundPanel
-  }
+  // No band for "this row's project is the current one": the bar is a single
+  // backgroundPanel surface now and backgroundElement is spoken for by the
+  // cursor row, which leaves no third tone that works in every theme. The
+  // cursor row — one step off the panel, plus its accent bar — is what says
+  // where you are; the group it sits in follows from that.
+  const bgColor = dragging ? base.backgroundElement : undefined
   const currentProjectId = useAppStore((s) => s.currentProjectId)
 
   const handleMouseDown = useCallback(

package/src/ui/components/layout/sidebar/workspace-row.tsx

@@ -33,14 +33,11 @@ interface WorkspaceRowProps {
   projectIndex: number
   /** True when this row is the active cursor item. */
   isActiveItem: boolean
-  /** True when this row's project is the current project (selection scope). */
-  inCurrentGroup: boolean
   contentWidth: number
 }
 
 export const WorkspaceRow = memo(function WorkspaceRow({
   contentWidth,
-  inCurrentGroup,
   isActiveItem,
   project,
   projectIndex,
@@ -134,12 +131,12 @@ export const WorkspaceRow = memo(function WorkspaceRow({
     return entries
   }, [project.id, workspace.branch, workspace.id, workspace.name, workspace.source])
 
-  let bgColor: string | undefined
-  if (isActiveItem) {
-    bgColor = base.backgroundElement
-  } else if (inCurrentGroup) {
-    bgColor = base.backgroundPanel
-  }
+  // No band for "this row's project is the current one": the bar is a single
+  // backgroundPanel surface now and backgroundElement is spoken for by the
+  // cursor row, which leaves no third tone that works in every theme. The
+  // cursor row — one step off the panel, plus its accent bar — is what says
+  // where you are; the group it sits in follows from that.
+  const bgColor = isActiveItem ? base.backgroundElement : undefined
   // The cursor: a full-height accent bar down the left of the row, both lines
   // of it. The background alone is one step of grey and gets lost among rows
   // that carry colour of their own; a bar the height of the row is found

package/src/ui/components/layout/status-bar.tsx

@@ -129,9 +129,15 @@ export function StatusBar() {
 
   const glyphs = SEPARATOR_GLYPHS[getStatusBarSeparator()]
 
-  const tileB = t.backgroundElement
-  const tileFiller = t.backgroundPanel
-  const tileX = t.backgroundElement
+  // The bar's own band is backgroundElement, not backgroundPanel: the chrome
+  // directly above it — the tab bar and both widget bars — is panel, and with no
+  // rules left anywhere the status bar merged into it. Its two mid tiles drop to
+  // panel to keep a step between tile and filler. Which of the three tones is
+  // lighter is a theme's business (catppuccin recesses, aimux lifts); all that
+  // matters is that they are three different tokens.
+  const tileB = t.backgroundPanel
+  const tileFiller = t.backgroundElement
+  const tileX = t.backgroundPanel
   const tileY = modeColor
 
   const hasB = model.projectSegments.length > 0