@brimveyn/aimux 1.20.4 → 1.21.0

package/src/ui/components/git/pane/pr-checks-panel.tsx

@@ -0,0 +1,197 @@
+import { memo, useCallback, useState } from 'react'
+
+import {
+  clampPrBody,
+  type PrCheck,
+  type PrCheckState,
+  type PrStatusResult,
+} from '../../../../git/pr-status'
+import { openUrl } from '../../../../platform/open-url'
+import { usePrStatusStore } from '../../../../state/pr-status-store'
+import { useBusySpinner } from '../../../hooks/use-busy-spinner'
+import { type ResolvedTuiTheme, useTheme, useTransparent } from '../../../theme'
+
+/** Below this the workflow column crowds out the check name. */
+const WORKFLOW_MIN_WIDTH = 34
+
+const HIDDEN_SCROLLBAR_OPTIONS = { visible: false }
+/** gap 1 separates title / body / checks; the rows inside stay tight. */
+const AIRY_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 1 }
+
+const STATE_GLYPH: Record<Exclude<PrCheckState, 'pending'>, string> = {
+  cancel: '⊘',
+  fail: '✗',
+  pass: '✓',
+  skipping: '○',
+}
+
+function stateColor(state: PrCheckState, t: ResolvedTuiTheme): string {
+  if (state === 'pass') return t.success
+  if (state === 'fail') return t.error
+  if (state === 'pending') return t.warning
+  return t.textMuted
+}
+
+function formatDuration(ms: number | null): string {
+  if (ms === null) return '—'
+  const seconds = Math.round(ms / 1000)
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  return `${minutes}m${String(seconds % 60).padStart(2, '0')}s`
+}
+
+function placeholder(
+  result: PrStatusResult | null,
+  t: ResolvedTuiTheme
+): { label: string; color: string } | null {
+  if (result === null) return { color: t.textMuted, label: '…' }
+  if (result.kind === 'no-gh') return { color: t.textMuted, label: 'gh CLI not found' }
+  if (result.kind === 'no-pr') return { color: t.textMuted, label: 'No pull request' }
+  if (result.kind === 'error') return { color: t.error, label: result.message }
+  return null
+}
+
+const CheckRow = memo(function CheckRow({
+  bg,
+  check,
+  showWorkflow,
+  spinner,
+}: {
+  check: PrCheck
+  showWorkflow: boolean
+  spinner: string
+  bg: string | undefined
+}) {
+  const t = useTheme()
+  const onOpen = useCallback(() => {
+    openUrl(check.url)
+  }, [check.url])
+  const glyph = check.state === 'pending' ? spinner : STATE_GLYPH[check.state]
+  return (
+    <box flexDirection="row" gap={1} onMouseDown={onOpen}>
+      <box width={1} flexShrink={0}>
+        <text selectable={false} fg={stateColor(check.state, t)} bg={bg}>
+          {glyph}
+        </text>
+      </box>
+      <box flexGrow={1} overflow="hidden">
+        <text selectable={false} fg={t.text} bg={bg} wrapMode="none">
+          {check.name}
+        </text>
+      </box>
+      {showWorkflow && check.workflow !== '' ? (
+        <box flexShrink={0}>
+          <text selectable={false} fg={t.textMuted} bg={bg} wrapMode="none">
+            {check.workflow}
+          </text>
+        </box>
+      ) : null}
+      <box flexShrink={0}>
+        <text selectable={false} fg={t.textMuted} bg={bg} wrapMode="none">
+          {formatDuration(check.durationMs)}
+        </text>
+      </box>
+    </box>
+  )
+})
+
+export const PrChecksPanel = memo(function PrChecksPanel({
+  contentWidth,
+}: {
+  contentWidth: number
+}) {
+  const t = useTheme()
+  // A tone apart from the PR state row above, so the two zones read as
+  // separate bands. Transparent mode paints neither.
+  const transparent = useTransparent()
+  const bg = transparent ? undefined : t.backgroundPanel
+  const result = usePrStatusStore((s) => s.result)
+  const stale = usePrStatusStore((s) => s.stale)
+  const [expanded, setExpanded] = useState(false)
+  const toggleBody = useCallback(() => setExpanded((prev) => !prev), [])
+
+  const checks = result?.kind === 'ok' ? result.checks : []
+  const spinner = useBusySpinner(checks.some((c) => c.state === 'pending'))
+
+  const status = placeholder(result, t)
+  if (status !== null || result?.kind !== 'ok') {
+    return (
+      <box
+        flexGrow={1}
+        flexDirection="column"
+        alignItems="center"
+        backgroundColor={bg}
+        paddingTop={1}
+      >
+        <text selectable={false} fg={status?.color ?? t.textMuted} bg={bg}>
+          {status?.label ?? '…'}
+        </text>
+      </box>
+    )
+  }
+
+  const pr = result.pr
+  // The padding below costs a column on each side.
+  const innerWidth = contentWidth - 2
+  const clamped = clampPrBody(pr.body)
+  const body = expanded ? pr.body.trimEnd() : clamped.text
+  // The body is raw markdown on purpose: rendering it would cost a parser and
+  // the source is what a PR author actually wrote.
+  return (
+    <box
+      flexDirection="column"
+      flexGrow={1}
+      flexShrink={1}
+      flexBasis={0}
+      overflow="hidden"
+      backgroundColor={bg}
+      padding={1}
+    >
+      {/* No viewportCulling here — the wrapped body is one tall child, which
+          culling measures badly, and the content is a description plus a
+          handful of rows either way. */}
+      <scrollbox
+        flexGrow={1}
+        scrollY
+        scrollbarOptions={HIDDEN_SCROLLBAR_OPTIONS}
+        contentOptions={AIRY_CONTENT_OPTIONS}
+      >
+        <text selectable={false} fg={stale ? t.textMuted : t.text} bg={bg}>
+          <strong>{pr.title}</strong>
+        </text>
+        {body !== '' ? (
+          <box flexDirection="column">
+            <text selectable={false} fg={t.textMuted} bg={bg}>
+              {body}
+            </text>
+            {clamped.truncated ? (
+              <text selectable={false} fg={t.primary} bg={bg} onMouseDown={toggleBody}>
+                {expanded ? '▴ less' : '▾ more'}
+              </text>
+            ) : null}
+          </box>
+        ) : null}
+        <box flexDirection="column">
+          <text selectable={false} fg={t.textMuted} bg={bg}>
+            Checks
+          </text>
+          {checks.length === 0 ? (
+            <text selectable={false} fg={t.textMuted} bg={bg}>
+              No checks
+            </text>
+          ) : (
+            checks.map((check) => (
+              <CheckRow
+                key={`${check.workflow}/${check.name}`}
+                bg={bg}
+                check={check}
+                showWorkflow={innerWidth >= WORKFLOW_MIN_WIDTH}
+                spinner={spinner}
+              />
+            ))
+          )}
+        </box>
+      </scrollbox>
+    </box>
+  )
+})

package/src/ui/components/git/pane/pr-state-row.tsx

@@ -0,0 +1,103 @@
+import { memo, useCallback, useState } from 'react'
+
+import { approveAndMergePr } from '../../../../git/pr-merge'
+import { type PrActionState, prActionState } from '../../../../git/pr-status'
+import { refreshPrStatus } from '../../../../git/pr-status-poller'
+import { openUrl } from '../../../../platform/open-url'
+import { usePrStatusStore } from '../../../../state/pr-status-store'
+import { toast } from '../../../../state/toast-store'
+import { useBusySpinner } from '../../../hooks/use-busy-spinner'
+import { type ResolvedTuiTheme, useTheme, useTransparent } from '../../../theme'
+
+function toneColor(tone: PrActionState['tone'], t: ResolvedTuiTheme): string {
+  if (tone === 'ok') return t.success
+  if (tone === 'blocked') return t.error
+  return t.textMuted
+}
+
+export const PrStateRow = memo(function PrStateRow({ projectPath }: { projectPath: string }) {
+  const t = useTheme()
+  // Transparent mode drops every painted background rather than punching a hole
+  // in whatever the terminal is showing behind aimux.
+  const transparent = useTransparent()
+  const bg = transparent ? undefined : t.backgroundElement
+  const result = usePrStatusStore((s) => s.result)
+  const [confirming, setConfirming] = useState(false)
+  const [merging, setMerging] = useState(false)
+  const spinner = useBusySpinner(merging)
+
+  const pr = result?.kind === 'ok' ? result.pr : null
+  const prUrl = pr?.url ?? ''
+
+  const openPr = useCallback(() => openUrl(prUrl), [prUrl])
+  const askConfirm = useCallback(() => setConfirming(true), [])
+  const cancel = useCallback(() => setConfirming(false), [])
+  const confirm = useCallback(() => {
+    setConfirming(false)
+    setMerging(true)
+    void (async () => {
+      const merged = await approveAndMergePr(projectPath)
+      setMerging(false)
+      if (merged.ok) toast.success('Pull request merged')
+      else toast.error(merged.message)
+      await refreshPrStatus(projectPath)
+    })()
+  }, [projectPath])
+
+  // First fetch still in flight: hold the band empty so the tabs below don't
+  // jump a row once the PR lands.
+  if (result === null) {
+    return (
+      <box backgroundColor={bg} paddingLeft={1} paddingRight={1}>
+        <text selectable={false} bg={bg} wrapMode="none">
+          {' '}
+        </text>
+      </box>
+    )
+  }
+  if (result.kind !== 'ok' || pr === null) return null
+  const status = prActionState(pr, result.checks)
+  let label = status.label
+  if (confirming) label = 'Merge this PR?'
+  if (merging) label = `${spinner} merging…`
+
+  return (
+    <box flexDirection="row" gap={1} backgroundColor={bg} paddingLeft={1} paddingRight={1}>
+      <box flexDirection="row" flexShrink={0} gap={1} onMouseDown={openPr}>
+        <text selectable={false} fg={t.textMuted} bg={bg} wrapMode="none">
+          #{pr.number}
+        </text>
+        <text selectable={false} fg={t.primary} bg={bg} wrapMode="none">
+          ↗
+        </text>
+      </box>
+      <box flexGrow={1} flexShrink={1} overflow="hidden">
+        <text
+          selectable={false}
+          fg={merging || confirming ? t.warning : toneColor(status.tone, t)}
+          bg={bg}
+          wrapMode="none"
+        >
+          {label}
+        </text>
+      </box>
+      {confirming ? (
+        <box flexDirection="row" flexShrink={0} gap={1}>
+          <text selectable={false} fg={t.success} bg={bg} wrapMode="none" onMouseDown={confirm}>
+            <strong>yes</strong>
+          </text>
+          <text selectable={false} fg={t.textMuted} bg={bg} wrapMode="none" onMouseDown={cancel}>
+            no
+          </text>
+        </box>
+      ) : null}
+      {status.action === 'merge' && !confirming && !merging ? (
+        <box flexShrink={0}>
+          <text selectable={false} fg={t.primary} bg={bg} wrapMode="none" onMouseDown={askConfirm}>
+            <strong>Merge</strong>
+          </text>
+        </box>
+      ) : null}
+    </box>
+  )
+})

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

@@ -0,0 +1,191 @@
+import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
+
+import { useCallback, useRef } from 'react'
+
+import type { BarSide } from '../../../state/types'
+
+import { useAppStore } from '../../../state/app-store'
+import { getBarWidth, visibleWidgets } from '../../../state/bars'
+import { dispatchGlobal } from '../../../state/dispatch-ref'
+import { useTheme } from '../../theme'
+import { WIDGET_RENDERERS } from '../../widgets/registry'
+import { buildBarContextMenu, buildWidgetContextMenu } from '../../widgets/widget-context-menu'
+import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
+
+export interface BarBoundaryResizeInfo {
+  containerStart: number
+  index: number
+  side: BarSide
+  totalSize: number
+}
+
+interface BarProps {
+  side: BarSide
+  onResizeDrag?: (event: OtuiMouseEvent) => boolean
+  onResizeDragEnd?: () => void
+  onEdgeResizeStart?: (info: { initialWidth: number; screenStart: number; side: BarSide }) => void
+  onBoundaryResizeStart?: (info: BarBoundaryResizeInfo) => void
+}
+
+const RESIZE_HANDLE = '─'
+
+/**
+ * One edge bar hosting a vertical stack of widgets. Both bars are this
+ * component; the only asymmetry is which side the resize handle sits on.
+ */
+export function Bar({
+  onBoundaryResizeStart,
+  onEdgeResizeStart,
+  onResizeDrag,
+  onResizeDragEnd,
+  side,
+}: BarProps) {
+  const t = useTheme()
+  const bars = useAppStore((s) => s.bars)
+  const focusMode = useAppStore((s) => s.focusMode)
+  const bodyRef = useRef<BoxRenderable | null>(null)
+
+  const bar = bars[side]
+  const width = getBarWidth(bar)
+
+  const handleMouseDown = useCallback(() => {
+    if (focusMode === 'terminal-input') {
+      dispatchGlobal({ focusMode: 'navigation', type: 'set-focus-mode' })
+    }
+  }, [focusMode])
+  const handleMouseDrag = useCallback(
+    (event: OtuiMouseEvent) => {
+      if (onResizeDrag?.(event) === true) {
+        event.preventDefault()
+        event.stopPropagation()
+      }
+    },
+    [onResizeDrag]
+  )
+  const handleMouseUp = useCallback(() => {
+    onResizeDragEnd?.()
+  }, [onResizeDragEnd])
+  const handleEdgeMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      event.preventDefault()
+      event.stopPropagation()
+      onEdgeResizeStart?.({ initialWidth: width, screenStart: event.x, side })
+    },
+    [onEdgeResizeStart, side, width]
+  )
+
+  if (width === 0) return null
+
+  const visible = visibleWidgets(bar)
+  const contentWidth = Math.max(1, width - 1)
+
+  // Drag handle on the side facing the terminal.
+  const edge = (
+    <box width={1} flexShrink={0} backgroundColor={t.border} onMouseDown={handleEdgeMouseDown} />
+  )
+
+  const body = (
+    <box ref={bodyRef} flexDirection="column" flexGrow={1} overflow="hidden">
+      {visible.map((widget, index) => (
+        <BarWidgetSlot
+          key={widget.id}
+          bodyRef={bodyRef}
+          contentWidth={contentWidth}
+          grow={widget.grow}
+          handleColor={t.border}
+          index={index}
+          isLast={index === visible.length - 1}
+          onBoundaryResizeStart={onBoundaryResizeStart}
+          side={side}
+          widgetId={widget.id}
+        />
+      ))}
+    </box>
+  )
+
+  return (
+    <ContextMenuBox
+      width={width}
+      padding={0}
+      flexDirection="row"
+      backgroundColor={t.background}
+      gap={0}
+      overflow="hidden"
+      rightClickMenu={buildBarContextMenu(bars, side)}
+      onMouseDown={handleMouseDown}
+      onMouseDrag={handleMouseDrag}
+      onMouseUp={handleMouseUp}
+    >
+      {side === 'right' ? edge : null}
+      <box width={contentWidth} flexGrow={1} flexDirection="column" overflow="hidden">
+        {body}
+      </box>
+      {side === 'left' ? edge : null}
+    </ContextMenuBox>
+  )
+}
+
+function BarWidgetSlot({
+  bodyRef,
+  contentWidth,
+  grow,
+  handleColor,
+  index,
+  isLast,
+  onBoundaryResizeStart,
+  side,
+  widgetId,
+}: {
+  bodyRef: React.RefObject<BoxRenderable | null>
+  contentWidth: number
+  grow: number
+  handleColor: string
+  index: number
+  isLast: boolean
+  side: BarSide
+  widgetId: string
+  onBoundaryResizeStart?: (info: BarBoundaryResizeInfo) => void
+}) {
+  const bars = useAppStore((s) => s.bars)
+  const render = WIDGET_RENDERERS[widgetId]
+
+  const handleBoundaryMouseDown = useCallback(
+    (event: OtuiMouseEvent) => {
+      const body = bodyRef.current
+      if (!body) return
+      event.preventDefault()
+      event.stopPropagation()
+      onBoundaryResizeStart?.({
+        containerStart: body.y,
+        index,
+        side,
+        totalSize: Math.max(1, body.height),
+      })
+    },
+    [bodyRef, index, onBoundaryResizeStart, side]
+  )
+
+  if (!render) return null
+
+  return (
+    <>
+      <ContextMenuBox
+        flexDirection="column"
+        flexGrow={grow}
+        flexShrink={1}
+        flexBasis={0}
+        overflow="hidden"
+        rightClickMenu={buildWidgetContextMenu(bars, side, widgetId)}
+      >
+        {render(contentWidth)}
+      </ContextMenuBox>
+      {isLast ? null : (
+        <box minHeight={1} flexShrink={0} onMouseDown={handleBoundaryMouseDown}>
+          <text fg={handleColor} selectable={false}>
+            {RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}
+          </text>
+        </box>
+      )}
+    </>
+  )
+}

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

@@ -10,6 +10,7 @@ import type { FocusMode, TabSession } from '../../../state/types'
 
 import { useWorktreeDivergencePolling } from '../../../git/worktree-divergence-poller'
 import { useAppStore } from '../../../state/app-store'
+import { getBarWidth } from '../../../state/bars'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
 import { filterTabsForActiveWorktree } from '../../../state/session-worktrees'
 import { buildTabEntries, type GroupEntry, type TabEntry } from '../../../state/tab-entries'
@@ -197,7 +198,7 @@ export function TopTabBar({ forceVisible = false }: TopTabBarProps) {
   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 leftBarVisible = useAppStore((s) => getBarWidth(s.bars.left) > 0)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
   const focusMode: FocusMode = useAppStore((s) => s.focusMode)
@@ -206,7 +207,7 @@ export function TopTabBar({ forceVisible = false }: TopTabBarProps) {
 
   // Sidebar now also shows worktree chips with divergence — poll whenever
   // either surface is visible.
-  useWorktreeDivergencePolling(bar.visible || sidebar.visible || forceVisible)
+  useWorktreeDivergencePolling(bar.visible || leftBarVisible || forceVisible)
 
   const currentSession = useMemo(
     () =>