@brimveyn/aimux 1.20.3 → 1.21.0

package/src/state/reducers/git-panel-state.ts

@@ -105,58 +105,11 @@ function sameFiles(a: GitFileEntry[], b: GitFileEntry[]): boolean {
 
 export function reduceGitPanelState(state: AppState, action: AppAction): AppState | null {
   switch (action.type) {
-    case 'toggle-git-pane': {
-      const nextVisible = !state.gitPane.visible
-      const sidebarMustShow = state.gitPane.mode === 'embedded' && nextVisible
-      return {
-        ...state,
-        gitPane: { ...state.gitPane, visible: nextVisible },
-        sidebar: sidebarMustShow ? { ...state.sidebar, visible: true } : state.sidebar,
-      }
-    }
-    case 'resize-git-pane': {
-      const target = state.gitPane.mode === 'pane' ? 'paneRatio' : 'embeddedRatio'
-      const nextRatio = clampRatio(state.gitPane[target] + action.delta)
-      if (nextRatio === state.gitPane[target]) return state
-      return { ...state, gitPane: { ...state.gitPane, [target]: nextRatio } }
-    }
-    case 'set-git-pane-ratio': {
-      const key = action.target === 'pane' ? 'paneRatio' : 'embeddedRatio'
-      const nextRatio = clampRatio(action.ratio)
-      if (nextRatio === state.gitPane[key]) return state
-      return { ...state, gitPane: { ...state.gitPane, [key]: nextRatio } }
-    }
     case 'resize-git-diff-pane': {
       const nextRatio = clampRatio(state.gitPane.diffModeRatio + action.delta)
       if (nextRatio === state.gitPane.diffModeRatio) return state
       return { ...state, gitPane: { ...state.gitPane, diffModeRatio: nextRatio } }
     }
-    case 'set-git-pane-mode': {
-      if (state.gitPane.mode === action.mode) return state
-      const isEmbedded = action.mode === 'embedded'
-      const isValidEmbedded =
-        state.gitPane.position === 'top' || state.gitPane.position === 'bottom'
-      const isValidPane = state.gitPane.position === 'left' || state.gitPane.position === 'right'
-      let nextPosition: typeof state.gitPane.position
-      if (isEmbedded) {
-        nextPosition = isValidEmbedded ? state.gitPane.position : 'bottom'
-      } else {
-        nextPosition = isValidPane ? state.gitPane.position : 'left'
-      }
-      return {
-        ...state,
-        gitPane: { ...state.gitPane, mode: action.mode, position: nextPosition },
-      }
-    }
-    case 'set-git-pane-position': {
-      const validForMode =
-        state.gitPane.mode === 'embedded'
-          ? action.position === 'top' || action.position === 'bottom'
-          : action.position === 'left' || action.position === 'right'
-      if (!validForMode) return state
-      if (state.gitPane.position === action.position) return state
-      return { ...state, gitPane: { ...state.gitPane, position: action.position } }
-    }
     case 'git-refresh-success': {
       const prev = state.gitPanel
       const next = action.payload

package/src/state/reducers/ui-state.ts

@@ -1,21 +1,91 @@
-import type { AppAction, AppState } from '../types'
+import type { AppAction, AppState, BarSide, BarState, BarWidget } from '../types'
+
+import {
+  boundaryDeltaFromRatio,
+  clampBarWidth,
+  findWidgetBar,
+  shiftBoundary,
+  visibleWidgets,
+} from '../bars'
+
+function withBar(state: AppState, side: BarSide, next: BarState): AppState {
+  if (next === state.bars[side]) return state
+  return { ...state, bars: { ...state.bars, [side]: next } }
+}
+
+function setBarWidth(state: AppState, side: BarSide, width: number): AppState {
+  const bar = state.bars[side]
+  const next = clampBarWidth(width)
+  if (next === bar.width) return state
+  return withBar(state, side, { ...bar, width: next })
+}
+
+/**
+ * Move `widgetId` to `side` at `index`. Covers both cross-bar moves and
+ * in-bar reordering — removing then re-inserting is the same operation.
+ */
+function moveWidget(state: AppState, widgetId: string, side: BarSide, index: number): AppState {
+  const from = findWidgetBar(state.bars, widgetId)
+  if (from === null) return state
+  const widget = state.bars[from].widgets.find((w) => w.id === widgetId)
+  if (!widget) return state
+
+  const source = state.bars[from].widgets.filter((w) => w.id !== widgetId)
+  const target: BarWidget[] = from === side ? source : [...state.bars[side].widgets]
+  const at = Math.max(0, Math.min(target.length, index))
+  target.splice(at, 0, widget)
+
+  const bars = { ...state.bars }
+  bars[from] = { ...state.bars[from], widgets: from === side ? target : source }
+  // Showing a widget in a hidden bar would silently swallow it.
+  bars[side] = { ...bars[side], visible: bars[side].visible || widget.visible, widgets: target }
+  return { ...state, bars }
+}
 
 export function reduceUIState(state: AppState, action: AppAction): AppState | null {
   switch (action.type) {
-    case 'toggle-sidebar':
-      return { ...state, sidebar: { ...state.sidebar, visible: !state.sidebar.visible } }
-    case 'resize-sidebar': {
-      const width = Math.min(
-        state.sidebar.maxWidth,
-        Math.max(state.sidebar.minWidth, state.sidebar.width + action.delta)
+    case 'toggle-bar': {
+      const bar = state.bars[action.side]
+      return withBar(state, action.side, { ...bar, visible: !bar.visible })
+    }
+    case 'resize-bar':
+      return setBarWidth(state, action.side, state.bars[action.side].width + action.delta)
+    case 'set-bar-width':
+      return setBarWidth(state, action.side, action.width)
+    case 'toggle-widget': {
+      const side = findWidgetBar(state.bars, action.widgetId)
+      if (side === null) return state
+      const bar = state.bars[side]
+      const widgets = bar.widgets.map((w) =>
+        w.id === action.widgetId ? { ...w, visible: !w.visible } : w
       )
-      if (width === state.sidebar.width) return state
-      return { ...state, sidebar: { ...state.sidebar, width } }
+      const revealed = widgets.some((w) => w.id === action.widgetId && w.visible)
+      return withBar(state, side, { ...bar, visible: bar.visible || revealed, widgets })
+    }
+    case 'move-widget':
+      return moveWidget(state, action.widgetId, action.side, action.index)
+    case 'set-bar-boundary': {
+      const bar = state.bars[action.side]
+      const delta = boundaryDeltaFromRatio(bar, action.index, action.ratio)
+      const widgets = shiftBoundary(bar, action.index, delta)
+      if (widgets === bar.widgets) return state
+      return withBar(state, action.side, { ...bar, widgets })
     }
-    case 'set-sidebar-width': {
-      const width = Math.min(state.sidebar.maxWidth, Math.max(state.sidebar.minWidth, action.width))
-      if (width === state.sidebar.width) return state
-      return { ...state, sidebar: { ...state.sidebar, width } }
+    case 'resize-widget': {
+      // Keyboard resize: grow/shrink this widget against its neighbour. The
+      // widget below owns the boundary above it, so the sign flips there.
+      const side = findWidgetBar(state.bars, action.widgetId)
+      if (side === null) return state
+      const bar = state.bars[side]
+      const visible = visibleWidgets(bar)
+      const at = visible.findIndex((w) => w.id === action.widgetId)
+      if (at === -1) return state
+      const total = visible.reduce((sum, w) => sum + w.grow, 0)
+      const index = at > 0 ? at - 1 : at
+      const deltaGrow = action.delta * total * (at > 0 ? -1 : 1)
+      const widgets = shiftBoundary(bar, index, deltaGrow)
+      if (widgets === bar.widgets) return state
+      return withBar(state, side, { ...bar, widgets })
     }
     case 'set-focus-mode':
       return { ...state, focusMode: action.focusMode }

package/src/state/session-persistence.ts

@@ -42,9 +42,11 @@ export function serializeWorkspace(state: AppState): WorkspaceSnapshotV1 {
     layoutTree: Object.values(state.layoutTrees)[0] ?? undefined,
     layoutTrees: Object.keys(state.layoutTrees).length > 0 ? state.layoutTrees : undefined,
     savedAt: new Date().toISOString(),
+    // Mirror of the left bar. `isWorkspaceSnapshotV1` requires this key —
+    // dropping it invalidates every entry in the session catalog.
     sidebar: {
-      visible: state.sidebar.visible,
-      width: state.sidebar.width,
+      visible: state.bars.left.visible,
+      width: state.bars.left.width,
     },
     tabGroupMap: Object.keys(state.tabGroupMap).length > 0 ? state.tabGroupMap : undefined,
     tabs: state.tabs.map((tab) => ({
@@ -277,10 +279,7 @@ export function restoreWorkspaceState(
   state: AppState,
   workspaceSnapshot: WorkspaceSnapshotV1 | undefined,
   options: RestoreOptions = {}
-): Pick<
-  AppState,
-  'tabs' | 'activeTabId' | 'focusMode' | 'sidebar' | 'layoutTrees' | 'tabGroupMap'
-> &
+): Pick<AppState, 'tabs' | 'activeTabId' | 'focusMode' | 'layoutTrees' | 'tabGroupMap'> &
   Partial<Pick<AppState, 'lastActiveTabByWorktree'>> {
   const tabs = restoreTabsFromWorkspace(workspaceSnapshot, options)
   const activeTabId =
@@ -305,7 +304,6 @@ export function restoreWorkspaceState(
     activeTabId,
     focusMode: 'navigation',
     layoutTrees,
-    sidebar: state.sidebar,
     tabGroupMap,
     tabs: orderedTabs,
     ...(persistedLastActiveTab ? { lastActiveTabByWorktree: persistedLastActiveTab } : {}),

package/src/state/store.ts

@@ -1,5 +1,6 @@
 import type { WorktreeTemplate } from '../config'
 
+import { clampBarWidth, KNOWN_WIDGET_IDS } from './bars'
 import { reduceAutoCommit } from './reducers/auto-commit-state'
 import { emptyGitMode, reduceGitModeState } from './reducers/git-mode-state'
 import { emptyGitPanel, reduceGitPanelState } from './reducers/git-panel-state'
@@ -12,26 +13,22 @@ import { filterSnippets } from './selectors'
 import {
   type AppAction,
   type AppState,
+  type BarsState,
   EMPTY_AUTO_COMMIT_STATE,
   EMPTY_MULTI_REPO_STATE,
   type GitModeState,
-  type GitPaneMode,
-  type GitPanePosition,
   type GitPaneState,
   type SessionRecord,
   type SnippetRecord,
 } from './types'
 
-const DEFAULT_SIDEBAR_WIDTH = 28
-const DEFAULT_SIDEBAR_MIN_WIDTH = 18
-const DEFAULT_SIDEBAR_MAX_WIDTH = 42
 const DEFAULT_TERMINAL_COLS = 80
 const DEFAULT_TERMINAL_ROWS = 24
 
 export interface InitialStateOverrides {
   gitMode?: Partial<GitModeState>
   gitPane?: Partial<GitPaneState>
-  sidebar?: Pick<AppState['sidebar'], 'visible' | 'width'>
+  bars?: BarsState
   sessionBarVisible?: boolean
   worktreeTemplates?: WorktreeTemplate[]
 }
@@ -39,26 +36,37 @@ export interface InitialStateOverrides {
 const DEFAULT_GIT_PANE: GitPaneState = {
   diffCount: { enabled: true },
   diffModeRatio: 0.35,
-  embeddedRatio: 0.5,
   fileListMode: 'tree',
-  mode: 'embedded',
-  paneRatio: 0.5,
   path: { enabled: true },
-  position: 'bottom',
   prefetchRadius: 5,
   treeCompaction: true,
-  visible: true,
 }
 
-function resolveGitPanePosition(mode: GitPaneMode, position: GitPanePosition): GitPanePosition {
-  if (mode === 'embedded') {
-    return position === 'top' || position === 'bottom' ? position : 'bottom'
-  }
-  return position === 'left' || position === 'right' ? position : 'left'
+export const DEFAULT_BARS: BarsState = {
+  left: {
+    visible: true,
+    widgets: [
+      { grow: 50, id: 'workspaces', visible: true },
+      { grow: 50, id: 'git', visible: true },
+    ],
+    width: 28,
+  },
+  right: { visible: false, widgets: [], width: 40 },
 }
 
-function clampSidebarWidth(width: number): number {
-  return Math.min(DEFAULT_SIDEBAR_MAX_WIDTH, Math.max(DEFAULT_SIDEBAR_MIN_WIDTH, width))
+/**
+ * Drop widget ids this build cannot render (config written by a newer or
+ * patched version) and normalise widths — the only place unknown ids can enter.
+ */
+function sanitizeBars(bars: BarsState): BarsState {
+  const sanitizeBar = (bar: BarsState[keyof BarsState]): BarsState[keyof BarsState] => ({
+    ...bar,
+    widgets: bar.widgets
+      .filter((widget) => (KNOWN_WIDGET_IDS as readonly string[]).includes(widget.id))
+      .map((widget) => ({ ...widget, grow: Math.max(1, Math.round(widget.grow)) })),
+    width: clampBarWidth(bar.width),
+  })
+  return { left: sanitizeBar(bars.left), right: sanitizeBar(bars.right) }
 }
 
 export function createInitialState(
@@ -68,24 +76,15 @@ export function createInitialState(
   showSessionPicker = false,
   overrides: InitialStateOverrides = {}
 ): AppState {
-  const gitPaneMode = overrides.gitPane?.mode ?? DEFAULT_GIT_PANE.mode
-  const gitPanePosition = resolveGitPanePosition(
-    gitPaneMode,
-    overrides.gitPane?.position ?? DEFAULT_GIT_PANE.position
-  )
   return {
     activeTabId: null,
     autoCommit: EMPTY_AUTO_COMMIT_STATE,
+    bars: sanitizeBars(overrides.bars ?? DEFAULT_BARS),
     currentSessionId: null,
     customCommands,
     focusMode: showSessionPicker ? 'command-edit' : 'navigation',
     gitMode: { ...emptyGitMode(), ...overrides.gitMode },
-    gitPane: {
-      ...DEFAULT_GIT_PANE,
-      ...overrides.gitPane,
-      mode: gitPaneMode,
-      position: gitPanePosition,
-    },
+    gitPane: { ...DEFAULT_GIT_PANE, ...overrides.gitPane },
     gitPanel: emptyGitPanel(),
     lastActiveTabByWorktree: {},
     layout: {
@@ -109,12 +108,6 @@ export function createInitialState(
     },
     sessions,
     sessionStatuses: {},
-    sidebar: {
-      maxWidth: DEFAULT_SIDEBAR_MAX_WIDTH,
-      minWidth: DEFAULT_SIDEBAR_MIN_WIDTH,
-      visible: overrides.sidebar?.visible ?? true,
-      width: clampSidebarWidth(overrides.sidebar?.width ?? DEFAULT_SIDEBAR_WIDTH),
-    },
     snippets,
     tabGroupMap: {},
     tabs: [],

package/src/state/types.ts

@@ -211,15 +211,26 @@ export interface TabSession {
   autoRenameStatus?: 'eligible' | 'attempted'
 }
 
-export interface SidebarState {
+export type BarSide = 'left' | 'right'
+
+/**
+ * One widget slot in a bar. `grow` is the flex weight opentui consumes
+ * directly; hidden widgets keep their weight but are excluded from the layout.
+ */
+export interface BarWidget {
+  id: string
+  grow: number
+  visible: boolean
+}
+
+export interface BarState {
   visible: boolean
   width: number
-  minWidth: number
-  maxWidth: number
+  /** Ordered top → bottom. */
+  widgets: BarWidget[]
 }
 
-export type GitPaneMode = 'embedded' | 'pane'
-export type GitPanePosition = 'top' | 'bottom' | 'left' | 'right'
+export type BarsState = Record<BarSide, BarState>
 
 export type GitPanePathConfig =
   | { enabled: false }
@@ -230,11 +241,6 @@ export interface GitPaneDiffCountConfig {
 }
 
 export interface GitPaneState {
-  visible: boolean
-  mode: GitPaneMode
-  position: GitPanePosition
-  paneRatio: number
-  embeddedRatio: number
   diffModeRatio: number
   fileListMode: GitFileListMode
   treeCompaction: boolean
@@ -611,7 +617,7 @@ export interface AppState {
   sessionBar: SessionBarState
   snippets: SnippetRecord[]
   focusMode: FocusMode
-  sidebar: SidebarState
+  bars: BarsState
   gitPane: GitPaneState
   modal: ModalState
   layout: LayoutState
@@ -803,17 +809,16 @@ export type LayoutAction =
 
 // -- UI actions --
 export type UIAction =
-  | { type: 'toggle-sidebar' }
-  | { type: 'resize-sidebar'; delta: number }
-  | { type: 'set-sidebar-width'; width: number }
+  | { type: 'toggle-bar'; side: BarSide }
+  | { type: 'resize-bar'; side: BarSide; delta: number }
+  | { type: 'set-bar-width'; side: BarSide; width: number }
+  | { type: 'toggle-widget'; widgetId: string }
+  | { type: 'move-widget'; widgetId: string; side: BarSide; index: number }
+  | { type: 'set-bar-boundary'; side: BarSide; index: number; ratio: number }
+  | { type: 'resize-widget'; widgetId: string; delta: number }
   | { type: 'set-focus-mode'; focusMode: FocusMode }
   | { type: 'set-terminal-size'; cols: number; rows: number }
-  | { type: 'toggle-git-pane' }
-  | { type: 'resize-git-pane'; delta: number }
-  | { type: 'set-git-pane-ratio'; target: 'pane' | 'embedded'; ratio: number }
   | { type: 'resize-git-diff-pane'; delta: number }
-  | { type: 'set-git-pane-mode'; mode: GitPaneMode }
-  | { type: 'set-git-pane-position'; position: GitPanePosition }
   | { type: 'set-pending-chords'; chords: string[] | null }
   | { type: 'toggle-session-bar' }
 

package/src/state/workspace-save.ts

@@ -23,20 +23,18 @@ export function buildSessionsWithCurrentSnapshot(
 export function saveCurrentWorkspace(state: AppState): void {
   saveConfig({
     ...loadConfig(),
+    bars: state.bars,
     customCommands: state.customCommands,
     gitPane: {
       diffModeRatio: state.gitPane.diffModeRatio,
-      embeddedRatio: state.gitPane.embeddedRatio,
       fileListMode: state.gitPane.fileListMode,
-      mode: state.gitPane.mode,
-      paneRatio: state.gitPane.paneRatio,
-      position: state.gitPane.position,
-      visible: state.gitPane.visible,
     },
     sessionBarVisible: state.sessionBar.visible,
+    // Legacy mirror of the left bar: lets an older build (and the workspace
+    // snapshot schema) still find a sidebar after a downgrade.
     sidebar: {
-      visible: state.sidebar.visible,
-      width: state.sidebar.width,
+      visible: state.bars.left.visible,
+      width: state.bars.left.width,
     },
   })
   saveSessionCatalog(

package/src/ui/components/git/diff-renderer/pierre-diff.tsx

@@ -7,6 +7,7 @@ import type { FoldState } from '../../../../state/types'
 import type { ThemeId } from '../../../themes'
 
 import { useAppStore } from '../../../../state/app-store'
+import { getBarWidth } from '../../../../state/bars'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { useTheme } from '../../../theme'
 import { buildDiffSegments, firstChangeSegmentOffset, gutterWidth } from './build-rows'
@@ -51,7 +52,7 @@ export const PierreDiff = forwardRef<PierreDiffHandle, Props>(function PierreDif
   const highlights: DiffHighlights = preparation.highlights
 
   const terminalCols = useAppStore((s) => s.layout.terminalCols)
-  const sidebarWidth = useAppStore((s) => s.sidebar.width)
+  const sidebarWidth = useAppStore((s) => getBarWidth(s.bars.left))
   const contentWidth = useMemo(() => {
     if (!file) return 0
     const gw = gutterWidth(file)

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

@@ -4,32 +4,51 @@ import type { GitPanelState } from '../../../../state/types'
 
 import { useAppStore } from '../../../../state/app-store'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
-import { useTheme } from '../../../theme'
+import { selectPrRowVisible, usePrStatusStore } from '../../../../state/pr-status-store'
+import { useTheme, useTransparent } from '../../../theme'
+import { PrStateRow } from './pr-state-row'
+
+export type GitPaneTab = 'files' | 'checks'
 
 interface GitPaneHeaderProps {
   gitPanel: GitPanelState
   projectPath: string | undefined
   headOffset?: number
   baseLabel?: string
+  /** Only the bar widget switches tabs; full-screen git mode omits these. */
+  tab?: GitPaneTab
+  onTabChange?: (tab: GitPaneTab) => void
 }
 
 export const GitPaneHeader = memo(function GitPaneHeader({
   baseLabel,
   gitPanel,
   headOffset = 0,
+  onTabChange,
   projectPath,
+  tab,
 }: GitPaneHeaderProps) {
   const t = useTheme()
+  // Transparent mode drops every painted background, so the active tab falls
+  // back to colour alone rather than punching a hole in the terminal image.
+  const transparent = useTransparent()
+  const activeTabBg = transparent ? undefined : t.backgroundElement
+  const prRowVisible = usePrStatusStore(selectPrRowVisible)
   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 showFiles = useCallback(() => onTabChange?.('files'), [onTabChange])
+  const showChecks = useCallback(() => onTabChange?.('checks'), [onTabChange])
 
+  const hasTabs = tab !== undefined && onTabChange !== undefined
   const hasProject = projectPath != null && projectPath !== ''
   if (!hasProject) return null
-  if (gitPanel.error !== null) return null
+  // A git error must not hide the tab row, otherwise there's no way back to
+  // `files` (and the PR checks are still worth showing outside a repo).
+  if (gitPanel.error !== null && !hasTabs) return null
 
   const branch = gitPanel.branch
   const branchLabel = branch != null && branch !== '' ? branch : 'detached'
@@ -41,63 +60,110 @@ export const GitPaneHeader = memo(function GitPaneHeader({
   const showBehind = behind > 0
   const showTracking = showAhead || showBehind
 
-  const showToggle = gitPanel.files.length > 0
+  // The PR row already carries the branch identity (and the checks tab spells
+  // out `base ← head`), so the branch row is only worth a line without a PR.
+  const showPrRow = hasTabs && prRowVisible
+  const showBranchRow = !showPrRow && gitPanel.error === null
+  const showToggle = tab !== 'checks' && 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}'}
+  const trackingAndToggle = (
+    <box flexDirection="row" flexShrink={0} gap={2}>
+      {showTracking && tab !== 'checks' ? (
+        <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} paddingLeft={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={branchIsResolved ? t.text : t.textMuted} wrapMode="none">
-            {branchIsResolved ? <strong>{branchLabel}</strong> : branchLabel}
+          <text
+            selectable={false}
+            fg={fileListMode === 'flat' ? t.primary : t.textMuted}
+            wrapMode="none"
+          >
+            flat
           </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} paddingLeft={1} onMouseDown={toggleListMode}>
+      ) : null}
+    </box>
+  )
+
+  return (
+    <box flexDirection="column" flexShrink={0} paddingBottom={1}>
+      {showPrRow && hasProject ? <PrStateRow projectPath={projectPath} /> : null}
+      {hasTabs ? (
+        <box flexDirection="row" justifyContent="space-between">
+          <box flexDirection="row" flexShrink={0} gap={1}>
+            <box
+              paddingLeft={1}
+              paddingRight={1}
+              backgroundColor={tab === 'files' ? activeTabBg : undefined}
+              onMouseDown={showFiles}
+            >
               <text
                 selectable={false}
-                fg={fileListMode === 'tree' ? t.primary : t.textMuted}
+                fg={tab === 'files' ? t.text : t.textMuted}
+                bg={tab === 'files' ? activeTabBg : undefined}
                 wrapMode="none"
               >
-                tree
-              </text>
-              <text selectable={false} fg={t.textMuted} wrapMode="none">
-                |
+                files
               </text>
+            </box>
+            <box
+              paddingLeft={1}
+              paddingRight={1}
+              backgroundColor={tab === 'checks' ? activeTabBg : undefined}
+              onMouseDown={showChecks}
+            >
               <text
                 selectable={false}
-                fg={fileListMode === 'flat' ? t.primary : t.textMuted}
+                fg={tab === 'checks' ? t.text : t.textMuted}
+                bg={tab === 'checks' ? activeTabBg : undefined}
                 wrapMode="none"
               >
-                flat
+                checks
               </text>
             </box>
-          ) : null}
+          </box>
+          {trackingAndToggle}
         </box>
-      </box>
+      ) : null}
+      {showBranchRow ? (
+        <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>
+          {hasTabs ? null : trackingAndToggle}
+        </box>
+      ) : null}
       {showScope ? (
         <box flexDirection="row" gap={2}>
           {showHistorical ? (