@brimveyn/aimux 1.7.4 → 1.9.0

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>

package/src/ui/root.tsx

@@ -1,13 +1,14 @@
 import type { MouseEvent } from '@opentui/core'
 
 import type { TerminalContentOrigin } from '../input/raw-input-handler'
-import type { ModalState, SessionRecord, SnippetRecord } from '../state/types'
+import type { FocusMode, ModalState, SessionRecord, SnippetRecord } from '../state/types'
 import type { ThemeId } from './themes'
 
 import { useAppStore } from '../state/app-store'
 import { dispatchGlobal } from '../state/dispatch-ref'
 import { getGitPaneWidthFromRatio } from '../state/git-pane-sizing'
 import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
+import { AIUsageModal } from './components/ai-usage-modal'
 import { ContextMenuBox } from './components/context-menu-box'
 import { ContextMenuOverlay } from './components/context-menu-overlay'
 import { CreateSessionModal } from './components/create-session-modal'
@@ -78,6 +79,9 @@ function renderModal(
     themeId: ThemeId
     createSessionFields: { directoryQuery: string; sessionName: string }
     snippetEditorFields: { snippetName: string; snippetContent: string }
+    focusMode: FocusMode
+    activeAssistant?: string
+    autoCommitModel?: string
   }
 ) {
   switch (modal.type) {
@@ -107,7 +111,7 @@ function renderModal(
     case 'session-name':
       return (
         <SessionNameModal
-          title={modal.sessionTargetId ? 'Rename session' : 'Create session'}
+          title={modal.sessionTargetId ? 'Rename workspace' : 'Create workspace'}
           value={modal.editBuffer ?? ''}
         />
       )
@@ -168,6 +172,8 @@ function renderModal(
           cursorPos={modal.cursorPos}
         />
       )
+    case 'ai-usage':
+      return <AIUsageModal />
     case 'git-commit': {
       const titleText =
         modal.activeField === 'title' ? (modal.editBuffer ?? '') : modal.contentBuffer
@@ -176,8 +182,11 @@ function renderModal(
       return (
         <GitCommitModal
           activeField={modal.activeField}
+          assistant={options.activeAssistant}
           body={bodyText}
           cursorPos={modal.cursorPos ?? (modal.editBuffer ?? '').length}
+          model={options.autoCommitModel}
+          stage={modal.stage}
           title={titleText}
         />
       )
@@ -273,10 +282,12 @@ export function RootView({
         <PendingChordOverlay />
         <ContextMenuOverlay />
         {renderModal(modal, {
+          activeAssistant: activeTab?.assistant,
           createSessionFields,
           currentSessionId,
           currentTabCount: tabs.length,
           customCommands,
+          focusMode,
           sessions,
           snippetEditorFields,
           snippets,
@@ -379,6 +390,7 @@ export function RootView({
         currentSessionId,
         currentTabCount: tabs.length,
         customCommands,
+        focusMode,
         sessions,
         snippetEditorFields,
         snippets,

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

@@ -61,7 +61,7 @@ export function getStatusBarModel(
   const currentSession = state.currentSessionId
     ? state.sessions.find((session) => session.id === state.currentSessionId)
     : undefined
-  const sessionName = currentSession?.name ?? 'no session'
+  const sessionName = currentSession?.name ?? 'no workspace'
   const sessionLabel = currentSession?.projectPath
     ? `${sessionName} (${abbreviatePath(currentSession.projectPath)})`
     : sessionName