@brimveyn/aimux 1.9.0 → 1.9.1

package/src/ui/components/{use-sidebar-branch.ts → layout/sidebar/use-sidebar-branch.ts}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-import { getCurrentBranch } from '../git-branch'
+import { getCurrentBranch } from '../../../git-branch'
 
 const BRANCH_POLL_INTERVAL_MS = 5_000
 

package/src/ui/components/{split-layout.tsx → layout/split-layout.tsx}

@@ -1,17 +1,17 @@
 import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
-import type { TerminalContentOrigin } from '../../input/raw-input-handler'
-import type { FocusMode, TabSession } from '../../state/types'
+import type { TerminalContentOrigin } from '../../../input/raw-input-handler'
+import type { FocusMode, TabSession } from '../../../state/types'
 
-import { logInputDebug } from '../../debug/input-log'
+import { logInputDebug } from '../../../debug/input-log'
 import {
   computePaneRects,
   type LayoutNode,
   PANE_BORDER,
   type PaneRect,
   type SplitDirection,
-} from '../../state/layout-tree'
-import { useTokens } from '../theme'
+} from '../../../state/layout-tree'
+import { useTokens } from '../../theme'
 import { TerminalPane } from './terminal-pane'
 
 const PANE_CHROME = PANE_BORDER

package/src/ui/components/{status-bar.tsx → layout/status-bar.tsx}

@@ -1,11 +1,11 @@
-import type { AppState } from '../../state/types'
+import type { AppState } from '../../../state/types'
 
-import { version as APP_VERSION } from '../../../package.json'
-import { useAppStore } from '../../state/app-store'
-import { useKeymap } from '../keymap-context'
-import { getStatusBarModel } from '../status-bar-model'
-import { getCurrentTokens, useBg, useTokens } from '../theme'
-import { AIUsageIndicator } from './ai-usage-indicator'
+import { version as APP_VERSION } from '../../../../package.json'
+import { useAppStore } from '../../../state/app-store'
+import { useKeymap } from '../../keymap-context'
+import { getStatusBarModel } from '../../status-bar-model'
+import { getCurrentTokens, useBg, useTokens } from '../../theme'
+import { AIUsageIndicator } from '../overlays/ai-usage/ai-usage-indicator'
 
 function getModeColor(focusMode: AppState['focusMode']): string {
   const t = getCurrentTokens()

package/src/ui/components/{terminal-pane.tsx → layout/terminal-pane.tsx}

@@ -2,19 +2,19 @@ import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
 import { memo, type ReactNode } from 'react'
 
-import type { TerminalContentOrigin } from '../../input/raw-input-handler'
-import type { TabSession, TerminalSnapshot, TerminalSpan } from '../../state/types'
+import type { TerminalContentOrigin } from '../../../input/raw-input-handler'
+import type { TabSession, TerminalSnapshot, TerminalSpan } from '../../../state/types'
 
-import { logInputDebug } from '../../debug/input-log'
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { type ContextMenuItem, openContextMenu } from '../context-menu/controller'
-import { getCurrentTokens, useBg, useTokens } from '../theme'
-import { ContextMenuBox } from './context-menu-box'
+import { logInputDebug } from '../../../debug/input-log'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
+import { type ContextMenuItem, openContextMenu } from '../../context-menu/controller'
+import { getCurrentTokens, useBg, useTokens } from '../../theme'
+import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
 
 interface TerminalPaneProps {
   tab?: TabSession
   tabId?: string
-  focusMode: import('../../state/types').FocusMode
+  focusMode: import('../../../state/types').FocusMode
   isActive?: boolean
   contentOrigin: TerminalContentOrigin
   mouseForwardingEnabled: boolean

package/src/ui/components/{ai-usage-modal.tsx → modals/app/ai-usage-modal.tsx}

@@ -1,12 +1,16 @@
 import type { AIUsageTool } from '@brimveyn/aimux-config'
 import type { ReactNode } from 'react'
 
-import type { UsagePaceStage, UsageSnapshot, UsageWindow } from '../../services/ai-usage/types'
-
-import { useAIUsageStore } from '../../state/ai-usage-store'
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { ModalShell } from './modal-shell'
+import type {
+  UsagePaceStage,
+  UsageSnapshot,
+  UsageWindow,
+} from '../../../../services/ai-usage/types'
+
+import { useAIUsageStore } from '../../../../state/ai-usage-store'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { ModalShell } from '../shared/modal-shell'
 
 const TOOL_TITLE: Record<AIUsageTool, string> = {
   claude: 'Claude',

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

@@ -2,12 +2,12 @@ import type { ModeId } from '@brimveyn/aimux-config'
 
 import { 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 { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { Picker, type PickerItem } from './picker'
+import { collectHelpEntries, HELP_MODE_LABELS } from '../../../../input/keymap/help-entries'
+import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { useKeymap } from '../../../keymap-context'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface HelpModalProps {
   filter: string | null

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

@@ -1,7 +1,7 @@
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { ListItem } from './list-item'
-import { ModalShell } from './modal-shell'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { ListItem } from '../../primitives/list-item'
+import { ModalShell } from '../shared/modal-shell'
 
 interface UpdateAvailableModalProps {
   currentVersion: string

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

@@ -1,14 +1,14 @@
 import { isAutoCommitEnabled } from '@brimveyn/aimux-config'
 import { useEffect, useState } from 'react'
 
-import type { ModeId } from '../../input/modes/types'
-
-import { useAppStore } from '../../state/app-store'
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { InputField } from './input-field'
-import { ModalShell } from './modal-shell'
+import type { ModeId } from '../../../../input/modes/types'
+
+import { useAppStore } from '../../../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { InputField } from '../../primitives/input-field'
+import { ModalShell } from '../shared/modal-shell'
 
 interface GitCommitModalProps {
   activeField: 'title' | 'body'

package/src/ui/components/modals/sessions/create-session-modal.tsx

@@ -0,0 +1,79 @@
+import type { DirectoryResult } from '../../../../state/types'
+
+import { abbreviatePath } from '../../../path-format'
+import { getCurrentTokens, useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { AutoComplete, Form, type FormOptionItem, TextField } from '../shared/form'
+
+const VISIBLE_ROWS = 8
+
+function getDirectoryResultIcon(result: DirectoryResult): string {
+  if (result.type === 'worktree') return '\u{e728}'
+  if (result.type === 'workspace') return '\u{f07c}'
+  return '\u{e702}'
+}
+
+function getDirectoryResultColor(result: DirectoryResult): string {
+  const t = getCurrentTokens()
+  if (result.type === 'worktree') return t.palette.warning
+  if (result.type === 'workspace') return t.accent
+  return t.palette.primary
+}
+
+interface CreateSessionModalProps {
+  activeField: 'directory' | 'name'
+  directoryQuery: string
+  sessionName: string
+  results: DirectoryResult[]
+  selectedIndex: number
+  pendingProjectPath: string | null
+}
+
+export function CreateSessionModal({
+  activeField,
+  directoryQuery,
+  pendingProjectPath,
+  results,
+  selectedIndex,
+  sessionName,
+}: CreateSessionModalProps) {
+  const t = useTokens()
+  const dirActive = activeField === 'directory'
+  const nameActive = activeField === 'name'
+
+  const items: FormOptionItem[] = results.map((result) => {
+    return {
+      key: result.path,
+      leading: <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>,
+      title: (active) => (
+        <text fg={active ? t.palette.ink : t.muted}>{abbreviatePath(result.path)}</text>
+      ),
+    }
+  })
+
+  return (
+    <Form
+      title="Create workspace"
+      keybindsModeId="modal.create-session"
+      width={uiTokens.modalWidth.xl}
+    >
+      <AutoComplete
+        active={dirActive}
+        label="Search projects"
+        placeholder="Type a project name..."
+        value={directoryQuery}
+        displayValue={pendingProjectPath ? abbreviatePath(pendingProjectPath) : directoryQuery}
+        items={items}
+        selectedIndex={selectedIndex}
+        maxVisibleRows={VISIBLE_ROWS}
+        emptyState={
+          <text fg={t.muted}>
+            {directoryQuery.length > 0 ? 'No matches' : 'Type a project name to search...'}
+          </text>
+        }
+      />
+
+      <TextField active={nameActive} label="Workspace name" value={sessionName} />
+    </Form>
+  )
+}

package/src/ui/components/modals/sessions/session-name-modal.tsx

@@ -0,0 +1,10 @@
+import { uiTokens } from '../../../ui-tokens'
+import { Form, TextField } from '../shared/form'
+
+export function SessionNameModal({ title, value }: { title: string; value: string }) {
+  return (
+    <Form title={title} keybindsModeId="modal.session-name" width={uiTokens.modalWidth.md}>
+      <TextField active value={value} />
+    </Form>
+  )
+}

package/src/ui/components/{session-picker-modal.tsx → modals/sessions/session-picker-modal.tsx}

@@ -1,12 +1,12 @@
-import type { SessionRecord } from '../../state/types'
+import type { SessionRecord } from '../../../../state/types'
 
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { filterSessions } from '../../state/selectors'
-import { abbreviatePath } from '../path-format'
-import { orderSessionsForDisplay } from '../session-ordering'
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { Picker, type PickerItem } from './picker'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { filterSessions } from '../../../../state/selectors'
+import { abbreviatePath } from '../../../path-format'
+import { orderSessionsForDisplay } from '../../../session-ordering'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface SessionPickerModalProps {
   sessions: SessionRecord[]

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

@@ -0,0 +1,164 @@
+import type { ModeId } from '@brimveyn/aimux-config'
+
+import { type ReactNode } from 'react'
+
+import { useTokens } from '../../../theme'
+import { InputField } from '../../primitives/input-field'
+import { ListItem } from '../../primitives/list-item'
+import { ModalShell } from './modal-shell'
+
+interface FormProps {
+  children: ReactNode
+  footer?: ReactNode
+  keybindsModeId?: ModeId
+  listGap?: number
+  subtitle?: string
+  title: string
+  width: number | `${number}%`
+}
+
+interface FieldLabelProps {
+  active?: boolean
+  children?: ReactNode
+  description?: ReactNode
+}
+
+interface TextFieldProps {
+  active: boolean
+  cursorPos?: number
+  description?: ReactNode
+  label?: ReactNode
+  placeholder?: string
+  value: string
+}
+
+type FormOptionContent = ReactNode | ((active: boolean) => ReactNode)
+
+export interface FormOptionItem {
+  key: string
+  leading?: FormOptionContent
+  subtitle?: FormOptionContent
+  title: FormOptionContent
+  trailing?: FormOptionContent
+  onClick?: () => void
+}
+
+interface AutoCompleteProps {
+  active: boolean
+  cursorPos?: number
+  displayValue?: string
+  emptyState?: ReactNode
+  items: FormOptionItem[]
+  label: ReactNode
+  maxVisibleRows?: number
+  onHover?: (index: number) => void
+  placeholder?: string
+  selectedIndex: number
+  value: string
+}
+
+export function Form({
+  children,
+  footer,
+  keybindsModeId,
+  listGap,
+  subtitle,
+  title,
+  width,
+}: FormProps) {
+  return (
+    <ModalShell
+      title={title}
+      subtitle={subtitle}
+      width={width}
+      keybindsModeId={keybindsModeId}
+      listGap={listGap}
+      footer={footer}
+    >
+      {children}
+    </ModalShell>
+  )
+}
+
+export function FieldLabel({ active = false, children, description }: FieldLabelProps) {
+  const t = useTokens()
+  return (
+    <box flexDirection="column">
+      {children ? <text fg={active ? t.palette.ink : t.muted}>{children}</text> : null}
+      {description ? <text fg={t.muted}>{description}</text> : null}
+    </box>
+  )
+}
+
+export function TextField({
+  active,
+  cursorPos,
+  description,
+  label,
+  placeholder,
+  value,
+}: TextFieldProps) {
+  return (
+    <box flexDirection="column">
+      {label || description ? (
+        <FieldLabel active={active} description={description}>
+          {label}
+        </FieldLabel>
+      ) : null}
+      <InputField active={active} value={value} cursorPos={cursorPos} placeholder={placeholder} />
+    </box>
+  )
+}
+
+function resolveItemContent(content: FormOptionContent | undefined, active: boolean): ReactNode {
+  return typeof content === 'function' ? content(active) : content
+}
+
+export function AutoComplete({
+  active,
+  cursorPos,
+  displayValue,
+  emptyState,
+  items,
+  label,
+  maxVisibleRows = 8,
+  onHover,
+  placeholder,
+  selectedIndex,
+  value,
+}: AutoCompleteProps) {
+  const scrollOffset = Math.max(0, selectedIndex - maxVisibleRows + 1)
+  const visibleItems = items.slice(scrollOffset, scrollOffset + maxVisibleRows)
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <TextField
+        active={active}
+        label={label}
+        value={active ? value : (displayValue ?? value)}
+        cursorPos={cursorPos}
+        placeholder={placeholder}
+      />
+      <box flexDirection="column" height={maxVisibleRows}>
+        {items.length === 0
+          ? (emptyState ?? null)
+          : visibleItems.map((item, index) => {
+              const optionIndex = scrollOffset + index
+              const optionActive = active && optionIndex === selectedIndex
+              return (
+                <ListItem
+                  key={item.key}
+                  active={optionActive}
+                  leading={resolveItemContent(item.leading, optionActive)}
+                  title={resolveItemContent(item.title, optionActive)}
+                  subtitle={resolveItemContent(item.subtitle, optionActive)}
+                  trailing={resolveItemContent(item.trailing, optionActive)}
+                  onHover={onHover ? () => onHover(optionIndex) : undefined}
+                  onClick={item.onClick}
+                />
+              )
+            })}
+      </box>
+    </box>
+  )
+}

package/src/ui/components/{modal-keybinds-overlay.tsx → modals/shared/modal-keybinds-overlay.tsx}

@@ -1,9 +1,9 @@
 import type { ModeId } from '@brimveyn/aimux-config'
 
-import { describeBindings } from '../../input/keymap/describe-bindings'
-import { useKeymap } from '../keymap-context'
-import { useTokens } from '../theme'
-import { Surface } from './surface'
+import { describeBindings } from '../../../../input/keymap/describe-bindings'
+import { useKeymap } from '../../../keymap-context'
+import { useTokens } from '../../../theme'
+import { Surface } from '../../primitives/surface'
 
 const KEYS_COLUMN_WIDTH = 12
 
@@ -16,7 +16,7 @@ export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProp
   const t = useTokens()
   const config = useKeymap()
   const bindings = describeBindings(config, modeId, {
-    dedupeByDescription: true,
+    mergeAlternativesByDescription: true,
     withDescriptionOnly: true,
   })
 
@@ -24,10 +24,10 @@ export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProp
   const entries = typeof limit === 'number' ? bindings.slice(0, limit) : bindings
 
   return (
-    <box position="absolute" bottom={3} right={5}>
+    <box position="absolute" bottom={0} right={0}>
       <Surface tone="elevated" paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1}>
         {entries.map((binding) => (
-          <box key={`${binding.keys}-${binding.description}`} flexDirection="row">
+          <box key={binding.description ?? binding.keys} flexDirection="row">
             <box width={KEYS_COLUMN_WIDTH}>
               <text fg={t.accent}>{binding.keysDisplay}</text>
             </box>

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

@@ -3,7 +3,7 @@ import type { ModeId } from '@brimveyn/aimux-config'
 import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
 import { type ReactNode } from 'react'
 
-import { useTokens, useTransparent } from '../theme'
+import { useTokens, useTransparent } from '../../../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
 
 interface ModalShellProps {

package/src/ui/components/{picker.tsx → modals/shared/picker.tsx}

@@ -4,9 +4,9 @@ import type { ScrollBoxRenderable } from '@opentui/core'
 import { useTerminalDimensions } from '@opentui/react'
 import { type ReactNode, useLayoutEffect, useRef } from 'react'
 
-import { useTokens } from '../theme'
-import { BareInput } from './bare-input'
-import { ListItem } from './list-item'
+import { useTokens } from '../../../theme'
+import { BareInput } from '../../primitives/bare-input'
+import { ListItem } from '../../primitives/list-item'
 import { ModalShell } from './modal-shell'
 
 export interface PickerItem {

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

@@ -0,0 +1,30 @@
+import { uiTokens } from '../../../ui-tokens'
+import { Form, TextField } from '../shared/form'
+
+interface SnippetEditorModalProps {
+  activeField: 'name' | 'content'
+  snippetName: string
+  snippetContent: string
+  isEditing: boolean
+}
+
+export function SnippetEditorModal({
+  activeField,
+  isEditing,
+  snippetContent,
+  snippetName,
+}: SnippetEditorModalProps) {
+  const nameActive = activeField === 'name'
+  const contentActive = activeField === 'content'
+
+  return (
+    <Form
+      title={isEditing ? 'Edit snippet' : 'Create snippet'}
+      keybindsModeId="modal.snippet-editor"
+      width={uiTokens.modalWidth.xl}
+    >
+      <TextField active={nameActive} label="Name" value={snippetName} />
+      <TextField active={contentActive} label="Content" value={snippetContent} />
+    </Form>
+  )
+}

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

@@ -1,10 +1,10 @@
-import type { SnippetRecord } from '../../state/types'
+import type { SnippetRecord } from '../../../../state/types'
 
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { filterSnippets } from '../../state/selectors'
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { Picker, type PickerItem } from './picker'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { filterSnippets } from '../../../../state/selectors'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface SnippetPickerModalProps {
   snippets: SnippetRecord[]

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

@@ -1,13 +1,12 @@
-import type { AssistantId } from '../../state/types'
+import type { AssistantId } from '../../../../state/types'
 
-import { getAllAssistantOptions, getAssistantOption } from '../../pty/command-registry'
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { filterAssistants } from '../../state/selectors'
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { InputField } from './input-field'
-import { ModalShell } from './modal-shell'
-import { Picker, type PickerItem } from './picker'
+import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { filterAssistants } from '../../../../state/selectors'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { Form, TextField } from '../shared/form'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface NewTabModalProps {
   selectedIndex: number
@@ -33,21 +32,19 @@ export function NewTabModal({
       getAllAssistantOptions(customCommands).find((o) => o.id === editingCommand) ??
       getAssistantOption(0)
     return (
-      <ModalShell
+      <Form
         title={`Edit command — ${option.label}`}
         keybindsModeId="modal.new-tab.editing-command"
         width={uiTokens.modalWidth.md}
       >
-        <box flexDirection="column">
-          <text fg={t.muted}>Custom command (blank to reset to default: {option.command})</text>
-          <InputField
-            active
-            value={editBuffer}
-            cursorPos={cursorPos}
-            placeholder={option.command}
-          />
-        </box>
-      </ModalShell>
+        <TextField
+          active
+          description={<>blank to reset to default: {option.command}</>}
+          value={editBuffer}
+          cursorPos={cursorPos}
+          placeholder={option.command}
+        />
+      </Form>
     )
   }
 

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

@@ -1,11 +1,11 @@
 import { useLayoutEffect, useMemo } from 'react'
 
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { filterThemeIds } from '../filter-themes'
-import { useTokens, useTransparent } from '../theme'
-import { type ThemeId, THEMES } from '../themes'
-import { uiTokens } from '../ui-tokens'
-import { Picker, type PickerItem } from './picker'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { filterThemeIds } from '../../../filter-themes'
+import { useTokens, useTransparent } from '../../../theme'
+import { type ThemeId, THEMES } from '../../../themes'
+import { uiTokens } from '../../../ui-tokens'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface ThemePickerModalProps {
   currentThemeId: ThemeId

package/src/ui/components/{ai-usage-indicator.tsx → overlays/ai-usage/ai-usage-indicator.tsx}

@@ -1,8 +1,8 @@
 import type { AIUsageTool } from '@brimveyn/aimux-config'
 
-import { useAIUsageStore } from '../../state/ai-usage-store'
-import { dispatchGlobal } from '../../state/dispatch-ref'
-import { useBg, useTokens } from '../theme'
+import { useAIUsageStore } from '../../../../state/ai-usage-store'
+import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { useBg, useTokens } from '../../../theme'
 
 const TOOL_ICON: Record<AIUsageTool, string> = {
   claude: 'CC',

package/src/ui/components/{context-menu-box.tsx → overlays/context-menu/context-menu-box.tsx}

@@ -1,7 +1,7 @@
 import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
 import type { BoxProps } from '@opentui/react'
 
-import { type ContextMenuItem, openContextMenu } from '../context-menu/controller'
+import { type ContextMenuItem, openContextMenu } from '../../../context-menu/controller'
 
 interface ContextMenuBoxProps extends BoxProps {
   rightClickMenu?: ContextMenuItem[]