@brimveyn/aimux 1.20.4 → 1.22.0

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 ? (

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

@@ -1,35 +1,45 @@
-import { memo, useRef } from 'react'
+import { memo, useRef, useState } from 'react'
 
 import type { GitPanelState } from '../../../../state/types'
 
 import { useGitPanelPolling } from '../../../../git/git-poller'
+import { usePrStatusPolling } from '../../../../git/pr-status-poller'
 import { useRepoDiscovery } from '../../../../git/use-repo-discovery'
 import { useAppStore } from '../../../../state/app-store'
-import { getSessionProjectPath } from '../../../../state/session-worktrees'
+import { getActiveWorkspacePath } from '../../../../state/project-workspaces'
 import { GitPanel } from '../git-panel'
-import { GitPaneHeader } from './git-pane-header'
+import { GitPaneHeader, type GitPaneTab } from './git-pane-header'
+import { PrChecksPanel } from './pr-checks-panel'
 
 interface GitPaneWidgetProps {
   pollingEnabled: boolean
+  contentWidth: number
 }
 
-export const GitPaneWidget = memo(function GitPaneWidget({ pollingEnabled }: GitPaneWidgetProps) {
+export const GitPaneWidget = memo(function GitPaneWidget({
+  contentWidth,
+  pollingEnabled,
+}: GitPaneWidgetProps) {
   const gitPanel = useAppStore((s) => s.gitPanel)
   const gitMode = useAppStore((s) => s.gitMode)
   const gitFileListMode = useAppStore((s) => s.gitPane.fileListMode)
   const treeCompaction = useAppStore((s) => s.gitPane.treeCompaction)
   const pathConfig = useAppStore((s) => s.gitPane.path)
   const diffCountConfig = useAppStore((s) => s.gitPane.diffCount)
-  const currentSessionId = useAppStore((s) => s.currentSessionId)
-  const sessions = useAppStore((s) => s.sessions)
-  const currentSession =
-    currentSessionId != null && currentSessionId !== ''
-      ? sessions.find((s) => s.id === currentSessionId)
+  const currentProjectId = useAppStore((s) => s.currentProjectId)
+  const projects = useAppStore((s) => s.projects)
+  const currentProject =
+    currentProjectId != null && currentProjectId !== ''
+      ? projects.find((s) => s.id === currentProjectId)
       : undefined
-  const projectPath = getSessionProjectPath(currentSession)
+  const projectPath = getActiveWorkspacePath(currentProject)
+
+  const [tab, setTab] = useState<GitPaneTab>('files')
 
   useRepoDiscovery(projectPath)
   useGitPanelPolling({ enabled: pollingEnabled, headOffset: 0, projectPath })
+  // The PR state row sits above the tabs, so this has to run on both of them.
+  usePrStatusPolling({ enabled: pollingEnabled, projectPath })
 
   const lastGoodRef = useRef<GitPanelState | null>(null)
   const prevProjectPathRef = useRef(projectPath)
@@ -45,19 +55,23 @@ export const GitPaneWidget = memo(function GitPaneWidget({ pollingEnabled }: Git
 
   return (
     <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}
-      />
+      <GitPaneHeader gitPanel={display} onTabChange={setTab} projectPath={projectPath} tab={tab} />
+      {tab === 'checks' ? (
+        <PrChecksPanel contentWidth={contentWidth} />
+      ) : (
+        <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/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>
+  )
+})