@brimveyn/aimux 1.6.1 → 1.7.0

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

@@ -13,7 +13,7 @@ import type {
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { buildGitTreeRows, type GitTreeFileRow, type GitTreeFolderRow } from '../../state/git-tree'
-import { getCurrentTheme, useTheme } from '../theme'
+import { getCurrentTheme, getTransparent, useTheme, useTransparent } from '../theme'
 
 interface GitPanelProps {
   collapsedFolders?: Record<string, true>
@@ -24,6 +24,7 @@ interface GitPanelProps {
   pathConfig?: GitPanePathConfig
   diffCountConfig?: GitPaneDiffCountConfig
   headOffset?: number
+  compact?: boolean
 }
 
 function sectionTitle(section: GitFileSection, headOffset: number): string {
@@ -158,7 +159,10 @@ function renderDiffCount(
 }
 
 function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode {
-  const bg = isSelected ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined
+  const bg =
+    isSelected && !getTransparent()
+      ? getCurrentTheme().colors['list.activeSelectionBackground']
+      : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
@@ -172,7 +176,10 @@ function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode
           <text fg={getCurrentTheme().colors['descriptionForeground']} bg={bg}>
             {row.isCollapsed ? '▸' : '▾'}
           </text>
-          <text fg={getCurrentTheme().colors['terminal.ansiMagenta']} bg={bg} wrapMode="none">
+          <text fg={getCurrentTheme().colors['textLink.foreground']} bg={bg}>
+            {row.isCollapsed ? '\uf07b' : '\uf07c'}
+          </text>
+          <text fg={getCurrentTheme().colors['textLink.foreground']} bg={bg} wrapMode="none">
             {row.name}
           </text>
         </box>
@@ -192,7 +199,10 @@ function renderFileRow(
 ): ReactNode {
   const file = row.file
   const hasNumstat = file.added !== null || file.removed !== null
-  const bg = isSelected ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined
+  const bg =
+    isSelected && !getTransparent()
+      ? getCurrentTheme().colors['list.activeSelectionBackground']
+      : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
@@ -222,7 +232,8 @@ function renderTreeSection(
   selectedEntryKey: string | null | undefined,
   showListModeToggle: boolean,
   pathConfig: GitPanePathConfig,
-  diffCountConfig: GitPaneDiffCountConfig
+  diffCountConfig: GitPaneDiffCountConfig,
+  marginTop: number
 ): ReactNode {
   if (files.length === 0) return null
   const nextFileListMode = fileListMode === 'tree' ? 'flat' : 'tree'
@@ -231,7 +242,7 @@ function renderTreeSection(
     runSideEffectGlobal({ mode: nextFileListMode, type: 'persist-git-file-list-mode' })
   }
   return (
-    <box key={section} flexDirection="column">
+    <box key={section} flexDirection="column" marginTop={marginTop}>
       <box flexDirection="row" justifyContent="space-between">
         <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
           <strong>
@@ -327,6 +338,7 @@ const DEFAULT_DIFF_COUNT_CONFIG: GitPaneDiffCountConfig = { enabled: true }
 
 export const GitPanel = memo(function GitPanel({
   collapsedFolders = {},
+  compact = false,
   diffCountConfig = DEFAULT_DIFF_COUNT_CONFIG,
   fileListMode = 'tree',
   gitPanel,
@@ -336,11 +348,12 @@ export const GitPanel = memo(function GitPanel({
   selectedEntryKey,
 }: GitPanelProps) {
   const theme = useTheme()
+  useTransparent()
   const sectionOrder = headOffset > 0 ? HISTORICAL_SECTION_ORDER : BASE_SECTION_ORDER
   const scrollRef = useRef<ScrollBoxRenderable | null>(null)
   const tree = useMemo(
-    () => buildGitTreeRows(gitPanel.files, collapsedFolders, fileListMode),
-    [collapsedFolders, fileListMode, gitPanel.files]
+    () => buildGitTreeRows(gitPanel.files, collapsedFolders, fileListMode, compact),
+    [collapsedFolders, compact, fileListMode, gitPanel.files]
   )
   const { added: addedW, removed: removedW } = useMemo(
     () => maxDigitWidth(gitPanel.files),
@@ -382,8 +395,11 @@ export const GitPanel = memo(function GitPanel({
           viewportCulling
           contentOptions={{ flexDirection: 'column', gap: 0 }}
         >
-          {sectionOrder.map((key) => {
+          {sectionOrder.map((key, idx) => {
             const section = tree.sections.find((entry) => entry.section === key)
+            const priorHasFiles = sectionOrder
+              .slice(0, idx)
+              .some((k) => (tree.sections.find((e) => e.section === k)?.files.length ?? 0) > 0)
             return renderTreeSection(
               key,
               sectionTitle(key, headOffset),
@@ -395,7 +411,8 @@ export const GitPanel = memo(function GitPanel({
               selectedEntryKey,
               key === toggleSection,
               pathConfig,
-              diffCountConfig
+              diffCountConfig,
+              priorHasFiles ? 1 : 0
             )
           })}
         </scrollbox>

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

@@ -4,14 +4,16 @@ import { memo, useEffect, useRef } from 'react'
 import type { DiffData, GitDiffView } from '../../state/types'
 import type { ThemeId } from '../themes'
 
+import { diffHash } from '../../git/diff-hash'
 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 { getSelectedGitFile, gitFileKey } from '../../state/git-tree'
 import { setGitDiffScroller } from '../git-view-controls'
-import { useTheme } from '../theme'
+import { useBg, useTheme } from '../theme'
 import { PierreDiff, type PierreDiffHandle } from './diff-renderer'
+import { useDiffPrefetch } from './diff-renderer/use-diff-prefetch'
 import { GitPanel } from './git-panel'
 
 interface DiffStageProps {
@@ -104,6 +106,7 @@ interface GitViewProps {
 
 export const GitView = memo(function GitView({ themeId }: GitViewProps) {
   const theme = useTheme()
+  const sidebarBg = useBg('sideBar.background')
   const dimensions = useTerminalDimensions()
   const gitPane = useAppStore((s) => s.gitPane)
   const gitPanel = useAppStore((s) => s.gitPanel)
@@ -124,6 +127,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
 
   const selectedFile = getSelectedGitFile(gitPanel.files, {
     collapsedFolders: gitMode.collapsedFolders,
+    compact: gitPane.treeCompaction,
     fileListMode: gitPane.fileListMode,
     selectedEntryKey: gitMode.selectedEntryKey,
   })
@@ -147,6 +151,13 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
     return () => setGitDiffScroller(null)
   }, [])
 
+  useDiffPrefetch(gitMode.selectedEntryKey, gitPane.prefetchRadius, {
+    enabled: focusMode === 'git',
+    headOffset: gitMode.headOffset,
+    projectPath,
+    themeId,
+  })
+
   useEffect(() => {
     if (focusMode !== 'git') return
     if (!selectedFile || !projectPath) return
@@ -154,7 +165,14 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
     if (diff || loading) return
     dispatchGlobal({ key: selectedDiffKey, loading: true, type: 'git-mode-set-loading' })
     void fetchDiff(projectPath, selectedFile, gitMode.headOffset)
-      .then((d) => dispatchGlobal({ diff: d, key: selectedDiffKey, type: 'git-mode-set-diff' }))
+      .then((d) =>
+        dispatchGlobal({
+          diff: d,
+          hash: diffHash(d.rawDiff),
+          key: selectedDiffKey,
+          type: 'git-mode-set-diff',
+        })
+      )
       .catch(() =>
         dispatchGlobal({ key: selectedDiffKey, loading: false, type: 'git-mode-set-loading' })
       )
@@ -193,7 +211,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
         <box
           width={fileBarWidth}
           flexDirection="column"
-          backgroundColor={theme.colors['sideBar.background']}
+          backgroundColor={sidebarBg}
           padding={0}
           gap={0}
         >
@@ -219,6 +237,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
           </text>
           <GitPanel
             collapsedFolders={gitMode.collapsedFolders}
+            compact={gitPane.treeCompaction}
             fileListMode={gitPane.fileListMode}
             gitPanel={gitPanel}
             headOffset={gitMode.headOffset}
@@ -236,12 +255,7 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
         />
       </box>
       {footerNode ? (
-        <box
-          paddingLeft={1}
-          paddingRight={1}
-          backgroundColor={theme.colors['sideBar.background']}
-          flexDirection="column"
-        >
+        <box paddingLeft={1} paddingRight={1} backgroundColor={sidebarBg} flexDirection="column">
           {footerNode}
         </box>
       ) : null}

package/src/ui/components/help-modal.tsx

@@ -1,207 +1,92 @@
 import type { ModeId } from '@brimveyn/aimux-config'
 
-import { useTerminalDimensions } from '@opentui/react'
-import { useLayoutEffect, useMemo, useRef } from 'react'
+import { useLayoutEffect, useMemo } from 'react'
 
-import {
-  collectHelpEntries,
-  HELP_MODE_LABELS,
-  type HelpEntry,
-} from '../../input/keymap/help-entries'
+import { collectHelpEntries, HELP_MODE_LABELS } from '../../input/keymap/help-entries'
 import { dispatchGlobal } from '../../state/dispatch-ref'
 import { useKeymap } from '../keymap-context'
 import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
-import { ModalFilterBar } from './modal-filter-bar'
-import { ModalShell } from './modal-shell'
+import { Picker, type PickerItem } from './picker'
 
 interface HelpModalProps {
   filter: string | null
   selectedIndex: number
   scope: ModeId | null
+  cursorPos?: number
 }
 
-function matchesFilter(entry: HelpEntry, needle: string): boolean {
+function matchesFilter(needle: string, ...fields: (string | undefined)[]): boolean {
   if (!needle) return true
   const lower = needle.toLowerCase()
-  return (
-    (entry.description?.toLowerCase().includes(lower) ?? false) ||
-    entry.modeLabel.toLowerCase().includes(lower) ||
-    entry.keysDisplay.toLowerCase().includes(lower) ||
-    (entry.group?.toLowerCase().includes(lower) ?? false)
-  )
-}
-
-type Row =
-  | { kind: 'header'; label: string }
-  | { kind: 'entry'; entry: HelpEntry; entryIndex: number }
-
-function buildRows(entries: HelpEntry[]): Row[] {
-  const rows: Row[] = []
-  let lastLabel: string | null = null
-  for (let entryIndex = 0; entryIndex < entries.length; entryIndex++) {
-    const entry = entries[entryIndex]
-    if (!entry) continue
-    if (entry.modeLabel !== lastLabel) {
-      rows.push({ kind: 'header', label: entry.modeLabel })
-      lastLabel = entry.modeLabel
-    }
-    rows.push({ entry, entryIndex, kind: 'entry' })
-  }
-  return rows
+  return fields.some((f) => f?.toLowerCase().includes(lower))
 }
 
-const KEYS_COLUMN_WIDTH = 24
-const VIEWPORT_HEIGHT_RATIO = 0.6
-const MODAL_CHROME_ROWS = 6
-
-function clampSelection(index: number, count: number): number {
-  if (count === 0) return 0
-  return Math.max(0, Math.min(count - 1, index))
-}
-
-/**
- * Pick a window start that (a) keeps the selected row on screen and
- * (b) only scrolls when the selection leaves the margin — avoids jumpy
- * recentering on every keypress.
- */
-function computeWindowStart(
-  prevStart: number,
-  selectedRowIndex: number,
-  total: number,
-  windowSize: number
-): number {
-  if (total <= windowSize) return 0
-  const margin = 1
-  const maxStart = total - windowSize
-  let start = Math.max(0, Math.min(maxStart, prevStart))
-  const topThreshold = start + margin
-  const bottomThreshold = start + windowSize - 1 - margin
-  if (selectedRowIndex < topThreshold) {
-    start = Math.max(0, selectedRowIndex - margin)
-  } else if (selectedRowIndex > bottomThreshold) {
-    start = Math.min(maxStart, selectedRowIndex - windowSize + 1 + margin)
-  }
-  return start
-}
-
-export function HelpModal({ filter, scope, selectedIndex }: HelpModalProps) {
+export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModalProps) {
   const theme = useTheme()
   const config = useKeymap()
-  const dimensions = useTerminalDimensions()
   const allEntries = useMemo(() => collectHelpEntries(config), [config])
   const scoped = useMemo(
     () => (scope ? allEntries.filter((e) => e.mode === scope) : allEntries),
     [allEntries, scope]
   )
   const filtered = useMemo(
-    () => scoped.filter((e) => matchesFilter(e, filter ?? '')),
+    () =>
+      scoped.filter((e) =>
+        matchesFilter(filter ?? '', e.description, e.modeLabel, e.keysDisplay, e.group)
+      ),
     [scoped, filter]
   )
+
   const title = useMemo(() => {
     if (!scope) return 'Keybindings'
     const label = HELP_MODE_LABELS.find((m) => m.modeId === scope)?.label ?? scope
     return `${label} — keybindings`
   }, [scope])
-  const rows = useMemo(() => buildRows(filtered), [filtered])
 
   useLayoutEffect(() => {
     dispatchGlobal({ count: filtered.length, type: 'set-help-entry-count' })
   }, [filtered.length])
 
-  const effectiveIndex = clampSelection(selectedIndex, filtered.length)
-  const selectedRowIndex = Math.max(
-    0,
-    rows.findIndex((r) => r.kind === 'entry' && r.entryIndex === effectiveIndex)
-  )
-  const maxHeight = Math.max(6, Math.floor(dimensions.height * VIEWPORT_HEIGHT_RATIO))
-  const listHeight = Math.max(1, maxHeight - MODAL_CHROME_ROWS)
-
-  const prevStartRef = useRef(0)
-  const prevFilterRef = useRef<string | null>(filter)
-  // Reset scroll when filter changes; selection goes back to index 0.
-  if (prevFilterRef.current !== filter) {
-    prevFilterRef.current = filter
-    prevStartRef.current = 0
-  }
-  const start = computeWindowStart(prevStartRef.current, selectedRowIndex, rows.length, listHeight)
-  prevStartRef.current = start
-  const visible = rows.slice(start, start + listHeight)
+  const items: PickerItem[] = filtered.map((entry, index) => {
+    const active = index === selectedIndex
+    return {
+      group: entry.modeLabel,
+      key: `${entry.mode}::${entry.keysDisplay}::${entry.description ?? ''}::${index}`,
+      title: (
+        <text
+          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+          wrapMode="none"
+        >
+          {entry.description ?? ''}
+        </text>
+      ),
+      trailing: (
+        <text
+          fg={active ? theme.colors['textLink.foreground'] : theme.colors['terminal.ansiMagenta']}
+          wrapMode="none"
+        >
+          {entry.keysDisplay}
+        </text>
+      ),
+    }
+  })
 
   return (
-    <ModalShell
+    <Picker
       title={title}
-      keybindsModeId="modal.help"
+      keybindsModeId="modal.help.filtering"
       width={uiTokens.modalWidth.lg}
-      footer={
-        <box flexDirection="column" gap={0}>
-          <text fg={theme.colors['editor.lineHighlightBackground']}>
-            {filtered.length === 0
-              ? ''
-              : ` ${effectiveIndex + 1} / ${filtered.length}${filter ? '' : ' — type / to filter'}`}
-          </text>
-          <ModalFilterBar filter={filter} />
-        </box>
-      }
-    >
-      {filtered.length === 0 ? (
+      filter={filter}
+      cursorPos={cursorPos}
+      items={items}
+      selectedIndex={selectedIndex}
+      emptyState={
         <text fg={theme.colors['descriptionForeground']}>
           {filter ? 'No matching bindings.' : 'No bindings registered.'}
         </text>
-      ) : (
-        <box height={listHeight} flexDirection="column" overflow="hidden">
-          {visible.map((row, i) => {
-            const rowIndex = start + i
-            if (row.kind === 'header') {
-              return (
-                <box key={`h-${rowIndex}`} paddingLeft={1} paddingTop={i === 0 ? 0 : 1}>
-                  <text fg={theme.colors['editorWarning.foreground']} wrapMode="none">
-                    <strong>{row.label}</strong>
-                  </text>
-                </box>
-              )
-            }
-            const active = row.entryIndex === effectiveIndex
-            const bg = active ? theme.colors['list.activeSelectionBackground'] : undefined
-            return (
-              <box
-                key={`e-${rowIndex}`}
-                flexDirection="row"
-                paddingLeft={2}
-                paddingRight={1}
-                backgroundColor={bg}
-              >
-                <box width={KEYS_COLUMN_WIDTH} flexShrink={0}>
-                  <text
-                    fg={
-                      active
-                        ? theme.colors['textLink.foreground']
-                        : theme.colors['terminal.ansiMagenta']
-                    }
-                    bg={bg}
-                    wrapMode="none"
-                  >
-                    {row.entry.keysDisplay}
-                  </text>
-                </box>
-                <box flexGrow={1} overflow="hidden">
-                  <text
-                    fg={
-                      active
-                        ? theme.colors['editor.foreground']
-                        : theme.colors['descriptionForeground']
-                    }
-                    bg={bg}
-                    wrapMode="none"
-                  >
-                    {row.entry.description ?? ''}
-                  </text>
-                </box>
-              </box>
-            )
-          })}
-        </box>
-      )}
-    </ModalShell>
+      }
+      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+    />
   )
 }

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

@@ -5,15 +5,19 @@ interface InputFieldProps {
   active: boolean
   value: string
   cursorPos?: number
+  placeholder?: string
 }
 
-export function InputField({ active, cursorPos, value }: InputFieldProps) {
+export function InputField({ active, cursorPos, placeholder, value }: InputFieldProps) {
   const theme = useTheme()
   const fg = active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
   if (!active) {
+    const showPlaceholder = !value && !!placeholder
     return (
       <Surface tone="input" padding={1}>
-        <text fg={fg}>{value}</text>
+        <text fg={showPlaceholder ? theme.colors['editorLineNumber.foreground'] : fg}>
+          {showPlaceholder ? placeholder : value}
+        </text>
       </Surface>
     )
   }

package/src/ui/components/list-item.tsx

@@ -8,16 +8,22 @@ export type ListItemDirection = 'row' | 'column'
 interface ListItemProps {
   active: boolean
   direction?: ListItemDirection
+  id?: string
   leading?: ReactNode
   subtitle?: ReactNode
   title: ReactNode
   trailing?: ReactNode
+  onHover?: () => void
+  onClick?: () => void
 }
 
 export function ListItem({
   active,
   direction = 'column',
+  id,
   leading,
+  onClick,
+  onHover,
   subtitle,
   title,
   trailing,
@@ -25,34 +31,36 @@ export function ListItem({
   const theme = useTheme()
   const isRow = direction === 'row'
   return (
-    <Surface
-      tone={active ? 'selected' : 'elevated'}
-      paddingLeft={isRow ? 2 : 1}
-      paddingRight={isRow ? 2 : 1}
-    >
-      <box flexDirection="column">
-        <box flexDirection="row">
-          {isRow ? null : (
-            <>
-              <text
-                fg={
-                  active
-                    ? theme.colors['textLink.foreground']
-                    : theme.colors['editor.lineHighlightBackground']
-                }
-              >
-                {active ? '›' : '·'}
-              </text>
-              <text> </text>
-            </>
-          )}
-          {leading}
-          {leading ? <text> </text> : null}
-          <box flexGrow={isRow ? 0 : 1}>{title}</box>
-          {trailing ? <box>{trailing}</box> : null}
+    <box id={id} onMouseOver={onHover} onMouseDown={onClick}>
+      <Surface
+        tone={active ? 'selected' : 'elevated'}
+        paddingLeft={isRow ? 2 : 1}
+        paddingRight={isRow ? 2 : 1}
+      >
+        <box flexDirection="column">
+          <box flexDirection="row">
+            {isRow ? null : (
+              <>
+                <text
+                  fg={
+                    active
+                      ? theme.colors['textLink.foreground']
+                      : theme.colors['editor.lineHighlightBackground']
+                  }
+                >
+                  {active ? '›' : '·'}
+                </text>
+                <text> </text>
+              </>
+            )}
+            {leading}
+            {leading ? <text> </text> : null}
+            <box flexGrow={isRow ? 0 : 1}>{title}</box>
+            {trailing ? <box>{trailing}</box> : null}
+          </box>
+          {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}
         </box>
-        {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}
-      </box>
-    </Surface>
+      </Surface>
+    </box>
   )
 }

package/src/ui/components/modal-shell.tsx

@@ -1,9 +1,10 @@
 import type { ModeId } from '@brimveyn/aimux-config'
-import type { ReactNode } from 'react'
 
-import { useTheme } from '../theme'
+import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
+import { type ReactNode } from 'react'
+
+import { useTheme, useTransparent } from '../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
-import { Surface } from './surface'
 
 interface ModalShellProps {
   children: ReactNode
@@ -15,6 +16,43 @@ interface ModalShellProps {
   width: number | `${number}%`
 }
 
+const TRANSPARENT_RGBA = RGBA.fromValues(0, 0, 0, 0)
+
+// opentui's BoxRenderable only paints a fill when `backgroundColor.a > 0`, so
+// a fully transparent modal bg leaks the chrome characters underneath. The
+// `renderAfter` hook runs after the box paints itself but before its children
+// render, so we manually overwrite every interior cell with a blank space.
+//
+// Two gotchas we hit by reading the zig source (packages/core/src/zig/buffer.zig):
+//  1. `setCellWithAlphaBlending` early-returns via `isFullyTransparent` when
+//     both fg and bg alpha are 0 — nothing gets written.
+//  2. Its `blendCells` deliberately preserves the destination char when the
+//     overlay char is `DEFAULT_SPACE_CHAR` (codepoint 32) so that drawing a
+//     space on top of existing text does not erase it.
+//
+// `setCell` (→ `bufferSetCell` → zig `buffer.set`) bypasses both: it writes
+// the cell unconditionally, no alpha check, no blending, no char preservation.
+// That overwrites each chrome char with a space while keeping the cell bg
+// transparent, so the terminal emulator's own (blurred) window bg still shows
+// through. Children (modal content) then render on top as normal.
+function fillModalInteriorWithSpaces(this: BoxRenderable, buffer: OptimizedBuffer): void {
+  const x0 = this.screenX
+  const y0 = this.screenY
+  const w = this.width
+  const h = this.height
+  // Inset by 1 on each side so we don't erase the border that renderSelf just
+  // drew. The modal always has a single-cell border.
+  const startX = x0 + 1
+  const startY = y0 + 1
+  const endX = x0 + w - 1
+  const endY = y0 + h - 1
+  for (let y = startY; y < endY; y++) {
+    for (let x = startX; x < endX; x++) {
+      buffer.setCell(x, y, ' ', TRANSPARENT_RGBA, TRANSPARENT_RGBA)
+    }
+  }
+}
+
 export function ModalShell({
   children,
   footer,
@@ -25,6 +63,8 @@ export function ModalShell({
   width,
 }: ModalShellProps) {
   const theme = useTheme()
+  const transparent = useTransparent()
+  const bg = transparent ? 'transparent' : theme.colors['sideBar.background']
   return (
     <box
       position="absolute"
@@ -36,15 +76,13 @@ export function ModalShell({
       alignItems="center"
     >
       <box
-        position="absolute"
-        top={0}
-        left={0}
-        width="100%"
-        height="100%"
-        backgroundColor={theme.colors['editorWidget.background']}
-        opacity={0.7}
-      />
-      <Surface tone="elevated" padding={1} gap={1} width={width}>
+        border
+        borderColor={theme.colors['focusBorder']}
+        backgroundColor={bg}
+        padding={1}
+        width={width}
+        renderAfter={transparent ? fillModalInteriorWithSpaces : undefined}
+      >
         <box width="100%" flexDirection="column" gap={listGap}>
           <box flexDirection="column">
             <text fg={theme.colors['terminal.ansiMagenta']}>{title}</text>
@@ -53,7 +91,7 @@ export function ModalShell({
           {children}
           {footer ? <box>{footer}</box> : null}
         </box>
-      </Surface>
+      </box>
       {keybindsModeId ? <ModalKeybindsOverlay modeId={keybindsModeId} /> : null}
     </box>
   )