@brimveyn/aimux 1.6.2 → 1.7.1

package/src/ui/components/list-item.tsx

@@ -8,16 +8,22 @@ export type ListItemDirection = 'row' | 'column'
 interface ListItemProps {
   active: boolean
   direction?: ListItemDirection
+  id?: string
   leading?: ReactNode
   subtitle?: ReactNode
   title: ReactNode
   trailing?: ReactNode
+  onHover?: () => void
+  onClick?: () => void
 }
 
 export function ListItem({
   active,
   direction = 'column',
+  id,
   leading,
+  onClick,
+  onHover,
   subtitle,
   title,
   trailing,
@@ -25,34 +31,36 @@ export function ListItem({
   const theme = useTheme()
   const isRow = direction === 'row'
   return (
-    <Surface
-      tone={active ? 'selected' : 'elevated'}
-      paddingLeft={isRow ? 2 : 1}
-      paddingRight={isRow ? 2 : 1}
-    >
-      <box flexDirection="column">
-        <box flexDirection="row">
-          {isRow ? null : (
-            <>
-              <text
-                fg={
-                  active
-                    ? theme.colors['textLink.foreground']
-                    : theme.colors['editor.lineHighlightBackground']
-                }
-              >
-                {active ? '›' : '·'}
-              </text>
-              <text> </text>
-            </>
-          )}
-          {leading}
-          {leading ? <text> </text> : null}
-          <box flexGrow={isRow ? 0 : 1}>{title}</box>
-          {trailing ? <box>{trailing}</box> : null}
+    <box id={id} onMouseOver={onHover} onMouseDown={onClick}>
+      <Surface
+        tone={active ? 'selected' : 'elevated'}
+        paddingLeft={isRow ? 2 : 1}
+        paddingRight={isRow ? 2 : 1}
+      >
+        <box flexDirection="column">
+          <box flexDirection="row">
+            {isRow ? null : (
+              <>
+                <text
+                  fg={
+                    active
+                      ? theme.colors['textLink.foreground']
+                      : theme.colors['editor.lineHighlightBackground']
+                  }
+                >
+                  {active ? '›' : '·'}
+                </text>
+                <text> </text>
+              </>
+            )}
+            {leading}
+            {leading ? <text> </text> : null}
+            <box flexGrow={isRow ? 0 : 1}>{title}</box>
+            {trailing ? <box>{trailing}</box> : null}
+          </box>
+          {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}
         </box>
-        {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}
-      </box>
-    </Surface>
+      </Surface>
+    </box>
   )
 }

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

@@ -1,9 +1,10 @@
 import type { ModeId } from '@brimveyn/aimux-config'
-import type { ReactNode } from 'react'
 
-import { useTheme } from '../theme'
+import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
+import { type ReactNode } from 'react'
+
+import { useTheme, useTransparent } from '../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
-import { Surface } from './surface'
 
 interface ModalShellProps {
   children: ReactNode
@@ -15,6 +16,43 @@ interface ModalShellProps {
   width: number | `${number}%`
 }
 
+const TRANSPARENT_RGBA = RGBA.fromValues(0, 0, 0, 0)
+
+// opentui's BoxRenderable only paints a fill when `backgroundColor.a > 0`, so
+// a fully transparent modal bg leaks the chrome characters underneath. The
+// `renderAfter` hook runs after the box paints itself but before its children
+// render, so we manually overwrite every interior cell with a blank space.
+//
+// Two gotchas we hit by reading the zig source (packages/core/src/zig/buffer.zig):
+//  1. `setCellWithAlphaBlending` early-returns via `isFullyTransparent` when
+//     both fg and bg alpha are 0 — nothing gets written.
+//  2. Its `blendCells` deliberately preserves the destination char when the
+//     overlay char is `DEFAULT_SPACE_CHAR` (codepoint 32) so that drawing a
+//     space on top of existing text does not erase it.
+//
+// `setCell` (→ `bufferSetCell` → zig `buffer.set`) bypasses both: it writes
+// the cell unconditionally, no alpha check, no blending, no char preservation.
+// That overwrites each chrome char with a space while keeping the cell bg
+// transparent, so the terminal emulator's own (blurred) window bg still shows
+// through. Children (modal content) then render on top as normal.
+function fillModalInteriorWithSpaces(this: BoxRenderable, buffer: OptimizedBuffer): void {
+  const x0 = this.screenX
+  const y0 = this.screenY
+  const w = this.width
+  const h = this.height
+  // Inset by 1 on each side so we don't erase the border that renderSelf just
+  // drew. The modal always has a single-cell border.
+  const startX = x0 + 1
+  const startY = y0 + 1
+  const endX = x0 + w - 1
+  const endY = y0 + h - 1
+  for (let y = startY; y < endY; y++) {
+    for (let x = startX; x < endX; x++) {
+      buffer.setCell(x, y, ' ', TRANSPARENT_RGBA, TRANSPARENT_RGBA)
+    }
+  }
+}
+
 export function ModalShell({
   children,
   footer,
@@ -25,6 +63,8 @@ export function ModalShell({
   width,
 }: ModalShellProps) {
   const theme = useTheme()
+  const transparent = useTransparent()
+  const bg = transparent ? 'transparent' : theme.colors['sideBar.background']
   return (
     <box
       position="absolute"
@@ -36,15 +76,13 @@ export function ModalShell({
       alignItems="center"
     >
       <box
-        position="absolute"
-        top={0}
-        left={0}
-        width="100%"
-        height="100%"
-        backgroundColor={theme.colors['editorWidget.background']}
-        opacity={0.7}
-      />
-      <Surface tone="elevated" padding={1} gap={1} width={width}>
+        border
+        borderColor={theme.colors['focusBorder']}
+        backgroundColor={bg}
+        padding={1}
+        width={width}
+        renderAfter={transparent ? fillModalInteriorWithSpaces : undefined}
+      >
         <box width="100%" flexDirection="column" gap={listGap}>
           <box flexDirection="column">
             <text fg={theme.colors['terminal.ansiMagenta']}>{title}</text>
@@ -53,7 +91,7 @@ export function ModalShell({
           {children}
           {footer ? <box>{footer}</box> : null}
         </box>
-      </Surface>
+      </box>
       {keybindsModeId ? <ModalKeybindsOverlay modeId={keybindsModeId} /> : null}
     </box>
   )

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>