@brimveyn/aimux 1.6.2 → 1.7.0

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

@@ -0,0 +1,44 @@
+import { useTheme } from '../theme'
+
+interface BareInputProps {
+  value: string
+  cursorPos?: number
+  placeholder?: string
+}
+
+export function BareInput({ cursorPos, placeholder = '', value }: BareInputProps) {
+  const theme = useTheme()
+  const fg = theme.colors['editor.foreground']
+  const bg = theme.colors['editor.background']
+  const placeholderFg = theme.colors['editorLineNumber.foreground']
+
+  if (!value) {
+    const firstChar = placeholder.charAt(0) || ' '
+    const rest = placeholder.slice(1)
+    return (
+      <text>
+        <span bg={fg} fg={bg}>
+          {firstChar}
+        </span>
+        <span fg={placeholderFg}>{rest}</span>
+      </text>
+    )
+  }
+
+  const safePos =
+    cursorPos === undefined ? value.length : Math.max(0, Math.min(value.length, cursorPos))
+  const before = value.slice(0, safePos)
+  const cursorOnEnd = safePos >= value.length
+  const cursorChar = cursorOnEnd ? ' ' : value.charAt(safePos)
+  const after = cursorOnEnd ? '' : value.slice(safePos + 1)
+
+  return (
+    <text fg={fg}>
+      {before}
+      <span bg={fg} fg={bg}>
+        {cursorChar}
+      </span>
+      {after}
+    </text>
+  )
+}

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

@@ -7,6 +7,8 @@ import { InputField } from './input-field'
 import { ListItem } from './list-item'
 import { ModalShell } from './modal-shell'
 
+const VISIBLE_ROWS = 8
+
 function getDirectoryResultIcon(result: DirectoryResult): string {
   if (result.type === 'worktree') {
     return '\u{e728}'
@@ -52,6 +54,9 @@ export function CreateSessionModal({
   const dirActive = activeField === 'directory'
   const nameActive = activeField === 'name'
 
+  const scrollOffset = Math.max(0, selectedIndex - VISIBLE_ROWS + 1)
+  const visibleResults = results.slice(scrollOffset, scrollOffset + VISIBLE_ROWS)
+
   return (
     <ModalShell
       title="Create session"
@@ -66,19 +71,21 @@ export function CreateSessionModal({
         </text>
         <InputField
           active={dirActive}
+          placeholder="Type a project name..."
           value={
             pendingProjectPath && !dirActive ? abbreviatePath(pendingProjectPath) : directoryQuery
           }
         />
       </box>
 
-      {dirActive && results.length === 0 && directoryQuery.length > 0 ? (
-        <text fg={theme.colors['descriptionForeground']}>No matches</text>
-      ) : null}
-
-      {dirActive
-        ? results.map((result, index) => {
-            const active = index === selectedIndex
+      <box flexDirection="column" height={VISIBLE_ROWS}>
+        {results.length === 0 ? (
+          <text fg={theme.colors['descriptionForeground']}>
+            {directoryQuery.length > 0 ? 'No matches' : 'Type a project name to search...'}
+          </text>
+        ) : (
+          visibleResults.map((result, index) => {
+            const active = dirActive && scrollOffset + index === selectedIndex
             return (
               <ListItem
                 key={result.path}
@@ -100,7 +107,8 @@ export function CreateSessionModal({
               />
             )
           })
-        : null}
+        )}
+      </box>
 
       <box flexDirection="column">
         <text

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

@@ -1,4 +1,4 @@
-import { useTheme } from '../../theme'
+import { useBg, useTheme } from '../../theme'
 import { FOLD_STEP, type FoldInfo } from './build-rows'
 import { type FoldDispatch } from './pierre-diff'
 
@@ -9,13 +9,9 @@ interface Props {
 
 function Button({ label, onPress }: { label: string; onPress: () => void }) {
   const theme = useTheme()
+  const bg = useBg('sideBar.background')
   return (
-    <box
-      paddingLeft={1}
-      paddingRight={1}
-      backgroundColor={theme.colors['sideBar.background']}
-      onMouseDown={onPress}
-    >
+    <box paddingLeft={1} paddingRight={1} backgroundColor={bg} onMouseDown={onPress}>
       <text fg={theme.colors['textLink.foreground']}>{label}</text>
     </box>
   )
@@ -27,6 +23,7 @@ function Spacer() {
 
 export function FoldStrip({ dispatch, fold }: Props) {
   const theme = useTheme()
+  const headerBg = useBg('sideBarSectionHeader.background')
   const { bottomExpanded, foldId, hidden, topExpanded, total } = fold
   const stepUp = Math.min(FOLD_STEP, hidden)
   const stepDown = Math.min(FOLD_STEP, hidden)
@@ -73,12 +70,7 @@ export function FoldStrip({ dispatch, fold }: Props) {
   }
 
   return (
-    <box
-      flexDirection="row"
-      backgroundColor={theme.colors['sideBarSectionHeader.background']}
-      paddingLeft={1}
-      paddingRight={1}
-    >
+    <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
       <text fg={theme.colors['descriptionForeground']}>{`⋯ ${hidden} hidden `}</text>
       {controls}
     </box>

package/src/ui/components/diff-renderer/split-view.tsx

@@ -13,7 +13,7 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../git-view-controls'
-import { useTheme } from '../../theme'
+import { useBg, useTheme, useTransparent } from '../../theme'
 import { buildSplitRows, gutterWidth, type SplitCell, type SplitRowOrHeader } from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
@@ -48,7 +48,7 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
   { contentWidth, file, foldDispatch, folds, highlights },
   ref
 ) {
-  const theme = useTheme()
+  const separatorBg = useBg('editor.background')
   const leftRef = useRef<ScrollBoxRenderable | null>(null)
   const rightRef = useRef<ScrollBoxRenderable | null>(null)
 
@@ -94,7 +94,7 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
         ))}
         {truncated ? <TruncationNotice hidden={rows.length - displayRows.length} /> : null}
       </scrollbox>
-      <box width={1} backgroundColor={theme.colors['editor.background']} />
+      <box width={1} backgroundColor={separatorBg} />
       <scrollbox
         ref={rightRef}
         flexGrow={1}
@@ -122,13 +122,9 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
 
 function TruncationNotice({ hidden }: { hidden: number }) {
   const theme = useTheme()
+  const headerBg = useBg('sideBarSectionHeader.background')
   return (
-    <box
-      flexDirection="row"
-      backgroundColor={theme.colors['sideBarSectionHeader.background']}
-      paddingLeft={1}
-      paddingRight={1}
-    >
+    <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
       <text fg={theme.colors['editorWarning.foreground']}>
         …diff truncated — {hidden} more rows hidden
       </text>
@@ -159,13 +155,9 @@ function SideRow({
 
 function HunkHeaderRow({ row }: { row: Extract<SplitRowOrHeader, { type: 'hunk-header' }> }) {
   const theme = useTheme()
+  const headerBg = useBg('sideBarSectionHeader.background')
   return (
-    <box
-      flexDirection="row"
-      backgroundColor={theme.colors['sideBarSectionHeader.background']}
-      paddingLeft={1}
-      paddingRight={1}
-    >
+    <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
       <text fg={theme.colors['descriptionForeground']}>{row.spec}</text>
       {row.context ? (
         <text fg={theme.colors['editor.lineHighlightBackground']}> {row.context}</text>
@@ -186,8 +178,10 @@ function HalfRow({
   tokens: ThemedToken[][]
 }) {
   const theme = useTheme()
+  const headerBg = useBg('sideBarSectionHeader.background')
+  const transparent = useTransparent()
   if (cell.type === 'filler') {
-    return <box backgroundColor={theme.colors['sideBarSectionHeader.background']} height={height} />
+    return <box backgroundColor={headerBg} height={height} />
   }
   let bg: string | undefined
   let sign = ' '
@@ -204,7 +198,7 @@ function HalfRow({
   const num = String(cell.lineNumber).padStart(gw, ' ')
   const lineTokens = tokens[cell.lineIdx]
   return (
-    <box flexDirection="row" backgroundColor={bg} height={height}>
+    <box flexDirection="row" backgroundColor={transparent ? undefined : bg} height={height}>
       <text fg={theme.colors['descriptionForeground']}>{` ${num} `}</text>
       <text fg={signColor}>{`${sign} `}</text>
       <LineContent content={cell.content} tokens={lineTokens} />

package/src/ui/components/diff-renderer/stacked-view.tsx

@@ -13,7 +13,7 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../git-view-controls'
-import { useTheme } from '../../theme'
+import { useBg, useTheme, useTransparent } from '../../theme'
 import { buildUnifiedRows, gutterWidth, type UnifiedRowOrHeader } from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
@@ -90,13 +90,9 @@ export const StackedView = forwardRef<StackedViewHandle, Props>(function Stacked
 
 function TruncationNotice({ hidden }: { hidden: number }) {
   const theme = useTheme()
+  const headerBg = useBg('sideBarSectionHeader.background')
   return (
-    <box
-      flexDirection="row"
-      backgroundColor={theme.colors['sideBarSectionHeader.background']}
-      paddingLeft={1}
-      paddingRight={1}
-    >
+    <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
       <text fg={theme.colors['editorWarning.foreground']}>
         …diff truncated — {hidden} more rows hidden
       </text>
@@ -116,14 +112,11 @@ function UnifiedRowRender({
   row: UnifiedRowOrHeader
 }) {
   const theme = useTheme()
+  const headerBg = useBg('sideBarSectionHeader.background')
+  const transparent = useTransparent()
   if (row.type === 'hunk-header') {
     return (
-      <box
-        flexDirection="row"
-        backgroundColor={theme.colors['sideBarSectionHeader.background']}
-        paddingLeft={1}
-        paddingRight={1}
-      >
+      <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
         <text fg={theme.colors['descriptionForeground']}>{row.spec}</text>
         {row.context ? (
           <text fg={theme.colors['editor.lineHighlightBackground']}> {row.context}</text>
@@ -161,7 +154,7 @@ function UnifiedRowRender({
   const addNum = row.type === 'addition' ? row.lineNumber : undefined
   const tokens = row.type === 'addition' ? highlights.add[row.lineIdx] : highlights.del[row.lineIdx]
   return (
-    <box flexDirection="row" backgroundColor={bg} height={row.height}>
+    <box flexDirection="row" backgroundColor={transparent ? undefined : bg} height={row.height}>
       <text fg={theme.colors['descriptionForeground']}>{` ${pad(delNum)} ${pad(addNum)} `}</text>
       <text fg={signColor}>{`${sign} `}</text>
       <LineContent content={row.content} tokens={tokens} />

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>
@@ -159,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' })
   }
@@ -196,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' })
   }
@@ -342,6 +348,7 @@ 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(

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

@@ -11,7 +11,7 @@ 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'
@@ -106,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)
@@ -210,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}
         >
@@ -254,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>
     )
   }