@brimveyn/aimux 1.20.4 → 1.22.0

package/src/ui/components/layout/sidebar/tab-item.tsx

@@ -16,8 +16,8 @@ interface TabItemProps {
   active: boolean
   focused: boolean
   inLayout?: boolean
-  /** When set, this tab's worktree can be moved — adds a "Move worktree" entry. */
-  moveWorktreeId?: string
+  /** When set, this tab's workspace can be moved — adds a "Move workspace" entry. */
+  moveWorkspaceId?: string
   /** 1-based position in the visible tab list — rendered as `[N]` and matches Leader+N. */
   indexLabel?: string
   /** Render the close × unconditionally instead of only on hover. */
@@ -57,11 +57,11 @@ function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean)
 
 function BusyGlyph() {
   const t = useTheme()
-  const frame = useBusySpinner()
+  const spinner = useBusySpinner()
   return (
     <text fg={t.primary} selectable={false}>
       {' '}
-      {frame}
+      {spinner}
     </text>
   )
 }
@@ -78,6 +78,8 @@ function WaitingGlyph() {
 
 function ActivityGlyph({ tab }: { tab: TabSession }) {
   const t = useTheme()
+  // No sprite here on purpose: a tab is one line, and a sprite placed at a
+  // second size would give a cell two images it could resolve to.
   if (tab.status === 'error') {
     return (
       <text fg={t.error} selectable={false}>
@@ -104,7 +106,10 @@ function ActivityGlyph({ tab }: { tab: TabSession }) {
     return <WaitingGlyph />
   }
 
-  if (tab.activity === 'idle') {
+  // The tab that rang. There is deliberately no glyph for a plain idle tab:
+  // "not busy" is the resting state of every tab you are not watching, and a
+  // dot that is always on cannot also mean "read this one".
+  if (tab.unseen === true) {
     return (
       <text fg={t.success} selectable={false}>
         {' '}
@@ -113,6 +118,16 @@ function ActivityGlyph({ tab }: { tab: TabSession }) {
     )
   }
 
+  if (tab.activity === 'idle') {
+    // Blank, but the same width as every other state — a tab must not resize
+    // when its agent stops.
+    return (
+      <text fg={t.textMuted} selectable={false}>
+        {'  '}
+      </text>
+    )
+  }
+
   return (
     <text fg={getStatusColor(tab.status)} selectable={false}>
       {' '}
@@ -128,7 +143,7 @@ export function TabItem({
   id,
   indexLabel,
   inLayout,
-  moveWorktreeId,
+  moveWorkspaceId,
   tab,
 }: TabItemProps) {
   const t = useTheme()
@@ -167,22 +182,22 @@ export function TabItem({
           dispatchGlobal({ delta: 1, type: 'reorder-active-tab' })
         },
       ],
-      ...(moveWorktreeId != null && moveWorktreeId !== ''
+      ...(moveWorkspaceId != null && moveWorkspaceId !== ''
         ? [
             [
-              'Move worktree',
+              'Move workspace',
               () => {
                 dispatchGlobal({
-                  sourceWorktreeId: moveWorktreeId,
-                  type: 'open-worktree-move-modal',
+                  sourceWorkspaceId: moveWorkspaceId,
+                  type: 'open-workspace-move-modal',
                 })
-                runSideEffectGlobal({ type: 'load-worktree-move-stats' })
+                runSideEffectGlobal({ type: 'load-workspace-move-stats' })
               },
             ] as [string, () => void],
           ]
         : []),
     ],
-    [moveWorktreeId, tab.id]
+    [moveWorkspaceId, tab.id]
   )
   const handleMouseOver = useCallback(() => setHovered(true), [])
   const handleMouseOut = useCallback(() => setHovered(false), [])

package/src/ui/components/layout/sidebar/use-sidebar-auto-scroll.ts

@@ -5,7 +5,7 @@ import { useEffect } from 'react'
 interface Options {
   scrollRef: React.RefObject<ScrollBoxRenderable | null>
   visible: boolean
-  /** Full id of the active row to bring into view (workspace OR worktree). */
+  /** Full id of the active row to bring into view (project OR workspace). */
   activeRowId: string | null
 }
 

package/src/ui/components/layout/sidebar/workspace-row.tsx

@@ -0,0 +1,253 @@
+import { type MouseEvent as OtuiMouseEvent, TextAttributes } from '@opentui/core'
+import { memo, useCallback, useMemo } from 'react'
+
+import type { ProjectRecord, WorkspaceActivity, WorkspaceRecord } from '../../../../state/types'
+import type { SpriteState } from '../../../terminal-graphics/sprites'
+
+import { useAppStore } from '../../../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { formatDiffStat } from '../../../../state/project-workspaces'
+// eslint-disable-next-line no-duplicate-imports
+import { IDLE_WORKSPACE_ACTIVITY } from '../../../../state/types'
+import { useActivitySprite } from '../../../hooks/use-activity-sprite'
+import { useBusySpinner } from '../../../hooks/use-busy-spinner'
+// eslint-disable-next-line no-duplicate-imports
+import { SPRITE_COLS } from '../../../terminal-graphics/sprites'
+import { useBaseTheme, useTheme } from '../../../theme'
+import { truncate } from '../../../truncate'
+import { FlashLabelBadge } from '../../flash/flash-label-badge'
+import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
+
+/** Same priority as the glyphs below, so a sprite says what the glyph would. */
+function spriteStateFor(activity: WorkspaceActivity): SpriteState {
+  if (activity.waiting) return 'waiting'
+  if (activity.working) return 'working'
+  if (activity.done) return 'done'
+  return 'idle'
+}
+
+interface WorkspaceRowProps {
+  project: ProjectRecord
+  workspace: WorkspaceRecord
+  /** 1-based index of the project in the visible order (for switch-project-by-index). */
+  projectIndex: number
+  /** True when this row is the active cursor item. */
+  isActiveItem: boolean
+  /** True when this row's project is the current project (selection scope). */
+  inCurrentGroup: boolean
+  contentWidth: number
+}
+
+export const WorkspaceRow = memo(function WorkspaceRow({
+  contentWidth,
+  inCurrentGroup,
+  isActiveItem,
+  project,
+  projectIndex,
+  workspace,
+}: WorkspaceRowProps) {
+  const t = useTheme()
+  // Selection highlight must stay opaque in transparent mode.
+  const base = useBaseTheme()
+  const currentProjectId = useAppStore((s) => s.currentProjectId)
+  const isCurrentProject = project.id === currentProjectId
+  const divergence = useAppStore((s) => s.workspaceDivergence[workspace.id])
+  const activity = useAppStore((s) => s.workspaceActivity[workspace.id]) ?? IDLE_WORKSPACE_ACTIVITY
+  // A sprite is placed across the two lines of the row, so only a row that has
+  // both — the branch line under the name — can carry one. A branchless checkout
+  // keeps the text marker rather than getting a second placement geometry of its
+  // own: one shape is what keeps a cell from resolving to the wrong image.
+  const hasBranch = workspace.branch != null && workspace.branch !== ''
+  const sprite = useActivitySprite(hasBranch ? spriteStateFor(activity) : null)
+  // Only the working case animates, so the timer is off for every other row —
+  // and off entirely when a sprite is drawing this row instead.
+  const spinner = useBusySpinner(activity.working && sprite === null)
+
+  const handleMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      if (event.button !== 0) return
+      event.preventDefault()
+      event.stopPropagation()
+      if (isCurrentProject) {
+        dispatchGlobal({
+          projectId: project.id,
+          type: 'set-active-workspace',
+          workspaceId: workspace.id,
+        })
+        return
+      }
+      // Cross-project click: send the workspace id along with the switch so
+      // the side effect can apply it atomically. Splitting it into a separate
+      // dispatch+switch leaves a window where subscribers/re-renders can
+      // re-assert the target project's last-persisted workspace.
+      runSideEffectGlobal({
+        index: projectIndex,
+        type: 'switch-project-by-index',
+        workspaceId: workspace.id,
+      })
+    },
+    [isCurrentProject, project.id, projectIndex, workspace.id]
+  )
+
+  const rightClickMenu = useMemo<[string, () => void][] | undefined>(() => {
+    const entries: [string, () => void][] = [
+      [
+        'Rename',
+        () =>
+          dispatchGlobal({
+            initialName: workspace.name,
+            projectId: project.id,
+            type: 'open-rename-workspace-modal',
+            workspaceId: workspace.id,
+          }),
+      ],
+    ]
+    if (workspace.source !== 'primary') {
+      entries.push([
+        'Remove workspace',
+        () =>
+          // Always confirm first. Confirming routes through the full delete side
+          // effect (closes the workspace's tabs, disposes their PTYs, prunes the
+          // snapshot, removes the git worktree). closeTabs (not force) cleans up
+          // the tabs while keeping the non-force `git worktree remove`, so
+          // uncommitted work in a temp workspace is still protected — a dirty
+          // workspace re-prompts for an explicit force-delete.
+          dispatchGlobal({
+            closeTabs: true,
+            force: false,
+            projectId: project.id,
+            reason: 'Its assistant tabs will be closed and the worktree removed.',
+            type: 'open-workspace-delete-confirm',
+            workspaceId: workspace.id,
+            workspaceLabel: workspace.branch ?? workspace.name,
+          }),
+      ])
+    }
+    return entries
+  }, [project.id, workspace.branch, workspace.id, workspace.name, workspace.source])
+
+  let bgColor: string | undefined
+  if (isActiveItem) {
+    bgColor = base.backgroundElement
+  } else if (inCurrentGroup) {
+    bgColor = base.backgroundPanel
+  }
+  // The cursor: a full-height accent bar down the left of the row, both lines
+  // of it. The background alone is one step of grey and gets lost among rows
+  // that carry colour of their own; a bar the height of the row is found
+  // without reading anything.
+  const cursorGlyph = isActiveItem ? '▌' : ' '
+
+  // The marker slot: two cells of text, or the wider box a sprite needs. The
+  // bundled set covers every state, so with sprites on, every two-line row uses
+  // the same width whatever its state — only a branchless row keeps the narrow
+  // slot, and its name sits one cell left of its siblings'. Accepted: the
+  // alternative is a second placement geometry, which is what mis-sized every
+  // sprite in the first place.
+  const markerCells = sprite === null ? 2 : SPRITE_COLS
+
+  const { added, removed } = formatDiffStat(divergence)
+  const statWidth = added.length + removed.length + (added !== '' && removed !== '' ? 1 : 0)
+  const nameLabel = truncate(
+    workspace.name,
+    Math.max(0, contentWidth - 2 - markerCells - (statWidth > 0 ? statWidth + 1 : 0))
+  )
+  // Second line, hanging under the name, and where the branch glyph lives — it
+  // labels the branch, not the workspace. Only workspaces that own a branch get
+  // one — an external checkout without one would otherwise be a row of a
+  // different height for no information.
+  // The glyph starts where the name above it starts, so the branch hangs one
+  // glyph-width in from it — the row reads as a title with a labelled line
+  // under it, not as two columns.
+  const branchLabel = !hasBranch
+    ? null
+    : truncate(workspace.branch ?? '', Math.max(0, contentWidth - 4 - markerCells))
+
+  // Same vocabulary as the project heading one level up, in the same priority:
+  // a question outranks work in progress, which outranks "it finished and you
+  // haven't looked". A space when there is nothing to say — the row keeps its
+  // width either way, so nothing shifts.
+  // Every text marker is two cells, the glyph and the gap after it, so nothing
+  // shifts when an agent starts or stops. The sprite is the one exception and
+  // carries its own width — see markerCells above.
+  let statusGlyph = '  '
+  let statusColor = t.textMuted
+  if (sprite) {
+    statusGlyph = sprite.glyphs[0] ?? '  '
+    statusColor = sprite.fg
+  } else if (activity.waiting) {
+    statusGlyph = '? '
+    statusColor = t.warning
+  } else if (activity.working) {
+    statusGlyph = `${spinner} `
+    statusColor = t.primary
+  } else if (activity.done) {
+    statusGlyph = '● '
+    statusColor = t.success
+  }
+
+  return (
+    <ContextMenuBox
+      id={`sidebar-wt-${workspace.id}`}
+      flexDirection="column"
+      flexShrink={0}
+      paddingRight={1}
+      backgroundColor={bgColor}
+      rightClickMenu={rightClickMenu}
+      onMouseDown={handleMouseDown}
+    >
+      <box flexDirection="row" alignItems="center">
+        <text fg={t.primary} selectable={false} wrapMode="none">
+          {cursorGlyph}
+        </text>
+        <text fg={statusColor} selectable={false} wrapMode="none">
+          {statusGlyph}
+        </text>
+        <FlashLabelBadge rowKey={`wt:${workspace.id}`} />
+        {/* Full strength only under the cursor. Every name at full strength
+            reads as a wall of white; every name muted leaves the selected row
+            with nothing but a shade of grey to say so. */}
+        <text
+          fg={isActiveItem ? t.text : t.textMuted}
+          attributes={isActiveItem ? TextAttributes.BOLD : undefined}
+          selectable={false}
+          wrapMode="none"
+        >
+          {nameLabel}
+        </text>
+        <box flexGrow={1} flexShrink={1} />
+        {added !== '' ? (
+          <text fg={t.success} selectable={false} wrapMode="none">
+            {added}
+          </text>
+        ) : null}
+        {added !== '' && removed !== '' ? (
+          <text fg={t.textMuted} selectable={false} wrapMode="none">
+            {' '}
+          </text>
+        ) : null}
+        {removed !== '' ? (
+          <text fg={t.error} selectable={false} wrapMode="none">
+            {removed}
+          </text>
+        ) : null}
+      </box>
+      {branchLabel == null ? null : (
+        <box flexDirection="row" alignItems="center">
+          <text fg={t.primary} selectable={false} wrapMode="none">
+            {cursorGlyph}
+          </text>
+          {/* The marker slot again, so a sprite tall enough to want both lines
+              gets its bottom half. Two cells either way, which is what the
+              branch glyph has always hung off. */}
+          <text fg={statusColor} selectable={false} wrapMode="none">
+            {sprite?.glyphs[1] ?? '  '}
+          </text>
+          <text fg={t.textMuted} selectable={false} wrapMode="none">
+            {'\u{e702}'} {branchLabel}
+          </text>
+        </box>
+      )}
+    </ContextMenuBox>
+  )
+})

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

@@ -44,6 +44,8 @@ function getModeLabel(focusMode: AppState['focusMode']): string {
       return 'EDIT'
     case 'git':
       return 'GIT'
+    case 'settings':
+      return 'SET'
     case 'navigation':
     default:
       return 'NORMAL'
@@ -67,6 +69,8 @@ function getModeColor(focusMode: AppState['focusMode'], t: ResolvedTuiTheme): st
       return t.warning
     case 'git':
       return t.success
+    case 'settings':
+      return t.secondary
     case 'navigation':
     default:
       return t.text
@@ -128,7 +132,7 @@ export function StatusBar() {
   const tileX = t.backgroundElement
   const tileY = modeColor
 
-  const hasB = model.sessionSegments.length > 0
+  const hasB = model.projectSegments.length > 0
   const hasX = aiEnabled
 
   return (
@@ -161,7 +165,7 @@ export function StatusBar() {
               flexShrink={1}
               overflow="hidden"
             >
-              <Segments segments={model.sessionSegments} t={t} />
+              <Segments segments={model.projectSegments} t={t} />
             </box>
             <Separator glyph={glyphs.right} bg={tileFiller} fg={tileB} />
           </>

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

@@ -48,15 +48,15 @@ function getTitle(
   tab: TabSession | undefined,
   isActive: boolean,
   focusMode: TerminalPaneProps['focusMode'],
-  emptyContext: { workspaceName: string; worktreeName: string }
+  emptyContext: { projectName: string; workspaceName: string }
 ): string {
   if (!tab) {
-    const { workspaceName, worktreeName } = emptyContext
-    if (workspaceName === '' && worktreeName === '') return 'No active workspace'
-    if (worktreeName === '' || worktreeName === workspaceName) {
-      return `${workspaceName} · no tabs`
+    const { projectName, workspaceName } = emptyContext
+    if (projectName === '' && workspaceName === '') return 'No active project'
+    if (workspaceName === '' || workspaceName === projectName) {
+      return `${projectName} · no tabs`
     }
-    return `${workspaceName} / ${worktreeName} · no tabs`
+    return `${projectName} / ${workspaceName} · no tabs`
   }
 
   if (isActive && focusMode === 'terminal-input') {
@@ -115,7 +115,7 @@ function renderSpan(span: TerminalSpan, key: string, softCursor: boolean): React
   )
 }
 
-interface TerminalViewportProps {
+export interface TerminalViewportProps {
   viewport: TerminalSnapshot | undefined
   buffer: string
   softCursor: boolean
@@ -179,7 +179,7 @@ function useHardwareCursor(
     // Cursor state only reaches the terminal with the next rendered frame
     // (same reason opentui's editor calls requestRender() in focus/blur).
     // Without it, a hide issued while the UI is static — e.g. switching to
-    // a workspace with no live PTY — never flushes and the host cursor
+    // a project with no live PTY — never flushes and the host cursor
     // stays stranded at its old position.
     renderer.requestRender()
     // React runs all cleanups in a commit before all effects, so when focus
@@ -215,7 +215,7 @@ const pinTerminalScroll = (node: TextRenderable | null): void => {
   if (node.scrollY !== 0) node.scrollY = 0
 }
 
-const TerminalViewport = memo(function TerminalViewport({
+export const TerminalViewport = memo(function TerminalViewport({
   buffer,
   softCursor,
   viewport,
@@ -239,7 +239,7 @@ const TerminalViewport = memo(function TerminalViewport({
 
   return (
     <text ref={pinTerminalScroll} fg={t.text} wrapMode="none">
-      {buffer.length > 0 ? buffer : 'Waiting for workspace output...'}
+      {buffer.length > 0 ? buffer : 'Waiting for project output...'}
     </text>
   )
 })
@@ -279,24 +279,24 @@ export function TerminalPane({
     paneIsActive && focusMode === 'terminal-input' && tab?.status === 'running'
   )
   // These are only used when this pane is rendered without a tab (the
-  // top-level pane on a worktree with zero tabs). Selectors return plain
+  // top-level pane on a workspace with zero tabs). Selectors return plain
   // strings so re-renders are cheap and bounded to actual name changes.
-  const emptyWorkspaceName = useAppStore((s) => {
-    const id = s.currentSessionId
+  const emptyProjectName = useAppStore((s) => {
+    const id = s.currentProjectId
     if (id == null || id === '') return ''
-    return s.sessions.find((sess) => sess.id === id)?.name ?? ''
+    return s.projects.find((sess) => sess.id === id)?.name ?? ''
   })
-  const emptyWorktreeName = useAppStore((s) => {
-    const id = s.currentSessionId
+  const emptyWorkspaceName = useAppStore((s) => {
+    const id = s.currentProjectId
     if (id == null || id === '') return ''
-    const session = s.sessions.find((sess) => sess.id === id)
-    if (!session) return ''
+    const project = s.projects.find((sess) => sess.id === id)
+    if (!project) return ''
     const activeId =
-      session.activeWorktreeId != null && session.activeWorktreeId !== ''
-        ? session.activeWorktreeId
-        : session.worktrees?.[0]?.id
+      project.activeWorkspaceId != null && project.activeWorkspaceId !== ''
+        ? project.activeWorkspaceId
+        : project.workspaces?.[0]?.id
     if (activeId == null || activeId === '') return ''
-    return session.worktrees?.find((w) => w.id === activeId)?.name ?? ''
+    return project.workspaces?.find((w) => w.id === activeId)?.name ?? ''
   })
   const canForwardMouse = focusMode === 'terminal-input' && !!tab && mouseForwardingEnabled
   const canUseLocalScrollback = focusMode === 'terminal-input' && !!tab && localScrollbackEnabled
@@ -510,7 +510,9 @@ export function TerminalPane({
   )
   const handleNoTabMouseDown = useCallback((event: OtuiMouseEvent) => {
     event.stopPropagation()
-    dispatchGlobal({ type: 'open-new-tab-modal' })
+    // Opens the picker, or the create-workspace modal when there is no
+    // workspace to put a tab in — the effect owns that rule.
+    runSideEffectGlobal({ type: 'open-new-tab' })
   }, [])
   const handleContentMouseDown = useCallback(
     (e: OtuiMouseEvent) => {
@@ -525,8 +527,8 @@ export function TerminalPane({
         border
         borderColor={getBorderColor(paneIsActive, focusMode)}
         title={getTitle(tab, paneIsActive, focusMode, {
+          projectName: emptyProjectName,
           workspaceName: emptyWorkspaceName,
-          worktreeName: emptyWorktreeName,
         })}
         padding={0}
         flexDirection="column"
@@ -542,19 +544,22 @@ export function TerminalPane({
           <box flexGrow={1} justifyContent="center" alignItems="center" flexDirection="column">
             <text fg={t.textMuted}>· · ·</text>
             <text fg={t.textMuted}> </text>
-            {emptyWorkspaceName !== '' ? (
+            {emptyProjectName !== '' ? (
               <box flexDirection="row">
-                <text fg={t.text}>{emptyWorkspaceName}</text>
-                {emptyWorktreeName !== '' && emptyWorktreeName !== emptyWorkspaceName ? (
+                <text fg={t.text}>{emptyProjectName}</text>
+                {emptyWorkspaceName !== '' && emptyWorkspaceName !== emptyProjectName ? (
                   <>
                     <text fg={t.textMuted}> / </text>
-                    <text fg={t.text}>{emptyWorktreeName}</text>
+                    <text fg={t.text}>{emptyWorkspaceName}</text>
                   </>
                 ) : null}
               </box>
             ) : null}
             <text fg={t.textMuted}>has no tabs</text>
             <text fg={t.textMuted}> </text>
+            {/* Keep this at a fixed row count: adding a line shifts everything
+                under a centred column, and the vacated cells are not repainted
+                — the old text bleeds through the new spaces. */}
             <box flexDirection="row">
               <text fg={t.textMuted}>Press </text>
               <text fg={t.primary}>Ctrl+n</text>
@@ -598,7 +603,7 @@ export function TerminalPane({
         // re-introducing the shifted-content / dead-row bug.
         <box position="absolute" bottom={0} left={0} backgroundColor={editorBg}>
           {tab?.status === 'disconnected' ? (
-            <text fg={t.warning}>Restored snapshot. Press Ctrl+r to restart this workspace.</text>
+            <text fg={t.warning}>Restored snapshot. Press Ctrl+r to restart this project.</text>
           ) : null}
           {tab?.errorMessage != null && tab?.errorMessage !== '' ? (
             <text fg={t.error}>{tab.errorMessage}</text>