@brimveyn/aimux 1.7.4 → 1.8.0

package/src/ui/components/ai-usage-indicator.tsx

@@ -0,0 +1,131 @@
+import type { AIUsageTool } from '@brimveyn/aimux-config'
+
+import { useAIUsageStore } from '../../state/ai-usage-store'
+import { toggleAIUsagePopover } from '../ai-usage/controller'
+import { useTokens } from '../theme'
+
+const TOOL_ICON: Record<AIUsageTool, string> = {
+  claude: 'CC',
+  codex: 'CO',
+}
+
+const BAR_SEGMENTS = 4
+const BAR_FILLED_CHAR = '\u{2501}'
+const BAR_EMPTY_CHAR = '\u{2500}'
+
+function formatTokens(total: number): string {
+  if (total >= 1_000_000) return `${(total / 1_000_000).toFixed(1)}M`
+  if (total >= 1_000) return `${(total / 1_000).toFixed(1)}k`
+  return String(total)
+}
+
+function buildBar(percent: number): { filled: string; empty: string } {
+  let filledCount = 0
+  for (let i = 0; i < BAR_SEGMENTS; i++) {
+    if (percent > i * (100 / BAR_SEGMENTS)) filledCount++
+  }
+  return {
+    empty: BAR_EMPTY_CHAR.repeat(BAR_SEGMENTS - filledCount),
+    filled: BAR_FILLED_CHAR.repeat(filledCount),
+  }
+}
+
+function formatResetIn(snap: {
+  resetAt: string | null
+  timeRemaining: string | null
+}): string | null {
+  if (snap.resetAt) {
+    const diffMs = new Date(snap.resetAt).getTime() - Date.now()
+    if (diffMs > 0) {
+      const totalMin = Math.round(diffMs / 60_000)
+      const h = Math.floor(totalMin / 60)
+      const m = totalMin % 60
+      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}h`
+    }
+  }
+  return snap.timeRemaining
+}
+
+export function AIUsageIndicator() {
+  const t = useTokens()
+  const enabled = useAIUsageStore((s) => s.enabled)
+  const snapshots = useAIUsageStore((s) => s.snapshots)
+
+  if (!enabled) return null
+
+  const ordered: AIUsageTool[] = ['claude', 'codex']
+  const entries = ordered
+    .map((tool) => ({ snap: snapshots[tool], tool }))
+    .filter((entry) => entry.snap !== undefined)
+
+  if (entries.length === 0) {
+    return (
+      <box flexDirection="row" gap={1}>
+        <text fg={t.muted}>…</text>
+      </box>
+    )
+  }
+
+  return (
+    <box
+      flexDirection="row"
+      gap={2}
+      onMouseDown={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (e.button !== 0) return
+        toggleAIUsagePopover(e.x, e.y)
+      }}
+    >
+      {entries.map(({ snap, tool }) => {
+        if (!snap) return null
+        const icon = TOOL_ICON[tool]
+        if (snap.error) {
+          return (
+            <text key={tool} fg={t.palette.error} selectable={false}>
+              {icon} —
+            </text>
+          )
+        }
+        if (snap.percent !== null) {
+          const p = Math.round(snap.percent)
+          let color = t.palette.success
+          if (p >= 85) {
+            color = t.palette.error
+          } else if (p >= 60) {
+            color = t.palette.warning
+          }
+          const { empty, filled } = buildBar(snap.percent)
+          const reset = formatResetIn(snap)
+          const pctText = `${String(p).padStart(2, ' ')}%`
+          return (
+            <box key={tool} flexDirection="row">
+              <text fg={color} selectable={false}>
+                {icon}{' '}
+              </text>
+              <text fg={color} selectable={false}>
+                {filled}
+              </text>
+              <text fg={t.muted} selectable={false}>
+                {empty}
+              </text>
+              <text fg={t.palette.ink} selectable={false}>
+                {` ${pctText}`}
+              </text>
+              {reset ? (
+                <text fg={t.muted} selectable={false}>
+                  {` · ${reset}`}
+                </text>
+              ) : null}
+            </box>
+          )
+        }
+        return (
+          <text key={tool} fg={t.muted} selectable={false}>
+            {icon} {formatTokens(snap.tokens.total)}
+          </text>
+        )
+      })}
+    </box>
+  )
+}

package/src/ui/components/ai-usage-popover.tsx

@@ -0,0 +1,152 @@
+import type { AIUsageTool } from '@brimveyn/aimux-config'
+
+import { useKeyboard } from '@opentui/react'
+import { useEffect, useState } from 'react'
+
+import type { UsageSnapshot } from '../../services/ai-usage/types'
+
+import { useAIUsageStore } from '../../state/ai-usage-store'
+import { useAppStore } from '../../state/app-store'
+import {
+  type AIUsagePopoverState,
+  closeAIUsagePopover,
+  subscribeAIUsagePopover,
+} from '../ai-usage/controller'
+import { useTokens } from '../theme'
+
+const TOOL_TITLE: Record<AIUsageTool, string> = {
+  claude: 'Claude Code',
+  codex: 'Codex',
+}
+
+const POPOVER_WIDTH = 38
+
+function fmt(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(2)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`
+  return String(n)
+}
+
+function buildLines(snap: UsageSnapshot): string[] {
+  if (snap.error) {
+    return [`error: ${snap.error.slice(0, 30)}`]
+  }
+  const lines: string[] = []
+  if (snap.percent !== null) {
+    lines.push(`usage   ${snap.percent.toFixed(1)}%`)
+  }
+  lines.push(`tokens  in ${fmt(snap.tokens.input)} / out ${fmt(snap.tokens.output)}`)
+  if (snap.tokens.cache > 0) {
+    lines.push(`cache   ${fmt(snap.tokens.cache)}`)
+  }
+  lines.push(`total   ${fmt(snap.tokens.total)}`)
+  if (snap.costUSD !== null) {
+    lines.push(`cost    $${snap.costUSD.toFixed(2)}`)
+  }
+  if (snap.burnRatePerHour !== null) {
+    lines.push(`burn    ${fmt(Math.round(snap.burnRatePerHour))}/h`)
+  }
+  if (snap.timeRemaining) {
+    lines.push(`resets  ${snap.timeRemaining}`)
+  } else if (snap.resetAt) {
+    lines.push(`resets  ${new Date(snap.resetAt).toLocaleTimeString()}`)
+  }
+  return lines
+}
+
+export function AIUsagePopover() {
+  const [popover, setPopover] = useState<AIUsagePopoverState | null>(null)
+  const t = useTokens()
+  const enabled = useAIUsageStore((s) => s.enabled)
+  const snapshots = useAIUsageStore((s) => s.snapshots)
+  const terminalCols = useAppStore((s) => s.layout.terminalCols)
+  const terminalRows = useAppStore((s) => s.layout.terminalRows)
+
+  useEffect(() => subscribeAIUsagePopover(setPopover), [])
+
+  useKeyboard((key) => {
+    if (!popover) return
+    if (key.name === 'escape') {
+      key.preventDefault()
+      closeAIUsagePopover()
+    }
+  })
+
+  if (!enabled || !popover) return null
+
+  const tools: AIUsageTool[] = ['claude', 'codex']
+  const sections = tools
+    .map((tool) => ({ snap: snapshots[tool], tool }))
+    .filter((s) => s.snap !== undefined)
+
+  let bodyLines = 0
+  if (sections.length === 0) {
+    bodyLines = 1
+  } else {
+    for (const s of sections) {
+      if (!s.snap) continue
+      bodyLines += buildLines(s.snap).length + 2
+    }
+  }
+  const height = Math.min(terminalRows - 2, bodyLines + 2)
+  const width = Math.min(terminalCols - 2, POPOVER_WIDTH)
+
+  const left = Math.max(0, Math.min(popover.anchorX - width + 2, terminalCols - width))
+  const top = Math.max(0, popover.anchorY - height)
+
+  return (
+    <box position="absolute" top={0} left={0} width="100%" height="100%">
+      <box
+        position="absolute"
+        top={0}
+        left={0}
+        width="100%"
+        height="100%"
+        onMouseDown={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          closeAIUsagePopover()
+        }}
+      />
+      <box
+        position="absolute"
+        top={top}
+        left={left}
+        width={width}
+        flexDirection="column"
+        border
+        borderColor={t.palette.primary}
+        backgroundColor={t.elevated}
+        onMouseDown={(e) => {
+          e.stopPropagation()
+        }}
+      >
+        {sections.length === 0 ? (
+          <box paddingLeft={1} paddingRight={1}>
+            <text fg={t.muted} selectable={false}>
+              no data yet — collecting…
+            </text>
+          </box>
+        ) : (
+          sections.map(({ snap, tool }, idx) => {
+            if (!snap) return null
+            const lines = buildLines(snap)
+            return (
+              <box key={tool} flexDirection="column" paddingLeft={1} paddingRight={1}>
+                {idx > 0 ? <text fg={t.muted}> </text> : null}
+                <text fg={t.accent} selectable={false}>
+                  {TOOL_TITLE[tool]}
+                </text>
+                {lines.map((line, i) => (
+                  <text key={`${tool}-${i}`} fg={t.palette.ink} selectable={false}>
+                    {line}
+                  </text>
+                ))}
+              </box>
+            )
+          })
+        )}
+      </box>
+    </box>
+  )
+}

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

@@ -48,7 +48,7 @@ export function CreateSessionModal({
 
   return (
     <ModalShell
-      title="Create session"
+      title="Create workspace"
       keybindsModeId="modal.create-session"
       width={uiTokens.modalWidth.xl}
     >
@@ -88,7 +88,7 @@ export function CreateSessionModal({
       </box>
 
       <box flexDirection="column">
-        <text fg={nameActive ? t.palette.ink : t.muted}>Session name</text>
+        <text fg={nameActive ? t.palette.ink : t.muted}>Workspace name</text>
         <InputField active={nameActive} value={sessionName} />
       </box>
     </ModalShell>

package/src/ui/components/git-commit-modal.tsx

@@ -1,3 +1,10 @@
+import { isAutoCommitEnabled } from '@brimveyn/aimux-config'
+import { useEffect, useState } from 'react'
+
+import type { ModeId } from '../../input/modes/types'
+
+import { useAppStore } from '../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
@@ -8,32 +15,174 @@ interface GitCommitModalProps {
   title: string
   body: string
   cursorPos: number
+  stage: 'edit' | 'generating' | 'confirm'
+  assistant?: string
+  model?: string
+}
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+const SPINNER_INTERVAL_MS = 80
+
+function useSpinnerFrame(active: boolean): string {
+  const [index, setIndex] = useState(0)
+  useEffect(() => {
+    if (!active) return
+    const id = setInterval(
+      () => setIndex((i) => (i + 1) % SPINNER_FRAMES.length),
+      SPINNER_INTERVAL_MS
+    )
+    return () => clearInterval(id)
+  }, [active])
+  return SPINNER_FRAMES[index] ?? '⠋'
+}
+
+function pickModeId(stage: 'edit' | 'generating' | 'confirm'): ModeId {
+  if (stage === 'generating') return 'modal.git-commit.generating'
+  if (stage === 'confirm') return 'modal.git-commit.confirm'
+  return 'modal.git-commit'
+}
+
+function pickShellTitle(stage: 'edit' | 'generating' | 'confirm'): string {
+  if (stage === 'generating') return 'Auto-commit'
+  if (stage === 'confirm') return 'Auto-commit (stage all + commit)'
+  return 'Commit'
+}
+
+function GeneratingOverlay({ assistant, model }: { assistant?: string; model?: string }) {
+  const t = useTokens()
+  const frame = useSpinnerFrame(true)
+  const providerLabel = [assistant, model].filter(Boolean).join(' · ') || 'configured provider'
+  return (
+    <box
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+      paddingTop={2}
+      paddingBottom={2}
+    >
+      <text fg={t.palette.primary}>🪄</text>
+      <box marginTop={1} flexDirection="row" gap={1}>
+        <text fg={t.palette.primary}>{frame}</text>
+        <text fg={t.palette.ink}>Generating commit message</text>
+      </box>
+      <text fg={t.muted}>via {providerLabel}</text>
+      <box marginTop={1}>
+        <text fg={t.muted}>Esc to cancel</text>
+      </box>
+    </box>
+  )
 }
 
-export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommitModalProps) {
+export function GitCommitModal({
+  activeField,
+  assistant,
+  body,
+  cursorPos,
+  model,
+  stage,
+  title,
+}: GitCommitModalProps) {
   const t = useTokens()
   const titleActive = activeField === 'title'
   const bodyActive = activeField === 'body'
+  const isConfirm = stage === 'confirm'
+  const isGenerating = stage === 'generating'
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const bgKind = useAppStore((s) => {
+    const id = s.currentSessionId
+    return id ? s.autoCommit.bySession[id]?.kind : undefined
+  })
+  const isBgGenerating = bgKind === 'generating'
+  const showBgSpinner = isBgGenerating && !isConfirm && !isGenerating
+  const bgSpinnerFrame = useSpinnerFrame(showBgSpinner)
+  const stagedCount = useAppStore(
+    (s) => s.gitPanel.files.filter((f) => f.section === 'staged').length
+  )
+
+  const onAutoCommitClick = (): void => {
+    const hasTitle = title.trim().length > 0
+    if (hasTitle || !currentSessionId) {
+      dispatchGlobal({ type: 'git-commit-enter-confirm' })
+      return
+    }
+    if (bgKind === 'ready') {
+      dispatchGlobal({ sessionId: currentSessionId, type: 'git-commit-use-background-suggestion' })
+      return
+    }
+    dispatchGlobal({ sessionId: currentSessionId, type: 'git-commit-enter-generating' })
+    if (bgKind !== 'generating') {
+      runSideEffectGlobal({ sessionId: currentSessionId, type: 'generate-auto-commit-now' })
+    }
+  }
+
+  const modeId = pickModeId(stage)
+  const shellTitle = pickShellTitle(stage)
 
   return (
-    <ModalShell title="Commit" keybindsModeId="modal.git-commit" width={uiTokens.modalWidth.xl}>
-      <box flexDirection="column">
-        <text fg={titleActive ? t.palette.ink : t.muted}>Title</text>
-        <InputField
-          active={titleActive}
-          cursorPos={titleActive ? cursorPos : undefined}
-          value={title}
-        />
-      </box>
+    <ModalShell title={shellTitle} keybindsModeId={modeId} width={uiTokens.modalWidth.xl}>
+      {isGenerating ? <GeneratingOverlay assistant={assistant} model={model} /> : null}
 
-      <box flexDirection="column">
-        <text fg={bodyActive ? t.palette.ink : t.muted}>Body (optional)</text>
-        <InputField
-          active={bodyActive}
-          cursorPos={bodyActive ? cursorPos : undefined}
-          value={body}
-        />
-      </box>
+      {isConfirm ? (
+        <box flexDirection="column">
+          {stagedCount > 0 ? (
+            <text fg={t.palette.warning}>
+              Commit will include the <strong>{stagedCount} staged file(s)</strong> only.
+            </text>
+          ) : (
+            <text fg={t.palette.warning}>
+              <strong>git add -A</strong> will stage every change before committing.
+            </text>
+          )}
+          <text fg={t.muted}>Enter to confirm · Esc to cancel · edits below still apply.</text>
+        </box>
+      ) : null}
+
+      {isGenerating ? null : (
+        <>
+          <box flexDirection="column">
+            <text fg={titleActive ? t.palette.ink : t.muted}>Title</text>
+            <InputField
+              active={titleActive}
+              cursorPos={titleActive ? cursorPos : undefined}
+              value={title}
+            />
+          </box>
+
+          <box flexDirection="column">
+            <text fg={bodyActive ? t.palette.ink : t.muted}>Body (optional)</text>
+            <InputField
+              active={bodyActive}
+              cursorPos={bodyActive ? cursorPos : undefined}
+              value={body}
+            />
+          </box>
+        </>
+      )}
+
+      {isConfirm || isGenerating || !isAutoCommitEnabled() ? null : (
+        <box flexDirection="row" gap={1} marginTop={1} alignItems="center">
+          <box
+            border
+            borderColor={t.palette.primary}
+            paddingLeft={1}
+            paddingRight={1}
+            flexDirection="row"
+            gap={1}
+            alignItems="center"
+            onMouseDown={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              onAutoCommitClick()
+            }}
+          >
+            {showBgSpinner ? <text fg={t.palette.primary}>{bgSpinnerFrame}</text> : null}
+            <text fg={t.palette.primary}>
+              <strong>Auto-commit</strong>
+            </text>
+          </box>
+          <text fg={t.muted}>C-a · stages all changes (AI-suggests message if empty)</text>
+        </box>
+      )}
     </ModalShell>
   )
 }

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

@@ -124,7 +124,7 @@ export function SessionBar() {
             onMouseDragEnd={cancelDrag}
             rightClickMenu={[
               [
-                'Rename',
+                'Rename workspace',
                 () =>
                   dispatchGlobal({
                     initialName: session.name,
@@ -134,7 +134,7 @@ export function SessionBar() {
                   }),
               ],
               [
-                'Close',
+                'Delete workspace',
                 () => runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' }),
               ],
             ]}

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

@@ -31,8 +31,8 @@ function formatSessionLine(
 }
 
 function getEmptyStateMessage(hasFilter: boolean): string {
-  if (hasFilter) return 'No matching sessions.'
-  return 'No sessions yet. Press Enter or n to create your first session.'
+  if (hasFilter) return 'No matching workspaces.'
+  return 'No workspaces yet. Press Enter or n to create your first workspace.'
 }
 
 export function SessionPickerModal({
@@ -72,7 +72,7 @@ export function SessionPickerModal({
     onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
     title: (
       <text fg={selectedIndex === filtered.length ? t.palette.ink : t.muted}>
-        Create new session
+        Create new workspace
       </text>
     ),
   }
@@ -81,7 +81,7 @@ export function SessionPickerModal({
 
   return (
     <Picker
-      title="Sessions"
+      title="Workspaces"
       keybindsModeId="modal.session-picker.filtering"
       width={uiTokens.modalWidth.lg}
       gap={1}

package/src/ui/components/sidebar.tsx

@@ -63,7 +63,9 @@ const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: nu
       <text fg={tokens.palette.primary}>
         <strong>aimux</strong>
       </text>
-      <text fg={tokens.accent}>{currentSession ? currentSession.name : 'No session selected'}</text>
+      <text fg={tokens.accent}>
+        {currentSession ? currentSession.name : 'No workspace selected'}
+      </text>
       {branch ? (
         <box flexDirection="row">
           <text fg={tokens.palette.primary}>{'\u{e702}'} </text>

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

@@ -5,6 +5,7 @@ import { useAppStore } from '../../state/app-store'
 import { useKeymap } from '../keymap-context'
 import { getStatusBarModel } from '../status-bar-model'
 import { getCurrentTokens, useBg, useTokens } from '../theme'
+import { AIUsageIndicator } from './ai-usage-indicator'
 
 function getModeColor(focusMode: AppState['focusMode']): string {
   const t = getCurrentTokens()
@@ -65,6 +66,7 @@ export function StatusBar() {
         <text fg={t.muted}>{model.right}</text>
         <box flexDirection="row" gap={2}>
           {model.help ? <text fg={t.muted}>{model.help}</text> : null}
+          <AIUsageIndicator />
           <text fg={t.hover}>v{APP_VERSION}</text>
         </box>
       </box>

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

@@ -33,7 +33,7 @@ function getTitle(
   focusMode: TerminalPaneProps['focusMode']
 ): string {
   if (!tab) {
-    return 'No active session'
+    return 'No active workspace'
   }
 
   if (isActive && focusMode === 'terminal-input') {
@@ -107,7 +107,7 @@ const TerminalViewport = memo(function TerminalViewport({
   }
 
   return (
-    <text fg={t.palette.ink}>{buffer.length > 0 ? buffer : 'Waiting for session output...'}</text>
+    <text fg={t.palette.ink}>{buffer.length > 0 ? buffer : 'Waiting for workspace output...'}</text>
   )
 })
 
@@ -239,6 +239,19 @@ export function TerminalPane({
               <text fg={t.palette.primary}>Ctrl+n</text>
               <text fg={t.muted}> to launch an assistant</text>
             </box>
+            <box
+              flexDirection="row"
+              justifyContent="center"
+              marginTop={1}
+              paddingX={2}
+              backgroundColor={t.selected}
+              onMouseDown={(event) => {
+                event.stopPropagation()
+                dispatchGlobal({ type: 'open-new-tab-modal' })
+              }}
+            >
+              <text fg={t.palette.ink}>New assistant</text>
+            </box>
           </box>
         ) : (
           <box
@@ -258,7 +271,9 @@ export function TerminalPane({
         )}
       </ContextMenuBox>
       {tab?.status === 'disconnected' ? (
-        <text fg={t.palette.warning}>Restored snapshot. Press Ctrl+r to restart this session.</text>
+        <text fg={t.palette.warning}>
+          Restored snapshot. Press Ctrl+r to restart this workspace.
+        </text>
       ) : null}
       {tab?.errorMessage ? <text fg={t.palette.error}>{tab.errorMessage}</text> : null}
     </box>