@brimveyn/aimux 1.14.1 → 1.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brimveyn/aimux",
-  "version": "1.14.1",
+  "version": "1.14.3",
   "description": "A terminal multiplexer for AI CLIs. Run Claude, Codex, OpenCode side-by-side with tabbed navigation, split panes, and persistent sessions.",
   "keywords": [
     "ai",
@@ -60,7 +60,7 @@
     "bump": "bun run scripts/bump.ts"
   },
   "dependencies": {
-    "@brimveyn/aimux-config": "0.6.4",
+    "@brimveyn/aimux-config": "0.6.5",
     "@opentui/core": "^0.1.90",
     "@opentui/react": "^0.1.90",
     "@resvg/resvg-wasm": "^2.6.2",

package/src/app.tsx

@@ -3,6 +3,7 @@ import {
   setAutoCommitEnabled,
   setExternalEditorConfig,
   setMultiRepoConfig,
+  setStatusBarSeparator,
 } from '@brimveyn/aimux-config'
 import { useKeyboard, useRenderer, useTerminalDimensions } from '@opentui/react'
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
@@ -68,6 +69,7 @@ export function App({
   setAutoCommitEnabled(resolvedConfig.autoCommit.enabled)
   setMultiRepoConfig(resolvedConfig.multiRepo)
   setExternalEditorConfig(resolvedConfig.externalEditor)
+  setStatusBarSeparator(resolvedConfig.statusBar?.separator)
 
   const keymapHandlers = useMemo(
     () => {

package/src/ui/components/git/git-panel.tsx

@@ -33,6 +33,10 @@ interface GitPanelProps {
   // ("vs <base>") rather than a HEAD~N history walk.
   baseLabel?: string
   compact?: boolean
+  // When false, suppress the inline tree|flat toggle on section headers and the
+  // top ↑n ↓m remote-tracking line so a wrapper can own them at panel level.
+  showFileListToggle?: boolean
+  showRemoteTracking?: boolean
 }
 
 function sectionTitle(section: GitFileSection, headOffset: number, baseLabel?: string): string {
@@ -389,6 +393,8 @@ export const GitPanel = memo(function GitPanel({
   pathConfig = DEFAULT_PATH_CONFIG,
   projectPath,
   selectedEntryKey,
+  showFileListToggle = true,
+  showRemoteTracking = true,
 }: GitPanelProps) {
   const t = useTheme()
   useTransparent()
@@ -407,12 +413,13 @@ export const GitPanel = memo(function GitPanel({
 
   const statusNode = renderStatus(gitPanel, !!(projectPath != null && projectPath !== ''))
 
-  const hasRemoteTracking = gitPanel.ahead > 0 || gitPanel.behind > 0
-  const toggleSection =
-    tree.sections.find((section) => section.section === 'unstaged' && section.files.length > 0)
-      ?.section ??
-    tree.sections.find((section) => section.files.length > 0)?.section ??
-    null
+  const hasRemoteTracking = showRemoteTracking && (gitPanel.ahead > 0 || gitPanel.behind > 0)
+  const toggleSection = showFileListToggle
+    ? (tree.sections.find((section) => section.section === 'unstaged' && section.files.length > 0)
+        ?.section ??
+      tree.sections.find((section) => section.files.length > 0)?.section ??
+      null)
+    : null
 
   useEffect(() => {
     const scrollbox = scrollRef.current

package/src/ui/components/git/git-view.tsx

@@ -21,6 +21,7 @@ import { PierreDiff, type PierreDiffHandle } from './diff-renderer'
 import { useDiffPrefetch } from './diff-renderer/use-diff-prefetch'
 import { GitPanel } from './git-panel'
 import { ImageDiffView } from './image-diff'
+import { GitPaneHeader } from './pane/git-pane-header'
 
 interface DiffStageProps {
   diff: DiffData | undefined
@@ -287,34 +288,12 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
           gap={0}
           overflow="hidden"
         >
-          <box flexDirection="column" flexShrink={0}>
-            <text fg={t.text}>
-              <strong>aimux · git</strong>
-            </text>
-            {gitPanel.branch != null && gitPanel.branch !== '' ? (
-              <box flexDirection="row">
-                <text fg={t.text}>{'\u{e702}'} </text>
-                <text fg={t.text}>{gitPanel.branch}</text>
-              </box>
-            ) : null}
-            {gitMode.headOffset > 0 ? (
-              <box flexDirection="row" gap={1}>
-                <text fg={t.warning}>
-                  <strong>HEAD~{gitMode.headOffset}</strong>
-                </text>
-                <text fg={t.textMuted}>[ newer · ] older</text>
-              </box>
-            ) : null}
-            {baseLabel != null ? (
-              <box flexDirection="row" gap={1}>
-                <text fg={t.primary}>
-                  <strong>{baseLabel}</strong>
-                </text>
-                <text fg={t.textMuted}>b: back</text>
-              </box>
-            ) : null}
-            <text fg={t.textMuted}>{'·'.repeat(Math.max(0, fileBarWidth - 2))}</text>
-          </box>
+          <GitPaneHeader
+            baseLabel={baseLabel}
+            gitPanel={gitPanel}
+            headOffset={gitMode.headOffset}
+            projectPath={projectPath}
+          />
           <GitPanel
             baseLabel={baseLabel}
             collapsedFolders={gitMode.collapsedFolders}
@@ -324,6 +303,8 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
             headOffset={gitMode.headOffset}
             projectPath={projectPath}
             selectedEntryKey={gitMode.selectedEntryKey}
+            showFileListToggle={false}
+            showRemoteTracking={false}
           />
         </box>
         <box flexDirection="column" flexGrow={1} overflow="hidden">

package/src/ui/components/git/pane/git-pane-header.tsx

@@ -0,0 +1,127 @@
+import { memo, useCallback } from 'react'
+
+import type { GitPanelState } from '../../../../state/types'
+
+import { useAppStore } from '../../../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { useTheme } from '../../../theme'
+
+interface GitPaneHeaderProps {
+  gitPanel: GitPanelState
+  projectPath: string | undefined
+  headOffset?: number
+  baseLabel?: string
+}
+
+export const GitPaneHeader = memo(function GitPaneHeader({
+  baseLabel,
+  gitPanel,
+  headOffset = 0,
+  projectPath,
+}: GitPaneHeaderProps) {
+  const t = useTheme()
+  const fileListMode = useAppStore((s) => s.gitPane.fileListMode)
+  const nextFileListMode = fileListMode === 'tree' ? 'flat' : 'tree'
+  const toggleListMode = useCallback(() => {
+    dispatchGlobal({ type: 'git-mode-toggle-file-list-mode' })
+    runSideEffectGlobal({ mode: nextFileListMode, type: 'persist-git-file-list-mode' })
+  }, [nextFileListMode])
+
+  const hasProject = projectPath != null && projectPath !== ''
+  if (!hasProject) return null
+  if (gitPanel.error !== null) return null
+
+  const branch = gitPanel.branch
+  const branchLabel = branch != null && branch !== '' ? branch : 'detached'
+  const branchIsResolved = branch != null && branch !== ''
+
+  const ahead = gitPanel.ahead
+  const behind = gitPanel.behind
+  const showAhead = ahead > 0
+  const showBehind = behind > 0
+  const showTracking = showAhead || showBehind
+
+  const showToggle = gitPanel.files.length > 0
+  const showHistorical = headOffset > 0
+  const showReviewBase = baseLabel != null && baseLabel !== ''
+  const showScope = showHistorical || showReviewBase
+
+  return (
+    <box flexDirection="column" flexShrink={0} paddingBottom={1}>
+      <box flexDirection="row" justifyContent="space-between">
+        <box flexDirection="row" flexShrink={1} overflow="hidden">
+          <text selectable={false} fg={t.textMuted} wrapMode="none">
+            {'\u{e702}'}
+          </text>
+          <text selectable={false} fg={t.textMuted} wrapMode="none">
+            {' '}
+          </text>
+          <text selectable={false} fg={branchIsResolved ? t.text : t.textMuted} wrapMode="none">
+            {branchIsResolved ? <strong>{branchLabel}</strong> : branchLabel}
+          </text>
+        </box>
+        <box flexDirection="row" flexShrink={0} gap={2}>
+          {showTracking ? (
+            <box flexDirection="row" gap={1}>
+              {showAhead ? (
+                <text selectable={false} fg={t.textMuted} wrapMode="none">
+                  {`↑${ahead}`}
+                </text>
+              ) : null}
+              {showBehind ? (
+                <text selectable={false} fg={t.textMuted} wrapMode="none">
+                  {`↓${behind}`}
+                </text>
+              ) : null}
+            </box>
+          ) : null}
+          {showToggle ? (
+            <box flexDirection="row" gap={1} onMouseDown={toggleListMode}>
+              <text
+                selectable={false}
+                fg={fileListMode === 'tree' ? t.primary : t.textMuted}
+                wrapMode="none"
+              >
+                tree
+              </text>
+              <text selectable={false} fg={t.textMuted} wrapMode="none">
+                |
+              </text>
+              <text
+                selectable={false}
+                fg={fileListMode === 'flat' ? t.primary : t.textMuted}
+                wrapMode="none"
+              >
+                flat
+              </text>
+            </box>
+          ) : null}
+        </box>
+      </box>
+      {showScope ? (
+        <box flexDirection="row" gap={2}>
+          {showHistorical ? (
+            <text selectable={false} fg={t.warning} wrapMode="none">
+              <strong>HEAD~{headOffset}</strong>
+            </text>
+          ) : null}
+          {showHistorical ? (
+            <text selectable={false} fg={t.textMuted} wrapMode="none">
+              [ newer · ] older
+            </text>
+          ) : null}
+          {showReviewBase ? (
+            <text selectable={false} fg={t.primary} wrapMode="none">
+              <strong>{baseLabel}</strong>
+            </text>
+          ) : null}
+          {showReviewBase ? (
+            <text selectable={false} fg={t.textMuted} wrapMode="none">
+              b: back
+            </text>
+          ) : null}
+        </box>
+      ) : null}
+    </box>
+  )
+})

package/src/ui/components/git/pane/git-pane-widget.tsx

@@ -7,6 +7,7 @@ import { useRepoDiscovery } from '../../../../git/use-repo-discovery'
 import { useAppStore } from '../../../../state/app-store'
 import { getSessionProjectPath } from '../../../../state/session-worktrees'
 import { GitPanel } from '../git-panel'
+import { GitPaneHeader } from './git-pane-header'
 
 interface GitPaneWidgetProps {
   pollingEnabled: boolean
@@ -43,15 +44,20 @@ export const GitPaneWidget = memo(function GitPaneWidget({ pollingEnabled }: Git
   const display = lastGoodRef.current ?? gitPanel
 
   return (
-    <GitPanel
-      collapsedFolders={gitMode.collapsedFolders}
-      compact={treeCompaction}
-      diffCountConfig={diffCountConfig}
-      fileListMode={gitFileListMode}
-      gitPanel={display}
-      pathConfig={pathConfig}
-      projectPath={projectPath}
-      selectedEntryKey={gitMode.selectedEntryKey}
-    />
+    <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} overflow="hidden">
+      <GitPaneHeader gitPanel={display} projectPath={projectPath} />
+      <GitPanel
+        collapsedFolders={gitMode.collapsedFolders}
+        compact={treeCompaction}
+        diffCountConfig={diffCountConfig}
+        fileListMode={gitFileListMode}
+        gitPanel={display}
+        pathConfig={pathConfig}
+        projectPath={projectPath}
+        selectedEntryKey={gitMode.selectedEntryKey}
+        showFileListToggle={false}
+        showRemoteTracking={false}
+      />
+    </box>
   )
 })

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

@@ -1,76 +1,211 @@
+import {
+  getStatusBarSeparator,
+  type ResolvedTuiTheme,
+  type StatusBarSeparator,
+} from '@brimveyn/aimux-config'
+
 import type { AppState } from '../../../state/types'
 
 import { version as APP_VERSION } from '../../../../package.json'
+import { useAIUsageStore } from '../../../state/ai-usage-store'
 import { useAppStore } from '../../../state/app-store'
 import { useKeymap } from '../../keymap-context'
-import { getStatusBarModel } from '../../status-bar-model'
-import { getCurrentTheme, useTheme } from '../../theme'
+import { getStatusBarModel, type IdentitySegment } from '../../status-bar-model'
+import { useTheme } from '../../theme'
 import { AIUsageIndicator } from '../overlays/ai-usage/ai-usage-indicator'
 
-function getModeColor(focusMode: AppState['focusMode']): string {
-  const t = getCurrentTheme()
+// Powerline-style separator glyph pairs.
+// `right` is rendered between left-anchored tiles (A→B, B→filler).
+// `left` is rendered between right-anchored tiles (filler→Y, X→Y).
+// `none` uses empty strings so bare background transitions remain visible.
+const SEPARATOR_GLYPHS: Record<StatusBarSeparator, { left: string; right: string }> = {
+  arrow: { left: '\u{E0B2}', right: '\u{E0B0}' },
+  flame: { left: '\u{E0C2}', right: '\u{E0C0}' },
+  none: { left: '', right: '' },
+  round: { left: '\u{E0B6}', right: '\u{E0B4}' },
+  slant: { left: '\u{E0BA}', right: '\u{E0BC}' },
+}
+
+// Mode label is padded to a fixed width so the A tile never resizes
+// when switching modes — keeps the rest of the bar visually stable.
+const MODE_LABEL_WIDTH = 6
+// A tile width = padded label (6) + paddingLeft (1) + paddingRight (1).
+// Row 2 indents past A + separator glyph + B's paddingLeft so the
+// hints line up with the start of B's content.
+const ROW2_INDENT = MODE_LABEL_WIDTH + 2 + 1 + 1
+
+function getModeLabel(focusMode: AppState['focusMode']): string {
   switch (focusMode) {
     case 'terminal-input':
-      return t.primary
+      return 'INSERT'
     case 'modal':
+      return 'MODAL'
     case 'command-edit':
-      return t.warning
+      return 'EDIT'
     case 'git':
-      return t.success
+      return 'GIT'
     case 'navigation':
     default:
-      return t.text
+      return 'NORMAL'
   }
 }
 
-function getModeLabel(focusMode: AppState['focusMode']): string {
+function getModeBadge(focusMode: AppState['focusMode']): string {
+  const label = getModeLabel(focusMode)
+  const totalPad = Math.max(0, MODE_LABEL_WIDTH - label.length)
+  const left = Math.floor(totalPad / 2)
+  const right = totalPad - left
+  return ' '.repeat(left) + label + ' '.repeat(right)
+}
+
+function getModeColor(focusMode: AppState['focusMode'], t: ResolvedTuiTheme): string {
   switch (focusMode) {
     case 'terminal-input':
-      return 'input'
+      return t.primary
     case 'modal':
-      return 'modal'
     case 'command-edit':
-      return 'edit'
+      return t.warning
     case 'git':
-      return 'git'
+      return t.success
     case 'navigation':
     default:
-      return 'nav'
+      return t.text
   }
 }
 
+function composeAmbient(right: string, help: string): string {
+  if (right === '' && help === '') return ''
+  if (right === '') return help
+  if (help === '') return right
+  return `${right}  ·  ${help}`
+}
+
+function Segments({ segments, t }: { segments: IdentitySegment[]; t: ResolvedTuiTheme }) {
+  return (
+    <>
+      {segments.map((seg) => (
+        <text
+          key={seg.id}
+          fg={seg.tone === 'primary' ? t.text : t.textMuted}
+          wrapMode="none"
+          selectable={false}
+        >
+          {seg.text}
+        </text>
+      ))}
+    </>
+  )
+}
+
+function Separator({ bg, fg, glyph }: { bg: string; fg: string; glyph: string }) {
+  if (glyph === '') return null
+  return (
+    <box backgroundColor={bg}>
+      <text fg={fg} selectable={false}>
+        {glyph}
+      </text>
+    </box>
+  )
+}
+
 export function StatusBar() {
   const t = useTheme()
-  const headerBg = t.backgroundPanel
   const state = useAppStore((s) => s)
-  const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId)
   const config = useKeymap()
-  const model = getStatusBarModel(state, activeTab, config)
+  const model = getStatusBarModel(state, config)
+  const modeColor = getModeColor(state.focusMode, t)
+  const ambient = composeAmbient(model.right, model.help)
+  const aiEnabled = useAIUsageStore((s) => s.enabled)
+
+  const glyphs = SEPARATOR_GLYPHS[getStatusBarSeparator()]
+
+  const tileB = t.backgroundElement
+  const tileFiller = t.backgroundPanel
+  const tileX = t.backgroundElement
+  const tileY = modeColor
+
+  const hasB = model.sessionSegments.length > 0
+  const hasX = aiEnabled
 
   return (
     <box
       height={2}
       flexShrink={0}
       overflow="hidden"
-      paddingLeft={1}
-      paddingRight={1}
-      paddingTop={0}
-      paddingBottom={0}
       flexDirection="column"
-      backgroundColor={headerBg}
+      backgroundColor={tileFiller}
     >
-      <box width="100%" flexDirection="row">
-        <text fg={getModeColor(state.focusMode)}>[{getModeLabel(state.focusMode)}]</text>
-        <text> </text>
-        <text fg={t.text}>{model.left}</text>
-      </box>
-      <box width="100%" flexDirection="row" justifyContent="space-between">
-        <text fg={t.textMuted}>{model.right}</text>
-        <box flexDirection="row" gap={2}>
-          {model.help ? <text fg={t.textMuted}>{model.help}</text> : null}
-          <AIUsageIndicator />
-          <text fg={t.textMuted}>v{APP_VERSION}</text>
+      {/* Row 1 — lualine tiles */}
+      <box height={1} flexShrink={0} flexDirection="row" overflow="hidden">
+        {/* A: mode */}
+        <box backgroundColor={modeColor} paddingLeft={1} paddingRight={1}>
+          <text fg={t.background} selectable={false}>
+            {getModeBadge(state.focusMode)}
+          </text>
         </box>
+
+        {/* A → B (or A → filler if B empty) */}
+        <Separator glyph={glyphs.right} bg={hasB ? tileB : tileFiller} fg={modeColor} />
+
+        {hasB ? (
+          <>
+            <box
+              backgroundColor={tileB}
+              paddingLeft={1}
+              paddingRight={1}
+              flexDirection="row"
+              flexShrink={1}
+              overflow="hidden"
+            >
+              <Segments segments={model.sessionSegments} t={t} />
+            </box>
+            <Separator glyph={glyphs.right} bg={tileFiller} fg={tileB} />
+          </>
+        ) : null}
+
+        {/* Filler */}
+        <box flexGrow={1} flexShrink={1} backgroundColor={tileFiller} />
+
+        {hasX ? (
+          <>
+            <Separator glyph={glyphs.left} bg={tileFiller} fg={tileX} />
+            <box
+              backgroundColor={tileX}
+              paddingLeft={1}
+              paddingRight={1}
+              flexDirection="row"
+              flexShrink={0}
+            >
+              <AIUsageIndicator />
+            </box>
+            <Separator glyph={glyphs.left} bg={tileX} fg={tileY} />
+          </>
+        ) : (
+          <Separator glyph={glyphs.left} bg={tileFiller} fg={tileY} />
+        )}
+
+        {/* Y: version */}
+        <box backgroundColor={tileY} paddingLeft={1} paddingRight={1} flexShrink={0}>
+          <text fg={t.background} selectable={false}>
+            v{APP_VERSION}
+          </text>
+        </box>
+      </box>
+
+      {/* Row 2 — ambient hints */}
+      <box
+        height={1}
+        flexShrink={0}
+        flexDirection="row"
+        paddingLeft={ROW2_INDENT}
+        paddingRight={1}
+        overflow="hidden"
+      >
+        {ambient !== '' ? (
+          <text fg={t.textMuted} wrapMode="none" selectable={false}>
+            {ambient}
+          </text>
+        ) : null}
       </box>
     </box>
   )

package/src/ui/components/overlays/ai-usage/ai-usage-indicator.tsx

@@ -1,4 +1,4 @@
-import type { AIUsageTool } from '@brimveyn/aimux-config'
+import type { AIUsageTool, ResolvedTuiTheme } from '@brimveyn/aimux-config'
 
 import { useCallback } from 'react'
 
@@ -6,14 +6,7 @@ import { useAIUsageStore } from '../../../../state/ai-usage-store'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { useTheme } from '../../../theme'
 
-const TOOL_ICON: Record<AIUsageTool, string> = {
-  claude: 'CC',
-  codex: 'CO',
-}
-
-const BAR_SEGMENTS = 4
-const BAR_FILLED_CHAR = '\u{2501}'
-const BAR_EMPTY_CHAR = '\u{2500}'
+const DOT = '●'
 
 function formatTokens(total: number): string {
   if (total >= 1_000_000) return `${(total / 1_000_000).toFixed(1)}M`
@@ -21,36 +14,14 @@ function formatTokens(total: number): string {
   return String(total)
 }
 
-function buildBar(percent: number): { empty: string; filled: string } {
-  let filledCount = 0
-  for (let i = 0; i < BAR_SEGMENTS; i++) {
-    if (percent > i * (100 / BAR_SEGMENTS)) filledCount++
-  }
-  return {
-    empty: BAR_EMPTY_CHAR.repeat(BAR_SEGMENTS - filledCount),
-    filled: BAR_FILLED_CHAR.repeat(filledCount),
-  }
-}
-
-function formatResetIn(snap: {
-  resetAt: string | null
-  timeRemaining: string | null
-}): string | null {
-  if (snap.resetAt != null && snap.resetAt !== '') {
-    const diffMs = new Date(snap.resetAt).getTime() - Date.now()
-    if (diffMs > 0) {
-      const totalMin = Math.round(diffMs / 60_000)
-      const h = Math.floor(totalMin / 60)
-      const m = totalMin % 60
-      return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}h`
-    }
-  }
-  return snap.timeRemaining
+function pickDotColor(t: ResolvedTuiTheme, percent: number): string {
+  if (percent >= 85) return t.error
+  if (percent >= 60) return t.warning
+  return t.success
 }
 
 export function AIUsageIndicator() {
   const t = useTheme()
-  const bg = t.backgroundPanel
   const enabled = useAIUsageStore((s) => s.enabled)
   const snapshots = useAIUsageStore((s) => s.snapshots)
 
@@ -72,36 +43,24 @@ export function AIUsageIndicator() {
 
   if (entries.length === 0) {
     return (
-      <box
-        flexDirection="row"
-        paddingLeft={1}
-        paddingRight={1}
-        backgroundColor={bg}
-        onMouseDown={openModal}
-      >
-        <text fg={t.textMuted}>…</text>
+      <box flexDirection="row" onMouseDown={openModal}>
+        <text fg={t.textMuted} selectable={false}>
+          …
+        </text>
       </box>
     )
   }
 
   return (
-    <box flexDirection="row" gap={1}>
+    <box flexDirection="row" gap={2} onMouseDown={openModal}>
       {entries.map(({ snap, tool }) => {
         if (!snap) return null
-        const icon = TOOL_ICON[tool]
 
         if (snap.error != null && snap.error !== '' && !(snap.stale === true)) {
           return (
-            <box
-              key={tool}
-              flexDirection="row"
-              paddingLeft={1}
-              paddingRight={1}
-              backgroundColor={bg}
-              onMouseDown={openModal}
-            >
+            <box key={tool} flexDirection="row">
               <text fg={t.error} selectable={false}>
-                {`${icon} —`}
+                {DOT}
               </text>
             </box>
           )
@@ -109,56 +68,26 @@ export function AIUsageIndicator() {
 
         if (snap.percent !== null) {
           const p = Math.round(snap.percent)
-          let color = t.success
-          if (p >= 85) {
-            color = t.error
-          } else if (p >= 60) {
-            color = t.warning
-          }
-          const { empty, filled } = buildBar(snap.percent)
-          const reset = formatResetIn(snap)
-          const pctText = `${String(p).padStart(2, ' ')}%`
+          const color = pickDotColor(t, snap.percent)
           return (
-            <box
-              key={tool}
-              flexDirection="row"
-              paddingLeft={1}
-              paddingRight={1}
-              backgroundColor={bg}
-              onMouseDown={openModal}
-            >
-              <text fg={color} selectable={false}>
-                {`${icon} `}
-              </text>
+            <box key={tool} flexDirection="row">
               <text fg={color} selectable={false}>
-                {filled}
-              </text>
-              <text fg={t.textMuted} selectable={false}>
-                {empty}
+                {DOT}
               </text>
               <text fg={t.text} selectable={false}>
-                {` ${pctText}`}
+                {` ${p}%`}
               </text>
-              {reset != null && reset !== '' ? (
-                <text fg={t.textMuted} selectable={false}>
-                  {` · ${reset}`}
-                </text>
-              ) : null}
             </box>
           )
         }
 
         return (
-          <box
-            key={tool}
-            flexDirection="row"
-            paddingLeft={1}
-            paddingRight={1}
-            backgroundColor={bg}
-            onMouseDown={openModal}
-          >
+          <box key={tool} flexDirection="row">
+            <text fg={t.textMuted} selectable={false}>
+              {DOT}
+            </text>
             <text fg={t.textMuted} selectable={false}>
-              {`${icon} ${formatTokens(snap.tokens.total)}`}
+              {` ${formatTokens(snap.tokens.total)}`}
             </text>
           </box>
         )

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