@golba98/codexa 1.0.3 → 1.0.4

package/src/ui/AttachmentImportPanel.tsx

@@ -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/BottomComposer.tsx

@@ -23,7 +23,7 @@ import { clampVisualText, getShellWidth, type Layout } from "./layout.js";
 import { getTextWidth, splitTextAtColumn } from "./textLayout.js";
 import { useThrottledValue } from "./useThrottledValue.js";
 import { sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
-import { getStdinDebugState, traceInputDebug } from "../core/inputDebug.js";
+import { getStdinDebugState, traceInputDebug } from "../core/debug/inputDebug.js";
 import * as renderDebug from "../core/perf/renderDebug.js";
 import { AnimatedStatusText } from "./AnimatedStatusText.js";
 import { isAnimatedBusyState } from "./busyStatusAnimation.js";
@@ -98,13 +98,13 @@ export function getTokenBarDisplay(tokensUsed: number, modelSpec: ModelSpec) {
 interface BottomComposerProps {
   layout: Layout;
   uiState: UIState;
-  themeName?: string;
-  mode?: string;
+  themeName?: string;
+  mode?: string;
   model?: string;
   footerModelDisplay?: string;
   reasoningLevel?: string;
   contextDisplay?: string;
-  planMode?: boolean;
+  planMode?: boolean;
   showBusyLoader?: boolean;
   tokensUsed?: number;
   modelSpec?: ModelSpec;
@@ -138,11 +138,11 @@ export interface BottomComposerMeasureParams {
   mode?: string;
   model?: string;
   reasoningLevel?: string;
-  tokensUsed?: number;
-  modelSpec?: ModelSpec;
-  value: string;
-  cursor: number;
-}
+  tokensUsed?: number;
+  modelSpec?: ModelSpec;
+  value: string;
+  cursor: number;
+}
 
 export interface CommandSuggestionState {
   showSuggestions: boolean;
@@ -176,9 +176,9 @@ export function shouldRenderBusyFooter(layout: Layout, uiState: UIState): boolea
   return false;
 }
 
-export function getComposerToFooterGapRows(layout: Layout): number {
-  return layout.mode === "micro" || layout.rows <= 24 ? 0 : 1;
-}
+export function getComposerToFooterGapRows(layout: Layout): number {
+  return 0;
+}
 
 export function getCommandSuggestionState({
   value,
@@ -206,11 +206,11 @@ export function getCommandSuggestionState({
 }
 
 export function measureBottomComposerRows({
-  layout,
-  uiState,
-  value,
-  cursor,
-}: BottomComposerMeasureParams): number {
+  layout,
+  uiState,
+  value,
+  cursor,
+}: BottomComposerMeasureParams): number {
   if (shouldRenderBusyFooter(layout, uiState)) {
     return measureRunFooterRows();
   }
@@ -236,24 +236,27 @@ export function measureBottomComposerRows({
     inputLocked,
   });
 
-  // ALWAYS reserve 1 row for the status line to prevent height shifting between idle and busy states.
-  const statusLineReservedRows = 1;
-  const showMetadata = layout.mode !== "micro";
-  const bottomPadding = layout.mode === "micro" || layout.rows <= 24 ? 0 : 1;
-  const footerGapRows = getComposerToFooterGapRows(layout);
-
-  const visiblePromptRows = inputLocked ? 1 : promptViewport.visibleRows.length;
-
+  const bottomPadding = layout.mode === "compact" ? 0 : 1;
+  const footerGapRows = getComposerToFooterGapRows(layout);
+  const visibleStatusLine = getVisibleComposerStatusLine({
+    uiState,
+    value: normalizedValue,
+    allowCommands,
+  });
+  const transientStatusRows = visibleStatusLine.length > 0 ? 1 : 0;
+
+  const visiblePromptRows = inputLocked ? 1 : promptViewport.visibleRows.length;
+
   return (
     visiblePromptRows
-    + 2
-    + (commandSuggestionState.reserveSuggestionRow ? 1 : 0)
-    + footerGapRows
-    + statusLineReservedRows
-    + (showMetadata ? 1 : 0)
-    + bottomPadding
-  );
-}
+    + 2
+    + (commandSuggestionState.reserveSuggestionRow ? 1 : 0)
+    + footerGapRows
+    + transientStatusRows
+    + 1
+    + bottomPadding
+  );
+}
 
 function getExternalCliLabel(providerId: string): string | null {
   if (providerId === "google") return "Gemini CLI";
@@ -340,54 +343,54 @@ function getPlaceholder(persona: ComposerPersona): string {
 
 // ─── Component ────────────────────────────────────────────────────────────────
 
-function renderFooterRuntime(displayStr: string, theme: any) {
-  // e.g. "Claude Code CLI / Sonnet 4.6 (Low)"
-  const slashIndex = displayStr.indexOf("/");
-  if (slashIndex === -1) {
-    return <Text color={theme.model} wrap="truncate">{displayStr}</Text>;
-  }
-  const providerPart = displayStr.substring(0, slashIndex).trim();
-  let remaining = displayStr.substring(slashIndex + 1).trim();
-
-  const parenIndex = remaining.indexOf("(");
-  if (parenIndex === -1) {
-    return (
-      <Box flexDirection="row" overflow="hidden">
-        <Text color={theme.provider}>{providerPart}</Text>
-        <Text color={theme.textMuted}>{" / "}</Text>
-        <Text color={theme.model}>{remaining}</Text>
-      </Box>
-    );
-  }
-
-  const modelPart = remaining.substring(0, parenIndex).trim();
-  let reasoningPart = remaining.substring(parenIndex + 1).trim();
-  if (reasoningPart.endsWith(")")) {
-    reasoningPart = reasoningPart.substring(0, reasoningPart.length - 1).trim();
-  }
-
-  return (
-    <Box flexDirection="row" overflow="hidden">
-      <Text color={theme.provider}>{providerPart}</Text>
-      <Text color={theme.textMuted}>{" / "}</Text>
-      <Text color={theme.model}>{modelPart}</Text>
-      <Text color={theme.textMuted}>{" ("}</Text>
-      <Text color={theme.accentMuted}>{reasoningPart}</Text>
-      <Text color={theme.textMuted}>{")"}</Text>
-    </Box>
-  );
-}
-
+function renderFooterRuntime(displayStr: string, theme: any) {
+  // e.g. "Claude Code CLI / Sonnet 4.6 (Low)"
+  const slashIndex = displayStr.indexOf("/");
+  if (slashIndex === -1) {
+    return <Text color={theme.model} wrap="truncate">{displayStr}</Text>;
+  }
+  const providerPart = displayStr.substring(0, slashIndex).trim();
+  let remaining = displayStr.substring(slashIndex + 1).trim();
+
+  const parenIndex = remaining.indexOf("(");
+  if (parenIndex === -1) {
+    return (
+      <Box flexDirection="row" overflow="hidden">
+        <Text color={theme.provider}>{providerPart}</Text>
+        <Text color={theme.textMuted}>{" / "}</Text>
+        <Text color={theme.model}>{remaining}</Text>
+      </Box>
+    );
+  }
+
+  const modelPart = remaining.substring(0, parenIndex).trim();
+  let reasoningPart = remaining.substring(parenIndex + 1).trim();
+  if (reasoningPart.endsWith(")")) {
+    reasoningPart = reasoningPart.substring(0, reasoningPart.length - 1).trim();
+  }
+
+  return (
+    <Box flexDirection="row" overflow="hidden">
+      <Text color={theme.provider}>{providerPart}</Text>
+      <Text color={theme.textMuted}>{" / "}</Text>
+      <Text color={theme.model}>{modelPart}</Text>
+      <Text color={theme.textMuted}>{" ("}</Text>
+      <Text color={theme.accentMuted}>{reasoningPart}</Text>
+      <Text color={theme.textMuted}>{")"}</Text>
+    </Box>
+  );
+}
+
 export function BottomComposer({
   layout,
   uiState,
-  themeName = "purple",
-  mode = "",
+  themeName = "purple",
+  mode = "",
   model = "",
   footerModelDisplay,
   reasoningLevel = "",
   contextDisplay,
-  planMode = false,
+  planMode = false,
   showBusyLoader = true,
   tokensUsed = 0,
   modelSpec = FALLBACK_MODEL_SPEC,
@@ -564,9 +567,10 @@ export function BottomComposer({
     .map((suggestion, index) => `${index === selectedIndex ? "›" : "·"} ${suggestion.cmd}`)
     .join("   ");
 
-  const rawStatusLine = getVisibleComposerStatusLine({ uiState, value, allowCommands, activeProviderId, runElapsedSeconds, externalCliStatus });
-  const showStatusLine = rawStatusLine.length > 0;
-  const footerGapRows = getComposerToFooterGapRows(layout);
+  const rawStatusLine = getVisibleComposerStatusLine({ uiState, value, allowCommands, activeProviderId, runElapsedSeconds, externalCliStatus });
+  const showStatusLine = rawStatusLine.length > 0;
+  const showTransientStatusRow = showStatusLine || inputLocked || !!selectionProfile;
+  const footerGapRows = getComposerToFooterGapRows(layout);
 
   const promptViewport = useMemo(
     () => createInputViewport({
@@ -849,9 +853,9 @@ export function BottomComposer({
     }
   }, { isActive: isFocused });
 
-  const tokenDisplay = getTokenBarDisplay(tokensUsed, modelSpec);
-  const reasoningSuffix = reasoningLevel ? ` (${reasoningLevel})` : "";
-  const footerRuntimeDisplay = footerModelDisplay ?? `${model}${reasoningSuffix}`;
+  const tokenDisplay = getTokenBarDisplay(tokensUsed, modelSpec);
+  const reasoningSuffix = reasoningLevel ? ` (${reasoningLevel})` : "";
+  const footerRuntimeDisplay = footerModelDisplay ?? `${model}${reasoningSuffix}`;
   const isAnswerMode = persona === "answer";
   const showBusyFooter = shouldRenderBusyFooter(layout, uiState);
   const promptPrefixColor = inputLocked ? theme.textDim : theme.text;
@@ -904,11 +908,11 @@ export function BottomComposer({
     return <MemoizedRunFooter uiState={uiState} showBusyLoader={showBusyLoader} onCancel={onCancel} onQuit={onQuit} />;
   }
 
-  return (
-    <Box flexDirection="column" paddingBottom={layoutMode === "micro" || crampedViewport ? 0 : 1} width="100%">
-      {isAnswerMode ? (
-        // Answer mode: Highlighted prompt
-        <Box
+  return (
+    <Box flexDirection="column" paddingBottom={layoutMode === "compact" ? 0 : 1} width="100%">
+      {isAnswerMode ? (
+        // Answer mode: Highlighted prompt
+        <Box
           flexDirection="column"
           width="100%"
           paddingX={1}
@@ -918,47 +922,17 @@ export function BottomComposer({
         >
           {promptLine}
         </Box>
-      ) : (
-        // Normal mode: clean prompt in rounded border
-        <Box
-          flexDirection="column"
+      ) : (
+        // Normal mode: clean prompt in rounded border
+        <Box
+          flexDirection="column"
           width="100%"
           paddingX={1}
           paddingY={0}
           borderStyle="round"
           borderColor={theme.border}
         >
-          {promptLine}
-        </Box>
-      )}
-
-      {layoutMode !== "micro" && (
-        <Box paddingLeft={1} paddingRight={1} marginTop={0} width="100%" justifyContent="space-between">
-          <Box flexGrow={1} flexShrink={1} overflow="hidden">
-            {renderFooterRuntime(footerRuntimeDisplay, theme)}
-          </Box>
-          <Box flexShrink={0}>
-            {contextDisplay ? (
-              <Box flexDirection="row">
-                <Text color={theme.textMuted}>Context: </Text>
-                <Text color={theme.context}>{contextDisplay}</Text>
-              </Box>
-            ) : tokenDisplay.hasKnownLimit ? (
-              <Box flexDirection="row">
-                <Text color={theme.textMuted}>Context: </Text>
-                <Text color={theme.context}>{tokenDisplay.usedText}</Text>
-                <Text color={theme.textDim}>
-                  {" / "}{tokenDisplay.limitText}
-                  {tokenDisplay.percentage !== null ? ` · ${tokenDisplay.isEstimatedLimit ? "~" : ""}${tokenDisplay.percentage}%` : ""}
-                </Text>
-              </Box>
-            ) : (
-              <Box flexDirection="row">
-                <Text color={theme.textMuted}>Context: </Text>
-                <Text color={theme.textDim}>Unknown</Text>
-              </Box>
-            )}
-          </Box>
+          {promptLine}
         </Box>
       )}
 
@@ -972,22 +946,21 @@ export function BottomComposer({
         <Box height={footerGapRows} />
       )}
 
-      {/* Always reserve the status line height */}
-      <Box paddingX={1} marginTop={0} height={1} width="100%" justifyContent="space-between" overflow="hidden">
-        {showStatusLine && (
-          <>
-            <Box flexShrink={1} flexGrow={1} overflow="hidden" flexDirection="row">
-              {!!getExternalCliLabel(activeProviderId ?? "") && uiState.kind === "THINKING" && (
+      {showTransientStatusRow && (
+        <Box paddingX={1} marginTop={0} height={1} width="100%" justifyContent="space-between" overflow="hidden">
+          <>
+            <Box flexShrink={1} flexGrow={1} overflow="hidden" flexDirection="row">
+              {!!getExternalCliLabel(activeProviderId ?? "") && uiState.kind === "THINKING" && (
                 <>
                   <Spinner color={theme.accent} />
                   <Text>{" "}</Text>
                 </>
               )}
-              <AnimatedStatusText
-                baseText={rawStatusLine}
-                isActive={!getExternalCliLabel(activeProviderId ?? "") && inputLocked && showBusyLoader}
-                isError={persona === "error"}
-              />
+              <AnimatedStatusText
+                baseText={rawStatusLine}
+                isActive={!getExternalCliLabel(activeProviderId ?? "") && inputLocked && showBusyLoader}
+                isError={persona === "error"}
+              />
             </Box>
             {inputLocked && (
               <Box flexShrink={0}>
@@ -997,15 +970,43 @@ export function BottomComposer({
             {!inputLocked && selectionProfile && (
               <Box flexShrink={0}>
                 <Text color={theme.textDim}>{selectionProfile.shortHint}</Text>
-              </Box>
-            )}
-          </>
-        )}
-      </Box>
-
+              </Box>
+            )}
+          </>
+        </Box>
+      )}
+
+      <Box paddingLeft={1} paddingRight={1} marginTop={0} width="100%" justifyContent="space-between">
+        <Box flexGrow={1} flexShrink={1} overflow="hidden">
+          {renderFooterRuntime(footerRuntimeDisplay, theme)}
+        </Box>
+        <Box flexShrink={0}>
+          {contextDisplay ? (
+            <Box flexDirection="row">
+              <Text color={theme.textMuted}>Context: </Text>
+              <Text color={theme.context}>{contextDisplay}</Text>
+            </Box>
+          ) : tokenDisplay.hasKnownLimit ? (
+            <Box flexDirection="row">
+              <Text color={theme.textMuted}>Context: </Text>
+              <Text color={theme.context}>{tokenDisplay.usedText}</Text>
+              <Text color={theme.textDim}>
+                {" / "}{tokenDisplay.limitText}
+                {tokenDisplay.percentage !== null ? ` · ${tokenDisplay.isEstimatedLimit ? "~" : ""}${tokenDisplay.percentage}%` : ""}
+              </Text>
+            </Box>
+          ) : (
+            <Box flexDirection="row">
+              <Text color={theme.textMuted}>Context: </Text>
+              <Text color={theme.textDim}>Unknown</Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+
     </Box>
   );
-}
+}
 
 // Helper to extract the relevant uiState kind for comparison
 function getUiStateKey(uiState: UIState): string {
@@ -1037,12 +1038,12 @@ export const MemoizedBottomComposer = memo(BottomComposer, (prev, next) => {
   if (prev.value !== next.value) return false;
   if (prev.cursor !== next.cursor) return false;
   
-  // Re-render if display props change
-  if (prev.mode !== next.mode) return false;
-  if (prev.model !== next.model) return false;
-  if (prev.footerModelDisplay !== next.footerModelDisplay) return false;
-  if (prev.reasoningLevel !== next.reasoningLevel) return false;
-  if (prev.contextDisplay !== next.contextDisplay) return false;
+  // Re-render if display props change
+  if (prev.mode !== next.mode) return false;
+  if (prev.model !== next.model) return false;
+  if (prev.footerModelDisplay !== next.footerModelDisplay) return false;
+  if (prev.reasoningLevel !== next.reasoningLevel) return false;
+  if (prev.contextDisplay !== next.contextDisplay) return false;
   if (prev.planMode !== next.planMode) return false;
   if (prev.showBusyLoader !== next.showBusyLoader) return false;
   if (prev.tokensUsed !== next.tokensUsed) return false;