@brimveyn/aimux 1.14.0 → 1.14.2

package/src/ui/components/layout/top-tab-bar.tsx

@@ -0,0 +1,304 @@
+import type { MouseEvent as OtuiMouseEvent, ScrollBoxRenderable } from '@opentui/core'
+
+import { memo, type ReactNode, useCallback, useMemo, useRef } from 'react'
+
+import type { FocusMode, TabSession } from '../../../state/types'
+
+import { useWorktreeDivergencePolling } from '../../../git/worktree-divergence-poller'
+import { useAppStore } from '../../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
+import { filterTabsForActiveWorktree } from '../../../state/session-worktrees'
+import { buildTabEntries, type GroupEntry } from '../../../state/tab-entries'
+import { useTheme } from '../../theme'
+import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
+import { TabItem } from './sidebar/tab-item'
+import { useTopTabBarAutoScroll } from './sidebar/use-top-tab-bar-auto-scroll'
+
+interface TopTabBarProps {
+  forceVisible?: boolean
+}
+
+const ROW_CONTENT_OPTIONS = {
+  flexDirection: 'row' as const,
+  gap: 0,
+  justifyContent: 'flex-start' as const,
+}
+
+function getGroupIndicator(active: boolean, focused: boolean): string {
+  if (!active) return '·'
+  return focused ? '›' : '•'
+}
+
+function getGroupIndicatorColor(
+  t: ReturnType<typeof useTheme>,
+  active: boolean,
+  focused: boolean
+): string {
+  if (!active) return t.textMuted
+  return focused ? t.primary : t.text
+}
+
+const TopTabCell = memo(function TopTabCell({
+  active,
+  backgroundColor,
+  children,
+  entryId,
+  onActivate,
+}: {
+  entryId: string
+  active: boolean
+  backgroundColor: string | undefined
+  onActivate?: (entryId: string) => void
+  children: ReactNode
+}) {
+  const handleMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.stopPropagation()
+      onActivate?.(entryId)
+    },
+    [onActivate, entryId]
+  )
+  return (
+    <box
+      backgroundColor={backgroundColor}
+      flexDirection="row"
+      flexShrink={0}
+      onMouseDown={handleMouseDown}
+      data-active={active ? 'true' : undefined}
+    >
+      {children}
+    </box>
+  )
+})
+
+function GroupTabItem({
+  active,
+  entry,
+  focused,
+  indexLabel,
+}: {
+  entry: GroupEntry
+  active: boolean
+  focused: boolean
+  indexLabel?: string
+}) {
+  const t = useTheme()
+  const indicator = getGroupIndicator(active, focused)
+  const indicatorColor = getGroupIndicatorColor(t, active, focused)
+
+  const closeGroup = useCallback(() => {
+    for (const tab of entry.tabs) {
+      dispatchGlobal({ tabId: tab.id, type: 'close-tab' })
+      runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
+    }
+  }, [entry.tabs])
+
+  const handleCloseMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.stopPropagation()
+      closeGroup()
+    },
+    [closeGroup]
+  )
+
+  const rightClickMenu = useMemo<[string, () => void][]>(
+    () => [['Close group', closeGroup]],
+    [closeGroup]
+  )
+
+  return (
+    <ContextMenuBox
+      id={`top-tab-${entry.id}`}
+      paddingLeft={1}
+      paddingRight={1}
+      flexDirection="row"
+      alignItems="center"
+      rightClickMenu={rightClickMenu}
+    >
+      <text fg={indicatorColor} selectable={false}>
+        {indicator}{' '}
+      </text>
+      {indexLabel != null && indexLabel !== '' ? (
+        <text fg={t.textMuted} selectable={false} wrapMode="none">
+          {indexLabel}{' '}
+        </text>
+      ) : null}
+      {entry.tabs.map((tab, i) => {
+        const isLeafActive = tab.id === entry.activeLeafId
+        return (
+          <box key={tab.id} flexDirection="row" flexShrink={0}>
+            {i > 0 ? (
+              <text fg={t.textMuted} selectable={false} wrapMode="none">
+                {' | '}
+              </text>
+            ) : null}
+            <text fg={isLeafActive ? t.text : t.textMuted} selectable={false} wrapMode="none">
+              {tab.title}
+            </text>
+          </box>
+        )
+      })}
+      <box paddingLeft={1} onMouseDown={handleCloseMouseDown}>
+        <text fg={t.textMuted} selectable={false}>
+          ×
+        </text>
+      </box>
+    </ContextMenuBox>
+  )
+}
+
+export function TopTabBar({ forceVisible = false }: TopTabBarProps) {
+  const t = useTheme()
+  const headerBg = t.backgroundPanel
+  const tabs = useAppStore((s) => s.tabs)
+  const activeTabId = useAppStore((s) => s.activeTabId)
+  const bar = useAppStore((s) => s.sessionBar)
+  const sidebar = useAppStore((s) => s.sidebar)
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const sessions = useAppStore((s) => s.sessions)
+  const focusMode: FocusMode = useAppStore((s) => s.focusMode)
+  const layoutTrees = useAppStore((s) => s.layoutTrees)
+  const tabGroupMap = useAppStore((s) => s.tabGroupMap)
+
+  // Sidebar now also shows worktree chips with divergence — poll whenever
+  // either surface is visible.
+  useWorktreeDivergencePolling(bar.visible || sidebar.visible || forceVisible)
+
+  const currentSession = useMemo(
+    () =>
+      currentSessionId != null && currentSessionId !== ''
+        ? sessions.find((s) => s.id === currentSessionId)
+        : undefined,
+    [currentSessionId, sessions]
+  )
+
+  const visibleTabs = useMemo(
+    () => filterTabsForActiveWorktree(tabs, currentSession),
+    [tabs, currentSession]
+  )
+
+  const entries = useMemo(
+    () => buildTabEntries(visibleTabs, layoutTrees, tabGroupMap, activeTabId),
+    [visibleTabs, layoutTrees, tabGroupMap, activeTabId]
+  )
+
+  const activeEntryId = useMemo(() => {
+    for (const entry of entries) {
+      if (entry.kind === 'single') {
+        if (entry.tab.id === activeTabId) return entry.id
+      } else if (entry.tabs.some((tab) => tab.id === activeTabId)) {
+        return entry.id
+      }
+    }
+    return null
+  }, [entries, activeTabId])
+
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+  useTopTabBarAutoScroll({
+    activeTabId: activeEntryId,
+    idPrefix: 'top-tab-',
+    scrollRef,
+    visible: bar.visible || forceVisible,
+  })
+
+  const handleEntryActivate = useCallback(
+    (entryId: string) => {
+      const entry = entries.find((e) => e.id === entryId)
+      if (!entry) return
+      const targetTabId = entry.kind === 'single' ? entry.tab.id : entry.activeLeafId
+      if (targetTabId !== activeTabId) {
+        dispatchGlobal({ tabId: targetTabId, type: 'set-active-tab' })
+      }
+      dispatchGlobal({ focusMode: 'terminal-input', type: 'set-focus-mode' })
+    },
+    [entries, activeTabId]
+  )
+
+  const handleNewTab = useCallback((e: OtuiMouseEvent) => {
+    e.stopPropagation()
+    dispatchGlobal({ type: 'open-new-tab-modal' })
+  }, [])
+
+  if (!bar.visible && !forceVisible) return null
+  if (entries.length === 0) return null
+
+  const isFocused = focusMode === 'terminal-input' || focusMode === 'navigation'
+
+  return (
+    <box
+      width="100%"
+      height={1}
+      flexDirection="row"
+      flexShrink={0}
+      backgroundColor={headerBg}
+      overflow="hidden"
+    >
+      <scrollbox
+        ref={scrollRef}
+        height={1}
+        flexGrow={1}
+        flexShrink={1}
+        flexBasis={0}
+        scrollX
+        viewportCulling
+        contentOptions={ROW_CONTENT_OPTIONS}
+      >
+        {entries.map((entry, index) => {
+          // [N] is shown only for the first 9 entries — that's the range
+          // Leader+1..9 can address.
+          const indexLabel = index < 9 ? `[${index + 1}]` : undefined
+          if (entry.kind === 'single') {
+            const tab: TabSession = entry.tab
+            const isActive = tab.id === activeTabId
+            return (
+              <TopTabCell
+                key={entry.id}
+                entryId={entry.id}
+                active={isActive}
+                onActivate={handleEntryActivate}
+                backgroundColor={isActive ? t.backgroundElement : undefined}
+              >
+                <TabItem
+                  id={`top-tab-${tab.id}`}
+                  tab={tab}
+                  active={isActive}
+                  focused={isFocused}
+                  indexLabel={indexLabel}
+                  alwaysShowClose
+                />
+              </TopTabCell>
+            )
+          }
+          const isActive = entry.tabs.some((tab) => tab.id === activeTabId)
+          return (
+            <TopTabCell
+              key={entry.id}
+              entryId={entry.id}
+              active={isActive}
+              onActivate={handleEntryActivate}
+              backgroundColor={isActive ? t.backgroundElement : undefined}
+            >
+              <GroupTabItem
+                entry={entry}
+                active={isActive}
+                focused={isFocused}
+                indexLabel={indexLabel}
+              />
+            </TopTabCell>
+          )
+        })}
+        <box
+          flexDirection="row"
+          flexShrink={0}
+          paddingLeft={1}
+          paddingRight={1}
+          onMouseDown={handleNewTab}
+        >
+          <text fg={t.textMuted} selectable={false}>
+            +
+          </text>
+        </box>
+      </scrollbox>
+    </box>
+  )
+}

package/src/ui/components/modals/worktree/worktree-move-modal.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react'
 import type { WorktreeRecord } from '../../../../state/types'
 
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { formatDivergence } from '../../../../state/session-worktrees'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { ListItem } from '../../primitives/list-item'
@@ -23,14 +24,6 @@ const MOVE_HINTS: [key: string, label: string][] = [
   ['esc', 'cancel'],
 ]
 
-function formatDivergence(divergence: { ahead: number; behind: number } | undefined): string {
-  if (divergence == null) return ''
-  const parts: string[] = []
-  if (divergence.ahead > 0) parts.push(`↑${divergence.ahead}`)
-  if (divergence.behind > 0) parts.push(`↓${divergence.behind}`)
-  return parts.join(' ')
-}
-
 export function WorktreeMoveModal({
   deleteSource,
   divergence,

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