@golba98/codexa 1.0.2 → 1.0.3

package/src/ui/TurnGroup.tsx

@@ -69,14 +69,14 @@ function UserInputCard({
   dim: boolean;
 }) {
   const theme = useTheme();
-  const borderColor = theme.BORDER_SUBTLE;
+  const borderColor = theme.border;
   const contentWidth = Math.max(1, cols - 7);
   const lines = wrapPlainText(sanitizeTerminalOutput(prompt), contentWidth);
 
   return (
     <DashCard cols={cols} title="PROMPT" borderColor={borderColor}>
       {lines.map((line, i) => (
-        <Text key={i} color={dim ? theme.DIM : theme.TEXT}>
+        <Text key={i} color={dim ? theme.textDim : theme.text}>
           {i === 0 ? "❯ " : "  "}{line}
         </Text>
       ))}
@@ -122,38 +122,38 @@ function ImpactSummary({
 
   const opColor = (op: string) => {
     switch (op) {
-      case "created": return theme.SUCCESS;
-      case "deleted": return theme.ERROR;
-      default: return theme.INFO;
+      case "created": return theme.success;
+      case "deleted": return theme.error;
+      default: return theme.info;
     }
   };
 
   return (
     <Box flexDirection="column" width="100%" paddingX={1} marginTop={0}>
       {hasDeletes && (
-        <Text color={theme.WARNING}>{"⚠ Destructive changes detected:"}</Text>
+        <Text color={theme.warning}>{"⚠ Destructive changes detected:"}</Text>
       )}
       {hasFiles && (
         <>
-          <Text color={theme.DIM}>{"  Changes:"}</Text>
+          <Text color={theme.textDim}>{"  Changes:"}</Text>
           {recentFiles.map((file: RunFileActivity, i: number) => {
             const diffInfo = file.addedLines != null || file.removedLines != null
               ? ` (+${file.addedLines ?? 0} -${file.removedLines ?? 0})`
               : "";
             return (
               <Text key={i}>
-                <Text color={theme.DIM}>{"    "}</Text>
+                <Text color={theme.textDim}>{"    "}</Text>
                 <Text color={opColor(file.operation)}>{opLabel(file.operation)}</Text>
-                <Text color={theme.TEXT}>{" "}{file.path}</Text>
-                <Text color={theme.DIM}>{diffInfo}</Text>
+                <Text color={theme.text}>{" "}{file.path}</Text>
+                <Text color={theme.textDim}>{diffInfo}</Text>
               </Text>
             );
           })}
         </>
       )}
-      <Text color={theme.DIM}>
+      <Text color={theme.textDim}>
         {"  "}
-        <Text color={theme.SUCCESS}>{"✔ "}</Text>
+        <Text color={theme.success}>{"✔ "}</Text>
         {run.touchedFileCount > 0 && `${run.touchedFileCount} file${run.touchedFileCount === 1 ? "" : "s"}`}
         {hasTools && `${hasFiles ? " • " : ""}${run.toolActivities.length} action${run.toolActivities.length === 1 ? "" : "s"}`}
         {run.durationMs != null && ` • ${formatDuration(run.durationMs)}`}
@@ -172,11 +172,11 @@ function FileScanCard({ run, cols }: { run: RunEvent; cols: number }) {
   return (
     <DashCard cols={cols} title="Scanning workspace ..." rightBadge={badge}>
       {hiddenCount > 0 && (
-        <Text color={theme.DIM}>{`... ${hiddenCount} more`}</Text>
+        <Text color={theme.textDim}>{`... ${hiddenCount} more`}</Text>
       )}
       {visible.map((file, i) => (
-        <Text key={i} color={theme.SUCCESS}>
-          {"● "}<Text color={theme.TEXT}>{file.path}</Text>
+        <Text key={i} color={theme.success}>
+          {"● "}<Text color={theme.text}>{file.path}</Text>
         </Text>
       ))}
     </DashCard>
@@ -307,9 +307,9 @@ function PlanPanel({
       cols={cols}
       title="Plan"
       rightBadge={approved ? "approved" : undefined}
-      borderColor={theme.ACCENT}
-      titleColor={theme.TEXT}
-      badgeColor={theme.SUCCESS}
+      borderColor={theme.accent}
+      titleColor={theme.text}
+      badgeColor={theme.success}
     >
       <MemoizedRenderMessage segments={formatted} width={contentWidth} brightHeadings />
     </DashCard>
@@ -337,12 +337,12 @@ function ActionEventCard({
   const actionLabel = getFriendlyActionLabel(actionNormalized);
 
   const statusIcon = tool.status === "failed" ? "✕" : tool.status === "completed" ? "✔" : "▸";
-  const statusColor = tool.status === "failed" ? theme.ERROR : tool.status === "completed" ? theme.SUCCESS : theme.INFO;
-  const borderColor = dim ? theme.BORDER_SUBTLE : tool.status === "running" ? theme.BORDER_ACTIVE : theme.BORDER_SUBTLE;
+  const statusColor = tool.status === "failed" ? theme.error : tool.status === "completed" ? theme.success : theme.info;
+  const borderColor = dim ? theme.border : tool.status === "running" ? theme.borderFocused : theme.border;
   const detailText = isLiveCursorTarget && tool.status === "running"
     ? "▌"
     : tool.summary?.trim() ? tool.summary : " ";
-  const detailColor = isLiveCursorTarget && tool.status === "running" ? theme.ACCENT : theme.MUTED;
+  const detailColor = isLiveCursorTarget && tool.status === "running" ? theme.accent : theme.textMuted;
   const duration = tool.completedAt != null
     ? formatDuration(tool.completedAt - tool.startedAt)
     : null;
@@ -356,10 +356,10 @@ function ActionEventCard({
         <>
           <Box>
             <Text color={statusColor}>{statusIcon + " "}</Text>
-            <Text color={dim ? theme.DIM : theme.TEXT}>{actionLabel}</Text>
+            <Text color={dim ? theme.textDim : theme.text}>{actionLabel}</Text>
           </Box>
           {commandLines.map((line, i) => (
-            <Text key={i} color={theme.MUTED}>{"  "}{line || " "}</Text>
+            <Text key={i} color={theme.textMuted}>{"  "}{line || " "}</Text>
           ))}
         </>
       ) : (
@@ -367,10 +367,10 @@ function ActionEventCard({
           {commandLines.map((line, i) => (
             <Box key={i}>
               <Text color={i === 0 ? statusColor : undefined}>{i === 0 ? statusIcon + " " : "  "}</Text>
-              <Text color={dim ? theme.DIM : theme.TEXT}>{line || " "}</Text>
+              <Text color={dim ? theme.textDim : theme.text}>{line || " "}</Text>
             </Box>
           ))}
-          <Text color={theme.MUTED}>{"   "}</Text>
+          <Text color={theme.textMuted}>{"   "}</Text>
         </>
       )}
       <Text color={detailColor}>{"  "}{detailText}</Text>
@@ -405,14 +405,14 @@ function CodexThinkingBlock({
 
   return (
     <Box flexDirection="column" width="100%" paddingLeft={transcriptContentIndent} paddingRight={1}>
-      <Text color={theme.MUTED} bold>Codexa</Text>
+      <Text color={theme.textMuted} bold>Codexa</Text>
       {formatProgressBlockBodyLines(block.text, contentWidth)
         .slice(0, verboseMode ? undefined : COMPACT_PROCESSING_BODY_LINE_CAP)
         .map((line, i) => (
-          <Text key={i} color={theme.DIM}>{line || " "}</Text>
+          <Text key={i} color={theme.textDim}>{line || " "}</Text>
         ))}
       {isLiveCursorTarget && block.status === "active" && (
-        <Text color={theme.ACCENT}>▌</Text>
+        <Text color={theme.accent}>▌</Text>
       )}
     </Box>
   );
@@ -453,11 +453,11 @@ function CodexResponseBlock({
 
   return (
     <Box flexDirection="column" width="100%" paddingLeft={transcriptContentIndent} paddingRight={1}>
-      <Text color={theme.MUTED} bold>Codexa</Text>
+      <Text color={theme.textMuted} bold>Codexa</Text>
       {run.status === "failed" && !streaming && isLast && (
         <Box flexDirection="column">
           {wrapPlainText(sanitizeTerminalOutput(run.errorMessage ?? run.summary), contentWidth).map((row, i) => (
-            <Text key={i} color={theme.ERROR}>{i === 0 ? `✕ ${row}` : `  ${row}`}</Text>
+            <Text key={i} color={theme.error}>{i === 0 ? `✕ ${row}` : `  ${row}`}</Text>
           ))}
         </Box>
       )}
@@ -466,7 +466,7 @@ function CodexResponseBlock({
         width={contentWidth}
       />
       {isLiveCursorTarget && segmentStreaming && (
-        <Text color={theme.ACCENT}>▌</Text>
+        <Text color={theme.accent}>▌</Text>
       )}
     </Box>
   );

package/src/ui/UpdateAvailableCard.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { CODEXA_UPDATE_COMMAND } from "../core/updateCheck.js";
+import { clampVisualText } from "./layout.js";
+import { useTheme } from "./theme.js";
+
+export const UPDATE_CARD_CONTENT_ROWS = 4; // title + available + using + command
+export const UPDATE_CARD_ROWS = UPDATE_CARD_CONTENT_ROWS + 2; // +2 for top/bottom border rows
+
+export interface UpdateAvailableCardProps {
+  latestVersion: string;
+  currentVersion: string;
+  /** Total box width including borders. Long lines are truncated to fit. */
+  width?: number;
+}
+
+export function UpdateAvailableCard({ latestVersion, currentVersion, width }: UpdateAvailableCardProps) {
+  const theme = useTheme();
+  const command = `Run: ${CODEXA_UPDATE_COMMAND}`;
+  // Inner content width = boxWidth - 2 (left/right border cols)
+  const innerWidth = width !== undefined ? Math.max(8, width - 2) : undefined;
+
+  function clamp(text: string): string {
+    return innerWidth !== undefined ? clampVisualText(text, innerWidth) : text;
+  }
+
+  return (
+    <Box
+      borderStyle="round"
+      borderColor={theme.accent}
+      flexDirection="column"
+      width={width}
+      flexShrink={0}
+    >
+      <Text color={theme.text} bold>{clamp("Update available")}</Text>
+      <Text color={theme.textMuted}>{clamp(`Codexa ${latestVersion} is available`)}</Text>
+      <Text color={theme.textMuted}>{clamp(`You are using ${currentVersion}`)}</Text>
+      <Text color={theme.textDim}>{clamp(command)}</Text>
+    </Box>
+  );
+}

package/src/ui/UpdatePromptPanel.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import { spawn } from "child_process";
+import { useTheme } from "./theme.js";
+import { CODEXA_NPM_PACKAGE, CODEXA_UPDATE_COMMAND } from "../core/updateCheck.js";
+
+type Phase = "menu" | "running" | "done" | "error";
+
+const MENU_ITEMS = [
+  { label: "Update now" },
+  { label: "Skip" },
+  { label: "Skip until next version" },
+] as const;
+
+interface UpdatePromptPanelProps {
+  focusId: string;
+  currentVersion: string;
+  latestVersion: string;
+  onSkip: () => void;
+  onSkipUntilNextVersion: (version: string) => void;
+}
+
+export function UpdatePromptPanel({
+  focusId,
+  currentVersion,
+  latestVersion,
+  onSkip,
+  onSkipUntilNextVersion,
+}: UpdatePromptPanelProps) {
+  const theme = useTheme();
+  const { isFocused } = useFocus({ id: focusId, autoFocus: true });
+
+  const [phase, setPhase] = useState<Phase>("menu");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [outputLines, setOutputLines] = useState<string[]>([]);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const spawnStartedRef = useRef(false);
+
+  useInput((input, key) => {
+    if (phase === "menu") {
+      if (key.upArrow || input === "k") {
+        setSelectedIndex((i) => Math.max(0, i - 1));
+        return;
+      }
+      if (key.downArrow || input === "j") {
+        setSelectedIndex((i) => Math.min(MENU_ITEMS.length - 1, i + 1));
+        return;
+      }
+      if (key.return) {
+        if (selectedIndex === 0) {
+          setPhase("running");
+        } else if (selectedIndex === 1) {
+          onSkip();
+        } else {
+          onSkipUntilNextVersion(latestVersion);
+        }
+        return;
+      }
+      if (key.escape) {
+        onSkip();
+        return;
+      }
+    } else if (phase === "done" || phase === "error") {
+      if (key.return || key.escape) {
+        onSkip();
+      }
+    }
+  }, { isActive: isFocused });
+
+  useEffect(() => {
+    if (phase !== "running") return;
+    if (spawnStartedRef.current) return;
+    spawnStartedRef.current = true;
+
+    const child = spawn("npm", ["install", "-g", `${CODEXA_NPM_PACKAGE}@latest`], {
+      shell: false,
+      stdio: ["ignore", "pipe", "pipe"],
+    });
+
+    const appendLines = (buf: Buffer) => {
+      const lines = buf.toString("utf8").split(/\r?\n/).filter(Boolean);
+      if (lines.length > 0) {
+        setOutputLines((prev) => [...prev, ...lines]);
+      }
+    };
+
+    child.stdout?.on("data", appendLines);
+    child.stderr?.on("data", appendLines);
+
+    child.once("error", (err: Error) => {
+      setErrorMessage(err.message);
+      setPhase("error");
+    });
+
+    child.once("close", (code: number | null) => {
+      if (code === 0) {
+        setPhase("done");
+      } else {
+        setErrorMessage(`npm exited with code ${code ?? "unknown"}.`);
+        setPhase("error");
+      }
+    });
+
+    return () => {
+      try { child.kill(); } catch { /* ignore */ }
+    };
+  }, [phase]);
+
+  const hintText = phase === "menu"
+    ? "↑↓/jk select  Enter confirm  Esc skip"
+    : "Press Enter to close";
+
+  return (
+    <Box flexDirection="column" width="100%" marginTop={1}>
+      <Box
+        borderStyle="round"
+        borderColor={theme.border}
+        paddingX={2}
+        paddingY={1}
+        width="100%"
+        flexDirection="column"
+      >
+        <Box>
+          <Text color={theme.accent} bold>Update available  </Text>
+          <Text color={theme.textMuted}>{hintText}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={theme.text}>{`✨ ${currentVersion} -> ${latestVersion}`}</Text>
+        </Box>
+        <Box>
+          <Text color={theme.textMuted}>{`Package: ${CODEXA_NPM_PACKAGE}`}</Text>
+        </Box>
+        <Box>
+          <Text color={theme.textMuted}>{`Run: ${CODEXA_UPDATE_COMMAND}`}</Text>
+        </Box>
+      </Box>
+
+      <Box
+        borderStyle="round"
+        borderColor={theme.borderFocused}
+        paddingX={2}
+        paddingY={1}
+        marginTop={1}
+        width="100%"
+        flexDirection="column"
+      >
+        {phase === "menu" && (
+          <>
+            {MENU_ITEMS.map((item, index) => (
+              <Box key={item.label}>
+                <Text color={index === selectedIndex ? theme.accent : theme.textMuted}>
+                  {index === selectedIndex ? "› " : "  "}
+                </Text>
+                <Text
+                  color={index === selectedIndex ? theme.text : theme.textMuted}
+                  bold={index === selectedIndex}
+                >
+                  {`${index + 1}. ${item.label}`}
+                </Text>
+              </Box>
+            ))}
+            <Box marginTop={1}>
+              <Text color={theme.textDim}>Press enter to continue</Text>
+            </Box>
+          </>
+        )}
+
+        {phase === "running" && (
+          <>
+            <Text color={theme.text}>{`Installing Codexa ${latestVersion}...`}</Text>
+            {outputLines.map((line, i) => (
+              <Text key={i} color={theme.textMuted}>{line}</Text>
+            ))}
+          </>
+        )}
+
+        {phase === "done" && (
+          <>
+            <Text color={theme.success}>{"Codexa was updated successfully."}</Text>
+            <Text color={theme.textMuted}>{"Restart Codexa to use the new version."}</Text>
+            <Box marginTop={1}>
+              <Text color={theme.textDim}>Press Enter to close</Text>
+            </Box>
+          </>
+        )}
+
+        {phase === "error" && (
+          <>
+            <Text color={theme.error}>{"Update failed."}</Text>
+            {errorMessage != null && <Text color={theme.textMuted}>{errorMessage}</Text>}
+            {outputLines.slice(-5).map((line, i) => (
+              <Text key={i} color={theme.textDim}>{line}</Text>
+            ))}
+            <Box marginTop={1}>
+              <Text color={theme.textDim}>Press Enter to close</Text>
+            </Box>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/ui/focus.ts

@@ -18,6 +18,7 @@ export const FOCUS_IDS = {
   permissionsAddWritableRoot: "permissions-add-writable-root",
   permissionsRemoveWritableRoot: "permissions-remove-writable-root",
   importConfirmationPanel: "import-confirmation",
+  updatePrompt: "update-prompt",
 } as const;
 
 export type FocusTargetId = (typeof FOCUS_IDS)[keyof typeof FOCUS_IDS];
@@ -54,6 +55,8 @@ export function getFocusTargetForScreen(screen: Screen): FocusTargetId {
       return FOCUS_IDS.permissionsRemoveWritableRoot;
     case "import-confirmation":
       return FOCUS_IDS.importConfirmationPanel;
+    case "update-prompt":
+      return FOCUS_IDS.updatePrompt;
     case "main":
     default:
       return FOCUS_IDS.composer;

package/src/ui/layout.ts

@@ -20,7 +20,7 @@ export const MIN_VIEWPORT_ROWS = 10;
 export const RESTORE_SETTLE_MS = 100;
 export const STARTUP_TINY_MIN_COLS = 40;
 export const STARTUP_TINY_MIN_ROWS = 14;
-export const STARTUP_FULL_MIN_COLS = BREAKPOINT_FULL;
+export const STARTUP_FULL_MIN_COLS = 100; // matches LOGO_LARGE_MIN_COLS in logoVariants.ts
 export const STARTUP_FULL_MIN_BODY_ROWS = 4;
 export const STARTUP_FULL_SAFE_PADDING_ROWS = 1;
 export const STARTUP_COMPACT_INTRO_ROWS = 4;

package/src/ui/logoVariants.ts

@@ -0,0 +1,107 @@
+import { getTextWidth } from "./textLayout.js";
+
+// ─── Logo constants ───────────────────────────────────────────────────────────
+// Each variant is an array of exact terminal rows.
+//
+// IMPORTANT: Never apply `bold` when rendering these rows. Bold rendering of
+// Unicode full-block (█) and box-drawing (╔═╗╝) characters causes per-glyph
+// width/stroke differences in most terminal fonts (Ptyxis, GNOME Terminal,
+// VS Code), producing visible gaps between characters that should be flush.
+// The companion `wrap="truncate"` rule keeps each row on exactly one terminal
+// line regardless of the surrounding Ink flex layout.
+
+// Canonical Codexa brand wordmark — the ██ block art is the authoritative logo.
+// Always shown on any normal-width terminal (≥ LOGO_LARGE_MIN_COLS cols).
+export const CODEXA_WORDMARK = [
+  " ██████╗ ██████╗ ██████╗ ███████╗██╗  ██╗ █████╗ ",
+  "██╔════╝██╔═══██╗██╔══██╗██╔════╝╚██╗██╔╝██╔══██╗",
+  "██║     ██║   ██║██║  ██║█████╗   ╚███╔╝ ███████║",
+  "██║     ██║   ██║██║  ██║██╔══╝   ██╔██╗ ██╔══██║",
+  "╚██████╗╚██████╔╝██████╔╝███████╗██╔╝ ██╗██║  ██║",
+  " ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝╚═╝  ╚═╝",
+].join("\n");
+
+/** 6-row ANSI Shadow block-char logo. Requires cols ≥ LOGO_LARGE_MIN_COLS. */
+export const LOGO_LARGE: readonly string[] = CODEXA_WORDMARK.split("\n");
+
+/** 4-row pure-ASCII art logo. Requires cols ≥ LOGO_MEDIUM_MIN_COLS. */
+export const LOGO_MEDIUM: readonly string[] = [
+  "  ____   ___  ____  _____ _  __    _    ",
+  " / ___| / _ \\|  _ \\| ____| |/ /   / \\   ",
+  "| |    | | | | | | |  _| | ' /   / _ \\  ",
+  "|_|     \\___/|_| |_|_____|_|\\_\\ /_/ \\_\\ ",
+];
+
+/** 1-row compact logo. Requires cols ≥ LOGO_COMPACT_MIN_COLS. */
+export const LOGO_COMPACT: readonly string[] = [
+  "✦ CODEXA",
+];
+
+// ─── Breakpoints ──────────────────────────────────────────────────────────────
+
+// Aligned with MEDIUM_HEADER_MIN_COLUMNS so any side-by-side-capable terminal
+// shows the canonical block wordmark instead of the thin ASCII fallback.
+export const LOGO_LARGE_MIN_COLS = 72;
+export const LOGO_MEDIUM_MIN_COLS = 72;
+export const LOGO_COMPACT_MIN_COLS = 48;
+
+// Minimum terminal rows each variant needs to render without crowding out the
+// metadata + composer. A wide-but-short terminal (e.g. VS Code's bottom panel)
+// must step DOWN to a smaller logo instead of dropping straight to text-only.
+export const LOGO_LARGE_MIN_ROWS = 24;
+export const LOGO_MEDIUM_MIN_ROWS = 16;
+export const LOGO_COMPACT_MIN_ROWS = 12;
+
+// LOGO_MEDIUM is kept as an exported constant but intentionally omitted from
+// LOGO_VARIANTS. At 72+ cols, LOGO_LARGE_MIN_COLS = LOGO_MEDIUM_MIN_COLS = 72,
+// so LOGO_LARGE always wins. Below 72 cols the viewport is too narrow for the
+// thin ASCII art to add value over the compact single-line fallback.
+const LOGO_VARIANTS: readonly { logo: readonly string[]; minCols: number; minRows: number }[] = [
+  { logo: LOGO_LARGE, minCols: LOGO_LARGE_MIN_COLS, minRows: LOGO_LARGE_MIN_ROWS },
+  { logo: LOGO_COMPACT, minCols: LOGO_COMPACT_MIN_COLS, minRows: LOGO_COMPACT_MIN_ROWS },
+];
+
+// ─── Selection ────────────────────────────────────────────────────────────────
+
+/**
+ * Returns the best logo variant for the given terminal column count.
+ *
+ * Env overrides:
+ *   CODEXA_NO_ASCII_LOGO=1  → always text-only (empty array)
+ *   CODEXA_COMPACT_LOGO=1   → always compact single-line logo
+ */
+export function selectLogoVariant(cols: number): readonly string[] {
+  if (process.env["CODEXA_NO_ASCII_LOGO"] === "1") return [];
+  if (process.env["CODEXA_COMPACT_LOGO"] === "1") return LOGO_COMPACT;
+  if (cols >= LOGO_LARGE_MIN_COLS) return LOGO_LARGE;
+  if (cols >= LOGO_COMPACT_MIN_COLS) return LOGO_COMPACT;
+  return [];
+}
+
+/**
+ * Returns the largest logo variant that fits BOTH the available columns and
+ * rows. Unlike {@link selectLogoVariant} (columns-only), this degrades a
+ * too-tall logo to a shorter one before falling back to text-only — so a
+ * wide-but-short terminal keeps a logo instead of collapsing to a flat line.
+ * Returns an empty array only when even the 1-row compact logo cannot fit.
+ *
+ * Honours the same env overrides as {@link selectLogoVariant}.
+ */
+export function selectLogoVariantForViewport(cols: number, rows: number): readonly string[] {
+  if (process.env["CODEXA_NO_ASCII_LOGO"] === "1") return [];
+  if (process.env["CODEXA_COMPACT_LOGO"] === "1") {
+    return rows >= LOGO_COMPACT_MIN_ROWS ? LOGO_COMPACT : [];
+  }
+  if (cols >= LOGO_LARGE_MIN_COLS) return LOGO_LARGE;
+  for (const variant of LOGO_VARIANTS) {
+    if (cols >= variant.minCols && rows >= variant.minRows) {
+      return variant.logo;
+    }
+  }
+  return [];
+}
+
+/** Returns the visual column width of the widest row in a logo variant. */
+export function getLogoWidth(logo: readonly string[]): number {
+  return logo.reduce((max, line) => Math.max(max, getTextWidth(line)), 0);
+}

package/src/ui/modeDisplay.ts

@@ -18,10 +18,10 @@ export function getModeDisplaySpec(mode: string, theme: Theme): ModeDisplaySpec
       return {
         label: formatModeLabel(mode),
         ringGlyph: "◉",
-        ringColor: theme.WARNING,
-        ringFill: theme.BORDER_SUBTLE,
-        iconColor: theme.WARNING,
-        labelColor: theme.TEXT,
+        ringColor: theme.warning,
+        ringFill: theme.border,
+        iconColor: theme.warning,
+        labelColor: theme.text,
         labelBold: true,
         ringBold: true,
       };
@@ -29,10 +29,10 @@ export function getModeDisplaySpec(mode: string, theme: Theme): ModeDisplaySpec
       return {
         label: formatModeLabel(mode),
         ringGlyph: "◎",
-        ringColor: theme.BORDER_ACTIVE,
-        ringFill: theme.PANEL_ALT,
-        iconColor: theme.PROMPT,
-        labelColor: theme.TEXT,
+        ringColor: theme.borderFocused,
+        ringFill: theme.surfaceMuted,
+        iconColor: theme.prompt,
+        labelColor: theme.text,
         labelBold: true,
         ringBold: false,
       };
@@ -41,10 +41,10 @@ export function getModeDisplaySpec(mode: string, theme: Theme): ModeDisplaySpec
       return {
         label: formatModeLabel(mode),
         ringGlyph: "○",
-        ringColor: theme.SUCCESS,
-        ringFill: theme.PANEL_SOFT,
-        iconColor: theme.SUCCESS,
-        labelColor: theme.MUTED,
+        ringColor: theme.success,
+        ringFill: theme.surfaceMuted,
+        iconColor: theme.success,
+        labelColor: theme.textMuted,
         labelBold: false,
         ringBold: false,
       };