@golba98/codexa 1.0.2 → 1.0.4

package/src/ui/AttachmentImportPanel.tsx

@@ -52,20 +52,20 @@ export function AttachmentImportPanel({
     <Box flexDirection="column" width="100%" marginTop={1}>
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_SUBTLE}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={1}
         width="100%"
       >
-        <Text color={theme.ACCENT} bold>IMPORT FILE  </Text>
-        <Text color={theme.MUTED}>
+        <Text color={theme.accent} bold>IMPORT FILE  </Text>
+        <Text color={theme.textMuted}>
           Copy {files.length} outside-workspace {fileLabel} into .codexa/attachments?
         </Text>
       </Box>
 
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_ACTIVE}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={1}
         marginTop={1}
@@ -74,8 +74,8 @@ export function AttachmentImportPanel({
       >
         {files.map((file, i) => (
           <Box key={i} flexDirection="column" marginBottom={i < files.length - 1 ? 1 : 0}>
-            <Text color={theme.TEXT}>{path.basename(file.srcPath)}</Text>
-            <Text color={theme.DIM}>
+            <Text color={theme.text}>{path.basename(file.srcPath)}</Text>
+            <Text color={theme.textDim}>
               {"→ "}{relativeAttachmentsDir}/{file.destFilename}
             </Text>
           </Box>
@@ -83,14 +83,14 @@ export function AttachmentImportPanel({
 
         {showVisionWarning && (
           <Box marginTop={1}>
-            <Text color={theme.WARNING}>
+            <Text color={theme.warning}>
               Note: active model may not support images.
             </Text>
           </Box>
         )}
 
         <Box marginTop={1}>
-          <Text color={theme.DIM}>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

@@ -49,10 +49,10 @@ export function AuthPanel({
   const authStateLabel = getAuthStateLabel(authStatus.state);
   const authStateColor =
     authStatus.state === "authenticated"
-      ? theme.SUCCESS
+      ? theme.success
       : authStatus.state === "unauthenticated"
-        ? theme.ERROR
-        : theme.WARNING;
+        ? theme.error
+        : theme.warning;
   const checkedAtLabel = authStatus.checkedAt > 0
     ? new Date(authStatus.checkedAt).toLocaleTimeString()
     : "not checked yet";
@@ -60,52 +60,52 @@ export function AuthPanel({
   return (
     <Box
       borderStyle="round"
-      borderColor={theme.BORDER_ACTIVE}
+      borderColor={theme.borderFocused}
       flexDirection="column"
       paddingX={2}
       paddingY={1}
       marginTop={1}
       width="100%"
     >
-      <Text color={theme.ACCENT} bold>
+      <Text color={theme.accent} bold>
         Auth and subscription guidance
       </Text>
-      <Text color={theme.MUTED}>Current backend: {provider.label}</Text>
-      <Text color={theme.MUTED}>Current preference: {formatAuthPreferenceLabel(authPreference)}</Text>
-      <Text color={theme.INFO}>Backend auth: {provider.authLabel}</Text>
+      <Text color={theme.textMuted}>Current backend: {provider.label}</Text>
+      <Text color={theme.textMuted}>Current preference: {formatAuthPreferenceLabel(authPreference)}</Text>
+      <Text color={theme.info}>Backend auth: {provider.authLabel}</Text>
       <Text color={authStateColor}>Runtime auth state: {authStateLabel}</Text>
-      <Text color={theme.DIM}>Last checked: {checkedAtLabel}</Text>
-      <Text color={theme.DIM}>Probe summary: {authStatus.rawSummary || "No probe output yet"}</Text>
-      <Text color={theme.TEXT}>
+      <Text color={theme.textDim}>Last checked: {checkedAtLabel}</Text>
+      <Text color={theme.textDim}>Probe summary: {authStatus.rawSummary || "No probe output yet"}</Text>
+      <Text color={theme.text}>
         This UI securely bridges to the Codexa neural network. It does not collect or store your ChatGPT credentials.
       </Text>
-      <Text color={theme.TEXT}>{provider.statusMessage}</Text>
+      <Text color={theme.text}>{provider.statusMessage}</Text>
       <Box flexDirection="column" marginTop={1}>
-        <Text color={theme.INFO}>Commands:</Text>
-        <Text color={theme.TEXT}>  /login        guided ChatGPT sign-in steps</Text>
-        <Text color={theme.TEXT}>  /logout       guided sign-out steps</Text>
-        <Text color={theme.TEXT}>  /auth status  refresh Codexa authentication</Text>
+        <Text color={theme.info}>Commands:</Text>
+        <Text color={theme.text}>  /login        guided ChatGPT sign-in steps</Text>
+        <Text color={theme.text}>  /logout       guided sign-out steps</Text>
+        <Text color={theme.text}>  /auth status  refresh Codexa authentication</Text>
       </Box>
       <Box flexDirection="column" marginTop={1}>
         {AUTH_PREFERENCES.map((item, index) => (
-          <Text key={item.id} color={item.id === authPreference ? theme.SUCCESS : theme.TEXT}>
+          <Text key={item.id} color={item.id === authPreference ? theme.success : theme.text}>
             {index + 1}. {item.label} {item.id === authPreference ? "✓" : ""}
           </Text>
         ))}
       </Box>
       <Box marginTop={1}>
-        <Text color={theme.DIM}>
+        <Text color={theme.textDim}>
           Press 1-{AUTH_PREFERENCES.length} to change preference, R to refresh status, Esc to close.
         </Text>
       </Box>
       {authStatusBusy && (
         <Box marginTop={1}>
-          <Text color={theme.WARNING}>Checking auth status...</Text>
+          <Text color={theme.warning}>Checking auth status...</Text>
         </Box>
       )}
       {authStatus.recommendedAction && (
         <Box marginTop={1}>
-          <Text color={theme.DIM}>Next step: {authStatus.recommendedAction}</Text>
+          <Text color={theme.textDim}>Next step: {authStatus.recommendedAction}</Text>
         </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";
@@ -100,9 +100,11 @@ interface BottomComposerProps {
   uiState: UIState;
   themeName?: string;
   mode?: string;
-  model?: string;
-  reasoningLevel?: string;
-  planMode?: boolean;
+  model?: string;
+  footerModelDisplay?: string;
+  reasoningLevel?: string;
+  contextDisplay?: string;
+  planMode?: boolean;
   showBusyLoader?: boolean;
   tokensUsed?: number;
   modelSpec?: ModelSpec;
@@ -136,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;
@@ -174,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,
@@ -204,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();
   }
@@ -234,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" && layout.rows > 24;
-  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";
@@ -338,14 +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>
+  );
+}
+
 export function BottomComposer({
   layout,
   uiState,
   themeName = "purple",
   mode = "",
-  model = "",
-  reasoningLevel = "",
-  planMode = false,
+  model = "",
+  footerModelDisplay,
+  reasoningLevel = "",
+  contextDisplay,
+  planMode = false,
   showBusyLoader = true,
   tokensUsed = 0,
   modelSpec = FALLBACK_MODEL_SPEC,
@@ -522,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({
@@ -807,16 +853,12 @@ export function BottomComposer({
     }
   }, { isActive: isFocused });
 
-  const modeDisplay = getModeDisplaySpec(mode, theme);
   const tokenDisplay = getTokenBarDisplay(tokensUsed, modelSpec);
-  const tokenColor = tokenDisplay.percentage === null ? theme.DIM
-    : tokenDisplay.percentage >= 90 ? theme.ERROR
-    : tokenDisplay.percentage >= 70 ? theme.WARNING
-    : theme.SUCCESS;
   const reasoningSuffix = reasoningLevel ? ` (${reasoningLevel})` : "";
+  const footerRuntimeDisplay = footerModelDisplay ?? `${model}${reasoningSuffix}`;
   const isAnswerMode = persona === "answer";
   const showBusyFooter = shouldRenderBusyFooter(layout, uiState);
-  const promptPrefixColor = inputLocked ? theme.DIM : theme.TEXT;
+  const promptPrefixColor = inputLocked ? theme.textDim : theme.text;
   const lockedInputText = promptViewport.visibleRows[0]?.text ?? " ";
 
   // The prompt line is shared between bordered and non-bordered layouts.
@@ -826,12 +868,12 @@ export function BottomComposer({
       <Box flexDirection="column" flexGrow={1}>
         {value.length === 0 && !inputLocked ? (
           <Box width="100%" overflow="hidden">
-            <Text backgroundColor={cursorVisible ? theme.TEXT : undefined} color={cursorVisible ? theme.PANEL : undefined}>{" "}</Text>
-            <Text color={theme.DIM}>{placeholderText}</Text>
+            <Text backgroundColor={cursorVisible ? theme.text : undefined} color={cursorVisible ? theme.surface : undefined}>{" "}</Text>
+            <Text color={theme.textDim}>{placeholderText}</Text>
           </Box>
         ) : inputLocked ? (
           <Box key="busy-locked-input" width="100%" overflow="hidden">
-            <Text color={theme.DIM}>{lockedInputText || " "}</Text>
+            <Text color={theme.textDim}>{lockedInputText || " "}</Text>
           </Box>
         ) : (
           promptViewport.visibleRows.map((row, index) => {
@@ -845,14 +887,14 @@ export function BottomComposer({
               <Box key={`${row.start}-${row.end}-${index}`} width="100%" overflow="hidden">
                 {isCursorRow && segments ? (
                   <>
-                    <Text color={theme.TEXT}>{segments.before}</Text>
-                    <Text backgroundColor={cursorVisible ? theme.TEXT : undefined} color={cursorVisible ? theme.PANEL : undefined}>
+                    <Text color={theme.text}>{segments.before}</Text>
+                    <Text backgroundColor={cursorVisible ? theme.text : undefined} color={cursorVisible ? theme.surface : undefined}>
                       {segments.current || " "}
                     </Text>
-                    <Text color={theme.TEXT}>{segments.after}</Text>
+                    <Text color={theme.text}>{segments.after}</Text>
                   </>
                 ) : (
-                  <Text color={theme.TEXT}>{row.text || " "}</Text>
+                  <Text color={theme.text}>{row.text || " "}</Text>
                 )}
               </Box>
             );
@@ -866,17 +908,17 @@ 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}
           paddingY={0}
           borderStyle="round"
-          borderColor={theme.WARNING}
+          borderColor={theme.warning}
         >
           {promptLine}
         </Box>
@@ -888,15 +930,15 @@ export function BottomComposer({
           paddingX={1}
           paddingY={0}
           borderStyle="round"
-          borderColor={theme.BORDER_SUBTLE}
+          borderColor={theme.border}
         >
           {promptLine}
-        </Box>
-      )}
-
-      {commandSuggestionState.reserveSuggestionRow && (
-        <Box paddingLeft={1} marginTop={0} width="100%" overflow="hidden">
-          <Text color={theme.DIM} wrap="truncate">{suggestionText || " "}</Text>
+        </Box>
+      )}
+
+      {commandSuggestionState.reserveSuggestionRow && (
+        <Box paddingLeft={1} marginTop={0} width="100%" overflow="hidden">
+          <Text color={theme.textDim} wrap="truncate">{suggestionText || " "}</Text>
         </Box>
       )}
 
@@ -904,70 +946,66 @@ 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} />
+                  <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}>
-                <Text color={theme.DIM}>Esc cancel  Ctrl+C quit</Text>
+                <Text color={theme.textDim}>Esc cancel  Ctrl+C quit</Text>
               </Box>
             )}
             {!inputLocked && selectionProfile && (
               <Box flexShrink={0}>
-                <Text color={theme.DIM}>{selectionProfile.shortHint}</Text>
-              </Box>
-            )}
-          </>
-        )}
-      </Box>
-
-      {layoutMode !== "micro" && !crampedViewport && (
-        <Box paddingLeft={1} paddingRight={1} marginTop={0} width="100%" justifyContent="space-between">
-          <Box flexGrow={1} flexShrink={1} overflow="hidden">
-            <Text
-              color={modeDisplay.ringColor}
-              backgroundColor={modeDisplay.ringFill}
-              bold={modeDisplay.ringBold}
-            >
-              {modeDisplay.ringGlyph}
-            </Text>
-            <Text color={theme.DIM}>{" "}</Text>
-            <Text color={modeDisplay.labelColor} bold={modeDisplay.labelBold}>{modeDisplay.label}</Text>
-            <Text color={theme.DIM}>{"  "}{model}{reasoningSuffix}{"  Ctrl+O Ctrl+Alt+P"}</Text>
-            {planMode && <Text color={theme.ACCENT}>{"  Plan"}</Text>}
-          </Box>
-          <Box flexShrink={0}>
-            {tokenDisplay.hasKnownLimit ? (
-              <>
-                <Text color={theme.DIM}>Context: </Text>
-                <Text color={theme.TEXT}>{tokenDisplay.usedText}</Text>
-                <Text color={theme.DIM}>
-                  {" / "}{tokenDisplay.limitText}
-                  {tokenDisplay.percentage !== null ? ` · ${tokenDisplay.isEstimatedLimit ? "~" : ""}${tokenDisplay.percentage}%` : ""}
-                </Text>
-              </>
-            ) : (
-              <Text color={theme.DIM}>Context: Unknown</Text>
-            )}
-          </Box>
-        </Box>
-      )}
-    </Box>
-  );
+                <Text color={theme.textDim}>{selectionProfile.shortHint}</Text>
+              </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
@@ -1003,7 +1041,9 @@ export const MemoizedBottomComposer = memo(BottomComposer, (prev, next) => {
   // 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

@@ -24,9 +24,9 @@ export function DashCard({
   children,
 }: DashCardProps) {
   const theme = useTheme();
-  const border = borderColor ?? theme.BORDER_SUBTLE;
-  const tColor = titleColor ?? theme.MUTED;
-  const bColor = badgeColor ?? theme.DIM;
+  const border = borderColor ?? theme.border;
+  const tColor = titleColor ?? theme.textMuted;
+  const bColor = badgeColor ?? theme.textDim;
 
   // Account for AppShell gutter (-1) and Timeline paddingX={1} (-2)
   const w = cols - 3;