@brimveyn/aimux 1.1.0

package/src/ui/components/sidebar.tsx

@@ -0,0 +1,225 @@
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+import { memo, useMemo, useRef } from 'react'
+
+import type { GitPanelState } from '../../state/types'
+
+import { useGitPanelPolling } from '../../git/git-poller'
+import { useAppStore } from '../../state/app-store'
+import { theme } from '../theme'
+import { GitPanel } from './git-panel'
+import { buildTabGroupInfo } from './sidebar-group-metadata'
+import { TabItem } from './tab-item'
+import { useSidebarAutoScroll } from './use-sidebar-auto-scroll'
+import { useSidebarBranch } from './use-sidebar-branch'
+
+interface SidebarProps {
+  onTabActivate?: (tabId: string) => void
+}
+
+const GUTTER_START = '╭'
+const GUTTER_MIDDLE = '├'
+const GUTTER_END = '╰'
+const GUTTER_PAD = '│'
+
+const SidebarTop = memo(function SidebarTop() {
+  const sidebarWidth = useAppStore((s) => s.sidebar.width)
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const sessions = useAppStore((s) => s.sessions)
+  const currentSession = currentSessionId
+    ? sessions.find((s) => s.id === currentSessionId)
+    : undefined
+  const projectPath = currentSession?.projectPath
+  const branch = useSidebarBranch(projectPath)
+
+  return (
+    <box flexDirection="column" flexShrink={0} gap={0}>
+      <text fg={theme.accent}>
+        <strong>aimux</strong>
+      </text>
+      <text fg={theme.accentAlt}>
+        {currentSession ? currentSession.name : 'No session selected'}
+      </text>
+      {branch ? (
+        <box flexDirection="row">
+          <text fg={theme.accent}>{'\u{e702}'} </text>
+          <text fg={theme.textMuted}>{branch}</text>
+        </box>
+      ) : null}
+      <text fg={theme.dim}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+    </box>
+  )
+})
+
+function renderGroupGutter(
+  isGroupStart: boolean,
+  isGroupMiddle: boolean,
+  isGroupEnd: boolean,
+  isActive: boolean
+) {
+  return (
+    <box flexDirection="column" width={1} overflow="hidden">
+      <text fg={theme.accentAlt} bg={isActive ? theme.panelHighlight : undefined}>
+        {/* oxlint-disable-next-line no-nested-ternary */}
+        {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
+      </text>
+      <text fg={theme.accentAlt} bg={isActive ? theme.panelHighlight : undefined}>
+        {isGroupEnd ? GUTTER_END : GUTTER_PAD}
+      </text>
+    </box>
+  )
+}
+
+interface TabsBodyProps {
+  onTabActivate?: (tabId: string) => void
+}
+
+const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
+  const tabs = useAppStore((s) => s.tabs)
+  const activeTabId = useAppStore((s) => s.activeTabId)
+  const focusMode = useAppStore((s) => s.focusMode)
+  const layoutTrees = useAppStore((s) => s.layoutTrees)
+  const sidebarVisible = useAppStore((s) => s.sidebar.visible)
+
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+  const activeIndex = tabs.findIndex((tab) => tab.id === activeTabId)
+  const tabGroupInfo = useMemo(() => buildTabGroupInfo(layoutTrees, tabs), [layoutTrees, tabs])
+
+  useSidebarAutoScroll({
+    activeIndex,
+    activeTabId,
+    scrollRef,
+    tabCount: tabs.length,
+    visible: sidebarVisible,
+  })
+
+  return (
+    <scrollbox
+      paddingTop={0}
+      ref={scrollRef}
+      flexGrow={1}
+      scrollY
+      viewportCulling
+      contentOptions={{ flexDirection: 'column', gap: 0 }}
+    >
+      {tabs.length === 0 ? (
+        <box paddingTop={1}>
+          <text fg={theme.textMuted}>No tabs yet. Press Ctrl+n.</text>
+        </box>
+      ) : (
+        tabs.map((tab, index) => {
+          const isActive = tab.id === activeTabId
+          const info = tabGroupInfo.get(tab.id)
+          const inLayout = !!info?.inLayout
+          const inGroup = info ? index >= info.groupStart && index <= info.groupEnd : false
+          const isGroupStart = info ? index === info.groupStart : false
+          const isGroupEnd = info ? index === info.groupEnd : false
+          const isGroupMiddle = inGroup && !isGroupStart && !isGroupEnd
+
+          return (
+            <box
+              key={tab.id}
+              flexDirection="row"
+              onMouseDown={onTabActivate ? () => onTabActivate(tab.id) : undefined}
+            >
+              {inGroup
+                ? renderGroupGutter(isGroupStart, isGroupMiddle, isGroupEnd, isActive)
+                : 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>
+            </box>
+          )
+        })
+      )}
+    </scrollbox>
+  )
+})
+
+const GitBody = memo(function GitBody() {
+  const gitPanel = useAppStore((s) => s.gitPanel)
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const sessions = useAppStore((s) => s.sessions)
+  const sidebarVisible = useAppStore((s) => s.sidebar.visible)
+  const gitPanelVisible = useAppStore((s) => s.sidebar.gitPanelVisible)
+  const currentSession = currentSessionId
+    ? sessions.find((s) => s.id === currentSessionId)
+    : undefined
+  const projectPath = currentSession?.projectPath
+
+  useGitPanelPolling({
+    enabled: sidebarVisible && gitPanelVisible,
+    projectPath,
+  })
+
+  const lastGoodRef = useRef<GitPanelState | null>(null)
+  const prevProjectPathRef = useRef(projectPath)
+  if (prevProjectPathRef.current !== projectPath) {
+    prevProjectPathRef.current = projectPath
+    lastGoodRef.current = null
+  }
+  const isGood = gitPanel.error === null && gitPanel.branch !== null
+  if (isGood) {
+    lastGoodRef.current = gitPanel
+  }
+  const display = lastGoodRef.current ?? gitPanel
+
+  return <GitPanel gitPanel={display} projectPath={projectPath} />
+})
+
+export function Sidebar({ onTabActivate }: SidebarProps) {
+  const sidebarVisible = useAppStore((s) => s.sidebar.visible)
+  const sidebarWidth = useAppStore((s) => s.sidebar.width)
+  const gitPanelVisible = useAppStore((s) => s.sidebar.gitPanelVisible)
+  const gitPanelRatio = useAppStore((s) => s.sidebar.gitPanelRatio)
+
+  if (!sidebarVisible) {
+    return null
+  }
+
+  // flex-grow scaled by 100 (integer preferred); tabs gets (1-ratio), git gets ratio.
+  const tabsGrow = Math.max(1, Math.round((1 - gitPanelRatio) * 100))
+  const gitGrow = Math.max(1, Math.round(gitPanelRatio * 100))
+
+  return (
+    <box
+      width={sidebarWidth}
+      padding={0}
+      flexDirection="column"
+      backgroundColor={theme.panel}
+      gap={0}
+    >
+      <SidebarTop />
+      <box
+        flexDirection="column"
+        flexGrow={tabsGrow}
+        flexShrink={1}
+        flexBasis={0}
+        overflow="hidden"
+      >
+        <TabsBody onTabActivate={onTabActivate} />
+      </box>
+      {gitPanelVisible ? (
+        <>
+          <text fg={theme.dim}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+          <box
+            flexDirection="column"
+            flexGrow={gitGrow}
+            flexShrink={1}
+            flexBasis={0}
+            overflow="hidden"
+          >
+            <GitBody />
+          </box>
+        </>
+      ) : null}
+    </box>
+  )
+}

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

@@ -0,0 +1,39 @@
+import { theme } from '../theme'
+import { uiTokens } from '../ui-tokens'
+import { InputField } from './input-field'
+import { ModalShell } from './modal-shell'
+
+interface SnippetEditorModalProps {
+  activeField: 'name' | 'content'
+  snippetName: string
+  snippetContent: string
+  isEditing: boolean
+}
+
+export function SnippetEditorModal({
+  activeField,
+  isEditing,
+  snippetContent,
+  snippetName,
+}: SnippetEditorModalProps) {
+  const nameActive = activeField === 'name'
+  const contentActive = activeField === 'content'
+
+  return (
+    <ModalShell
+      title={isEditing ? 'Edit snippet' : 'Create snippet'}
+      help="Tab switch field. Enter on content to save. Esc cancel."
+      width={uiTokens.modalWidth.xl}
+    >
+      <box flexDirection="column">
+        <text fg={nameActive ? theme.text : theme.textMuted}>Name</text>
+        <InputField active={nameActive} value={snippetName} />
+      </box>
+
+      <box flexDirection="column">
+        <text fg={contentActive ? theme.text : theme.textMuted}>Content</text>
+        <InputField active={contentActive} value={snippetContent} />
+      </box>
+    </ModalShell>
+  )
+}

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

@@ -0,0 +1,56 @@
+import type { SnippetRecord } from '../../state/types'
+
+import { filterSnippets } from '../../state/selectors'
+import { theme } from '../theme'
+import { uiTokens } from '../ui-tokens'
+import { ListItem } from './list-item'
+import { ModalFilterBar } from './modal-filter-bar'
+import { ModalShell } from './modal-shell'
+
+interface SnippetPickerModalProps {
+  snippets: SnippetRecord[]
+  selectedIndex: number
+  filter: string | null
+}
+
+const MAX_PREVIEW_LENGTH = 60
+
+function truncateContent(content: string): string {
+  const normalized = content.replaceAll(/\s+/g, ' ').trim()
+  if (normalized.length <= MAX_PREVIEW_LENGTH) return normalized
+  return `${normalized.slice(0, MAX_PREVIEW_LENGTH - 3)}...`
+}
+
+export function SnippetPickerModal({ filter, selectedIndex, snippets }: SnippetPickerModalProps) {
+  const filtered = filterSnippets(snippets, filter)
+
+  return (
+    <ModalShell
+      title="Snippets"
+      help="j/k move, Enter send, n new, e edit, d delete, / filter, Esc cancel."
+      width={uiTokens.modalWidth.xl}
+      footer={<ModalFilterBar filter={filter} />}
+    >
+      {filtered.length === 0 ? (
+        <text fg={theme.textMuted}>
+          {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.text : theme.textMuted}>
+                <strong>{snippet.name}</strong>
+              </text>
+            }
+            subtitle={<text fg={theme.textMuted}>{truncateContent(snippet.content)}</text>}
+          />
+        )
+      })}
+    </ModalShell>
+  )
+}

package/src/ui/components/split-layout.tsx

@@ -0,0 +1,201 @@
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
+import type { TerminalContentOrigin } from '../../input/raw-input-handler'
+import type { FocusMode, TabSession } from '../../state/types'
+
+import { logInputDebug } from '../../debug/input-log'
+import {
+  computePaneRects,
+  type LayoutNode,
+  PANE_BORDER,
+  type PaneRect,
+  type SplitDirection,
+} from '../../state/layout-tree'
+import { theme } from '../theme'
+import { TerminalPane } from './terminal-pane'
+
+const PANE_CHROME = PANE_BORDER
+
+interface SplitLayoutProps {
+  node: LayoutNode
+  tabs: TabSession[]
+  activeTabId: string | null
+  focusMode: FocusMode
+  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
+  onSplitResize?: (tabId: string, ratio: number, axis: SplitDirection) => void
+  onSeparatorDragStart?: (info: {
+    tabId: string
+    direction: SplitDirection
+    screenStart: number
+    totalSize: number
+  }) => void
+  onSeparatorDrag?: (event: OtuiMouseEvent) => boolean
+  onSeparatorDragEnd?: () => void
+  contentOrigin: TerminalContentOrigin
+  bounds: PaneRect
+}
+
+export function SplitLayout({
+  activeTabId,
+  bounds,
+  contentOrigin,
+  focusMode,
+  localScrollbackEnabled,
+  mouseForwardingEnabled,
+  node,
+  onPaneActivate,
+  onSeparatorDrag,
+  onSeparatorDragEnd,
+  onSeparatorDragStart,
+  onSplitResize,
+  onTerminalClick,
+  onTerminalMouseEvent,
+  onTerminalScrollEvent,
+  tabs,
+}: SplitLayoutProps) {
+  if (node.type === 'leaf') {
+    const tab = tabs.find((t) => t.id === node.tabId)
+    const isActive = node.tabId === activeTabId
+    const paneOrigin: TerminalContentOrigin = {
+      cols: Math.max(1, bounds.cols - PANE_CHROME * 2),
+      rows: Math.max(1, bounds.rows - PANE_CHROME * 2),
+      x: contentOrigin.x + bounds.x + PANE_CHROME,
+      y: contentOrigin.y + bounds.y + PANE_CHROME,
+    }
+    logInputDebug('split.paneOrigin', {
+      boundsCols: bounds.cols,
+      boundsRows: bounds.rows,
+      boundsX: bounds.x,
+      boundsY: bounds.y,
+      contentOriginX: contentOrigin.x,
+      contentOriginY: contentOrigin.y,
+      paneChrome: PANE_CHROME,
+      paneOriginX: paneOrigin.x,
+      paneOriginY: paneOrigin.y,
+      tabId: node.tabId,
+    })
+    return (
+      <TerminalPane
+        tab={tab}
+        tabId={node.tabId}
+        focusMode={focusMode}
+        isActive={isActive}
+        contentOrigin={paneOrigin}
+        mouseForwardingEnabled={isActive && mouseForwardingEnabled}
+        localScrollbackEnabled={isActive && localScrollbackEnabled}
+        onTerminalMouseEvent={onTerminalMouseEvent}
+        onTerminalScrollEvent={onTerminalScrollEvent}
+        onTerminalClick={onTerminalClick}
+        onPaneActivate={onPaneActivate}
+        onSeparatorDrag={onSeparatorDrag}
+        onSeparatorDragEnd={onSeparatorDragEnd}
+      />
+    )
+  }
+
+  const flexDir = node.direction === 'vertical' ? 'row' : 'column'
+  const firstGrow = Math.round(node.ratio * 100)
+  const secondGrow = 100 - firstGrow
+
+  // Compute sub-bounds for each child
+  const rects = computePaneRects(node, bounds)
+
+  // Compute the bounding rect for each subtree
+  const firstBounds = subtreeBounds(node.first, rects, bounds)
+  const secondBounds = subtreeBounds(node.second, rects, bounds)
+
+  return (
+    <box flexDirection={flexDir} flexGrow={1} gap={0}>
+      <box flexGrow={firstGrow} flexDirection="column" overflow="hidden">
+        <SplitLayout
+          node={node.first}
+          tabs={tabs}
+          activeTabId={activeTabId}
+          focusMode={focusMode}
+          mouseForwardingEnabled={mouseForwardingEnabled}
+          localScrollbackEnabled={localScrollbackEnabled}
+          onTerminalMouseEvent={onTerminalMouseEvent}
+          onTerminalScrollEvent={onTerminalScrollEvent}
+          onTerminalClick={onTerminalClick}
+          onPaneActivate={onPaneActivate}
+          onSplitResize={onSplitResize}
+          onSeparatorDragStart={onSeparatorDragStart}
+          onSeparatorDrag={onSeparatorDrag}
+          onSeparatorDragEnd={onSeparatorDragEnd}
+          contentOrigin={contentOrigin}
+          bounds={firstBounds}
+        />
+      </box>
+      <box
+        minWidth={node.direction === 'vertical' ? 1 : undefined}
+        minHeight={node.direction === 'horizontal' ? 1 : undefined}
+        backgroundColor={theme.border}
+        onMouseDown={(e: OtuiMouseEvent) => {
+          e.preventDefault()
+          if (!onSeparatorDragStart) return
+          const leafId = getFirstLeafId(node.first)
+          if (!leafId) return
+          onSeparatorDragStart({
+            direction: node.direction,
+            screenStart:
+              node.direction === 'vertical'
+                ? contentOrigin.x + bounds.x
+                : contentOrigin.y + bounds.y,
+            tabId: leafId,
+            totalSize: node.direction === 'vertical' ? bounds.cols : bounds.rows,
+          })
+        }}
+      />
+      <box flexGrow={secondGrow} flexDirection="column" overflow="hidden">
+        <SplitLayout
+          node={node.second}
+          tabs={tabs}
+          activeTabId={activeTabId}
+          focusMode={focusMode}
+          mouseForwardingEnabled={mouseForwardingEnabled}
+          localScrollbackEnabled={localScrollbackEnabled}
+          onTerminalMouseEvent={onTerminalMouseEvent}
+          onTerminalScrollEvent={onTerminalScrollEvent}
+          onTerminalClick={onTerminalClick}
+          onPaneActivate={onPaneActivate}
+          onSplitResize={onSplitResize}
+          onSeparatorDragStart={onSeparatorDragStart}
+          onSeparatorDrag={onSeparatorDrag}
+          onSeparatorDragEnd={onSeparatorDragEnd}
+          contentOrigin={contentOrigin}
+          bounds={secondBounds}
+        />
+      </box>
+    </box>
+  )
+}
+
+function getFirstLeafId(node: LayoutNode): string | null {
+  if (node.type === 'leaf') return node.tabId
+  return getFirstLeafId(node.first)
+}
+
+function subtreeBounds(
+  node: LayoutNode,
+  rects: Map<string, PaneRect>,
+  fallback: PaneRect
+): PaneRect {
+  if (node.type === 'leaf') {
+    return rects.get(node.tabId) ?? fallback
+  }
+  const firstBounds = subtreeBounds(node.first, rects, fallback)
+  const lastBounds = subtreeBounds(node.second, rects, fallback)
+  const x = Math.min(firstBounds.x, lastBounds.x)
+  const y = Math.min(firstBounds.y, lastBounds.y)
+  return {
+    cols: Math.max(firstBounds.x + firstBounds.cols, lastBounds.x + lastBounds.cols) - x,
+    rows: Math.max(firstBounds.y + firstBounds.rows, lastBounds.y + lastBounds.rows) - y,
+    x,
+    y,
+  }
+}

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

@@ -0,0 +1,60 @@
+import type { AppState } from '../../state/types'
+
+import { useAppStore } from '../../state/app-store'
+import { getStatusBarModel } from '../status-bar-model'
+import { theme } from '../theme'
+
+function getModeColor(focusMode: AppState['focusMode']): string {
+  switch (focusMode) {
+    case 'terminal-input':
+      return theme.accent
+    case 'layout':
+      return theme.warning
+    case 'modal':
+      return theme.warning
+    case 'navigation':
+    default:
+      return theme.accentAlt
+  }
+}
+
+function getModeLabel(focusMode: AppState['focusMode']): string {
+  switch (focusMode) {
+    case 'terminal-input':
+      return 'input'
+    case 'layout':
+      return 'layout'
+    case 'modal':
+      return 'modal'
+    case 'navigation':
+    default:
+      return 'nav'
+  }
+}
+
+export function StatusBar() {
+  const state = useAppStore((s) => s)
+  const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId)
+  const model = getStatusBarModel(state, activeTab)
+
+  return (
+    <box
+      minHeight={2}
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={0}
+      paddingBottom={0}
+      flexDirection="column"
+      backgroundColor={theme.panelMuted}
+    >
+      <box width="100%" flexDirection="row">
+        <text fg={getModeColor(state.focusMode)}>[{getModeLabel(state.focusMode)}]</text>
+        <text> </text>
+        <text fg={theme.text}>{model.left}</text>
+      </box>
+      <box width="100%">
+        <text fg={theme.textMuted}>{model.right}</text>
+      </box>
+    </box>
+  )
+}

package/src/ui/components/surface.tsx

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react'
+
+import { theme } from '../theme'
+
+type SurfaceTone = 'muted' | 'elevated' | 'selected' | 'input' | 'inputActive'
+
+function getSurfaceColor(tone: SurfaceTone): string {
+  switch (tone) {
+    case 'elevated':
+      return theme.panel
+    case 'selected':
+      return theme.panelHighlight
+    case 'input':
+      return theme.background
+    case 'inputActive':
+      return theme.panelHighlight
+    case 'muted':
+    default:
+      return theme.panelMuted
+  }
+}
+
+interface SurfaceProps {
+  children: ReactNode
+  flexDirection?: 'row' | 'column'
+  gap?: number
+  padding?: number
+  paddingLeft?: number
+  paddingRight?: number
+  paddingTop?: number
+  paddingBottom?: number
+  tone?: SurfaceTone
+  width?: number | `${number}%`
+}
+
+export function Surface({
+  children,
+  flexDirection = 'column',
+  gap = 0,
+  padding,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingTop,
+  tone = 'muted',
+  width,
+}: SurfaceProps) {
+  return (
+    <box
+      backgroundColor={getSurfaceColor(tone)}
+      flexDirection={flexDirection}
+      gap={gap}
+      padding={padding}
+      paddingBottom={paddingBottom}
+      paddingLeft={paddingLeft}
+      paddingRight={paddingRight}
+      paddingTop={paddingTop}
+      width={width}
+    >
+      {children}
+    </box>
+  )
+}