@golba98/codexa 1.0.3 → 1.0.4

package/src/ui/TopHeader.tsx

@@ -1,22 +1,22 @@
 import React, { memo } from "react";
 import { Box, Text } from "ink";
 import { HEADER_CONFIG_DEFAULTS, type HeaderConfig } from "../config/settings.js";
-import { formatCodexaBrandLabel } from "../core/channel.js";
+import { formatCodexaBrandLabel } from "../core/version/channel.js";
+import { formatVersionLabel } from "../core/version/updateCheck.js";
 import type { RuntimeSummary } from "../config/runtimeConfig.js";
 import type { CodexAuthState } from "../core/auth/codexAuth.js";
 import { getAuthStateLabel } from "../core/auth/codexAuth.js";
 import * as renderDebug from "../core/perf/renderDebug.js";
 import { useTheme } from "./theme.js";
-import { clampVisualText, type Layout } from "./layout.js";
+import { clampVisualText, isDecorativeLayoutMode, type Layout, useAppLayoutBudget } from "./layout.js";
 import { getTextWidth } from "./textLayout.js";
 import { UPDATE_CARD_ROWS, UpdateAvailableCard } from "./UpdateAvailableCard.js";
 import {
   LOGO_LARGE,
+  LOGO_COMPACT,
   LOGO_COMPACT_MIN_COLS,
   LOGO_LARGE_MIN_COLS,
   LOGO_LARGE_MIN_ROWS,
-  LOGO_MEDIUM_MIN_COLS,
-  selectLogoVariantForViewport,
   getLogoWidth,
 } from "./logoVariants.js";
 
@@ -27,9 +27,8 @@ const HEADER_PADDING_COLUMNS = 2;
 const SHELL_GUTTER_COLUMNS = 1;
 // Require 130+ cols for wide side-by-side so the UpdateAvailableCard has room.
 const WIDE_HEADER_MIN_COLUMNS = 130;
-// Require 72+ cols (= LOGO_MEDIUM_MIN_COLS) for medium side-by-side — both
-// LOGO_LARGE (≥100) and LOGO_MEDIUM (72–99) fit cleanly in side-by-side layout.
-const MEDIUM_HEADER_MIN_COLUMNS = LOGO_MEDIUM_MIN_COLS; // 72
+// Require 72+ cols for medium side-by-side canonical-logo layout.
+const MEDIUM_HEADER_MIN_COLUMNS = LOGO_LARGE_MIN_COLS;
 const MIN_SIDE_BY_SIDE_METADATA_WIDTH = 18;
 const STACKED_METADATA_GAP_ROWS = 1;
 // Gap row between the UpdateAvailableCard and the metadata lines.
@@ -84,7 +83,7 @@ function getMetadataRowCount(headerConfig: HeaderConfig): number {
 }
 
 function getHeaderVerticalMargins(layout: Layout): { topMarginRows: number; bottomMarginRows: number } {
-  if (layout.mode !== "full") {
+  if (!isDecorativeLayoutMode(layout.mode)) {
     return {
       topMarginRows: 0,
       bottomMarginRows: 0,
@@ -101,6 +100,19 @@ function getHeaderVerticalMargins(layout: Layout): { topMarginRows: number; bott
   };
 }
 
+export function selectHeaderLogo(layout: Layout): readonly string[] {
+  if (process.env["CODEXA_NO_ASCII_LOGO"] === "1") return [];
+  const showNormalLogo =
+    process.env["CODEXA_NO_ASCII_LOGO"] !== "1" && (
+      layout.mode === "regular" ||
+      layout.mode === "expanded" ||
+      (layout.mode === "compact" && layout.cols >= 72)
+    );
+  if (!showNormalLogo) return [];
+  if (process.env["CODEXA_COMPACT_LOGO"] === "1") return LOGO_COMPACT;
+  return LOGO_LARGE;
+}
+
 export function getHeaderHeroLayout(
   layout: Layout,
   headerConfig: HeaderConfig = HEADER_CONFIG_DEFAULTS,
@@ -110,17 +122,29 @@ export function getHeaderHeroLayout(
   const metadataRows = getMetadataRowCount(headerConfig);
   const contentWidth = getHeaderContentWidth(layout.cols);
 
-  // Pick the largest logo that fits both the columns AND the rows. This degrades
-  // large → medium → compact on a short terminal instead of collapsing straight
-  // to the flat text-only header.
-  const logo = selectLogoVariantForViewport(layout.cols, layout.rows);
+  const showNormalLogo =
+    process.env["CODEXA_NO_ASCII_LOGO"] !== "1" && (
+      layout.mode === "regular" ||
+      layout.mode === "expanded" ||
+      (layout.mode === "compact" && layout.cols >= 72)
+    );
+
+  const placeMetadataBesideLogo = showNormalLogo && layout.cols >= 95;
+
+  let mode: HeaderHeroMode;
+  if (!showNormalLogo) {
+    mode = "compact";
+  } else if (placeMetadataBesideLogo) {
+    mode = layout.cols >= 130 ? "wide" : "medium";
+  } else {
+    mode = "narrow";
+  }
+
+  const logo = selectHeaderLogo(layout);
   const logoWidth = logo.length > 0 ? getLogoWidth(logo) : 0;
-  const canRenderLogo = logo.length > 0;
 
-  if (!canRenderLogo) {
-    // Compact / text-only header. Show a recommended-size hint when the logo was
-    // dropped purely for size (not because the user disabled ASCII art).
-    const sizeHintRows = process.env["CODEXA_NO_ASCII_LOGO"] === "1" ? 0 : 1;
+  if (mode === "compact") {
+    // Compact / micro text-only header.
     return {
       mode: "compact",
       topMarginRows,
@@ -129,21 +153,13 @@ export function getHeaderHeroLayout(
       metadataGapRows: 0,
       logoRows: 1,
       metadataRows: 0,
-      compactHintRows: sizeHintRows,
-      totalRows: topMarginRows + 1 + sizeHintRows + bottomMarginRows,
+      compactHintRows: 0,
+      totalRows: topMarginRows + 1 + bottomMarginRows,
     };
   }
 
   const logoRowCount = logo.length;
   const metadataGapColumns = layout.cols >= WIDE_HEADER_MIN_COLUMNS ? 4 : 2;
-  const metadataColumnWidth = contentWidth - logoWidth - metadataGapColumns;
-  const canUseSideBySide = metadataRows === 0
-    || metadataColumnWidth >= MIN_SIDE_BY_SIDE_METADATA_WIDTH;
-  const mode: HeaderHeroMode = canUseSideBySide && layout.cols >= WIDE_HEADER_MIN_COLUMNS
-    ? "wide"
-    : canUseSideBySide && layout.cols >= MEDIUM_HEADER_MIN_COLUMNS
-      ? "medium"
-      : "narrow";
   const metadataGapRows = mode === "narrow" && metadataRows > 0 ? STACKED_METADATA_GAP_ROWS : 0;
 
   const isSideBySide = mode === "wide" || mode === "medium";
@@ -244,7 +260,7 @@ export function TopHeader({
     : authLabelRaw;
 
   const heroLayout = getHeaderHeroLayout(layout, headerConfig, !!updateAvailable);
-  const selectedLogo = selectLogoVariantForViewport(layout.cols, layout.rows);
+  const selectedLogo = selectHeaderLogo(layout);
   const selectedLogoWidth = selectedLogo.length > 0 ? getLogoWidth(selectedLogo) : 0;
 
   const contentWidth = getHeaderContentWidth(layout.cols);
@@ -343,7 +359,7 @@ export function TopHeader({
             )}
             {metadataColumn}
             {updateAvailable && (
-              <Text color={theme.warning} wrap="truncate">{`↑ Update: Codexa ${updateAvailable.latestVersion} is available — run: npm install -g @golba98/codexa@latest`}</Text>
+              <Text color={theme.warning} wrap="truncate">{`Update available: Codexa ${formatVersionLabel(updateAvailable.latestVersion)} — Run: npm install -g @golba98/codexa@latest`}</Text>
             )}
           </Box>
         )}
@@ -418,4 +434,4 @@ export const MemoizedTopHeader = memo(TopHeader, (prev, next) => {
 export const MIN_LOGO_TERMINAL_WIDTH = LOGO_COMPACT_MIN_COLS;
 
 // Re-export for consumers that reference these constants directly.
-export { LOGO_LARGE_MIN_COLS, LOGO_MEDIUM_MIN_COLS, LOGO_COMPACT_MIN_COLS };
+export { LOGO_LARGE_MIN_COLS, LOGO_MEDIUM_MIN_COLS, LOGO_COMPACT_MIN_COLS } from "./logoVariants.js";

package/src/ui/TranscriptShell.tsx

@@ -0,0 +1,322 @@
+import React, { memo, useEffect, useMemo, useRef } from "react";
+import { Box, Static } from "ink";
+import type { RuntimeSummary } from "../config/runtimeConfig.js";
+import type { CodexAuthState } from "../core/auth/codexAuth.js";
+import * as renderDebug from "../core/perf/renderDebug.js";
+import type { TimelineEvent, UIState } from "../session/types.js";
+import {
+  buildActiveRenderItems,
+  buildIntroRenderItem,
+  buildStaticRenderItems,
+  buildTimelineItems,
+  TimelineRowView,
+  type TimelineItem,
+} from "./Timeline.js";
+import { getShellHeight, getShellWidth, resolveStartupHeaderMode, type TerminalViewport } from "./layout.js";
+import {
+  buildNativeTranscriptParts,
+  type NativeTranscriptRowItem,
+  type TimelineRow,
+} from "./timelineMeasure.js";
+import { LOGO_COMPACT, LOGO_COMPACT_MIN_COLS, LOGO_LARGE, LOGO_MEDIUM, selectLogoVariant } from "./logoVariants.js";
+
+type TranscriptStaticItem = NativeTranscriptRowItem & { type: "rows" };
+type StaticRenderItem = TranscriptStaticItem;
+
+export interface TranscriptShellProps {
+  layout: TerminalViewport;
+  authState: CodexAuthState;
+  workspaceLabel: string;
+  workspaceRoot?: string | null;
+  runtimeSummary?: RuntimeSummary | null;
+  staticEvents: TimelineEvent[];
+  activeEvents: TimelineEvent[];
+  uiState: UIState;
+  composer: React.ReactNode;
+  composerRows?: number;
+  verboseMode?: boolean;
+  clearCount?: number;
+  /**
+   * Bumped whenever a width-changing resize forces the terminal's app.tsx-owned
+   * clear boundary to physically wipe the screen. Folded into <Static>'s key
+   * (not the whole component's) so already-flushed content reprints at the
+   * new width — without remounting the composer or anything else.
+   */
+  repaintGeneration?: number;
+  visible?: boolean;
+}
+
+function RowsBlock({ rows }: { rows: TimelineRow[] }) {
+  return (
+    <Box flexDirection="column">
+      {rows.map((row) => (
+        <TimelineRowView key={row.key} row={row} />
+      ))}
+    </Box>
+  );
+}
+
+function isTranscriptEvent(event: TimelineEvent): boolean {
+  return event.type === "user" || event.type === "assistant" || event.type === "run" || event.type === "shell";
+}
+
+export function isHomeScreenState({
+  staticEvents,
+  activeEvents,
+  uiState,
+}: {
+  staticEvents: TimelineEvent[];
+  activeEvents: TimelineEvent[];
+  uiState: UIState;
+}): boolean {
+  return uiState.kind === "IDLE"
+    && !staticEvents.some(isTranscriptEvent)
+    && !activeEvents.some(isTranscriptEvent);
+}
+
+function getLogoVariantName(rows: readonly string[]): "large" | "medium" | "compact" | "wordmark" | "none" {
+  if (rows.length === 0) return process.env["CODEXA_NO_ASCII_LOGO"] === "1" ? "none" : "wordmark";
+  if (rows === LOGO_LARGE || rows.join("\n") === LOGO_LARGE.join("\n")) return "large";
+  if (rows === LOGO_MEDIUM || rows.join("\n") === LOGO_MEDIUM.join("\n")) return "medium";
+  if (rows === LOGO_COMPACT || rows.join("\n") === LOGO_COMPACT.join("\n")) return "compact";
+  return "wordmark";
+}
+
+function getLogoHiddenReason({
+  startupHeaderMode,
+  logoVariant,
+  width,
+}: {
+  startupHeaderMode: ReturnType<typeof resolveStartupHeaderMode>;
+  logoVariant: ReturnType<typeof getLogoVariantName>;
+  width: number;
+}): string | null {
+  if (startupHeaderMode === "tiny") return "terminal-too-small";
+  if (process.env["CODEXA_NO_ASCII_LOGO"] === "1") return "CODEXA_NO_ASCII_LOGO";
+  if (logoVariant === "wordmark") return `no-ascii-variant-fits-width-${width}`;
+  if (logoVariant === "none") return `no-logo-variant-fits-width-${width}`;
+  return null;
+}
+
+function buildTranscriptItems({
+  layout,
+  authState,
+  workspaceLabel,
+  workspaceRoot,
+  runtimeSummary,
+  staticEvents,
+  activeEvents,
+  uiState,
+  composerRows,
+  verboseMode,
+}: Pick<
+  TranscriptShellProps,
+  | "layout"
+  | "authState"
+  | "workspaceLabel"
+  | "workspaceRoot"
+  | "runtimeSummary"
+  | "staticEvents"
+  | "activeEvents"
+  | "uiState"
+  | "composerRows"
+  | "verboseMode"
+>): { staticItems: TranscriptStaticItem[]; liveRows: TimelineRow[]; startupHeaderMode: ReturnType<typeof resolveStartupHeaderMode> } {
+  const staticItems = buildTimelineItems(staticEvents);
+  const activeItems = buildTimelineItems(activeEvents);
+  const turnIds = [...staticItems, ...activeItems]
+    .filter((item): item is Extract<TimelineItem, { type: "turn" }> => item.type === "turn")
+    .map((item) => item.turnId);
+  const startupHeaderMode = resolveStartupHeaderMode({
+    cols: layout.cols,
+    rows: layout.rows,
+    introRows: 8,
+    composerRows: composerRows ?? 5,
+  });
+
+  const parts = buildNativeTranscriptParts(
+    [
+      buildIntroRenderItem({
+        authState,
+        workspaceLabel,
+        layout,
+        providerLabel: runtimeSummary?.providerLabel ?? null,
+        startupHeaderMode,
+      }),
+      ...buildStaticRenderItems(staticItems, turnIds, null, null, null),
+      ...buildActiveRenderItems(activeItems, turnIds, uiState),
+    ],
+    {
+      totalWidth: getShellWidth(layout.cols),
+      verboseMode,
+      debugLabel: "transcript-shell",
+      workspaceRoot,
+    },
+  );
+
+  return {
+    staticItems: parts.staticItems.map((item) => ({ ...item, type: "rows" as const })),
+    liveRows: parts.liveRows,
+    startupHeaderMode,
+  };
+}
+
+function TranscriptShellInner({
+  layout,
+  authState,
+  workspaceLabel,
+  workspaceRoot = null,
+  runtimeSummary = null,
+  staticEvents,
+  activeEvents,
+  uiState,
+  composer,
+  composerRows,
+  verboseMode = false,
+  clearCount = 0,
+  visible = true,
+}: TranscriptShellProps) {
+  const { staticItems, liveRows, startupHeaderMode } = useMemo(
+    () => buildTranscriptItems({
+      layout,
+      authState,
+      workspaceLabel,
+      workspaceRoot,
+      runtimeSummary,
+      staticEvents,
+      activeEvents,
+      uiState,
+      composerRows,
+      verboseMode,
+    }),
+    [activeEvents, authState, composerRows, layout, runtimeSummary, staticEvents, uiState, verboseMode, workspaceLabel, workspaceRoot],
+  );
+  const homeScreenActive = visible && isHomeScreenState({ staticEvents, activeEvents, uiState });
+  const visibleStaticItemsRef = useRef(staticItems);
+
+  useEffect(() => {
+    if (visible) {
+      visibleStaticItemsRef.current = staticItems;
+    }
+  }, [staticItems, visible]);
+
+  const displayedStaticItems = visible ? staticItems : visibleStaticItemsRef.current;
+
+  const staticRenderItems = useMemo<StaticRenderItem[]>(() => {
+    return displayedStaticItems.map((item) => ({
+      ...item,
+      key: `clear-${clearCount}-${item.key}`,
+    }));
+  }, [clearCount, displayedStaticItems]);
+
+  const displayedLiveRows = visible ? liveRows : [];
+  const staticRowCount = useMemo(
+    () => displayedStaticItems.reduce((rowCount, item) => rowCount + item.rows.length, 0),
+    [displayedStaticItems],
+  );
+  const liveBottomSpacerRows = visible
+    ? Math.max(0, getShellHeight(layout.rows) - staticRowCount - displayedLiveRows.length - (composerRows ?? 0))
+    : 0;
+  const spacerRows = useMemo<TimelineRow[]>(
+    () => Array.from({ length: liveBottomSpacerRows }, (_, index) => ({
+      key: `live-bottom-spacer-${clearCount}-${index}`,
+      spans: [{ text: " ".repeat(getShellWidth(layout.cols)) }],
+    })),
+    [clearCount, layout.cols, liveBottomSpacerRows],
+  );
+  const shellWidth = getShellWidth(layout.cols);
+  const introInnerWidth = Math.max(10, shellWidth - 2);
+  const selectedLogoRows = startupHeaderMode === "tiny"
+    ? []
+    : startupHeaderMode === "large"
+      ? selectLogoVariant(introInnerWidth)
+      : introInnerWidth >= LOGO_COMPACT_MIN_COLS ? LOGO_COMPACT : [];
+  const selectedLogoVariant = getLogoVariantName(selectedLogoRows);
+  const logoHiddenReason = getLogoHiddenReason({
+    startupHeaderMode,
+    logoVariant: selectedLogoVariant,
+    width: introInnerWidth,
+  });
+  const startupTraceKeyRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const nextKey = [
+      layout.cols,
+      layout.rows,
+      layout.mode,
+      startupHeaderMode,
+      homeScreenActive ? "home" : "transcript",
+      staticEvents.length,
+      activeEvents.length,
+      uiState.kind,
+      selectedLogoVariant,
+      clearCount,
+    ].join("|");
+    if (startupTraceKeyRef.current === nextKey) return;
+    startupTraceKeyRef.current = nextKey;
+    renderDebug.traceEvent("startup", "homeRender", {
+      cols: layout.cols,
+      rows: layout.rows,
+      layoutMode: layout.mode,
+      activeRoot: "TranscriptShell",
+      messageCount: [...staticEvents, ...activeEvents].filter(isTranscriptEvent).length,
+      staticEventsLength: staticEvents.length,
+      activeEventsLength: activeEvents.length,
+      uiStateKind: uiState.kind,
+      selectedLayoutMode: startupHeaderMode,
+      selectedLogoVariant,
+      logoBranchSelected: selectedLogoVariant !== "none" && selectedLogoVariant !== "wordmark",
+      logoHiddenReason,
+      composerCount: visible ? 1 : 0,
+      footerCount: visible ? 1 : 0,
+      homeScreenRendererUsed: homeScreenActive,
+      staticItemCount: staticRenderItems.length,
+      liveRowCount: displayedLiveRows.length,
+      clearCount,
+    });
+  }, [
+    activeEvents,
+    clearCount,
+    displayedLiveRows.length,
+    homeScreenActive,
+    layout.cols,
+    layout.mode,
+    layout.rows,
+    logoHiddenReason,
+    selectedLogoVariant,
+    startupHeaderMode,
+    staticEvents,
+    staticRenderItems.length,
+    uiState.kind,
+    visible,
+  ]);
+
+  return (
+    <Box flexDirection="column" width="100%" display={visible ? "flex" : "none"}>
+      <Static key={`static-${clearCount}`} items={staticRenderItems}>
+        {(item) => <RowsBlock key={item.key} rows={item.rows} />}
+      </Static>
+
+      {displayedLiveRows.length > 0 && <RowsBlock rows={displayedLiveRows} />}
+      {spacerRows.length > 0 && <RowsBlock rows={spacerRows} />}
+
+      {visible && composer}
+    </Box>
+  );
+}
+
+export const TranscriptShell = memo(function TranscriptShell(props: TranscriptShellProps) {
+  // repaintGeneration is folded in here (not just <Static>'s own key) because
+  // Ink only reliably re-flushes <Static> content on a genuine fresh mount of
+  // the whole subtree — its "capture before delete" escape hatch
+  // (reconciler.js's isStaticDirty/onImmediateRender) does not fire the same
+  // way when only the inner <Static> node is keyed away and remounted on its
+  // own. This does remount the composer too, but only on the (already
+  // disruptive) event of a real terminal resize, not during normal typing.
+  return (
+    <TranscriptShellInner
+      key={`clear-${props.clearCount ?? 0}-repaint-${props.repaintGeneration ?? 0}`}
+      {...props}
+    />
+  );
+});

package/src/ui/TurnGroup.tsx

@@ -18,7 +18,7 @@ import { useTheme } from "./theme.js";
 import { sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
 import { wrapPlainText, wrapCommandText } from "./textLayout.js";
 import { selectVisibleRunActivity } from "./runActivityView.js";
-import type { RunFileActivity } from "../core/workspaceActivity.js";
+import type { RunFileActivity } from "../core/workspace/workspaceActivity.js";
 import { RUN_OUTPUT_TRUNCATION_NOTICE } from "../session/chatLifecycle.js";
 import { formatProgressBlockBodyLines } from "./progressEntries.js";
 import { getUsableShellWidth, transcriptContentIndent } from "./layout.js";
@@ -32,7 +32,7 @@ import {
 } from "./outputPipeline.js";
 import { normalizeCommand, getFriendlyActionLabel } from "./commandNormalize.js";
 import * as renderDebug from "../core/perf/renderDebug.js";
-import { normalizePlanReviewMarkdown } from "../core/planStorage.js";
+import { normalizePlanReviewMarkdown } from "../core/workspace/planStorage.js";
 
 export type TurnOpacity = "active" | "recent" | "dim";
 

package/src/ui/UpdateAvailableCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { CODEXA_UPDATE_COMMAND } from "../core/updateCheck.js";
+import { CODEXA_UPDATE_COMMAND, formatVersionLabel } from "../core/version/updateCheck.js";
 import { clampVisualText } from "./layout.js";
 import { useTheme } from "./theme.js";
 
@@ -33,8 +33,8 @@ export function UpdateAvailableCard({ latestVersion, currentVersion, width }: Up
       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.textMuted}>{clamp(`Codexa ${formatVersionLabel(latestVersion)}`)}</Text>
+      <Text color={theme.textMuted}>{clamp(`Using ${formatVersionLabel(currentVersion)}`)}</Text>
       <Text color={theme.textDim}>{clamp(command)}</Text>
     </Box>
   );

package/src/ui/UpdatePromptPanel.tsx

@@ -2,7 +2,7 @@ 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";
+import { CODEXA_NPM_PACKAGE, CODEXA_UPDATE_COMMAND, formatVersionLabel } from "../core/version/updateCheck.js";
 
 type Phase = "menu" | "running" | "done" | "error";
 
@@ -38,6 +38,10 @@ export function UpdatePromptPanel({
   const spawnStartedRef = useRef(false);
 
   useInput((input, key) => {
+    if (key.escape) {
+      onSkip();
+      return;
+    }
     if (phase === "menu") {
       if (key.upArrow || input === "k") {
         setSelectedIndex((i) => Math.max(0, i - 1));
@@ -57,12 +61,8 @@ export function UpdatePromptPanel({
         }
         return;
       }
-      if (key.escape) {
-        onSkip();
-        return;
-      }
     } else if (phase === "done" || phase === "error") {
-      if (key.return || key.escape) {
+      if (key.return) {
         onSkip();
       }
     }
@@ -107,9 +107,9 @@ export function UpdatePromptPanel({
     };
   }, [phase]);
 
-  const hintText = phase === "menu"
-    ? "↑↓/jk select  Enter confirm  Esc skip"
-    : "Press Enter to close";
+  const footerText = phase === "menu"
+    ? "Esc to close · Enter to confirm"
+    : "Esc to close";
 
   return (
     <Box flexDirection="column" width="100%" marginTop={1}>
@@ -122,11 +122,10 @@ export function UpdatePromptPanel({
         flexDirection="column"
       >
         <Box>
-          <Text color={theme.accent} bold>Update available  </Text>
-          <Text color={theme.textMuted}>{hintText}</Text>
+          <Text color={theme.accent} bold>{`Update available: Codexa ${formatVersionLabel(latestVersion)}`}</Text>
         </Box>
         <Box marginTop={1}>
-          <Text color={theme.text}>{`✨ ${currentVersion} -> ${latestVersion}`}</Text>
+          <Text color={theme.text}>{`${formatVersionLabel(currentVersion)} -> ${formatVersionLabel(latestVersion)}`}</Text>
         </Box>
         <Box>
           <Text color={theme.textMuted}>{`Package: ${CODEXA_NPM_PACKAGE}`}</Text>
@@ -138,7 +137,7 @@ export function UpdatePromptPanel({
 
       <Box
         borderStyle="round"
-        borderColor={theme.borderFocused}
+        borderColor={phase === "menu" ? theme.borderFocused : theme.border}
         paddingX={2}
         paddingY={1}
         marginTop={1}
@@ -160,9 +159,6 @@ export function UpdatePromptPanel({
                 </Text>
               </Box>
             ))}
-            <Box marginTop={1}>
-              <Text color={theme.textDim}>Press enter to continue</Text>
-            </Box>
           </>
         )}
 
@@ -179,9 +175,6 @@ export function UpdatePromptPanel({
           <>
             <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>
           </>
         )}
 
@@ -192,11 +185,12 @@ export function UpdatePromptPanel({
             {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 marginTop={1}>
+          <Text color={theme.textDim}>{footerText}</Text>
+        </Box>
       </Box>
     </Box>
   );