@golba98/codexa 1.0.2 → 1.0.4

package/src/ui/RunFooter.tsx

@@ -43,14 +43,14 @@ function RunFooter({ uiState, showBusyLoader = true }: RunFooterProps) {
 
   return (
     <Box flexDirection="column" paddingBottom={1} width="100%">
-      <Box borderStyle="single" borderTop={true} borderBottom={false} borderLeft={false} borderRight={false} borderColor={theme.BORDER_SUBTLE} marginBottom={1} />
+      <Box borderStyle="single" borderTop={true} borderBottom={false} borderLeft={false} borderRight={false} borderColor={theme.border} marginBottom={1} />
       <Box paddingX={1} width="100%" justifyContent="space-between" overflow="hidden">
         <Box flexShrink={1} flexGrow={1} overflow="hidden">
-          <Text color={theme.INFO}>{"✧ "}</Text>
+          <Text color={theme.info}>{"✧ "}</Text>
           <AnimatedStatusText baseText={getRunFooterStatus(uiState)} isActive={isActive} />
         </Box>
         <Box flexShrink={0}>
-          <Text color={theme.DIM}>Esc cancel  Ctrl+C quit</Text>
+          <Text color={theme.textDim}>Esc cancel  Ctrl+C quit</Text>
         </Box>
       </Box>
     </Box>

package/src/ui/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/SelectionPanel.tsx

@@ -36,23 +36,24 @@ export function SelectionPanel({
       {/* Block 1: title + instructions */}
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_SUBTLE}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={1}
         width="100%"
       >
-        <Text color={theme.ACCENT} bold>{title}  </Text>
-        <Text color={theme.MUTED}>{subtitle}</Text>
+        <Text color={theme.accent} bold>{title}  </Text>
+        <Text color={theme.textMuted}>{subtitle}</Text>
       </Box>
 
       {/* Block 2: selection list */}
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_ACTIVE}
+        borderColor={theme.borderFocused}
         paddingX={2}
         paddingY={1}
         marginTop={1}
         width="100%"
+        flexDirection="column"
       >
         <SelectInput
           items={items}
@@ -61,6 +62,9 @@ export function SelectionPanel({
           onSelect={(item) => onSelect(item.value)}
           onHighlight={(item) => onHighlight?.(item.value)}
         />
+        <Box marginTop={1}>
+          <Text color={theme.textDim}>Esc to close · Enter to confirm</Text>
+        </Box>
       </Box>
     </Box>
   );

package/src/ui/SettingsPanel.tsx

@@ -39,7 +39,7 @@ export function SettingsPanel<TKey extends string>({
 
   const activeSetting = settings[selectedIndex] ?? settings[0];
   const subtitle = useMemo(() => {
-    const instructions = "↑↓ setting  ←→ option  Enter save  Esc cancel";
+    const instructions = "↑↓ setting  ←→ option  Esc to close · Enter to confirm";
     if (!activeSetting?.description) {
       return instructions;
     }
@@ -91,26 +91,26 @@ export function SettingsPanel<TKey extends string>({
     <Box flexDirection="column" width="100%" marginTop={1}>
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_SUBTLE}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={1}
         width="100%"
         flexDirection="column"
       >
         <Box>
-          <Text color={theme.ACCENT} bold>{title}  </Text>
-          <Text color={theme.MUTED}>{subtitle.split("\n")[0]}</Text>
+          <Text color={theme.accent} bold>{title}  </Text>
+          <Text color={theme.textMuted}>{subtitle.split("\n")[0]}</Text>
         </Box>
         {activeSetting?.description && (
           <Box marginTop={1}>
-            <Text color={theme.DIM}>{activeSetting.description}</Text>
+            <Text color={theme.textDim}>{activeSetting.description}</Text>
           </Box>
         )}
       </Box>
 
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_ACTIVE}
+        borderColor={theme.borderFocused}
         paddingX={2}
         paddingY={1}
         marginTop={1}
@@ -124,10 +124,10 @@ export function SettingsPanel<TKey extends string>({
           return (
             <Box key={setting.key} flexDirection="row" width="100%">
               <Box width={3}>
-                <Text color={isSelectedRow ? theme.ACCENT : theme.DIM}>{isSelectedRow ? "▸ " : "  "}</Text>
+                <Text color={isSelectedRow ? theme.accent : theme.textDim}>{isSelectedRow ? "▸ " : "  "}</Text>
               </Box>
               <Box width={20}>
-                <Text color={isSelectedRow ? theme.TEXT : theme.MUTED} bold={isSelectedRow}>
+                <Text color={isSelectedRow ? theme.text : theme.textMuted} bold={isSelectedRow}>
                   {setting.label}
                 </Text>
               </Box>
@@ -138,7 +138,7 @@ export function SettingsPanel<TKey extends string>({
                   return (
                     <Text
                       key={option.value}
-                      color={isActiveOption ? (isSelectedRow ? theme.ACCENT : theme.TEXT) : theme.DIM}
+                      color={isActiveOption ? (isSelectedRow ? theme.accent : theme.text) : theme.textDim}
                       bold={isActiveOption}
                     >
                       {optionIndex > 0 ? "  " : ""}

package/src/ui/Spinner.tsx

@@ -7,7 +7,7 @@ const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "
 export function Spinner({ color }: { color?: string }) {
   const theme = useTheme();
   const [frame, setFrame] = useState(0);
-  const activeColor = color ?? theme.DIM;
+  const activeColor = color ?? theme.textDim;
 
   useEffect(() => {
     const timer = setInterval(() => {

package/src/ui/TextEntryPanel.tsx

@@ -27,7 +27,7 @@ export function TextEntryPanel({
   placeholder = "",
   initialValue = "",
   inputLabel = "Input",
-  footerHint = "Enter submit  Esc cancel  Backspace delete",
+  footerHint = "Esc to close · Enter to confirm",
   onSubmit,
   onCancel,
 }: TextEntryPanelProps) {
@@ -97,18 +97,18 @@ export function TextEntryPanel({
     <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>{title}  </Text>
-        <Text color={theme.MUTED}>{subtitle}</Text>
+        <Text color={theme.accent} bold>{title}  </Text>
+        <Text color={theme.textMuted}>{subtitle}</Text>
       </Box>
 
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_ACTIVE}
+        borderColor={theme.borderFocused}
         paddingX={2}
         paddingY={1}
         marginTop={1}
@@ -116,18 +116,18 @@ export function TextEntryPanel({
         flexDirection="column"
       >
         <Box>
-          <Text color={theme.TEXT}>{inputLabel}: </Text>
-          <Text color={display.isPlaceholder ? theme.DIM : theme.TEXT}>{display.before}</Text>
+          <Text color={theme.text}>{inputLabel}: </Text>
+          <Text color={display.isPlaceholder ? theme.textDim : theme.text}>{display.before}</Text>
           <Text
-            backgroundColor={theme.TEXT}
-            color={theme.PANEL}
+            backgroundColor={theme.text}
+            color={theme.surface}
           >
             {display.current}
           </Text>
-          <Text color={display.isPlaceholder ? theme.DIM : theme.TEXT}>{display.after}</Text>
+          <Text color={display.isPlaceholder ? theme.textDim : theme.text}>{display.after}</Text>
         </Box>
         <Box marginTop={1}>
-          <Text color={theme.DIM}>{footerHint}</Text>
+          <Text color={theme.textDim}>{footerHint}</Text>
         </Box>
       </Box>
     </Box>

package/src/ui/ThinkingBlock.tsx

@@ -53,21 +53,21 @@ export function ThinkingBlock({ cols, run }: ThinkingBlockProps) {
       cols={cols}
       title="Processing"
       rightBadge={rightBadge}
-      borderColor={run.status === "running" ? theme.BORDER_ACTIVE : theme.BORDER_SUBTLE}
+      borderColor={run.status === "running" ? theme.borderFocused : theme.border}
     >
       {blocks.length === 0 ? (
-        <Text color={theme.DIM}>No processing updates</Text>
+        <Text color={theme.textDim}>No processing updates</Text>
       ) : (
         <Box flexDirection="column" width="100%">
           {currentText && run.status === "running" && (
             <Box width="100%">
-              <Text color={theme.INFO} bold>Current: </Text>
-              <Text color={theme.TEXT}>{currentText}</Text>
+              <Text color={theme.info} bold>Current: </Text>
+              <Text color={theme.text}>{currentText}</Text>
             </Box>
           )}
           {hiddenCount > 0 && (
             <Box marginTop={currentText && run.status === "running" ? 1 : 0}>
-              <Text color={theme.DIM}>{`... ${hiddenCount} earlier update${hiddenCount === 1 ? "" : "s"}`}</Text>
+              <Text color={theme.textDim}>{`... ${hiddenCount} earlier update${hiddenCount === 1 ? "" : "s"}`}</Text>
             </Box>
           )}
           {blocks.map((block, blockIndex) => {
@@ -79,16 +79,16 @@ export function ThinkingBlock({ cols, run }: ThinkingBlockProps) {
                 width="100%"
                 marginTop={blockIndex === 0 && hiddenCount === 0 && !(currentText && run.status === "running") ? 0 : 1}
               >
-                <Text color={isLive ? theme.ACCENT : theme.INFO} bold={isLive}>
+                <Text color={isLive ? theme.accent : theme.info} bold={isLive}>
                   {`${getBlockMarker(isLive)} ${isLive ? "Live" : block.label}`}
                 </Text>
                 {formatProgressBlockBodyLines(block.text, contentWidth).map((line, lineIndex) => (
-                  <Text key={`${block.key}-${lineIndex}`} color={theme.MUTED}>
+                  <Text key={`${block.key}-${lineIndex}`} color={theme.textMuted}>
                     {line ? `${isLive ? "  | " : "    "}${line}` : " "}
                   </Text>
                 ))}
                 {isLive && (
-                  <Text color={theme.ACCENT}>  | ▌</Text>
+                  <Text color={theme.accent}>  | ▌</Text>
                 )}
               </Box>
             );