@brimveyn/aimux 1.1.0

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

@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react'
+
+import type { TabSession } from '../../state/types'
+
+import { theme } from '../theme'
+
+interface TabItemProps {
+  id?: string
+  tab: TabSession
+  active: boolean
+  focused: boolean
+  isFocusedInput: boolean
+  inLayout?: boolean
+}
+
+function getStatusColor(status: TabSession['status']): string {
+  switch (status) {
+    case 'running':
+      return theme.success
+    case 'disconnected':
+      return theme.warning
+    case 'error':
+      return theme.danger
+    case 'exited':
+      return theme.warning
+    default:
+      return theme.textMuted
+  }
+}
+
+const BUSY_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+const BUSY_FRAME_INTERVAL_MS = 80
+
+function getIndicator(active: boolean, focused: boolean, inLayout: boolean): string {
+  if (active) {
+    return focused ? '›' : '•'
+  }
+
+  return inLayout ? '·' : ' '
+}
+
+function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean): string {
+  if (active) {
+    return focused ? theme.accent : theme.accentAlt
+  }
+
+  return inLayout ? theme.textMuted : theme.dim
+}
+
+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>
+}
+
+function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocusedInput: boolean }) {
+  if (tab.status === 'error') {
+    return <text fg={theme.danger}>✗ error</text>
+  }
+
+  if (tab.status === 'disconnected') {
+    return <text fg={theme.warning}>⏸ restore</text>
+  }
+
+  if (tab.status === 'exited') {
+    return <text fg={theme.warning}>⏹ exited</text>
+  }
+
+  if (isFocusedInput) {
+    return <text fg={theme.borderActive}>▸ focused</text>
+  }
+
+  if (tab.activity === 'busy') {
+    return <BusyIndicator />
+  }
+
+  if (tab.activity === 'idle') {
+    return <text fg={theme.success}>● idle</text>
+  }
+
+  return <text fg={getStatusColor(tab.status)}>{tab.status}</text>
+}
+
+export function TabItem({ active, focused, id, inLayout, isFocusedInput, tab }: TabItemProps) {
+  const label = tab.command.split(' ')[0]
+  const isInLayout = inLayout ?? false
+  const indicator = getIndicator(active, focused, isInLayout)
+  const indicatorColor = getIndicatorColor(active, focused, isInLayout)
+
+  return (
+    <box
+      id={id}
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={0}
+      paddingBottom={0}
+      backgroundColor={active ? theme.panelHighlight : undefined}
+      flexDirection="column"
+      gap={0}
+    >
+      <box flexDirection="row">
+        <text fg={indicatorColor}>{indicator} </text>
+        <text fg={active ? theme.text : theme.textMuted}>{tab.title}</text>
+      </box>
+      <box flexDirection="row">
+        <text fg={theme.textMuted}> {label} </text>
+        <ActivityIndicator tab={tab} isFocusedInput={isFocusedInput} />
+      </box>
+    </box>
+  )
+}

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

@@ -0,0 +1,215 @@
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+import type { ReactNode } from 'react'
+
+import type { TerminalContentOrigin } from '../../input/raw-input-handler'
+import type { TabSession, TerminalSpan } from '../../state/types'
+
+import { logInputDebug } from '../../debug/input-log'
+import { theme } from '../theme'
+
+interface TerminalPaneProps {
+  tab?: TabSession
+  tabId?: string
+  focusMode: import('../../state/types').FocusMode
+  isActive?: boolean
+  contentOrigin: TerminalContentOrigin
+  mouseForwardingEnabled: boolean
+  localScrollbackEnabled: boolean
+  onTerminalMouseEvent: (event: OtuiMouseEvent, origin: TerminalContentOrigin) => void
+  onTerminalScrollEvent: (event: OtuiMouseEvent) => void
+  onTerminalClick?: (event: OtuiMouseEvent, origin: TerminalContentOrigin, tabId?: string) => void
+  onPaneActivate?: (tabId: string) => void
+  onSeparatorDrag?: (event: OtuiMouseEvent) => boolean
+  onSeparatorDragEnd?: () => void
+}
+
+function getTitle(
+  tab: TabSession | undefined,
+  isActive: boolean,
+  focusMode: TerminalPaneProps['focusMode']
+): string {
+  if (!tab) {
+    return 'No active session'
+  }
+
+  if (isActive && focusMode === 'terminal-input') {
+    return `● ${tab.title} · ${tab.status}`
+  }
+
+  if (isActive) {
+    return `▸ ${tab.title} · ${tab.status}`
+  }
+
+  return `${tab.title} · ${tab.status}`
+}
+
+function getBorderColor(isActive: boolean, focusMode: TerminalPaneProps['focusMode']): string {
+  if (isActive && focusMode === 'terminal-input') {
+    return theme.borderActive
+  }
+
+  if (isActive) {
+    return theme.accentAlt
+  }
+
+  return theme.dim
+}
+
+function renderSpan(span: TerminalSpan, key: string): ReactNode {
+  let node: ReactNode = span.text
+
+  if (span.underline) {
+    node = <u>{node}</u>
+  }
+
+  if (span.italic) {
+    node = <em>{node}</em>
+  }
+
+  if (span.bold) {
+    node = <strong>{node}</strong>
+  }
+
+  return (
+    <span key={key} fg={span.fg ?? theme.text} bg={span.bg}>
+      {node}
+    </span>
+  )
+}
+
+function renderViewport(tab: TabSession): ReactNode {
+  if (tab.viewport && tab.viewport.lines.length > 0) {
+    const lines = tab.viewport.lines
+    return (
+      <text fg={theme.text}>
+        {lines.map((line, lineIndex) => (
+          <span key={`line-${lineIndex}`}>
+            {line.spans.map((span, spanIndex) => renderSpan(span, `s-${spanIndex}`))}
+            {lineIndex < lines.length - 1 ? '\n' : ''}
+          </span>
+        ))}
+      </text>
+    )
+  }
+
+  return (
+    <text fg={theme.text}>
+      {tab.buffer.length > 0 ? tab.buffer : 'Waiting for session output...'}
+    </text>
+  )
+}
+
+export function TerminalPane({
+  contentOrigin,
+  focusMode,
+  isActive,
+  localScrollbackEnabled,
+  mouseForwardingEnabled,
+  onPaneActivate,
+  onSeparatorDrag,
+  onSeparatorDragEnd,
+  onTerminalClick,
+  onTerminalMouseEvent,
+  onTerminalScrollEvent,
+  tab,
+  tabId,
+}: TerminalPaneProps) {
+  const paneIsActive = isActive ?? true
+  const canForwardMouse = focusMode === 'terminal-input' && !!tab && mouseForwardingEnabled
+  const canUseLocalScrollback = focusMode === 'terminal-input' && !!tab && localScrollbackEnabled
+  const forwardMouseEvent = (event: OtuiMouseEvent) => {
+    if (event.type === 'down') {
+      logInputDebug('pane.mouseDown', {
+        button: event.button,
+        canForward: canForwardMouse,
+        eventType: event.type,
+        tabId,
+        willClick: !canForwardMouse && !!tab && event.button === 0 && !!onTerminalClick,
+        x: event.x,
+        y: event.y,
+      })
+    }
+    if (event.type === 'drag' && onSeparatorDrag?.(event)) {
+      event.preventDefault()
+      return
+    }
+    if (event.type === 'up') {
+      onSeparatorDragEnd?.()
+    }
+    if (tabId && onPaneActivate && event.type === 'down') {
+      onPaneActivate(tabId)
+    }
+    if (!canForwardMouse) {
+      if (tab && event.type === 'down' && event.button === 0 && onTerminalClick) {
+        onTerminalClick(event, contentOrigin, tabId)
+      }
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+    onTerminalMouseEvent(event, contentOrigin)
+  }
+  const forwardScrollEvent = (event: OtuiMouseEvent) => {
+    if (!canForwardMouse && !canUseLocalScrollback) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (canForwardMouse) {
+      onTerminalMouseEvent(event, contentOrigin)
+      return
+    }
+
+    onTerminalScrollEvent(event)
+  }
+  return (
+    <box flexDirection="column" flexGrow={1} gap={0}>
+      <box
+        border
+        borderColor={getBorderColor(paneIsActive, focusMode)}
+        title={getTitle(tab, paneIsActive, focusMode)}
+        padding={0}
+        flexDirection="column"
+        flexGrow={1}
+        backgroundColor={theme.background}
+        onMouseDrag={forwardMouseEvent}
+        onMouseScroll={forwardScrollEvent}
+        onMouseUp={forwardMouseEvent}
+      >
+        {!tab ? (
+          <box flexGrow={1} justifyContent="center" alignItems="center" flexDirection="column">
+            <text fg={theme.dim}>· · ·</text>
+            <text fg={theme.textMuted}> </text>
+            <box flexDirection="row">
+              <text fg={theme.textMuted}>Press </text>
+              <text fg={theme.accent}>Ctrl+n</text>
+              <text fg={theme.textMuted}> to launch an assistant</text>
+            </box>
+          </box>
+        ) : (
+          <box
+            flexDirection="column"
+            flexGrow={1}
+            width="100%"
+            onMouseDown={forwardMouseEvent}
+            onMouseUp={forwardMouseEvent}
+            onMouseDrag={forwardMouseEvent}
+            onMouseScroll={forwardScrollEvent}
+          >
+            {renderViewport(tab)}
+          </box>
+        )}
+      </box>
+      {tab?.status === 'exited' && tab.exitCode !== undefined ? (
+        <text fg={theme.warning}>Process exited with code {tab.exitCode}</text>
+      ) : null}
+      {tab?.status === 'disconnected' ? (
+        <text fg={theme.warning}>Restored snapshot. Press Ctrl+r to restart this session.</text>
+      ) : null}
+      {tab?.errorMessage ? <text fg={theme.danger}>{tab.errorMessage}</text> : null}
+    </box>
+  )
+}

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

@@ -0,0 +1,35 @@
+import { theme } from '../theme'
+import { THEME_IDS, type ThemeId, THEMES } from '../themes'
+import { uiTokens } from '../ui-tokens'
+import { ListItem } from './list-item'
+import { ModalShell } from './modal-shell'
+
+interface ThemePickerModalProps {
+  selectedIndex: number
+  currentThemeId: ThemeId
+}
+
+export function ThemePickerModal({ currentThemeId, selectedIndex }: ThemePickerModalProps) {
+  return (
+    <ModalShell
+      title="Select theme"
+      help="j/k move, Enter confirm, Esc cancel."
+      width={uiTokens.modalWidth.md}
+      listGap={0}
+    >
+      {THEME_IDS.map((id, index) => {
+        const entry = THEMES[id]
+        const active = index === selectedIndex
+        const isCurrent = id === currentThemeId
+        return (
+          <ListItem
+            key={id}
+            active={active}
+            title={<text fg={active ? theme.text : theme.textMuted}>{entry.name}</text>}
+            trailing={isCurrent ? <text fg={theme.accent}>current</text> : undefined}
+          />
+        )
+      })}
+    </ModalShell>
+  )
+}

package/src/ui/components/use-sidebar-auto-scroll.ts

@@ -0,0 +1,63 @@
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+import { useEffect, useRef } from 'react'
+
+import { getSidebarScrollTarget } from './sidebar-scroll'
+
+interface UseSidebarAutoScrollOptions {
+  scrollRef: React.RefObject<ScrollBoxRenderable | null>
+  visible: boolean
+  activeTabId: string | null
+  activeIndex: number
+  tabCount: number
+}
+
+export function useSidebarAutoScroll({
+  activeIndex,
+  activeTabId,
+  scrollRef,
+  tabCount,
+  visible,
+}: UseSidebarAutoScrollOptions): void {
+  const previousActiveIndexRef = useRef(-1)
+  const previousVisibilityRef = useRef(visible)
+
+  useEffect(() => {
+    if (!visible) {
+      previousVisibilityRef.current = false
+      previousActiveIndexRef.current = activeIndex
+      return
+    }
+
+    const scrollbox = scrollRef.current
+    if (!scrollbox) {
+      previousVisibilityRef.current = visible
+      previousActiveIndexRef.current = activeIndex
+      return
+    }
+
+    if (!previousVisibilityRef.current && activeTabId) {
+      scrollbox.scrollChildIntoView(`sidebar-tab-${activeTabId}`)
+      previousVisibilityRef.current = true
+      previousActiveIndexRef.current = activeIndex
+      return
+    }
+
+    const scrollTarget = getSidebarScrollTarget({
+      nextActiveIndex: activeIndex,
+      previousActiveIndex: previousActiveIndexRef.current,
+      tabCount,
+    })
+
+    if (scrollTarget === 'top') {
+      scrollbox.scrollTo({ x: 0, y: 0 })
+    } else if (scrollTarget === 'bottom') {
+      scrollbox.scrollTo({ x: 0, y: scrollbox.scrollHeight })
+    } else if (scrollTarget === 'active-item' && activeTabId) {
+      scrollbox.scrollChildIntoView(`sidebar-tab-${activeTabId}`)
+    }
+
+    previousVisibilityRef.current = visible
+    previousActiveIndexRef.current = activeIndex
+  }, [activeIndex, activeTabId, scrollRef, tabCount, visible])
+}

package/src/ui/components/use-sidebar-branch.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+
+import { getCurrentBranch } from '../git-branch'
+
+const BRANCH_POLL_INTERVAL_MS = 5_000
+
+export function useSidebarBranch(projectPath: string | undefined): string | null {
+  const [branch, setBranch] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!projectPath) {
+      setBranch(null)
+      return
+    }
+
+    let isCurrent = true
+    const updateBranch = async () => {
+      const nextBranch = await getCurrentBranch(projectPath)
+      if (isCurrent) {
+        setBranch(nextBranch)
+      }
+    }
+
+    void updateBranch()
+    const interval = setInterval(() => {
+      void updateBranch()
+    }, BRANCH_POLL_INTERVAL_MS)
+
+    return () => {
+      isCurrent = false
+      clearInterval(interval)
+    }
+  }, [projectPath])
+
+  return branch
+}

package/src/ui/directory-search.ts

@@ -0,0 +1 @@
+export { searchProjectDirectories as searchDirectories } from '../platform/project-search'

package/src/ui/git-branch.ts

@@ -0,0 +1,11 @@
+import { $ } from 'bun'
+
+export async function getCurrentBranch(cwd: string): Promise<string | null> {
+  try {
+    const result = await $`git -C ${cwd} branch --show-current`.quiet()
+    const branch = result.text().trim()
+    return branch || null
+  } catch {
+    return null
+  }
+}

package/src/ui/path-format.ts

@@ -0,0 +1,6 @@
+import { homedir } from 'node:os'
+
+export function abbreviatePath(path: string): string {
+  const home = homedir()
+  return path.startsWith(home) ? `~${path.slice(home.length)}` : path
+}