@golba98/codexa 1.0.1 → 1.0.3

package/src/core/updateCheck.ts

@@ -0,0 +1,188 @@
+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";
+}
+
+const FETCH_TIMEOUT_MS = 5000;
+
+/** 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;
+}
+
+const SEMVER_RE = /^\d+\.\d+\.\d+(-[\w.]+)?$/;
+
+/** Returns true for valid semver strings with or without a leading "v". */
+export function isValidSemver(v: string): boolean {
+  return SEMVER_RE.test(normalizeVersion(v));
+}
+
+export function shouldRunStartupUpdateCheck(
+  env: NodeJS.ProcessEnv = process.env,
+  enabled = true,
+): boolean {
+  return enabled && !isLocalDevChannel(env);
+}
+
+// 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 };
+  };
+
+  const pa = parseParts(a);
+  const pb = parseParts(b);
+  const len = Math.max(pa.numeric.length, pb.numeric.length);
+
+  for (let i = 0; i < len; i++) {
+    const diff = (pa.numeric[i] ?? 0) - (pb.numeric[i] ?? 0);
+    if (diff !== 0) return diff;
+  }
+
+  // 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 0;
+}
+
+export function isNewerVersion(candidate: string, current: string): boolean {
+  return compareSemver(candidate, current) > 0;
+}
+
+export interface UpdateCheckOverrides {
+  currentVersion?: string;
+  fetchNpmMetadataFn?: (url: string) => Promise<NpmRegistryMetadata>;
+}
+
+async function defaultFetchNpmMetadata(url: string): Promise<NpmRegistryMetadata> {
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
+  try {
+    const res = await fetch(url, {
+      signal: controller.signal,
+      headers: { "User-Agent": `${CODEXA_NPM_PACKAGE}-update-checker/1.0` },
+    });
+    if (!res.ok) throw new Error(`npm registry returned HTTP ${res.status}`);
+    return await res.json() as NpmRegistryMetadata;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+export async function checkForUpdates(
+  opts?: { enabled?: boolean },
+  overrides?: UpdateCheckOverrides,
+): Promise<UpdateCheckResult> {
+  const currentVersion = normalizeVersion(overrides?.currentVersion ?? APP_VERSION);
+
+  if (opts?.enabled === false) {
+    return { status: "unknown", currentVersion, latestVersion: null, checkedAt: Date.now(), source: "npm" };
+  }
+
+  try {
+    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: Date.now(),
+      source: "npm",
+    };
+  }
+}
+
+export function formatUpdateInstructions(result: UpdateCheckResult | null): string {
+  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 {
+    statusLine = "Status unknown — could not reach npm registry.";
+  }
+
+  return [
+    `Current installed version: ${current}`,
+    `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/headless/execArgs.ts

@@ -60,6 +60,7 @@ function buildLaunchArgs(params: {
     configOverrides: params.configOverrides,
     passthroughArgs: params.passthroughArgs,
     modelOverride: params.modelOverride,
+    noClear: false,
   };
 }
 

package/src/index.tsx

@@ -19,6 +19,7 @@ import {
   traceTerminalClear,
   writeTerminalControl,
 } from "./core/terminal/terminalControl.js";
+import { performStartupClear } from "./core/terminal/startupClear.js";
 
 type RenderHandle = Pick<Instance, "clear" | "cleanup" | "waitUntilExit">;
 const KITTY_KEYBOARD_OPTIONS: RenderOptions["kittyKeyboard"] = {
@@ -174,15 +175,18 @@ export function startApp({
     durationMs: 3500,
   });
 
-  // Clear the screen and move cursor to home before rendering so no stale
-  // content from a previous process (e.g. bun --watch restart) ghosts above
-  // the new frame.  We stay in the normal screen buffer (no \x1b[?1049h) to
-  // preserve terminal scrollback and allow mouse text selection.
-  // NOTE: Mouse reporting (\x1b[?1000h / \x1b[?1006h) is NOT enabled here.
-  // It is managed exclusively by the React app (app.tsx) and defaults to OFF
-  // so native terminal drag-selection and copy work without any special steps.
-  traceTerminalClear("src/index.tsx:startup", { mode: "hard" });
-  writeStdout(TERMINAL_SEQUENCES.hardRepaint, "src/index.tsx:startup");
+  // Clear the screen (viewport + scrollback) and move cursor home before Ink
+  // renders the first frame.  This removes any previous terminal content so
+  // the app opens into a clean screen.  We stay in the normal screen buffer
+  // (no \x1b[?1049h) to preserve mouse text selection after exit.
+  // Skipped when --no-clear or CODEXA_NO_CLEAR=1 is set.
+  // NOTE: Mouse reporting is NOT enabled here — managed solely by app.tsx.
+  traceTerminalClear("src/index.tsx:startup", { mode: "transcript" });
+  performStartupClear({
+    write: (c) => writeStdout(c, "src/index.tsx:startup"),
+    noClear: launchArgs.noClear,
+    env,
+  });
   const startupWorkspaceRoot = resolveWorkspaceRoot();
   const startupSettings = loadSettings();
   const startupTitle =

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,5 +1,6 @@
 import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useStdin } from "ink";
+import { useTheme } from "./theme.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";
@@ -23,11 +24,11 @@ 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 = 2;
-const MEDIUM_HEADER_TO_COMPOSER_GAP_ROWS = 4;
-const TALL_HEADER_TO_COMPOSER_GAP_ROWS = 6;
+const COMPACT_HEADER_TO_COMPOSER_GAP_ROWS = 1;
+const MEDIUM_HEADER_TO_COMPOSER_GAP_ROWS = 1;
+const TALL_HEADER_TO_COMPOSER_GAP_ROWS = 1;
 
 // ─── Types & constants ────────────────────────────────────────────────────────
 
@@ -57,6 +58,7 @@ export interface AppShellProps {
   selectionProfile?: TerminalSelectionProfile;
   clearCount?: number;
   headerConfig?: HeaderConfig;
+  updateAvailable?: UpdateAvailableInfo | null;
 }
 
 // ─── Helpers & subcomponents ─────────────────────────────────────────────────
@@ -161,7 +163,9 @@ function AppShellInner({
   selectionProfile,
   clearCount = 0,
   headerConfig = HEADER_CONFIG_DEFAULTS,
+  updateAvailable = null,
 }: AppShellProps) {
+  const theme = useTheme();
   renderDebug.useRenderDebug("AppShell", {
     cols: layout.cols,
     rows: layout.rows,
@@ -188,7 +192,7 @@ function AppShellInner({
 
   const shellWidth = getShellWidth(layout.cols);
   const shellHeight = getShellHeight(layout.rows);
-  const headerRows = measureTopHeaderRows(layout);
+  const headerRows = measureTopHeaderRows(layout, headerConfig, !!updateAvailable);
   const headerToContentGapRows = calculateHeaderToContentGapRows(layout);
   const showComposer = screen === "main";
   const showMainPanel = screen === "main" && mainPanel !== undefined && mainPanel !== null;
@@ -510,6 +514,7 @@ function AppShellInner({
             layout={layout}
             runtimeSummary={runtimeSummary}
             headerConfig={headerConfig}
+            updateAvailable={updateAvailable}
           />
 
           {headerToContentGapRows > 0 && (
@@ -540,6 +545,7 @@ function AppShellInner({
           layout={layout}
           runtimeSummary={runtimeSummary}
           headerConfig={headerConfig}
+          updateAvailable={updateAvailable}
         />
 
         {headerToContentGapRows > 0 && (
@@ -594,6 +600,7 @@ function AppShellInner({
           layout={layout}
           runtimeSummary={runtimeSummary}
           headerConfig={headerConfig}
+          updateAvailable={updateAvailable}
         />
 
         {headerToContentGapRows > 0 && (
@@ -693,6 +700,7 @@ export const AppShell = memo(AppShellInner, (prev, next) => {
     prev.mouseCapture    === next.mouseCapture    &&
     prev.onMouseActivity === next.onMouseActivity &&
     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>

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>