@kal-elsam/kairo-runtime 0.9.0 → 0.10.0

package/src/global/ink/cockpit-usage.js

@@ -0,0 +1,111 @@
+/**
+ * Pure Usage / Tokens model — no React/Ink.
+ * Shared by formatUsageLines and SemanticUsagePanel.
+ */
+import { LAYOUT_MODES } from "./layout.js";
+
+export function usageRunLimit(layoutMode = LAYOUT_MODES.COMPACT) {
+  return layoutMode === LAYOUT_MODES.WIDE ? 8 : 3;
+}
+
+export function formatMeasuredBudgets(budgets) {
+  if (!budgets || typeof budgets !== "object") return null;
+  const parts = [];
+  if (Number.isFinite(budgets.stableUsedTokens) && Number.isFinite(budgets.stableBudgetTokens)) {
+    parts.push(`stable ${budgets.stableUsedTokens}/${budgets.stableBudgetTokens}`);
+  }
+  if (Number.isFinite(budgets.requestUsedTokens) && Number.isFinite(budgets.requestBudgetTokens)) {
+    parts.push(`request ${budgets.requestUsedTokens}/${budgets.requestBudgetTokens}`);
+  }
+  return parts.length > 0 ? parts.join(" · ") : null;
+}
+
+export function resolveConfiguredLimits(dashboard) {
+  const resolved = dashboard?.profile?.profile ?? {};
+  const configured = [];
+  if (Number.isFinite(resolved.tokenBudget)) configured.push(`token ${resolved.tokenBudget}`);
+  if (Number.isFinite(resolved.stableContextBudget)) configured.push(`stable ${resolved.stableContextBudget}`);
+  if (Number.isFinite(resolved.requestContextBudget)) configured.push(`request ${resolved.requestContextBudget}`);
+  return configured;
+}
+
+export function hasFiniteUsage(usage) {
+  if (!usage || typeof usage !== "object") return false;
+  return Number.isFinite(usage.total)
+    || Number.isFinite(usage.input)
+    || Number.isFinite(usage.output);
+}
+
+export function formatRunUsageLabel(run) {
+  const usage = run?.tokenUsage;
+  if (!hasFiniteUsage(usage)) return null;
+  const parts = [];
+  if (Number.isFinite(usage.input)) parts.push(`in ${usage.input}`);
+  if (Number.isFinite(usage.output)) parts.push(`out ${usage.output}`);
+  if (Number.isFinite(usage.total)) parts.push(`total ${usage.total}`);
+  return `${run.agentId ?? "agent"} · ${parts.join(" · ")}`;
+}
+
+function collectAuditableRuns(dashboard) {
+  return [...(dashboard?.activeRuns ?? []), ...(dashboard?.recentRuns ?? [])]
+    .filter((run) => hasFiniteUsage(run?.tokenUsage));
+}
+
+/** Pure adapter: Callout=status · Measured section owns the value. */
+export function adaptUsageModel({
+  snapshot = null,
+  dashboard = null,
+  layoutMode = LAYOUT_MODES.COMPACT
+} = {}) {
+  const measured = formatMeasuredBudgets(snapshot?.budgets);
+  const configured = resolveConfiguredLimits(dashboard);
+  const allRuns = collectAuditableRuns(dashboard);
+  const limit = usageRunLimit(layoutMode);
+  const visible = allRuns.slice(0, limit);
+  const hidden = Math.max(0, allRuns.length - visible.length);
+  const hasEvidence = Boolean(measured) || configured.length > 0 || allRuns.length > 0;
+
+  return {
+    title: "Usage",
+    callout: hasEvidence
+      ? {
+        tone: "info",
+        title: "Usage evidence available",
+        body: "Budgets and run tokenUsage only — no invented totals."
+      }
+      : {
+        tone: "info",
+        title: "Data unavailable",
+        body: "No measured budgets, profile limits, or auditable run tokenUsage."
+      },
+    measured: measured ?? "Data unavailable",
+    configured: configured.length > 0
+      ? configured.join(" · ")
+      : "No profile token budgets configured.",
+    runs: visible.map((run, i) => ({
+      id: `usage-run-${i}`,
+      label: formatRunUsageLabel(run)
+    })),
+    runTotal: allRuns.length,
+    runLimit: limit,
+    moreLine: hidden > 0 ? `… ${hidden} more` : null,
+    hasEvidence,
+    footnote: "Auditable budgets only — no invented token savings."
+  };
+}
+
+export function formatUsageLinesFromModel(model) {
+  const lines = [
+    "MEASURED", model.measured, "",
+    "CONFIGURED LIMITS", model.configured, "",
+    "RUN USAGE"
+  ];
+  if (model.runs.length === 0) {
+    lines.push("No auditable run tokenUsage yet.");
+  } else {
+    for (const item of model.runs) lines.push(item.label);
+    if (model.moreLine) lines.push(model.moreLine);
+  }
+  lines.push("", model.footnote);
+  return lines;
+}

package/src/global/ink/cockpit-views.js

@@ -5,7 +5,6 @@ import { CockpitEmptyState } from "./cockpit/primitives.js";
 import {
   formatProviderLines,
   formatRunDetailLines,
-  formatRunLines,
   formatSystemHealthLines,
   formatLaunchWizardLines,
   ORCHESTRATOR_VIEWS,
@@ -13,14 +12,15 @@ import {
 } from "./orchestrator-state.js";
 import { windowLinesForLayout } from "./cockpit-models.js";
 import { LAYOUT_MODES } from "./layout.js";
-import { formatRunsHubLines, RUNS_HUB_ITEMS } from "./cockpit-runs.js";
-import { formatReviewDetailLines, formatReviewListLines } from "./cockpit-reviews.js";
-import { formatChangesActionLines } from "./cockpit-changes.js";
-import { formatRecoveryLines } from "./cockpit-recovery.js";
-import { formatUsageLines } from "./cockpit-control-center.js";
-import { formatOrchestrationStatus } from "./cockpit-runs.js";
-import { formatAlertListLines } from "./cockpit-alerts.js";
-import { formatSettingsLines } from "./cockpit-settings.js";
+import { SemanticOverviewPanel } from "./ux/live-overview.js";
+import { SemanticGovernancePanel } from "./ux/live-governance.js";
+import { SemanticActivityPanel } from "./ux/live-activity.js";
+import { SemanticOrchestrationPanel } from "./ux/live-orchestration.js";
+import { SemanticAlertsPanel } from "./ux/live-alerts.js";
+import { SemanticSettingsPanel } from "./ux/live-settings.js";
+import { SemanticUsagePanel } from "./ux/live-usage.js";
+import { formatReviewDetailLines } from "./cockpit-reviews.js";
+import { listCuratedIntegrations } from "./cockpit-settings.js";
 
 export function PalettePanel({ model, colorEnabled = true }) {
   return React.createElement(Box, { flexDirection: "column" },
@@ -95,6 +95,11 @@ export function renderCockpitView({
   recoveryAction = null,
   settingsAction = null,
   colorEnabled = true,
+  unicode = true,
+  overviewDetailsOpen = false,
+  governanceDetailsOpen = false,
+  activityDetailsOpen = false,
+  contentFocused = false,
   homeDir = null
 }) {
   if (palette) {
@@ -102,14 +107,20 @@ export function renderCockpitView({
   }
   switch (view) {
     case ORCHESTRATOR_VIEWS.HOME:
-      return React.createElement(ControlCenterPanel, { model: controlCenter, colorEnabled });
+      return React.createElement(SemanticOverviewPanel, {
+        model: controlCenter,
+        detailsOpen: overviewDetailsOpen,
+        colorEnabled,
+        unicode
+      });
     case ORCHESTRATOR_VIEWS.USAGE:
-      return governanceList(
-        "Usage",
-        formatUsageLines({ snapshot, dashboard }),
+      return React.createElement(SemanticUsagePanel, {
+        snapshot,
+        dashboard,
         layoutMode,
-        colorEnabled
-      );
+        colorEnabled,
+        unicode
+      });
     case ORCHESTRATOR_VIEWS.IDES:
     case ORCHESTRATOR_VIEWS.PROVIDERS:
       return governanceList("IDEs & models", [
@@ -120,73 +131,54 @@ export function renderCockpitView({
     case ORCHESTRATOR_VIEWS.MODULES:
       return governanceList("Harness modules", formatModuleLines(snapshot), layoutMode, colorEnabled);
     case ORCHESTRATOR_VIEWS.CHANGES:
-      return governanceList(
-        "Governance",
-        formatChangeLines(snapshot, changesAction, layoutMode, homeDir),
+      return React.createElement(SemanticGovernancePanel, {
+        snapshot,
+        changesAction,
+        homeDir,
+        detailsOpen: governanceDetailsOpen,
         layoutMode,
-        colorEnabled
-      );
+        colorEnabled,
+        unicode
+      });
     case ORCHESTRATOR_VIEWS.ACTIVITY:
-      return governanceList(
-        "Activity",
-        formatRecoveryLines({ snapshot, recoveryAction, listIndex, dashboard, homeDir }),
+      return React.createElement(SemanticActivityPanel, {
+        snapshot,
+        recoveryAction,
+        dashboard,
+        listIndex,
+        homeDir,
+        detailsOpen: activityDetailsOpen,
         layoutMode,
-        colorEnabled
-      );
+        contentFocused,
+        colorEnabled,
+        unicode
+      });
     case ORCHESTRATOR_VIEWS.PROFILE:
-      return governanceList(
-        "Settings",
-        formatSettingsLines({
-          listIndex,
-          settingsAction,
-          snapshot,
-          diagnostics
-        }),
-        layoutMode,
-        colorEnabled
-      );
-    case ORCHESTRATOR_VIEWS.RUNS:
-      return listBlock(
-        `Orchestration · ${formatOrchestrationStatus({
-          active: (dashboard?.activeRuns ?? []).length,
-          recent: (dashboard?.recentRuns ?? []).length,
-          reviews: (reviews ?? []).length
-        })}`,
-        formatRunsHubLines(RUNS_HUB_ITEMS),
+      return React.createElement(SemanticSettingsPanel, {
+        integrations: listCuratedIntegrations(),
         listIndex,
+        settingsAction,
+        snapshot,
+        diagnostics,
+        layoutMode,
+        contentFocused,
         colorEnabled,
-        "Choose Active runs, History, Reviews, or New run."
-      );
+        unicode
+      });
+    case ORCHESTRATOR_VIEWS.RUNS:
     case ORCHESTRATOR_VIEWS.ACTIVE_RUNS:
-      return listBlock(
-        "Active runs",
-        formatRunLines(dashboard?.activeRuns ?? [], {
-          emptyMessage: "No runs executing. Governance first — launch only after setup/repairs.",
-          readable: true
-        }),
-        listIndex,
-        colorEnabled,
-        "Enter opens detail · Esc back to Orchestration"
-      );
     case ORCHESTRATOR_VIEWS.RECENT_RUNS:
-      return listBlock(
-        "Run history",
-        formatRunLines(dashboard?.recentRuns ?? [], {
-          emptyMessage: "No completed runs yet.",
-          readable: true
-        }),
-        listIndex,
-        colorEnabled,
-        "Enter opens detail · Esc back to Orchestration"
-      );
     case ORCHESTRATOR_VIEWS.REVIEWS:
-      return listBlock(
-        "Reviews",
-        formatReviewListLines(reviews),
+      return React.createElement(SemanticOrchestrationPanel, {
+        view,
+        dashboard,
+        reviews,
         listIndex,
+        layoutMode,
+        contentFocused,
         colorEnabled,
-        "Receipts are read-only. Launch reviews via kairo review --agent codex|pi."
-      );
+        unicode
+      });
     case ORCHESTRATOR_VIEWS.LAUNCH:
       if (launchableAgents.length === 0) {
         return React.createElement(CockpitEmptyState, {
@@ -223,13 +215,14 @@ export function renderCockpitView({
           .map((line) => React.createElement(Text, { key: line }, line))
       );
     case ORCHESTRATOR_VIEWS.ALERTS:
-      return listBlock(
-        "Alerts",
-        formatAlertListLines(alerts),
+      return React.createElement(SemanticAlertsPanel, {
+        alerts,
         listIndex,
+        layoutMode,
+        contentFocused,
         colorEnabled,
-        "Enter resolves · D dismisses · Esc back · / Alerts"
-      );
+        unicode
+      });
     case ORCHESTRATOR_VIEWS.DIAGNOSTICS:
       return governanceList(
         "System health",
@@ -287,25 +280,4 @@ function formatModuleLines(snapshot) {
   ];
 }
 
-function formatChangeLines(snapshot, changesAction, layoutMode = LAYOUT_MODES.COMPACT, homeDir = null) {
-  return formatChangesActionLines({ snapshot, changesAction, layoutMode, homeDir });
-}
-
-function listBlock(title, lines, listIndex, colorEnabled, emptyHint) {
-  const isEmpty = lines.length === 1 && /no |nothing |empty/i.test(lines[0]);
-  return React.createElement(Box, { flexDirection: "column" },
-    React.createElement(Text, { bold: true }, title),
-    isEmpty
-      ? React.createElement(CockpitEmptyState, {
-        message: lines[0],
-        hint: emptyHint
-      })
-      : lines.map((line, index) => React.createElement(Text, {
-        key: `${index}-${line}`,
-        bold: index === listIndex,
-        color: index === listIndex && colorEnabled ? COCKPIT_COLORS.primary : undefined
-      }, `${index === listIndex ? "› " : "  "}${line}`))
-  );
-}
-
 export { LAUNCH_WIZARD_STEPS };

package/src/global/ink/orchestrator-app.js

@@ -146,6 +146,10 @@ export function OrchestratorApp({
           data.reload().catch(() => {});
           return;
         }
+        if (selected.kind === PALETTE_KINDS.SETUP) {
+          finish({ cancelled: false, action: "setup" });
+          return;
+        }
         dispatch({
           type: "run-palette",
           kind: selected.kind,
@@ -161,6 +165,24 @@ export function OrchestratorApp({
       return;
     }
 
+    if (inputKey === " " && ui.view === ORCHESTRATOR_VIEWS.HOME && !ui.paletteOpen) {
+      dispatch({ type: "toggle-overview-details" });
+      return;
+    }
+
+    if (inputKey === " " && ui.view === ORCHESTRATOR_VIEWS.CHANGES && !ui.paletteOpen) {
+      dispatch({ type: "toggle-governance-details" });
+      return;
+    }
+
+    if (inputKey === " "
+      && ui.view === ORCHESTRATOR_VIEWS.ACTIVITY
+      && !ui.paletteOpen
+      && data.recoveryAction?.preview) {
+      dispatch({ type: "toggle-activity-details" });
+      return;
+    }
+
     if (key.escape) {
       if (ui.view === ORCHESTRATOR_VIEWS.CHANGES
         && data.changesAction?.phase === CHANGES_PHASE.CONFIRMING) {
@@ -262,6 +284,10 @@ export function OrchestratorApp({
           navItem: item,
           ctaDestination: data.snapshot?.cta?.destination ?? null
         });
+        if (intent.kind === "activate-setup") {
+          finish({ cancelled: false, action: "setup" });
+          return;
+        }
         if (intent.kind === "activate-cta") {
           if (openDestination(intent.destination)) return;
         }
@@ -495,6 +521,7 @@ export function OrchestratorApp({
         unicode,
         changesPhase: data.changesAction?.phase ?? null,
         recoveryPhase: data.recoveryAction?.phase ?? null,
+        recoveryHasPreview: Boolean(data.recoveryAction?.preview),
         settingsPhase: data.settingsAction?.phase ?? null,
         columns
       }),
@@ -542,6 +569,11 @@ export function OrchestratorApp({
           : null,
         layoutMode: mode,
         colorEnabled,
+        unicode,
+        overviewDetailsOpen: ui.overviewDetailsOpen,
+        governanceDetailsOpen: ui.governanceDetailsOpen,
+        activityDetailsOpen: ui.activityDetailsOpen,
+        contentFocused: ui.region === COCKPIT_REGIONS.CONTENT,
         homeDir
       })
     )

package/src/global/ink/setup-app.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Box, Text, useApp, useInput } from "ink";
 import { stdout as output } from "node:process";
-import { BRAND, WIZARD_COPY } from "../brand/index.js";
+import { BRAND } from "../brand/index.js";
 import { DEFAULT_COMPONENT_IDS, describeComponentCatalog } from "../component-registry.js";
 import { GLOBAL_AGENT_IDS, detectInstalledAdapters, listAdapters } from "../registry.js";
 import { buildSetupPreview, resolveComponentSelection } from "../clack/setup-preview.js";
@@ -9,72 +9,57 @@ import {
   SETUP_STEPS,
   buildAgentOptions,
   buildComponentOptions,
-  formatInkDetectPanel,
   formatInkHeaderLines,
-  formatInkPreviewLines,
-  formatInkSelectList,
   formatInkSplashLines,
   INITIAL_SETUP_STEP,
   shouldStartPreviewLoad,
   shouldUseCompactSplashLogo,
+  setupLineKey,
   toggleComponentSelection,
   toggleSelection,
   transitionFromSplash
 } from "./setup-state.js";
-import { COCKPIT_COLORS } from "./theme.js";
-import { CockpitPanel } from "./cockpit/primitives.js";
+import { COCKPIT_COLORS, resolveInkColor } from "./theme.js";
+import { useTerminalSize } from "./use-terminal-size.js";
+import { resolveTerminalCapabilities } from "./terminal-capabilities.js";
+import { SemanticSetupPanel } from "./ux/live-setup.js";
 
-const INK_COLORS = {
-  accent: COCKPIT_COLORS.primary,
-  success: COCKPIT_COLORS.success,
-  warning: COCKPIT_COLORS.warning,
-  danger: COCKPIT_COLORS.danger,
-  muted: COCKPIT_COLORS.muted
-};
-
-function Header() {
+export function SetupHeader({ colorEnabled = true }) {
   const lines = formatInkHeaderLines();
   return React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
-    React.createElement(Text, { bold: true, color: INK_COLORS.accent }, `╭─ ${lines[0]}`),
-    React.createElement(Text, { color: COCKPIT_COLORS.secondary }, lines[1]),
+    React.createElement(Text, {
+      bold: true,
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.primary)
+    }, `╭─ ${lines[0]}`),
+    React.createElement(Text, {
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.secondary)
+    }, lines[1]),
     React.createElement(Text, { dimColor: true }, lines[2])
   );
 }
 
-function Panel({ title, children }) {
-  return React.createElement(CockpitPanel, {
-    title,
-    focused: true,
-    width: "100%"
-  }, children);
-}
-
-function Footer({ children }) {
-  return React.createElement(Text, { dimColor: true }, children);
-}
-
-function Splash({ compact, onboarding = false }) {
+export function SetupSplash({ compact, onboarding = false, colorEnabled = true }) {
   const lines = formatInkSplashLines({ compact, onboarding });
   const logoLineCount = compact ? BRAND.compactLogo.length : BRAND.asciiLogo.length;
+  const accent = resolveInkColor(colorEnabled, COCKPIT_COLORS.primary);
+  const muted = resolveInkColor(colorEnabled, COCKPIT_COLORS.muted);
 
   return React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
     lines.map((line, index) => {
+      const key = setupLineKey(index, line);
       if (index < logoLineCount) {
-        return React.createElement(Text, { key: `logo-${index}`, bold: true, color: INK_COLORS.accent }, line);
+        return React.createElement(Text, { key, bold: true, color: accent }, line);
       }
       if (line === BRAND.name) {
-        return React.createElement(Text, { key: `line-${index}`, bold: true, color: INK_COLORS.accent }, line);
+        return React.createElement(Text, { key, bold: true, color: accent }, line);
       }
       if (line === BRAND.tagline) {
-        return React.createElement(Text, { key: `line-${index}`, color: INK_COLORS.muted }, line);
+        return React.createElement(Text, { key, color: muted }, line);
       }
       if (line === BRAND.splashHint || line.includes("Esc to exit") || line.includes("Press Enter")) {
-        return React.createElement(Text, { key: `line-${index}`, dimColor: true }, line);
-      }
-      if (line === "") {
-        return React.createElement(Text, { key: `line-${index}` }, "");
+        return React.createElement(Text, { key, dimColor: true }, line);
       }
-      return React.createElement(Text, { key: `line-${index}` }, line);
+      return React.createElement(Text, { key }, line);
     })
   );
 }
@@ -90,6 +75,12 @@ export function SetupApp({
   onComplete
 }) {
   const { exit } = useApp();
+  const { columns, rows, layoutMode } = useTerminalSize({
+    initialColumns: output.columns ?? 80,
+    initialRows: output.rows ?? 24
+  });
+  const caps = resolveTerminalCapabilities({ columns, rows, isTTY: true });
+  const colorEnabled = caps.color;
   const adapters = listAdapters();
   const detected = detectInstalledAdapters({ homeDir });
   const componentCatalog = describeComponentCatalog({ workspaceRoot });
@@ -98,7 +89,7 @@ export function SetupApp({
   const defaultAgents = detected.length > 0 ? detected : [...GLOBAL_AGENT_IDS];
 
   const [step, setStep] = useState(INITIAL_SETUP_STEP);
-  const useCompactSplash = shouldUseCompactSplashLogo(output.columns);
+  const useCompactSplash = shouldUseCompactSplashLogo(columns);
   const [activeIndex, setActiveIndex] = useState(0);
   const [selectedAgents, setSelectedAgents] = useState(defaultAgents);
   const [selectedComponents, setSelectedComponents] = useState([...DEFAULT_COMPONENT_IDS]);
@@ -238,42 +229,34 @@ export function SetupApp({
     }
   });
 
-  const detectPanel = formatInkDetectPanel({ adapters, detected });
-
   return React.createElement(Box, { flexDirection: "column" },
-    step === SETUP_STEPS.SPLASH && React.createElement(Splash, {
+    step === SETUP_STEPS.SPLASH && React.createElement(SetupSplash, {
       compact: useCompactSplash,
-      onboarding
+      onboarding,
+      colorEnabled
     }),
-    step !== SETUP_STEPS.SPLASH && React.createElement(Header),
-    step === SETUP_STEPS.DETECT && React.createElement(Panel, { title: WIZARD_COPY.detectTitle },
-      detectPanel.split("\n")
-        .map((line) => React.createElement(Text, { key: line }, line))
-    ),
-    step === SETUP_STEPS.AGENTS && React.createElement(Panel, { title: WIZARD_COPY.agentsPrompt },
-      formatInkSelectList({ options: agentOptions, selected: selectedAgents, activeIndex })
-        .map((line) => React.createElement(Text, { key: line }, line))
-    ),
-    step === SETUP_STEPS.COMPONENTS && React.createElement(Panel, { title: WIZARD_COPY.componentsPrompt },
-      formatInkSelectList({ options: componentOptions, selected: selectedComponents, activeIndex })
-        .map((line) => React.createElement(Text, { key: line }, line))
+    step === SETUP_STEPS.SPLASH && React.createElement(Text, { dimColor: true },
+      `${BRAND.splashHint} · Esc cancel`
     ),
-    step === SETUP_STEPS.PREVIEW && React.createElement(Panel, { title: WIZARD_COPY.previewTitle },
-      previewLoading && React.createElement(Text, { color: INK_COLORS.warning }, "Building preview…"),
-      previewError && React.createElement(Text, { color: INK_COLORS.danger }, previewError),
-      preview && formatInkPreviewLines({ preview, componentCatalog })
-        .map((line) => React.createElement(Text, { key: line }, line))
-    ),
-    step === SETUP_STEPS.CONFIRM && React.createElement(Panel, { title: "Confirm" },
-      React.createElement(Text, null, dryRun ? WIZARD_COPY.confirmDryRun : WIZARD_COPY.confirmApply)
-    ),
-    React.createElement(Footer, null,
-      step === SETUP_STEPS.SPLASH && `${BRAND.splashHint} · Esc cancel`,
-      step === SETUP_STEPS.DETECT && "Enter continue · Esc cancel",
-      step === SETUP_STEPS.AGENTS && "↑↓ move · Space toggle · Enter continue · Esc cancel",
-      step === SETUP_STEPS.COMPONENTS && "↑↓ move · Space toggle · Enter continue · Esc cancel",
-      step === SETUP_STEPS.PREVIEW && preview && !previewLoading && "Enter continue · Esc cancel",
-      step === SETUP_STEPS.CONFIRM && "Y apply · N cancel · Esc cancel"
-    )
+    step !== SETUP_STEPS.SPLASH && React.createElement(SetupHeader, { colorEnabled }),
+    step !== SETUP_STEPS.SPLASH && React.createElement(SemanticSetupPanel, {
+      step,
+      activeIndex,
+      agentOptions,
+      componentOptions,
+      componentCatalog,
+      selectedAgents,
+      selectedComponents,
+      adapters,
+      detected,
+      preview,
+      previewLoading,
+      previewError,
+      dryRun,
+      layoutMode,
+      colorEnabled,
+      unicode: caps.unicode,
+      columns
+    })
   );
 }

package/src/global/ink/setup-state.js

@@ -178,6 +178,22 @@ export function formatInkPreviewLines({ preview, componentCatalog }) {
   return lines;
 }
 
+/** Cap preview lines for the active layout; keep remaining-count when truncated. */
+export function setupPreviewLineLimit(layoutMode = "compact") {
+  if (layoutMode === "wide") return 12;
+  if (layoutMode === "minimal") return 5;
+  return 8;
+}
+
+export function windowSetupLines(lines = [], limit = 8) {
+  if (lines.length <= limit) return lines;
+  return [...lines.slice(0, limit), `… ${lines.length - limit} more`];
+}
+
+export function setupLineKey(index, line) {
+  return `${index}-${line}`;
+}
+
 export function formatInkSuccessLines(result, { dryRun = false, cliName = PREFERRED_CLI } = {}) {
   const agentLine = result.agents.map((id) => getAgentLabel(id)).join(", ");
   const componentLine = result.components.length > 0

package/src/global/ink/theme.js

@@ -73,6 +73,33 @@ export function statusColor(kind, { colorEnabled = true } = {}) {
   }
 }
 
+/** Ink `color` / `borderColor` prop — undefined when color is disabled. */
+export function resolveInkColor(colorEnabled, color) {
+  return colorEnabled ? color : undefined;
+}
+
+/**
+ * Detect ANSI color SGR in a string.
+ * Bold (1), dim (2), and reset (0) alone are not color.
+ */
+export function hasColorSgr(text) {
+  const re = /\u001b\[([0-9;]*)m/g;
+  let match;
+  while ((match = re.exec(String(text ?? ""))) !== null) {
+    const params = match[1].length === 0
+      ? []
+      : match[1].split(";").map((part) => Number(part));
+    for (let i = 0; i < params.length; i += 1) {
+      const code = params[i];
+      if (!Number.isFinite(code)) continue;
+      if (code === 38 || code === 48) return true;
+      if ((code >= 30 && code <= 37) || (code >= 90 && code <= 97)) return true;
+      if ((code >= 40 && code <= 47) || (code >= 100 && code <= 107)) return true;
+    }
+  }
+  return false;
+}
+
 export function formatStatusBadge(kind, label = STATUS_LABELS[kind] ?? String(kind)) {
   return label;
 }