@golba98/codexa 1.0.2 → 1.0.3

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

@@ -98,10 +98,12 @@ export function getTokenBarDisplay(tokensUsed: number, modelSpec: ModelSpec) {
 interface BottomComposerProps {
   layout: Layout;
   uiState: UIState;
-  themeName?: string;
-  mode?: string;
-  model?: string;
-  reasoningLevel?: string;
+  themeName?: string;
+  mode?: string;
+  model?: string;
+  footerModelDisplay?: string;
+  reasoningLevel?: string;
+  contextDisplay?: string;
   planMode?: boolean;
   showBusyLoader?: boolean;
   tokensUsed?: number;
@@ -236,7 +238,7 @@ export function measureBottomComposerRows({
 
   // 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 showMetadata = layout.mode !== "micro";
   const bottomPadding = layout.mode === "micro" || layout.rows <= 24 ? 0 : 1;
   const footerGapRows = getComposerToFooterGapRows(layout);
 
@@ -338,13 +340,53 @@ 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 = "",
+  themeName = "purple",
+  mode = "",
+  model = "",
+  footerModelDisplay,
+  reasoningLevel = "",
+  contextDisplay,
   planMode = false,
   showBusyLoader = true,
   tokensUsed = 0,
@@ -807,16 +849,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 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.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 +864,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 +883,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>
             );
@@ -876,27 +914,57 @@ export function BottomComposer({
           paddingX={1}
           paddingY={0}
           borderStyle="round"
-          borderColor={theme.WARNING}
+          borderColor={theme.warning}
         >
           {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_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>
+          {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>
+        </Box>
+      )}
+
+      {commandSuggestionState.reserveSuggestionRow && (
+        <Box paddingLeft={1} marginTop={0} width="100%" overflow="hidden">
+          <Text color={theme.textDim} wrap="truncate">{suggestionText || " "}</Text>
         </Box>
       )}
 
@@ -911,7 +979,7 @@ export function BottomComposer({
             <Box flexShrink={1} flexGrow={1} overflow="hidden" flexDirection="row">
               {!!getExternalCliLabel(activeProviderId ?? "") && uiState.kind === "THINKING" && (
                 <>
-                  <Spinner color={theme.ACCENT} />
+                  <Spinner color={theme.accent} />
                   <Text>{" "}</Text>
                 </>
               )}
@@ -923,52 +991,21 @@ export function BottomComposer({
             </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>
+                <Text color={theme.textDim}>{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>
-  );
-}
+    </Box>
+  );
+}
 
 // Helper to extract the relevant uiState kind for comparison
 function getUiStateKey(uiState: UIState): string {
@@ -1000,10 +1037,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.reasoningLevel !== next.reasoningLevel) 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

@@ -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;

package/src/ui/Markdown.tsx

@@ -131,7 +131,7 @@ function InlineText({ parts, color }: { parts: InlinePart[]; color: string }) {
   return (
     <Text color={color} wrap="wrap">
       {parts.map((part, index) => {
-        if (part.kind === "code") return <Text key={index} color={theme.INFO}>{part.text}</Text>;
+        if (part.kind === "code") return <Text key={index} color={theme.info}>{part.text}</Text>;
         if (part.kind === "bold") return <Text key={index} bold>{part.text}</Text>;
         return <Text key={index}>{part.text}</Text>;
       })}
@@ -148,7 +148,7 @@ function renderTreeLabel(label: string, theme: ReturnType<typeof useTheme>) {
 
   if (isDirectory) {
     return (
-      <Text color={theme.TEXT} bold>
+      <Text color={theme.text} bold>
         {base}
         {slash}
       </Text>
@@ -156,9 +156,9 @@ function renderTreeLabel(label: string, theme: ReturnType<typeof useTheme>) {
   }
 
   return (
-    <Text color={theme.TEXT}>
+    <Text color={theme.text}>
       {base.slice(0, lastDot)}
-      <Text color={theme.DIM}>{base.slice(lastDot)}</Text>
+      <Text color={theme.textDim}>{base.slice(lastDot)}</Text>
     </Text>
   );
 }
@@ -171,7 +171,7 @@ function TreeLine({ line }: { line: string }) {
 
   return (
     <Box width="100%">
-      <Text color={theme.DIM}>{prefix}</Text>
+      <Text color={theme.textDim}>{prefix}</Text>
       {renderTreeLabel(label, theme)}
     </Box>
   );
@@ -184,17 +184,17 @@ function isTreeLine(line: string): boolean {
 function getDiffColor(kind: DiffRenderLineType, theme: ReturnType<typeof useTheme>): string {
   switch (kind) {
     case "add":
-      return theme.SUCCESS;
+      return theme.success;
     case "remove":
-      return theme.ERROR;
+      return theme.error;
     case "hunk":
-      return theme.ACCENT;
+      return theme.accent;
     case "file":
     case "meta":
-      return theme.INFO;
+      return theme.info;
     case "context":
     default:
-      return theme.MUTED;
+      return theme.textMuted;
   }
 }
 
@@ -245,9 +245,9 @@ export function RenderMessage({ segments, width, brightHeadings = false }: { seg
                     ) : (
                       <Box key={lineIndex}>
                         <Box width={3} flexShrink={0} marginRight={1} justifyContent="flex-end">
-                          <Text color={theme.DIM}>{lineIndex + 1}</Text>
+                          <Text color={theme.textDim}>{lineIndex + 1}</Text>
                         </Box>
-                        <Text color={theme.MUTED} wrap="wrap">{line || " "}</Text>
+                        <Text color={theme.textMuted} wrap="wrap">{line || " "}</Text>
                       </Box>
                     )
                   ))}
@@ -257,10 +257,10 @@ export function RenderMessage({ segments, width, brightHeadings = false }: { seg
         }
 
         if (segment.type === "header") {
-          const color = segment.level === 1 ? theme.ACCENT : segment.level === 2 ? theme.TEXT : (brightHeadings ? theme.TEXT : theme.MUTED);
+          const color = segment.level === 1 ? theme.accent : segment.level === 2 ? theme.text : (brightHeadings ? theme.text : theme.textMuted);
           return (
             <Box key={index} flexDirection="column" marginTop={marginTop}>
-              {segment.level <= 2 && <Text color={theme.BORDER_SUBTLE}>{"───"}</Text>}
+              {segment.level <= 2 && <Text color={theme.border}>{"───"}</Text>}
               <Box>
                 <Text color={color}>{segment.level <= 2 ? "✧ " : "• "}</Text>
                 <InlineText parts={segment.parts} color={color} />
@@ -274,9 +274,9 @@ export function RenderMessage({ segments, width, brightHeadings = false }: { seg
             <Box key={index} flexDirection="column" marginTop={marginTop}>
               {segment.items.map((item, itemIndex) => (
                 <Box key={itemIndex}>
-                  <Text color={theme.ACCENT}>{segment.ordered ? `${item.num}. ` : "• "}</Text>
+                  <Text color={theme.accent}>{segment.ordered ? `${item.num}. ` : "• "}</Text>
                   <Box flexGrow={1} flexShrink={1}>
-                    <InlineText parts={item.parts} color={theme.TEXT} />
+                    <InlineText parts={item.parts} color={theme.text} />
                   </Box>
                 </Box>
               ))}
@@ -295,7 +295,7 @@ export function RenderMessage({ segments, width, brightHeadings = false }: { seg
               if (parts.length === 1 && parts[0]!.kind === "text" && !parts[0]!.text.trim()) {
                 return null;
               }
-              return <InlineText key={lineIndex} parts={parts} color={theme.TEXT} />;
+              return <InlineText key={lineIndex} parts={parts} color={theme.text} />;
             })}
           </Box>
         );

package/src/ui/ModelPickerScreen.tsx

@@ -297,28 +297,28 @@ export function ModelPickerScreen({
     <Box flexDirection="column" width={panelWidth}>
       <Box
         borderStyle="round"
-        borderColor={theme.PROMPT}
+        borderColor={theme.prompt}
         paddingX={1}
         paddingY={0}
         width={panelWidth}
         flexDirection="column"
       >
         <Box width="100%" overflow="hidden">
-          <Text color={theme.ACCENT} bold>{title}</Text>
+          <Text color={theme.accent} bold>{title}</Text>
         </Box>
         <Box width="100%" overflow="hidden">
-          <Text color={theme.MUTED}>
+          <Text color={theme.textMuted}>
             {clampVisualText(routeText, innerWidth)}
           </Text>
         </Box>
         <Box width="100%" overflow="hidden">
-          <Text color={reasoningUnavailable ? theme.DIM : theme.MUTED}>
+          <Text color={reasoningUnavailable ? theme.textDim : theme.textMuted}>
             {clampVisualText(reasoningText, innerWidth)}
           </Text>
         </Box>
         {sourceMarker && (
           <Box width="100%" overflow="hidden">
-            <Text color={theme.DIM}>
+            <Text color={theme.textDim}>
               {clampVisualText(sourceMarker, innerWidth)}
             </Text>
           </Box>
@@ -326,7 +326,7 @@ export function ModelPickerScreen({
 
         <Box flexDirection="column" marginTop={0} width="100%">
           {models.length === 0 ? (
-            <Text color={theme.MUTED}>
+            <Text color={theme.textMuted}>
               {isLoading ? "Discovering models from the Codex runtime..." : (emptyMessage ?? "No models available.")}
             </Text>
           ) : (
@@ -389,15 +389,15 @@ function ModelPickerRow({
   return (
     <Box width="100%" overflow="hidden">
       <Box width={markerWidth} flexShrink={0}>
-        <Text color={isHighlighted ? theme.ACCENT : theme.DIM}>{isHighlighted ? ">" : " "}</Text>
+        <Text color={isHighlighted ? theme.accent : theme.textDim}>{isHighlighted ? ">" : " "}</Text>
       </Box>
       <Box width={nameWidth} flexShrink={0} overflow="hidden">
-        <Text color={isHighlighted ? theme.TEXT : theme.MUTED} bold={isHighlighted}>
+        <Text color={isHighlighted ? theme.text : theme.textMuted} bold={isHighlighted}>
           {name}
         </Text>
       </Box>
       <Box width={checkWidth} flexShrink={0}>
-        <Text color={theme.DIM}>{isCurrent ? "✓" : " "}</Text>
+        <Text color={theme.textDim}>{isCurrent ? "✓" : " "}</Text>
       </Box>
       {pillWidth > 0 && (
         <>
@@ -405,7 +405,7 @@ function ModelPickerRow({
             <Text>  </Text>
           </Box>
           <Box width={pillWidth} flexShrink={0} overflow="hidden">
-            <Text color={theme.ACCENT} bold>
+            <Text color={theme.accent} bold>
               {pillText}
             </Text>
           </Box>

package/src/ui/ModelReasoningPicker.tsx

@@ -290,18 +290,18 @@ function LoadingPickerView({
     <Box flexDirection="column" width="100%">
       <Box
         borderStyle="round"
-        borderColor={theme.BORDER_SUBTLE}
+        borderColor={theme.border}
         paddingX={2}
         paddingY={0}
         width="100%"
       >
         <Box flexDirection="column" width="100%">
           <Box>
-            <Text color={theme.ACCENT} bold>Select model  </Text>
-            <Text color={theme.MUTED}>Esc cancel</Text>
+            <Text color={theme.accent} bold>Select model  </Text>
+            <Text color={theme.textMuted}>Esc cancel</Text>
           </Box>
           <Box marginTop={0}>
-            <Text color={theme.DIM}>
+            <Text color={theme.textDim}>
               {isLoading
                 ? "Discovering models from the Codex runtime…"
                 : "No models available yet."}
@@ -353,18 +353,18 @@ function InteractivePickerView({
   return (
     <Box
       borderStyle="round"
-      borderColor={theme.BORDER_ACTIVE}
+      borderColor={theme.borderFocused}
       paddingX={2}
       paddingY={0}
       width="100%"
       flexDirection="column"
     >
       <Box>
-        <Text color={theme.ACCENT} bold>Select model  </Text>
-        <Text color={theme.MUTED}>{subtitle}</Text>
+        <Text color={theme.accent} bold>Select model  </Text>
+        <Text color={theme.textMuted}>{subtitle}</Text>
       </Box>
       <Box marginTop={0}>
-        <Text color={theme.DIM}>{reasoningHint}</Text>
+        <Text color={theme.textDim}>{reasoningHint}</Text>
       </Box>
 
       <Box
@@ -415,7 +415,7 @@ function ModelRow({
   theme,
 }: ModelRowProps) {
   const cursorGlyph = isHighlighted ? "▸ " : "  ";
-  const nameColor = isHighlighted ? theme.TEXT : theme.MUTED;
+  const nameColor = isHighlighted ? theme.text : theme.textMuted;
   const commitMark = isCommitted ? "  ✓" : "";
   const selectedIndex = availableLevels.findIndex((level) => level.id === selectedReasoning);
   const name = model.label === model.model ? model.model : `${model.label} (${model.model})`;
@@ -423,10 +423,10 @@ function ModelRow({
   const bars = availableLevels.map((level, i) => {
     const isActive = i === selectedIndex;
     const color = !interactive
-      ? theme.DIM
+      ? theme.textDim
       : isActive
-        ? isHighlighted ? theme.ACCENT : theme.TEXT
-        : theme.DIM;
+        ? isHighlighted ? theme.accent : theme.text
+        : theme.textDim;
 
     return (
       <Text key={level.id} color={color} bold={isActive && isHighlighted && interactive}>
@@ -438,7 +438,7 @@ function ModelRow({
   return (
     <Box flexDirection="row" width="100%">
       <Box width={3} flexShrink={0}>
-        <Text color={isHighlighted ? theme.ACCENT : theme.DIM}>{cursorGlyph}</Text>
+        <Text color={isHighlighted ? theme.accent : theme.textDim}>{cursorGlyph}</Text>
       </Box>
       <Box flexGrow={1} flexDirection="row" paddingRight={1}>
         <Box flexShrink={1}>
@@ -447,7 +447,7 @@ function ModelRow({
           </Text>
         </Box>
         <Box flexShrink={0} paddingLeft={1}>
-          <Text color={theme.DIM}>{commitMark}</Text>
+          <Text color={theme.textDim}>{commitMark}</Text>
         </Box>
       </Box>
       <Box flexDirection="row" gap={1} flexShrink={0}>