@brimveyn/aimux 1.5.4 → 1.6.1

package/src/state/types.ts

@@ -1,3 +1,5 @@
+import type { ModeId } from '@brimveyn/aimux-config'
+
 export type BuiltinAssistantId = 'claude' | 'codex' | 'opencode' | 'terminal'
 
 export type AssistantId = BuiltinAssistantId | (string & {})
@@ -144,13 +146,15 @@ export interface GitPaneState {
   mode: GitPaneMode
   position: GitPanePosition
   ratio: number
+  diffModeRatio: number
+  fileListMode: GitFileListMode
   path: GitPanePathConfig
   diffCount: GitPaneDiffCountConfig
 }
 
 export type GitFileStatus = 'M' | 'A' | 'D' | 'R' | 'C' | 'U' | '?'
 
-export type GitFileSection = 'staged' | 'unstaged' | 'untracked'
+export type GitFileSection = 'staged' | 'unstaged' | 'untracked' | 'historical'
 
 export interface GitFileEntry {
   path: string
@@ -183,12 +187,25 @@ export interface DiffData {
   errorMessage?: string
 }
 
+export type GitDiffView = 'split' | 'stacked'
+export type GitFileListMode = 'tree' | 'flat'
+
+export interface FoldState {
+  top: number
+  bottom: number
+}
+
 export interface GitModeState {
-  selectedFileIndex: number
+  selectedEntryKey: string | null
+  collapsedFolders: Record<string, true>
   diffs: Record<string, DiffData>
   loading: Record<string, boolean>
   pendingDeletePath: string | null
   actionMessage: string | null
+  diffView: GitDiffView
+  folds: Record<string, Record<string, FoldState>>
+  /** Working-tree-vs-HEAD~N offset. 0 = working tree vs HEAD (default). */
+  headOffset: number
 }
 
 interface ModalBase {
@@ -226,11 +243,13 @@ export interface ModalSnippetPicker extends ModalBase {
 
 export interface ModalThemePicker extends ModalBase {
   type: 'theme-picker'
+  entryCount: number
 }
 
 export interface ModalHelp extends ModalBase {
   type: 'help'
   entryCount: number
+  scope: ModeId | null
 }
 
 export interface ModalSplitPicker extends ModalBase {
@@ -323,7 +342,7 @@ export interface AppState {
 export type ModalAction =
   | { type: 'move-modal-cursor'; delta?: number; to?: 'home' | 'end' }
   | { type: 'open-new-tab-modal' }
-  | { type: 'open-help-modal' }
+  | { type: 'open-help-modal'; scope?: ModeId }
   | { type: 'open-split-picker'; direction: import('./layout-tree').SplitDirection }
   | { type: 'open-session-picker' }
   | { type: 'open-session-name-modal'; sessionTargetId?: string; initialName?: string }
@@ -343,7 +362,9 @@ export type ModalAction =
   | { type: 'open-snippet-editor'; snippetId?: string }
   | { type: 'begin-snippet-filter' }
   | { type: 'begin-help-filter' }
+  | { type: 'begin-theme-filter' }
   | { type: 'set-help-entry-count'; count: number }
+  | { type: 'set-theme-entry-count'; count: number }
   | { type: 'open-theme-picker' }
   | { type: 'open-update-available-modal'; currentVersion: string; latestVersion: string }
 
@@ -421,6 +442,7 @@ export type UIAction =
   | { type: 'set-terminal-size'; cols: number; rows: number }
   | { type: 'toggle-git-pane' }
   | { type: 'resize-git-pane'; delta: number }
+  | { type: 'resize-git-diff-pane'; delta: number }
   | { type: 'set-git-pane-mode'; mode: GitPaneMode }
   | { type: 'set-git-pane-position'; position: GitPanePosition }
   | { type: 'set-pending-chords'; chords: string[] | null }
@@ -443,12 +465,30 @@ export type GitPanelAction =
 export type GitModeAction =
   | { type: 'enter-git-mode' }
   | { type: 'exit-git-mode' }
-  | { type: 'git-mode-select-file'; delta: -1 | 1 }
-  | { type: 'git-mode-set-diff'; path: string; diff: DiffData }
-  | { type: 'git-mode-set-loading'; path: string; loading: boolean }
+  | { type: 'git-mode-move-selection'; delta: -1 | 1 }
+  | { type: 'git-mode-move-file-selection'; delta: -1 | 1 }
+  | { type: 'git-mode-select-entry-by-key'; key: string }
+  | { type: 'git-mode-toggle-folder'; key: string }
+  | { type: 'git-mode-toggle-selected-folder' }
+  | { type: 'git-mode-collapse-selection' }
+  | { type: 'git-mode-expand-selection' }
+  | { type: 'git-mode-toggle-file-list-mode' }
+  | { type: 'git-mode-set-diff'; key: string; diff: DiffData }
+  | { type: 'git-mode-set-loading'; key: string; loading: boolean }
   | { type: 'git-mode-set-pending-delete'; path: string | null }
   | { type: 'git-mode-clear-diff-cache'; path: string }
   | { type: 'git-mode-set-message'; message: string | null }
+  | { type: 'git-mode-toggle-diff-view' }
+  | { type: 'git-mode-shift-head-offset'; delta: number }
+  | { type: 'git-mode-set-head-offset'; offset: number }
+  | {
+      type: 'git-mode-fold-adjust'
+      key: string
+      foldId: string
+      side: 'top' | 'bottom'
+      delta: number
+    }
+  | { type: 'git-mode-fold-set'; key: string; foldId: string; top: number; bottom: number }
   | {
       type: 'git-mode-optimistic-move'
       path: string

package/src/state/workspace-save.ts

@@ -25,6 +25,8 @@ export function saveCurrentWorkspace(state: AppState): void {
     ...loadConfig(),
     customCommands: state.customCommands,
     gitPane: {
+      diffModeRatio: state.gitPane.diffModeRatio,
+      fileListMode: state.gitPane.fileListMode,
       mode: state.gitPane.mode,
       position: state.gitPane.position,
       ratio: state.gitPane.ratio,

package/src/ui/components/create-session-modal.tsx

@@ -1,7 +1,7 @@
 import type { DirectoryResult } from '../../state/types'
 
 import { abbreviatePath } from '../path-format'
-import { theme } from '../theme'
+import { getCurrentTheme, useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ListItem } from './list-item'
@@ -21,14 +21,14 @@ function getDirectoryResultIcon(result: DirectoryResult): string {
 
 function getDirectoryResultColor(result: DirectoryResult): string {
   if (result.type === 'worktree') {
-    return theme.warning
+    return getCurrentTheme().colors['editorWarning.foreground']
   }
 
   if (result.type === 'workspace') {
-    return theme.accentAlt
+    return getCurrentTheme().colors['terminal.ansiMagenta']
   }
 
-  return theme.accent
+  return getCurrentTheme().colors['textLink.foreground']
 }
 
 interface CreateSessionModalProps {
@@ -48,6 +48,7 @@ export function CreateSessionModal({
   selectedIndex,
   sessionName,
 }: CreateSessionModalProps) {
+  const theme = useTheme()
   const dirActive = activeField === 'directory'
   const nameActive = activeField === 'name'
 
@@ -58,7 +59,11 @@ export function CreateSessionModal({
       width={uiTokens.modalWidth.xl}
     >
       <box flexDirection="column">
-        <text fg={dirActive ? theme.text : theme.textMuted}>Search projects</text>
+        <text
+          fg={dirActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+        >
+          Search projects
+        </text>
         <InputField
           active={dirActive}
           value={
@@ -68,7 +73,7 @@ export function CreateSessionModal({
       </box>
 
       {dirActive && results.length === 0 && directoryQuery.length > 0 ? (
-        <text fg={theme.textMuted}>No matches</text>
+        <text fg={theme.colors['descriptionForeground']}>No matches</text>
       ) : null}
 
       {dirActive
@@ -82,7 +87,13 @@ export function CreateSessionModal({
                   <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>
                 }
                 title={
-                  <text fg={active ? theme.text : theme.textMuted}>
+                  <text
+                    fg={
+                      active
+                        ? theme.colors['editor.foreground']
+                        : theme.colors['descriptionForeground']
+                    }
+                  >
                     {abbreviatePath(result.path)}
                   </text>
                 }
@@ -92,7 +103,13 @@ export function CreateSessionModal({
         : null}
 
       <box flexDirection="column">
-        <text fg={nameActive ? theme.text : theme.textMuted}>Session name</text>
+        <text
+          fg={
+            nameActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
+          }
+        >
+          Session name
+        </text>
         <InputField active={nameActive} value={sessionName} />
       </box>
     </ModalShell>

package/src/ui/components/diff-renderer/build-rows.ts

@@ -0,0 +1,349 @@
+import type { FileDiffMetadata, Hunk, HunkContent } from '../../../diff-parser'
+import type { FoldState } from '../../../state/types'
+
+export const KEEP_CONTEXT = 3
+export const MIN_FOLD_SIZE = 3
+export const FOLD_STEP = 5
+
+export interface FoldInfo {
+  foldId: string
+  total: number
+  hidden: number
+  topExpanded: number
+  bottomExpanded: number
+}
+
+export type SplitCell =
+  | { content: string; lineIdx: number; lineNumber: number; type: 'context' }
+  | { content: string; lineIdx: number; lineNumber: number; type: 'addition' | 'deletion' }
+  | { fold: FoldInfo; type: 'fold' }
+  | { type: 'filler' }
+
+export interface SplitRow {
+  type: 'row'
+  left: SplitCell
+  right: SplitCell
+  height: number
+}
+
+export type UnifiedRow =
+  | {
+      addLineNumber: number
+      content: string
+      lineIdx: number
+      delLineNumber: number
+      type: 'context'
+      height: number
+    }
+  | {
+      content: string
+      lineIdx: number
+      lineNumber: number
+      type: 'addition' | 'deletion'
+      height: number
+    }
+  | { fold: FoldInfo; type: 'fold' }
+
+export interface HunkHeader {
+  context?: string
+  spec: string
+  type: 'hunk-header'
+}
+
+export type SplitRowOrHeader = HunkHeader | SplitRow
+export type UnifiedRowOrHeader = HunkHeader | UnifiedRow
+
+export type FoldMap = Record<string, FoldState>
+
+function wrapCount(content: string, width: number): number {
+  if (width <= 0) return 1
+  return Math.max(1, Math.ceil(content.length / width))
+}
+
+function cellWraps(content: string, width: number): number {
+  return wrapCount(content, width)
+}
+
+interface ContextSlice {
+  // which file-line indices (relative to content start) to show, and which to fold
+  leadingVisible: number
+  fold: { length: number; offset: number } | null
+  trailingVisible: number
+}
+
+function sliceContext(
+  totalLines: number,
+  hasChangeBefore: boolean,
+  hasChangeAfter: boolean,
+  fold: FoldState
+): ContextSlice {
+  const preKeep = hasChangeBefore ? Math.min(KEEP_CONTEXT, totalLines) : 0
+  const postKeep = hasChangeAfter ? Math.min(KEEP_CONTEXT, totalLines - preKeep) : 0
+  const middle = totalLines - preKeep - postKeep
+  if (middle < MIN_FOLD_SIZE) {
+    return { fold: null, leadingVisible: totalLines, trailingVisible: 0 }
+  }
+  const top = Math.min(fold.top, middle)
+  const bottom = Math.min(fold.bottom, middle - top)
+  const hidden = middle - top - bottom
+  if (hidden <= 0) {
+    return { fold: null, leadingVisible: totalLines, trailingVisible: 0 }
+  }
+  return {
+    fold: { length: hidden, offset: preKeep + top },
+    leadingVisible: preKeep + top,
+    trailingVisible: postKeep + bottom,
+  }
+}
+
+function makeFoldInfo(foldId: string, middle: number, fold: FoldState, hidden: number): FoldInfo {
+  const topExpanded = Math.min(fold.top, middle)
+  const bottomExpanded = Math.min(fold.bottom, middle - topExpanded)
+  return { bottomExpanded, foldId, hidden, topExpanded, total: middle }
+}
+
+function contextNeighbors(
+  contents: HunkContent[],
+  index: number
+): { hasChangeBefore: boolean; hasChangeAfter: boolean } {
+  let hasChangeBefore = false
+  for (let i = index - 1; i >= 0; i--) {
+    const c = contents[i]
+    if (c && c.type !== 'context') {
+      hasChangeBefore = true
+      break
+    }
+  }
+  let hasChangeAfter = false
+  for (let i = index + 1; i < contents.length; i++) {
+    const c = contents[i]
+    if (c && c.type !== 'context') {
+      hasChangeAfter = true
+      break
+    }
+  }
+  return { hasChangeAfter, hasChangeBefore }
+}
+
+export function buildSplitRows(
+  file: FileDiffMetadata,
+  folds: FoldMap = {},
+  contentWidth = 0
+): SplitRowOrHeader[] {
+  const rows: SplitRowOrHeader[] = []
+  const pairHeight = (l: SplitCell, r: SplitCell): number => {
+    const lh =
+      l.type === 'context' || l.type === 'addition' || l.type === 'deletion'
+        ? cellWraps(l.content, contentWidth)
+        : 1
+    const rh =
+      r.type === 'context' || r.type === 'addition' || r.type === 'deletion'
+        ? cellWraps(r.content, contentWidth)
+        : 1
+    return Math.max(lh, rh)
+  }
+  for (const [hIdx, hunk] of file.hunks.entries()) {
+    rows.push(makeHeader(hunk))
+    let delLine = hunk.deletionStart
+    let addLine = hunk.additionStart
+    for (const [cIdx, content] of hunk.hunkContent.entries()) {
+      if (content.type === 'context') {
+        const foldId = `${hIdx}:${cIdx}`
+        const { hasChangeAfter, hasChangeBefore } = contextNeighbors(hunk.hunkContent, cIdx)
+        const foldState = folds[foldId] ?? { bottom: 0, top: 0 }
+        const slice = sliceContext(content.lines, hasChangeBefore, hasChangeAfter, foldState)
+
+        const pushContext = (start: number, count: number): void => {
+          for (let i = 0; i < count; i++) {
+            const offset = start + i
+            const addIdx = content.additionLineIndex + offset
+            const delIdx = content.deletionLineIndex + offset
+            const text = stripNewline(file.additionLines[addIdx] ?? '')
+            const left: SplitCell = {
+              content: text,
+              lineIdx: delIdx,
+              lineNumber: delLine++,
+              type: 'context',
+            }
+            const right: SplitCell = {
+              content: text,
+              lineIdx: addIdx,
+              lineNumber: addLine++,
+              type: 'context',
+            }
+            rows.push({ height: pairHeight(left, right), left, right, type: 'row' })
+          }
+        }
+
+        pushContext(0, slice.leadingVisible)
+        if (slice.fold) {
+          const preKeep = hasChangeBefore ? Math.min(KEEP_CONTEXT, content.lines) : 0
+          const postKeep = hasChangeAfter ? Math.min(KEEP_CONTEXT, content.lines - preKeep) : 0
+          const middle = content.lines - preKeep - postKeep
+          const info = makeFoldInfo(foldId, middle, foldState, slice.fold.length)
+          rows.push({
+            height: 1,
+            left: { fold: info, type: 'fold' },
+            right: { fold: info, type: 'fold' },
+            type: 'row',
+          })
+          delLine += slice.fold.length
+          addLine += slice.fold.length
+          pushContext(slice.fold.offset + slice.fold.length, slice.trailingVisible)
+        }
+      } else {
+        const max = Math.max(content.additions, content.deletions)
+        for (let i = 0; i < max; i++) {
+          const delIdx = content.deletionLineIndex + i
+          const addIdx = content.additionLineIndex + i
+          const left: SplitCell =
+            i < content.deletions
+              ? {
+                  content: stripNewline(file.deletionLines[delIdx] ?? ''),
+                  lineIdx: delIdx,
+                  lineNumber: delLine++,
+                  type: 'deletion',
+                }
+              : { type: 'filler' }
+          const right: SplitCell =
+            i < content.additions
+              ? {
+                  content: stripNewline(file.additionLines[addIdx] ?? ''),
+                  lineIdx: addIdx,
+                  lineNumber: addLine++,
+                  type: 'addition',
+                }
+              : { type: 'filler' }
+          rows.push({ height: pairHeight(left, right), left, right, type: 'row' })
+        }
+      }
+    }
+  }
+  return rows
+}
+
+export function buildUnifiedRows(
+  file: FileDiffMetadata,
+  folds: FoldMap = {},
+  contentWidth = 0
+): UnifiedRowOrHeader[] {
+  const rows: UnifiedRowOrHeader[] = []
+  for (const [hIdx, hunk] of file.hunks.entries()) {
+    rows.push(makeHeader(hunk))
+    let delLine = hunk.deletionStart
+    let addLine = hunk.additionStart
+    for (const [cIdx, content] of hunk.hunkContent.entries()) {
+      if (content.type === 'context') {
+        const foldId = `${hIdx}:${cIdx}`
+        const { hasChangeAfter, hasChangeBefore } = contextNeighbors(hunk.hunkContent, cIdx)
+        const foldState = folds[foldId] ?? { bottom: 0, top: 0 }
+        const slice = sliceContext(content.lines, hasChangeBefore, hasChangeAfter, foldState)
+
+        const pushContext = (start: number, count: number): void => {
+          for (let i = 0; i < count; i++) {
+            const offset = start + i
+            const addIdx = content.additionLineIndex + offset
+            const text = stripNewline(file.additionLines[addIdx] ?? '')
+            rows.push({
+              addLineNumber: addLine++,
+              content: text,
+              delLineNumber: delLine++,
+              height: cellWraps(text, contentWidth),
+              lineIdx: addIdx,
+              type: 'context',
+            })
+          }
+        }
+
+        pushContext(0, slice.leadingVisible)
+        if (slice.fold) {
+          const preKeep = hasChangeBefore ? Math.min(KEEP_CONTEXT, content.lines) : 0
+          const postKeep = hasChangeAfter ? Math.min(KEEP_CONTEXT, content.lines - preKeep) : 0
+          const middle = content.lines - preKeep - postKeep
+          const info = makeFoldInfo(foldId, middle, foldState, slice.fold.length)
+          rows.push({ fold: info, type: 'fold' })
+          delLine += slice.fold.length
+          addLine += slice.fold.length
+          pushContext(slice.fold.offset + slice.fold.length, slice.trailingVisible)
+        }
+      } else {
+        for (let i = 0; i < content.deletions; i++) {
+          const delIdx = content.deletionLineIndex + i
+          const text = stripNewline(file.deletionLines[delIdx] ?? '')
+          rows.push({
+            content: text,
+            height: cellWraps(text, contentWidth),
+            lineIdx: delIdx,
+            lineNumber: delLine++,
+            type: 'deletion',
+          })
+        }
+        for (let i = 0; i < content.additions; i++) {
+          const addIdx = content.additionLineIndex + i
+          const text = stripNewline(file.additionLines[addIdx] ?? '')
+          rows.push({
+            content: text,
+            height: cellWraps(text, contentWidth),
+            lineIdx: addIdx,
+            lineNumber: addLine++,
+            type: 'addition',
+          })
+        }
+      }
+    }
+  }
+  return rows
+}
+
+function rowHeight(row: SplitRowOrHeader | UnifiedRowOrHeader): number {
+  if (row.type === 'hunk-header') return 1
+  if (row.type === 'row') return row.height
+  if (row.type === 'fold') return 1
+  return row.height
+}
+
+function isChangeRow(row: SplitRowOrHeader | UnifiedRowOrHeader): boolean {
+  if (row.type === 'row') {
+    return (
+      row.left.type === 'addition' ||
+      row.left.type === 'deletion' ||
+      row.right.type === 'addition' ||
+      row.right.type === 'deletion'
+    )
+  }
+  return row.type === 'addition' || row.type === 'deletion'
+}
+
+export function firstChangeRowOffset(
+  rows: readonly (SplitRowOrHeader | UnifiedRowOrHeader)[]
+): number {
+  let offset = 0
+  for (const row of rows) {
+    if (isChangeRow(row)) return offset
+    offset += rowHeight(row)
+  }
+  return -1
+}
+
+function makeHeader(hunk: Hunk): HunkHeader {
+  const spec = `@@ -${hunk.deletionStart},${hunk.deletionCount} +${hunk.additionStart},${hunk.additionCount} @@`
+  return { context: hunk.hunkContext, spec, type: 'hunk-header' }
+}
+
+function stripNewline(s: string): string {
+  if (s.endsWith('\r\n')) return s.slice(0, -2)
+  if (s.endsWith('\n')) return s.slice(0, -1)
+  return s
+}
+
+export function gutterWidth(file: FileDiffMetadata): number {
+  let max = 1
+  for (const h of file.hunks) {
+    max = Math.max(
+      max,
+      h.deletionStart + h.deletionCount - 1,
+      h.additionStart + h.additionCount - 1
+    )
+  }
+  return Math.max(2, String(max).length)
+}

package/src/ui/components/diff-renderer/filetype.ts

@@ -0,0 +1,29 @@
+const EXT_TO_SHIKI: Record<string, string> = {
+  cjs: 'javascript',
+  css: 'css',
+  go: 'go',
+  html: 'html',
+  js: 'javascript',
+  json: 'json',
+  jsx: 'jsx',
+  markdown: 'markdown',
+  md: 'markdown',
+  mdx: 'mdx',
+  mjs: 'javascript',
+  py: 'python',
+  rs: 'rust',
+  sh: 'shellscript',
+  toml: 'toml',
+  ts: 'typescript',
+  tsx: 'tsx',
+  yaml: 'yaml',
+  yml: 'yaml',
+  zig: 'zig',
+}
+
+export function filetypeFromPath(path: string): string | undefined {
+  const dot = path.lastIndexOf('.')
+  if (dot < 0) return undefined
+  const ext = path.slice(dot + 1).toLowerCase()
+  return EXT_TO_SHIKI[ext]
+}

package/src/ui/components/diff-renderer/fold-strip.tsx

@@ -0,0 +1,86 @@
+import { useTheme } from '../../theme'
+import { FOLD_STEP, type FoldInfo } from './build-rows'
+import { type FoldDispatch } from './pierre-diff'
+
+interface Props {
+  fold: FoldInfo
+  dispatch: FoldDispatch
+}
+
+function Button({ label, onPress }: { label: string; onPress: () => void }) {
+  const theme = useTheme()
+  return (
+    <box
+      paddingLeft={1}
+      paddingRight={1}
+      backgroundColor={theme.colors['sideBar.background']}
+      onMouseDown={onPress}
+    >
+      <text fg={theme.colors['textLink.foreground']}>{label}</text>
+    </box>
+  )
+}
+
+function Spacer() {
+  return <text> </text>
+}
+
+export function FoldStrip({ dispatch, fold }: Props) {
+  const theme = useTheme()
+  const { bottomExpanded, foldId, hidden, topExpanded, total } = fold
+  const stepUp = Math.min(FOLD_STEP, hidden)
+  const stepDown = Math.min(FOLD_STEP, hidden)
+  const shrinkUp = Math.min(FOLD_STEP, topExpanded)
+  const shrinkDown = Math.min(FOLD_STEP, bottomExpanded)
+
+  const controls: React.ReactNode[] = []
+  if (hidden > 0) {
+    controls.push(
+      <Button
+        key="up"
+        label={`↑${stepUp}`}
+        onPress={() => dispatch.adjust(foldId, 'top', stepUp)}
+      />,
+      <Spacer key="sp1" />,
+      <Button
+        key="down"
+        label={`↓${stepDown}`}
+        onPress={() => dispatch.adjust(foldId, 'bottom', stepDown)}
+      />,
+      <Spacer key="sp2" />,
+      <Button key="all" label="⇅ all" onPress={() => dispatch.set(foldId, total, 0)} />
+    )
+  }
+  if (shrinkUp > 0) {
+    controls.push(
+      <Spacer key="sp3" />,
+      <Button
+        key="shrinkUp"
+        label={`−↑${shrinkUp}`}
+        onPress={() => dispatch.adjust(foldId, 'top', -shrinkUp)}
+      />
+    )
+  }
+  if (shrinkDown > 0) {
+    controls.push(
+      <Spacer key="sp4" />,
+      <Button
+        key="shrinkDown"
+        label={`−↓${shrinkDown}`}
+        onPress={() => dispatch.adjust(foldId, 'bottom', -shrinkDown)}
+      />
+    )
+  }
+
+  return (
+    <box
+      flexDirection="row"
+      backgroundColor={theme.colors['sideBarSectionHeader.background']}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      <text fg={theme.colors['descriptionForeground']}>{`⋯ ${hidden} hidden `}</text>
+      {controls}
+    </box>
+  )
+}