@brimveyn/aimux 1.14.0 → 1.14.2

package/src/ui/components/layout/sidebar/worktree-row.tsx

@@ -0,0 +1,92 @@
+import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
+import { memo, useCallback, useMemo } from 'react'
+
+import type { SessionRecord, WorktreeRecord } from '../../../../state/types'
+
+import { useAppStore } from '../../../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { useTheme } from '../../../theme'
+import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
+
+interface WorktreeRowProps {
+  session: SessionRecord
+  worktree: WorktreeRecord
+  /** 1-based index of the workspace in the visible order (for switch-session-by-index). */
+  sessionIndex: number
+  /** True when this row is the active cursor item. */
+  isActiveItem: boolean
+  /** True when this row's workspace is the current session (selection scope). */
+  inCurrentGroup: boolean
+}
+
+export const WorktreeRow = memo(function WorktreeRow({
+  inCurrentGroup,
+  isActiveItem,
+  session,
+  sessionIndex,
+  worktree,
+}: WorktreeRowProps) {
+  const t = useTheme()
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const isCurrentSession = session.id === currentSessionId
+
+  const handleMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      if (event.button !== 0) return
+      event.preventDefault()
+      event.stopPropagation()
+      dispatchGlobal({
+        sessionId: session.id,
+        type: 'set-active-worktree',
+        worktreeId: worktree.id,
+      })
+      if (!isCurrentSession) {
+        runSideEffectGlobal({ index: sessionIndex, type: 'switch-session-by-index' })
+      }
+    },
+    [isCurrentSession, session.id, sessionIndex, worktree.id]
+  )
+
+  const rightClickMenu = useMemo<[string, () => void][] | undefined>(() => {
+    if (worktree.source === 'primary') return
+    return [
+      [
+        'Remove worktree',
+        () =>
+          dispatchGlobal({
+            sessionId: session.id,
+            type: 'remove-worktree-record',
+            worktreeId: worktree.id,
+          }),
+      ],
+    ]
+  }, [session.id, worktree.id, worktree.source])
+
+  let bgColor: string | undefined
+  if (isActiveItem) {
+    bgColor = t.backgroundElement
+  } else if (inCurrentGroup) {
+    bgColor = t.backgroundPanel
+  }
+
+  return (
+    <ContextMenuBox
+      id={`sidebar-wt-${worktree.id}`}
+      flexDirection="row"
+      paddingLeft={1}
+      paddingRight={1}
+      alignItems="center"
+      backgroundColor={bgColor}
+      rightClickMenu={rightClickMenu}
+      onMouseDown={handleMouseDown}
+    >
+      <text fg={t.textMuted} selectable={false} wrapMode="none">
+        {'  > '}
+      </text>
+      <text fg={isActiveItem ? t.text : t.textMuted} selectable={false} wrapMode="none">
+        {worktree.name}
+      </text>
+    </ContextMenuBox>
+  )
+})

package/src/ui/components/layout/split-layout.tsx

@@ -1,6 +1,6 @@
 import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
-import { useCallback, useMemo } from 'react'
+import { useMemo } from 'react'
 
 import type { MeasuredPaneRect } from '../../../app-runtime/use-pane-size-report'
 import type { TerminalContentOrigin } from '../../../input/raw-input-handler'
@@ -8,13 +8,14 @@ import type { FocusMode, TabSession } from '../../../state/types'
 
 import { logInputDebug } from '../../../debug/input-log'
 import {
+  computeJunctionEdges,
   computePaneRects,
+  type JunctionEdges,
   type LayoutNode,
   PANE_BORDER,
   type PaneRect,
   type SplitDirection,
 } from '../../../state/layout-tree'
-import { useTheme } from '../../theme'
 import { TerminalPane } from './terminal-pane'
 
 const PANE_CHROME = PANE_BORDER
@@ -45,6 +46,7 @@ interface SplitLayoutProps {
   onMeasure?: (tabId: string, rect: MeasuredPaneRect) => void
   contentOrigin: TerminalContentOrigin
   bounds: PaneRect
+  junctionEdgesMap?: Map<string, JunctionEdges>
 }
 
 export function SplitLayout({
@@ -52,6 +54,7 @@ export function SplitLayout({
   bounds,
   contentOrigin,
   focusMode,
+  junctionEdgesMap: providedJunctionEdgesMap,
   localScrollbackEnabled,
   mouseForwardingEnabled,
   node,
@@ -69,7 +72,12 @@ export function SplitLayout({
   onTerminalScrollEvent,
   tabs,
 }: SplitLayoutProps) {
-  const t = useTheme()
+  const junctionEdgesMap = useMemo(
+    () =>
+      providedJunctionEdgesMap ??
+      computeJunctionEdges(node, bounds, { x: contentOrigin.x, y: contentOrigin.y }),
+    [providedJunctionEdgesMap, node, bounds, contentOrigin]
+  )
   const paneOrigin = useMemo<TerminalContentOrigin>(
     () => ({
       cols: Math.max(1, bounds.cols - PANE_CHROME * 2),
@@ -79,22 +87,6 @@ export function SplitLayout({
     }),
     [bounds, contentOrigin]
   )
-  const handleSeparatorMouseDown = useCallback(
-    (e: OtuiMouseEvent) => {
-      e.preventDefault()
-      if (node.type !== 'split' || !onSeparatorDragStart) return
-      const leafId = getFirstLeafId(node.first)
-      if (!(leafId != null && leafId !== '')) return
-      onSeparatorDragStart({
-        direction: node.direction,
-        screenStart:
-          node.direction === 'vertical' ? contentOrigin.x + bounds.x : contentOrigin.y + bounds.y,
-        tabId: leafId,
-        totalSize: node.direction === 'vertical' ? bounds.cols : bounds.rows,
-      })
-    },
-    [bounds, contentOrigin, node, onSeparatorDragStart]
-  )
   if (node.type === 'leaf') {
     const tab = tabs.find((t) => t.id === node.tabId)
     const isActive = node.tabId === activeTabId
@@ -117,6 +109,7 @@ export function SplitLayout({
         focusMode={focusMode}
         isActive={isActive}
         contentOrigin={paneOrigin}
+        junctionEdges={junctionEdgesMap.get(node.tabId)}
         mouseForwardingEnabled={isActive && mouseForwardingEnabled}
         localScrollbackEnabled={isActive && localScrollbackEnabled}
         onTerminalMouseEvent={onTerminalMouseEvent}
@@ -127,6 +120,7 @@ export function SplitLayout({
         onPaneActivate={onPaneActivate}
         onSeparatorDrag={onSeparatorDrag}
         onSeparatorDragEnd={onSeparatorDragEnd}
+        onSeparatorDragStart={onSeparatorDragStart}
         onLeftEdgeMouseDown={onLeftEdgeMouseDown}
         onMeasure={onMeasure}
       />
@@ -134,23 +128,19 @@ export function SplitLayout({
   }
 
   const flexDir = node.direction === 'vertical' ? 'row' : 'column'
-  const firstGrow = Math.round(node.ratio * 100)
-  const secondGrow = 100 - firstGrow
 
-  // Compute sub-bounds for each child
   const rects = computePaneRects(node, bounds)
-
-  // Compute the bounding rect for each subtree
   const firstBounds = subtreeBounds(node.first, rects, bounds)
   const secondBounds = subtreeBounds(node.second, rects, bounds)
 
-  // For vertical splits only the first subtree is leftmost; for horizontal
-  // splits both first and second start at the same x.
+  const firstSize = node.direction === 'vertical' ? firstBounds.cols : firstBounds.rows
+  const firstSizeProp = node.direction === 'vertical' ? { width: firstSize } : { height: firstSize }
+
   const secondLeftEdgeMouseDown = node.direction === 'horizontal' ? onLeftEdgeMouseDown : undefined
 
   return (
     <box flexDirection={flexDir} flexGrow={1} gap={0}>
-      <box flexGrow={firstGrow} flexDirection="column" overflow="hidden">
+      <box {...firstSizeProp} flexShrink={0} flexDirection="column" overflow="hidden">
         <SplitLayout
           node={node.first}
           tabs={tabs}
@@ -172,15 +162,10 @@ export function SplitLayout({
           onMeasure={onMeasure}
           contentOrigin={contentOrigin}
           bounds={firstBounds}
+          junctionEdgesMap={junctionEdgesMap}
         />
       </box>
-      <box
-        minWidth={node.direction === 'vertical' ? 1 : undefined}
-        minHeight={node.direction === 'horizontal' ? 1 : undefined}
-        backgroundColor={t.border}
-        onMouseDown={handleSeparatorMouseDown}
-      />
-      <box flexGrow={secondGrow} flexDirection="column" overflow="hidden">
+      <box flexGrow={1} flexDirection="column" overflow="hidden">
         <SplitLayout
           node={node.second}
           tabs={tabs}
@@ -202,17 +187,13 @@ export function SplitLayout({
           onMeasure={onMeasure}
           contentOrigin={contentOrigin}
           bounds={secondBounds}
+          junctionEdgesMap={junctionEdgesMap}
         />
       </box>
     </box>
   )
 }
 
-function getFirstLeafId(node: LayoutNode): string | null {
-  if (node.type === 'leaf') return node.tabId
-  return getFirstLeafId(node.first)
-}
-
 function subtreeBounds(
   node: LayoutNode,
   rects: Map<string, PaneRect>,

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/layout/terminal-pane.tsx

@@ -3,6 +3,7 @@ import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
 import { memo, type ReactNode, useCallback, useMemo } from 'react'
 
 import type { TerminalContentOrigin } from '../../../input/raw-input-handler'
+import type { JunctionEdgeInfo, JunctionEdges } from '../../../state/layout-tree'
 import type { FocusMode, TabSession, TerminalSnapshot, TerminalSpan } from '../../../state/types'
 
 import { type MeasuredPaneRect, usePaneSizeReport } from '../../../app-runtime/use-pane-size-report'
@@ -28,8 +29,10 @@ interface TerminalPaneProps {
   onPaneActivate?: (tabId: string) => void
   onSeparatorDrag?: (event: OtuiMouseEvent) => boolean
   onSeparatorDragEnd?: () => void
+  onSeparatorDragStart?: (info: JunctionEdgeInfo) => void
   onLeftEdgeMouseDown?: (event: OtuiMouseEvent) => boolean
   onMeasure?: (tabId: string, rect: MeasuredPaneRect) => void
+  junctionEdges?: JunctionEdges
 }
 
 function getTitle(
@@ -113,6 +116,7 @@ export function TerminalPane({
   contentOrigin,
   focusMode,
   isActive,
+  junctionEdges,
   localScrollbackEnabled,
   mouseForwardingEnabled,
   onLeftEdgeMouseDown,
@@ -120,6 +124,7 @@ export function TerminalPane({
   onPaneActivate,
   onSeparatorDrag,
   onSeparatorDragEnd,
+  onSeparatorDragStart,
   onTerminalClick,
   onTerminalDrag,
   onTerminalMouseEvent,
@@ -175,6 +180,16 @@ export function TerminalPane({
       event.y === contentOrigin.y + contentOrigin.rows,
     [contentOrigin]
   )
+  const getJunctionSideAt = useCallback(
+    (event: OtuiMouseEvent): keyof JunctionEdges | null => {
+      if (event.x === contentOrigin.x - 1) return 'left'
+      if (event.x === contentOrigin.x + contentOrigin.cols) return 'right'
+      if (event.y === contentOrigin.y - 1) return 'top'
+      if (event.y === contentOrigin.y + contentOrigin.rows) return 'bottom'
+      return null
+    },
+    [contentOrigin]
+  )
   const forwardMouseEvent = useCallback(
     (event: OtuiMouseEvent) => {
       if (event.type === 'down' && event.button === 2 && rightClickMenu) {
@@ -195,6 +210,18 @@ export function TerminalPane({
           return
         }
       }
+      if (event.type === 'down' && event.button === 0 && junctionEdges && onSeparatorDragStart) {
+        const side = getJunctionSideAt(event)
+        if (side !== null) {
+          const info = junctionEdges[side]
+          if (info) {
+            event.preventDefault()
+            event.stopPropagation()
+            onSeparatorDragStart(info)
+            return
+          }
+        }
+      }
       // Absorb left-button clicks on pane borders — they should not focus the
       // pane or be forwarded to the terminal. This keeps borders available for
       // resize actions (split separators, sidebar edge) without conflicting
@@ -248,11 +275,14 @@ export function TerminalPane({
     [
       canForwardMouse,
       contentOrigin,
+      getJunctionSideAt,
       isOnPaneBorder,
+      junctionEdges,
       onLeftEdgeMouseDown,
       onPaneActivate,
       onSeparatorDrag,
       onSeparatorDragEnd,
+      onSeparatorDragStart,
       onTerminalClick,
       onTerminalDrag,
       onTerminalMouseEvent,