@golba98/codexa 1.0.4 → 1.0.6

package/src/ui/{TopHeader.tsx → chrome/TopHeader.tsx}

@@ -1,15 +1,15 @@
 import React, { memo } from "react";
 import { Box, Text } from "ink";
-import { HEADER_CONFIG_DEFAULTS, type HeaderConfig } from "../config/settings.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, isDecorativeLayoutMode, type Layout, useAppLayoutBudget } from "./layout.js";
-import { getTextWidth } from "./textLayout.js";
+import { HEADER_CONFIG_DEFAULTS, type HeaderConfig } from "../../config/settings.js";
+import { formatCodexaBrandLabel } from "../../core/version/channel.js";
+import { CODEXA_UPDATE_COMMAND, 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, isDecorativeLayoutMode, type Layout, useAppLayoutBudget } from "../layout.js";
+import { getTextWidth } from "../render/textLayout.js";
 import { UPDATE_CARD_ROWS, UpdateAvailableCard } from "./UpdateAvailableCard.js";
 import {
   LOGO_LARGE,
@@ -18,7 +18,7 @@ import {
   LOGO_LARGE_MIN_COLS,
   LOGO_LARGE_MIN_ROWS,
   getLogoWidth,
-} from "./logoVariants.js";
+} from "../render/logoVariants.js";
 
 // Re-exported for backward compatibility with existing tests.
 export const HEADER_WORDMARK_LINES = LOGO_LARGE;
@@ -58,6 +58,7 @@ type HeaderMetadataLine = { key: string; text: string; color: string; bold: bool
 export interface UpdateAvailableInfo {
   latestVersion: string;
   currentVersion: string;
+  updateCommand?: string;
 }
 
 interface TopHeaderProps {
@@ -343,6 +344,7 @@ export function TopHeader({
                   <UpdateAvailableCard
                     latestVersion={updateAvailable.latestVersion}
                     currentVersion={updateAvailable.currentVersion}
+                    updateCommand={updateAvailable.updateCommand}
                     width={metadataWidth}
                   />
                   <Box height={UPDATE_CARD_GAP_ROWS} />
@@ -359,7 +361,7 @@ export function TopHeader({
             )}
             {metadataColumn}
             {updateAvailable && (
-              <Text color={theme.warning} wrap="truncate">{`Update available: Codexa ${formatVersionLabel(updateAvailable.latestVersion)} — Run: npm install -g @golba98/codexa@latest`}</Text>
+              <Text color={theme.warning} wrap="truncate">{`Update available: Codexa ${formatVersionLabel(updateAvailable.latestVersion)} — Run: ${updateAvailable.updateCommand ?? CODEXA_UPDATE_COMMAND}`}</Text>
             )}
           </Box>
         )}
@@ -434,4 +436,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 } from "./logoVariants.js";
+export { LOGO_LARGE_MIN_COLS, LOGO_MEDIUM_MIN_COLS, LOGO_COMPACT_MIN_COLS } from "../render/logoVariants.js";

package/src/ui/{UpdateAvailableCard.tsx → chrome/UpdateAvailableCard.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { CODEXA_UPDATE_COMMAND, formatVersionLabel } from "../core/version/updateCheck.js";
-import { clampVisualText } from "./layout.js";
-import { useTheme } from "./theme.js";
+import { CODEXA_UPDATE_COMMAND, formatVersionLabel } from "../../core/version/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
@@ -10,13 +10,14 @@ export const UPDATE_CARD_ROWS = UPDATE_CARD_CONTENT_ROWS + 2; // +2 for top/bott
 export interface UpdateAvailableCardProps {
   latestVersion: string;
   currentVersion: string;
+  updateCommand?: string;
   /** Total box width including borders. Long lines are truncated to fit. */
   width?: number;
 }
 
-export function UpdateAvailableCard({ latestVersion, currentVersion, width }: UpdateAvailableCardProps) {
+export function UpdateAvailableCard({ latestVersion, currentVersion, updateCommand = CODEXA_UPDATE_COMMAND, width }: UpdateAvailableCardProps) {
   const theme = useTheme();
-  const command = `Run: ${CODEXA_UPDATE_COMMAND}`;
+  const command = `Run: ${updateCommand}`;
   // Inner content width = boxWidth - 2 (left/right border cols)
   const innerWidth = width !== undefined ? Math.max(8, width - 2) : undefined;
 

package/src/ui/{commandNormalize.ts → input/commandNormalize.ts}

@@ -1,4 +1,4 @@
-import { formatTerminalAnswerInline } from "./terminalAnswerFormat.js";
+import { formatTerminalAnswerInline } from "../render/terminalAnswerFormat.js";
 
 function stripOuterQuotes(s: string): string {
   if ((s.startsWith("'") && s.endsWith("'")) || (s.startsWith('"') && s.endsWith('"'))) {

package/src/ui/{focus.ts → input/focus.ts}

@@ -1,4 +1,4 @@
-import type { Screen } from "../session/types.js";
+import type { Screen } from "../../session/types.js";
 
 export const FOCUS_IDS = {
   composer: "composer",

package/src/ui/{inputBuffer.ts → input/inputBuffer.ts}

@@ -1,6 +1,6 @@
-import type { WrappedTextRow } from "./textLayout.js";
-import { getTextWidth, normalizeLineBreaks, wrapTextRows } from "./textLayout.js";
-import { sanitizeTerminalInput } from "../core/terminal/terminalSanitize.js";
+import type { WrappedTextRow } from "../render/textLayout.js";
+import { getTextWidth, normalizeLineBreaks, wrapTextRows } from "../render/textLayout.js";
+import { sanitizeTerminalInput } from "../../core/terminal/terminalSanitize.js";
 
 export type WrappedInputRow = WrappedTextRow;
 

package/src/ui/{slashCommands.ts → input/slashCommands.ts}

@@ -24,6 +24,7 @@ export const SLASH_COMMANDS = [
   { cmd: "/auth", desc: "Manage authentication" },
   { cmd: "/workspace", desc: "Show the locked workspace" },
   { cmd: "/copy", desc: "Copy the full conversation transcript to clipboard" },
+  { cmd: "/update", desc: "Check for updates and install the latest Codexa" },
   { cmd: "/mouse", desc: "Toggle mouse capture for wheel scrolling (off by default)" },
   { cmd: "/exit", desc: "Quit the application" },
 ] as const satisfies readonly SlashCommandSuggestion[];

package/src/ui/{AttachmentImportPanel.tsx → panels/AttachmentImportPanel.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Text, useFocus, useInput } from "ink";
 import path from "node:path";
-import { useTheme } from "./theme.js";
+import { useTheme } from "../theme.js";
 
 export interface PendingImportFile {
   srcPath: string;

package/src/ui/{AuthPanel.tsx → panels/AuthPanel.tsx}

@@ -1,10 +1,10 @@
 import React from "react";
 import { Box, Text, useFocus, useInput } from "ink";
-import { AUTH_PREFERENCES, formatAuthPreferenceLabel } from "../config/settings.js";
-import type { CodexAuthProbeResult } from "../core/auth/codexAuth.js";
-import { getAuthStateLabel } from "../core/auth/codexAuth.js";
-import type { BackendProvider } from "../core/providers/types.js";
-import { useTheme } from "./theme.js";
+import { AUTH_PREFERENCES, formatAuthPreferenceLabel } from "../../config/settings.js";
+import type { CodexAuthProbeResult } from "../../core/auth/codexAuth.js";
+import { getAuthStateLabel } from "../../core/auth/codexAuth.js";
+import type { BackendProvider } from "../../core/providers/types.js";
+import { useTheme } from "../theme.js";
 
 interface AuthPanelProps {
   focusId: string;

package/src/ui/{BackendPicker.tsx → panels/BackendPicker.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
-import { AVAILABLE_BACKENDS } from "../config/settings.js";
-import { FOCUS_IDS } from "./focus.js";
+import { AVAILABLE_BACKENDS } from "../../config/settings.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 interface BackendPickerProps {

package/src/ui/{ModePicker.tsx → panels/ModePicker.tsx}

@@ -1,5 +1,5 @@
-import { AVAILABLE_MODES } from "../config/settings.js";
-import { FOCUS_IDS } from "./focus.js";
+import { AVAILABLE_MODES } from "../../config/settings.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 interface ModePickerProps {

package/src/ui/{ModelPicker.tsx → panels/ModelPicker.tsx}

@@ -1,5 +1,5 @@
-import { type CodexModelCapability } from "../core/models/codexModelCapabilities.js";
-import { FOCUS_IDS } from "./focus.js";
+import { type CodexModelCapability } from "../../core/models/codexModelCapabilities.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 interface ModelPickerProps {

package/src/ui/{ModelPickerScreen.tsx → panels/ModelPickerScreen.tsx}

@@ -4,10 +4,10 @@ import {
   type CodexModelCapability,
   type ReasoningEffortCapability,
   normalizeReasoningForModelCapabilities,
-} from "../core/models/codexModelCapabilities.js";
-import { formatReasoningLabel } from "../config/settings.js";
-import { traceInputDebug } from "../core/debug/inputDebug.js";
-import { FOCUS_IDS } from "./focus.js";
+} from "../../core/models/codexModelCapabilities.js";
+import { formatReasoningLabel } from "../../config/settings.js";
+import { traceInputDebug } from "../../core/debug/inputDebug.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import {
   clampVisualText,
   getShellWidth,
@@ -19,10 +19,10 @@ import {
   type ActivePanelLayout,
   type PanelLayout,
   usePanelLayout,
-} from "./layout.js";
-import { calculateListWindow } from "./layoutListWindow.js";
-import { useTheme } from "./theme.js";
-import type { GeminiModelSelection } from "../core/providerRuntime/types.js";
+} from "../layout.js";
+import { calculateListWindow } from "../timeline/layoutListWindow.js";
+import { useTheme } from "../theme.js";
+import type { GeminiModelSelection } from "../../core/providerRuntime/types.js";
 
 // ─── Types & helpers ─────────────────────────────────────────────────────────
 
@@ -498,7 +498,9 @@ export function ModelPickerScreen({
         >
           {models.length === 0 ? (
             <Text color={theme.textMuted}>
-              {isLoading ? "Discovering models from the Codex runtime..." : (emptyMessage ?? "No models available.")}
+              {isLoading
+                ? `Discovering models from ${activeProviderLabel === "OpenAI" ? "the Codex runtime" : activeProviderLabel}...`
+                : (emptyMessage ?? "No models available.")}
             </Text>
           ) : (
             visibleModels.map((model, index) => {

package/src/ui/{ModelReasoningPicker.tsx → panels/ModelReasoningPicker.tsx}

@@ -4,11 +4,11 @@ import {
   type CodexModelCapability,
   type ReasoningEffortCapability,
   normalizeReasoningForModelCapabilities,
-} from "../core/models/codexModelCapabilities.js";
-import { formatReasoningLabel } from "../config/settings.js";
-import { traceInputDebug } from "../core/debug/inputDebug.js";
-import { FOCUS_IDS } from "./focus.js";
-import { useTheme } from "./theme.js";
+} from "../../core/models/codexModelCapabilities.js";
+import { formatReasoningLabel } from "../../config/settings.js";
+import { traceInputDebug } from "../../core/debug/inputDebug.js";
+import { FOCUS_IDS } from "../input/focus.js";
+import { useTheme } from "../theme.js";
 
 // ─── Types & helpers ─────────────────────────────────────────────────────────
 

package/src/ui/{Panel.tsx → panels/Panel.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { useTheme } from "./theme.js";
+import { useTheme } from "../theme.js";
 
 interface PanelProps {
   cols: number;

package/src/ui/{PermissionsPanel.tsx → panels/PermissionsPanel.tsx}

@@ -1,10 +1,10 @@
-import type { ResolvedRuntimeConfig, RuntimeConfig } from "../config/runtimeConfig.js";
+import type { ResolvedRuntimeConfig, RuntimeConfig } from "../../config/runtimeConfig.js";
 import {
   formatApprovalPolicyLabel,
   formatNetworkAccessLabel,
   formatSandboxModeLabel,
-} from "../config/runtimeConfig.js";
-import { FOCUS_IDS } from "./focus.js";
+} from "../../config/runtimeConfig.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 export type PermissionsPanelAction =

package/src/ui/{PlanActionPicker.tsx → panels/PlanActionPicker.tsx}

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Box, Text, useFocus, useInput, useStdin } from "ink";
-import { FOCUS_IDS } from "./focus.js";
-import { useTheme } from "./theme.js";
+import { FOCUS_IDS } from "../input/focus.js";
+import { useTheme } from "../theme.js";
 
 export type PlanActionValue = "implement" | "revise" | "cancel";
 

package/src/ui/{PlanReviewPanel.tsx → panels/PlanReviewPanel.tsx}

@@ -1,10 +1,10 @@
 import { useMemo } from "react";
 import { Box, Text } from "ink";
-import { normalizePlanReviewMarkdown } from "../core/workspace/planStorage.js";
-import { getUsableShellWidth } from "./layout.js";
-import { parseMarkdown } from "./Markdown.js";
-import { getTextWidth } from "./textLayout.js";
-import { useTheme } from "./theme.js";
+import { normalizePlanReviewMarkdown } from "../../core/workspace/planStorage.js";
+import { getUsableShellWidth } from "../layout.js";
+import { parseMarkdown } from "../render/Markdown.js";
+import { getTextWidth } from "../render/textLayout.js";
+import { useTheme } from "../theme.js";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 

package/src/ui/{ProviderPicker.tsx → panels/ProviderPicker.tsx}

@@ -1,8 +1,8 @@
 import React, { useMemo, useState } from "react";
 import { Box, Text, useFocus, useInput } from "ink";
-import type { ProviderConfig, ProviderId, ProviderPickerAction } from "../core/providerLauncher/types.js";
-import { traceInputDebug } from "../core/debug/inputDebug.js";
-import { FOCUS_IDS } from "./focus.js";
+import type { ProviderConfig, ProviderId, ProviderPickerAction } from "../../core/providerLauncher/types.js";
+import { traceInputDebug } from "../../core/debug/inputDebug.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import {
   clampVisualText,
   getShellWidth,
@@ -14,9 +14,9 @@ import {
   type ActivePanelLayout,
   type PanelLayout,
   usePanelLayout,
-} from "./layout.js";
-import { calculateListWindow } from "./layoutListWindow.js";
-import { useTheme } from "./theme.js";
+} from "../layout.js";
+import { calculateListWindow } from "../timeline/layoutListWindow.js";
+import { useTheme } from "../theme.js";
 
 // ─── Types & helpers ─────────────────────────────────────────────────────────
 
@@ -247,7 +247,9 @@ export function ProviderPicker({
       return;
     }
     if (key.return && selectedProvider) {
-      onAction(selectedProvider.id, actions[actionIndex]?.value ?? "cancel");
+      const action = actions[actionIndex];
+      if (action?.disabledReason) return;
+      onAction(selectedProvider.id, action?.value ?? "cancel");
     }
   }, { isActive: isFocused });
 

package/src/ui/{ReasoningPicker.tsx → panels/ReasoningPicker.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
-import { type ReasoningEffortCapability } from "../core/models/codexModelCapabilities.js";
-import { formatReasoningLabel } from "../config/settings.js";
-import { FOCUS_IDS } from "./focus.js";
+import { type ReasoningEffortCapability } from "../../core/models/codexModelCapabilities.js";
+import { formatReasoningLabel } from "../../config/settings.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 interface ReasoningPickerProps {

package/src/ui/{SelectionPanel.tsx → panels/SelectionPanel.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Text, useFocus, useInput } from "ink";
 import SelectInput from "ink-select-input";
-import { useTheme } from "./theme.js";
+import { useTheme } from "../theme.js";
 
 interface SelectionPanelProps {
   focusId: string;

package/src/ui/{SettingsPanel.tsx → panels/SettingsPanel.tsx}

@@ -1,8 +1,8 @@
 import React, { useMemo, useState } from "react";
 import { Box, Text, useFocus, useInput } from "ink";
-import type { SettingDefinition } from "../config/settings.js";
-import type { FocusTargetId } from "./focus.js";
-import { useTheme } from "./theme.js";
+import type { SettingDefinition } from "../../config/settings.js";
+import type { FocusTargetId } from "../input/focus.js";
+import { useTheme } from "../theme.js";
 
 export interface SettingsPanelProps<TKey extends string> {
   focusId: FocusTargetId;

package/src/ui/{TextEntryPanel.tsx → panels/TextEntryPanel.tsx}

@@ -1,8 +1,8 @@
 import React, { useMemo, useState } from "react";
 import { Box, Text, useFocus, useInput } from "ink";
-import type { FocusTargetId } from "./focus.js";
-import { useTheme } from "./theme.js";
-import { stripMouseEscapes } from "./inputBuffer.js";
+import type { FocusTargetId } from "../input/focus.js";
+import { useTheme } from "../theme.js";
+import { stripMouseEscapes } from "../input/inputBuffer.js";
 
 interface TextEntryPanelProps {
   focusId: FocusTargetId;

package/src/ui/{ThemePicker.tsx → panels/ThemePicker.tsx}

@@ -1,6 +1,6 @@
 import React from "react";
-import { AVAILABLE_THEMES, formatThemeLabel } from "../config/settings.js";
-import { FOCUS_IDS } from "./focus.js";
+import { AVAILABLE_THEMES, formatThemeLabel } from "../../config/settings.js";
+import { FOCUS_IDS } from "../input/focus.js";
 import { SelectionPanel } from "./SelectionPanel.js";
 
 interface ThemePickerProps {

package/src/ui/{UpdatePromptPanel.tsx → panels/UpdatePromptPanel.tsx}

@@ -1,31 +1,45 @@
 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, formatVersionLabel } from "../core/version/updateCheck.js";
+import { useTheme } from "../theme.js";
+import { CODEXA_NPM_PACKAGE, formatVersionLabel } from "../../core/version/updateCheck.js";
+import {
+  formatPermissionGuidance,
+  getUpdateCommand,
+  isPermissionError,
+  runUpdateCommand,
+  type GlobalPackageManager,
+} from "../../core/version/packageManager.js";
+import type { CommandResult, CommandStreamHandlers } from "../../core/process/CommandRunner.js";
 
 type Phase = "menu" | "running" | "done" | "error";
 
+export type RunUpdateFn = (
+  pm: GlobalPackageManager,
+  handlers?: CommandStreamHandlers,
+) => { result: Promise<CommandResult>; cancel: () => void };
+
 const MENU_ITEMS = [
   { label: "Update now" },
-  { label: "Skip" },
-  { label: "Skip until next version" },
+  { label: "Later" },
 ] as const;
 
 interface UpdatePromptPanelProps {
   focusId: string;
   currentVersion: string;
   latestVersion: string;
+  packageManager: GlobalPackageManager;
+  /** Test seam — defaults to the real cross-platform runner. */
+  runUpdate?: RunUpdateFn;
   onSkip: () => void;
-  onSkipUntilNextVersion: (version: string) => void;
 }
 
 export function UpdatePromptPanel({
   focusId,
   currentVersion,
   latestVersion,
+  packageManager,
+  runUpdate,
   onSkip,
-  onSkipUntilNextVersion,
 }: UpdatePromptPanelProps) {
   const theme = useTheme();
   const { isFocused } = useFocus({ id: focusId, autoFocus: true });
@@ -35,7 +49,7 @@ export function UpdatePromptPanel({
   const [outputLines, setOutputLines] = useState<string[]>([]);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
-  const spawnStartedRef = useRef(false);
+  const runStartedRef = useRef(false);
 
   useInput((input, key) => {
     if (key.escape) {
@@ -54,10 +68,8 @@ export function UpdatePromptPanel({
       if (key.return) {
         if (selectedIndex === 0) {
           setPhase("running");
-        } else if (selectedIndex === 1) {
-          onSkip();
         } else {
-          onSkipUntilNextVersion(latestVersion);
+          onSkip();
         }
         return;
       }
@@ -70,42 +82,42 @@ export function UpdatePromptPanel({
 
   useEffect(() => {
     if (phase !== "running") return;
-    if (spawnStartedRef.current) return;
-    spawnStartedRef.current = true;
+    if (runStartedRef.current) return;
+    runStartedRef.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);
+    const appendLines = (text: string) => {
+      const lines = text.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");
+    const runner = runUpdate ?? runUpdateCommand;
+    const { result, cancel } = runner(packageManager, {
+      onStdout: appendLines,
+      onStderr: appendLines,
     });
 
-    child.once("close", (code: number | null) => {
-      if (code === 0) {
+    let disposed = false;
+    void result.then((res) => {
+      if (disposed) return;
+      if (res.status === "completed" && res.exitCode === 0) {
         setPhase("done");
+        return;
+      }
+      if (isPermissionError(res)) {
+        setErrorMessage(formatPermissionGuidance(packageManager));
       } else {
-        setErrorMessage(`npm exited with code ${code ?? "unknown"}.`);
-        setPhase("error");
+        setErrorMessage(res.userMessage);
       }
+      setPhase("error");
     });
 
     return () => {
-      try { child.kill(); } catch { /* ignore */ }
+      disposed = true;
+      cancel();
     };
-  }, [phase]);
+  }, [phase, packageManager, runUpdate]);
 
   const footerText = phase === "menu"
     ? "Esc to close · Enter to confirm"
@@ -122,16 +134,16 @@ export function UpdatePromptPanel({
         flexDirection="column"
       >
         <Box>
-          <Text color={theme.accent} bold>{`Update available: Codexa ${formatVersionLabel(latestVersion)}`}</Text>
+          <Text color={theme.accent} bold>{`Update available: Codexa ${latestVersion}`}</Text>
         </Box>
         <Box marginTop={1}>
-          <Text color={theme.text}>{`${formatVersionLabel(currentVersion)} -> ${formatVersionLabel(latestVersion)}`}</Text>
+          <Text color={theme.text}>{`Current version: ${currentVersion}`}</Text>
         </Box>
         <Box>
           <Text color={theme.textMuted}>{`Package: ${CODEXA_NPM_PACKAGE}`}</Text>
         </Box>
         <Box>
-          <Text color={theme.textMuted}>{`Run: ${CODEXA_UPDATE_COMMAND}`}</Text>
+          <Text color={theme.textMuted}>{`Run: ${getUpdateCommand(packageManager).displayCommand}`}</Text>
         </Box>
       </Box>
 
@@ -146,19 +158,17 @@ export function UpdatePromptPanel({
       >
         {phase === "menu" && (
           <>
-            {MENU_ITEMS.map((item, index) => (
-              <Box key={item.label}>
-                <Text color={index === selectedIndex ? theme.accent : theme.textMuted}>
-                  {index === selectedIndex ? "› " : "  "}
-                </Text>
+            <Box>
+              {MENU_ITEMS.map((item, index) => (
                 <Text
+                  key={item.label}
                   color={index === selectedIndex ? theme.text : theme.textMuted}
                   bold={index === selectedIndex}
                 >
-                  {`${index + 1}. ${item.label}`}
+                  {`[ ${item.label} ]${index === 0 ? "  " : ""}`}
                 </Text>
-              </Box>
-            ))}
+              ))}
+            </Box>
           </>
         )}
 
@@ -173,7 +183,7 @@ export function UpdatePromptPanel({
 
         {phase === "done" && (
           <>
-            <Text color={theme.success}>{"Codexa was updated successfully."}</Text>
+            <Text color={theme.success}>{`Codexa ${formatVersionLabel(latestVersion)} installed successfully.`}</Text>
             <Text color={theme.textMuted}>{"Restart Codexa to use the new version."}</Text>
           </>
         )}

package/src/ui/{Markdown.tsx → render/Markdown.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { useTheme } from "./theme.js";
-import { Panel } from "./Panel.js";
+import { useTheme } from "../theme.js";
+import { Panel } from "../panels/Panel.js";
 import { maybeRenderDiff, type DiffRenderLineType } from "./diffRenderer.js";
 import { formatLocalPathForTerminal, formatTerminalAnswerInline } from "./terminalAnswerFormat.js";
 

package/src/ui/{diffRenderer.ts → render/diffRenderer.ts}

@@ -1,4 +1,4 @@
-import { sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
+import { sanitizeTerminalOutput } from "../../core/terminal/terminalSanitize.js";
 
 export type DiffRenderLineType = "file" | "hunk" | "add" | "remove" | "context" | "meta";
 

package/src/ui/{modeDisplay.ts → render/modeDisplay.ts}

@@ -1,5 +1,5 @@
-import { formatModeLabel } from "../config/settings.js";
-import type { Theme } from "./theme.js";
+import { formatModeLabel } from "../../config/settings.js";
+import type { Theme } from "../theme.js";
 
 export interface ModeDisplaySpec {
   label: string;

package/src/ui/{outputPipeline.ts → render/outputPipeline.ts}

@@ -1,5 +1,5 @@
-import { isNoiseLine } from "../core/providers/codexTranscript.js";
-import { sanitizeTerminalOutput } from "../core/terminal/terminalSanitize.js";
+import { isNoiseLine } from "../../core/providers/codexTranscript.js";
+import { sanitizeTerminalOutput } from "../../core/terminal/terminalSanitize.js";
 import { parseMarkdown, type Segment } from "./Markdown.js";
 
 /**