@brimveyn/aimux 1.1.0

package/src/ui/root.tsx

@@ -0,0 +1,261 @@
+import type { MouseEvent } from '@opentui/core'
+
+import type { TerminalContentOrigin } from '../input/raw-input-handler'
+import type { ModalState, SessionRecord, SnippetRecord } from '../state/types'
+import type { ThemeId } from './themes'
+
+import { useAppStore } from '../state/app-store'
+import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
+import { CreateSessionModal } from './components/create-session-modal'
+import { HelpModal } from './components/help-modal'
+import { NewTabModal } from './components/new-tab-modal'
+import { PendingChordIndicator } from './components/pending-chord-indicator'
+import { SessionNameModal } from './components/session-name-modal'
+import { SessionPickerModal } from './components/session-picker-modal'
+import { Sidebar } from './components/sidebar'
+import { SnippetEditorModal } from './components/snippet-editor-modal'
+import { SnippetPickerModal } from './components/snippet-picker-modal'
+import { SplitLayout } from './components/split-layout'
+import { StatusBar } from './components/status-bar'
+import { TerminalPane } from './components/terminal-pane'
+import { ThemePickerModal } from './components/theme-picker-modal'
+import { theme } from './theme'
+
+function getCreateSessionFields(modal: ModalState) {
+  if (modal.type !== 'create-session') {
+    return { directoryQuery: '', sessionName: '' }
+  }
+
+  if (modal.activeField === 'directory') {
+    return {
+      directoryQuery: modal.editBuffer ?? '',
+      sessionName: modal.nameBuffer,
+    }
+  }
+
+  return {
+    directoryQuery: modal.nameBuffer,
+    sessionName: modal.editBuffer ?? '',
+  }
+}
+
+function getSnippetEditorFields(modal: ModalState) {
+  if (modal.type !== 'snippet-editor') {
+    return { snippetContent: '', snippetName: '' }
+  }
+
+  if (modal.activeField === 'name') {
+    return {
+      snippetContent: modal.contentBuffer,
+      snippetName: modal.editBuffer ?? '',
+    }
+  }
+
+  return {
+    snippetContent: modal.editBuffer ?? '',
+    snippetName: modal.contentBuffer,
+  }
+}
+
+function renderModal(
+  modal: ModalState,
+  options: {
+    customCommands: Record<string, string>
+    sessions: SessionRecord[]
+    currentSessionId: string | null
+    currentTabCount: number
+    snippets: SnippetRecord[]
+    themeId: ThemeId
+    createSessionFields: { directoryQuery: string; sessionName: string }
+    snippetEditorFields: { snippetName: string; snippetContent: string }
+  }
+) {
+  switch (modal.type) {
+    case 'new-tab':
+    case 'split-picker':
+      return (
+        <NewTabModal
+          selectedIndex={modal.selectedIndex}
+          customCommands={options.customCommands}
+          editBuffer={modal.editBuffer}
+        />
+      )
+    case 'session-picker':
+      return (
+        <SessionPickerModal
+          sessions={options.sessions}
+          selectedIndex={modal.selectedIndex}
+          currentSessionId={options.currentSessionId}
+          currentTabCount={options.currentTabCount}
+          filter={modal.editBuffer}
+        />
+      )
+    case 'session-name':
+      return (
+        <SessionNameModal
+          title={modal.sessionTargetId ? 'Rename session' : 'Create session'}
+          value={modal.editBuffer ?? ''}
+        />
+      )
+    case 'rename-tab':
+      return <SessionNameModal title="Rename tab" value={modal.editBuffer ?? ''} />
+    case 'create-session':
+      return (
+        <CreateSessionModal
+          activeField={modal.activeField}
+          directoryQuery={options.createSessionFields.directoryQuery}
+          sessionName={options.createSessionFields.sessionName}
+          results={modal.directoryResults}
+          selectedIndex={modal.selectedIndex}
+          pendingProjectPath={modal.pendingProjectPath}
+        />
+      )
+    case 'snippet-picker':
+      return (
+        <SnippetPickerModal
+          snippets={options.snippets}
+          selectedIndex={modal.selectedIndex}
+          filter={modal.editBuffer}
+        />
+      )
+    case 'snippet-editor':
+      return (
+        <SnippetEditorModal
+          activeField={modal.activeField}
+          snippetName={options.snippetEditorFields.snippetName}
+          snippetContent={options.snippetEditorFields.snippetContent}
+          isEditing={modal.sessionTargetId !== null}
+        />
+      )
+    case 'theme-picker':
+      return (
+        <ThemePickerModal selectedIndex={modal.selectedIndex} currentThemeId={options.themeId} />
+      )
+    case 'help':
+      return <HelpModal />
+    case null:
+      return null
+    default:
+      modal satisfies never
+  }
+}
+
+interface RootViewProps {
+  themeId: ThemeId
+  contentOrigin: TerminalContentOrigin
+  mouseForwardingEnabled: boolean
+  localScrollbackEnabled: boolean
+  onTerminalMouseEvent: (event: MouseEvent, origin: TerminalContentOrigin) => void
+  onTerminalScrollEvent: (event: MouseEvent) => void
+  onTerminalClick?: (event: MouseEvent, 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: MouseEvent) => boolean
+  onSeparatorDragEnd?: () => void
+  terminalCols: number
+  terminalRows: number
+}
+
+export function RootView({
+  contentOrigin,
+  localScrollbackEnabled,
+  mouseForwardingEnabled,
+  onPaneActivate,
+  onSeparatorDrag,
+  onSeparatorDragEnd,
+  onSeparatorDragStart,
+  onSplitResize,
+  onTerminalClick,
+  onTerminalMouseEvent,
+  onTerminalScrollEvent,
+  terminalCols,
+  terminalRows,
+  themeId,
+}: RootViewProps) {
+  const tabs = useAppStore((s) => s.tabs)
+  const activeTabId = useAppStore((s) => s.activeTabId)
+  const layoutTrees = useAppStore((s) => s.layoutTrees)
+  const tabGroupMap = useAppStore((s) => s.tabGroupMap)
+  const focusMode = useAppStore((s) => s.focusMode)
+  const modal = useAppStore((s) => s.modal)
+  const snippets = useAppStore((s) => s.snippets)
+  const customCommands = useAppStore((s) => s.customCommands)
+  const sessions = useAppStore((s) => s.sessions)
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+
+  const activeTab = tabs.find((tab) => tab.id === activeTabId)
+  const activeTree = activeTabId ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId) : null
+  const createSessionFields = getCreateSessionFields(modal)
+  const snippetEditorFields = getSnippetEditorFields(modal)
+  const splitChrome = PANE_BORDER * 2
+
+  return (
+    <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
+      <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
+        <Sidebar onTabActivate={onPaneActivate} />
+        {activeTree && activeTree.type === 'split' ? (
+          <SplitLayout
+            node={activeTree}
+            tabs={tabs}
+            activeTabId={activeTabId}
+            focusMode={focusMode}
+            contentOrigin={{
+              cols: terminalCols + splitChrome,
+              rows: terminalRows + splitChrome,
+              x: contentOrigin.x - PANE_BORDER,
+              y: contentOrigin.y - PANE_BORDER,
+            }}
+            mouseForwardingEnabled={mouseForwardingEnabled}
+            localScrollbackEnabled={localScrollbackEnabled}
+            onTerminalMouseEvent={onTerminalMouseEvent}
+            onTerminalScrollEvent={onTerminalScrollEvent}
+            onTerminalClick={onTerminalClick}
+            onPaneActivate={onPaneActivate}
+            onSplitResize={onSplitResize}
+            onSeparatorDragStart={onSeparatorDragStart}
+            onSeparatorDrag={onSeparatorDrag}
+            onSeparatorDragEnd={onSeparatorDragEnd}
+            bounds={{
+              cols: terminalCols + splitChrome,
+              rows: terminalRows + splitChrome,
+              x: 0,
+              y: 0,
+            }}
+          />
+        ) : (
+          <TerminalPane
+            tab={activeTab}
+            tabId={activeTabId ?? undefined}
+            isActive
+            focusMode={focusMode}
+            contentOrigin={contentOrigin}
+            mouseForwardingEnabled={mouseForwardingEnabled}
+            localScrollbackEnabled={localScrollbackEnabled}
+            onTerminalMouseEvent={onTerminalMouseEvent}
+            onTerminalScrollEvent={onTerminalScrollEvent}
+            onTerminalClick={onTerminalClick}
+            onPaneActivate={onPaneActivate}
+          />
+        )}
+      </box>
+      <StatusBar />
+      {renderModal(modal, {
+        createSessionFields,
+        currentSessionId,
+        currentTabCount: tabs.length,
+        customCommands,
+        sessions,
+        snippetEditorFields,
+        snippets,
+        themeId,
+      })}
+      <PendingChordIndicator />
+    </box>
+  )
+}

package/src/ui/status-bar-model.ts

@@ -0,0 +1,87 @@
+import type { AppState, TabSession } from '../state/types'
+
+import { abbreviatePath } from './path-format'
+
+export interface StatusBarModel {
+  left: string
+  right: string
+}
+
+const MAX_TAB_LABEL_LENGTH = 24
+
+function truncateLabel(label: string): string {
+  if (label.length <= MAX_TAB_LABEL_LENGTH) {
+    return label
+  }
+
+  return `${label.slice(0, MAX_TAB_LABEL_LENGTH - 3)}...`
+}
+
+function getActiveTabLabel(tab?: TabSession): string {
+  if (!tab) {
+    return 'no tab'
+  }
+
+  return `${truncateLabel(tab.title)} (${tab.status})`
+}
+
+function getNavigationHint(activeTab?: TabSession): string {
+  if (!activeTab) {
+    return 'Ctrl+g sessions  Ctrl+n new  Ctrl+b toggle  Ctrl+h/l resize  ? help'
+  }
+
+  if (activeTab.status === 'disconnected') {
+    return 'Ctrl+r restart restored tab  Ctrl+w close  i focus'
+  }
+
+  return 'Ctrl+g sessions  j/k move  Shift+J/K reorder  Ctrl+r restart  Ctrl+w close  i focus  ? help'
+}
+
+function getInputHint(activeTab?: TabSession): string {
+  if (!activeTab) {
+    return 'Ctrl+n new  no active tab to focus'
+  }
+
+  if (activeTab.status === 'disconnected') {
+    return 'Ctrl+z unfocus  Ctrl+w layout  Ctrl+r restart'
+  }
+
+  return 'Ctrl+z unfocus  Ctrl+w layout  typing goes to active tab'
+}
+
+export function getStatusBarModel(state: AppState, activeTab?: TabSession): StatusBarModel {
+  const currentSession = state.currentSessionId
+    ? state.sessions.find((session) => session.id === state.currentSessionId)
+    : undefined
+  const sessionName = currentSession?.name ?? 'no session'
+  const sessionLabel = currentSession?.projectPath
+    ? `${sessionName} (${abbreviatePath(currentSession.projectPath)})`
+    : sessionName
+
+  // \u{f0b1} = nf-fa-briefcase (session icon)
+  const sessionIcon = '\u{f0b1}'
+
+  switch (state.focusMode) {
+    case 'terminal-input':
+      return {
+        left: `${getActiveTabLabel(activeTab)}  ${sessionIcon}  ${sessionLabel}`,
+        right: getInputHint(activeTab),
+      }
+    case 'modal':
+      return {
+        left: `${sessionIcon}  ${sessionLabel}`,
+        right: 'j/k move  Enter confirm  n/r/d actions  Esc cancel',
+      }
+    case 'layout':
+      return {
+        left: `${getActiveTabLabel(activeTab)}  ${sessionIcon}  ${sessionLabel}`,
+        right: 'h/j/k/l focus  |/- split  H/L resize  q close  Esc cancel',
+      }
+    case 'navigation':
+    default:
+      return {
+        left: `${sessionIcon}  ${sessionLabel}  ${getActiveTabLabel(activeTab)}`,
+        right: getNavigationHint(activeTab),
+      }
+  }
+}

package/src/ui/theme.ts

@@ -0,0 +1,9 @@
+import { type ThemeColors, type ThemeId, THEMES } from './themes'
+
+export const theme: ThemeColors = { ...THEMES.aimux.colors }
+
+export function applyTheme(id: ThemeId): void {
+  const entry = THEMES[id]
+  if (!entry) return
+  Object.assign(theme, entry.colors)
+}

package/src/ui/themes.ts

@@ -0,0 +1,255 @@
+export interface ThemeColors {
+  background: string
+  panel: string
+  panelMuted: string
+  panelHighlight: string
+  overlay: string
+  border: string
+  borderActive: string
+  text: string
+  textMuted: string
+  accent: string
+  accentAlt: string
+  warning: string
+  danger: string
+  success: string
+  dim: string
+}
+
+export type ThemeId =
+  | 'aimux'
+  | 'dracula'
+  | 'dracula-at-night'
+  | 'everforest'
+  | 'tokyo-night'
+  | 'gruvbox-dark'
+  | 'catppuccin-mocha'
+  | 'nord'
+  | 'solarized-dark'
+  | 'one-dark'
+  | 'kanagawa'
+
+export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
+  'aimux': {
+    colors: {
+      accent: '#7cd1b8',
+      accentAlt: '#c4a7e7',
+      background: '#11151b',
+      border: '#2d3f52',
+      borderActive: '#7cd1b8',
+      danger: '#f38ba8',
+      dim: '#243242',
+      overlay: '#0b1016',
+      panel: '#16202b',
+      panelHighlight: '#1f3344',
+      panelMuted: '#1c2734',
+      success: '#8bd5ca',
+      text: '#edf4ff',
+      textMuted: '#6b829a',
+      warning: '#f6c177',
+    },
+    name: 'Aimux',
+  },
+  'catppuccin-mocha': {
+    colors: {
+      accent: '#cba6f7',
+      accentAlt: '#f5c2e7',
+      background: '#1e1e2e',
+      border: '#45475a',
+      borderActive: '#cba6f7',
+      danger: '#f38ba8',
+      dim: '#313244',
+      overlay: '#181825',
+      panel: '#232334',
+      panelHighlight: '#313244',
+      panelMuted: '#2a2a3c',
+      success: '#a6e3a1',
+      text: '#cdd6f4',
+      textMuted: '#6c7086',
+      warning: '#f9e2af',
+    },
+    name: 'Catppuccin Mocha',
+  },
+  'dracula': {
+    colors: {
+      accent: '#bd93f9',
+      accentAlt: '#ff79c6',
+      background: '#282a36',
+      border: '#44475a',
+      borderActive: '#bd93f9',
+      danger: '#ff5555',
+      dim: '#383a4a',
+      overlay: '#1f2029',
+      panel: '#2d2f3d',
+      panelHighlight: '#3d4056',
+      panelMuted: '#343746',
+      success: '#50fa7b',
+      text: '#f8f8f2',
+      textMuted: '#6272a4',
+      warning: '#f1fa8c',
+    },
+    name: 'Dracula',
+  },
+  'dracula-at-night': {
+    colors: {
+      accent: '#bd93f9',
+      accentAlt: '#ff79c6',
+      background: '#0e1419',
+      border: '#2a3440',
+      borderActive: '#bd93f9',
+      danger: '#ff5555',
+      dim: '#1e2630',
+      overlay: '#090d11',
+      panel: '#131920',
+      panelHighlight: '#222a33',
+      panelMuted: '#1a2129',
+      success: '#50fa7b',
+      text: '#f8f8f2',
+      textMuted: '#6272a4',
+      warning: '#f1fa8c',
+    },
+    name: 'Dracula At Night',
+  },
+  'everforest': {
+    colors: {
+      accent: '#a7c080',
+      accentAlt: '#d699b6',
+      background: '#2d353b',
+      border: '#4f585e',
+      borderActive: '#a7c080',
+      danger: '#e67e80',
+      dim: '#3d484d',
+      overlay: '#232a2e',
+      panel: '#343f44',
+      panelHighlight: '#475258',
+      panelMuted: '#3d484d',
+      success: '#a7c080',
+      text: '#d3c6aa',
+      textMuted: '#859289',
+      warning: '#dbbc7f',
+    },
+    name: 'Everforest',
+  },
+  'gruvbox-dark': {
+    colors: {
+      accent: '#b8bb26',
+      accentAlt: '#d3869b',
+      background: '#282828',
+      border: '#504945',
+      borderActive: '#b8bb26',
+      danger: '#fb4934',
+      dim: '#3c3836',
+      overlay: '#1f1d1b',
+      panel: '#2e2e2e',
+      panelHighlight: '#504945',
+      panelMuted: '#3c3836',
+      success: '#b8bb26',
+      text: '#ebdbb2',
+      textMuted: '#928374',
+      warning: '#fabd2f',
+    },
+    name: 'Gruvbox Dark',
+  },
+  'kanagawa': {
+    colors: {
+      accent: '#7e9cd8',
+      accentAlt: '#957fb8',
+      background: '#1f1f28',
+      border: '#363646',
+      borderActive: '#7e9cd8',
+      danger: '#e82424',
+      dim: '#2a2a37',
+      overlay: '#171720',
+      panel: '#24242e',
+      panelHighlight: '#363646',
+      panelMuted: '#2a2a37',
+      success: '#76946a',
+      text: '#dcd7ba',
+      textMuted: '#727169',
+      warning: '#e6c384',
+    },
+    name: 'Kanagawa',
+  },
+  'nord': {
+    colors: {
+      accent: '#88c0d0',
+      accentAlt: '#b48ead',
+      background: '#2e3440',
+      border: '#434c5e',
+      borderActive: '#88c0d0',
+      danger: '#bf616a',
+      dim: '#3b4252',
+      overlay: '#252a33',
+      panel: '#333a47',
+      panelHighlight: '#434c5e',
+      panelMuted: '#3b4252',
+      success: '#a3be8c',
+      text: '#eceff4',
+      textMuted: '#7b88a1',
+      warning: '#ebcb8b',
+    },
+    name: 'Nord',
+  },
+  'one-dark': {
+    colors: {
+      accent: '#61afef',
+      accentAlt: '#c678dd',
+      background: '#282c34',
+      border: '#3e4452',
+      borderActive: '#61afef',
+      danger: '#e06c75',
+      dim: '#3b4048',
+      overlay: '#1f2329',
+      panel: '#2c313a',
+      panelHighlight: '#3b4048',
+      panelMuted: '#333842',
+      success: '#98c379',
+      text: '#abb2bf',
+      textMuted: '#636d83',
+      warning: '#e5c07b',
+    },
+    name: 'One Dark',
+  },
+  'solarized-dark': {
+    colors: {
+      accent: '#268bd2',
+      accentAlt: '#d33682',
+      background: '#002b36',
+      border: '#2e5560',
+      borderActive: '#268bd2',
+      danger: '#dc322f',
+      dim: '#073642',
+      overlay: '#00242c',
+      panel: '#003340',
+      panelHighlight: '#0a4050',
+      panelMuted: '#073642',
+      success: '#859900',
+      text: '#fdf6e3',
+      textMuted: '#657b83',
+      warning: '#b58900',
+    },
+    name: 'Solarized Dark',
+  },
+  'tokyo-night': {
+    colors: {
+      accent: '#7aa2f7',
+      accentAlt: '#bb9af7',
+      background: '#1a1b26',
+      border: '#3b4261',
+      borderActive: '#7aa2f7',
+      danger: '#f7768e',
+      dim: '#292e42',
+      overlay: '#141722',
+      panel: '#1f2335',
+      panelHighlight: '#292e42',
+      panelMuted: '#24283b',
+      success: '#9ece6a',
+      text: '#c0caf5',
+      textMuted: '#565f89',
+      warning: '#e0af68',
+    },
+    name: 'Tokyo Night',
+  },
+}
+
+export const THEME_IDS = Object.keys(THEMES) as ThemeId[]

package/src/ui/ui-tokens.ts

@@ -0,0 +1,11 @@
+export const uiTokens = {
+  modalWidth: {
+    lg: 56,
+    md: 48,
+    xl: '60%',
+  },
+  padding: {
+    compact: 1,
+    section: 1,
+  },
+} as const

package/src/update.ts

@@ -0,0 +1,62 @@
+import { getDaemonSocketPath } from './daemon/runtime-paths'
+import { findDaemonPid } from './platform/daemon-control'
+import { runRestartDaemon } from './restart-daemon'
+
+const REPO = 'BrimVeyn/aimux'
+
+async function getLatestRelease(): Promise<string | null> {
+  const res = await fetch(`https://api.github.com/repos/${REPO}/releases/latest`)
+  if (!res.ok) return null
+  const data = (await res.json()) as { tag_name: string }
+  return data.tag_name
+}
+
+async function getCurrentVersion(): Promise<string> {
+  const { version } = await import('../package.json')
+  return `v${version}`
+}
+
+export async function runUpdate(): Promise<number> {
+  process.stdout.write('Checking for updates...\n')
+
+  const latest = await getLatestRelease()
+  if (latest === null) {
+    process.stderr.write('Failed to fetch latest release from GitHub.\n')
+    return 1
+  }
+
+  const current = await getCurrentVersion()
+  if (latest === current) {
+    process.stdout.write(`Already up to date (${current}).\n`)
+    return 0
+  }
+
+  process.stdout.write(`Updating aimux ${current} → ${latest}...\n`)
+
+  const remove = Bun.spawn(['bun', 'remove', '-g', 'aimux'], {
+    stderr: 'inherit',
+    stdout: 'inherit',
+  })
+  await remove.exited
+
+  const install = Bun.spawn(['bun', 'install', '-g', `github:${REPO}#${latest}`], {
+    stderr: 'inherit',
+    stdout: 'inherit',
+  })
+
+  const exitCode = await install.exited
+  if (exitCode !== 0) {
+    process.stderr.write('Update failed.\n')
+    return 1
+  }
+
+  process.stdout.write(`Updated to ${latest}.\n`)
+
+  const pid = await findDaemonPid(getDaemonSocketPath())
+  if (pid !== null) {
+    process.stdout.write('Restarting daemon...\n')
+    await runRestartDaemon()
+  }
+
+  return 0
+}