@brimveyn/aimux 1.3.1 → 1.4.1

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

@@ -0,0 +1,208 @@
+import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
+import { useMemo, useRef, useState } from 'react'
+
+import type { SessionRecord } from '../../state/types'
+
+import { useAppStore } from '../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
+import { useBusySpinner } from '../hooks/use-busy-spinner'
+import { moveIdToIdPosition, orderSessionsForDisplay } from '../session-ordering'
+import { theme } from '../theme'
+
+export function SessionBar() {
+  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 [draggingId, setDraggingId] = useState<string | null>(null)
+  const [dragOrder, setDragOrder] = useState<string[] | null>(null)
+  // Hysteresis: the id of the chip we most recently swapped with. While the
+  // cursor remains over that chip we refuse to swap back (prevents oscillation
+  // when a long chip's new bounds still cover the cursor after a swap).
+  const lastSwapWithRef = useRef<string | null>(null)
+  // Live bounds of each chip after render, keyed by session id.
+  const chipRefs = useRef(new Map<string, BoxRenderable>())
+
+  const ordered = useMemo(() => orderSessionsForDisplay(sessions), [sessions])
+  if (!bar.visible || ordered.length === 0) return null
+
+  const visibleSessions =
+    dragOrder !== null
+      ? dragOrder
+          .map((id) => ordered.find((s) => s.id === id))
+          .filter((s): s is SessionRecord => !!s)
+      : ordered
+
+  const baselineOrder = ordered.map((s) => s.id)
+
+  function setChipRef(id: string, ref: BoxRenderable | null): void {
+    if (ref) chipRefs.current.set(id, ref)
+    else chipRefs.current.delete(id)
+  }
+
+  function findChipAtX(x: number): string | null {
+    for (const [id, ref] of chipRefs.current) {
+      if (x >= ref.x && x < ref.x + ref.width) return id
+    }
+    return null
+  }
+
+  const handleMouseDown = (id: string) => {
+    setDraggingId(id)
+    setDragOrder(baselineOrder)
+    lastSwapWithRef.current = null
+  }
+
+  const handleMouseDrag = (event: OtuiMouseEvent) => {
+    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
+    }
+    if (hit === lastSwapWithRef.current) return
+    setDragOrder((prev) => (prev ? moveIdToIdPosition(prev, draggingId, hit) : prev))
+    lastSwapWithRef.current = hit
+  }
+
+  const commitDrop = () => {
+    const source = draggingId
+    const finalOrder = dragOrder
+    setDraggingId(null)
+    setDragOrder(null)
+    lastSwapWithRef.current = null
+
+    if (!source || !finalOrder) return
+
+    const changed = !arraysEqual(finalOrder, baselineOrder)
+    if (changed) {
+      dispatchGlobal({ orderedIds: finalOrder, type: 'reorder-sessions' })
+      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' })
+    }
+  }
+
+  const cancelDrag = () => {
+    setDraggingId(null)
+    setDragOrder(null)
+    lastSwapWithRef.current = null
+  }
+
+  return (
+    <box
+      width="100%"
+      flexDirection="row"
+      paddingLeft={1}
+      paddingRight={1}
+      backgroundColor={theme.panelMuted}
+    >
+      {visibleSessions.map((session) => {
+        const displayIndex = baselineOrder.indexOf(session.id) + 1
+        return (
+          <SessionChip
+            key={session.id}
+            session={session}
+            index={displayIndex}
+            active={session.id === currentId}
+            busy={busyMap[session.id] ?? false}
+            dragging={draggingId === session.id}
+            onRef={(r) => setChipRef(session.id, r)}
+            onMouseDown={() => handleMouseDown(session.id)}
+            onMouseDrag={handleMouseDrag}
+            onMouseUp={commitDrop}
+            onMouseDragEnd={cancelDrag}
+          />
+        )
+      })}
+    </box>
+  )
+}
+
+function arraysEqual(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false
+  }
+  return true
+}
+
+interface SessionChipProps {
+  session: SessionRecord
+  index: number
+  active: boolean
+  busy: boolean
+  dragging: boolean
+  onRef: (ref: BoxRenderable | null) => void
+  onMouseDown: (event: OtuiMouseEvent) => void
+  onMouseDrag: (event: OtuiMouseEvent) => void
+  onMouseUp: (event: OtuiMouseEvent) => void
+  onMouseDragEnd: (event: OtuiMouseEvent) => void
+}
+
+function SessionChip({
+  active,
+  busy,
+  dragging,
+  index,
+  onMouseDown,
+  onMouseDrag,
+  onMouseDragEnd,
+  onMouseUp,
+  onRef,
+  session,
+}: SessionChipProps) {
+  const showSpinner = busy && !active
+  const spinner = useBusySpinner(showSpinner)
+  const indicator = showSpinner ? spinner : '●'
+  const indicatorColor = active || showSpinner ? theme.accent : theme.success
+  const labelColor = active ? theme.text : theme.textMuted
+  const bgColor = dragging || active ? theme.panelHighlight : undefined
+
+  return (
+    <box
+      ref={onRef}
+      flexDirection="row"
+      paddingLeft={1}
+      paddingRight={1}
+      backgroundColor={bgColor}
+      onMouseDown={(e) => {
+        e.preventDefault()
+        onMouseDown(e)
+      }}
+      onMouseDrag={(e) => {
+        onMouseDrag(e)
+      }}
+      onMouseUp={(e) => {
+        e.preventDefault()
+        onMouseUp(e)
+      }}
+      onMouseDragEnd={(e) => {
+        onMouseDragEnd(e)
+      }}
+    >
+      <text fg={indicatorColor} selectable={false}>
+        {indicator}{' '}
+      </text>
+      <text fg={labelColor} selectable={false}>
+        [{index}] {session.name}
+      </text>
+      <text fg={theme.dim} selectable={false}>
+        {' '}
+      </text>
+    </box>
+  )
+}

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

@@ -1,7 +1,6 @@
-import { useEffect, useState } from 'react'
-
 import type { TabSession } from '../../state/types'
 
+import { useBusySpinner } from '../hooks/use-busy-spinner'
 import { theme } from '../theme'
 
 interface TabItemProps {
@@ -28,9 +27,6 @@ function getStatusColor(status: TabSession['status']): string {
   }
 }
 
-const BUSY_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
-const BUSY_FRAME_INTERVAL_MS = 80
-
 function getIndicator(active: boolean, focused: boolean, inLayout: boolean): string {
   if (active) {
     return focused ? '›' : '•'
@@ -48,16 +44,8 @@ function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean)
 }
 
 function BusyIndicator() {
-  const [frame, setFrame] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setFrame((prev) => (prev + 1) % BUSY_FRAMES.length)
-    }, BUSY_FRAME_INTERVAL_MS)
-    return () => clearInterval(interval)
-  }, [])
-
-  return <text fg={theme.accent}>{BUSY_FRAMES[frame]} busy</text>
+  const frame = useBusySpinner()
+  return <text fg={theme.accent}>{frame} busy</text>
 }
 
 function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocusedInput: boolean }) {

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

@@ -1,8 +1,9 @@
 import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
-import type { ReactNode } from 'react'
+
+import { memo, type ReactNode } from 'react'
 
 import type { TerminalContentOrigin } from '../../input/raw-input-handler'
-import type { TabSession, TerminalSpan } from '../../state/types'
+import type { TabSession, TerminalSnapshot, TerminalSpan } from '../../state/types'
 
 import { logInputDebug } from '../../debug/input-log'
 import { theme } from '../theme'
@@ -77,9 +78,17 @@ function renderSpan(span: TerminalSpan, key: string): ReactNode {
   )
 }
 
-function renderViewport(tab: TabSession): ReactNode {
-  if (tab.viewport && tab.viewport.lines.length > 0) {
-    const lines = tab.viewport.lines
+interface TerminalViewportProps {
+  viewport: TerminalSnapshot | undefined
+  buffer: string
+}
+
+const TerminalViewport = memo(function TerminalViewport({
+  buffer,
+  viewport,
+}: TerminalViewportProps) {
+  if (viewport && viewport.lines.length > 0) {
+    const lines = viewport.lines
     return (
       <text fg={theme.text}>
         {lines.map((line, lineIndex) => (
@@ -92,12 +101,8 @@ function renderViewport(tab: TabSession): ReactNode {
     )
   }
 
-  return (
-    <text fg={theme.text}>
-      {tab.buffer.length > 0 ? tab.buffer : 'Waiting for session output...'}
-    </text>
-  )
-}
+  return <text fg={theme.text}>{buffer.length > 0 ? buffer : 'Waiting for session output...'}</text>
+})
 
 export function TerminalPane({
   contentOrigin,
@@ -199,7 +204,7 @@ export function TerminalPane({
             onMouseDrag={forwardMouseEvent}
             onMouseScroll={forwardScrollEvent}
           >
-            {renderViewport(tab)}
+            <TerminalViewport viewport={tab.viewport} buffer={tab.buffer} />
           </box>
         )}
       </box>

package/src/ui/hooks/use-busy-spinner.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+
+export const BUSY_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+export const BUSY_FRAME_INTERVAL_MS = 80
+
+export function useBusySpinner(enabled = true): string {
+  const [frame, setFrame] = useState(0)
+
+  useEffect(() => {
+    if (!enabled) return
+    const interval = setInterval(() => {
+      setFrame((prev) => (prev + 1) % BUSY_FRAMES.length)
+    }, BUSY_FRAME_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [enabled])
+
+  return BUSY_FRAMES[frame] ?? BUSY_FRAMES[0] ?? ''
+}

package/src/ui/root.tsx

@@ -12,6 +12,7 @@ import { GitView } from './components/git-view'
 import { HelpModal } from './components/help-modal'
 import { NewTabModal } from './components/new-tab-modal'
 import { PendingChordOverlay } from './components/pending-chord-overlay'
+import { SessionBar } from './components/session-bar'
 import { SessionNameModal } from './components/session-name-modal'
 import { SessionPickerModal } from './components/session-picker-modal'
 import { Sidebar } from './components/sidebar'
@@ -213,6 +214,7 @@ export function RootView({
   const customCommands = useAppStore((s) => s.customCommands)
   const sessions = useAppStore((s) => s.sessions)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const sessionBarPosition = useAppStore((s) => s.sessionBar.position)
 
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
   const activeTree = activeTabId ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId) : null
@@ -243,6 +245,7 @@ export function RootView({
 
   return (
     <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
+      {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
         <Sidebar onTabActivate={onPaneActivate} />
         {activeTree && activeTree.type === 'split' ? (
@@ -290,6 +293,7 @@ export function RootView({
           />
         )}
       </box>
+      {sessionBarPosition === 'bottom' && <SessionBar />}
       <StatusBar />
       <PendingChordOverlay />
       {renderModal(modal, {

package/src/ui/session-ordering.ts

@@ -0,0 +1,34 @@
+import type { SessionRecord } from '../state/types'
+
+/**
+ * Return sessions in user-facing display order: persisted `order` ascending,
+ * with any missing `order` falling back to `createdAt` ascending.
+ */
+export function orderSessionsForDisplay(sessions: SessionRecord[]): SessionRecord[] {
+  return sessions.slice().sort((a, b) => {
+    const ao = a.order ?? Number.MAX_SAFE_INTEGER
+    const bo = b.order ?? Number.MAX_SAFE_INTEGER
+    if (ao !== bo) return ao - bo
+    return a.createdAt.localeCompare(b.createdAt)
+  })
+}
+
+/**
+ * Move `moveId` to the slot currently held by `intoPositionOfId`, shifting the
+ * displaced id in the opposite direction. Pure; returns a new array. Returns
+ * the input unchanged if either id is missing or both refer to the same slot.
+ */
+export function moveIdToIdPosition(
+  ids: string[],
+  moveId: string,
+  intoPositionOfId: string
+): string[] {
+  if (moveId === intoPositionOfId) return ids
+  const from = ids.indexOf(moveId)
+  const to = ids.indexOf(intoPositionOfId)
+  if (from < 0 || to < 0) return ids
+  const next = ids.slice()
+  next.splice(from, 1)
+  next.splice(to, 0, moveId)
+  return next
+}