@brimveyn/aimux 1.6.2 → 1.7.0

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' })}
+    />
   )
 }

package/src/ui/components/sidebar.tsx

@@ -1,9 +1,11 @@
-import type { ScrollBoxRenderable } from '@opentui/core'
+import type { Theme } from '@brimveyn/aimux-config'
 
+import { type ScrollBoxRenderable } from '@opentui/core'
 import { memo, useMemo, useRef } from 'react'
 
 import { useAppStore } from '../../state/app-store'
-import { getCurrentTheme, useTheme } from '../theme'
+import { dispatchGlobal } from '../../state/dispatch-ref'
+import { getCurrentTheme, useBg, useTheme } from '../theme'
 import { GitPaneWidget } from './git-pane-widget'
 import { buildTabGroupInfo } from './sidebar-group-metadata'
 import { TabItem } from './tab-item'
@@ -19,6 +21,20 @@ const GUTTER_MIDDLE = '├'
 const GUTTER_END = '╰'
 const GUTTER_PAD = '│'
 
+function getRowBackground({
+  alternate,
+  isActive,
+  theme,
+}: {
+  isActive: boolean
+  alternate: boolean
+  theme: Theme
+}): string | undefined {
+  if (isActive) return theme.colors['list.activeSelectionBackground']
+  if (alternate) return theme.colors['editor.lineHighlightBackground']
+  return undefined
+}
+
 const SidebarTop = memo(function SidebarTop() {
   const theme = useTheme()
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
@@ -44,6 +60,19 @@ const SidebarTop = memo(function SidebarTop() {
           <text fg={theme.colors['descriptionForeground']}>{branch}</text>
         </box>
       ) : null}
+      <box
+        flexDirection="row"
+        paddingY={1}
+        backgroundColor={theme.colors['list.activeSelectionBackground']}
+        justifyContent="center"
+        marginTop={1}
+        onMouseDown={(e) => {
+          e.stopPropagation()
+          dispatchGlobal({ type: 'open-new-tab-modal' })
+        }}
+      >
+        <text fg={theme.colors['editor.foreground']}>+ New assistant</text>
+      </box>
       <text fg={theme.colors['editor.lineHighlightBackground']}>
         {'·'.repeat(Math.max(0, sidebarWidth - 2))}
       </text>
@@ -51,25 +80,14 @@ const SidebarTop = memo(function SidebarTop() {
   )
 })
 
-function renderGroupGutter(
-  isGroupStart: boolean,
-  isGroupMiddle: boolean,
-  isGroupEnd: boolean,
-  isActive: boolean
-) {
+function renderGroupGutter(isGroupStart: boolean, isGroupMiddle: boolean, isGroupEnd: boolean) {
   return (
     <box flexDirection="column" width={1} overflow="hidden">
-      <text
-        fg={getCurrentTheme().colors['terminal.ansiMagenta']}
-        bg={isActive ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined}
-      >
+      <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
         {/* oxlint-disable-next-line no-nested-ternary */}
         {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
       </text>
-      <text
-        fg={getCurrentTheme().colors['terminal.ansiMagenta']}
-        bg={isActive ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined}
-      >
+      <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
         {isGroupEnd ? GUTTER_END : GUTTER_PAD}
       </text>
     </box>
@@ -116,6 +134,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
       ) : (
         tabs.map((tab, index) => {
           const isActive = tab.id === activeTabId
+          const alternate = index % 2 === 1
           const info = tabGroupInfo.get(tab.id)
           const inLayout = !!info?.inLayout
           const inGroup = info ? index >= info.groupStart && index <= info.groupEnd : false
@@ -126,19 +145,20 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
           return (
             <box
               key={tab.id}
+              backgroundColor={getRowBackground({ alternate, isActive, theme })}
               flexDirection="row"
-              onMouseDown={onTabActivate ? () => onTabActivate(tab.id) : undefined}
+              onMouseDown={(event) => {
+                event.stopPropagation()
+                onTabActivate?.(tab.id)
+              }}
             >
-              {inGroup
-                ? renderGroupGutter(isGroupStart, isGroupMiddle, isGroupEnd, isActive)
-                : null}
+              {inGroup ? renderGroupGutter(isGroupStart, isGroupMiddle, isGroupEnd) : null}
               <box flexGrow={1}>
                 <TabItem
                   id={`sidebar-tab-${tab.id}`}
                   tab={tab}
                   active={isActive}
                   focused={focusMode === 'navigation'}
-                  isFocusedInput={isActive && focusMode === 'terminal-input'}
                   inLayout={inLayout}
                 />
               </box>
@@ -152,9 +172,11 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
 
 export function Sidebar({ onTabActivate }: SidebarProps) {
   const theme = useTheme()
+  const sidebarBg = useBg('sideBar.background')
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const gitPane = useAppStore((s) => s.gitPane)
+  const focusMode = useAppStore((s) => s.focusMode)
 
   if (!sidebarVisible) {
     return null
@@ -184,8 +206,13 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
       width={sidebarWidth}
       padding={0}
       flexDirection="column"
-      backgroundColor={theme.colors['sideBar.background']}
+      backgroundColor={sidebarBg}
       gap={0}
+      onMouseDown={() => {
+        if (focusMode === 'terminal-input') {
+          dispatchGlobal({ focusMode: 'navigation', type: 'set-focus-mode' })
+        }
+      }}
     >
       <SidebarTop />
       {gitOnTop ? (

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

@@ -1,16 +1,16 @@
 import type { SnippetRecord } from '../../state/types'
 
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { filterSnippets } from '../../state/selectors'
 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 SnippetPickerModalProps {
   snippets: SnippetRecord[]
   selectedIndex: number
   filter: string | null
+  cursorPos?: number
 }
 
 const MAX_PREVIEW_LENGTH = 60
@@ -21,45 +21,54 @@ function truncateContent(content: string): string {
   return `${normalized.slice(0, MAX_PREVIEW_LENGTH - 3)}...`
 }
 
-export function SnippetPickerModal({ filter, selectedIndex, snippets }: SnippetPickerModalProps) {
+export function SnippetPickerModal({
+  cursorPos,
+  filter,
+  selectedIndex,
+  snippets,
+}: SnippetPickerModalProps) {
   const theme = useTheme()
   const filtered = filterSnippets(snippets, filter)
 
+  const items: PickerItem[] = filtered.map((snippet, index) => {
+    const active = index === selectedIndex
+    return {
+      key: snippet.id,
+      onClick: () => {
+        dispatchGlobal({ type: 'close-modal' })
+        runSideEffectGlobal({ type: 'paste-selected-snippet' })
+      },
+      onDelete: () => runSideEffectGlobal({ type: 'delete-selected-snippet' }),
+      onEdit: () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
+      subtitle: (
+        <text fg={theme.colors['descriptionForeground']}>{truncateContent(snippet.content)}</text>
+      ),
+      title: (
+        <text
+          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+        >
+          <strong>{snippet.name}</strong>
+        </text>
+      ),
+    }
+  })
+
   return (
-    <ModalShell
+    <Picker
       title="Snippets"
-      keybindsModeId="modal.snippet-picker"
+      keybindsModeId="modal.snippet-picker.filtering"
       width={uiTokens.modalWidth.xl}
-      footer={<ModalFilterBar filter={filter} />}
-    >
-      {filtered.length === 0 ? (
+      gap={1}
+      filter={filter}
+      cursorPos={cursorPos}
+      items={items}
+      selectedIndex={selectedIndex}
+      emptyState={
         <text fg={theme.colors['descriptionForeground']}>
           {filter ? 'No matching snippets.' : 'No snippets yet. Press n to create one.'}
         </text>
-      ) : null}
-      {filtered.map((snippet, index) => {
-        const active = index === selectedIndex
-        return (
-          <ListItem
-            key={snippet.id}
-            active={active}
-            title={
-              <text
-                fg={
-                  active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
-                }
-              >
-                <strong>{snippet.name}</strong>
-              </text>
-            }
-            subtitle={
-              <text fg={theme.colors['descriptionForeground']}>
-                {truncateContent(snippet.content)}
-              </text>
-            }
-          />
-        )
-      })}
-    </ModalShell>
+      }
+      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+    />
   )
 }

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

@@ -4,7 +4,7 @@ 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 { getCurrentTheme, useTheme } from '../theme'
+import { getCurrentTheme, useBg, useTheme } from '../theme'
 
 function getModeColor(focusMode: AppState['focusMode']): string {
   const t = getCurrentTheme()
@@ -41,6 +41,7 @@ function getModeLabel(focusMode: AppState['focusMode']): string {
 
 export function StatusBar() {
   const theme = useTheme()
+  const headerBg = useBg('sideBarSectionHeader.background')
   const state = useAppStore((s) => s)
   const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId)
   const config = useKeymap()
@@ -54,7 +55,7 @@ export function StatusBar() {
       paddingTop={0}
       paddingBottom={0}
       flexDirection="column"
-      backgroundColor={theme.colors['sideBarSectionHeader.background']}
+      backgroundColor={headerBg}
     >
       <box width="100%" flexDirection="row">
         <text fg={getModeColor(state.focusMode)}>[{getModeLabel(state.focusMode)}]</text>

package/src/ui/components/surface.tsx

@@ -1,22 +1,24 @@
 import type { ReactNode } from 'react'
 
-import { getCurrentTheme } from '../theme'
+import type { ThemeColorMap } from '../themes'
+
+import { useBg } from '../theme'
 
 type SurfaceTone = 'muted' | 'elevated' | 'selected' | 'input' | 'inputActive'
 
-function getSurfaceColor(tone: SurfaceTone): string {
+function toneToColorKey(tone: SurfaceTone): keyof ThemeColorMap {
   switch (tone) {
     case 'elevated':
-      return getCurrentTheme().colors['sideBar.background']
+      return 'sideBar.background'
     case 'selected':
-      return getCurrentTheme().colors['list.activeSelectionBackground']
+      return 'list.activeSelectionBackground'
     case 'input':
-      return getCurrentTheme().colors['editor.background']
+      return 'editor.background'
     case 'inputActive':
-      return getCurrentTheme().colors['list.activeSelectionBackground']
+      return 'list.activeSelectionBackground'
     case 'muted':
     default:
-      return getCurrentTheme().colors['sideBarSectionHeader.background']
+      return 'sideBarSectionHeader.background'
   }
 }
 
@@ -45,9 +47,10 @@ export function Surface({
   tone = 'muted',
   width,
 }: SurfaceProps) {
+  const bg = useBg(toneToColorKey(tone))
   return (
     <box
-      backgroundColor={getSurfaceColor(tone)}
+      backgroundColor={bg}
       flexDirection={flexDirection}
       gap={gap}
       padding={padding}

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

@@ -1,5 +1,8 @@
+import { useState } from 'react'
+
 import type { TabSession } from '../../state/types'
 
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { useBusySpinner } from '../hooks/use-busy-spinner'
 import { getCurrentTheme, useTheme } from '../theme'
 
@@ -8,7 +11,6 @@ interface TabItemProps {
   tab: TabSession
   active: boolean
   focused: boolean
-  isFocusedInput: boolean
   inLayout?: boolean
 }
 
@@ -20,8 +22,6 @@ function getStatusColor(status: TabSession['status']): string {
       return getCurrentTheme().colors['editorWarning.foreground']
     case 'error':
       return getCurrentTheme().colors['editorError.foreground']
-    case 'exited':
-      return getCurrentTheme().colors['editorWarning.foreground']
     default:
       return getCurrentTheme().colors['descriptionForeground']
   }
@@ -50,10 +50,15 @@ function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean)
 function BusyIndicator() {
   const theme = useTheme()
   const frame = useBusySpinner()
-  return <text fg={theme.colors['textLink.foreground']}>{frame} busy</text>
+  return <text fg={theme.colors['textLink.foreground']}>{frame} working</text>
+}
+
+function WaitingIndicator() {
+  const theme = useTheme()
+  return <text fg={theme.colors['editorWarning.foreground']}>? waiting</text>
 }
 
-function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocusedInput: boolean }) {
+function ActivityIndicator({ tab }: { tab: TabSession }) {
   const theme = useTheme()
   if (tab.status === 'error') {
     return <text fg={theme.colors['editorError.foreground']}>✗ error</text>
@@ -63,16 +68,12 @@ function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocused
     return <text fg={theme.colors['editorWarning.foreground']}>⏸ restore</text>
   }
 
-  if (tab.status === 'exited') {
-    return <text fg={theme.colors['editorWarning.foreground']}>⏹ exited</text>
+  if (tab.activity === 'working') {
+    return <BusyIndicator />
   }
 
-  if (isFocusedInput) {
-    return <text fg={theme.colors['focusBorder']}>▸ focused</text>
-  }
-
-  if (tab.activity === 'busy') {
-    return <BusyIndicator />
+  if (tab.activity === 'waiting-input') {
+    return <WaitingIndicator />
   }
 
   if (tab.activity === 'idle') {
@@ -82,12 +83,13 @@ function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocused
   return <text fg={getStatusColor(tab.status)}>{tab.status}</text>
 }
 
-export function TabItem({ active, focused, id, inLayout, isFocusedInput, tab }: TabItemProps) {
+export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
   const theme = useTheme()
   const label = tab.command.split(' ')[0]
   const isInLayout = inLayout ?? false
   const indicator = getIndicator(active, focused, isInLayout)
   const indicatorColor = getIndicatorColor(active, focused, isInLayout)
+  const [hovered, setHovered] = useState(false)
 
   return (
     <box
@@ -96,21 +98,35 @@ export function TabItem({ active, focused, id, inLayout, isFocusedInput, tab }:
       paddingRight={1}
       paddingTop={0}
       paddingBottom={0}
-      backgroundColor={active ? theme.colors['list.activeSelectionBackground'] : undefined}
       flexDirection="column"
       gap={0}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
     >
-      <box flexDirection="row">
+      <box flexDirection="row" alignItems="center">
         <text fg={indicatorColor}>{indicator} </text>
-        <text
-          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
-        >
-          {tab.title}
-        </text>
+        <box flexGrow={1}>
+          <text
+            fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+          >
+            {tab.title}
+          </text>
+        </box>
+        {hovered ? (
+          <box
+            onMouseDown={(event) => {
+              event.stopPropagation()
+              dispatchGlobal({ tabId: tab.id, type: 'close-tab' })
+              runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
+            }}
+          >
+            <text fg={theme.colors['descriptionForeground']}>×</text>
+          </box>
+        ) : null}
       </box>
       <box flexDirection="row">
         <text fg={theme.colors['descriptionForeground']}> {label} </text>
-        <ActivityIndicator tab={tab} isFocusedInput={isFocusedInput} />
+        <ActivityIndicator tab={tab} />
       </box>
     </box>
   )

package/src/ui/components/terminal-pane.tsx

@@ -6,7 +6,7 @@ import type { TerminalContentOrigin } from '../../input/raw-input-handler'
 import type { TabSession, TerminalSnapshot, TerminalSpan } from '../../state/types'
 
 import { logInputDebug } from '../../debug/input-log'
-import { getCurrentTheme, useTheme } from '../theme'
+import { getCurrentTheme, useBg, useTheme } from '../theme'
 
 interface TerminalPaneProps {
   tab?: TabSession
@@ -125,6 +125,7 @@ export function TerminalPane({
   tabId,
 }: TerminalPaneProps) {
   const theme = useTheme()
+  const editorBg = useBg('editor.background')
   const paneIsActive = isActive ?? true
   const canForwardMouse = focusMode === 'terminal-input' && !!tab && mouseForwardingEnabled
   const canUseLocalScrollback = focusMode === 'terminal-input' && !!tab && localScrollbackEnabled
@@ -185,7 +186,8 @@ export function TerminalPane({
         padding={0}
         flexDirection="column"
         flexGrow={1}
-        backgroundColor={theme.colors['editor.background']}
+        backgroundColor={editorBg}
+        onMouseDown={forwardMouseEvent}
         onMouseDrag={forwardMouseEvent}
         onMouseScroll={forwardScrollEvent}
         onMouseUp={forwardMouseEvent}
@@ -205,7 +207,10 @@ export function TerminalPane({
             flexDirection="column"
             flexGrow={1}
             width="100%"
-            onMouseDown={forwardMouseEvent}
+            onMouseDown={(e) => {
+              e.stopPropagation()
+              forwardMouseEvent(e)
+            }}
             onMouseUp={forwardMouseEvent}
             onMouseDrag={forwardMouseEvent}
             onMouseScroll={forwardScrollEvent}
@@ -214,11 +219,6 @@ export function TerminalPane({
           </box>
         )}
       </box>
-      {tab?.status === 'exited' && tab.exitCode !== undefined ? (
-        <text fg={theme.colors['editorWarning.foreground']}>
-          Process exited with code {tab.exitCode}
-        </text>
-      ) : null}
       {tab?.status === 'disconnected' ? (
         <text fg={theme.colors['editorWarning.foreground']}>
           Restored snapshot. Press Ctrl+r to restart this session.