@brimveyn/aimux 1.6.1 → 1.7.0

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

@@ -1,63 +1,96 @@
-import { getAllAssistantOptions } from '../../pty/command-registry'
+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 { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
-import { ListItem } from './list-item'
 import { ModalShell } from './modal-shell'
+import { Picker, type PickerItem } from './picker'
 
 interface NewTabModalProps {
   selectedIndex: number
   customCommands: Record<string, string>
-  editBuffer: string | null
+  filter: string | null
+  cursorPos?: number
+  editingCommand: AssistantId | null
+  editBuffer: string
 }
 
-export function NewTabModal({ customCommands, editBuffer, selectedIndex }: NewTabModalProps) {
+export function NewTabModal({
+  cursorPos,
+  customCommands,
+  editBuffer,
+  editingCommand,
+  filter,
+  selectedIndex,
+}: NewTabModalProps) {
   const theme = useTheme()
+
+  if (editingCommand !== null) {
+    const option =
+      getAllAssistantOptions(customCommands).find((o) => o.id === editingCommand) ??
+      getAssistantOption(0)
+    return (
+      <ModalShell
+        title={`Edit command — ${option.label}`}
+        keybindsModeId="modal.new-tab.editing-command"
+        width={uiTokens.modalWidth.md}
+      >
+        <box flexDirection="column">
+          <text fg={theme.colors['descriptionForeground']}>
+            Custom command (blank to reset to default: {option.command})
+          </text>
+          <InputField
+            active
+            value={editBuffer}
+            cursorPos={cursorPos}
+            placeholder={option.command}
+          />
+        </box>
+      </ModalShell>
+    )
+  }
+
   const options = getAllAssistantOptions(customCommands)
-  const selectedOption = options[selectedIndex]
-  const isEditing = editBuffer !== null
+  const filtered = filterAssistants(options, filter)
+
+  const items: PickerItem[] = filtered.map((option, index) => {
+    const active = index === selectedIndex
+    const customCmd = customCommands[option.id]
+    return {
+      key: option.id,
+      onClick: () => runSideEffectGlobal({ type: 'launch-selected-assistant' }),
+      onEdit: () => dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
+      subtitle: (
+        <box flexDirection="column">
+          <text fg={theme.colors['descriptionForeground']}>{option.description}</text>
+          {customCmd ? <text fg={theme.colors['textLink.foreground']}>{customCmd}</text> : null}
+        </box>
+      ),
+      title: (
+        <text
+          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+        >
+          {option.label}
+        </text>
+      ),
+    }
+  })
 
   return (
-    <ModalShell
+    <Picker
       title="New assistant tab"
-      subtitle={isEditing ? `Editing command for ${selectedOption?.label}` : undefined}
-      keybindsModeId={isEditing ? 'modal.new-tab.command-edit' : 'modal.new-tab'}
+      keybindsModeId="modal.new-tab.command-edit"
       width={uiTokens.modalWidth.md}
-    >
-      {isEditing ? (
-        <InputField active value={editBuffer ?? ''} />
-      ) : (
-        options.map((option, index) => {
-          const active = index === selectedIndex
-          const customCmd = customCommands[option.id]
-
-          return (
-            <ListItem
-              key={option.id}
-              active={active}
-              title={
-                <text
-                  fg={
-                    active
-                      ? theme.colors['editor.foreground']
-                      : theme.colors['descriptionForeground']
-                  }
-                >
-                  {option.label}
-                </text>
-              }
-              subtitle={
-                <box flexDirection="column">
-                  <text fg={theme.colors['descriptionForeground']}>{option.description}</text>
-                  {customCmd ? (
-                    <text fg={theme.colors['textLink.foreground']}>{customCmd}</text>
-                  ) : null}
-                </box>
-              }
-            />
-          )
-        })
-      )}
-    </ModalShell>
+      gap={1}
+      filter={filter}
+      cursorPos={cursorPos}
+      items={items}
+      selectedIndex={selectedIndex}
+      emptyState={<text fg={theme.colors['descriptionForeground']}>No matching assistants.</text>}
+      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+    />
   )
 }

package/src/ui/components/picker.tsx

@@ -0,0 +1,179 @@
+import type { ModeId } from '@brimveyn/aimux-config'
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+import { useTerminalDimensions } from '@opentui/react'
+import { type ReactNode, useLayoutEffect, useRef } from 'react'
+
+import { useTheme } from '../theme'
+import { BareInput } from './bare-input'
+import { ListItem } from './list-item'
+import { ModalShell } from './modal-shell'
+
+export interface PickerItem {
+  key: string
+  group?: string
+  title: ReactNode
+  subtitle?: ReactNode
+  trailing?: ReactNode
+  onClick?: () => void
+  onEdit?: () => void
+  onDelete?: () => void
+}
+
+interface PickerProps {
+  title: string
+  width: number | `${number}%`
+  keybindsModeId?: ModeId
+  listGap?: number
+  gap?: number
+  footer?: ReactNode
+  items: PickerItem[]
+  selectedIndex: number
+  emptyState?: ReactNode
+  onHover: (index: number) => void
+  filter: string | null
+  cursorPos?: number
+}
+
+const VIEWPORT_HEIGHT_RATIO = 0.6
+const MODAL_CHROME_ROWS = 6
+
+function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?: () => void }) {
+  const theme = useTheme()
+  return (
+    <box flexDirection="row" gap={1}>
+      {onEdit ? (
+        <box
+          onMouseDown={(event) => {
+            event.stopPropagation()
+            onEdit()
+          }}
+        >
+          <text fg={theme.colors['textLink.foreground']}>[edit]</text>
+        </box>
+      ) : null}
+      {onDelete ? (
+        <box
+          onMouseDown={(event) => {
+            event.stopPropagation()
+            onDelete()
+          }}
+        >
+          <text fg={theme.colors['editorError.foreground']}>[del]</text>
+        </box>
+      ) : null}
+    </box>
+  )
+}
+
+export function Picker({
+  cursorPos,
+  emptyState,
+  filter,
+  footer,
+  gap = 0,
+  items,
+  keybindsModeId,
+  listGap,
+  onHover,
+  selectedIndex,
+  title,
+  width,
+}: PickerProps) {
+  const theme = useTheme()
+  const dimensions = useTerminalDimensions()
+  const maxHeight = Math.max(6, Math.floor(dimensions.height * VIEWPORT_HEIGHT_RATIO))
+  const listHeight = Math.max(1, maxHeight - MODAL_CHROME_ROWS)
+
+  const scrollboxRef = useRef<ScrollBoxRenderable | null>(null)
+  const isScrollingRef = useRef(false)
+  const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const skipNextScrollRef = useRef(false)
+
+  const resetScrollTimer = () => {
+    if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current)
+    scrollTimerRef.current = setTimeout(() => {
+      isScrollingRef.current = false
+      scrollTimerRef.current = null
+    }, 10)
+  }
+
+  useLayoutEffect(() => {
+    if (!scrollboxRef.current) return
+    if (skipNextScrollRef.current) {
+      skipNextScrollRef.current = false
+      return
+    }
+    const target = items[selectedIndex]?.key
+    if (!target) return
+    isScrollingRef.current = true
+    scrollboxRef.current.scrollChildIntoView(target)
+    resetScrollTimer()
+  }, [selectedIndex, items])
+
+  return (
+    <ModalShell
+      title={title}
+      width={width}
+      keybindsModeId={keybindsModeId}
+      listGap={listGap}
+      footer={footer}
+    >
+      <BareInput value={filter ?? ''} cursorPos={cursorPos} placeholder="Type to filter..." />
+      {items.length === 0 ? (emptyState ?? null) : null}
+      <scrollbox
+        ref={scrollboxRef}
+        scrollY
+        height={items.length === 0 ? 0 : listHeight}
+        contentOptions={{ flexDirection: 'column', gap }}
+        onMouseScroll={() => {
+          isScrollingRef.current = true
+          resetScrollTimer()
+        }}
+      >
+        {(() => {
+          let prevGroup: string | undefined
+          const nodes: ReactNode[] = []
+          for (let index = 0; index < items.length; index++) {
+            const item = items[index]
+            if (!item) continue
+            if (item.group && item.group !== prevGroup) {
+              nodes.push(
+                <box key={`group::${item.group}`} paddingLeft={1} paddingTop={index === 0 ? 0 : 1}>
+                  <text fg={theme.colors['editorWarning.foreground']} wrapMode="none">
+                    {item.group}
+                  </text>
+                </box>
+              )
+              prevGroup = item.group
+            }
+            const active = index === selectedIndex
+            const capturedIndex = index
+            const trailing =
+              item.trailing ??
+              (active && (item.onEdit || item.onDelete) ? (
+                <PickerItemCtas onEdit={item.onEdit} onDelete={item.onDelete} />
+              ) : null)
+            nodes.push(
+              <ListItem
+                key={item.key}
+                id={item.key}
+                active={active}
+                title={item.title}
+                subtitle={item.subtitle}
+                trailing={trailing}
+                onHover={() => {
+                  if (isScrollingRef.current) return
+                  skipNextScrollRef.current = true
+                  onHover(capturedIndex)
+                }}
+                onClick={item.onClick}
+              />
+            )
+          }
+          return nodes
+        })()}
+      </scrollbox>
+    </ModalShell>
+  )
+}

package/src/ui/components/session-bar.tsx

@@ -2,20 +2,23 @@ import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
 import { useMemo, useRef, useState } from 'react'
 
-import type { SessionRecord } from '../../state/types'
+import type { SessionRecord, SessionStatus } from '../../state/types'
 
 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 { useTheme } from '../theme'
+import { useBg, useTheme } from '../theme'
 
 export function SessionBar() {
   const theme = useTheme()
+  const headerBg = useBg('sideBarSectionHeader.background')
   const sessions = useAppStore((s) => s.sessions)
   const currentId = useAppStore((s) => s.currentSessionId)
   const bar = useAppStore((s) => s.sessionBar)
-  const busyMap = useAppStore((s) => s.sessionsBusy)
+  const statusMap = useAppStore((s) => s.sessionStatuses)
 
   const [draggingId, setDraggingId] = useState<string | null>(null)
   const [dragOrder, setDragOrder] = useState<string[] | null>(null)
@@ -60,13 +63,10 @@ export function SessionBar() {
     if (!draggingId) return
     const hit = findChipAtX(event.x)
     if (hit === null) {
-      // Cursor left the bar entirely — allow the next hit to re-trigger a swap.
       lastSwapWithRef.current = null
       return
     }
     if (hit === draggingId) {
-      // Over the dragged chip itself — reset hysteresis so re-entering a
-      // neighbour can swap again.
       lastSwapWithRef.current = null
       return
     }
@@ -90,7 +90,6 @@ export function SessionBar() {
       return
     }
 
-    // Drag did not change anything → treat as click, switch to that session.
     const idx = baselineOrder.indexOf(source)
     if (idx >= 0) {
       runSideEffectGlobal({ index: idx + 1, type: 'switch-session-by-index' })
@@ -109,7 +108,7 @@ export function SessionBar() {
       flexDirection="row"
       paddingLeft={1}
       paddingRight={1}
-      backgroundColor={theme.colors['sideBarSectionHeader.background']}
+      backgroundColor={headerBg}
     >
       {visibleSessions.map((session) => {
         const displayIndex = baselineOrder.indexOf(session.id) + 1
@@ -119,7 +118,7 @@ export function SessionBar() {
             session={session}
             index={displayIndex}
             active={session.id === currentId}
-            busy={busyMap[session.id] ?? false}
+            status={statusMap[session.id] ?? IDLE_SESSION_STATUS}
             dragging={draggingId === session.id}
             onRef={(r) => setChipRef(session.id, r)}
             onMouseDown={() => handleMouseDown(session.id)}
@@ -129,6 +128,21 @@ export function SessionBar() {
           />
         )
       })}
+      <box flexGrow={1} />
+      <box
+        flexDirection="row"
+        paddingLeft={1}
+        paddingRight={1}
+        backgroundColor={theme.colors['list.activeSelectionBackground']}
+        onMouseDown={(e) => {
+          e.stopPropagation()
+          dispatchGlobal({ returnToSessionPicker: false, type: 'open-create-session-modal' })
+        }}
+      >
+        <text fg={theme.colors['editor.foreground']} selectable={false}>
+          + New
+        </text>
+      </box>
     </box>
   )
 }
@@ -145,7 +159,7 @@ interface SessionChipProps {
   session: SessionRecord
   index: number
   active: boolean
-  busy: boolean
+  status: SessionStatus
   dragging: boolean
   onRef: (ref: BoxRenderable | null) => void
   onMouseDown: (event: OtuiMouseEvent) => void
@@ -156,7 +170,6 @@ interface SessionChipProps {
 
 function SessionChip({
   active,
-  busy,
   dragging,
   index,
   onMouseDown,
@@ -165,19 +178,20 @@ function SessionChip({
   onMouseUp,
   onRef,
   session,
+  status,
 }: SessionChipProps) {
   const theme = useTheme()
-  const showSpinner = busy && !active
+  const selectionBg = useBg('list.activeSelectionBackground')
+  const showSpinner = status.working
+  const showWaiting = status.waiting
   const spinner = useBusySpinner(showSpinner)
-  const indicator = showSpinner ? spinner : '●'
-  const indicatorColor =
-    active || showSpinner
-      ? theme.colors['textLink.foreground']
-      : theme.colors['gitDecoration.addedResourceForeground']
   const labelColor = active
     ? theme.colors['editor.foreground']
     : theme.colors['descriptionForeground']
-  const bgColor = dragging || active ? theme.colors['list.activeSelectionBackground'] : undefined
+  const bgColor = dragging || active ? selectionBg : undefined
+  const idleColor = theme.colors['gitDecoration.addedResourceForeground'] ?? ''
+  const workingColor = theme.colors['textLink.foreground'] ?? ''
+  const waitingColor = theme.colors['editorWarning.foreground'] ?? ''
 
   return (
     <box
@@ -201,9 +215,21 @@ function SessionChip({
         onMouseDragEnd(e)
       }}
     >
-      <text fg={indicatorColor} selectable={false}>
-        {indicator}{' '}
-      </text>
+      {showWaiting ? (
+        <text fg={waitingColor} selectable={false}>
+          ?{' '}
+        </text>
+      ) : null}
+      {showSpinner ? (
+        <text fg={workingColor} selectable={false}>
+          {spinner}{' '}
+        </text>
+      ) : null}
+      {!showWaiting && !showSpinner ? (
+        <text fg={active ? workingColor : idleColor} selectable={false}>
+          {'● '}
+        </text>
+      ) : null}
       <text fg={labelColor} selectable={false}>
         [{index}] {session.name}
       </text>

package/src/ui/components/session-picker-modal.tsx

@@ -1,13 +1,12 @@
 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 { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
-import { ListItem } from './list-item'
-import { ModalFilterBar } from './modal-filter-bar'
-import { ModalShell } from './modal-shell'
+import { Picker, type PickerItem } from './picker'
 
 interface SessionPickerModalProps {
   sessions: SessionRecord[]
@@ -15,6 +14,7 @@ interface SessionPickerModalProps {
   currentSessionId: string | null
   currentTabCount: number
   filter: string | null
+  cursorPos?: number
 }
 
 function formatSessionLine(
@@ -41,6 +41,7 @@ function getEmptyStateMessage(hasFilter: boolean): string {
 export function SessionPickerModal({
   currentSessionId,
   currentTabCount,
+  cursorPos,
   filter,
   selectedIndex,
   sessions,
@@ -50,62 +51,63 @@ export function SessionPickerModal({
   const baselineOrder = ordered.map((s) => s.id)
   const filtered = filterSessions(ordered, filter)
   const hasFilter = !!filter
-  const showFilteredEmptyState = filtered.length === 0 && sessions.length > 0
-  const showInitialEmptyState = filtered.length === 0 && sessions.length === 0
+
+  const sessionItems: PickerItem[] = filtered.map((session, index) => {
+    const active = index === selectedIndex
+    const displayIndex = baselineOrder.indexOf(session.id) + 1
+    return {
+      key: session.id,
+      onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
+      onDelete: () => runSideEffectGlobal({ type: 'delete-selected-session' }),
+      subtitle: session.projectPath ? (
+        <text fg={theme.colors['descriptionForeground']}>
+          {abbreviatePath(session.projectPath)}
+        </text>
+      ) : undefined,
+      title: (
+        <text
+          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+        >
+          {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
+        </text>
+      ),
+    }
+  })
+
+  const createNewItem: PickerItem = {
+    key: '__create-new__',
+    onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
+    title: (
+      <text
+        fg={
+          selectedIndex === filtered.length
+            ? theme.colors['editor.foreground']
+            : theme.colors['descriptionForeground']
+        }
+      >
+        Create new session
+      </text>
+    ),
+  }
+
+  const items = [...sessionItems, createNewItem]
 
   return (
-    <ModalShell
+    <Picker
       title="Sessions"
-      keybindsModeId="modal.session-picker"
+      keybindsModeId="modal.session-picker.filtering"
       width={uiTokens.modalWidth.lg}
-      footer={<ModalFilterBar filter={filter} />}
-    >
-      {showFilteredEmptyState ? (
-        <text fg={theme.colors['descriptionForeground']}>{getEmptyStateMessage(hasFilter)}</text>
-      ) : null}
-      {showInitialEmptyState ? (
-        <text fg={theme.colors['descriptionForeground']}>{getEmptyStateMessage(false)}</text>
-      ) : null}
-      {filtered.map((session, index) => {
-        const active = index === selectedIndex
-        const displayIndex = baselineOrder.indexOf(session.id) + 1
-        return (
-          <ListItem
-            key={session.id}
-            active={active}
-            title={
-              <text
-                fg={
-                  active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
-                }
-              >
-                {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
-              </text>
-            }
-            subtitle={
-              session.projectPath ? (
-                <text fg={theme.colors['descriptionForeground']}>
-                  {abbreviatePath(session.projectPath)}
-                </text>
-              ) : undefined
-            }
-          />
-        )
-      })}
-      <ListItem
-        active={selectedIndex === filtered.length}
-        title={
-          <text
-            fg={
-              selectedIndex === filtered.length
-                ? theme.colors['editor.foreground']
-                : theme.colors['descriptionForeground']
-            }
-          >
-            Create new session
-          </text>
-        }
-      />
-    </ModalShell>
+      gap={1}
+      filter={filter}
+      cursorPos={cursorPos}
+      items={items}
+      selectedIndex={selectedIndex}
+      emptyState={
+        filtered.length === 0 ? (
+          <text fg={theme.colors['descriptionForeground']}>{getEmptyStateMessage(hasFilter)}</text>
+        ) : undefined
+      }
+      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+    />
   )
 }