@golba98/codexa 1.0.2 → 1.0.3

package/src/core/updateCheck.ts

@@ -1,117 +1,96 @@
 import { APP_VERSION } from "../config/settings.js";
+import { isLocalDevChannel } from "./channel.js";
+
+export const CODEXA_NPM_PACKAGE = "@golba98/codexa";
+export const CODEXA_NPM_REGISTRY_URL = "https://registry.npmjs.org/@golba98%2Fcodexa";
+export const CODEXA_UPDATE_COMMAND = `npm install -g ${CODEXA_NPM_PACKAGE}@latest`;
 
 export type UpdateStatus = "up-to-date" | "update-available" | "unknown" | "error";
 
+export interface NpmRegistryMetadata {
+  "dist-tags": { latest?: string };
+}
+
 export interface UpdateCheckResult {
   status: UpdateStatus;
   currentVersion: string;
   latestVersion: string | null;
   errorMessage?: string;
   checkedAt: number;
+  source?: "npm" | "cache";
 }
 
-export interface NpmRegistryMetadata {
-  "dist-tags"?: {
-    latest?: unknown;
-  };
-}
+const FETCH_TIMEOUT_MS = 5000;
 
-export interface UpdateCheckOverrides {
-  fetchNpmMetadataFn?: (url: string, init: RequestInit) => Promise<NpmRegistryMetadata>;
-  currentVersion?: string;
-  now?: () => number;
+/** Strip a leading "v" so "v1.0.2" and "1.0.2" are treated as equal. */
+export function normalizeVersion(v: string): string {
+  return v.startsWith("v") ? v.slice(1) : v;
 }
 
-export const CODEXA_NPM_PACKAGE = "@golba98/codexa";
-export const CODEXA_NPM_REGISTRY_URL = "https://registry.npmjs.org/@golba98%2Fcodexa";
-export const CODEXA_UPDATE_COMMAND = "npm install -g @golba98/codexa@latest";
+const SEMVER_RE = /^\d+\.\d+\.\d+(-[\w.]+)?$/;
 
-const REMOTE_TIMEOUT_MS = 3000;
-
-interface ParsedSemver {
-  major: number;
-  minor: number;
-  patch: number;
-  prerelease: string[];
+/** Returns true for valid semver strings with or without a leading "v". */
+export function isValidSemver(v: string): boolean {
+  return SEMVER_RE.test(normalizeVersion(v));
 }
 
-function parseSemver(version: string): ParsedSemver | null {
-  const match = version.trim().match(/^v?(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?(?:\+[0-9A-Za-z.-]+)?$/);
-  if (!match) return null;
-
-  return {
-    major: Number(match[1]),
-    minor: Number(match[2]),
-    patch: Number(match[3]),
-    prerelease: match[4]?.split(".") ?? [],
-  };
+export function shouldRunStartupUpdateCheck(
+  env: NodeJS.ProcessEnv = process.env,
+  enabled = true,
+): boolean {
+  return enabled && !isLocalDevChannel(env);
 }
 
-function comparePrerelease(left: string[], right: string[]): number {
-  if (left.length === 0 && right.length === 0) return 0;
-  if (left.length === 0) return 1;
-  if (right.length === 0) return -1;
-
-  const max = Math.max(left.length, right.length);
-  for (let index = 0; index < max; index += 1) {
-    const a = left[index];
-    const b = right[index];
-    if (a === undefined) return -1;
-    if (b === undefined) return 1;
-    if (a === b) continue;
-
-    const aNumeric = /^\d+$/.test(a);
-    const bNumeric = /^\d+$/.test(b);
-    if (aNumeric && bNumeric) return Number(a) > Number(b) ? 1 : -1;
-    if (aNumeric) return -1;
-    if (bNumeric) return 1;
-    return a > b ? 1 : -1;
-  }
+// Compares two semver strings numerically. Returns negative if a < b, 0 if equal, positive if a > b.
+// Pre-release versions (e.g. 1.0.2-beta.1) sort below their release counterpart (1.0.2 > 1.0.2-beta.1).
+// Leading "v" is stripped before comparison.
+export function compareSemver(a: string, b: string): number {
+  const parseParts = (v: string): { numeric: number[]; prerelease: string | null } => {
+    const norm = normalizeVersion(v);
+    const dashIdx = norm.indexOf("-");
+    const base = dashIdx === -1 ? norm : norm.slice(0, dashIdx);
+    const prerelease = dashIdx === -1 ? null : norm.slice(dashIdx + 1);
+    const numeric = base.split(".").map((p) => parseInt(p, 10) || 0);
+    return { numeric, prerelease };
+  };
 
-  return 0;
-}
+  const pa = parseParts(a);
+  const pb = parseParts(b);
+  const len = Math.max(pa.numeric.length, pb.numeric.length);
 
-export function compareSemver(leftVersion: string, rightVersion: string): number {
-  const left = parseSemver(leftVersion);
-  const right = parseSemver(rightVersion);
-  if (!left || !right) {
-    throw new Error(`Invalid semver version: ${!left ? leftVersion : rightVersion}`);
+  for (let i = 0; i < len; i++) {
+    const diff = (pa.numeric[i] ?? 0) - (pb.numeric[i] ?? 0);
+    if (diff !== 0) return diff;
   }
 
-  for (const key of ["major", "minor", "patch"] as const) {
-    if (left[key] !== right[key]) return left[key] > right[key] ? 1 : -1;
+  // Same numeric version: no pre-release > has pre-release
+  if (pa.prerelease === null && pb.prerelease !== null) return 1;
+  if (pa.prerelease !== null && pb.prerelease === null) return -1;
+  if (pa.prerelease !== null && pb.prerelease !== null) {
+    return pa.prerelease < pb.prerelease ? -1 : pa.prerelease > pb.prerelease ? 1 : 0;
   }
-
-  return comparePrerelease(left.prerelease, right.prerelease);
+  return 0;
 }
 
-export function isNewerVersion(latestVersion: string, currentVersion: string): boolean {
-  return compareSemver(latestVersion, currentVersion) > 0;
+export function isNewerVersion(candidate: string, current: string): boolean {
+  return compareSemver(candidate, current) > 0;
 }
 
-async function fetchNpmMetadata(url: string, init: RequestInit): Promise<NpmRegistryMetadata> {
-  const res = await fetch(url, init);
-  if (!res.ok) {
-    throw new Error(`npm registry responded with HTTP ${res.status}`);
-  }
-  return await res.json() as NpmRegistryMetadata;
+export interface UpdateCheckOverrides {
+  currentVersion?: string;
+  fetchNpmMetadataFn?: (url: string) => Promise<NpmRegistryMetadata>;
 }
 
-export async function getNpmLatestVersion(
-  fetchMetadata: (url: string, init: RequestInit) => Promise<NpmRegistryMetadata> = fetchNpmMetadata,
-): Promise<string> {
+async function defaultFetchNpmMetadata(url: string): Promise<NpmRegistryMetadata> {
   const controller = new AbortController();
-  const timer = setTimeout(() => controller.abort(), REMOTE_TIMEOUT_MS);
+  const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
   try {
-    const data = await fetchMetadata(CODEXA_NPM_REGISTRY_URL, {
+    const res = await fetch(url, {
       signal: controller.signal,
-      headers: { "User-Agent": "Codexa-Update-Checker/1.0" },
+      headers: { "User-Agent": `${CODEXA_NPM_PACKAGE}-update-checker/1.0` },
     });
-    const latest = data?.["dist-tags"]?.latest;
-    if (typeof latest !== "string" || !latest.trim()) {
-      throw new Error("npm registry response did not include dist-tags.latest");
-    }
-    return latest.trim();
+    if (!res.ok) throw new Error(`npm registry returned HTTP ${res.status}`);
+    return await res.json() as NpmRegistryMetadata;
   } finally {
     clearTimeout(timer);
   }
@@ -121,28 +100,51 @@ export async function checkForUpdates(
   opts?: { enabled?: boolean },
   overrides?: UpdateCheckOverrides,
 ): Promise<UpdateCheckResult> {
-  const now = overrides?.now ?? Date.now;
-  const currentVersion = overrides?.currentVersion ?? APP_VERSION;
+  const currentVersion = normalizeVersion(overrides?.currentVersion ?? APP_VERSION);
 
   if (opts?.enabled === false) {
-    return { status: "unknown", currentVersion, latestVersion: null, checkedAt: now() };
+    return { status: "unknown", currentVersion, latestVersion: null, checkedAt: Date.now(), source: "npm" };
   }
 
   try {
-    const latestVersion = await getNpmLatestVersion(overrides?.fetchNpmMetadataFn);
-    return {
-      status: isNewerVersion(latestVersion, currentVersion) ? "update-available" : "up-to-date",
-      currentVersion,
-      latestVersion,
-      checkedAt: now(),
-    };
+    const fetchFn = overrides?.fetchNpmMetadataFn ?? defaultFetchNpmMetadata;
+    const metadata = await fetchFn(CODEXA_NPM_REGISTRY_URL);
+    const rawLatest = metadata["dist-tags"]?.latest;
+
+    if (!rawLatest) {
+      return {
+        status: "error",
+        currentVersion,
+        latestVersion: null,
+        errorMessage: "npm registry response did not include dist-tags.latest",
+        checkedAt: Date.now(),
+        source: "npm",
+      };
+    }
+
+    const latestVersion = normalizeVersion(rawLatest);
+
+    if (!isValidSemver(latestVersion) || !isValidSemver(currentVersion)) {
+      return {
+        status: "unknown",
+        currentVersion,
+        latestVersion: rawLatest,
+        errorMessage: `Invalid semver — current: "${currentVersion}", latest: "${rawLatest}"`,
+        checkedAt: Date.now(),
+        source: "npm",
+      };
+    }
+
+    const status = isNewerVersion(latestVersion, currentVersion) ? "update-available" : "up-to-date";
+    return { status, currentVersion, latestVersion, checkedAt: Date.now(), source: "npm" };
   } catch (err) {
     return {
       status: "error",
       currentVersion,
       latestVersion: null,
       errorMessage: err instanceof Error ? err.message : String(err),
-      checkedAt: now(),
+      checkedAt: Date.now(),
+      source: "npm",
     };
   }
 }
@@ -151,22 +153,36 @@ export function formatUpdateInstructions(result: UpdateCheckResult | null): stri
   const current = result?.currentVersion ?? APP_VERSION;
   const latest = result?.latestVersion ?? "unknown";
 
+  if (result?.status === "error") {
+    return [
+      `Current installed version: ${current}`,
+      `npm latest version:        ${latest}`,
+      `Error checking npm update status: ${result.errorMessage ?? "unknown error"}`,
+    ].join("\n");
+  }
+
   let statusLine: string;
   if (result?.status === "update-available" && result.latestVersion) {
     statusLine = `Update available: Codexa ${result.latestVersion} is available. You are using ${current}.`;
   } else if (result?.status === "up-to-date") {
     statusLine = "Already up to date.";
-  } else if (result?.status === "error") {
-    statusLine = `Error checking npm update status: ${result.errorMessage || "unknown error"}`;
   } else {
-    statusLine = "Status unknown - could not read npm latest version.";
+    statusLine = "Status unknown — could not reach npm registry.";
   }
 
   return [
     `Current installed version: ${current}`,
-    `npm latest version:       ${latest}`,
-    `Status:                   ${statusLine}`,
+    `npm latest version:        ${latest}`,
+    `Status:          ${statusLine}`,
     "",
     `Run: ${CODEXA_UPDATE_COMMAND}`,
   ].join("\n");
 }
+
+export function formatLocalDevUpdateStatus(): string {
+  return [
+    "Running local-dev Codexa.",
+    "Automatic published npm update prompts are disabled for this channel.",
+    "Run /update check to explicitly check the published npm package.",
+  ].join("\n");
+}

package/src/session/types.ts

@@ -23,7 +23,8 @@ export type Screen =
   | "permissions-network-picker"
   | "permissions-add-writable-root"
   | "permissions-remove-writable-root"
-  | "import-confirmation";
+  | "import-confirmation"
+  | "update-prompt";
 
 // ─── Provider readiness ───────────────────────────────────────────────────────
 

package/src/ui/ActionRequiredBlock.tsx

@@ -22,15 +22,15 @@ export function ActionRequiredBlock({ cols, turnIndex, question }: ActionRequire
     });
 
   return (
-    <Box borderStyle="single" borderColor={theme.BORDER_ACTIVE} flexDirection="column" marginBottom={1} width="100%">
+    <Box borderStyle="single" borderColor={theme.borderFocused} flexDirection="column" marginBottom={1} width="100%">
       <Box width="100%" justifyContent="space-between" overflow="hidden" paddingX={1}>
-        <Text color={theme.TEXT} bold>{`[${turnIndex}] ACTION REQUIRED`}</Text>
-        <Text color={theme.TEXT} bold>{"⚡"}</Text>
+        <Text color={theme.text} bold>{`[${turnIndex}] ACTION REQUIRED`}</Text>
+        <Text color={theme.text} bold>{"⚡"}</Text>
       </Box>
       <Box flexDirection="column" paddingX={2} marginTop={1} marginBottom={1} width="100%">
-        <Text color={theme.TEXT} bold>{"Verification Question"}</Text>
+        <Text color={theme.text} bold>{"Verification Question"}</Text>
         {wrappedContent.map((row, index) => (
-          <Text key={`content-${index}`} color={theme.TEXT}>{row || " "}</Text>
+          <Text key={`content-${index}`} color={theme.text}>{row || " "}</Text>
         ))}
       </Box>
     </Box>

package/src/ui/ActivityBars.tsx

@@ -18,7 +18,7 @@ interface WaveBarProps {
 
 export function WaveBar({ tick, color }: WaveBarProps) {
   const theme = useTheme();
-  const activeColor = color ?? theme.ACCENT;
+  const activeColor = color ?? theme.accent;
 
   let str = "";
   for (let c = 0; c < WAVE_COLS; c++) {
@@ -48,8 +48,8 @@ interface PulseBarProps {
 
 export function PulseBar({ tick, color, dimColor }: PulseBarProps) {
   const theme = useTheme();
-  const activeColor = color ?? theme.ACCENT;
-  const inactiveColor = dimColor ?? theme.DIM;
+  const activeColor = color ?? theme.accent;
+  const inactiveColor = dimColor ?? theme.textDim;
 
   const raw = Math.floor(tick / PULSE_SPEED) % PULSE_PERIOD;
   const pos = raw < PULSE_MAX_POS ? raw : PULSE_PERIOD - raw;

package/src/ui/ActivityIndicator.tsx

@@ -32,26 +32,26 @@ export function ActivityIndicator({ uiState, externalCliStatus = "idle" }: Activ
   }, [isAnimated]);
 
   let glyph = "?";
-  let color = theme.DIM;
+  let color = theme.textDim;
   let bold = false;
 
   if (isError) {
     glyph = "�";
-    color = theme.ERROR;
+    color = theme.error;
     bold = true;
   } else if (isAction) {
     glyph = "?";
-    color = theme.WARNING;
+    color = theme.warning;
     bold = true;
   } else if (isStarting || isThinking) {
     glyph = SPINNER_FRAMES[frameIndex % SPINNER_FRAMES.length]!;
-    color = theme.TEXT;
+    color = theme.text;
   } else if (isStreaming) {
     glyph = STREAMING_FRAMES[frameIndex % STREAMING_FRAMES.length]!;
-    color = theme.SUCCESS;
+    color = theme.success;
   } else {
     glyph = "?";
-    color = theme.DIM;
+    color = theme.textDim;
   }
 
   return <Text color={color} bold={bold}>{glyph}</Text>;

package/src/ui/AgentBlock.tsx

@@ -49,7 +49,7 @@ const StreamingCursor = memo(function StreamingCursor() {
   const theme = useTheme();
   return (
     <Box width="100%" paddingLeft={2}>
-      <Text color={theme.ACCENT}>{"▌"}</Text>
+      <Text color={theme.accent}>{"▌"}</Text>
     </Box>
   );
 });
@@ -93,14 +93,14 @@ export function AgentBlock({
     : runStatus;
   const heading = run?.runtime.model ? run.runtime.model.toUpperCase().replace(/-/g, " ") : "Codex";
 
-  const borderColor = dim ? theme.BORDER_SUBTLE : (runPhase === "streaming" ? theme.BORDER_ACTIVE : theme.BORDER_SUBTLE);
+  const borderColor = dim ? theme.border : (runPhase === "streaming" ? theme.borderFocused : theme.border);
 
   return (
     <DashCard cols={cols} title={heading} rightBadge={rightBadge} borderColor={borderColor}>
       {!streaming && failureMessage && (
         <Box flexDirection="column" width="100%">
           {wrapPlainText(failureMessage, contentWidth).map((row, index) => (
-            <Text key={index} color={theme.ERROR}>{index === 0 ? `✕ ${row || " "}` : row || " "}</Text>
+            <Text key={index} color={theme.error}>{index === 0 ? `✕ ${row || " "}` : row || " "}</Text>
           ))}
         </Box>
       )}
@@ -116,12 +116,12 @@ export function AgentBlock({
       {!streaming && run && run.status !== "running" && (
         <Box flexDirection="column" width="100%">
           {run.status === "canceled" && cancelMessage ? (
-            <Text color={theme.WARNING}>{cancelMessage}</Text>
+            <Text color={theme.warning}>{cancelMessage}</Text>
           ) : run.status === "completed" && pipelineState.length === 0 ? (
-            <Text color={theme.DIM}>{"(no output)"}</Text>
+            <Text color={theme.textDim}>{"(no output)"}</Text>
           ) : null}
           {run.truncatedOutput && (
-            <Text color={theme.DIM}>{RUN_OUTPUT_TRUNCATION_NOTICE}</Text>
+            <Text color={theme.textDim}>{RUN_OUTPUT_TRUNCATION_NOTICE}</Text>
           )}
         </Box>
       )}

package/src/ui/AnimatedStatusText.tsx

@@ -62,7 +62,7 @@ export function AnimatedStatusText({ baseText, isActive, isError = false, animat
   const suffix = isActive ? animationFrame ?? localFrame : "";
 
   return (
-    <Text color={isError ? theme.ERROR : theme.INFO} wrap="truncate">
+    <Text color={isError ? theme.error : theme.info} wrap="truncate">
       {renderedText}{suffix}
     </Text>
   );

package/src/ui/AppShell.tsx

@@ -1,7 +1,6 @@
 import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useStdin } from "ink";
 import { useTheme } from "./theme.js";
-import type { UpdateCheckResult } from "../core/updateCheck.js";
 import type { RuntimeSummary } from "../config/runtimeConfig.js";
 import type { CodexAuthState } from "../core/auth/codexAuth.js";
 import { HEADER_CONFIG_DEFAULTS, type HeaderConfig } from "../config/settings.js";
@@ -25,7 +24,7 @@ import {
 } from "./Timeline.js";
 import { buildNativeTranscriptParts, type NativeTranscriptRowItem, type TimelineRow } from "./timelineMeasure.js";
 import type { TerminalSelectionProfile } from "../core/terminal/terminalSelection.js";
-import { MemoizedTopHeader, measureTopHeaderRows } from "./TopHeader.js";
+import { MemoizedTopHeader, measureTopHeaderRows, type UpdateAvailableInfo } from "./TopHeader.js";
 
 const COMPACT_HEADER_TO_COMPOSER_GAP_ROWS = 1;
 const MEDIUM_HEADER_TO_COMPOSER_GAP_ROWS = 1;
@@ -59,7 +58,7 @@ export interface AppShellProps {
   selectionProfile?: TerminalSelectionProfile;
   clearCount?: number;
   headerConfig?: HeaderConfig;
-  updateCheckResult?: UpdateCheckResult | null;
+  updateAvailable?: UpdateAvailableInfo | null;
 }
 
 // ─── Helpers & subcomponents ─────────────────────────────────────────────────
@@ -164,7 +163,7 @@ function AppShellInner({
   selectionProfile,
   clearCount = 0,
   headerConfig = HEADER_CONFIG_DEFAULTS,
-  updateCheckResult = null,
+  updateAvailable = null,
 }: AppShellProps) {
   const theme = useTheme();
   renderDebug.useRenderDebug("AppShell", {
@@ -193,7 +192,7 @@ function AppShellInner({
 
   const shellWidth = getShellWidth(layout.cols);
   const shellHeight = getShellHeight(layout.rows);
-  const headerRows = measureTopHeaderRows(layout, headerConfig);
+  const headerRows = measureTopHeaderRows(layout, headerConfig, !!updateAvailable);
   const headerToContentGapRows = calculateHeaderToContentGapRows(layout);
   const showComposer = screen === "main";
   const showMainPanel = screen === "main" && mainPanel !== undefined && mainPanel !== null;
@@ -505,17 +504,6 @@ function AppShellInner({
     ? React.cloneElement(composer as React.ReactElement<{ selectionProfile?: TerminalSelectionProfile }>, { selectionProfile })
     : composer;
 
-  const updateNotice = updateCheckResult?.status === "update-available" ? (
-    <Box paddingX={1} flexDirection="column">
-      <Text color={theme.WARNING}>
-        {`Update available: Codexa ${updateCheckResult.latestVersion ?? "unknown"} is available. You are using ${updateCheckResult.currentVersion}.`}
-      </Text>
-      <Text color={theme.WARNING}>
-        {"Run: npm install -g @golba98/codexa@latest"}
-      </Text>
-    </Box>
-  ) : null;
-
   if (showMainPanelFullOutput) {
     return (
       <Box flexDirection="column" width="100%">
@@ -526,10 +514,9 @@ function AppShellInner({
             layout={layout}
             runtimeSummary={runtimeSummary}
             headerConfig={headerConfig}
+            updateAvailable={updateAvailable}
           />
 
-          {updateNotice}
-
           {headerToContentGapRows > 0 && (
             <Box height={headerToContentGapRows} />
           )}
@@ -558,10 +545,9 @@ function AppShellInner({
           layout={layout}
           runtimeSummary={runtimeSummary}
           headerConfig={headerConfig}
+          updateAvailable={updateAvailable}
         />
 
-        {updateNotice}
-
         {headerToContentGapRows > 0 && (
           <Box height={headerToContentGapRows} />
         )}
@@ -614,10 +600,9 @@ function AppShellInner({
           layout={layout}
           runtimeSummary={runtimeSummary}
           headerConfig={headerConfig}
+          updateAvailable={updateAvailable}
         />
 
-        {updateNotice}
-
         {headerToContentGapRows > 0 && (
           <Box height={headerToContentGapRows} />
         )}
@@ -714,8 +699,8 @@ export const AppShell = memo(AppShellInner, (prev, next) => {
     prev.verboseMode     === next.verboseMode     &&
     prev.mouseCapture    === next.mouseCapture    &&
     prev.onMouseActivity === next.onMouseActivity &&
-    prev.clearCount         === next.clearCount         &&
-    prev.updateCheckResult  === next.updateCheckResult  &&
+    prev.clearCount      === next.clearCount      &&
+    prev.updateAvailable === next.updateAvailable &&
     panelPropsEqual
   );
 });

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.borderFocused}
         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}>Enter copy and continue  Esc cancel</Text>
         </Box>
       </Box>
     </Box>