@brimveyn/aimux 1.23.7 → 1.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brimveyn/aimux",
-  "version": "1.23.7",
+  "version": "1.24.1",
   "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.9",
     "@opentui/core": "^0.1.90",
     "@opentui/react": "^0.1.90",
     "@resvg/resvg-wasm": "^2.6.2",

package/src/app-runtime/side-effects.ts

@@ -13,6 +13,7 @@ import { allLeafIds, getGroupIdForTab } from '../state/layout-tree'
 import { saveCurrentProject } from '../state/project-save'
 import { getActiveWorkspace, getActiveWorkspacePath } from '../state/project-workspaces'
 import { toast } from '../state/toast-store'
+import { beginWorkspaceDelete, endWorkspaceDelete } from '../state/workspace-delete-store'
 import { filterThemeIds } from '../ui/filter-themes'
 import { scrollGitDiff } from '../ui/git-view-controls'
 import { applyTheme, getCurrentMode, getTransparent, setMode, setTransparent } from '../ui/theme'
@@ -306,6 +307,16 @@ export function executeSideEffect(effect: SideEffect, ctx: SideEffectContext): v
       return
     }
     case 'delete-workspace': {
+      const deleting = state.projects
+        .find((entry) => entry.id === effect.projectId)
+        ?.workspaces?.find((entry) => entry.id === effect.workspaceId)
+      // Marked before the enqueue, not inside the git op: the queue is why a
+      // delete can sit there doing nothing visible, which is the whole thing
+      // this indicator exists to answer.
+      beginWorkspaceDelete(
+        effect.workspaceId,
+        deleting?.branch ?? deleting?.name ?? 'this workspace'
+      )
       void (async () => {
         try {
           await enqueueGitOp(async () =>
@@ -333,11 +344,18 @@ export function executeSideEffect(effect: SideEffect, ctx: SideEffectContext): v
             closeTabs: effect.closeTabs === true,
             force: true,
             projectId: effect.projectId,
-            reason: message,
+            // Git's refusal, condensed to the one line that changes the answer.
+            // The raw message is a paragraph of plumbing nobody reads before
+            // pressing y, and the dialog is not where it gets debugged.
+            reason: /active assistant tabs/i.test(message)
+              ? 'Its assistant tabs will be closed.'
+              : 'Deleting anyway discards uncommitted work.',
             type: 'open-workspace-delete-confirm',
             workspaceId: effect.workspaceId,
             workspaceLabel: workspace?.branch ?? workspace?.name ?? 'this workspace',
           })
+        } finally {
+          endWorkspaceDelete(effect.workspaceId)
         }
       })()
       return

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
@@ -94,7 +95,7 @@ export type ModalAction =
       projectId: string
       workspaceId: string
       workspaceLabel: string
-      reason: string
+      reason?: string
       closeTabs: boolean
       force: boolean
     }

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/state/types.ts

@@ -648,7 +648,7 @@ export interface ModalWorkspaceDeleteConfirm extends ModalBase {
   projectId: string
   workspaceId: string
   workspaceLabel: string
-  reason: string
+  reason?: string
   closeTabs: boolean
   /** Whether confirming force-deletes — true only after a recoverable failure. */
   force: boolean

package/src/state/workspace-delete-store.ts

@@ -0,0 +1,32 @@
+import { useStore } from 'zustand'
+import { createStore } from 'zustand/vanilla'
+
+/**
+ * Workspace deletes in flight, keyed by workspace id, valued by the label to
+ * show for them. Its own store rather than a slice of `AppState`: nothing here
+ * survives the operation, no reducer decides anything about it, and the side
+ * effect that owns the git work can set it without a dispatch round-trip.
+ */
+interface WorkspaceDeleteState {
+  deleting: Record<string, string>
+}
+
+const workspaceDeleteStore = createStore<WorkspaceDeleteState>(() => ({ deleting: {} }))
+
+export function beginWorkspaceDelete(workspaceId: string, label: string): void {
+  workspaceDeleteStore.setState((state) => ({
+    deleting: { ...state.deleting, [workspaceId]: label },
+  }))
+}
+
+export function endWorkspaceDelete(workspaceId: string): void {
+  workspaceDeleteStore.setState((state) => {
+    const deleting = { ...state.deleting }
+    delete deleting[workspaceId]
+    return { deleting }
+  })
+}
+
+export function useWorkspaceDeleteStore<T>(selector: (state: WorkspaceDeleteState) => T): T {
+  return useStore(workspaceDeleteStore, selector)
+}

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}
+        />
       )}
     </>
   )