@golba98/codexa 1.0.3 → 1.0.5

package/src/ui/{AttachmentImportPanel.tsx → panels/AttachmentImportPanel.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Text, useFocus, useInput } from "ink";
 import path from "node:path";
-import { useTheme } from "./theme.js";
+import { useTheme } from "../theme.js";
 
 export interface PendingImportFile {
   srcPath: string;
@@ -65,7 +65,7 @@ export function AttachmentImportPanel({
 
       <Box
         borderStyle="round"
-        borderColor={theme.borderFocused}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={1}
         marginTop={1}
@@ -90,7 +90,7 @@ export function AttachmentImportPanel({
         )}
 
         <Box marginTop={1}>
-          <Text color={theme.textDim}>Enter copy and continue  Esc cancel</Text>
+          <Text color={theme.textDim}>Esc to close · Enter to confirm</Text>
         </Box>
       </Box>
     </Box>

package/src/ui/{AuthPanel.tsx → panels/AuthPanel.tsx}

@@ -1,10 +1,10 @@
 import React from "react";
 import { Box, Text, useFocus, useInput } from "ink";
-import { AUTH_PREFERENCES, formatAuthPreferenceLabel } from "../config/settings.js";
-import type { CodexAuthProbeResult } from "../core/auth/codexAuth.js";
-import { getAuthStateLabel } from "../core/auth/codexAuth.js";
-import type { BackendProvider } from "../core/providers/types.js";
-import { useTheme } from "./theme.js";
+import { AUTH_PREFERENCES, formatAuthPreferenceLabel } from "../../config/settings.js";
+import type { CodexAuthProbeResult } from "../../core/auth/codexAuth.js";
+import { getAuthStateLabel } from "../../core/auth/codexAuth.js";
+import type { BackendProvider } from "../../core/providers/types.js";
+import { useTheme } from "../theme.js";
 
 interface AuthPanelProps {
   focusId: string;

package/src/ui/{BackendPicker.tsx → panels/BackendPicker.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
-import { AVAILABLE_BACKENDS } from "../config/settings.js";
-import { FOCUS_IDS } from "./focus.js";
+import { AVAILABLE_BACKENDS } from "../../config/settings.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 interface BackendPickerProps {

package/src/ui/{ModePicker.tsx → panels/ModePicker.tsx}

@@ -1,5 +1,5 @@
-import { AVAILABLE_MODES } from "../config/settings.js";
-import { FOCUS_IDS } from "./focus.js";
+import { AVAILABLE_MODES } from "../../config/settings.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 interface ModePickerProps {

package/src/ui/{ModelPicker.tsx → panels/ModelPicker.tsx}

@@ -1,5 +1,5 @@
-import { type CodexModelCapability } from "../core/models/codexModelCapabilities.js";
-import { FOCUS_IDS } from "./focus.js";
+import { type CodexModelCapability } from "../../core/models/codexModelCapabilities.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 interface ModelPickerProps {

package/src/ui/{ModelPickerScreen.tsx → panels/ModelPickerScreen.tsx}

@@ -4,20 +4,38 @@ import {
   type CodexModelCapability,
   type ReasoningEffortCapability,
   normalizeReasoningForModelCapabilities,
-} from "../core/models/codexModelCapabilities.js";
-import { formatReasoningLabel } from "../config/settings.js";
-import { traceInputDebug } from "../core/inputDebug.js";
-import { FOCUS_IDS } from "./focus.js";
-import { clampVisualText, getShellWidth, type Layout } from "./layout.js";
-import { useTheme } from "./theme.js";
-import type { GeminiModelSelection } from "../core/providerRuntime/types.js";
+} from "../../core/models/codexModelCapabilities.js";
+import { formatReasoningLabel } from "../../config/settings.js";
+import { traceInputDebug } from "../../core/debug/inputDebug.js";
+import { FOCUS_IDS } from "../input/focus.js";
+import {
+  clampVisualText,
+  getShellWidth,
+  getAvailableRowsForPanel,
+  useAppLayoutBudget,
+  usePanelAvailableRows,
+  type Layout,
+  useActivePanelLayout,
+  type ActivePanelLayout,
+  type PanelLayout,
+  usePanelLayout,
+} from "../layout.js";
+import { calculateListWindow } from "../timeline/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,6 +356,92 @@ 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
@@ -306,17 +455,21 @@ export function ModelPickerScreen({
         <Box width="100%" overflow="hidden">
           <Text color={theme.accent} bold>{title}</Text>
         </Box>
-        <Box width="100%" overflow="hidden">
-          <Text color={theme.textMuted}>
-            {clampVisualText(routeText, innerWidth)}
-          </Text>
-        </Box>
-        <Box width="100%" overflow="hidden">
-          <Text color={reasoningUnavailable ? theme.textDim : theme.textMuted}>
-            {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.textDim}>
               {clampVisualText(sourceMarker, innerWidth)}
@@ -324,25 +477,54 @@ export function ModelPickerScreen({
           </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.textMuted}>
-              {isLoading ? "Discovering models from the Codex runtime..." : (emptyMessage ?? "No models available.")}
+              {isLoading
+                ? `Discovering models from ${activeProviderLabel === "OpenAI" ? "the Codex runtime" : activeProviderLabel}...`
+                : (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>
   );
@@ -392,7 +574,7 @@ function ModelPickerRow({
         <Text color={isHighlighted ? theme.accent : theme.textDim}>{isHighlighted ? ">" : " "}</Text>
       </Box>
       <Box width={nameWidth} flexShrink={0} overflow="hidden">
-        <Text color={isHighlighted ? theme.text : theme.textMuted} bold={isHighlighted}>
+        <Text color={isHighlighted ? theme.text : theme.textMuted} bold={isHighlighted} wrap="truncate">
           {name}
         </Text>
       </Box>
@@ -405,7 +587,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 → panels/ModelReasoningPicker.tsx}

@@ -4,11 +4,11 @@ import {
   type CodexModelCapability,
   type ReasoningEffortCapability,
   normalizeReasoningForModelCapabilities,
-} from "../core/models/codexModelCapabilities.js";
-import { formatReasoningLabel } from "../config/settings.js";
-import { traceInputDebug } from "../core/inputDebug.js";
-import { FOCUS_IDS } from "./focus.js";
-import { useTheme } from "./theme.js";
+} from "../../core/models/codexModelCapabilities.js";
+import { formatReasoningLabel } from "../../config/settings.js";
+import { traceInputDebug } from "../../core/debug/inputDebug.js";
+import { FOCUS_IDS } from "../input/focus.js";
+import { useTheme } from "../theme.js";
 
 // ─── Types & helpers ─────────────────────────────────────────────────────────
 

package/src/ui/{Panel.tsx → panels/Panel.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { useTheme } from "./theme.js";
+import { useTheme } from "../theme.js";
 
 interface PanelProps {
   cols: number;

package/src/ui/{PermissionsPanel.tsx → panels/PermissionsPanel.tsx}

@@ -1,10 +1,10 @@
-import type { ResolvedRuntimeConfig, RuntimeConfig } from "../config/runtimeConfig.js";
+import type { ResolvedRuntimeConfig, RuntimeConfig } from "../../config/runtimeConfig.js";
 import {
   formatApprovalPolicyLabel,
   formatNetworkAccessLabel,
   formatSandboxModeLabel,
-} from "../config/runtimeConfig.js";
-import { FOCUS_IDS } from "./focus.js";
+} from "../../config/runtimeConfig.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 export type PermissionsPanelAction =

package/src/ui/{PlanActionPicker.tsx → panels/PlanActionPicker.tsx}

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Box, Text, useFocus, useInput, useStdin } from "ink";
-import { FOCUS_IDS } from "./focus.js";
-import { useTheme } from "./theme.js";
+import { FOCUS_IDS } from "../input/focus.js";
+import { useTheme } from "../theme.js";
 
 export type PlanActionValue = "implement" | "revise" | "cancel";
 

package/src/ui/{PlanReviewPanel.tsx → panels/PlanReviewPanel.tsx}

@@ -1,10 +1,10 @@
 import { useMemo } from "react";
 import { Box, Text } from "ink";
-import { normalizePlanReviewMarkdown } from "../core/planStorage.js";
-import { getUsableShellWidth } from "./layout.js";
-import { parseMarkdown } from "./Markdown.js";
-import { getTextWidth } from "./textLayout.js";
-import { useTheme } from "./theme.js";
+import { normalizePlanReviewMarkdown } from "../../core/workspace/planStorage.js";
+import { getUsableShellWidth } from "../layout.js";
+import { parseMarkdown } from "../render/Markdown.js";
+import { getTextWidth } from "../render/textLayout.js";
+import { useTheme } from "../theme.js";
 
 // ─── Types ────────────────────────────────────────────────────────────────────