@golba98/codexa 1.0.3 → 1.0.4

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;
+}

package/src/ui/layoutListWindow.ts

@@ -0,0 +1,145 @@
+/**
+ * Shared utility for windowing large lists in limited terminal rows.
+ */
+
+export interface ListWindowOptions {
+  itemCount: number;
+  selectedIndex: number;
+  availableRows: number;
+  /** Fixed rows consumed by headers, borders, titles, etc. */
+  chromeRows: number;
+  /** Whether to show "↑ N more" and "↓ N more" indicators. */
+  showIndicators?: boolean;
+  /** Whether to show "Showing X-Y of N" range line. */
+  showRangeLine?: boolean;
+}
+
+export interface ListWindowResult {
+  start: number;
+  end: number;
+  visibleCount: number;
+  showAbove: boolean;
+  showBelow: boolean;
+  showRange: boolean;
+  hiddenAbove: number;
+  hiddenBelow: number;
+  /** Total rows consumed including chrome and indicators. */
+  totalRows: number;
+}
+
+/**
+ * Calculates a contiguous window of items that fits within available rows,
+ * ensuring the selected item is always visible.
+ */
+export function calculateListWindow({
+  itemCount,
+  selectedIndex,
+  availableRows,
+  chromeRows,
+  showIndicators = true,
+  showRangeLine = false,
+}: ListWindowOptions): ListWindowResult {
+  if (itemCount === 0) {
+    return {
+      start: 0,
+      end: 0,
+      visibleCount: 0,
+      showAbove: false,
+      showBelow: false,
+      showRange: false,
+      hiddenAbove: 0,
+      hiddenBelow: 0,
+      totalRows: chromeRows,
+    };
+  }
+
+  const rangeReserved = showRangeLine ? 1 : 0;
+  
+  // If everything fits including the range line, just show everything.
+  if (itemCount + chromeRows + rangeReserved <= availableRows) {
+    return {
+      start: 0,
+      end: itemCount,
+      visibleCount: itemCount,
+      showAbove: false,
+      showBelow: false,
+      showRange: showRangeLine,
+      hiddenAbove: 0,
+      hiddenBelow: 0,
+      totalRows: itemCount + chromeRows + rangeReserved,
+    };
+  }
+
+  // Otherwise we must window.
+  // We reserve space for indicators if requested.
+  // We MUST fit within availableRows.
+  const indicatorReserved = showIndicators ? 2 : 0;
+  const baseReserved = chromeRows + indicatorReserved + rangeReserved;
+  
+  let itemRows = Math.max(1, availableRows - baseReserved);
+  let start = 0;
+  let end = 0;
+
+  // Iteratively refine to account for dynamic indicators.
+  for (let attempt = 0; attempt < 3; attempt++) {
+    const visibleCount = Math.max(1, Math.min(itemCount, itemRows));
+    
+    // Center selected item if possible
+    start = Math.max(0, selectedIndex - Math.floor(visibleCount / 2));
+    if (start + visibleCount > itemCount) {
+      start = Math.max(0, itemCount - visibleCount);
+    }
+    end = Math.min(itemCount, start + visibleCount);
+
+    const actualAbove = start > 0;
+    const actualBelow = end < itemCount;
+    const dynamicReserved = chromeRows 
+      + (showRangeLine ? 1 : 0)
+      + (showIndicators && actualAbove ? 1 : 0)
+      + (showIndicators && actualBelow ? 1 : 0);
+    
+    const nextItemRows = Math.max(1, availableRows - dynamicReserved);
+    if (nextItemRows === itemRows) break;
+    itemRows = nextItemRows;
+  }
+
+  // Final visibility check for selectedIndex
+  if (selectedIndex < start) {
+    start = selectedIndex;
+    end = Math.min(itemCount, start + itemRows);
+  } else if (selectedIndex >= end) {
+    end = selectedIndex + 1;
+    start = Math.max(0, end - itemRows);
+  }
+
+  // Final clamping to ensure we don't exceed availableRows if indicators are shown
+  let finalAbove = showIndicators && start > 0;
+  let finalBelow = showIndicators && end < itemCount;
+  
+  while (end - start + chromeRows + (showRangeLine ? 1 : 0) + (finalAbove ? 1 : 0) + (finalBelow ? 1 : 0) > availableRows && end - start > 1) {
+    // Shrink window from the side further from selectedIndex
+    if (selectedIndex - start > end - 1 - selectedIndex) {
+      start++;
+    } else {
+      end--;
+    }
+    finalAbove = showIndicators && start > 0;
+    finalBelow = showIndicators && end < itemCount;
+  }
+
+  return {
+    start,
+    end,
+    visibleCount: end - start,
+    showAbove: finalAbove,
+    showBelow: finalBelow,
+    showRange: showRangeLine,
+    hiddenAbove: start,
+    hiddenBelow: itemCount - end,
+    totalRows: (end - start) 
+      + chromeRows 
+      + (showRangeLine ? 1 : 0)
+      + (finalAbove ? 1 : 0)
+      + (finalBelow ? 1 : 0),
+  };
+}

package/src/ui/logoVariants.ts

@@ -10,8 +10,8 @@ import { getTextWidth } from "./textLayout.js";
 // The companion `wrap="truncate"` rule keeps each row on exactly one terminal
 // line regardless of the surrounding Ink flex layout.
 
-// Canonical Codexa brand wordmark — the ██ block art is the authoritative logo.
-// Always shown on any normal-width terminal (≥ LOGO_LARGE_MIN_COLS cols).
+// Canonical Codexa brand wordmark — the ██ block art is the authoritative
+// large logo for wide/max layouts.
 export const CODEXA_WORDMARK = [
   " ██████╗ ██████╗ ██████╗ ███████╗██╗  ██╗ █████╗ ",
   "██╔════╝██╔═══██╗██╔══██╗██╔════╝╚██╗██╔╝██╔══██╗",
@@ -48,16 +48,13 @@ export const LOGO_COMPACT_MIN_COLS = 48;
 // Minimum terminal rows each variant needs to render without crowding out the
 // metadata + composer. A wide-but-short terminal (e.g. VS Code's bottom panel)
 // must step DOWN to a smaller logo instead of dropping straight to text-only.
-export const LOGO_LARGE_MIN_ROWS = 24;
+export const LOGO_LARGE_MIN_ROWS = 35;
 export const LOGO_MEDIUM_MIN_ROWS = 16;
 export const LOGO_COMPACT_MIN_ROWS = 12;
 
-// LOGO_MEDIUM is kept as an exported constant but intentionally omitted from
-// LOGO_VARIANTS. At 72+ cols, LOGO_LARGE_MIN_COLS = LOGO_MEDIUM_MIN_COLS = 72,
-// so LOGO_LARGE always wins. Below 72 cols the viewport is too narrow for the
-// thin ASCII art to add value over the compact single-line fallback.
 const LOGO_VARIANTS: readonly { logo: readonly string[]; minCols: number; minRows: number }[] = [
   { logo: LOGO_LARGE, minCols: LOGO_LARGE_MIN_COLS, minRows: LOGO_LARGE_MIN_ROWS },
+  { logo: LOGO_MEDIUM, minCols: LOGO_MEDIUM_MIN_COLS, minRows: LOGO_MEDIUM_MIN_ROWS },
   { logo: LOGO_COMPACT, minCols: LOGO_COMPACT_MIN_COLS, minRows: LOGO_COMPACT_MIN_ROWS },
 ];
 
@@ -92,7 +89,6 @@ export function selectLogoVariantForViewport(cols: number, rows: number): readon
   if (process.env["CODEXA_COMPACT_LOGO"] === "1") {
     return rows >= LOGO_COMPACT_MIN_ROWS ? LOGO_COMPACT : [];
   }
-  if (cols >= LOGO_LARGE_MIN_COLS) return LOGO_LARGE;
   for (const variant of LOGO_VARIANTS) {
     if (cols >= variant.minCols && rows >= variant.minRows) {
       return variant.logo;

package/src/ui/runtimeDisplay.ts

@@ -5,6 +5,7 @@ import type { ModelSpec } from "../core/models/modelSpecs.js";
 import type { ModelContextMetadata } from "../core/providerRuntime/contextMetadata.js";
 import { contextMetadataToModelSpec, formatContextCompact } from "../core/providerRuntime/contextMetadata.js";
 import type { ActiveProviderRoute } from "../core/providerRuntime/types.js";
+import { getAntigravityModelLabel } from "../core/providerRuntime/antigravity.js";
 
 export interface ActiveRuntimeDisplayInput {
   route: ActiveProviderRoute;
@@ -29,6 +30,7 @@ const PROVIDER_DISPLAY: Record<string, string> = {
   anthropic: "Claude Code CLI",
   google: "Gemini CLI",
   local: "Local",
+  antigravity: "Antigravity CLI",
 };
 
 function formatContextLimit(value: number): string {
@@ -53,6 +55,9 @@ function getModelLabel(route: ActiveProviderRoute, capability?: CodexModelCapabi
   if (route.providerId === "anthropic") {
     return capability?.label ?? route.modelId;
   }
+  if (route.providerId === "antigravity") {
+    return getAntigravityModelLabel(route.modelId);
+  }
   return route.modelId;
 }
 
@@ -65,7 +70,10 @@ export function buildActiveRuntimeDisplay({
   contextMetadata = null,
 }: ActiveRuntimeDisplayInput): ActiveRuntimeDisplay {
   const providerLabel = PROVIDER_DISPLAY[route.providerId] ?? route.providerId;
-  const reasoning = formatReasoningLabel(route.reasoning ?? reasoningLevel);
+  const rawReasoning = route.providerId === "antigravity"
+    ? route.reasoning
+    : route.reasoning ?? reasoningLevel;
+  const reasoning = rawReasoning ? formatReasoningLabel(rawReasoning) : null;
   const modelLabel = getModelLabel(route, modelCapability);
   const validContextMetadata = isContextForRoute(contextMetadata, route) ? contextMetadata : null;
   const contextDisplay = validContextMetadata?.contextLength != null
@@ -82,8 +90,12 @@ export function buildActiveRuntimeDisplay({
 
   return {
     providerLabel,
-    modelDisplay: `${providerLabel} / ${modelLabel} / reasoning: ${reasoning}`,
-    footerModelDisplay: `${providerLabel} / ${modelLabel} (${reasoning})`,
+    modelDisplay: reasoning
+      ? `${providerLabel} / ${modelLabel} / reasoning: ${reasoning}`
+      : `${providerLabel} / ${modelLabel}`,
+    footerModelDisplay: reasoning
+      ? `${providerLabel} / ${modelLabel} (${reasoning})`
+      : `${providerLabel} / ${modelLabel}`,
     contextDisplay,
     modeLabel: formatModeLabel(mode),
     modelSpec,