@brimveyn/aimux 1.14.0 → 1.14.2

package/src/ui/status-bar-model.ts

@@ -1,36 +1,38 @@
 import type { ModeId, ResolvedKeymapConfig } from '@brimveyn/aimux-config'
 
-import type { AppState, TabSession } from '../state/types'
+import type { AppState } from '../state/types'
 
 import { describeBindings } from '../input/keymap/describe-bindings'
 import { getSessionProjectPath } from '../state/session-worktrees'
 import { buildHintText } from './keymap-context'
 import { abbreviatePath } from './path-format'
 
+export interface IdentitySegment {
+  id: string
+  text: string
+  tone: 'primary' | 'muted'
+}
+
 export interface StatusBarModel {
-  left: string
-  right: string
   help: string
+  right: string
+  sessionSegments: IdentitySegment[]
 }
 
-const MAX_TAB_LABEL_LENGTH = 24
 const HINT_LIMIT = 6
 const HELP_DESCRIPTION = 'Help'
-
-function truncateLabel(label: string): string {
-  if (label.length <= MAX_TAB_LABEL_LENGTH) {
-    return label
+const SEP = '  ·  '
+
+function sessionSegments(
+  sessionName: string,
+  sessionPath: string | null | undefined
+): IdentitySegment[] {
+  const segs: IdentitySegment[] = [{ id: 'session', text: sessionName, tone: 'primary' }]
+  if (sessionPath != null && sessionPath !== '') {
+    segs.push({ id: 'sep-session-path', text: SEP, tone: 'muted' })
+    segs.push({ id: 'path', text: abbreviatePath(sessionPath), tone: 'muted' })
   }
-
-  return `${label.slice(0, MAX_TAB_LABEL_LENGTH - 3)}...`
-}
-
-function getActiveTabLabel(tab?: TabSession): string {
-  if (!tab) {
-    return 'no tab'
-  }
-
-  return `${truncateLabel(tab.title)} (${tab.status})`
+  return segs
 }
 
 const STAGING_DESCRIPTIONS = ['Stage', 'Unstage/delete', 'Commit', 'Push']
@@ -54,64 +56,61 @@ function helpHintForMode(config: ResolvedKeymapConfig, modeId: ModeId): string {
   return `${helpBinding.keysDisplay} ${helpBinding.description ?? ''}`.trim()
 }
 
-export function getStatusBarModel(
-  state: AppState,
-  activeTab: TabSession | undefined,
-  config: ResolvedKeymapConfig
-): StatusBarModel {
+export function getStatusBarModel(state: AppState, config: ResolvedKeymapConfig): StatusBarModel {
   const currentSession =
     state.currentSessionId != null && state.currentSessionId !== ''
       ? state.sessions.find((session) => session.id === state.currentSessionId)
       : undefined
   const sessionName = currentSession?.name ?? 'no workspace'
   const sessionPath = getSessionProjectPath(currentSession)
-  const sessionLabel =
-    sessionPath != null && sessionPath !== ''
-      ? `${sessionName} (${abbreviatePath(sessionPath)})`
-      : sessionName
-
-  // \u{f0b1} = nf-fa-briefcase (session icon)
-  const sessionIcon = '\u{f0b1}'
+  const sessionSegs = sessionSegments(sessionName, sessionPath)
 
   switch (state.focusMode) {
     case 'terminal-input':
       return {
         help: '',
-        left: `${getActiveTabLabel(activeTab)}  ${sessionIcon}  ${sessionLabel}`,
         right: hintForMode(config, 'terminal-input'),
+        sessionSegments: sessionSegs,
       }
     case 'modal': {
       const modalMode = deriveModalModeId(state.modal.type)
       return {
         help: '',
-        left: `${sessionIcon}  ${sessionLabel}`,
         right: modalMode ? hintForMode(config, modalMode) : '',
+        sessionSegments: sessionSegs,
       }
     }
     case 'git': {
       const headOffset = state.gitMode.headOffset
-      const offsetTag = headOffset > 0 ? `  HEAD~${headOffset}` : ''
-      const reviewTag = state.gitMode.reviewBase ? '  vs base' : ''
+      const extras: IdentitySegment[] = []
+      if (headOffset > 0) {
+        extras.push({ id: 'sep-head-offset', text: SEP, tone: 'muted' })
+        extras.push({ id: 'head-offset', text: `HEAD~${headOffset}`, tone: 'muted' })
+      }
+      if (state.gitMode.reviewBase) {
+        extras.push({ id: 'sep-review-base', text: SEP, tone: 'muted' })
+        extras.push({ id: 'review-base', text: 'vs base', tone: 'muted' })
+      }
       return {
         help: helpHintForMode(config, 'git-mode'),
-        left: `${sessionIcon}  ${sessionLabel}${offsetTag}${reviewTag}`,
         right: hintForGitMode(config, headOffset),
+        sessionSegments: [...sessionSegs, ...extras],
       }
     }
     case 'command-edit': {
       const commandEditMode = deriveCommandEditModeId(state.modal.type)
       return {
         help: '',
-        left: `${sessionIcon}  ${sessionLabel}`,
         right: commandEditMode ? hintForMode(config, commandEditMode) : '',
+        sessionSegments: sessionSegs,
       }
     }
     case 'navigation':
     default:
       return {
         help: helpHintForMode(config, 'navigation'),
-        left: `${sessionIcon}  ${sessionLabel}  ${getActiveTabLabel(activeTab)}`,
         right: hintForMode(config, 'navigation'),
+        sessionSegments: sessionSegs,
       }
   }
 }

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
-}