@golba98/codexa 1.0.3 → 1.0.5

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

@@ -1,24 +1,24 @@
 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 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 { getTextWidth } from "./textLayout.js";
+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 "../render/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";
+} from "../render/logoVariants.js";
 
 // Re-exported for backward compatibility with existing tests.
 export const HEADER_WORDMARK_LINES = LOGO_LARGE;
@@ -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 "../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 } from "../core/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
@@ -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/{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/layout.ts

@@ -1,23 +1,35 @@
 /**
  * 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 = 100; // matches LOGO_LARGE_MIN_COLS in logoVariants.ts
@@ -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;
+}