@brimveyn/aimux 1.21.0 → 1.22.2

package/src/ui/hooks/use-activity-sprite.ts

@@ -0,0 +1,73 @@
+import { useRenderer } from '@opentui/react'
+import { useEffect, useState } from 'react'
+
+import { useActivitySprites } from '../../settings/live'
+import { detectGraphicsProtocol, isInsideTmux } from '../terminal-graphics/capabilities'
+import {
+  loadSprites,
+  SPRITE_PLACEHOLDERS,
+  type SpriteSet,
+  type SpriteState,
+} from '../terminal-graphics/sprites'
+
+export interface ActivitySprite {
+  /** The colour is the frame's image id — see `Sprite.colors`. */
+  fg: string
+  /** The cells to draw, one entry per line of the row, top line first. */
+  glyphs: readonly string[]
+}
+
+const NO_SPRITES: SpriteSet = {}
+
+function useFrame(intervalMs: number): number {
+  const [frame, setFrame] = useState(0)
+
+  useEffect(() => {
+    // A tick count, not an index: consumers cycle over lists of different
+    // lengths and take their own modulo, so wrapping here would make whichever
+    // length does not divide the wrap jump backwards once per cycle.
+    if (intervalMs <= 0) return
+    const interval = setInterval(() => setFrame((prev) => prev + 1), intervalMs)
+    return () => clearInterval(interval)
+  }, [intervalMs])
+
+  return frame
+}
+
+/**
+ * The sprite standing in for a row's status marker, or null when the caller
+ * should draw its own glyph — the toggle is off, the terminal cannot composite
+ * images, or nothing in the sprite folder covers this state.
+ *
+ * tmux owns the grid and does not understand placeholder cells, so sprites are
+ * off there even when the terminal underneath could draw them.
+ */
+export function useActivitySprite(state: SpriteState | null): ActivitySprite | null {
+  const [sprites, setSprites] = useState<SpriteSet>(NO_SPRITES)
+  const renderer = useRenderer()
+  const enabled =
+    useActivitySprites() && detectGraphicsProtocol(renderer) === 'kitty' && !isInsideTmux()
+
+  useEffect(() => {
+    if (!enabled) return
+    let cancelled = false
+    void (async () => {
+      const loaded = await loadSprites()
+      if (!cancelled) setSprites(loaded)
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [enabled])
+
+  // Gated on `enabled` here, not only at load time: the loaded set stays in
+  // state when the toggle is switched off, and the toggle is a live setting.
+  const sprite = !enabled || state === null ? undefined : sprites[state]
+  const colors = sprite?.colors
+  // A still sprite needs no timer, and neither does a row whose state has none.
+  const frame = useFrame(colors === undefined || colors.length < 2 ? 0 : (sprite?.frameMs ?? 0))
+
+  const fg = colors?.[frame % colors.length]
+  if (fg === undefined) return null
+  return { fg, glyphs: SPRITE_PLACEHOLDERS }
+}

package/src/ui/hooks/use-scroll-active-into-view.ts

@@ -0,0 +1,26 @@
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+import { useEffect } from 'react'
+
+interface Options {
+  scrollRef: React.RefObject<ScrollBoxRenderable | null>
+  visible: boolean
+  /** Id of the active child, without the prefix. Null when there is none. */
+  activeId: string | null
+  idPrefix: string
+}
+
+/**
+ * Scroll the active child into view whenever it changes (and on first reveal).
+ * A thin wrapper around `scrollChildIntoView` — no wrap-around/edge heuristics,
+ * which is all a single-axis list of equal rows needs.
+ */
+export function useScrollActiveIntoView({ activeId, idPrefix, scrollRef, visible }: Options): void {
+  useEffect(() => {
+    if (!visible) return
+    if (activeId == null || activeId === '') return
+    const scrollbox = scrollRef.current
+    if (!scrollbox) return
+    scrollbox.scrollChildIntoView(`${idPrefix}${activeId}`)
+  }, [activeId, idPrefix, scrollRef, visible])
+}

package/src/ui/{session-ordering.ts → project-ordering.ts}

@@ -1,11 +1,11 @@
-import type { SessionRecord } from '../state/types'
+import type { ProjectRecord } from '../state/types'
 
 /**
- * Return sessions in user-facing display order: persisted `order` ascending,
+ * Return projects in user-facing display order: persisted `order` ascending,
  * with any missing `order` falling back to `createdAt` ascending.
  */
-export function orderSessionsForDisplay(sessions: SessionRecord[]): SessionRecord[] {
-  return [...sessions].sort((a, b) => {
+export function orderProjectsForDisplay(projects: ProjectRecord[]): ProjectRecord[] {
+  return [...projects].sort((a, b) => {
     const ao = a.order ?? Number.MAX_SAFE_INTEGER
     const bo = b.order ?? Number.MAX_SAFE_INTEGER
     if (ao !== bo) return ao - bo

package/src/ui/root.tsx

@@ -1,21 +1,21 @@
 import type { MouseEvent } from '@opentui/core'
 
-import { useCallback, useMemo } from 'react'
+import { type ReactNode, useCallback, useMemo } from 'react'
 
 import type { MeasuredPaneRect } from '../app-runtime/use-pane-size-report'
-import type { WorktreeTemplate } from '../config'
 import type { TerminalContentOrigin } from '../input/raw-input-handler'
 import type {
   BarSide,
   FocusMode,
   ModalState,
-  SessionRecord,
+  ProjectRecord,
   SnippetRecord,
-  WorktreeRecord,
+  WorkspaceRecord,
 } from '../state/types'
 import type { ThemeId } from './themes'
 
-import { useWorktreeBranchPolling } from '../git/worktree-branch-poller'
+import { useWorkspaceBranchPolling } from '../git/workspace-branch-poller'
+import { useAutoCommitModel } from '../settings/live'
 import { useAppStore } from '../state/app-store'
 import { getBarWidth } from '../state/bars'
 import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
@@ -29,39 +29,41 @@ import { AIUsageModal } from './components/modals/app/ai-usage-modal'
 import { HelpModal } from './components/modals/app/help-modal'
 import { UpdateAvailableModal } from './components/modals/app/update-available-modal'
 import { GitCommitModal } from './components/modals/git/git-commit-modal'
-import { CreateSessionModal } from './components/modals/sessions/create-session-modal'
-import { SessionNameModal } from './components/modals/sessions/session-name-modal'
-import { SessionPickerModal } from './components/modals/sessions/session-picker-modal'
-import { WorktreeDeleteConfirm } from './components/modals/shared/worktree-delete-confirm'
+import { CreateProjectModal } from './components/modals/projects/create-project-modal'
+import { ProjectNameModal } from './components/modals/projects/project-name-modal'
+import { ProjectPickerModal } from './components/modals/projects/project-picker-modal'
+import { SettingsSearchModal } from './components/modals/settings/settings-search-modal'
+import { WorkspaceDeleteConfirm } from './components/modals/shared/workspace-delete-confirm'
 import { SnippetEditorModal } from './components/modals/snippets/snippet-editor-modal'
 import { SnippetPickerModal } from './components/modals/snippets/snippet-picker-modal'
 import { NewTabModal } from './components/modals/tabs/new-tab-modal'
 import { ThemePickerModal } from './components/modals/themes/theme-picker-modal'
-import { WorktreeMoveConfirmModal } from './components/modals/worktree/worktree-move-confirm-modal'
-import { WorktreeMoveModal } from './components/modals/worktree/worktree-move-modal'
+import { CreateWorkspaceModal } from './components/modals/workspace/create-workspace-modal'
+import { WorkspaceMoveConfirmModal } from './components/modals/workspace/workspace-move-confirm-modal'
+import { WorkspaceMoveModal } from './components/modals/workspace/workspace-move-modal'
 import { ContextMenuOverlay } from './components/overlays/context-menu/context-menu-overlay'
 import { PendingChordOverlay } from './components/overlays/pending-chord-overlay'
 import { ToastViewport } from './components/overlays/toast/toast-viewport'
+import { SettingsView } from './components/settings/settings-view'
 import { useTheme } from './theme'
 
-const EMPTY_WORKTREES: WorktreeRecord[] = []
-const EMPTY_BASE_BRANCHES: string[] = []
+const EMPTY_WORKSPACES: WorkspaceRecord[] = []
 
-function getCreateSessionFields(modal: ModalState) {
-  if (modal.type !== 'create-session') {
-    return { directoryQuery: '', sessionName: '' }
+function getCreateProjectFields(modal: ModalState) {
+  if (modal.type !== 'create-project') {
+    return { directoryQuery: '', projectName: '' }
   }
 
   if (modal.activeField === 'directory') {
     return {
       directoryQuery: modal.editBuffer ?? '',
-      sessionName: modal.nameBuffer,
+      projectName: modal.nameBuffer,
     }
   }
 
   return {
     directoryQuery: modal.nameBuffer,
-    sessionName: modal.editBuffer ?? '',
+    projectName: modal.editBuffer ?? '',
   }
 }
 
@@ -82,18 +84,17 @@ function renderModal(
   modal: ModalState,
   options: {
     customCommands: Record<string, string>
-    sessions: SessionRecord[]
-    currentSessionId: string | null
+    projects: ProjectRecord[]
+    currentProjectId: string | null
     currentTabCount: number
     snippets: SnippetRecord[]
     themeId: ThemeId
-    createSessionFields: { directoryQuery: string; sessionName: string }
+    createProjectFields: { directoryQuery: string; projectName: string }
     snippetEditorFields: { snippetName: string; snippetTrigger: string; snippetContent: string }
     focusMode: FocusMode
     activeAssistant?: string
     autoCommitModel?: string
-    worktreeDivergence: Record<string, { ahead: number; behind: number }>
-    worktreeTemplates: WorktreeTemplate[]
+    workspaceDivergence: Record<string, { ahead: number; behind: number }>
   }
 ) {
   switch (modal.type) {
@@ -105,62 +106,72 @@ function renderModal(
           customCommands={options.customCommands}
           filter={modal.editBuffer}
           cursorPos={modal.cursorPos}
-          currentSessionId={options.currentSessionId}
           editingCommand={modal.type === 'new-tab' ? modal.editingCommand : null}
           editBuffer={modal.editBuffer ?? ''}
-          activeField={modal.type === 'new-tab' ? modal.activeField : 'assistant'}
-          branchError={modal.type === 'new-tab' ? modal.branchError : null}
-          branchName={modal.type === 'new-tab' ? modal.branchName : ''}
-          createWorktree={modal.type === 'new-tab' ? modal.createWorktree : false}
-          selectedAssistantId={modal.type === 'new-tab' ? modal.selectedAssistantId : null}
-          step={modal.type === 'new-tab' ? modal.step : 'assistant'}
-          baseQuery={modal.type === 'new-tab' ? modal.baseQuery : ''}
-          baseRef={modal.type === 'new-tab' ? modal.baseRef : ''}
-          baseBranches={modal.type === 'new-tab' ? modal.baseBranches : EMPTY_BASE_BRANCHES}
-          worktreeDeletePrompt={modal.type === 'new-tab' ? modal.worktreeDeletePrompt : null}
-          worktrees={
-            options.currentSessionId != null && options.currentSessionId !== ''
-              ? (options.sessions.find((session) => session.id === options.currentSessionId)
-                  ?.worktrees ?? EMPTY_WORKTREES)
-              : EMPTY_WORKTREES
+          excludeTerminal={modal.type === 'new-tab' && modal.pendingWorkspace != null}
+        />
+      )
+    case 'create-workspace':
+      return (
+        <CreateWorkspaceModal
+          activeField={modal.activeField}
+          prompt={modal.prompt}
+          branchError={modal.branchError}
+          baseQuery={modal.baseQuery}
+          baseRef={modal.baseRef}
+          baseBranches={modal.baseBranches}
+          cursorPos={modal.cursorPos}
+          selectedIndex={modal.selectedIndex}
+          workspaces={
+            options.currentProjectId != null && options.currentProjectId !== ''
+              ? (options.projects.find((project) => project.id === options.currentProjectId)
+                  ?.workspaces ?? EMPTY_WORKSPACES)
+              : EMPTY_WORKSPACES
           }
-          worktreeName={modal.type === 'new-tab' ? modal.worktreeName : ''}
-          worktreeTemplates={options.worktreeTemplates}
-          allowTemplateShortcut={modal.type === 'new-tab'}
         />
       )
-    case 'session-picker':
+    case 'project-picker':
       return (
-        <SessionPickerModal
-          sessions={options.sessions}
+        <ProjectPickerModal
+          projects={options.projects}
           selectedIndex={modal.selectedIndex}
-          currentSessionId={options.currentSessionId}
+          currentProjectId={options.currentProjectId}
           currentTabCount={options.currentTabCount}
           filter={modal.editBuffer}
           cursorPos={modal.cursorPos}
         />
       )
-    case 'session-name':
+    case 'project-name':
       return (
-        <SessionNameModal
+        <ProjectNameModal
           title={
-            modal.sessionTargetId != null && modal.sessionTargetId !== ''
-              ? 'Rename workspace'
-              : 'Create workspace'
+            modal.projectTargetId != null && modal.projectTargetId !== ''
+              ? 'Rename project'
+              : 'Create project'
           }
           value={modal.editBuffer ?? ''}
         />
       )
     case 'rename-tab':
-      return <SessionNameModal title="Rename tab" value={modal.editBuffer ?? ''} />
-    case 'rename-worktree':
-      return <SessionNameModal title="Rename worktree" value={modal.editBuffer ?? ''} />
-    case 'create-session':
+      return <ProjectNameModal title="Rename tab" value={modal.editBuffer ?? ''} />
+    case 'setting-text':
+      return <ProjectNameModal title={modal.settingLabel} value={modal.editBuffer ?? ''} />
+    case 'settings-search':
+      return (
+        <SettingsSearchModal
+          filter={modal.editBuffer}
+          selectedIndex={modal.selectedIndex}
+          cursorPos={modal.cursorPos}
+        />
+      )
+    case 'rename-workspace':
+      return <ProjectNameModal title="Rename workspace" value={modal.editBuffer ?? ''} />
+    case 'create-project':
       return (
-        <CreateSessionModal
+        <CreateProjectModal
           activeField={modal.activeField}
-          directoryQuery={options.createSessionFields.directoryQuery}
-          sessionName={options.createSessionFields.sessionName}
+          directoryQuery={options.createProjectFields.directoryQuery}
+          projectName={options.createProjectFields.projectName}
           results={modal.directoryResults}
           selectedIndex={modal.selectedIndex}
           pendingProjectPath={modal.pendingProjectPath}
@@ -183,7 +194,7 @@ function renderModal(
           snippetName={options.snippetEditorFields.snippetName}
           snippetTrigger={options.snippetEditorFields.snippetTrigger}
           snippetContent={options.snippetEditorFields.snippetContent}
-          isEditing={modal.sessionTargetId !== null}
+          isEditing={modal.projectTargetId !== null}
         />
       )
     case 'theme-picker':
@@ -203,25 +214,25 @@ function renderModal(
           latestVersion={modal.latestVersion}
         />
       )
-    case 'worktree-move': {
-      const session =
-        options.currentSessionId != null && options.currentSessionId !== ''
-          ? options.sessions.find((entry) => entry.id === options.currentSessionId)
+    case 'workspace-move': {
+      const project =
+        options.currentProjectId != null && options.currentProjectId !== ''
+          ? options.projects.find((entry) => entry.id === options.currentProjectId)
           : undefined
       return (
-        <WorktreeMoveModal
-          deleteSource={modal.type === 'worktree-move' ? modal.deleteSource : false}
-          divergence={options.worktreeDivergence}
+        <WorkspaceMoveModal
+          deleteSource={modal.type === 'workspace-move' ? modal.deleteSource : false}
+          divergence={options.workspaceDivergence}
           selectedIndex={modal.selectedIndex}
-          sourceWorktreeId={modal.sourceWorktreeId}
+          sourceWorkspaceId={modal.sourceWorkspaceId}
           stats={modal.stats}
-          worktrees={session?.worktrees ?? EMPTY_WORKTREES}
+          workspaces={project?.workspaces ?? EMPTY_WORKSPACES}
         />
       )
     }
-    case 'worktree-move-confirm':
+    case 'workspace-move-confirm':
       return (
-        <WorktreeMoveConfirmModal
+        <WorkspaceMoveConfirmModal
           variant={modal.variant}
           files={modal.files}
           sourceLabel={modal.sourceLabel}
@@ -239,12 +250,12 @@ function renderModal(
       )
     case 'ai-usage':
       return <AIUsageModal />
-    case 'worktree-delete-confirm':
+    case 'workspace-delete-confirm':
       return (
-        <WorktreeDeleteConfirm
-          keybindsModeId="modal.worktree-delete-confirm"
+        <WorkspaceDeleteConfirm
+          keybindsModeId="modal.workspace-delete-confirm"
           reason={modal.reason}
-          worktreeLabel={modal.worktreeLabel}
+          workspaceLabel={modal.workspaceLabel}
         />
       )
     case 'git-commit': {
@@ -332,17 +343,16 @@ export function RootView({
   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 worktreeDivergence = useAppStore((s) => s.worktreeDivergence)
-  const worktreeTemplates = useAppStore((s) => s.worktreeTemplates)
+  const projects = useAppStore((s) => s.projects)
+  const currentProjectId = useAppStore((s) => s.currentProjectId)
+  const workspaceDivergence = useAppStore((s) => s.workspaceDivergence)
   const leftBarWidth = useAppStore((s) => getBarWidth(s.bars.left))
 
   const splitChrome = PANE_BORDER * 2
 
-  // Keep every worktree's `branch` in state synchronized with the on-disk
+  // Keep every workspace's `branch` in state synchronized with the on-disk
   // HEAD so the sidebar (and divergence calc) never reads a stale value.
-  useWorktreeBranchPolling(true)
+  useWorkspaceBranchPolling(true)
 
   // The terminal's own left edge stays a drag target for the left bar, so the
   // resize gesture works from either side of the seam.
@@ -396,50 +406,42 @@ export function RootView({
   )
 
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
+  // The generating overlay has always been able to name the model, and nothing
+  // ever passed it one.
+  const autoCommitModel = useAutoCommitModel(activeTab?.assistant)
   const activeTree =
     activeTabId != null && activeTabId !== ''
       ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId)
       : null
-  const createSessionFields = getCreateSessionFields(modal)
+  const createProjectFields = getCreateProjectFields(modal)
   const snippetEditorFields = getSnippetEditorFields(modal)
 
+  // Git mode and settings each swap the pane tree for one full-width view.
+  // Everything else on screen — status bar, overlays, modal, toasts — is the
+  // same either way, so only the center is a branch: a return per view would
+  // mean maintaining the chrome three times.
   const inGitMode = focusMode === 'git' || modal.type === 'git-commit'
-  if (inGitMode) {
-    return (
-      <box flexDirection="column" width="100%" height="100%" backgroundColor={editorBg}>
-        <TopTabBar forceVisible />
-        <GitView themeId={themeId} />
-        <StatusBar />
-        <PendingChordOverlay />
-        <ContextMenuOverlay />
-        {renderModal(modal, {
-          activeAssistant: activeTab?.assistant,
-          createSessionFields,
-          currentSessionId,
-          currentTabCount: tabs.length,
-          customCommands,
-          focusMode,
-          sessions,
-          snippetEditorFields,
-          snippets,
-          themeId,
-          worktreeDivergence,
-          worktreeTemplates,
-        })}
-        <ToastViewport />
-      </box>
-    )
-  }
+  // A settings row's text field flips focusMode to command-edit, the same way the
+  // commit modal does in git mode, so the screen behind it has to stay mounted:
+  // those two modals belong to the screen and are read against it.
+  //
+  // Not `returnTo === 'settings'`, which is where focus goes and not what is
+  // behind: the theme picker also returns here, and it previews each theme as you
+  // move. Previewing it on the settings screen is not the answer to "how does this
+  // theme look" — so it gets the panes, and closing still comes back here.
+  const inSettings =
+    focusMode === 'settings' || modal.type === 'setting-text' || modal.type === 'settings-search'
+  let replacesPanes: ReactNode = null
+  if (inGitMode) replacesPanes = <GitView themeId={themeId} />
+  else if (inSettings) replacesPanes = <SettingsView />
 
-  return (
-    <box
-      flexDirection="column"
-      width="100%"
-      height="100%"
-      backgroundColor={editorBg}
-      onMouseDrag={handleRootMouseDrag}
-      onMouseUp={handleRootMouseUp}
-    >
+  const center =
+    replacesPanes !== null ? (
+      <>
+        <TopTabBar panesReplaced />
+        {replacesPanes}
+      </>
+    ) : (
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
         <Bar
           side="left"
@@ -503,21 +505,37 @@ export function RootView({
           onResizeDragEnd={onSeparatorDragEnd}
         />
       </box>
+    )
+
+  return (
+    <box
+      flexDirection="column"
+      width="100%"
+      height="100%"
+      backgroundColor={editorBg}
+      // Both drag handlers no-op unless a gesture is in flight, so the full-width
+      // views inherit them harmlessly — and a drag that was in flight when one
+      // opened gets finalised instead of stranded.
+      onMouseDrag={handleRootMouseDrag}
+      onMouseUp={handleRootMouseUp}
+    >
+      {center}
       <StatusBar />
       <PendingChordOverlay />
       <ContextMenuOverlay />
       {renderModal(modal, {
-        createSessionFields,
-        currentSessionId,
+        activeAssistant: activeTab?.assistant,
+        autoCommitModel,
+        createProjectFields,
+        currentProjectId,
         currentTabCount: tabs.length,
         customCommands,
         focusMode,
-        sessions,
+        projects,
         snippetEditorFields,
         snippets,
         themeId,
-        worktreeDivergence,
-        worktreeTemplates,
+        workspaceDivergence,
       })}
       <ToastViewport />
     </box>