@brimveyn/aimux 1.21.0 → 1.22.2

package/src/ui/components/modals/{sessions/create-session-modal.tsx → projects/create-project-modal.tsx}

@@ -10,35 +10,35 @@ import { AutoComplete, Form, type FormOptionItem, TextField } from '../shared/fo
 const VISIBLE_ROWS = 8
 
 function getDirectoryResultIcon(result: DirectoryResult): string {
-  if (result.type === 'worktree') return '\u{e728}'
-  if (result.type === 'workspace') return '\u{f07c}'
+  if (result.type === 'workspace') return '\u{e728}'
+  if (result.type === 'project') return '\u{f07c}'
   return '\u{e702}'
 }
 
 function getDirectoryResultColor(result: DirectoryResult): string {
   const t = getCurrentTheme()
-  if (result.type === 'worktree') return t.warning
-  if (result.type === 'workspace') return t.info
+  if (result.type === 'workspace') return t.warning
+  if (result.type === 'project') return t.info
   return t.text
 }
 
-interface CreateSessionModalProps {
+interface CreateProjectModalProps {
   activeField: 'directory' | 'name'
   directoryQuery: string
-  sessionName: string
+  projectName: string
   results: DirectoryResult[]
   selectedIndex: number
   pendingProjectPath: string | null
 }
 
-export function CreateSessionModal({
+export function CreateProjectModal({
   activeField,
   directoryQuery,
   pendingProjectPath,
+  projectName,
   results,
   selectedIndex,
-  sessionName,
-}: CreateSessionModalProps) {
+}: CreateProjectModalProps) {
   const t = useTheme()
   const dirActive = activeField === 'directory'
   const nameActive = activeField === 'name'
@@ -57,8 +57,8 @@ export function CreateSessionModal({
 
   return (
     <Form
-      title="Create workspace"
-      keybindsModeId="modal.create-session"
+      title="Create project"
+      keybindsModeId="modal.create-project"
       width={uiTokens.modalWidth.xl}
     >
       <AutoComplete
@@ -81,7 +81,7 @@ export function CreateSessionModal({
         }
       />
 
-      <TextField active={nameActive} label="Workspace name" value={sessionName} />
+      <TextField active={nameActive} label="Project name" value={projectName} />
     </Form>
   )
 }

package/src/ui/components/modals/{sessions/session-name-modal.tsx → projects/project-name-modal.tsx}

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

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

@@ -1,86 +1,84 @@
 import { useCallback, useMemo } from 'react'
 
-import type { SessionRecord } from '../../../../state/types'
+import type { ProjectRecord } from '../../../../state/types'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
-import { filterSessions } from '../../../../state/selectors'
+import { filterProjects } from '../../../../state/selectors'
 import { abbreviatePath } from '../../../path-format'
-import { orderSessionsForDisplay } from '../../../session-ordering'
+import { orderProjectsForDisplay } from '../../../project-ordering'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
 
-interface SessionPickerModalProps {
-  sessions: SessionRecord[]
+interface ProjectPickerModalProps {
+  projects: ProjectRecord[]
   selectedIndex: number
-  currentSessionId: string | null
+  currentProjectId: string | null
   currentTabCount: number
   filter: string | null
   cursorPos?: number
 }
 
-function formatSessionLine(
-  session: SessionRecord,
-  currentSessionId: string | null,
+function formatProjectLine(
+  project: ProjectRecord,
+  currentProjectId: string | null,
   currentTabCount: number,
   displayIndex: number
 ): string {
   const tabCount =
-    session.id === currentSessionId
-      ? currentTabCount
-      : (session.workspaceSnapshot?.tabs.length ?? 0)
-  return `[${displayIndex}] ${session.name} (${tabCount} tab${tabCount === 1 ? '' : 's'})`
+    project.id === currentProjectId ? currentTabCount : (project.projectSnapshot?.tabs.length ?? 0)
+  return `[${displayIndex}] ${project.name} (${tabCount} tab${tabCount === 1 ? '' : 's'})`
 }
 
 function getEmptyStateMessage(hasFilter: boolean): string {
-  if (hasFilter) return 'No matching workspaces.'
-  return 'No workspaces yet. Press Enter or n to create your first workspace.'
+  if (hasFilter) return 'No matching projects.'
+  return 'No projects yet. Press Enter or n to create your first project.'
 }
 
-export function SessionPickerModal({
-  currentSessionId,
+export function ProjectPickerModal({
+  currentProjectId,
   currentTabCount,
   cursorPos,
   filter,
+  projects,
   selectedIndex,
-  sessions,
-}: SessionPickerModalProps) {
+}: ProjectPickerModalProps) {
   const t = useTheme()
-  const ordered = useMemo(() => orderSessionsForDisplay(sessions), [sessions])
-  const filtered = useMemo(() => filterSessions(ordered, filter), [filter, ordered])
+  const ordered = useMemo(() => orderProjectsForDisplay(projects), [projects])
+  const filtered = useMemo(() => filterProjects(ordered, filter), [filter, ordered])
   const hasFilter = !!(filter != null && filter !== '')
 
   const items = useMemo<PickerItem[]>(() => {
     const baselineOrder = ordered.map((s) => s.id)
-    const sessionItems: PickerItem[] = filtered.map((session, index) => {
+    const projectItems: PickerItem[] = filtered.map((project, index) => {
       const active = index === selectedIndex
-      const displayIndex = baselineOrder.indexOf(session.id) + 1
+      const displayIndex = baselineOrder.indexOf(project.id) + 1
       return {
-        key: session.id,
-        onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
-        onDelete: () => runSideEffectGlobal({ type: 'delete-selected-session' }),
+        key: project.id,
+        onClick: () => runSideEffectGlobal({ type: 'confirm-selected-project' }),
+        onDelete: () => runSideEffectGlobal({ type: 'delete-selected-project' }),
         subtitle:
-          session.projectPath != null && session.projectPath !== '' ? (
-            <text fg={t.textMuted}>{abbreviatePath(session.projectPath)}</text>
+          project.projectPath != null && project.projectPath !== '' ? (
+            <text fg={t.textMuted}>{abbreviatePath(project.projectPath)}</text>
           ) : undefined,
         title: (
           <text fg={active ? t.text : t.textMuted}>
-            {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
+            {formatProjectLine(project, currentProjectId, currentTabCount, displayIndex)}
           </text>
         ),
       }
     })
     const createNewItem: PickerItem = {
       key: '__create-new__',
-      onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
+      onClick: () => runSideEffectGlobal({ type: 'confirm-selected-project' }),
       title: (
         <text fg={selectedIndex === filtered.length ? t.text : t.textMuted}>
-          Create new workspace
+          Create new project
         </text>
       ),
     }
-    return [...sessionItems, createNewItem]
-  }, [currentSessionId, currentTabCount, filtered, ordered, selectedIndex, t])
+    return [...projectItems, createNewItem]
+  }, [currentProjectId, currentTabCount, filtered, ordered, selectedIndex, t])
 
   const handleHover = useCallback(
     (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
@@ -89,8 +87,8 @@ export function SessionPickerModal({
 
   return (
     <Picker
-      title="Workspaces"
-      keybindsModeId="modal.session-picker.filtering"
+      title="Projects"
+      keybindsModeId="modal.project-picker.filtering"
       width={uiTokens.modalWidth.lg}
       gap={1}
       filter={filter}

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

@@ -0,0 +1,70 @@
+import { useCallback, useMemo } from 'react'
+
+import { filterSettingRows } from '../../../../settings/search'
+import { useAppStore } from '../../../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { useTheme } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { RowValue } from '../../settings/row-value'
+import { Picker, type PickerItem } from '../shared/picker'
+
+interface SettingsSearchModalProps {
+  filter: string | null
+  selectedIndex: number
+  cursorPos?: number
+}
+
+/**
+ * Every setting in one list, grouped by section and laid out the way the screen
+ * lays them out — label and value on one line, what it does underneath. A result
+ * you cannot read the current value of is a result you have to go and check.
+ *
+ * The filter is the one `getModalOptionCount` counts with, so the list and the
+ * cursor moving through it never disagree.
+ */
+export function SettingsSearchModal({
+  cursorPos,
+  filter,
+  selectedIndex,
+}: SettingsSearchModalProps) {
+  const t = useTheme()
+  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]
+  )
+
+  const handleHover = useCallback(
+    (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
+    []
+  )
+
+  return (
+    <Picker
+      title="Search settings"
+      keybindsModeId="modal.settings-search.filtering"
+      width={uiTokens.modalWidth.xl}
+      filter={filter}
+      cursorPos={cursorPos}
+      items={items}
+      selectedIndex={selectedIndex}
+      emptyState={<text fg={t.textMuted}>No setting matches.</text>}
+      onHover={handleHover}
+    />
+  )
+}

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

@@ -27,6 +27,7 @@ interface TextFieldProps {
   cursorPos?: number
   description?: ReactNode
   label?: ReactNode
+  minLines?: number
   placeholder?: string
   value: string
 }
@@ -94,6 +95,7 @@ export function TextField({
   cursorPos,
   description,
   label,
+  minLines,
   placeholder,
   value,
 }: TextFieldProps) {
@@ -104,7 +106,13 @@ export function TextField({
           {label}
         </FieldLabel>
       ) : null}
-      <InputField active={active} value={value} cursorPos={cursorPos} placeholder={placeholder} />
+      <InputField
+        active={active}
+        value={value}
+        cursorPos={cursorPos}
+        placeholder={placeholder}
+        minLines={minLines}
+      />
     </box>
   )
 }
@@ -138,27 +146,31 @@ export function AutoComplete({
         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}
-                  index={optionIndex}
-                  active={optionActive}
-                  leading={resolveItemContent(item.leading, optionActive)}
-                  title={resolveItemContent(item.title, optionActive)}
-                  subtitle={resolveItemContent(item.subtitle, optionActive)}
-                  trailing={resolveItemContent(item.trailing, optionActive)}
-                  onHoverIndex={onHover}
-                  onClick={item.onClick}
-                />
-              )
-            })}
-      </box>
+      {/* Collapsed unless focused: a dropdown nobody is driving is noise, and
+          it pushes the rest of the form off the modal. */}
+      {active ? (
+        <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}
+                    index={optionIndex}
+                    active={optionActive}
+                    leading={resolveItemContent(item.leading, optionActive)}
+                    title={resolveItemContent(item.title, optionActive)}
+                    subtitle={resolveItemContent(item.subtitle, optionActive)}
+                    trailing={resolveItemContent(item.trailing, optionActive)}
+                    onHoverIndex={onHover}
+                    onClick={item.onClick}
+                  />
+                )
+              })}
+        </box>
+      ) : null}
     </box>
   )
 }

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

@@ -18,7 +18,7 @@ export interface PickerItem {
   onClick?: () => void
   onEdit?: () => void
   onDelete?: () => void
-  onWorktree?: () => void
+  onWorkspace?: () => void
 }
 
 interface PickerProps {
@@ -42,11 +42,11 @@ const MODAL_CHROME_ROWS = 6
 function PickerItemCtas({
   onDelete,
   onEdit,
-  onWorktree,
+  onWorkspace,
 }: {
   onEdit?: () => void
   onDelete?: () => void
-  onWorktree?: () => void
+  onWorkspace?: () => void
 }) {
   const t = useTheme()
   const handleEdit = useCallback(
@@ -56,12 +56,12 @@ function PickerItemCtas({
     },
     [onEdit]
   )
-  const handleWorktree = useCallback(
+  const handleWorkspace = useCallback(
     (event: OtuiMouseEvent) => {
       event.stopPropagation()
-      onWorktree?.()
+      onWorkspace?.()
     },
-    [onWorktree]
+    [onWorkspace]
   )
   const handleDelete = useCallback(
     (event: OtuiMouseEvent) => {
@@ -77,8 +77,8 @@ function PickerItemCtas({
           <text fg={t.primary}>[edit]</text>
         </box>
       ) : null}
-      {onWorktree ? (
-        <box onMouseDown={handleWorktree}>
+      {onWorkspace ? (
+        <box onMouseDown={handleWorkspace}>
           <text fg={t.warning}>[WT]</text>
         </box>
       ) : null}
@@ -189,11 +189,11 @@ export function Picker({
             const capturedIndex = index
             const trailing =
               item.trailing ??
-              (active && (item.onEdit || item.onDelete || item.onWorktree) ? (
+              (active && (item.onEdit || item.onDelete || item.onWorkspace) ? (
                 <PickerItemCtas
                   onEdit={item.onEdit}
                   onDelete={item.onDelete}
-                  onWorktree={item.onWorktree}
+                  onWorkspace={item.onWorkspace}
                 />
               ) : null)
             nodes.push(

package/src/ui/components/modals/shared/{worktree-delete-confirm.tsx → workspace-delete-confirm.tsx}

@@ -4,33 +4,33 @@ import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Form } from './form'
 
-interface WorktreeDeleteConfirmProps {
+interface WorkspaceDeleteConfirmProps {
   keybindsModeId: ModeId
   reason: string
-  worktreeLabel: string
+  workspaceLabel: string
 }
 
 /**
- * Shared confirmation dialog for a recoverable worktree delete. Used both inside
- * the new-tab picker and as a standalone modal (sidebar "Remove worktree"); the
+ * Shared confirmation dialog for a recoverable workspace delete. Used both inside
+ * the new-tab picker and as a standalone modal (sidebar "Remove workspace"); the
  * keybinds mode wires Enter/y to confirm and Esc/n to cancel for each context.
  */
-export function WorktreeDeleteConfirm({
+export function WorkspaceDeleteConfirm({
   keybindsModeId,
   reason,
-  worktreeLabel,
-}: WorktreeDeleteConfirmProps) {
+  workspaceLabel,
+}: WorkspaceDeleteConfirmProps) {
   const t = useTheme()
   return (
     <Form
-      title="Delete worktree?"
+      title="Delete workspace?"
       keybindsModeId={keybindsModeId}
       width={uiTokens.modalWidth.md}
       footer={<text fg={t.textMuted}>Enter / y to delete · Esc / n to cancel</text>}
     >
       <box flexDirection="column" gap={1}>
         <text fg={t.text}>
-          Delete <strong>{worktreeLabel}</strong>?
+          Delete <strong>{workspaceLabel}</strong>?
         </text>
         <text fg={t.warning}>{reason}</text>
       </box>