@brimveyn/aimux 1.9.0 → 1.9.2

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

@@ -2,18 +2,22 @@ import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
 import { useMemo, useRef, useState } from 'react'
 
-import type { SessionRecord, SessionStatus } from '../../state/types'
+import type { SessionRecord, SessionStatus } from '../../../state/types'
 
-import { useAppStore } from '../../state/app-store'
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
+import { useAppStore } from '../../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
 // eslint-disable-next-line no-duplicate-imports
-import { IDLE_SESSION_STATUS } from '../../state/types'
-import { useBusySpinner } from '../hooks/use-busy-spinner'
-import { moveIdToIdPosition, orderSessionsForDisplay } from '../session-ordering'
-import { useBg, useTokens } from '../theme'
-import { ContextMenuBox } from './context-menu-box'
+import { IDLE_SESSION_STATUS } from '../../../state/types'
+import { useBusySpinner } from '../../hooks/use-busy-spinner'
+import { moveIdToIdPosition, orderSessionsForDisplay } from '../../session-ordering'
+import { useBg, useTokens } from '../../theme'
+import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
 
-export function SessionBar() {
+interface SessionBarProps {
+  forceVisible?: boolean
+}
+
+export function SessionBar({ forceVisible = false }: SessionBarProps) {
   const t = useTokens()
   const headerBg = useBg('elevated')
   const sessions = useAppStore((s) => s.sessions)
@@ -27,7 +31,7 @@ export function SessionBar() {
   const chipRefs = useRef(new Map<string, BoxRenderable>())
 
   const ordered = useMemo(() => orderSessionsForDisplay(sessions), [sessions])
-  if (!bar.visible || ordered.length === 0) return null
+  if ((!bar.visible && !forceVisible) || ordered.length === 0) return null
 
   const visibleSessions =
     dragOrder !== null
@@ -103,6 +107,7 @@ export function SessionBar() {
     <box
       width="100%"
       flexDirection="row"
+      flexShrink={0}
       paddingLeft={1}
       paddingRight={1}
       backgroundColor={headerBg}
@@ -205,6 +210,7 @@ function SessionChip({
   const idleColor = t.palette.success
   const workingColor = t.palette.primary
   const waitingColor = t.palette.warning
+  const [hovered, setHovered] = useState(false)
 
   return (
     <ContextMenuBox
@@ -214,6 +220,8 @@ function SessionChip({
       paddingRight={1}
       backgroundColor={bgColor}
       rightClickMenu={rightClickMenu}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
       onMouseDown={(e) => {
         e.preventDefault()
         onMouseDown(e)
@@ -247,9 +255,24 @@ function SessionChip({
       <text fg={labelColor} selectable={false}>
         [{index}] {session.name}
       </text>
-      <text fg={t.hover} selectable={false}>
-        {' '}
-      </text>
+      {hovered ? (
+        <box
+          paddingLeft={1}
+          onMouseDown={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' })
+          }}
+        >
+          <text fg={t.muted} selectable={false}>
+            ×
+          </text>
+        </box>
+      ) : (
+        <text fg={t.hover} selectable={false}>
+          {' '}
+        </text>
+      )}
     </ContextMenuBox>
   )
 }

package/src/ui/components/{sidebar-group-metadata.ts → layout/sidebar/sidebar-group-metadata.ts}

@@ -1,6 +1,6 @@
-import type { TabSession } from '../../state/types'
+import type { TabSession } from '../../../../state/types'
 
-import { allLeafIds, type LayoutNode } from '../../state/layout-tree'
+import { allLeafIds, type LayoutNode } from '../../../../state/layout-tree'
 
 export interface TabGroupInfo {
   inLayout: boolean

package/src/ui/components/{sidebar.tsx → layout/sidebar/sidebar.tsx}

@@ -5,12 +5,12 @@ import {
 } from '@opentui/core'
 import { memo, useMemo, useRef } from 'react'
 
-import { useAppStore } from '../../state/app-store'
-import { dispatchGlobal } from '../../state/dispatch-ref'
-import { getCurrentTokens, type ThemeTokens, useBg, useTokens } from '../theme'
-import { ContextMenuBox } from './context-menu-box'
-import { buildGitPaneContextMenu } from './git-pane-context-menu'
-import { GitPaneWidget } from './git-pane-widget'
+import { useAppStore } from '../../../../state/app-store'
+import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { getCurrentTokens, type ThemeTokens, useBg, useTokens } from '../../../theme'
+import { buildGitPaneContextMenu } from '../../git/pane/git-pane-context-menu'
+import { GitPaneWidget } from '../../git/pane/git-pane-widget'
+import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
 import { buildTabGroupInfo } from './sidebar-group-metadata'
 import { TabItem } from './tab-item'
 import { useSidebarAutoScroll } from './use-sidebar-auto-scroll'

package/src/ui/components/{tab-item.tsx → layout/sidebar/tab-item.tsx}

@@ -1,11 +1,11 @@
 import { useState } from 'react'
 
-import type { TabSession } from '../../state/types'
+import type { TabSession } from '../../../../state/types'
 
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { useBusySpinner } from '../hooks/use-busy-spinner'
-import { getCurrentTokens, useTokens } from '../theme'
-import { ContextMenuBox } from './context-menu-box'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { useBusySpinner } from '../../../hooks/use-busy-spinner'
+import { getCurrentTokens, useTokens } from '../../../theme'
+import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
 
 interface TabItemProps {
   id?: string

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 {