@brimveyn/aimux 1.1.0 → 1.2.0

package/src/ui/components/git-view.tsx

@@ -0,0 +1,237 @@
+import type { DiffRenderable } from '@opentui/core'
+
+import { memo, useEffect, useRef } from 'react'
+
+import type { DiffData } from '../../state/types'
+
+import { fetchDiff } from '../../git/git-diff'
+import { useGitPanelPolling } from '../../git/git-poller'
+import { useAppStore } from '../../state/app-store'
+import { dispatchGlobal } from '../../state/dispatch-ref'
+import { setGitDiffScroller } from '../git-view-controls'
+import { getSyntaxClient, getSyntaxStyle } from '../syntax'
+import { theme } from '../theme'
+import { fileKey, GitPanel } from './git-panel'
+
+interface CodePaneLike {
+  scrollY: number
+  maxScrollY: number
+}
+
+interface DiffRenderableInternals {
+  leftCodeRenderable?: CodePaneLike
+  rightCodeRenderable?: CodePaneLike
+}
+
+function filetypeFromPath(path: string): string | undefined {
+  const dot = path.lastIndexOf('.')
+  if (dot < 0) return undefined
+  const ext = path.slice(dot + 1).toLowerCase()
+  const map: Record<string, string> = {
+    cjs: 'javascript',
+    js: 'javascript',
+    jsx: 'javascript',
+    markdown: 'markdown',
+    md: 'markdown',
+    mdx: 'markdown',
+    mjs: 'javascript',
+    ts: 'typescript',
+    tsx: 'typescript',
+    zig: 'zig',
+  }
+  return map[ext]
+}
+
+interface DiffStageProps {
+  diff: DiffData | undefined
+  loading: boolean
+  diffRef: React.RefObject<DiffRenderable | null>
+}
+
+function placeholderText(diff: DiffData): string | null {
+  if (diff.status === 'binary') {
+    const before = diff.binarySizeBefore ?? 0
+    const after = diff.binarySizeAfter ?? 0
+    return `(binary file — ${before} → ${after} bytes)`
+  }
+  if (diff.rawDiff.length === 0) {
+    if (diff.status === 'new') return '(new file — no diff)'
+    if (diff.status === 'deleted') return '(deleted — no diff)'
+    return '(no changes)'
+  }
+  return null
+}
+
+const DiffStage = memo(function DiffStage({ diff, diffRef, loading }: DiffStageProps) {
+  if (loading && !diff) {
+    return (
+      <box flexGrow={1} padding={1}>
+        <text fg={theme.textMuted}>Loading diff…</text>
+      </box>
+    )
+  }
+  if (!diff) {
+    return (
+      <box flexGrow={1} padding={1}>
+        <text fg={theme.textMuted}>Select a file.</text>
+      </box>
+    )
+  }
+  if (diff.errorMessage) {
+    return (
+      <box flexGrow={1} padding={1}>
+        <text fg={theme.danger}>{diff.errorMessage}</text>
+      </box>
+    )
+  }
+
+  const placeholder = placeholderText(diff)
+  if (placeholder) {
+    return (
+      <box flexGrow={1} padding={1}>
+        <text fg={theme.textMuted}>{placeholder}</text>
+      </box>
+    )
+  }
+
+  const filetype = filetypeFromPath(diff.path)
+
+  return (
+    <box flexDirection="column" flexGrow={1} overflow="hidden">
+      {diff.oldPath ? (
+        <box paddingLeft={1} paddingRight={1}>
+          <text fg={theme.textMuted}>
+            renamed: {diff.oldPath} → {diff.path}
+          </text>
+        </box>
+      ) : null}
+      <diff
+        ref={diffRef}
+        diff={diff.rawDiff}
+        view="split"
+        syncScroll
+        showLineNumbers
+        wrapMode="none"
+        filetype={filetype}
+        treeSitterClient={filetype ? getSyntaxClient() : undefined}
+        syntaxStyle={filetype ? getSyntaxStyle() : undefined}
+        addedBg={theme.diffAddBg}
+        removedBg={theme.diffRemoveBg}
+        addedSignColor={theme.success}
+        removedSignColor={theme.danger}
+        flexGrow={1}
+      />
+    </box>
+  )
+})
+
+export const GitView = memo(function GitView() {
+  const sidebarWidth = useAppStore((s) => s.sidebar.width)
+  const gitPanel = useAppStore((s) => s.gitPanel)
+  const gitMode = useAppStore((s) => s.gitMode)
+  const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const sessions = useAppStore((s) => s.sessions)
+  const focusMode = useAppStore((s) => s.focusMode)
+  const diffRef = useRef<DiffRenderable | null>(null)
+
+  const currentSession = currentSessionId
+    ? sessions.find((s) => s.id === currentSessionId)
+    : undefined
+  const projectPath = currentSession?.projectPath
+
+  useGitPanelPolling({ enabled: focusMode === 'git', projectPath })
+
+  const selectedFile = gitPanel.files[gitMode.selectedFileIndex]
+  const diff = selectedFile ? gitMode.diffs[selectedFile.path] : undefined
+  const loading = selectedFile ? !!gitMode.loading[selectedFile.path] : false
+
+  useEffect(() => {
+    setGitDiffScroller((delta: number) => {
+      const node = diffRef.current as unknown as DiffRenderableInternals | null
+      if (!node) return
+      const left = node.leftCodeRenderable
+      const right = node.rightCodeRenderable
+      if (!left || !right) return
+      const cap = Math.max(left.maxScrollY, right.maxScrollY)
+      const base = left.scrollY
+      const nextScroll = Math.max(0, Math.min(cap, base + delta))
+      left.scrollY = nextScroll
+      right.scrollY = nextScroll
+    })
+    return () => setGitDiffScroller(null)
+  }, [])
+
+  useEffect(() => {
+    if (focusMode !== 'git') return
+    if (!selectedFile || !projectPath) return
+    const path = selectedFile.path
+    if (diff || loading) return
+    dispatchGlobal({ loading: true, path, type: 'git-mode-set-loading' })
+    void fetchDiff(projectPath, selectedFile)
+      .then((d) => dispatchGlobal({ diff: d, path, type: 'git-mode-set-diff' }))
+      .catch(() => dispatchGlobal({ loading: false, path, type: 'git-mode-set-loading' }))
+  }, [focusMode, projectPath, selectedFile, diff, loading])
+
+  const pendingPath = gitMode.pendingDeletePath
+  const pendingIsUntracked =
+    pendingPath !== null &&
+    selectedFile?.path === pendingPath &&
+    selectedFile.section === 'untracked'
+  let pendingHint: string | null = null
+  if (pendingPath !== null) {
+    pendingHint = pendingIsUntracked
+      ? 'press d again to delete file'
+      : 'press d again to discard changes'
+  }
+  const actionMessage = gitMode.actionMessage
+  let footerNode: React.ReactNode = null
+  if (pendingHint) {
+    footerNode = (
+      <text fg={theme.warning}>
+        <strong>{pendingHint}</strong>
+      </text>
+    )
+  } else if (actionMessage) {
+    footerNode = actionMessage.split('\n').map((line, idx) => (
+      <text key={idx} fg={theme.accent}>
+        {line}
+      </text>
+    ))
+  }
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <box flexDirection="row" flexGrow={1}>
+        <box
+          width={sidebarWidth}
+          flexDirection="column"
+          backgroundColor={theme.panel}
+          padding={0}
+          gap={0}
+        >
+          <text fg={theme.accent}>
+            <strong>aimux · git</strong>
+          </text>
+          {gitPanel.branch ? (
+            <box flexDirection="row">
+              <text fg={theme.accent}>{'\u{e702}'} </text>
+              <text fg={theme.textMuted}>{gitPanel.branch}</text>
+            </box>
+          ) : null}
+          <text fg={theme.dim}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+          <GitPanel
+            gitPanel={gitPanel}
+            projectPath={projectPath}
+            selectedFileKey={selectedFile ? fileKey(selectedFile) : null}
+          />
+        </box>
+        <DiffStage diff={diff} diffRef={diffRef} loading={loading} />
+      </box>
+      {footerNode ? (
+        <box paddingLeft={1} paddingRight={1} backgroundColor={theme.panel} flexDirection="column">
+          {footerNode}
+        </box>
+      ) : null}
+    </box>
+  )
+})

package/src/ui/components/input-field.tsx

@@ -4,14 +4,35 @@ import { Surface } from './surface'
 interface InputFieldProps {
   active: boolean
   value: string
+  cursorPos?: number
 }
 
-export function InputField({ active, value }: InputFieldProps) {
+export function InputField({ active, cursorPos, value }: InputFieldProps) {
+  const fg = active ? theme.text : theme.textMuted
+  if (!active) {
+    return (
+      <Surface tone="input" padding={1}>
+        <text fg={fg}>{value}</text>
+      </Surface>
+    )
+  }
+
+  const safePos =
+    cursorPos === undefined ? value.length : Math.max(0, Math.min(value.length, cursorPos))
+  const before = value.slice(0, safePos)
+  const atChar = safePos < value.length ? value.charAt(safePos) : undefined
+  const cursorOnLineEnd = atChar === undefined || atChar === '\n'
+  const cursorDisplay = cursorOnLineEnd ? ' ' : (atChar as string)
+  const trailing = cursorOnLineEnd ? value.slice(safePos) : value.slice(safePos + 1)
+
   return (
-    <Surface tone={active ? 'inputActive' : 'input'} padding={1}>
-      <text fg={active ? theme.text : theme.textMuted}>
-        {value}
-        {active ? '_' : ''}
+    <Surface tone="inputActive" padding={1}>
+      <text fg={fg}>
+        {before}
+        <span bg={theme.text} fg={theme.background}>
+          {cursorDisplay}
+        </span>
+        {trailing}
       </text>
     </Surface>
   )

package/src/ui/components/status-bar.tsx

@@ -12,6 +12,10 @@ function getModeColor(focusMode: AppState['focusMode']): string {
       return theme.warning
     case 'modal':
       return theme.warning
+    case 'command-edit':
+      return theme.warning
+    case 'git':
+      return theme.success
     case 'navigation':
     default:
       return theme.accentAlt
@@ -26,6 +30,10 @@ function getModeLabel(focusMode: AppState['focusMode']): string {
       return 'layout'
     case 'modal':
       return 'modal'
+    case 'command-edit':
+      return 'edit'
+    case 'git':
+      return 'git'
     case 'navigation':
     default:
       return 'nav'

package/src/ui/git-view-controls.ts

@@ -0,0 +1,11 @@
+type Scroller = (delta: number) => void
+
+let activeScroller: Scroller | null = null
+
+export function setGitDiffScroller(scroller: Scroller | null): void {
+  activeScroller = scroller
+}
+
+export function scrollGitDiff(delta: number): void {
+  activeScroller?.(delta)
+}

package/src/ui/root.tsx

@@ -7,9 +7,10 @@ import type { ThemeId } from './themes'
 import { useAppStore } from '../state/app-store'
 import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
 import { CreateSessionModal } from './components/create-session-modal'
+import { GitCommitModal } from './components/git-commit-modal'
+import { GitView } from './components/git-view'
 import { HelpModal } from './components/help-modal'
 import { NewTabModal } from './components/new-tab-modal'
-import { PendingChordIndicator } from './components/pending-chord-indicator'
 import { SessionNameModal } from './components/session-name-modal'
 import { SessionPickerModal } from './components/session-picker-modal'
 import { Sidebar } from './components/sidebar'
@@ -133,6 +134,20 @@ function renderModal(
       )
     case 'help':
       return <HelpModal />
+    case 'git-commit': {
+      const titleText =
+        modal.activeField === 'title' ? (modal.editBuffer ?? '') : modal.contentBuffer
+      const bodyText =
+        modal.activeField === 'title' ? modal.contentBuffer : (modal.editBuffer ?? '')
+      return (
+        <GitCommitModal
+          activeField={modal.activeField}
+          body={bodyText}
+          cursorPos={modal.cursorPos ?? (modal.editBuffer ?? '').length}
+          title={titleText}
+        />
+      )
+    }
     case null:
       return null
     default:
@@ -195,6 +210,26 @@ export function RootView({
   const snippetEditorFields = getSnippetEditorFields(modal)
   const splitChrome = PANE_BORDER * 2
 
+  const inGitMode = focusMode === 'git' || modal.type === 'git-commit'
+  if (inGitMode) {
+    return (
+      <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
+        <GitView />
+        <StatusBar />
+        {renderModal(modal, {
+          createSessionFields,
+          currentSessionId,
+          currentTabCount: tabs.length,
+          customCommands,
+          sessions,
+          snippetEditorFields,
+          snippets,
+          themeId,
+        })}
+      </box>
+    )
+  }
+
   return (
     <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
@@ -255,7 +290,6 @@ export function RootView({
         snippets,
         themeId,
       })}
-      <PendingChordIndicator />
     </box>
   )
 }

package/src/ui/status-bar-model.ts

@@ -49,6 +49,14 @@ function getInputHint(activeTab?: TabSession): string {
   return 'Ctrl+z unfocus  Ctrl+w layout  typing goes to active tab'
 }
 
+function getGitHint(modalType: AppState['modal']['type']): string {
+  if (modalType === 'git-commit') {
+    return 'Tab switch field  Enter newline  Ctrl+Enter commit  Esc cancel'
+  }
+
+  return 'j/k file  Ctrl+d/u page  a stage  d unstage/delete  c commit  p push  Esc exit'
+}
+
 export function getStatusBarModel(state: AppState, activeTab?: TabSession): StatusBarModel {
   const currentSession = state.currentSessionId
     ? state.sessions.find((session) => session.id === state.currentSessionId)
@@ -77,6 +85,16 @@ export function getStatusBarModel(state: AppState, activeTab?: TabSession): Stat
         left: `${getActiveTabLabel(activeTab)}  ${sessionIcon}  ${sessionLabel}`,
         right: 'h/j/k/l focus  |/- split  H/L resize  q close  Esc cancel',
       }
+    case 'git':
+      return {
+        left: `${sessionIcon}  ${sessionLabel}`,
+        right: getGitHint(state.modal.type),
+      }
+    case 'command-edit':
+      return {
+        left: `${sessionIcon}  ${sessionLabel}`,
+        right: state.modal.type === 'git-commit' ? getGitHint('git-commit') : 'Esc cancel',
+      }
     case 'navigation':
     default:
       return {

package/src/ui/syntax.ts

@@ -0,0 +1,102 @@
+import { getTreeSitterClient, SyntaxStyle, type ThemeTokenStyle } from '@opentui/core'
+
+import { onThemeChange, theme } from './theme'
+
+let cachedStyle: SyntaxStyle | null = null
+let clientInitPromise: Promise<void> | null = null
+
+onThemeChange(() => {
+  cachedStyle = null
+})
+
+function buildTokens(): ThemeTokenStyle[] {
+  return [
+    {
+      scope: ['comment', 'spell'],
+      style: { dim: true, foreground: theme.textMuted, italic: true },
+    },
+    { scope: ['comment.documentation'], style: { foreground: theme.textMuted, italic: true } },
+
+    {
+      scope: ['string', 'character', 'character.special', 'string.special'],
+      style: { foreground: theme.warning },
+    },
+    {
+      scope: ['string.escape', 'string.regexp', 'string.special.url'],
+      style: { foreground: theme.accentAlt },
+    },
+
+    {
+      scope: ['number', 'boolean', 'constant.builtin', 'constant.numeric'],
+      style: { foreground: theme.danger },
+    },
+    { scope: ['constant', 'constant.character'], style: { foreground: theme.danger } },
+
+    { scope: ['keyword'], style: { bold: true, foreground: theme.accentAlt } },
+    {
+      scope: [
+        'keyword.conditional',
+        'keyword.exception',
+        'keyword.import',
+        'keyword.modifier',
+        'keyword.repeat',
+      ],
+      style: { bold: true, foreground: theme.accentAlt },
+    },
+    {
+      scope: [
+        'keyword.coroutine',
+        'keyword.directive',
+        'keyword.function',
+        'keyword.return',
+        'keyword.type',
+      ],
+      style: { bold: true, foreground: theme.accentAlt, italic: true },
+    },
+    { scope: ['keyword.operator', 'operator'], style: { foreground: theme.accent } },
+
+    {
+      scope: ['function', 'function.call', 'function.method', 'function.method.call'],
+      style: { foreground: theme.success },
+    },
+    { scope: ['function.builtin'], style: { foreground: theme.success, italic: true } },
+    { scope: ['constructor'], style: { bold: true, foreground: theme.success } },
+
+    { scope: ['type', 'type.definition'], style: { foreground: theme.accent, italic: true } },
+    { scope: ['type.builtin'], style: { bold: true, foreground: theme.accent } },
+
+    { scope: ['variable'], style: { foreground: theme.text } },
+    { scope: ['variable.builtin'], style: { foreground: theme.danger, italic: true } },
+    { scope: ['variable.parameter', 'parameter'], style: { foreground: theme.text, italic: true } },
+    { scope: ['variable.member', 'property', 'field'], style: { foreground: theme.accent } },
+
+    { scope: ['attribute'], style: { foreground: theme.warning, italic: true } },
+    { scope: ['tag'], style: { foreground: theme.danger } },
+    { scope: ['tag.attribute'], style: { foreground: theme.warning, italic: true } },
+
+    { scope: ['label'], style: { foreground: theme.warning } },
+    { scope: ['module', 'namespace'], style: { foreground: theme.accentAlt, italic: true } },
+    { scope: ['module.builtin'], style: { bold: true, foreground: theme.accentAlt, italic: true } },
+
+    {
+      scope: ['punctuation.bracket', 'punctuation.delimiter'],
+      style: { foreground: theme.textMuted },
+    },
+    { scope: ['punctuation.special'], style: { foreground: theme.warning } },
+  ]
+}
+
+export function getSyntaxStyle(): SyntaxStyle {
+  if (!cachedStyle) {
+    cachedStyle = SyntaxStyle.fromTheme(buildTokens())
+  }
+  return cachedStyle
+}
+
+export function getSyntaxClient() {
+  const client = getTreeSitterClient()
+  if (!clientInitPromise) {
+    clientInitPromise = client.initialize().catch(() => {})
+  }
+  return client
+}

package/src/ui/theme.ts

@@ -2,8 +2,17 @@ import { type ThemeColors, type ThemeId, THEMES } from './themes'
 
 export const theme: ThemeColors = { ...THEMES.aimux.colors }
 
+type ThemeListener = () => void
+const themeListeners = new Set<ThemeListener>()
+
+export function onThemeChange(listener: ThemeListener): () => void {
+  themeListeners.add(listener)
+  return () => themeListeners.delete(listener)
+}
+
 export function applyTheme(id: ThemeId): void {
   const entry = THEMES[id]
   if (!entry) return
   Object.assign(theme, entry.colors)
+  for (const listener of themeListeners) listener()
 }

package/src/ui/themes.ts

@@ -14,6 +14,8 @@ export interface ThemeColors {
   danger: string
   success: string
   dim: string
+  diffAddBg: string
+  diffRemoveBg: string
 }
 
 export type ThemeId =
@@ -38,6 +40,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#2d3f52',
       borderActive: '#7cd1b8',
       danger: '#f38ba8',
+      diffAddBg: '#1e3d2b',
+      diffRemoveBg: '#3b1e27',
       dim: '#243242',
       overlay: '#0b1016',
       panel: '#16202b',
@@ -58,6 +62,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#45475a',
       borderActive: '#cba6f7',
       danger: '#f38ba8',
+      diffAddBg: '#273c32',
+      diffRemoveBg: '#3b2838',
       dim: '#313244',
       overlay: '#181825',
       panel: '#232334',
@@ -78,6 +84,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#44475a',
       borderActive: '#bd93f9',
       danger: '#ff5555',
+      diffAddBg: '#2f4630',
+      diffRemoveBg: '#4a2f3b',
       dim: '#383a4a',
       overlay: '#1f2029',
       panel: '#2d2f3d',
@@ -98,6 +106,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#2a3440',
       borderActive: '#bd93f9',
       danger: '#ff5555',
+      diffAddBg: '#162b1d',
+      diffRemoveBg: '#2a1820',
       dim: '#1e2630',
       overlay: '#090d11',
       panel: '#131920',
@@ -118,6 +128,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#4f585e',
       borderActive: '#a7c080',
       danger: '#e67e80',
+      diffAddBg: '#35473a',
+      diffRemoveBg: '#45353a',
       dim: '#3d484d',
       overlay: '#232a2e',
       panel: '#343f44',
@@ -138,6 +150,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#504945',
       borderActive: '#b8bb26',
       danger: '#fb4934',
+      diffAddBg: '#2f3a28',
+      diffRemoveBg: '#3a2828',
       dim: '#3c3836',
       overlay: '#1f1d1b',
       panel: '#2e2e2e',
@@ -158,6 +172,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#363646',
       borderActive: '#7e9cd8',
       danger: '#e82424',
+      diffAddBg: '#28332a',
+      diffRemoveBg: '#35252b',
       dim: '#2a2a37',
       overlay: '#171720',
       panel: '#24242e',
@@ -178,6 +194,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#434c5e',
       borderActive: '#88c0d0',
       danger: '#bf616a',
+      diffAddBg: '#2f3d38',
+      diffRemoveBg: '#3d3035',
       dim: '#3b4252',
       overlay: '#252a33',
       panel: '#333a47',
@@ -198,6 +216,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#3e4452',
       borderActive: '#61afef',
       danger: '#e06c75',
+      diffAddBg: '#2c3b2f',
+      diffRemoveBg: '#3d2c33',
       dim: '#3b4048',
       overlay: '#1f2329',
       panel: '#2c313a',
@@ -218,6 +238,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#2e5560',
       borderActive: '#268bd2',
       danger: '#dc322f',
+      diffAddBg: '#1a3a30',
+      diffRemoveBg: '#3a1f28',
       dim: '#073642',
       overlay: '#00242c',
       panel: '#003340',
@@ -238,6 +260,8 @@ export const THEMES: Record<ThemeId, { name: string; colors: ThemeColors }> = {
       border: '#3b4261',
       borderActive: '#7aa2f7',
       danger: '#f7768e',
+      diffAddBg: '#22362d',
+      diffRemoveBg: '#362330',
       dim: '#292e42',
       overlay: '#141722',
       panel: '#1f2335',

package/src/ui/components/pending-chord-indicator.tsx

@@ -1,41 +0,0 @@
-import { useAppStore } from '../../state/app-store'
-import { theme } from '../theme'
-
-function formatChord(chord: string): string {
-  if (chord === 'space') return '␣'
-  if (chord === 'return') return '⏎'
-  if (chord === 'escape') return 'Esc'
-  if (chord === 'tab') return 'Tab'
-  if (chord === 'backspace') return '⌫'
-  if (chord === 'up') return '↑'
-  if (chord === 'down') return '↓'
-  if (chord === 'left') return '←'
-  if (chord === 'right') return '→'
-  return chord
-}
-
-function formatSequence(chords: string[]): string {
-  return chords.map(formatChord).join(' ')
-}
-
-export function PendingChordIndicator() {
-  const pendingChords = useAppStore((s) => s.pendingChords)
-
-  if (!pendingChords || pendingChords.length === 0) return null
-
-  const label = formatSequence(pendingChords)
-
-  return (
-    <box
-      position="absolute"
-      bottom={2}
-      right={2}
-      paddingLeft={1}
-      paddingRight={1}
-      backgroundColor={theme.accent}
-      borderColor={theme.borderActive}
-    >
-      <text fg={theme.background}>{label}…</text>
-    </box>
-  )
-}