@brimveyn/aimux 1.20.4 → 1.22.0

package/src/ui/root.tsx

@@ -1,28 +1,26 @@
 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 { dispatchGlobal } from '../state/dispatch-ref'
-import { getGitPaneWidthFromRatio } from '../state/git-pane-sizing'
+import { getBarWidth } from '../state/bars'
 import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
 import { GitView } from './components/git/git-view'
-import { buildGitPaneContextMenu } from './components/git/pane/git-pane-context-menu'
-import { GitPaneWidget } from './components/git/pane/git-pane-widget'
-import { Sidebar } from './components/layout/sidebar/sidebar'
+import { Bar, type BarBoundaryResizeInfo } from './components/layout/bar'
 import { SplitLayout } from './components/layout/split-layout'
 import { StatusBar } from './components/layout/status-bar'
 import { TerminalPane } from './components/layout/terminal-pane'
@@ -31,40 +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 { ContextMenuBox } from './components/overlays/context-menu/context-menu-box'
+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 ?? '',
   }
 }
 
@@ -85,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) {
@@ -108,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 (
-        <CreateSessionModal
+        <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 (
+        <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}
@@ -186,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':
@@ -206,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}
@@ -242,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': {
@@ -289,17 +297,8 @@ interface RootViewProps {
   onTerminalMouseUp?: (event: MouseEvent) => boolean
   onPaneActivate?: (tabId: string) => void
   onSplitResize?: (tabId: string, ratio: number, axis: SplitDirection) => void
-  onSidebarResizeStart?: (info: { initialWidth: number; screenStart: number }) => void
-  onGitPaneResizeStart?: (info: {
-    initialWidth: number
-    screenStart: number
-    side: 'left' | 'right'
-  }) => void
-  onEmbeddedGitResizeStart?: (info: {
-    containerStart: number
-    position: 'top' | 'bottom'
-    totalSize: number
-  }) => void
+  onBarResizeStart?: (info: { initialWidth: number; screenStart: number; side: BarSide }) => void
+  onBarBoundaryResizeStart?: (info: BarBoundaryResizeInfo) => void
   onSeparatorDragStart?: (info: {
     tabId: string
     direction: SplitDirection
@@ -317,14 +316,13 @@ export function RootView({
   contentOrigin,
   localScrollbackEnabled,
   mouseForwardingEnabled,
-  onEmbeddedGitResizeStart,
-  onGitPaneResizeStart,
+  onBarBoundaryResizeStart,
+  onBarResizeStart,
   onMeasure,
   onPaneActivate,
   onSeparatorDrag,
   onSeparatorDragEnd,
   onSeparatorDragStart,
-  onSidebarResizeStart,
   onSplitResize,
   onTerminalClick,
   onTerminalDrag,
@@ -345,35 +343,28 @@ 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 gitPaneMode = useAppStore((s) => s.gitPane.mode)
-  const gitPaneVisible = useAppStore((s) => s.gitPane.visible)
-  const gitPanePosition = useAppStore((s) => s.gitPane.position)
-  const gitPaneRatio = useAppStore((s) => s.gitPane.paneRatio)
-  const sidebarWidth = useAppStore((s) => s.sidebar.width)
-  const sidebarVisible = useAppStore((s) => s.sidebar.visible)
+  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 gitPaneInPaneOnLeft = gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === '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)
 
-  const handleSidebarEdgeResize = useCallback(
+  // 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.
+  const handleLeftBarEdgeResize = useCallback(
     (event: MouseEvent): boolean => {
-      onSidebarResizeStart?.({ initialWidth: sidebarWidth, screenStart: event.x })
+      onBarResizeStart?.({ initialWidth: leftBarWidth, screenStart: event.x, side: 'left' })
       return true
     },
-    [onSidebarResizeStart, sidebarWidth]
+    [leftBarWidth, onBarResizeStart]
   )
   const handleTerminalLeftEdgeMouseDown =
-    sidebarVisible && !gitPaneInPaneOnLeft && onSidebarResizeStart
-      ? handleSidebarEdgeResize
-      : undefined
+    leftBarWidth > 0 && onBarResizeStart ? handleLeftBarEdgeResize : undefined
 
   const handleRootMouseDrag = useCallback(
     (event: MouseEvent) => {
@@ -415,66 +406,53 @@ 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}>
-        <Sidebar
-          onEmbeddedGitResizeStart={onEmbeddedGitResizeStart}
+        <Bar
+          side="left"
+          onBoundaryResizeStart={onBarBoundaryResizeStart}
+          onEdgeResizeStart={onBarResizeStart}
           onResizeDrag={onSeparatorDrag}
           onResizeDragEnd={onSeparatorDragEnd}
         />
         <box flexDirection="column" flexGrow={1}>
           <TopTabBar />
           <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
-            {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left' ? (
-              <GitPaneInPaneMode
-                position="left"
-                ratio={gitPaneRatio}
-                onGitPaneResizeStart={onGitPaneResizeStart}
-              />
-            ) : null}
             {activeTree && activeTree.type === 'split' ? (
               <SplitLayout
                 node={activeTree}
@@ -517,93 +495,49 @@ export function RootView({
                 onMeasure={onMeasure}
               />
             )}
-            {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'right' ? (
-              <GitPaneInPaneMode
-                position="right"
-                ratio={gitPaneRatio}
-                onGitPaneResizeStart={onGitPaneResizeStart}
-              />
-            ) : null}
           </box>
         </box>
+        <Bar
+          side="right"
+          onBoundaryResizeStart={onBarBoundaryResizeStart}
+          onEdgeResizeStart={onBarResizeStart}
+          onResizeDrag={onSeparatorDrag}
+          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>
   )
 }
-
-function GitPaneInPaneMode({
-  onGitPaneResizeStart,
-  position,
-  ratio,
-}: {
-  ratio: number
-  position: 'left' | 'right'
-  onGitPaneResizeStart?: (info: {
-    initialWidth: number
-    screenStart: number
-    side: 'left' | 'right'
-  }) => void
-}) {
-  const tokens = useTheme()
-  const bg = tokens.backgroundPanel
-  const gitPane = useAppStore((s) => s.gitPane)
-  const width = getGitPaneWidthFromRatio(ratio)
-  const contentWidth = Math.max(1, width - 1)
-  const gitPaneMenu = buildGitPaneContextMenu(
-    gitPane,
-    () => dispatchGlobal({ type: 'toggle-git-pane' }),
-    (mode, nextPosition) => {
-      dispatchGlobal({ mode, type: 'set-git-pane-mode' })
-      dispatchGlobal({ position: nextPosition, type: 'set-git-pane-position' })
-    }
-  )
-  const handleResizeMouseDown = useCallback(
-    (event: MouseEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-      onGitPaneResizeStart?.({ initialWidth: width, screenStart: event.x, side: position })
-    },
-    [onGitPaneResizeStart, position, width]
-  )
-  const handle = (
-    <box
-      width={1}
-      flexShrink={0}
-      backgroundColor={tokens.border}
-      onMouseDown={handleResizeMouseDown}
-    />
-  )
-  return (
-    <box flexDirection="column" width={width} flexShrink={0} backgroundColor={bg} overflow="hidden">
-      <box flexDirection="row" flexGrow={1} overflow="hidden">
-        {position === 'right' ? handle : null}
-        <ContextMenuBox
-          width={contentWidth}
-          flexGrow={1}
-          overflow="hidden"
-          rightClickMenu={gitPaneMenu}
-        >
-          <GitPaneWidget pollingEnabled />
-        </ContextMenuBox>
-        {position === 'left' ? handle : null}
-      </box>
-    </box>
-  )
-}