@golba98/codexa 1.0.2 → 1.0.4

package/src/ui/Markdown.tsx

@@ -131,7 +131,7 @@ function InlineText({ parts, color }: { parts: InlinePart[]; color: string }) {
   return (
     <Text color={color} wrap="wrap">
       {parts.map((part, index) => {
-        if (part.kind === "code") return <Text key={index} color={theme.INFO}>{part.text}</Text>;
+        if (part.kind === "code") return <Text key={index} color={theme.info}>{part.text}</Text>;
         if (part.kind === "bold") return <Text key={index} bold>{part.text}</Text>;
         return <Text key={index}>{part.text}</Text>;
       })}
@@ -148,7 +148,7 @@ function renderTreeLabel(label: string, theme: ReturnType<typeof useTheme>) {
 
   if (isDirectory) {
     return (
-      <Text color={theme.TEXT} bold>
+      <Text color={theme.text} bold>
         {base}
         {slash}
       </Text>
@@ -156,9 +156,9 @@ function renderTreeLabel(label: string, theme: ReturnType<typeof useTheme>) {
   }
 
   return (
-    <Text color={theme.TEXT}>
+    <Text color={theme.text}>
       {base.slice(0, lastDot)}
-      <Text color={theme.DIM}>{base.slice(lastDot)}</Text>
+      <Text color={theme.textDim}>{base.slice(lastDot)}</Text>
     </Text>
   );
 }
@@ -171,7 +171,7 @@ function TreeLine({ line }: { line: string }) {
 
   return (
     <Box width="100%">
-      <Text color={theme.DIM}>{prefix}</Text>
+      <Text color={theme.textDim}>{prefix}</Text>
       {renderTreeLabel(label, theme)}
     </Box>
   );
@@ -184,17 +184,17 @@ function isTreeLine(line: string): boolean {
 function getDiffColor(kind: DiffRenderLineType, theme: ReturnType<typeof useTheme>): string {
   switch (kind) {
     case "add":
-      return theme.SUCCESS;
+      return theme.success;
     case "remove":
-      return theme.ERROR;
+      return theme.error;
     case "hunk":
-      return theme.ACCENT;
+      return theme.accent;
     case "file":
     case "meta":
-      return theme.INFO;
+      return theme.info;
     case "context":
     default:
-      return theme.MUTED;
+      return theme.textMuted;
   }
 }
 
@@ -245,9 +245,9 @@ export function RenderMessage({ segments, width, brightHeadings = false }: { seg
                     ) : (
                       <Box key={lineIndex}>
                         <Box width={3} flexShrink={0} marginRight={1} justifyContent="flex-end">
-                          <Text color={theme.DIM}>{lineIndex + 1}</Text>
+                          <Text color={theme.textDim}>{lineIndex + 1}</Text>
                         </Box>
-                        <Text color={theme.MUTED} wrap="wrap">{line || " "}</Text>
+                        <Text color={theme.textMuted} wrap="wrap">{line || " "}</Text>
                       </Box>
                     )
                   ))}
@@ -257,10 +257,10 @@ export function RenderMessage({ segments, width, brightHeadings = false }: { seg
         }
 
         if (segment.type === "header") {
-          const color = segment.level === 1 ? theme.ACCENT : segment.level === 2 ? theme.TEXT : (brightHeadings ? theme.TEXT : theme.MUTED);
+          const color = segment.level === 1 ? theme.accent : segment.level === 2 ? theme.text : (brightHeadings ? theme.text : theme.textMuted);
           return (
             <Box key={index} flexDirection="column" marginTop={marginTop}>
-              {segment.level <= 2 && <Text color={theme.BORDER_SUBTLE}>{"───"}</Text>}
+              {segment.level <= 2 && <Text color={theme.border}>{"───"}</Text>}
               <Box>
                 <Text color={color}>{segment.level <= 2 ? "✧ " : "• "}</Text>
                 <InlineText parts={segment.parts} color={color} />
@@ -274,9 +274,9 @@ export function RenderMessage({ segments, width, brightHeadings = false }: { seg
             <Box key={index} flexDirection="column" marginTop={marginTop}>
               {segment.items.map((item, itemIndex) => (
                 <Box key={itemIndex}>
-                  <Text color={theme.ACCENT}>{segment.ordered ? `${item.num}. ` : "• "}</Text>
+                  <Text color={theme.accent}>{segment.ordered ? `${item.num}. ` : "• "}</Text>
                   <Box flexGrow={1} flexShrink={1}>
-                    <InlineText parts={item.parts} color={theme.TEXT} />
+                    <InlineText parts={item.parts} color={theme.text} />
                   </Box>
                 </Box>
               ))}
@@ -295,7 +295,7 @@ export function RenderMessage({ segments, width, brightHeadings = false }: { seg
               if (parts.length === 1 && parts[0]!.kind === "text" && !parts[0]!.text.trim()) {
                 return null;
               }
-              return <InlineText key={lineIndex} parts={parts} color={theme.TEXT} />;
+              return <InlineText key={lineIndex} parts={parts} color={theme.text} />;
             })}
           </Box>
         );

package/src/ui/ModelPickerScreen.tsx

@@ -6,18 +6,36 @@ import {
   normalizeReasoningForModelCapabilities,
 } from "../core/models/codexModelCapabilities.js";
 import { formatReasoningLabel } from "../config/settings.js";
-import { traceInputDebug } from "../core/inputDebug.js";
+import { traceInputDebug } from "../core/debug/inputDebug.js";
 import { FOCUS_IDS } from "./focus.js";
-import { clampVisualText, getShellWidth, type Layout } from "./layout.js";
+import {
+  clampVisualText,
+  getShellWidth,
+  getAvailableRowsForPanel,
+  useAppLayoutBudget,
+  usePanelAvailableRows,
+  type Layout,
+  useActivePanelLayout,
+  type ActivePanelLayout,
+  type PanelLayout,
+  usePanelLayout,
+} from "./layout.js";
+import { calculateListWindow } from "./layoutListWindow.js";
 import { useTheme } from "./theme.js";
 import type { GeminiModelSelection } from "../core/providerRuntime/types.js";
 
 // ─── Types & helpers ─────────────────────────────────────────────────────────
 
 type ModelPickerCloseReason = "escape" | "empty-selection";
+type ModelRenderMode = "full" | "compact" | "windowed";
 
 interface ModelPickerScreenProps {
-  layout: Layout;
+  layout: Layout & {
+    contentWidth?: number;
+  };
+  availableRows?: number;
+  activePanelLayout?: ActivePanelLayout;
+  panelLayout?: PanelLayout;
   models: readonly CodexModelCapability[];
   currentModel: string;
   currentReasoning: string;
@@ -50,10 +68,25 @@ function getReasoningLevels(model: CodexModelCapability | undefined): readonly R
 
 function getModelSourceMarker(models: readonly CodexModelCapability[], activeProviderLabel: string): string | null {
   if (activeProviderLabel !== "Claude" || models.length === 0) return null;
-  const source = (models[0]?.raw as { source?: string } | null | undefined)?.source;
-  if (source === "claude-code" || source === "discovered") return "Discovered from Claude Code";
-  if (source === "settings" || source === "config") return "From Claude settings";
-  return "Fallback defaults";
+  const raw = models[0]?.raw as { source?: string; discoveryKind?: string } | null | undefined;
+  const source = raw?.source;
+  const sourceLabel = source === "claude-code-package"
+    ? "installed package metadata"
+    : source === "claude-code-command"
+      ? "Claude Code command"
+      : source === "claude-code-cache"
+        ? "Claude Code cache"
+        : source === "claude-code-config" || source === "settings" || source === "config"
+          ? "Claude settings"
+          : "Claude Code";
+  if (source === "claude-code-package" || source === "claude-code-command" || source === "claude-code-cache" || source === "claude-code-config" || source === "claude-code" || source === "discovered") {
+    return raw?.discoveryKind === "aliases"
+      ? `Claude Code aliases resolved from ${sourceLabel}`
+      : `Claude Code models discovered from ${sourceLabel}`;
+  }
+  if (source === "settings" || source === "config") return "Claude Code models discovered from Claude settings";
+  if (source === "fallback") return "Claude Code discovery failed; using fallback aliases";
+  return null;
 }
 
 function normalizeDraftReasoning(
@@ -109,6 +142,9 @@ function describeInputKey(
 
 export function ModelPickerScreen({
   layout,
+  availableRows: propAvailableRows,
+  activePanelLayout,
+  panelLayout,
   models: baseModels,
   currentModel,
   currentReasoning,
@@ -279,13 +315,40 @@ export function ModelPickerScreen({
     { isActive: isFocused },
   );
 
+  const contextLayout = useActivePanelLayout();
+  const activeLayout = (activePanelLayout ?? contextLayout) as ActivePanelLayout | undefined;
+
   const shellWidth = getShellWidth(layout.cols);
-  const panelWidth = Math.max(38, Math.min(shellWidth - 2, layout.mode === "full" ? 74 : 64));
-  const innerWidth = Math.max(20, panelWidth - 4);
-  const help = layout.mode === "micro"
+  const hookPanelLayout = usePanelLayout();
+  const hookAvailableRows = usePanelAvailableRows();
+  const resolvedPanelLayout = useMemo<PanelLayout>(() => {
+    if (panelLayout) return panelLayout;
+    if (hookPanelLayout) return hookPanelLayout;
+
+    const mode = layout.mode;
+    const resolvedRows = activeLayout
+      ? activeLayout.availableRows
+      : getAvailableRowsForPanel(layout, propAvailableRows ?? hookAvailableRows);
+    const resolvedCols = activeLayout
+      ? activeLayout.availableCols
+      : Math.max(20, shellWidth - 4);
+
+    return {
+      mode: (mode === "compact" || mode === "micro" as any) ? "compact" : mode === "expanded" || mode === "max" as any || mode === "wide" as any ? "expanded" : "regular",
+      availableRows: resolvedRows,
+      availableCols: resolvedCols,
+    };
+  }, [panelLayout, hookPanelLayout, layout, activeLayout, propAvailableRows, shellWidth, hookAvailableRows]);
+
+  const panelWidth = activeLayout
+    ? activeLayout.width
+    : Math.max(38, Math.min((layout as any).contentWidth ?? shellWidth, shellWidth - 2));
+
+  const availableRows = resolvedPanelLayout.availableRows;
+  const innerWidth = resolvedPanelLayout.availableCols;
+  const help = resolvedPanelLayout.mode === "compact"
     ? "↑↓ · ←→ · Enter · Esc"
     : "↑↓ model · ←→ reasoning · Enter select · Esc cancel";
-  const title = clampVisualText(`Select model   ${help}`, innerWidth);
   const aOrAn = /^[aeiou]/i.test(activeProviderLabel) ? "an" : "a";
   const routeText = routeTextOverride ?? `Choose ${aOrAn} ${activeProviderLabel} model to use inside Codexa.`;
   const reasoningText = reasoningUnavailable
@@ -293,56 +356,173 @@ export function ModelPickerScreen({
     : `Reasoning: ${formatReasoningLabel(draftReasoning)}`;
   const sourceMarker = getModelSourceMarker(models, activeProviderLabel);
 
+  const appLayoutBudget = useAppLayoutBudget();
+  
+  const activeModelIndex = models.findIndex((m) => m.model === currentModel || m.id === currentModel);
+  const hasSourceMarker = !!sourceMarker;
+
+  // ─── Layout & Windowing ───────────────────────────────────────────────────
+
+  const windowResult = useMemo(() => {
+    const allowFull = appLayoutBudget?.showPanelColumnHeaders ?? true;
+
+    // Try fitting with full metadata
+    const fullChrome = 5 + (hasSourceMarker ? 1 : 0);
+    if (allowFull && models.length + fullChrome <= availableRows) {
+      return {
+        ...calculateListWindow({ itemCount: models.length, selectedIndex: draftSelectedModel, availableRows, chromeRows: fullChrome, showIndicators: false }),
+        mode: "full" as const,
+        showRouteText: true,
+        showReasoningText: true,
+        showSourceMarker: hasSourceMarker,
+      };
+    }
+
+    // Try fitting without source marker
+    if (allowFull && models.length + 5 <= availableRows) {
+      return {
+        ...calculateListWindow({ itemCount: models.length, selectedIndex: draftSelectedModel, availableRows, chromeRows: 5, showIndicators: false }),
+        mode: "full" as const,
+        showRouteText: true,
+        showReasoningText: true,
+        showSourceMarker: false,
+      };
+    }
+
+    // Try compact with reasoning
+    if (models.length + 4 <= availableRows) {
+      return {
+        ...calculateListWindow({ itemCount: models.length, selectedIndex: draftSelectedModel, availableRows, chromeRows: 4, showIndicators: false }),
+        mode: "compact" as const,
+        showRouteText: false,
+        showReasoningText: true,
+        showSourceMarker: false,
+      };
+    }
+
+    // Try minimal compact
+    if (models.length + 3 <= availableRows) {
+      return {
+        ...calculateListWindow({ itemCount: models.length, selectedIndex: draftSelectedModel, availableRows, chromeRows: 3, showIndicators: false }),
+        mode: "compact" as const,
+        showRouteText: false,
+        showReasoningText: false,
+        showSourceMarker: false,
+      };
+    }
+
+    // Windowed mode
+    const window = calculateListWindow({
+      itemCount: models.length,
+      selectedIndex: draftSelectedModel,
+      availableRows,
+      chromeRows: 3, // Title (1) + Border (2)
+      showIndicators: true,
+    });
+
+    return {
+      ...window,
+      mode: "windowed" as const,
+      showRouteText: false,
+      showReasoningText: false,
+      showSourceMarker: false,
+    };
+  }, [models.length, draftSelectedModel, availableRows, hasSourceMarker, appLayoutBudget?.showPanelColumnHeaders]);
+
+  const visibleModels = useMemo(() => {
+    return models.slice(windowResult.start, windowResult.end);
+  }, [models, windowResult.start, windowResult.end]);
+
+  const activeModel = models[activeModelIndex];
+  const showCurrentLine = windowResult.mode === "windowed" && activeModelIndex >= 0 && (activeModelIndex < windowResult.start || activeModelIndex >= windowResult.end);
+  const title = clampVisualText(
+    windowResult.mode === "windowed"
+      ? `Select model · Showing ${windowResult.start + 1}-${windowResult.end} of ${models.length}`
+      : `Select model   ${help}`,
+    innerWidth,
+  );
+
   return (
     <Box flexDirection="column" width={panelWidth}>
       <Box
         borderStyle="round"
-        borderColor={theme.PROMPT}
+        borderColor={theme.prompt}
         paddingX={1}
         paddingY={0}
         width={panelWidth}
         flexDirection="column"
       >
         <Box width="100%" overflow="hidden">
-          <Text color={theme.ACCENT} bold>{title}</Text>
+          <Text color={theme.accent} bold>{title}</Text>
         </Box>
-        <Box width="100%" overflow="hidden">
-          <Text color={theme.MUTED}>
-            {clampVisualText(routeText, innerWidth)}
-          </Text>
-        </Box>
-        <Box width="100%" overflow="hidden">
-          <Text color={reasoningUnavailable ? theme.DIM : theme.MUTED}>
-            {clampVisualText(reasoningText, innerWidth)}
-          </Text>
-        </Box>
-        {sourceMarker && (
+        {windowResult.showRouteText && (
+          <Box width="100%" overflow="hidden">
+            <Text color={theme.textMuted}>
+              {clampVisualText(routeText, innerWidth)}
+            </Text>
+          </Box>
+        )}
+        {windowResult.showReasoningText && (
+          <Box width="100%" overflow="hidden">
+            <Text color={reasoningUnavailable ? theme.textDim : theme.textMuted}>
+              {clampVisualText(reasoningText, innerWidth)}
+            </Text>
+          </Box>
+        )}
+        {windowResult.showSourceMarker && sourceMarker && (
           <Box width="100%" overflow="hidden">
-            <Text color={theme.DIM}>
+            <Text color={theme.textDim}>
               {clampVisualText(sourceMarker, innerWidth)}
             </Text>
           </Box>
         )}
 
-        <Box flexDirection="column" marginTop={0} width="100%">
+        {showCurrentLine && activeModel && (
+          <Box height={1} overflow="hidden">
+            <Text color={theme.textMuted} wrap="truncate">Current: <Text color={theme.text} bold>{getModelName(activeModel)}</Text></Text>
+          </Box>
+        )}
+
+        {windowResult.showAbove && (
+          <Box height={1} overflow="hidden">
+            <Text color={theme.accent}>↑ {windowResult.start} more</Text>
+          </Box>
+        )}
+
+        <Box
+          flexDirection="column"
+          marginTop={0}
+          width="100%"
+          height={models.length > 0 ? visibleModels.length : undefined}
+          overflow={models.length > 0 ? "hidden" : undefined}
+        >
           {models.length === 0 ? (
-            <Text color={theme.MUTED}>
+            <Text color={theme.textMuted}>
               {isLoading ? "Discovering models from the Codex runtime..." : (emptyMessage ?? "No models available.")}
             </Text>
           ) : (
-            models.map((model, index) => (
-              <ModelPickerRow
-                key={model.id}
-                model={model}
-                width={innerWidth}
-                currentModel={currentModel}
-                currentGeminiSelection={currentGeminiSelection}
-                isHighlighted={index === draftSelectedModel}
-                selectedReasoning={index === draftSelectedModel ? draftReasoning : normalizeDraftReasoning(model, currentReasoning)}
-              />
-            ))
+            visibleModels.map((model, index) => {
+              const actualIndex = windowResult.start + index;
+              return (
+                <ModelPickerRow
+                  key={model.id}
+                  model={model}
+                  width={innerWidth}
+                  currentModel={currentModel}
+                  currentGeminiSelection={currentGeminiSelection}
+                  isHighlighted={actualIndex === draftSelectedModel}
+                  selectedReasoning={actualIndex === draftSelectedModel ? draftReasoning : normalizeDraftReasoning(model, currentReasoning)}
+                />
+              );
+            })
           )}
         </Box>
+
+        {windowResult.showBelow && (
+          <Box height={1} overflow="hidden">
+            <Text color={theme.accent}>↓ {windowResult.hiddenBelow} more</Text>
+          </Box>
+        )}
       </Box>
     </Box>
   );
@@ -389,15 +569,15 @@ function ModelPickerRow({
   return (
     <Box width="100%" overflow="hidden">
       <Box width={markerWidth} flexShrink={0}>
-        <Text color={isHighlighted ? theme.ACCENT : theme.DIM}>{isHighlighted ? ">" : " "}</Text>
+        <Text color={isHighlighted ? theme.accent : theme.textDim}>{isHighlighted ? ">" : " "}</Text>
       </Box>
       <Box width={nameWidth} flexShrink={0} overflow="hidden">
-        <Text color={isHighlighted ? theme.TEXT : theme.MUTED} bold={isHighlighted}>
+        <Text color={isHighlighted ? theme.text : theme.textMuted} bold={isHighlighted} wrap="truncate">
           {name}
         </Text>
       </Box>
       <Box width={checkWidth} flexShrink={0}>
-        <Text color={theme.DIM}>{isCurrent ? "✓" : " "}</Text>
+        <Text color={theme.textDim}>{isCurrent ? "✓" : " "}</Text>
       </Box>
       {pillWidth > 0 && (
         <>
@@ -405,7 +585,7 @@ function ModelPickerRow({
             <Text>  </Text>
           </Box>
           <Box width={pillWidth} flexShrink={0} overflow="hidden">
-            <Text color={theme.ACCENT} bold>
+            <Text color={theme.accent} bold wrap="truncate">
               {pillText}
             </Text>
           </Box>

package/src/ui/ModelReasoningPicker.tsx

@@ -6,7 +6,7 @@ import {
   normalizeReasoningForModelCapabilities,
 } from "../core/models/codexModelCapabilities.js";
 import { formatReasoningLabel } from "../config/settings.js";
-import { traceInputDebug } from "../core/inputDebug.js";
+import { traceInputDebug } from "../core/debug/inputDebug.js";
 import { FOCUS_IDS } from "./focus.js";
 import { useTheme } from "./theme.js";
 
@@ -290,18 +290,18 @@ function LoadingPickerView({
     <Box flexDirection="column" width="100%">
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_SUBTLE}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={0}
         width="100%"
       >
         <Box flexDirection="column" width="100%">
           <Box>
-            <Text color={theme.ACCENT} bold>Select model  </Text>
-            <Text color={theme.MUTED}>Esc cancel</Text>
+            <Text color={theme.accent} bold>Select model  </Text>
+            <Text color={theme.textMuted}>Esc cancel</Text>
           </Box>
           <Box marginTop={0}>
-            <Text color={theme.DIM}>
+            <Text color={theme.textDim}>
               {isLoading
                 ? "Discovering models from the Codex runtime…"
                 : "No models available yet."}
@@ -353,18 +353,18 @@ function InteractivePickerView({
   return (
     <Box
       borderStyle="round"
-      borderColor={theme.BORDER_ACTIVE}
+      borderColor={theme.borderFocused}
       paddingX={2}
       paddingY={0}
       width="100%"
       flexDirection="column"
     >
       <Box>
-        <Text color={theme.ACCENT} bold>Select model  </Text>
-        <Text color={theme.MUTED}>{subtitle}</Text>
+        <Text color={theme.accent} bold>Select model  </Text>
+        <Text color={theme.textMuted}>{subtitle}</Text>
       </Box>
       <Box marginTop={0}>
-        <Text color={theme.DIM}>{reasoningHint}</Text>
+        <Text color={theme.textDim}>{reasoningHint}</Text>
       </Box>
 
       <Box
@@ -415,7 +415,7 @@ function ModelRow({
   theme,
 }: ModelRowProps) {
   const cursorGlyph = isHighlighted ? "▸ " : "  ";
-  const nameColor = isHighlighted ? theme.TEXT : theme.MUTED;
+  const nameColor = isHighlighted ? theme.text : theme.textMuted;
   const commitMark = isCommitted ? "  ✓" : "";
   const selectedIndex = availableLevels.findIndex((level) => level.id === selectedReasoning);
   const name = model.label === model.model ? model.model : `${model.label} (${model.model})`;
@@ -423,10 +423,10 @@ function ModelRow({
   const bars = availableLevels.map((level, i) => {
     const isActive = i === selectedIndex;
     const color = !interactive
-      ? theme.DIM
+      ? theme.textDim
       : isActive
-        ? isHighlighted ? theme.ACCENT : theme.TEXT
-        : theme.DIM;
+        ? isHighlighted ? theme.accent : theme.text
+        : theme.textDim;
 
     return (
       <Text key={level.id} color={color} bold={isActive && isHighlighted && interactive}>
@@ -438,7 +438,7 @@ function ModelRow({
   return (
     <Box flexDirection="row" width="100%">
       <Box width={3} flexShrink={0}>
-        <Text color={isHighlighted ? theme.ACCENT : theme.DIM}>{cursorGlyph}</Text>
+        <Text color={isHighlighted ? theme.accent : theme.textDim}>{cursorGlyph}</Text>
       </Box>
       <Box flexGrow={1} flexDirection="row" paddingRight={1}>
         <Box flexShrink={1}>
@@ -447,7 +447,7 @@ function ModelRow({
           </Text>
         </Box>
         <Box flexShrink={0} paddingLeft={1}>
-          <Text color={theme.DIM}>{commitMark}</Text>
+          <Text color={theme.textDim}>{commitMark}</Text>
         </Box>
       </Box>
       <Box flexDirection="row" gap={1} flexShrink={0}>

package/src/ui/Panel.tsx

@@ -13,8 +13,8 @@ interface PanelProps {
 
 export function Panel({ cols, title, rightTitle, borderColor, titleColor, children }: PanelProps) {
   const theme = useTheme();
-  const cBorder = borderColor || theme.BORDER_ACTIVE;
-  const cTitle = titleColor || theme.TEXT;
+  const cBorder = borderColor || theme.borderFocused;
+  const cTitle = titleColor || theme.text;
 
   const leftLabel = ` ${title} `;
   const rightLabel = rightTitle ? ` ${rightTitle} ` : "";
@@ -32,7 +32,7 @@ export function Panel({ cols, title, rightTitle, borderColor, titleColor, childr
         {"╭─"}
         <Text color={cTitle}>{leftLabel}</Text>
         {"─".repeat(dashCount)}
-        {rightTitle && <Text color={theme.DIM}>{rightLabel}</Text>}
+        {rightTitle && <Text color={theme.textDim}>{rightLabel}</Text>}
         {"╮"}
       </Text>
       <Box

package/src/ui/PlanActionPicker.tsx

@@ -85,10 +85,10 @@ export function PlanActionPicker({
     const selected = index === selectedIndex;
     return (
       <Text key={row.value}>
-        <Text color={selected ? theme.ACCENT : theme.DIM}>
+        <Text color={selected ? theme.accent : theme.textDim}>
           {selected ? "› " : vertical ? "  " : ""}
         </Text>
-        <Text color={selected ? theme.TEXT : theme.MUTED}>
+        <Text color={selected ? theme.text : theme.textMuted}>
           {`[${row.key}] ${row.label}`}
         </Text>
       </Text>
@@ -98,7 +98,7 @@ export function PlanActionPicker({
   if (vertical) {
     return (
       <Box flexDirection="column">
-        <Text color={isFocused ? theme.TEXT : theme.MUTED} bold={isFocused}>Plan ready</Text>
+        <Text color={isFocused ? theme.text : theme.textMuted} bold={isFocused}>Plan ready</Text>
         {ACTION_ROWS.map(renderAction)}
       </Box>
     );
@@ -106,12 +106,12 @@ export function PlanActionPicker({
 
   return (
     <Text>
-      <Text color={isFocused ? theme.TEXT : theme.MUTED} bold={isFocused}>Plan ready</Text>
-      <Text color={theme.DIM}>{"  "}</Text>
+      <Text color={isFocused ? theme.text : theme.textMuted} bold={isFocused}>Plan ready</Text>
+      <Text color={theme.textDim}>{"  "}</Text>
       {ACTION_ROWS.map((row, index) => (
         <React.Fragment key={row.value}>
           {renderAction(row, index)}
-          {index < ACTION_ROWS.length - 1 && <Text color={theme.DIM}>{"   "}</Text>}
+          {index < ACTION_ROWS.length - 1 && <Text color={theme.textDim}>{"   "}</Text>}
         </React.Fragment>
       ))}
     </Text>

package/src/ui/PlanReviewPanel.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { Box, Text } from "ink";
-import { normalizePlanReviewMarkdown } from "../core/planStorage.js";
+import { normalizePlanReviewMarkdown } from "../core/workspace/planStorage.js";
 import { getUsableShellWidth } from "./layout.js";
 import { parseMarkdown } from "./Markdown.js";
 import { getTextWidth } from "./textLayout.js";
@@ -192,21 +192,21 @@ export function PlanReviewPanel({
   return (
     <Box width="100%" flexDirection="column" paddingX={2}>
       <Text wrap="truncate">
-        <Text color={theme.BORDER_SUBTLE}>{"╭─ "}</Text>
-        <Text color={theme.TEXT} bold>{topBorder.title}</Text>
-        <Text color={theme.BORDER_SUBTLE}>{topBorder.fill}</Text>
-        <Text color={theme.BORDER_SUBTLE}>{"╮"}</Text>
+        <Text color={theme.border}>{"╭─ "}</Text>
+        <Text color={theme.text} bold>{topBorder.title}</Text>
+        <Text color={theme.border}>{topBorder.fill}</Text>
+        <Text color={theme.border}>{"╮"}</Text>
       </Text>
       {displayRows.map((row, index) => (
         <Text key={index} wrap="truncate">
-          <Text color={theme.BORDER_SUBTLE}>{"│ "}</Text>
-          <Text color={row.tone === "muted" ? theme.MUTED : theme.TEXT} bold={row.bold}>
+          <Text color={theme.border}>{"│ "}</Text>
+          <Text color={row.tone === "muted" ? theme.textMuted : theme.text} bold={row.bold}>
             {padVisual(row.text, contentWidth)}
           </Text>
-          <Text color={theme.BORDER_SUBTLE}>{" │"}</Text>
+          <Text color={theme.border}>{" │"}</Text>
         </Text>
       ))}
-      <Text wrap="truncate" color={theme.BORDER_SUBTLE}>{`╰${"─".repeat(Math.max(1, panelCols - 2))}╯`}</Text>
+      <Text wrap="truncate" color={theme.border}>{`╰${"─".repeat(Math.max(1, panelCols - 2))}╯`}</Text>
     </Box>
   );
 }