@brimveyn/aimux 1.14.0 → 1.14.1

package/src/ui/root.tsx

@@ -13,6 +13,7 @@ import type {
 } from '../state/types'
 import type { ThemeId } from './themes'
 
+import { useWorktreeBranchPolling } from '../git/worktree-branch-poller'
 import { useAppStore } from '../state/app-store'
 import { dispatchGlobal } from '../state/dispatch-ref'
 import { getGitPaneWidthFromRatio } from '../state/git-pane-sizing'
@@ -20,11 +21,11 @@ import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout
 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 { SessionBar } from './components/layout/session-bar'
 import { Sidebar } from './components/layout/sidebar/sidebar'
 import { SplitLayout } from './components/layout/split-layout'
 import { StatusBar } from './components/layout/status-bar'
 import { TerminalPane } from './components/layout/terminal-pane'
+import { TopTabBar } from './components/layout/top-tab-bar'
 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'
@@ -315,7 +316,6 @@ export function RootView({
   const sessions = useAppStore((s) => s.sessions)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const worktreeDivergence = useAppStore((s) => s.worktreeDivergence)
-  const sessionBarPosition = useAppStore((s) => s.sessionBar.position)
   const gitPaneMode = useAppStore((s) => s.gitPane.mode)
   const gitPaneVisible = useAppStore((s) => s.gitPane.visible)
   const gitPanePosition = useAppStore((s) => s.gitPane.position)
@@ -326,6 +326,10 @@ export function RootView({
   const gitPaneInPaneOnLeft = gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left'
   const splitChrome = PANE_BORDER * 2
 
+  // Keep every worktree's `branch` in state synchronized with the on-disk
+  // HEAD so the sidebar (and divergence calc) never reads a stale value.
+  useWorktreeBranchPolling(true)
+
   const handleSidebarEdgeResize = useCallback(
     (event: MouseEvent): boolean => {
       onSidebarResizeStart?.({ initialWidth: sidebarWidth, screenStart: event.x })
@@ -389,9 +393,8 @@ export function RootView({
   if (inGitMode) {
     return (
       <box flexDirection="column" width="100%" height="100%" backgroundColor={editorBg}>
-        {sessionBarPosition === 'top' && <SessionBar forceVisible />}
+        <TopTabBar forceVisible />
         <GitView themeId={themeId} />
-        {sessionBarPosition === 'bottom' && <SessionBar forceVisible />}
         <StatusBar />
         <PendingChordOverlay />
         <ContextMenuOverlay />
@@ -422,72 +425,74 @@ export function RootView({
       onMouseDrag={handleRootMouseDrag}
       onMouseUp={handleRootMouseUp}
     >
-      {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
         <Sidebar
-          onTabActivate={onPaneActivate}
           onEmbeddedGitResizeStart={onEmbeddedGitResizeStart}
           onResizeDrag={onSeparatorDrag}
           onResizeDragEnd={onSeparatorDragEnd}
         />
-        {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'left' ? (
-          <GitPaneInPaneMode
-            position="left"
-            ratio={gitPaneRatio}
-            onGitPaneResizeStart={onGitPaneResizeStart}
-          />
-        ) : null}
-        {activeTree && activeTree.type === 'split' ? (
-          <SplitLayout
-            node={activeTree}
-            tabs={tabs}
-            activeTabId={activeTabId}
-            focusMode={focusMode}
-            contentOrigin={splitContentOrigin}
-            mouseForwardingEnabled={mouseForwardingEnabled}
-            localScrollbackEnabled={localScrollbackEnabled}
-            onTerminalMouseEvent={onTerminalMouseEvent}
-            onTerminalScrollEvent={onTerminalScrollEvent}
-            onTerminalClick={onTerminalClick}
-            onTerminalDrag={onTerminalDrag}
-            onTerminalMouseUp={onTerminalMouseUp}
-            onPaneActivate={onPaneActivate}
-            onSplitResize={onSplitResize}
-            onSeparatorDragStart={onSeparatorDragStart}
-            onSeparatorDrag={onSeparatorDrag}
-            onSeparatorDragEnd={onSeparatorDragEnd}
-            onLeftEdgeMouseDown={handleTerminalLeftEdgeMouseDown}
-            onMeasure={onMeasure}
-            bounds={splitBounds}
-          />
-        ) : (
-          <TerminalPane
-            tab={activeTab}
-            tabId={activeTabId ?? undefined}
-            isActive
-            focusMode={focusMode}
-            contentOrigin={contentOrigin}
-            mouseForwardingEnabled={mouseForwardingEnabled}
-            localScrollbackEnabled={localScrollbackEnabled}
-            onTerminalMouseEvent={onTerminalMouseEvent}
-            onTerminalScrollEvent={onTerminalScrollEvent}
-            onTerminalClick={onTerminalClick}
-            onTerminalDrag={onTerminalDrag}
-            onTerminalMouseUp={onTerminalMouseUp}
-            onPaneActivate={onPaneActivate}
-            onLeftEdgeMouseDown={handleTerminalLeftEdgeMouseDown}
-            onMeasure={onMeasure}
-          />
-        )}
-        {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'right' ? (
-          <GitPaneInPaneMode
-            position="right"
-            ratio={gitPaneRatio}
-            onGitPaneResizeStart={onGitPaneResizeStart}
-          />
-        ) : null}
+        <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}
+                tabs={tabs}
+                activeTabId={activeTabId}
+                focusMode={focusMode}
+                contentOrigin={splitContentOrigin}
+                mouseForwardingEnabled={mouseForwardingEnabled}
+                localScrollbackEnabled={localScrollbackEnabled}
+                onTerminalMouseEvent={onTerminalMouseEvent}
+                onTerminalScrollEvent={onTerminalScrollEvent}
+                onTerminalClick={onTerminalClick}
+                onTerminalDrag={onTerminalDrag}
+                onTerminalMouseUp={onTerminalMouseUp}
+                onPaneActivate={onPaneActivate}
+                onSplitResize={onSplitResize}
+                onSeparatorDragStart={onSeparatorDragStart}
+                onSeparatorDrag={onSeparatorDrag}
+                onSeparatorDragEnd={onSeparatorDragEnd}
+                onLeftEdgeMouseDown={handleTerminalLeftEdgeMouseDown}
+                onMeasure={onMeasure}
+                bounds={splitBounds}
+              />
+            ) : (
+              <TerminalPane
+                tab={activeTab}
+                tabId={activeTabId ?? undefined}
+                isActive
+                focusMode={focusMode}
+                contentOrigin={contentOrigin}
+                mouseForwardingEnabled={mouseForwardingEnabled}
+                localScrollbackEnabled={localScrollbackEnabled}
+                onTerminalMouseEvent={onTerminalMouseEvent}
+                onTerminalScrollEvent={onTerminalScrollEvent}
+                onTerminalClick={onTerminalClick}
+                onTerminalDrag={onTerminalDrag}
+                onTerminalMouseUp={onTerminalMouseUp}
+                onPaneActivate={onPaneActivate}
+                onLeftEdgeMouseDown={handleTerminalLeftEdgeMouseDown}
+                onMeasure={onMeasure}
+              />
+            )}
+            {gitPaneMode === 'pane' && gitPaneVisible && gitPanePosition === 'right' ? (
+              <GitPaneInPaneMode
+                position="right"
+                ratio={gitPaneRatio}
+                onGitPaneResizeStart={onGitPaneResizeStart}
+              />
+            ) : null}
+          </box>
+        </box>
       </box>
-      {sessionBarPosition === 'bottom' && <SessionBar />}
       <StatusBar />
       <PendingChordOverlay />
       <ContextMenuOverlay />

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

@@ -1,296 +0,0 @@
-import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
-
-import { memo, useCallback, useMemo, useRef, useState } from 'react'
-
-import type { SessionRecord, SessionStatus } from '../../../state/types'
-
-import { useAppStore } from '../../../state/app-store'
-import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
-// eslint-disable-next-line no-duplicate-imports
-import { IDLE_SESSION_STATUS } from '../../../state/types'
-import { useBusySpinner } from '../../hooks/use-busy-spinner'
-import { moveIdToIdPosition, orderSessionsForDisplay } from '../../session-ordering'
-import { useTheme } from '../../theme'
-import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
-
-interface SessionBarProps {
-  forceVisible?: boolean
-}
-
-export function SessionBar({ forceVisible = false }: SessionBarProps) {
-  const t = useTheme()
-  const headerBg = t.backgroundPanel
-  const sessions = useAppStore((s) => s.sessions)
-  const currentId = useAppStore((s) => s.currentSessionId)
-  const bar = useAppStore((s) => s.sessionBar)
-  const statusMap = useAppStore((s) => s.sessionStatuses)
-
-  const [draggingId, setDraggingId] = useState<string | null>(null)
-  const [dragOrder, setDragOrder] = useState<string[] | null>(null)
-  const lastSwapWithRef = useRef<string | null>(null)
-  const chipRefs = useRef(new Map<string, BoxRenderable>())
-
-  const ordered = useMemo(() => orderSessionsForDisplay(sessions), [sessions])
-  const baselineOrder = useMemo(() => ordered.map((s) => s.id), [ordered])
-
-  const setChipRef = useCallback((id: string, ref: BoxRenderable | null): void => {
-    if (ref) chipRefs.current.set(id, ref)
-    else chipRefs.current.delete(id)
-  }, [])
-
-  const findChipAtX = useCallback((x: number): string | null => {
-    for (const [id, ref] of chipRefs.current) {
-      if (x >= ref.x && x < ref.x + ref.width) return id
-    }
-    return null
-  }, [])
-
-  const handleMouseDown = useCallback(
-    (id: string) => {
-      setDraggingId(id)
-      setDragOrder(baselineOrder)
-      lastSwapWithRef.current = null
-    },
-    [baselineOrder]
-  )
-
-  const handleMouseDrag = useCallback(
-    (event: OtuiMouseEvent) => {
-      if (!(draggingId != null && draggingId !== '')) return
-      const hit = findChipAtX(event.x)
-      if (hit === null) {
-        lastSwapWithRef.current = null
-        return
-      }
-      if (hit === draggingId) {
-        lastSwapWithRef.current = null
-        return
-      }
-      if (hit === lastSwapWithRef.current) return
-      setDragOrder((prev) => (prev ? moveIdToIdPosition(prev, draggingId, hit) : prev))
-      lastSwapWithRef.current = hit
-    },
-    [draggingId, findChipAtX]
-  )
-
-  const commitDrop = useCallback(() => {
-    const source = draggingId
-    const finalOrder = dragOrder
-    setDraggingId(null)
-    setDragOrder(null)
-    lastSwapWithRef.current = null
-
-    if (source == null || source === '' || !finalOrder) return
-
-    const changed = !arraysEqual(finalOrder, baselineOrder)
-    if (changed) {
-      dispatchGlobal({ orderedIds: finalOrder, type: 'reorder-sessions' })
-      return
-    }
-
-    const idx = baselineOrder.indexOf(source)
-    if (idx >= 0) {
-      runSideEffectGlobal({ index: idx + 1, type: 'switch-session-by-index' })
-    }
-  }, [baselineOrder, dragOrder, draggingId])
-
-  const cancelDrag = useCallback(() => {
-    setDraggingId(null)
-    setDragOrder(null)
-    lastSwapWithRef.current = null
-  }, [])
-
-  const handleNewSession = useCallback((e: OtuiMouseEvent) => {
-    e.stopPropagation()
-    dispatchGlobal({ returnToSessionPicker: false, type: 'open-create-session-modal' })
-  }, [])
-
-  if ((!bar.visible && !forceVisible) || ordered.length === 0) return null
-
-  const visibleSessions =
-    dragOrder !== null
-      ? dragOrder
-          .map((id) => ordered.find((s) => s.id === id))
-          .filter((s): s is SessionRecord => !!s)
-      : ordered
-
-  return (
-    <box
-      width="100%"
-      flexDirection="row"
-      flexShrink={0}
-      paddingLeft={1}
-      paddingRight={1}
-      backgroundColor={headerBg}
-    >
-      {visibleSessions.map((session) => (
-        <SessionChip
-          key={session.id}
-          session={session}
-          index={baselineOrder.indexOf(session.id) + 1}
-          active={session.id === currentId}
-          status={statusMap[session.id] ?? IDLE_SESSION_STATUS}
-          dragging={draggingId === session.id}
-          setChipRef={setChipRef}
-          onDragStart={handleMouseDown}
-          onDrag={handleMouseDrag}
-          onDrop={commitDrop}
-          onDragCancel={cancelDrag}
-        />
-      ))}
-      <box flexGrow={1} />
-      <box
-        flexDirection="row"
-        paddingLeft={1}
-        paddingRight={1}
-        backgroundColor={t.backgroundElement}
-        onMouseDown={handleNewSession}
-      >
-        <text fg={t.text} selectable={false}>
-          + New
-        </text>
-      </box>
-    </box>
-  )
-}
-
-function arraysEqual(a: string[], b: string[]): boolean {
-  if (a.length !== b.length) return false
-  for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) return false
-  }
-  return true
-}
-
-interface SessionChipProps {
-  session: SessionRecord
-  index: number
-  active: boolean
-  status: SessionStatus
-  dragging: boolean
-  setChipRef: (id: string, ref: BoxRenderable | null) => void
-  onDragStart: (id: string) => void
-  onDrag: (event: OtuiMouseEvent) => void
-  onDrop: () => void
-  onDragCancel: () => void
-}
-
-const SessionChip = memo(function SessionChip({
-  active,
-  dragging,
-  index,
-  onDrag,
-  onDragCancel,
-  onDragStart,
-  onDrop,
-  session,
-  setChipRef,
-  status,
-}: SessionChipProps) {
-  const t = useTheme()
-  const selectionBg = t.backgroundElement
-  const showSpinner = status.working
-  const showWaiting = status.waiting
-  const spinner = useBusySpinner(showSpinner)
-  const labelColor = active ? t.text : t.textMuted
-  const bgColor = dragging || active ? selectionBg : undefined
-  const idleColor = t.success
-  const workingColor = t.primary
-  const waitingColor = t.warning
-  const [hovered, setHovered] = useState(false)
-
-  const handleRef = useCallback(
-    (r: BoxRenderable | null) => setChipRef(session.id, r),
-    [setChipRef, session.id]
-  )
-  const handleMouseDown = useCallback(
-    (e: OtuiMouseEvent) => {
-      e.preventDefault()
-      onDragStart(session.id)
-    },
-    [onDragStart, session.id]
-  )
-  const handleMouseUp = useCallback(
-    (e: OtuiMouseEvent) => {
-      e.preventDefault()
-      onDrop()
-    },
-    [onDrop]
-  )
-  const handleMouseOver = useCallback(() => setHovered(true), [])
-  const handleMouseOut = useCallback(() => setHovered(false), [])
-  const handleDeleteMouseDown = useCallback(
-    (event: OtuiMouseEvent) => {
-      event.preventDefault()
-      event.stopPropagation()
-      runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' })
-    },
-    [session.id]
-  )
-  const rightClickMenu = useMemo<[string, () => void][]>(
-    () => [
-      [
-        'Rename workspace',
-        () =>
-          dispatchGlobal({
-            initialName: session.name,
-            returnToSessionPicker: false,
-            sessionTargetId: session.id,
-            type: 'open-session-name-modal',
-          }),
-      ],
-      [
-        'Delete workspace',
-        () => runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' }),
-      ],
-    ],
-    [session.id, session.name]
-  )
-
-  return (
-    <ContextMenuBox
-      ref={handleRef}
-      flexDirection="row"
-      paddingLeft={1}
-      paddingRight={1}
-      backgroundColor={bgColor}
-      rightClickMenu={rightClickMenu}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
-      onMouseDown={handleMouseDown}
-      onMouseDrag={onDrag}
-      onMouseUp={handleMouseUp}
-      onMouseDragEnd={onDragCancel}
-    >
-      {showWaiting ? (
-        <text fg={waitingColor} selectable={false}>
-          ?{' '}
-        </text>
-      ) : null}
-      {showSpinner ? (
-        <text fg={workingColor} selectable={false}>
-          {spinner}{' '}
-        </text>
-      ) : null}
-      {!showWaiting && !showSpinner ? (
-        <text fg={active ? workingColor : idleColor} selectable={false}>
-          {'● '}
-        </text>
-      ) : null}
-      <text fg={labelColor} selectable={false}>
-        [{index}] {session.name}
-      </text>
-      {hovered ? (
-        <box paddingLeft={1} onMouseDown={handleDeleteMouseDown}>
-          <text fg={t.textMuted} selectable={false}>
-            ×
-          </text>
-        </box>
-      ) : (
-        <text fg={t.textMuted} selectable={false}>
-          {' '}
-        </text>
-      )}
-    </ContextMenuBox>
-  )
-})

package/src/ui/components/layout/sidebar/sidebar-group-metadata.ts

@@ -1,44 +0,0 @@
-import type { TabSession } from '../../../../state/types'
-
-import { allLeafIds, type LayoutNode } from '../../../../state/layout-tree'
-
-export interface TabGroupInfo {
-  inLayout: boolean
-  groupStart: number
-  groupEnd: number
-}
-
-export function buildTabGroupInfo(
-  layoutTrees: Record<string, LayoutNode>,
-  tabs: TabSession[]
-): Map<string, TabGroupInfo> {
-  const tabGroupInfo = new Map<string, TabGroupInfo>()
-
-  for (const tree of Object.values(layoutTrees)) {
-    const ids = allLeafIds(tree)
-    if (ids.length <= 1) {
-      continue
-    }
-
-    const idSet = new Set(ids)
-    let groupStart = -1
-    let groupEnd = -1
-
-    for (const [index, tab] of tabs.entries()) {
-      if (!idSet.has(tab.id)) {
-        continue
-      }
-
-      if (groupStart === -1) {
-        groupStart = index
-      }
-      groupEnd = index
-    }
-
-    for (const id of ids) {
-      tabGroupInfo.set(id, { groupEnd, groupStart, inLayout: true })
-    }
-  }
-
-  return tabGroupInfo
-}

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

@@ -1,33 +0,0 @@
-export type SidebarScrollTarget = 'none' | 'active-item' | 'top' | 'bottom'
-
-interface SidebarScrollTargetOptions {
-  previousActiveIndex: number
-  nextActiveIndex: number
-  tabCount: number
-}
-
-export function getSidebarScrollTarget({
-  nextActiveIndex,
-  previousActiveIndex,
-  tabCount,
-}: SidebarScrollTargetOptions): SidebarScrollTarget {
-  if (tabCount === 0 || nextActiveIndex < 0) {
-    return 'none'
-  }
-
-  if (previousActiveIndex < 0 || previousActiveIndex === nextActiveIndex) {
-    return previousActiveIndex < 0 ? 'active-item' : 'none'
-  }
-
-  const lastIndex = tabCount - 1
-
-  if (previousActiveIndex === lastIndex && nextActiveIndex === 0) {
-    return 'top'
-  }
-
-  if (previousActiveIndex === 0 && nextActiveIndex === lastIndex) {
-    return 'bottom'
-  }
-
-  return 'active-item'
-}

package/src/ui/components/layout/sidebar/use-sidebar-branch.ts

@@ -1,36 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { getCurrentBranch } from '../../../git-branch'
-
-const BRANCH_POLL_INTERVAL_MS = 5_000
-
-export function useSidebarBranch(projectPath: string | undefined): string | null {
-  const [branch, setBranch] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!(projectPath != null && projectPath !== '')) {
-      setBranch(null)
-      return
-    }
-
-    let isCurrent = true
-    const updateBranch = async () => {
-      const nextBranch = await getCurrentBranch(projectPath)
-      if (isCurrent) {
-        setBranch(nextBranch)
-      }
-    }
-
-    void updateBranch()
-    const interval = setInterval(() => {
-      void updateBranch()
-    }, BRANCH_POLL_INTERVAL_MS)
-
-    return () => {
-      isCurrent = false
-      clearInterval(interval)
-    }
-  }, [projectPath])
-
-  return branch
-}