@golba98/codexa 1.0.3 → 1.0.5

package/src/ui/{BottomComposer.tsx → chrome/BottomComposer.tsx}

@@ -1,9 +1,9 @@
 import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useFocus, useInput, useStdin } from "ink";
-import { formatContextCompact } from "../core/providerRuntime/contextMetadata.js";
-import type { ModelSpec } from "../core/models/modelSpecs.js";
-import type { ExternalCliStatus, UIState } from "../session/types.js";
-import { FOCUS_IDS } from "./focus.js";
+import { formatContextCompact } from "../../core/providerRuntime/contextMetadata.js";
+import type { ModelSpec } from "../../core/models/modelSpecs.js";
+import type { ExternalCliStatus, UIState } from "../../session/types.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import {
   createInputViewport,
   deleteInputBackward,
@@ -14,22 +14,22 @@ import {
   moveCursorRight,
   normalizeInputText,
   normalizeCursorOffset,
-} from "./inputBuffer.js";
-import { getModeDisplaySpec } from "./modeDisplay.js";
+} from "../input/inputBuffer.js";
+import { getModeDisplaySpec } from "../render/modeDisplay.js";
 import { ActivityIndicator } from "./ActivityIndicator.js";
 import { measureRunFooterRows, MemoizedRunFooter } from "./RunFooter.js";
-import { useTheme } from "./theme.js";
-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 * as renderDebug from "../core/perf/renderDebug.js";
+import { useTheme } from "../theme.js";
+import { clampVisualText, getShellWidth, type Layout } from "../layout.js";
+import { getTextWidth, splitTextAtColumn } from "../render/textLayout.js";
+import { useThrottledValue } from "../useThrottledValue.js";
+import { sanitizeTerminalOutput } from "../../core/terminal/terminalSanitize.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";
 import { Spinner } from "./Spinner.js";
-import type { TerminalSelectionProfile } from "../core/terminal/terminalSelection.js";
-import { getSlashCommandSuggestions, type CommandSuggestion } from "./slashCommands.js";
+import type { TerminalSelectionProfile } from "../../core/terminal/terminalSelection.js";
+import { getSlashCommandSuggestions, type CommandSuggestion } from "../input/slashCommands.js";
 
 // ─── Types & constants ────────────────────────────────────────────────────────
 
@@ -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;

package/src/ui/{DashCard.tsx → chrome/DashCard.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 import type { ReactNode } from "react";
 import { Box, Text } from "ink";
-import { useTheme } from "./theme.js";
-import { getVisualWidth } from "./layout.js";
+import { useTheme } from "../theme.js";
+import { getVisualWidth } from "../layout.js";
 
 interface DashCardProps {
   cols: number;

package/src/ui/{RunFooter.tsx → chrome/RunFooter.tsx}

@@ -1,8 +1,8 @@
 import React, { memo } from "react";
 import { Box, Text } from "ink";
-import type { UIState } from "../session/types.js";
-import * as renderDebug from "../core/perf/renderDebug.js";
-import { useTheme } from "./theme.js";
+import type { UIState } from "../../session/types.js";
+import * as renderDebug from "../../core/perf/renderDebug.js";
+import { useTheme } from "../theme.js";
 import { AnimatedStatusText } from "./AnimatedStatusText.js";
 import { isAnimatedBusyState } from "./busyStatusAnimation.js";
 

package/src/ui/chrome/RuntimeStatusBar.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "../theme.js";
+import type { Layout } from "../layout.js";
+import * as renderDebug from "../../core/perf/renderDebug.js";
+
+export type RuntimeAvailability = "available" | "checking" | "reconnecting" | "unavailable" | "unknown";
+
+export interface RuntimeStatusBarProps {
+  layout: Layout;
+  modelDisplay: string;
+  contextDisplay?: string;
+  availability?: RuntimeAvailability;
+}
+
+export function measureRuntimeStatusBarRows(): number {
+  return 1;
+}
+
+function getAvailabilityLabel(availability: RuntimeAvailability | undefined): string | null {
+  if (availability === "checking") return "checking";
+  if (availability === "reconnecting") return "reconnecting";
+  if (availability === "unavailable") return "unavailable";
+  if (availability === "unknown") return "Unknown";
+  return null;
+}
+
+function renderRuntimeDisplay(displayStr: string, theme: ReturnType<typeof useTheme>) {
+  const safeDisplay = displayStr.trim() || "Local / Detecting...";
+  const slashIndex = safeDisplay.indexOf("/");
+  if (slashIndex === -1) {
+    return <Text color={theme.model} wrap="truncate">{safeDisplay}</Text>;
+  }
+
+  const providerPart = safeDisplay.substring(0, slashIndex).trim() || "Local";
+  const remaining = safeDisplay.substring(slashIndex + 1).trim() || "Detecting...";
+  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 RuntimeStatusBar({
+  layout,
+  modelDisplay,
+  contextDisplay,
+  availability = "available",
+}: RuntimeStatusBarProps) {
+  const theme = useTheme();
+  const availabilityLabel = getAvailabilityLabel(availability);
+  const safeModelDisplay = modelDisplay.trim() || "Local / Detecting...";
+  const safeContextDisplay = contextDisplay?.trim() || "Unknown";
+  renderDebug.useRenderDebug("RuntimeStatusBar", {
+    modelDisplay: safeModelDisplay,
+    contextDisplay: safeContextDisplay,
+    availability,
+    cols: layout.cols,
+  });
+
+  return (
+    <Box
+      height={measureRuntimeStatusBarRows()}
+      width="100%"
+      paddingLeft={1}
+      paddingRight={1}
+      justifyContent="space-between"
+      overflow="hidden"
+    >
+      <Box flexGrow={1} flexShrink={1} overflow="hidden" flexDirection="row">
+        {renderRuntimeDisplay(safeModelDisplay, theme)}
+        {availabilityLabel && (
+          <>
+            <Text color={theme.textMuted}>{" · "}</Text>
+            <Text color={availability === "unavailable" ? theme.warning : theme.info}>{availabilityLabel}</Text>
+          </>
+        )}
+      </Box>
+      <Box flexShrink={0}>
+        <Text color={theme.textMuted}>{layout.cols >= 48 ? "Context: " : "Ctx: "}</Text>
+        <Text color={safeContextDisplay === "Unknown" ? theme.textDim : theme.context}>{safeContextDisplay}</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/ui/{Spinner.tsx → chrome/Spinner.tsx}

@@ -1,6 +1,6 @@
 import React, { startTransition, useEffect, useState } from "react";
 import { Text } from "ink";
-import { useTheme } from "./theme.js";
+import { useTheme } from "../theme.js";
 
 const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];