@golba98/codexa 1.0.2 → 1.0.4

package/src/ui/UpdatePromptPanel.tsx

@@ -0,0 +1,197 @@
+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";
+
+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 (key.escape) {
+      onSkip();
+      return;
+    }
+    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;
+      }
+    } else if (phase === "done" || phase === "error") {
+      if (key.return) {
+        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 footerText = phase === "menu"
+    ? "Esc to close · Enter to confirm"
+    : "Esc 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: Codexa ${formatVersionLabel(latestVersion)}`}</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text color={theme.text}>{`${formatVersionLabel(currentVersion)} -> ${formatVersionLabel(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={phase === "menu" ? theme.borderFocused : theme.border}
+        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>
+            ))}
+          </>
+        )}
+
+        {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>
+          </>
+        )}
+
+        {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}>{footerText}</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

@@ -1,26 +1,38 @@
 /**
  * Responsive layout constants and hook.
  *
- * Three modes based purely on terminal column count:
+ * Five modes based on both terminal columns and rows:
  *
- *   full    ≥ 110 cols  → full banner, side-by-side header info
- *   compact  60–109     → single-line mini logo, stacked info, condensed composer
- *   micro    < 60       → no logo, one-line header, ultra-compact composer
+ *   micro    very small rows/cols → one-line shell
+ *   compact  normal short terminal → compact shell, no large logo
+ *   normal   standard terminal → compact header, roomy content
+ *   wide     large terminal → decorative header allowed
+ *   max      maximized terminal → full decorative layout
  */
 
-import { useEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { useStdout } from "ink";
 import stringWidth from "string-width";
 import * as renderDebug from "../core/perf/renderDebug.js";
-
-export const BREAKPOINT_FULL    = 110; // ≥ this → full
-export const BREAKPOINT_COMPACT =  60; // ≥ this → compact; below → micro
+import { setTerminalResizing, isTerminalResizing } from "../core/terminal/terminalControl.js";
+
+export const BREAKPOINT_MAX = 180;
+export const BREAKPOINT_WIDE = 140;
+export const BREAKPOINT_NORMAL = 90;
+export const BREAKPOINT_COMPACT = 60;
+export const ROW_BREAKPOINT_MAX = 40;
+export const ROW_BREAKPOINT_WIDE = 30;
+export const ROW_BREAKPOINT_NORMAL = 20;
+export const ROW_BREAKPOINT_COMPACT = 14;
+export const MAX_CONTENT_WIDTH = 220;
+export const MIN_TERMINAL_COLS = 20;
+export const MIN_TERMINAL_ROWS = 10;
 export const MIN_VIEWPORT_COLS = 20;
 export const MIN_VIEWPORT_ROWS = 10;
-export const RESTORE_SETTLE_MS = 100;
+export const RESTORE_SETTLE_MS = process.env.NODE_ENV === "test" ? 0 : 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;
@@ -29,7 +41,7 @@ export const transcriptContentIndent = 4; // 2 for DashCard border + 2 for promp
 const DEFAULT_COLUMNS = 120;
 const DEFAULT_ROWS = 24;
 
-export type LayoutMode = "full" | "compact" | "micro";
+export type LayoutMode = "compact" | "regular" | "expanded";
 export type StartupHeaderMode = "large" | "compact" | "tiny";
 
 export interface Layout {
@@ -38,11 +50,85 @@ export interface Layout {
   mode: LayoutMode;
 }
 
+export type PanelLayout = {
+  mode: "compact" | "regular" | "expanded";
+  availableRows: number;
+  availableCols: number;
+};
+
+export type BottomChromeBudget = {
+  runtimeMetadataRows: number;
+  composerRows: number;
+  transientStatusRows: number;
+  bottomPaddingRows: number;
+  totalRows: number;
+};
+
+export type AppLayoutBudget = {
+  mode: LayoutMode;
+  rows: number;
+  cols: number;
+
+  headerRows: number;
+  headerGapRows: number;
+  panelStagePaddingY: number;
+
+  activePanelRows: number;
+  activePanelCols: number;
+
+  bottomChromeBudget: BottomChromeBudget;
+  composerRows: number;
+
+  showNormalLogo: boolean;
+  showCompactHeader: boolean;
+  placeMetadataBesideLogo: boolean;
+  placeMetadataBelowLogo: boolean;
+
+  // Backward compatibility fields:
+  transcriptRows: number;
+  panelRows: number;
+  showLargeLogo: boolean;
+  showPanelSeparators: boolean;
+  showPanelColumnHeaders: boolean;
+};
+
+export const PanelAvailableRowsContext = createContext<number | undefined>(undefined);
+export const AppLayoutBudgetContext = createContext<AppLayoutBudget | undefined>(undefined);
+export const PanelLayoutContext = createContext<PanelLayout | undefined>(undefined);
+
+export interface ActivePanelLayout {
+  width: number;
+  height: number;
+  availableRows: number;
+  availableCols: number;
+}
+
+export const ActivePanelLayoutContext = createContext<ActivePanelLayout | undefined>(undefined);
+
+export function usePanelAvailableRows(): number | undefined {
+  return useContext(PanelAvailableRowsContext);
+}
+
+export function useAppLayoutBudget(): AppLayoutBudget | undefined {
+  return useContext(AppLayoutBudgetContext);
+}
+
+export function useActivePanelLayout(): ActivePanelLayout | undefined {
+  return useContext(ActivePanelLayoutContext);
+}
+
+export function usePanelLayout(): PanelLayout | undefined {
+  return useContext(PanelLayoutContext);
+}
+
 export interface TerminalViewport extends Layout {
   rawCols?: number;
   rawRows?: number;
+  contentWidth: number;
+  isCramped: boolean;
   unstable: boolean;
   layoutEpoch: number;
+  isResizing: boolean;
 }
 
 // ─── Dimension helpers ────────────────────────────────────────────────────────
@@ -67,6 +153,13 @@ export function isRenderableViewport(cols: number | undefined, rows: number | un
     && Math.floor(rows) >= MIN_VIEWPORT_ROWS;
 }
 
+/** Returns true if the terminal is below the minimum supported size for a full UI. */
+export function isCrampedTerminal(cols: number | undefined, rows: number | undefined): boolean {
+  const safeCols = normalizeDimension(cols, DEFAULT_COLUMNS);
+  const safeRows = normalizeDimension(rows, DEFAULT_ROWS);
+  return safeCols < MIN_TERMINAL_COLS || safeRows < MIN_TERMINAL_ROWS;
+}
+
 /**
  * Leave a 1-column gutter so box-drawing borders never land exactly on the
  * terminal edge, which can trigger a horizontal scrollbar in some Windows hosts.
@@ -75,6 +168,20 @@ export function getShellWidth(cols: number | undefined): number {
   return Math.max(20, (cols ?? 120) - 1);
 }
 
+/**
+ * Returns the width of the main content area, capped at MAX_CONTENT_WIDTH.
+ * This is used to center the UI in large terminals.
+ */
+export function getContentWidth(cols: number | undefined): number {
+  const shellWidth = getShellWidth(cols);
+
+  if (shellWidth < 100) return shellWidth;
+  if (shellWidth < 150) return shellWidth - 4;
+  if (shellWidth < 200) return shellWidth - 8;
+
+  return Math.min(shellWidth - 12, MAX_CONTENT_WIDTH);
+}
+
 export function getUsableShellWidth(cols: number | undefined, reservedColumns = 0): number {
   return Math.max(1, getShellWidth(cols) - reservedColumns);
 }
@@ -142,10 +249,118 @@ export function clampVisualText(text: string, maxWidth: number): string {
   return output + ellipsis;
 }
 
-function computeMode(cols: number): LayoutMode {
-  if (cols >= BREAKPOINT_FULL)    return "full";
-  if (cols >= BREAKPOINT_COMPACT) return "compact";
-  return "micro";
+export function computeMode(cols: number, rows: number): LayoutMode {
+  if (rows <= 24 || cols <= 100) {
+    return "compact";
+  }
+  if (cols >= 140 && rows >= 30) {
+    return "expanded";
+  }
+  return "regular";
+}
+
+export function isDecorativeLayoutMode(mode: LayoutMode): boolean {
+  return mode === "expanded";
+}
+
+export function isCompactShellMode(mode: LayoutMode): boolean {
+  return mode === "compact" || mode === "regular";
+}
+
+export interface AppLayoutBudgetParams {
+  cols: number | undefined;
+  rows: number | undefined;
+  composerRows?: number;
+  panelHintRows?: number;
+  headerRows?: number;
+  headerGapRows?: number;
+}
+
+export function computeAppLayoutBudget({
+  cols,
+  rows,
+  composerRows = 4,
+  panelHintRows = 0,
+  headerRows,
+  headerGapRows,
+}: AppLayoutBudgetParams): AppLayoutBudget {
+  const safeCols = normalizeDimension(cols, DEFAULT_COLUMNS);
+  const safeRows = normalizeDimension(rows, DEFAULT_ROWS);
+  const mode = computeMode(safeCols, safeRows);
+  const shellHeight = getShellHeight(safeRows);
+
+  const showNormalLogo =
+    process.env["CODEXA_NO_ASCII_LOGO"] !== "1" && (
+      mode === "regular" ||
+      mode === "expanded" ||
+      (mode === "compact" && safeCols >= 72)
+    );
+
+  const showCompactHeader = !showNormalLogo;
+
+  const placeMetadataBesideLogo =
+    showNormalLogo && safeCols >= 95;
+
+  const placeMetadataBelowLogo =
+    showNormalLogo && !placeMetadataBesideLogo;
+
+  const resolvedHeaderRows = headerRows ?? (showNormalLogo ? 6 : 1);
+  const resolvedHeaderGapRows = headerGapRows ?? (mode === "compact" ? 0 : 1);
+  const panelStagePaddingY = mode === "compact" ? 0 : 1;
+  const resolvedComposerRows = mode === "compact" ? 3 : Math.max(0, composerRows);
+  const runtimeMetadataRows = 1;
+  const transientStatusRows = 0;
+  const bottomPaddingRows = mode === "compact" ? 0 : 1;
+  const bottomChromeBudget: BottomChromeBudget = {
+    runtimeMetadataRows,
+    composerRows: resolvedComposerRows,
+    transientStatusRows,
+    bottomPaddingRows,
+    totalRows: runtimeMetadataRows + resolvedComposerRows + transientStatusRows + bottomPaddingRows,
+  };
+  const baseReservedRows =
+    resolvedHeaderRows +
+    resolvedHeaderGapRows +
+    panelStagePaddingY * 2 +
+    bottomChromeBudget.totalRows +
+    Math.max(0, panelHintRows);
+
+  const activePanelRows = Math.max(1, shellHeight - baseReservedRows);
+  const contentWidth = getContentWidth(safeCols);
+  
+  const isCompact = mode === "compact";
+  const borderRows = 2;
+  const titleRows = 1;
+  const headerRowsInPanel = isCompact ? 0 : 1;
+  const panelChromeRows = borderRows + titleRows + headerRowsInPanel;
+  const innerAvailableRows = Math.max(1, activePanelRows - panelChromeRows);
+
+  const borderCols = 4;
+  const innerAvailableCols = Math.max(20, contentWidth - borderCols);
+
+  return {
+    mode,
+    rows: safeRows,
+    cols: safeCols,
+    headerRows: resolvedHeaderRows,
+    headerGapRows: resolvedHeaderGapRows,
+    panelStagePaddingY,
+    activePanelRows: innerAvailableRows,
+    activePanelCols: innerAvailableCols,
+    bottomChromeBudget,
+    composerRows: resolvedComposerRows,
+    showNormalLogo,
+    showCompactHeader,
+    placeMetadataBesideLogo,
+    placeMetadataBelowLogo,
+    
+    // Backward compatibility fields:
+    transcriptRows: activePanelRows,
+    panelRows: innerAvailableRows,
+    showLargeLogo: mode === "expanded",
+    showPanelSeparators: mode === "expanded",
+    showPanelColumnHeaders: mode === "expanded",
+  };
 }
 
 export function createLayoutSnapshot(
@@ -154,16 +369,28 @@ export function createLayoutSnapshot(
   fallback: Layout = {
     cols: DEFAULT_COLUMNS,
     rows: DEFAULT_ROWS,
-    mode: computeMode(DEFAULT_COLUMNS),
+    mode: computeMode(DEFAULT_COLUMNS, DEFAULT_ROWS),
   },
-): Layout {
+): TerminalViewport {
   const nextCols = normalizeDimension(cols, fallback.cols);
   const nextRows = normalizeDimension(rows, fallback.rows);
 
-  return {
+  const stableLayout = {
     cols: nextCols,
     rows: nextRows,
-    mode: computeMode(nextCols),
+    mode: computeMode(nextCols, nextRows),
+  };
+
+  const isCramped = isCrampedTerminal(nextCols, nextRows);
+  const contentWidth = getContentWidth(nextCols);
+
+  return {
+    ...stableLayout,
+    contentWidth,
+    isCramped,
+    unstable: false,
+    layoutEpoch: 0,
+    isResizing: false,
   };
 }
 
@@ -175,6 +402,7 @@ export function createTerminalViewport(
   cols: number | undefined,
   rows: number | undefined,
   fallback?: TerminalViewport,
+  isResizing = false,
 ): TerminalViewport {
   const fallbackLayout = fallback
     ? { cols: fallback.cols, rows: fallback.rows, mode: fallback.mode }
@@ -184,12 +412,18 @@ export function createTerminalViewport(
     ? fallbackLayout
     : createLayoutSnapshot(cols, rows, fallbackLayout);
 
+  const isCramped = isCrampedTerminal(cols, rows);
+  const contentWidth = getContentWidth(stableLayout.cols);
+
   return {
     ...stableLayout,
     rawCols: cols,
     rawRows: rows,
+    contentWidth,
+    isCramped,
     unstable,
     layoutEpoch: fallback?.layoutEpoch ?? 0,
+    isResizing,
   };
 }
 
@@ -197,8 +431,21 @@ export function advanceTerminalViewport(
   current: TerminalViewport,
   cols: number | undefined,
   rows: number | undefined,
+  isResizing = false,
 ): TerminalViewport {
-  const next = createTerminalViewport(cols, rows, current);
+  const next = createTerminalViewport(cols, rows, current, isResizing);
+  
+  if (process.env.CODEXA_LAYOUT_DEBUG === "1") {
+    renderDebug.traceEvent("layout", "advanceViewport", {
+      cols: next.cols,
+      rows: next.rows,
+      contentWidth: next.contentWidth,
+      isCramped: next.isCramped,
+      isResizing: next.isResizing,
+      mode: next.mode,
+    });
+  }
+
   if (!next.unstable && current.unstable) {
     return {
       ...next,
@@ -221,9 +468,9 @@ export function useTerminalViewport(): TerminalViewport {
   const settleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    const commit = () => {
+    const commit = (isResizing = false) => {
       setViewport((current) => {
-        const nextViewport = advanceTerminalViewport(current, stdout.columns, stdout.rows);
+        const nextViewport = advanceTerminalViewport(current, stdout.columns, stdout.rows, isResizing);
         if (
           current.cols === nextViewport.cols &&
           current.rows === nextViewport.rows &&
@@ -231,7 +478,8 @@ export function useTerminalViewport(): TerminalViewport {
           current.unstable === nextViewport.unstable &&
           current.layoutEpoch === nextViewport.layoutEpoch &&
           current.rawCols === nextViewport.rawCols &&
-          current.rawRows === nextViewport.rawRows
+          current.rawRows === nextViewport.rawRows &&
+          current.isResizing === nextViewport.isResizing
         ) {
           renderDebug.traceFlickerEvent("measurementUpdate", {
             result: "skipped",
@@ -239,6 +487,7 @@ export function useTerminalViewport(): TerminalViewport {
             rows: nextViewport.rows,
             mode: nextViewport.mode,
             unstable: nextViewport.unstable,
+            isResizing: nextViewport.isResizing,
           });
           return current;
         }
@@ -249,6 +498,7 @@ export function useTerminalViewport(): TerminalViewport {
           rows: nextViewport.rows,
           mode: nextViewport.mode,
           unstable: nextViewport.unstable,
+          isResizing: nextViewport.isResizing,
         });
         return nextViewport;
       });
@@ -264,13 +514,22 @@ export function useTerminalViewport(): TerminalViewport {
         rawCols: stdout.columns,
         rawRows: stdout.rows,
       });
-      commit();
+
+      // Leading edge: immediately enter isResizing state but do NOT commit
+      // new dimensions yet. This freezes the layout to prevent tearing while
+      // dragging, and signals animations to pause.
+      setTerminalResizing(true);
+      setViewport((current) => ({ ...current, isResizing: true }));
+
       if (settleTimerRef.current) {
         clearTimeout(settleTimerRef.current);
       }
+
       settleTimerRef.current = setTimeout(() => {
         settleTimerRef.current = null;
-        commit();
+        setTerminalResizing(false);
+        // Trailing edge: commit final dimensions and exit isResizing state.
+        commit(false);
       }, RESTORE_SETTLE_MS);
     };
 
@@ -285,3 +544,18 @@ export function useTerminalViewport(): TerminalViewport {
 
   return viewport;
 }
+
+/**
+ * Calculate available vertical rows for active panels, falling back to a layout-based
+ * budget if availableRows is not explicitly provided.
+ */
+export function getAvailableRowsForPanel(
+  layout: Layout,
+  passedAvailableRows?: number
+): number {
+  if (passedAvailableRows !== undefined) {
+    return passedAvailableRows;
+  }
+
+  return computeAppLayoutBudget({ cols: layout.cols, rows: layout.rows }).panelRows;
+}