@brimveyn/aimux 1.7.3 → 1.8.0

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/git-pane-context-menu.ts

@@ -0,0 +1,26 @@
+import type { GitPaneMode, GitPanePosition, GitPaneState } from '../../state/types'
+import type { ContextMenuItem } from '../context-menu/controller'
+
+const GIT_PANE_MENU_OPTIONS: Array<{
+  label: string
+  mode: GitPaneMode
+  position: GitPanePosition
+}> = [
+  { label: 'Move to top', mode: 'embedded', position: 'top' },
+  { label: 'Move to bottom', mode: 'embedded', position: 'bottom' },
+  { label: 'Move to left', mode: 'pane', position: 'left' },
+  { label: 'Move to right', mode: 'pane', position: 'right' },
+]
+
+export function buildGitPaneContextMenu(
+  gitPane: Pick<GitPaneState, 'mode' | 'position'>,
+  onToggle: () => void,
+  onMove: (mode: GitPaneMode, position: GitPanePosition) => void
+): ContextMenuItem[] {
+  return [
+    ['Toggle', onToggle],
+    ...GIT_PANE_MENU_OPTIONS.filter(
+      ({ mode, position }) => !(gitPane.mode === mode && gitPane.position === position)
+    ).map(({ label, mode, position }) => [label, () => onMove(mode, position)] as ContextMenuItem),
+  ]
+}

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

@@ -1,10 +1,15 @@
-import { type ScrollBoxRenderable } from '@opentui/core'
+import {
+  type BoxRenderable,
+  type MouseEvent as OtuiMouseEvent,
+  type ScrollBoxRenderable,
+} from '@opentui/core'
 import { memo, useMemo, useRef } from 'react'
 
 import { useAppStore } from '../../state/app-store'
 import { dispatchGlobal } from '../../state/dispatch-ref'
 import { getCurrentTokens, type ThemeTokens, useBg, useTokens } from '../theme'
 import { ContextMenuBox } from './context-menu-box'
+import { buildGitPaneContextMenu } from './git-pane-context-menu'
 import { GitPaneWidget } from './git-pane-widget'
 import { buildTabGroupInfo } from './sidebar-group-metadata'
 import { TabItem } from './tab-item'
@@ -13,12 +18,21 @@ import { useSidebarBranch } from './use-sidebar-branch'
 
 interface SidebarProps {
   onTabActivate?: (tabId: string) => void
+  onResizeDrag?: (event: OtuiMouseEvent) => boolean
+  onResizeDragEnd?: () => void
+  onSidebarResizeStart?: (info: { initialWidth: number; screenStart: number }) => void
+  onEmbeddedGitResizeStart?: (info: {
+    containerStart: number
+    position: 'top' | 'bottom'
+    totalSize: number
+  }) => void
 }
 
 const GUTTER_START = '╭'
 const GUTTER_MIDDLE = '├'
 const GUTTER_END = '╰'
 const GUTTER_PAD = '│'
+const RESIZE_HANDLE = '│'
 
 function getRowBackground({
   alternate,
@@ -34,9 +48,8 @@ function getRowBackground({
   return undefined
 }
 
-const SidebarTop = memo(function SidebarTop() {
+const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: number }) {
   const tokens = useTokens()
-  const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
   const currentSession = currentSessionId
@@ -50,7 +63,9 @@ const SidebarTop = memo(function SidebarTop() {
       <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>
@@ -70,7 +85,7 @@ const SidebarTop = memo(function SidebarTop() {
       >
         <text fg={tokens.palette.ink}>+ New assistant</text>
       </box>
-      <text fg={tokens.hover}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+      <text fg={tokens.hover}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
     </box>
   )
 })
@@ -164,13 +179,20 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
   )
 })
 
-export function Sidebar({ onTabActivate }: SidebarProps) {
+export function Sidebar({
+  onEmbeddedGitResizeStart,
+  onResizeDrag,
+  onResizeDragEnd,
+  onSidebarResizeStart,
+  onTabActivate,
+}: SidebarProps) {
   const tokens = useTokens()
   const sidebarBg = useBg('elevated')
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const gitPane = useAppStore((s) => s.gitPane)
   const focusMode = useAppStore((s) => s.focusMode)
+  const bodyRef = useRef<BoxRenderable | null>(null)
 
   if (!sidebarVisible) {
     return null
@@ -179,15 +201,51 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
   const gitEmbedded = gitPane.mode === 'embedded' && gitPane.visible
   const gitOnTop = gitEmbedded && gitPane.position === 'top'
   const gitOnBottom = gitEmbedded && gitPane.position === 'bottom'
+  const contentWidth = Math.max(1, sidebarWidth - 1)
+  const gitPaneMenu = buildGitPaneContextMenu(
+    gitPane,
+    () => dispatchGlobal({ type: 'toggle-git-pane' }),
+    (mode, position) => {
+      dispatchGlobal({ mode, type: 'set-git-pane-mode' })
+      dispatchGlobal({ position, type: 'set-git-pane-position' })
+    }
+  )
 
   // flex-grow scaled by 100 (integer preferred); tabs gets (1-ratio), git gets ratio.
-  const tabsGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.ratio) * 100)) : 1
-  const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.ratio * 100)) : 0
+  const tabsGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.embeddedRatio) * 100)) : 1
+  const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.embeddedRatio * 100)) : 0
 
-  const separator = <text fg={tokens.hover}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+  const separator = <text fg={tokens.hover}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
   const gitBody = gitEmbedded ? (
-    <box flexDirection="column" flexGrow={gitGrow} flexShrink={1} flexBasis={0} overflow="hidden">
+    <ContextMenuBox
+      flexDirection="column"
+      flexGrow={gitGrow}
+      flexShrink={1}
+      flexBasis={0}
+      overflow="hidden"
+      rightClickMenu={gitPaneMenu}
+    >
       <GitPaneWidget pollingEnabled={gitPane.visible} />
+    </ContextMenuBox>
+  ) : null
+  const embeddedHandle = gitEmbedded ? (
+    <box
+      minHeight={1}
+      flexShrink={0}
+      backgroundColor={tokens.border}
+      onMouseDown={(event) => {
+        const body = bodyRef.current
+        if (!body) return
+        event.preventDefault()
+        event.stopPropagation()
+        onEmbeddedGitResizeStart?.({
+          containerStart: body.y,
+          position: gitPane.position === 'top' ? 'top' : 'bottom',
+          totalSize: Math.max(1, body.height),
+        })
+      }}
+    >
+      <text fg={tokens.border}>{RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}</text>
     </box>
   ) : null
 
@@ -198,6 +256,7 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
       flexDirection="column"
       backgroundColor={sidebarBg}
       gap={0}
+      overflow="hidden"
       rightClickMenu={[
         ['Hide sidebar', () => dispatchGlobal({ type: 'toggle-sidebar' })],
         ['Toggle git pane', () => dispatchGlobal({ type: 'toggle-git-pane' })],
@@ -214,29 +273,56 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
           dispatchGlobal({ focusMode: 'navigation', type: 'set-focus-mode' })
         }
       }}
+      onMouseDrag={(event) => {
+        if (onResizeDrag?.(event)) {
+          event.preventDefault()
+          event.stopPropagation()
+        }
+      }}
+      onMouseUp={() => {
+        onResizeDragEnd?.()
+      }}
     >
-      <SidebarTop />
-      {gitOnTop ? (
-        <>
-          {gitBody}
-          {separator}
-        </>
-      ) : null}
-      <box
-        flexDirection="column"
-        flexGrow={tabsGrow}
-        flexShrink={1}
-        flexBasis={0}
-        overflow="hidden"
-      >
-        <TabsBody onTabActivate={onTabActivate} />
+      <box flexDirection="row" width={sidebarWidth} flexGrow={1} overflow="hidden">
+        <box width={contentWidth} flexGrow={1} flexDirection="column" overflow="hidden">
+          <SidebarTop contentWidth={contentWidth} />
+          <box ref={bodyRef} flexDirection="column" flexGrow={1} overflow="hidden">
+            {gitOnTop ? (
+              <>
+                {gitBody}
+                {embeddedHandle}
+              </>
+            ) : null}
+            <box
+              flexDirection="column"
+              flexGrow={tabsGrow}
+              flexShrink={1}
+              flexBasis={0}
+              overflow="hidden"
+            >
+              <TabsBody onTabActivate={onTabActivate} />
+            </box>
+            {gitOnBottom ? (
+              <>
+                {embeddedHandle}
+                {gitBody}
+              </>
+            ) : null}
+          </box>
+          {!gitEmbedded ? separator : null}
+        </box>
+        <box
+          height="100%"
+          width={1}
+          flexShrink={0}
+          backgroundColor={tokens.border}
+          onMouseDown={(event) => {
+            event.preventDefault()
+            event.stopPropagation()
+            onSidebarResizeStart?.({ initialWidth: sidebarWidth, screenStart: event.x })
+          }}
+        />
       </box>
-      {gitOnBottom ? (
-        <>
-          {separator}
-          {gitBody}
-        </>
-      ) : null}
     </ContextMenuBox>
   )
 }

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>