@brimveyn/aimux 1.23.7 → 1.24.0

package/src/ui/components/layout/terminal-pane.tsx

@@ -44,12 +44,6 @@ interface TerminalPaneProps {
   junctionEdges?: JunctionEdges
 }
 
-function getBorderColor(isActive: boolean, focusMode: TerminalPaneProps['focusMode']): string {
-  const t = getCurrentTheme()
-  if (!isActive) return t.border
-  return focusMode === 'terminal-input' ? t.accent : t.primary
-}
-
 function renderSpan(span: TerminalSpan, key: string, softCursor: boolean): ReactNode {
   let node: ReactNode = span.text
 
@@ -177,15 +171,19 @@ const NOOP = (): void => {}
 // wraps) a wheel event bumps _scrollY, and opentui's onResize never re-clamps it,
 // so the offset sticks for the renderable's life: the viewport shifts up, dead
 // rows appear at the bottom, and the prompt scrolls off-screen after `clear`.
-// Pin the offset to 0 and disable the built-in wheel handler outright (it also
-// drives horizontal scroll once wrapMode is "none"). The event still bubbles to
-// forwardScrollEvent, so local scrollback / mouse-forwarding keep working, and
-// selection is unaffected (it's driven by the renderer, not handleScroll).
-// handleScroll is protected; reach it via Reflect, mirroring the scrollY reset
-// already used in TerminalPane.
+//
+// Kill the built-in wheel handler at its dispatch point: processMouseEvent calls
+// onMouseEvent() unconditionally after any React mouse listener, and
+// TextBufferRenderable.onMouseEvent() unconditionally calls handleScroll() for a
+// scroll event. Overriding onMouseEvent (rather than only handleScroll) is a
+// single deterministic no-op standing between every wheel step and _scrollY, so
+// the drift can no longer slip in on a path the later reset misses. Selection is
+// unaffected: it is driven by the renderer (startSelection/updateSelection), not
+// by onMouseEvent, which exists only to scroll. Both are protected; reach them
+// via Reflect, mirroring the scrollY reset already used elsewhere in the pane.
 const pinTerminalScroll = (node: TextRenderable | null): void => {
   if (!node) return
-  Reflect.set(node, 'handleScroll', NOOP)
+  Reflect.set(node, 'onMouseEvent', NOOP)
   if (node.scrollY !== 0) node.scrollY = 0
 }
 
@@ -498,9 +496,13 @@ export function TerminalPane({
   return (
     <box flexDirection="column" flexGrow={1} gap={0}>
       <ContextMenuBox
-        border
-        borderColor={getBorderColor(paneIsActive, focusMode)}
-        padding={0}
+        // No frame, in any state — not around the pane, not between two split
+        // panes, and nothing that colours itself by focus mode. What was the
+        // border is now plain padding: same one-cell inset, so the geometry
+        // PANE_BORDER describes and the resize/hit-test gutter both still hold,
+        // but the cells are painted in the editor background like everything
+        // else. Surfaces are told apart by their background alone.
+        padding={1}
         flexDirection="column"
         flexGrow={1}
         backgroundColor={editorBg}

package/src/ui/components/modals/app/help-modal.tsx

@@ -5,6 +5,7 @@ import { useCallback, useLayoutEffect, useMemo } from 'react'
 import { collectHelpEntries, HELP_MODE_LABELS } from '../../../../input/keymap/help-entries'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { useKeymap } from '../../../keymap-context'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -24,6 +25,7 @@ function matchesFilter(needle: string, ...fields: (string | undefined)[]): boole
 
 export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const config = useKeymap()
   const allEntries = useMemo(() => collectHelpEntries(config), [config])
   const scoped = useMemo(
@@ -50,21 +52,24 @@ export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModal
 
   const items = useMemo<PickerItem[]>(
     () =>
-      filtered.map((entry, index) => ({
-        group: entry.modeLabel,
-        key: `${entry.mode}::${entry.keysDisplay}::${entry.description ?? ''}::${index}`,
-        title: (
-          <text fg={t.textMuted} wrapMode="none">
-            {entry.description ?? ''}
-          </text>
-        ),
-        trailing: (
-          <text fg={t.textMuted} wrapMode="none">
-            {entry.keysDisplay}
-          </text>
-        ),
-      })),
-    [filtered, t]
+      filtered.map((entry, index) => {
+        const active = index === selectedIndex
+        return {
+          group: entry.modeLabel,
+          key: `${entry.mode}::${entry.keysDisplay}::${entry.description ?? ''}::${index}`,
+          title: (
+            <text fg={active ? ink : t.textMuted} wrapMode="none">
+              {entry.description ?? ''}
+            </text>
+          ),
+          trailing: (
+            <text fg={active ? ink : t.textMuted} wrapMode="none">
+              {entry.keysDisplay}
+            </text>
+          ),
+        }
+      }),
+    [filtered, ink, selectedIndex, t]
   )
 
   const handleHover = useCallback(

package/src/ui/components/modals/app/update-available-modal.tsx

@@ -1,3 +1,4 @@
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { ListItem } from '../../primitives/list-item'
@@ -20,6 +21,7 @@ export function UpdateAvailableModal({
   selectedIndex,
 }: UpdateAvailableModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   return (
     <ModalShell
       title="Update available"
@@ -36,7 +38,7 @@ export function UpdateAvailableModal({
               key={option.label}
               active={active}
               direction="row"
-              title={<text fg={active ? t.text : t.textMuted}>{option.label}</text>}
+              title={<text fg={active ? ink : t.textMuted}>{option.label}</text>}
             />
           )
         })}

package/src/ui/components/modals/git/git-commit-modal.tsx

@@ -172,9 +172,9 @@ export function GitCommitModal({
 
       {isConfirm || isGenerating || !isAutoCommitEnabled() ? null : (
         <box flexDirection="row" gap={1} marginTop={1} alignItems="center">
+          {/* Filled, not framed — the same button the setup widget uses. */}
           <box
-            border
-            borderColor={t.border}
+            backgroundColor={t.backgroundElement}
             paddingLeft={1}
             paddingRight={1}
             flexDirection="row"

package/src/ui/components/modals/projects/create-project-modal.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import type { DirectoryResult } from '../../../../state/types'
 
 import { abbreviatePath } from '../../../path-format'
+import { useSelectionInk } from '../../../selection-ink'
 import { getCurrentTheme, useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { AutoComplete, Form, type FormOptionItem, TextField } from '../shared/form'
@@ -40,6 +41,7 @@ export function CreateProjectModal({
   selectedIndex,
 }: CreateProjectModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const dirActive = activeField === 'directory'
   const nameActive = activeField === 'name'
 
@@ -47,12 +49,16 @@ export function CreateProjectModal({
     () =>
       results.map((result) => ({
         key: result.path,
-        leading: <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>,
+        leading: (active) => (
+          <text fg={active ? ink : getDirectoryResultColor(result)}>
+            {getDirectoryResultIcon(result)}
+          </text>
+        ),
         title: (active) => (
-          <text fg={active ? t.text : t.textMuted}>{abbreviatePath(result.path)}</text>
+          <text fg={active ? ink : t.textMuted}>{abbreviatePath(result.path)}</text>
         ),
       })),
-    [results, t]
+    [ink, results, t]
   )
 
   return (

package/src/ui/components/modals/projects/project-picker-modal.tsx

@@ -6,6 +6,7 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-
 import { filterProjects } from '../../../../state/selectors'
 import { abbreviatePath } from '../../../path-format'
 import { orderProjectsForDisplay } from '../../../project-ordering'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -44,6 +45,7 @@ export function ProjectPickerModal({
   selectedIndex,
 }: ProjectPickerModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const ordered = useMemo(() => orderProjectsForDisplay(projects), [projects])
   const filtered = useMemo(() => filterProjects(ordered, filter), [filter, ordered])
   const hasFilter = !!(filter != null && filter !== '')
@@ -59,10 +61,10 @@ export function ProjectPickerModal({
         onDelete: () => runSideEffectGlobal({ type: 'delete-selected-project' }),
         subtitle:
           project.projectPath != null && project.projectPath !== '' ? (
-            <text fg={t.textMuted}>{abbreviatePath(project.projectPath)}</text>
+            <text fg={active ? ink : t.textMuted}>{abbreviatePath(project.projectPath)}</text>
           ) : undefined,
         title: (
-          <text fg={active ? t.text : t.textMuted}>
+          <text fg={active ? ink : t.textMuted}>
             {formatProjectLine(project, currentProjectId, currentTabCount, displayIndex)}
           </text>
         ),
@@ -72,13 +74,11 @@ export function ProjectPickerModal({
       key: '__create-new__',
       onClick: () => runSideEffectGlobal({ type: 'confirm-selected-project' }),
       title: (
-        <text fg={selectedIndex === filtered.length ? t.text : t.textMuted}>
-          Create new project
-        </text>
+        <text fg={selectedIndex === filtered.length ? ink : t.textMuted}>Create new project</text>
       ),
     }
     return [...projectItems, createNewItem]
-  }, [currentProjectId, currentTabCount, filtered, ordered, selectedIndex, t])
+  }, [currentProjectId, currentTabCount, filtered, ink, ordered, selectedIndex, t])
 
   const handleHover = useCallback(
     (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),

package/src/ui/components/modals/settings/settings-search-modal.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react'
 import { filterSettingRows } from '../../../../settings/search'
 import { useAppStore } from '../../../../state/app-store'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { RowValue } from '../../settings/row-value'
@@ -28,25 +29,29 @@ export function SettingsSearchModal({
   selectedIndex,
 }: SettingsSearchModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const projects = useAppStore((s) => s.projects)
   const hits = useMemo(() => filterSettingRows(projects, filter), [projects, filter])
 
   const items = useMemo<PickerItem[]>(
     () =>
-      hits.map((hit) => ({
-        group: hit.sectionLabel,
-        key: hit.row.id,
-        // Acts on the selection, which the hover just set — the same two-step
-        // every other picker's rows use.
-        onClick: () => runSideEffectGlobal({ type: 'confirm-settings-search' }),
-        subtitle:
-          hit.row.description != null && hit.row.description !== '' ? (
-            <text fg={t.textMuted}>{hit.row.description}</text>
-          ) : undefined,
-        title: <text fg={t.text}>{hit.row.label}</text>,
-        trailing: <RowValue row={hit.row} />,
-      })),
-    [hits, t]
+      hits.map((hit, index) => {
+        const active = index === selectedIndex
+        return {
+          group: hit.sectionLabel,
+          key: hit.row.id,
+          // Acts on the selection, which the hover just set — the same two-step
+          // every other picker's rows use.
+          onClick: () => runSideEffectGlobal({ type: 'confirm-settings-search' }),
+          subtitle:
+            hit.row.description != null && hit.row.description !== '' ? (
+              <text fg={active ? ink : t.textMuted}>{hit.row.description}</text>
+            ) : undefined,
+          title: <text fg={active ? ink : t.text}>{hit.row.label}</text>,
+          trailing: <RowValue fg={active ? ink : undefined} row={hit.row} />,
+        }
+      }),
+    [hits, ink, selectedIndex, t]
   )
 
   const handleHover = useCallback(

package/src/ui/components/modals/shared/modal-shell.tsx

@@ -37,11 +37,21 @@ export function ModalShell({
       justifyContent="center"
       alignItems="center"
     >
+      {/* No frame, like everything else — the panel background is what lifts the
+          modal off the terminal, and the extra column either side is what makes
+          it read as a card rather than a box drawn on the screen.
+
+          Transparent mode is the one exception that keeps the border: there is
+          no background there to lift anything, so without a rule the modal has
+          no edge at all. */}
       <box
-        border
+        border={transparent}
         borderColor={t.border}
         backgroundColor={bg}
-        padding={1}
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
         width={width}
         renderAfter={transparent ? fillBorderedBoxInterior : undefined}
       >

package/src/ui/components/modals/shared/picker.tsx

@@ -4,6 +4,7 @@ import type { MouseEvent as OtuiMouseEvent, ScrollBoxRenderable } from '@opentui
 import { useTerminalDimensions } from '@opentui/react'
 import { type ReactNode, useCallback, useLayoutEffect, useMemo, useRef } from 'react'
 
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { BareInput } from '../../primitives/bare-input'
 import { ListItem } from '../../primitives/list-item'
@@ -48,7 +49,10 @@ function PickerItemCtas({
   onDelete?: () => void
   onWorkspace?: () => void
 }) {
-  const t = useTheme()
+  // These only ever render on the selected row, which is filled with `primary` —
+  // so they wear its ink, not the primary/warning/error they would carry
+  // anywhere else. `[edit]` in primary on primary is nothing at all.
+  const ink = useSelectionInk()
   const handleEdit = useCallback(
     (event: OtuiMouseEvent) => {
       event.stopPropagation()
@@ -74,17 +78,17 @@ function PickerItemCtas({
     <box flexDirection="row" gap={1}>
       {onEdit ? (
         <box onMouseDown={handleEdit}>
-          <text fg={t.primary}>[edit]</text>
+          <text fg={ink}>[edit]</text>
         </box>
       ) : null}
       {onWorkspace ? (
         <box onMouseDown={handleWorkspace}>
-          <text fg={t.warning}>[WT]</text>
+          <text fg={ink}>[WT]</text>
         </box>
       ) : null}
       {onDelete ? (
         <box onMouseDown={handleDelete}>
-          <text fg={t.error}>[del]</text>
+          <text fg={ink}>[del]</text>
         </box>
       ) : null}
     </box>

package/src/ui/components/modals/snippets/snippet-picker-modal.tsx

@@ -5,6 +5,7 @@ import type { SnippetRecord } from '../../../../state/types'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { filterSnippets } from '../../../../state/selectors'
 import { isConfigSnippetId } from '../../../../state/snippet-catalog'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -33,6 +34,7 @@ export function SnippetPickerModal({
   snippets,
 }: SnippetPickerModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const filtered = useMemo(() => filterSnippets(snippets, filter), [filter, snippets])
 
   const items = useMemo<PickerItem[]>(
@@ -52,21 +54,21 @@ export function SnippetPickerModal({
           onEdit: fromConfig
             ? undefined
             : () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
-          subtitle: <text fg={t.textMuted}>{truncateContent(snippet.content)}</text>,
+          subtitle: <text fg={active ? ink : t.textMuted}>{truncateContent(snippet.content)}</text>,
           title: (
             <box flexDirection="row">
-              <text fg={active ? t.text : t.textMuted}>
+              <text fg={active ? ink : t.textMuted}>
                 <strong>{snippet.name}</strong>
               </text>
               {snippet.trigger != null && snippet.trigger !== '' ? (
-                <text fg={t.textMuted}>{` :${snippet.trigger}`}</text>
+                <text fg={active ? ink : t.textMuted}>{` :${snippet.trigger}`}</text>
               ) : null}
-              {fromConfig ? <text fg={t.textMuted}>{' [config]'}</text> : null}
+              {fromConfig ? <text fg={active ? ink : t.textMuted}>{' [config]'}</text> : null}
             </box>
           ),
         }
       }),
-    [filtered, selectedIndex, t]
+    [filtered, ink, selectedIndex, t]
   )
 
   const handleHover = useCallback(

package/src/ui/components/modals/tabs/new-tab-modal.tsx

@@ -5,6 +5,7 @@ import type { AssistantId } from '../../../../state/types'
 import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { getNewTabAssistantOptions } from '../../../../state/selectors'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Form, TextField } from '../shared/form'
@@ -35,6 +36,7 @@ export function NewTabModal({
   selectedIndex,
 }: NewTabModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const excludeTerminal = pendingPrompt != null && pendingPrompt.trim() !== ''
   const footerText =
     pendingPrompt == null
@@ -66,16 +68,16 @@ export function NewTabModal({
             dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
           subtitle: (
             <box flexDirection="column">
-              <text fg={t.textMuted}>{option.description}</text>
+              <text fg={active ? ink : t.textMuted}>{option.description}</text>
               {customCmd != null && customCmd !== '' ? (
-                <text fg={t.primary}>{customCmd}</text>
+                <text fg={active ? ink : t.primary}>{customCmd}</text>
               ) : null}
             </box>
           ),
-          title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
+          title: <text fg={active ? ink : t.textMuted}>{option.label}</text>,
         }
       }),
-    [customCommands, filtered, selectedIndex, t]
+    [customCommands, filtered, ink, selectedIndex, t]
   )
 
   if (editingCommand !== null) {
@@ -86,20 +88,16 @@ export function NewTabModal({
         keybindsModeId="modal.new-tab.editing-command"
         width={uiTokens.modalWidth.md}
       >
-        <TextField
-          active
-          description={<>blank to reset to default: {option.command}</>}
-          value={editBuffer}
-          cursorPos={cursorPos}
-          placeholder={option.command}
-        />
+        {/* No description: the placeholder is the default command, so the field
+            already shows what leaving it blank gets you. */}
+        <TextField active value={editBuffer} cursorPos={cursorPos} placeholder={option.command} />
       </Form>
     )
   }
 
   return (
     <Picker
-      title="New tab: choose assistant"
+      title="New tab"
       keybindsModeId="modal.new-tab.command-edit"
       width={uiTokens.modalWidth.md}
       gap={1}

package/src/ui/components/modals/themes/theme-picker-modal.tsx

@@ -4,6 +4,7 @@ import type { ThemeId } from '../../../themes'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { filterThemeIds, themeDisplayName } from '../../../filter-themes'
+import { useSelectionInk } from '../../../selection-ink'
 import { useMode, useTheme, useTransparent } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -27,6 +28,7 @@ export function ThemePickerModal({
   selectedIndex,
 }: ThemePickerModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const transparent = useTransparent()
   const mode = useMode()
   const filtered = useMemo(() => filterThemeIds(filter), [filter])
@@ -48,11 +50,11 @@ export function ThemePickerModal({
             dispatchGlobal({ type: 'close-modal' })
             runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
           },
-          title: <text fg={active ? t.text : t.textMuted}>{themeDisplayName(id)}</text>,
-          trailing: isCurrent ? <text fg={t.primary}>current</text> : undefined,
+          title: <text fg={active ? ink : t.textMuted}>{themeDisplayName(id)}</text>,
+          trailing: isCurrent ? <text fg={active ? ink : t.primary}>current</text> : undefined,
         }
       }),
-    [currentThemeId, effectiveIndex, filtered, t]
+    [currentThemeId, effectiveIndex, filtered, ink, t]
   )
 
   const handleHover = useCallback(
@@ -68,13 +70,15 @@ export function ThemePickerModal({
       filter={filter}
       cursorPos={cursorPos}
       footer={
-        <box flexDirection="column" gap={0}>
-          <text fg={t.textMuted}>
-            {filtered.length === 0 ? '' : ` ${effectiveIndex + 1} / ${filtered.length}`}
-          </text>
-          <text fg={t.textMuted}>{` transparent: ${transparent ? 'on' : 'off'} (ctrl-t)`}</text>
-          <text fg={t.textMuted}>{` mode: ${mode} (ctrl-l)`}</text>
-        </box>
+        <text fg={t.textMuted}>
+          {[
+            filtered.length === 0 ? '' : `${effectiveIndex + 1}/${filtered.length}`,
+            `transparent ${transparent ? 'on' : 'off'} (ctrl-t)`,
+            `mode ${mode} (ctrl-l)`,
+          ]
+            .filter((part) => part !== '')
+            .join(' · ')}
+        </text>
       }
       items={items}
       selectedIndex={effectiveIndex}

package/src/ui/components/modals/workspace/create-workspace-modal.tsx

@@ -4,6 +4,7 @@ import type { WorkspaceRecord } from '../../../../state/types'
 
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { buildBaseRefOptions } from '../../../../state/selectors'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { AutoComplete, Form, type FormOptionItem, TextField } from '../shared/form'
@@ -35,6 +36,7 @@ export function CreateWorkspaceModal({
   workspaces,
 }: CreateWorkspaceModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
 
   const handleHover = useCallback(
     (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
@@ -45,24 +47,30 @@ export function CreateWorkspaceModal({
     () =>
       buildBaseRefOptions(workspaces, baseBranches, baseQuery).map((option) => ({
         key: option.ref,
-        leading: (
-          <text fg={option.kind === 'workspace' ? t.warning : t.textMuted}>
-            {option.kind === 'workspace' ? '\u{e728}' : '\u{e702}'}
-          </text>
-        ),
+        leading: (active) => {
+          let fg = t.textMuted
+          if (active) fg = ink
+          else if (option.kind === 'workspace') fg = t.warning
+          return <text fg={fg}>{option.kind === 'workspace' ? '\u{e728}' : '\u{e702}'}</text>
+        },
         subtitle:
-          option.kind === 'workspace' ? (
-            <text fg={t.textMuted}>workspace: {option.detail}</text>
-          ) : null,
-        title: (active) => <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
+          option.kind === 'workspace'
+            ? (active) => <text fg={active ? ink : t.textMuted}>workspace: {option.detail}</text>
+            : null,
+        title: (active) => <text fg={active ? ink : t.textMuted}>{option.label}</text>,
       })),
-    [baseBranches, baseQuery, t, workspaces]
+    [baseBranches, baseQuery, ink, t, workspaces]
   )
 
   const baseActive = activeField === 'base'
   return (
+    // The title asks the question and the subtitle answers what happens with the
+    // answer, so the prompt field needs no label of its own — a heading, a
+    // question, a paragraph and a placeholder all saying the same thing was four
+    // lines of chrome above an empty box.
     <Form
       title="New workspace"
+      subtitle="What do you want to work on? Names the workspace and its branch, and is sent to the assistant."
       keybindsModeId="modal.create-workspace"
       width={uiTokens.modalWidth.xl}
     >
@@ -70,11 +78,9 @@ export function CreateWorkspaceModal({
         <box flexDirection="column">
           <TextField
             active={activeField === 'prompt'}
-            label="What do you want to work on? (optional)"
-            description="Sent to the assistant, and names the workspace and its branch. Leave empty for a bare workspace."
             value={prompt}
             cursorPos={activeField === 'prompt' ? cursorPos : undefined}
-            placeholder="Describe the task, or leave empty..."
+            placeholder="Describe the task, or leave empty for a bare workspace..."
             minLines={PROMPT_LINES}
           />
           {branchError != null && branchError !== '' ? (
@@ -94,7 +100,6 @@ export function CreateWorkspaceModal({
           onHover={handleHover}
           emptyState={<text fg={t.textMuted}>No branches found</text>}
         />
-        <text fg={t.textMuted}>Ctrl+Enter newline · Tab picks a base · Enter creates</text>
       </box>
     </Form>
   )

package/src/ui/components/modals/workspace/workspace-move-modal.tsx

@@ -4,6 +4,7 @@ import type { ModalWorkspaceMove, WorkspaceRecord } from '../../../../state/type
 
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { formatDivergence } from '../../../../state/project-workspaces'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { ListItem } from '../../primitives/list-item'
@@ -34,6 +35,7 @@ export function WorkspaceMoveModal({
   workspaces,
 }: WorkspaceMoveModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const source = useMemo(
     () => workspaces.find((w) => w.id === sourceWorkspaceId),
     [sourceWorkspaceId, workspaces]
@@ -106,11 +108,11 @@ export function WorkspaceMoveModal({
                 onHoverIndex={handleSelectIndex}
                 onClickIndex={handleSelectIndex}
                 title={
-                  <text fg={active ? t.text : t.textMuted} wrapMode="none">
+                  <text fg={active ? ink : t.textMuted} wrapMode="none">
                     {label}
                     {workspace.source === 'primary' ? ' (primary)' : ''}
                     {ahead !== '' ? ` ${ahead}` : ''}
-                    {dirty ? <span fg={t.warning}> ●</span> : null}
+                    {dirty ? <span fg={active ? ink : t.warning}> ●</span> : null}
                   </text>
                 }
               />