@brimveyn/aimux 1.1.0

package/src/ui/components/git-panel.tsx

@@ -0,0 +1,200 @@
+import { memo, type ReactNode, useMemo } from 'react'
+
+import type { GitFileEntry, GitFileSection, GitPanelState } from '../../state/types'
+
+import { theme } from '../theme'
+
+interface GitPanelProps {
+  gitPanel: GitPanelState
+  projectPath: string | undefined
+}
+
+const SECTION_ORDER: { key: GitFileSection; title: string }[] = [
+  { key: 'staged', title: 'Staged Changes' },
+  { key: 'unstaged', title: 'Changes' },
+  { key: 'untracked', title: 'Untracked' },
+]
+
+const STATUS_COLORS: Record<GitFileEntry['status'], string> = {
+  '?': theme.textMuted,
+  'A': theme.success,
+  'C': theme.accent,
+  'D': theme.danger,
+  'M': theme.warning,
+  'R': theme.accent,
+  'U': theme.danger,
+}
+
+function groupBySection(files: GitFileEntry[]): Record<GitFileSection, GitFileEntry[]> {
+  const groups: Record<GitFileSection, GitFileEntry[]> = {
+    staged: [],
+    unstaged: [],
+    untracked: [],
+  }
+  for (const file of files) groups[file.section].push(file)
+  return groups
+}
+
+function maxDigitWidth(files: GitFileEntry[]): { added: number; removed: number } {
+  let addedMax = 1
+  let removedMax = 1
+  for (const f of files) {
+    if (f.added !== null) addedMax = Math.max(addedMax, String(f.added).length)
+    if (f.removed !== null) removedMax = Math.max(removedMax, String(f.removed).length)
+  }
+  return { added: addedMax, removed: removedMax }
+}
+
+function padRight(value: number | null, width: number): string {
+  return String(value ?? 0).padStart(width, ' ')
+}
+
+export function splitPath(path: string): { prefix: string; basename: string } {
+  const slash = path.lastIndexOf('/')
+  if (slash < 0) return { basename: path, prefix: '' }
+  return { basename: path.slice(slash + 1), prefix: path.slice(0, slash + 1) }
+}
+
+function stripTrailingSlash(prefix: string): string {
+  return prefix.endsWith('/') ? prefix.slice(0, -1) : prefix
+}
+
+function renderPath(file: GitFileEntry): ReactNode {
+  const { basename, prefix } = splitPath(file.path)
+  const dir = stripTrailingSlash(prefix)
+  if (file.renamedFrom) {
+    const renamed = splitPath(file.renamedFrom)
+    const renamedDir = stripTrailingSlash(renamed.prefix)
+    return (
+      <text wrapMode="none">
+        <span fg={theme.text}>{renamed.basename}</span>
+        {renamedDir ? <span fg={theme.textMuted}> {renamedDir}</span> : null}
+        <span fg={theme.textMuted}> → </span>
+        <span fg={theme.text}>{basename}</span>
+        {dir ? <span fg={theme.textMuted}> {dir}</span> : null}
+      </text>
+    )
+  }
+  return (
+    <text wrapMode="none">
+      <span fg={theme.text}>{basename}</span>
+      {dir ? <span fg={theme.textMuted}> {dir}</span> : null}
+    </text>
+  )
+}
+
+function renderFileRow(
+  file: GitFileEntry,
+  key: string,
+  addedW: number,
+  removedW: number
+): ReactNode {
+  const hasNumstat = file.added !== null || file.removed !== null
+  return (
+    <box key={key} flexDirection="row" gap={1} paddingLeft={1}>
+      <text fg={STATUS_COLORS[file.status]}>
+        <strong>{file.status}</strong>
+      </text>
+      <box flexGrow={1} overflow="hidden">
+        {renderPath(file)}
+      </box>
+      {hasNumstat ? (
+        <box flexDirection="row" flexShrink={0}>
+          <text fg={theme.success}>{`+${padRight(file.added, addedW)}`}</text>
+          <text fg={theme.dim}> </text>
+          <text fg={theme.danger}>{`−${padRight(file.removed, removedW)}`}</text>
+        </box>
+      ) : (
+        <text fg={theme.textMuted} flexShrink={0}>
+          —
+        </text>
+      )}
+    </box>
+  )
+}
+
+function renderSection(
+  section: GitFileSection,
+  title: string,
+  files: GitFileEntry[],
+  addedW: number,
+  removedW: number
+): ReactNode {
+  if (files.length === 0) return null
+  return (
+    <box key={section} flexDirection="column">
+      <text fg={theme.accentAlt}>
+        <strong>
+          {title} ({files.length})
+        </strong>
+      </text>
+      {files.map((file, i) => renderFileRow(file, `${section}-${i}`, addedW, removedW))}
+    </box>
+  )
+}
+
+interface StatusPlaceholder {
+  label: string
+  labelColor: string
+}
+
+function renderStatus(gitPanel: GitPanelState, hasProjectPath: boolean): ReactNode | null {
+  const placeholder = computeStatusPlaceholder(gitPanel, hasProjectPath)
+  if (!placeholder) return null
+  return (
+    <box flexGrow={1} flexDirection="column" alignItems="center" paddingTop={1}>
+      <text fg={placeholder.labelColor}>{placeholder.label}</text>
+    </box>
+  )
+}
+
+function computeStatusPlaceholder(
+  gitPanel: GitPanelState,
+  hasProjectPath: boolean
+): StatusPlaceholder | null {
+  if (!hasProjectPath) {
+    return { label: 'No active session', labelColor: theme.textMuted }
+  }
+  if (gitPanel.error === 'not-a-repo') {
+    return { label: 'Not a git repository', labelColor: theme.textMuted }
+  }
+  if (gitPanel.error === 'unknown') {
+    return { label: 'Git error', labelColor: theme.danger }
+  }
+  if (gitPanel.files.length === 0) {
+    return { label: 'Working tree clean', labelColor: theme.textMuted }
+  }
+  return null
+}
+
+export const GitPanel = memo(function GitPanel({ gitPanel, projectPath }: GitPanelProps) {
+  const groups = useMemo(() => groupBySection(gitPanel.files), [gitPanel.files])
+  const { added: addedW, removed: removedW } = useMemo(
+    () => maxDigitWidth(gitPanel.files),
+    [gitPanel.files]
+  )
+
+  const statusNode = renderStatus(gitPanel, !!projectPath)
+
+  const hasRemoteTracking = gitPanel.ahead > 0 || gitPanel.behind > 0
+
+  return (
+    <box flexDirection="column" flexGrow={1} gap={0}>
+      {hasRemoteTracking ? (
+        <text fg={theme.textMuted}>
+          ↑{gitPanel.ahead} ↓{gitPanel.behind}
+        </text>
+      ) : null}
+      {statusNode ?? (
+        <scrollbox
+          flexGrow={1}
+          scrollY
+          viewportCulling
+          contentOptions={{ flexDirection: 'column', gap: 0 }}
+        >
+          {SECTION_ORDER.map((s) => renderSection(s.key, s.title, groups[s.key], addedW, removedW))}
+        </scrollbox>
+      )}
+    </box>
+  )
+})

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

@@ -0,0 +1,79 @@
+import { theme } from '../theme'
+import { uiTokens } from '../ui-tokens'
+import { ModalShell } from './modal-shell'
+
+const SECTIONS = [
+  {
+    bindings: [
+      ['j / k', 'Move between tabs'],
+      ['Shift+J / K', 'Reorder tabs'],
+      ['i', 'Focus terminal input'],
+      ['r', 'Rename tab'],
+      ['?', 'Show this help'],
+    ],
+    title: 'Navigation',
+  },
+  {
+    bindings: [
+      ['Ctrl+n', 'New tab'],
+      ['Ctrl+w', 'Close tab'],
+      ['Ctrl+r', 'Restart tab'],
+      ['Ctrl+g', 'Session picker'],
+      ['Ctrl+s', 'Snippet picker'],
+      ['Ctrl+t', 'Theme picker'],
+    ],
+    title: 'Tabs & Sessions',
+  },
+  {
+    bindings: [
+      ['Ctrl+b', 'Toggle sidebar'],
+      ['Ctrl+h / l', 'Resize sidebar'],
+      ['Shift+G', 'Toggle git panel'],
+      ['Ctrl+j / k', 'Resize git panel'],
+    ],
+    title: 'Sidebar',
+  },
+  {
+    bindings: [
+      ['Ctrl+z', 'Back to navigation'],
+      ['Ctrl+w', 'Enter layout mode'],
+      ['Ctrl+b', 'Toggle sidebar'],
+    ],
+    title: 'Terminal Input',
+  },
+  {
+    bindings: [
+      ['|', 'Split vertical'],
+      ['-', 'Split horizontal'],
+      ['h / j / k / l', 'Focus pane'],
+      ['Shift+H/J/K/L', 'Resize pane'],
+      ['q', 'Close pane'],
+      ['Esc', 'Cancel'],
+    ],
+    title: 'Layout Mode (Ctrl+w)',
+  },
+  {
+    bindings: [['Ctrl+c', 'Quit']],
+    title: 'General',
+  },
+] as const
+
+export function HelpModal() {
+  return (
+    <ModalShell title="Keybindings" help="Press Esc to close." width={uiTokens.modalWidth.lg}>
+      {SECTIONS.map((section) => (
+        <box key={section.title} flexDirection="column">
+          <text fg={theme.text}>{section.title}</text>
+          {section.bindings.map(([key, desc]) => (
+            <box key={key} flexDirection="row">
+              <box width={18}>
+                <text fg={theme.accentAlt}> {key}</text>
+              </box>
+              <text fg={theme.textMuted}>{desc}</text>
+            </box>
+          ))}
+        </box>
+      ))}
+    </ModalShell>
+  )
+}

package/src/ui/components/input-field.tsx

@@ -0,0 +1,18 @@
+import { theme } from '../theme'
+import { Surface } from './surface'
+
+interface InputFieldProps {
+  active: boolean
+  value: string
+}
+
+export function InputField({ active, value }: InputFieldProps) {
+  return (
+    <Surface tone={active ? 'inputActive' : 'input'} padding={1}>
+      <text fg={active ? theme.text : theme.textMuted}>
+        {value}
+        {active ? '_' : ''}
+      </text>
+    </Surface>
+  )
+}

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

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react'
+
+import { theme } from '../theme'
+import { Surface } from './surface'
+
+interface ListItemProps {
+  active: boolean
+  leading?: ReactNode
+  subtitle?: ReactNode
+  title: ReactNode
+  trailing?: ReactNode
+}
+
+export function ListItem({ active, leading, subtitle, title, trailing }: ListItemProps) {
+  return (
+    <Surface tone={active ? 'selected' : 'elevated'} paddingLeft={1} paddingRight={1}>
+      <box flexDirection="column">
+        <box flexDirection="row">
+          <text fg={active ? theme.accent : theme.dim}>{active ? '›' : '·'}</text>
+          <text> </text>
+          {leading}
+          {leading ? <text> </text> : null}
+          <box flexGrow={1}>{title}</box>
+          {trailing ? <box>{trailing}</box> : null}
+        </box>
+        {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}
+      </box>
+    </Surface>
+  )
+}

package/src/ui/components/modal-filter-bar.tsx

@@ -0,0 +1,18 @@
+import { theme } from '../theme'
+import { Surface } from './surface'
+
+interface ModalFilterBarProps {
+  filter: string | null
+}
+
+export function ModalFilterBar({ filter }: ModalFilterBarProps) {
+  if (filter === null) {
+    return null
+  }
+
+  return (
+    <Surface tone="input" paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
+      <text fg={theme.text}>/{filter}_</text>
+    </Surface>
+  )
+}

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

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react'
+
+import { theme } from '../theme'
+import { Surface } from './surface'
+
+interface ModalShellProps {
+  children: ReactNode
+  footer?: ReactNode
+  listGap?: number
+  help?: string
+  title: string
+  width: number | `${number}%`
+}
+
+export function ModalShell({ children, footer, help, listGap = 1, title, width }: ModalShellProps) {
+  return (
+    <box
+      position="absolute"
+      top={0}
+      left={0}
+      width="100%"
+      height="100%"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <box
+        position="absolute"
+        top={0}
+        left={0}
+        width="100%"
+        height="100%"
+        backgroundColor={theme.overlay}
+        opacity={0.7}
+      />
+      <Surface tone="elevated" padding={1} gap={1} width={width}>
+        <box width="100%" flexDirection="column" gap={listGap}>
+          <box flexDirection="column">
+            <text fg={theme.accentAlt}>{title}</text>
+            {help ? <text fg={theme.textMuted}>{help}</text> : null}
+          </box>
+          {children}
+          {footer ? <box>{footer}</box> : null}
+        </box>
+      </Surface>
+    </box>
+  )
+}

package/src/ui/components/new-tab-modal.tsx

@@ -0,0 +1,52 @@
+import { getAllAssistantOptions } from '../../pty/command-registry'
+import { theme } from '../theme'
+import { uiTokens } from '../ui-tokens'
+import { InputField } from './input-field'
+import { ListItem } from './list-item'
+import { ModalShell } from './modal-shell'
+
+interface NewTabModalProps {
+  selectedIndex: number
+  customCommands: Record<string, string>
+  editBuffer: string | null
+}
+
+export function NewTabModal({ customCommands, editBuffer, selectedIndex }: NewTabModalProps) {
+  const options = getAllAssistantOptions(customCommands)
+  const selectedOption = options[selectedIndex]
+
+  return (
+    <ModalShell
+      title="New assistant tab"
+      help={
+        editBuffer !== null
+          ? `Editing command for ${selectedOption?.label}. Enter to confirm, Esc to cancel.`
+          : 'Use j/k or arrows, Enter to confirm, e to edit command, Esc to cancel.'
+      }
+      width={uiTokens.modalWidth.md}
+    >
+      {editBuffer !== null ? (
+        <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.text : theme.textMuted}>{option.label}</text>}
+              subtitle={
+                <box flexDirection="column">
+                  <text fg={theme.textMuted}>{option.description}</text>
+                  {customCmd ? <text fg={theme.accent}>{customCmd}</text> : null}
+                </box>
+              }
+            />
+          )
+        })
+      )}
+    </ModalShell>
+  )
+}

package/src/ui/components/pending-chord-indicator.tsx

@@ -0,0 +1,41 @@
+import { useAppStore } from '../../state/app-store'
+import { theme } from '../theme'
+
+function formatChord(chord: string): string {
+  if (chord === 'space') return '␣'
+  if (chord === 'return') return '⏎'
+  if (chord === 'escape') return 'Esc'
+  if (chord === 'tab') return 'Tab'
+  if (chord === 'backspace') return '⌫'
+  if (chord === 'up') return '↑'
+  if (chord === 'down') return '↓'
+  if (chord === 'left') return '←'
+  if (chord === 'right') return '→'
+  return chord
+}
+
+function formatSequence(chords: string[]): string {
+  return chords.map(formatChord).join(' ')
+}
+
+export function PendingChordIndicator() {
+  const pendingChords = useAppStore((s) => s.pendingChords)
+
+  if (!pendingChords || pendingChords.length === 0) return null
+
+  const label = formatSequence(pendingChords)
+
+  return (
+    <box
+      position="absolute"
+      bottom={2}
+      right={2}
+      paddingLeft={1}
+      paddingRight={1}
+      backgroundColor={theme.accent}
+      borderColor={theme.borderActive}
+    >
+      <text fg={theme.background}>{label}…</text>
+    </box>
+  )
+}

package/src/ui/components/session-name-modal.tsx

@@ -0,0 +1,15 @@
+import { uiTokens } from '../ui-tokens'
+import { InputField } from './input-field'
+import { ModalShell } from './modal-shell'
+
+export function SessionNameModal({ title, value }: { title: string; value: string }) {
+  return (
+    <ModalShell
+      title={title}
+      help="Type a session name. Enter confirm, Esc cancel."
+      width={uiTokens.modalWidth.md}
+    >
+      <InputField active value={value} />
+    </ModalShell>
+  )
+}

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

@@ -0,0 +1,93 @@
+import type { SessionRecord } from '../../state/types'
+
+import { filterSessions } from '../../state/selectors'
+import { abbreviatePath } from '../path-format'
+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 SessionPickerModalProps {
+  sessions: SessionRecord[]
+  selectedIndex: number
+  currentSessionId: string | null
+  currentTabCount: number
+  filter: string | null
+}
+
+function formatSessionLine(
+  session: SessionRecord,
+  currentSessionId: string | null,
+  currentTabCount: number
+): string {
+  const tabCount =
+    session.id === currentSessionId
+      ? currentTabCount
+      : (session.workspaceSnapshot?.tabs.length ?? 0)
+  return `${session.name} (${tabCount} tab${tabCount === 1 ? '' : 's'})`
+}
+
+function getEmptyStateMessage(hasFilter: boolean): string {
+  if (hasFilter) {
+    return 'No matching sessions.'
+  }
+
+  return 'No sessions yet. Press Enter or n to create your first session.'
+}
+
+export function SessionPickerModal({
+  currentSessionId,
+  currentTabCount,
+  filter,
+  selectedIndex,
+  sessions,
+}: SessionPickerModalProps) {
+  const filtered = filterSessions(sessions, filter)
+  const hasFilter = !!filter
+  const showFilteredEmptyState = filtered.length === 0 && sessions.length > 0
+  const showInitialEmptyState = filtered.length === 0 && sessions.length === 0
+
+  return (
+    <ModalShell
+      title="Sessions"
+      help="j/k move, Enter resume, n new, r rename, d delete, / filter, Esc cancel."
+      width={uiTokens.modalWidth.lg}
+      footer={<ModalFilterBar filter={filter} />}
+    >
+      {showFilteredEmptyState ? (
+        <text fg={theme.textMuted}>{getEmptyStateMessage(hasFilter)}</text>
+      ) : null}
+      {showInitialEmptyState ? (
+        <text fg={theme.textMuted}>{getEmptyStateMessage(false)}</text>
+      ) : null}
+      {filtered.map((session, index) => {
+        const active = index === selectedIndex
+        return (
+          <ListItem
+            key={session.id}
+            active={active}
+            title={
+              <text fg={active ? theme.text : theme.textMuted}>
+                {formatSessionLine(session, currentSessionId, currentTabCount)}
+              </text>
+            }
+            subtitle={
+              session.projectPath ? (
+                <text fg={theme.textMuted}>{abbreviatePath(session.projectPath)}</text>
+              ) : undefined
+            }
+          />
+        )
+      })}
+      <ListItem
+        active={selectedIndex === filtered.length}
+        title={
+          <text fg={selectedIndex === filtered.length ? theme.text : theme.textMuted}>
+            Create new session
+          </text>
+        }
+      />
+    </ModalShell>
+  )
+}

package/src/ui/components/sidebar-group-metadata.ts

@@ -0,0 +1,44 @@
+import type { TabSession } from '../../state/types'
+
+import { allLeafIds, type LayoutNode } from '../../state/layout-tree'
+
+export interface TabGroupInfo {
+  inLayout: boolean
+  groupStart: number
+  groupEnd: number
+}
+
+export function buildTabGroupInfo(
+  layoutTrees: Record<string, LayoutNode>,
+  tabs: TabSession[]
+): Map<string, TabGroupInfo> {
+  const tabGroupInfo = new Map<string, TabGroupInfo>()
+
+  for (const tree of Object.values(layoutTrees)) {
+    const ids = allLeafIds(tree)
+    if (ids.length <= 1) {
+      continue
+    }
+
+    const idSet = new Set(ids)
+    let groupStart = -1
+    let groupEnd = -1
+
+    for (const [index, tab] of tabs.entries()) {
+      if (!idSet.has(tab.id)) {
+        continue
+      }
+
+      if (groupStart === -1) {
+        groupStart = index
+      }
+      groupEnd = index
+    }
+
+    for (const id of ids) {
+      tabGroupInfo.set(id, { groupEnd, groupStart, inLayout: true })
+    }
+  }
+
+  return tabGroupInfo
+}

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

@@ -0,0 +1,33 @@
+export type SidebarScrollTarget = 'none' | 'active-item' | 'top' | 'bottom'
+
+interface SidebarScrollTargetOptions {
+  previousActiveIndex: number
+  nextActiveIndex: number
+  tabCount: number
+}
+
+export function getSidebarScrollTarget({
+  nextActiveIndex,
+  previousActiveIndex,
+  tabCount,
+}: SidebarScrollTargetOptions): SidebarScrollTarget {
+  if (tabCount === 0 || nextActiveIndex < 0) {
+    return 'none'
+  }
+
+  if (previousActiveIndex < 0 || previousActiveIndex === nextActiveIndex) {
+    return previousActiveIndex < 0 ? 'active-item' : 'none'
+  }
+
+  const lastIndex = tabCount - 1
+
+  if (previousActiveIndex === lastIndex && nextActiveIndex === 0) {
+    return 'top'
+  }
+
+  if (previousActiveIndex === 0 && nextActiveIndex === lastIndex) {
+    return 'bottom'
+  }
+
+  return 'active-item'
+}