@kal-elsam/kairo-runtime 0.8.0 → 0.10.0

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

@@ -13,19 +13,26 @@ import {
   isContentInteractiveView
 } from "./cockpit-controller.js";
 import {
-  COCKPIT_NAV,
   COCKPIT_REGIONS,
   buildFooterModel,
   buildNavModel,
-  buildSystemStripModel,
   buildTopBarModel,
   navIndexForView,
   resolveProjectName
 } from "./cockpit-models.js";
 import { buildControlCenterModel } from "./cockpit-control-center.js";
+import {
+  buildPaletteActions,
+  buildPaletteModel,
+  canOpenPalette,
+  PALETTE_KINDS,
+  resolvePaletteDestination
+} from "./cockpit-palette.js";
 import { resolveEnterNavIntent } from "./cockpit-enter.js";
 import { resolveRunsHubItem, RUNS_HUB_ITEMS } from "./cockpit-runs.js";
 import { selectReviewFromList } from "./cockpit-reviews.js";
+import { selectAlertFromList } from "./cockpit-alerts.js";
+import { ALERT_STATES } from "../runtime/alerts/alert-types.js";
 import { resolveProjectReadiness } from "../dashboard-guidance.js";
 import { CONTROL_PLANE_HEALTH } from "../control-plane-snapshot.js";
 import { CockpitShell } from "./cockpit/primitives.js";
@@ -38,6 +45,7 @@ import { COCKPIT_COLORS } from "./theme.js";
 import { LAYOUT_MODES } from "./layout.js";
 import { CHANGES_PHASE } from "./cockpit-changes.js";
 import { RECOVERY_PHASE, listRecoverySnapshots } from "./cockpit-recovery.js";
+import { SETTINGS_PHASE } from "./cockpit-settings.js";
 
 export function OrchestratorApp({
   homeDir,
@@ -76,7 +84,7 @@ export function OrchestratorApp({
   };
 
   const openDestination = (destinationKey) => {
-    const view = resolveCtaDestinationView(destinationKey);
+    const view = resolvePaletteDestination(destinationKey);
     if (!view) return false;
     dispatch({
       type: "set-view",
@@ -86,6 +94,15 @@ export function OrchestratorApp({
     return true;
   };
 
+  const confirming = data.changesAction?.phase === CHANGES_PHASE.CONFIRMING
+    || data.recoveryAction?.phase === RECOVERY_PHASE.CONFIRMING
+    || data.settingsAction?.phase === SETTINGS_PHASE.CONFIRMING;
+  const paletteActions = buildPaletteActions({
+    ctaDestination: data.snapshot?.cta?.destination ?? null,
+    ctaTitle: data.snapshot?.cta?.title ?? null,
+    ctaDetail: data.snapshot?.cta?.detail ?? null
+  });
+
   useInput((inputKey, key) => {
     if (data.loading) return;
 
@@ -104,6 +121,68 @@ export function OrchestratorApp({
 
     if (data.busy) return;
 
+    if (ui.paletteOpen) {
+      if (key.escape) {
+        dispatch({ type: "close-palette" });
+        return;
+      }
+      if (inputKey === "/") {
+        dispatch({ type: "toggle-palette" });
+        return;
+      }
+      if (key.upArrow || key.downArrow) {
+        dispatch({
+          type: "palette-arrow",
+          direction: key.upArrow ? "up" : "down",
+          listLength: paletteActions.length
+        });
+        return;
+      }
+      if (key.return) {
+        const selected = paletteActions[ui.paletteIndex] ?? null;
+        if (!selected) return;
+        if (selected.kind === PALETTE_KINDS.REFRESH) {
+          dispatch({ type: "run-palette", kind: selected.kind });
+          data.reload().catch(() => {});
+          return;
+        }
+        if (selected.kind === PALETTE_KINDS.SETUP) {
+          finish({ cancelled: false, action: "setup" });
+          return;
+        }
+        dispatch({
+          type: "run-palette",
+          kind: selected.kind,
+          view: selected.view
+        });
+      }
+      return;
+    }
+
+    if (inputKey === "/"
+      && canOpenPalette({ loading: data.loading, busy: data.busy, confirming })) {
+      dispatch({ type: "toggle-palette" });
+      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) {
@@ -115,6 +194,18 @@ export function OrchestratorApp({
         data.cancelRecovery();
         return;
       }
+      if (ui.view === ORCHESTRATOR_VIEWS.PROFILE) {
+        const settingsPhase = data.settingsAction?.phase;
+        if (settingsPhase === SETTINGS_PHASE.CONFIRMING) {
+          data.cancelSettings();
+          return;
+        }
+        if (settingsPhase === SETTINGS_PHASE.PREVIEW
+          || settingsPhase === SETTINGS_PHASE.COMPLETED) {
+          data.resetSettings();
+          return;
+        }
+      }
 
       if (ui.view === ORCHESTRATOR_VIEWS.LAUNCH && data.launchableAgents.length > 0) {
         const retreated = handleLaunchInput({
@@ -162,9 +253,15 @@ export function OrchestratorApp({
           ? (data.dashboard?.recentRuns ?? []).length
           : ui.view === ORCHESTRATOR_VIEWS.REVIEWS
             ? (data.reviews ?? []).length
-            : ui.view === ORCHESTRATOR_VIEWS.ACTIVITY
-              ? listRecoverySnapshots(data.snapshot).length
-              : 0;
+            : ui.view === ORCHESTRATOR_VIEWS.ALERTS
+              ? (Array.isArray(data.alerts) ? data.alerts : [])
+                .filter((alert) => alert.state === ALERT_STATES.OPEN).length
+              : ui.view === ORCHESTRATOR_VIEWS.ACTIVITY
+                ? listRecoverySnapshots(data.snapshot).length
+                : ui.view === ORCHESTRATOR_VIEWS.PROFILE
+                    && data.settingsAction?.phase === SETTINGS_PHASE.BROWSE
+                  ? data.curatedIntegrations.length
+                  : 0;
 
     let routed = null;
     if (key.tab) {
@@ -187,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;
         }
@@ -261,6 +362,19 @@ export function OrchestratorApp({
       return;
     }
 
+    if (ui.region === COCKPIT_REGIONS.CONTENT
+      && ui.view === ORCHESTRATOR_VIEWS.ALERTS) {
+      const selected = selectAlertFromList(data.alerts, ui.listIndex);
+      if (key.return) {
+        data.handleAlertTransition(selected, "resolve").catch(() => {});
+        return;
+      }
+      if (inputKey.toLowerCase() === "d") {
+        data.handleAlertTransition(selected, "dismiss").catch(() => {});
+        return;
+      }
+    }
+
     if (ui.view === ORCHESTRATOR_VIEWS.RUN_DETAIL) {
       if (inputKey.toLowerCase() === "c" && isRunCancellable(data.selectedRun)) {
         data.handleCancelRun();
@@ -317,6 +431,30 @@ export function OrchestratorApp({
       }
     }
 
+    if (ui.view === ORCHESTRATOR_VIEWS.PROFILE) {
+      const keyName = inputKey.toLowerCase();
+      const phase = data.settingsAction?.phase ?? SETTINGS_PHASE.BROWSE;
+      if (key.return && ui.region === COCKPIT_REGIONS.CONTENT) {
+        if (phase === SETTINGS_PHASE.BROWSE) {
+          const entry = data.curatedIntegrations[ui.listIndex];
+          if (entry?.id) data.previewSettings(entry.id);
+          return;
+        }
+        if (phase === SETTINGS_PHASE.PREVIEW) {
+          data.promptConfirmSettings();
+          return;
+        }
+      }
+      if (keyName === "y" && phase === SETTINGS_PHASE.CONFIRMING) {
+        data.confirmSettings();
+        return;
+      }
+      if (keyName === "n" && phase === SETTINGS_PHASE.CONFIRMING) {
+        data.cancelSettings();
+        return;
+      }
+    }
+
     if (inputKey.toLowerCase() === "r" && ui.view !== ORCHESTRATOR_VIEWS.LAUNCH) {
       if (ui.view === ORCHESTRATOR_VIEWS.REVIEWS || ui.view === ORCHESTRATOR_VIEWS.REVIEW_DETAIL) {
         data.loadReviews().catch(() => {});
@@ -354,7 +492,9 @@ export function OrchestratorApp({
   const controlCenter = buildControlCenterModel({
     projectName,
     snapshot: data.snapshot,
-    layoutMode: mode
+    dashboard: data.dashboard,
+    layoutMode: mode,
+    alerts: data.alerts
   });
   const systemOnline = data.snapshot
     ? data.snapshot.health !== CONTROL_PLANE_HEALTH.NOT_CONFIGURED
@@ -376,12 +516,17 @@ export function OrchestratorApp({
         region: ui.region,
         navIndex: ui.navIndex,
         helpOpen: ui.helpOpen,
+        paletteOpen: ui.paletteOpen,
         canCancel: isRunCancellable(data.selectedRun),
         unicode,
         changesPhase: data.changesAction?.phase ?? null,
-        recoveryPhase: data.recoveryAction?.phase ?? null
+        recoveryPhase: data.recoveryAction?.phase ?? null,
+        recoveryHasPreview: Boolean(data.recoveryAction?.preview),
+        settingsPhase: data.settingsAction?.phase ?? null,
+        columns
       }),
       layoutMode: mode,
+      columns,
       nav: buildNavModel({
         navIndex: ui.navIndex,
         currentView: ui.view,
@@ -391,24 +536,8 @@ export function OrchestratorApp({
         diagnostics: data.diagnostics,
         snapshot: data.snapshot
       }),
-      system: buildSystemStripModel({
-        dashboard: data.dashboard,
-        diagnostics: data.diagnostics,
-        readiness: data.snapshot
-          ? {
-            kind: data.snapshot.health.toLowerCase(),
-            label: controlCenter.health.label,
-            healthKind: data.snapshot.health === CONTROL_PLANE_HEALTH.HEALTHY
-              ? "ready"
-              : data.snapshot.health === CONTROL_PLANE_HEALTH.CHECK_FAILED
-                ? "error"
-                : "warn"
-          }
-          : readiness
-      }),
       navFocused: ui.region === COCKPIT_REGIONS.NAV,
       contentFocused: ui.region === COCKPIT_REGIONS.CONTENT,
-      systemFocused: ui.region === COCKPIT_REGIONS.SYSTEM,
       colorEnabled
     },
       renderCockpitView({
@@ -426,33 +555,27 @@ export function OrchestratorApp({
         selectedEvents: data.selectedEvents,
         reviews: data.reviews,
         selectedReview: data.selectedReview,
+        alerts: data.alerts,
         changesAction: data.changesAction,
         recoveryAction: data.recoveryAction,
+        settingsAction: data.settingsAction,
         controlCenter,
+        palette: ui.paletteOpen
+          ? buildPaletteModel({
+            actions: paletteActions,
+            index: ui.paletteIndex,
+            unicode
+          })
+          : null,
         layoutMode: mode,
-        colorEnabled
+        colorEnabled,
+        unicode,
+        overviewDetailsOpen: ui.overviewDetailsOpen,
+        governanceDetailsOpen: ui.governanceDetailsOpen,
+        activityDetailsOpen: ui.activityDetailsOpen,
+        contentFocused: ui.region === COCKPIT_REGIONS.CONTENT,
+        homeDir
       })
     )
   );
 }
-
-function resolveCtaDestinationView(destinationKey) {
-  switch (destinationKey) {
-    case "changes":
-      return ORCHESTRATOR_VIEWS.CHANGES;
-    case "control-center":
-      return ORCHESTRATOR_VIEWS.HOME;
-    case "ides":
-      return ORCHESTRATOR_VIEWS.IDES;
-    case "modules":
-      return ORCHESTRATOR_VIEWS.MODULES;
-    case "activity":
-      return ORCHESTRATOR_VIEWS.ACTIVITY;
-    case "profile":
-      return ORCHESTRATOR_VIEWS.PROFILE;
-    case "runs":
-      return ORCHESTRATOR_VIEWS.RUNS;
-    default:
-      return null;
-  }
-}

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

@@ -1,6 +1,7 @@
 import { stdin as input, stdout as output } from "node:process";
 import { canUseSetupInk } from "./terminal.js";
 import { isActiveRunState, formatTaskLabel } from "../runtime/run-types.js";
+import { formatConfirmPath } from "./cockpit-path-label.js";
 
 export function canUseOrchestratorShell({
   interactive = Boolean(input.isTTY && output.isTTY),
@@ -27,7 +28,9 @@ export const ORCHESTRATOR_VIEWS = {
   PROVIDERS: "providers",
   LAUNCH: "launch",
   DIAGNOSTICS: "diagnostics",
-  HELP: "help"
+  HELP: "help",
+  USAGE: "usage",
+  ALERTS: "alerts"
 };
 
 export const ORCHESTRATOR_MENU = [
@@ -175,8 +178,9 @@ export function formatRunLines(runs, {
     const agent = humanizeToken(run.agentId);
     const state = humanizeRunState(run.state);
     const task = formatTaskLabel(run);
+    const strategy = run.strategy ? ` · ${run.strategy}` : "";
     if (readable) {
-      return `${agent} · ${state} · ${task}`;
+      return `${agent} · ${state}${strategy} · ${task}`;
     }
     const statePad = run.state.padEnd(12);
     const agentPad = run.agentId.padEnd(10);
@@ -270,23 +274,29 @@ export function formatAgentStatusLines(capabilities) {
   });
 }
 
-export function formatRunDetailLines(run, events = []) {
+export function formatRunDetailLines(run, events = [], { homeDir = null } = {}) {
   if (!run) return ["Run not found."];
 
   const lines = [
-    `Run: ${run.runId}`,
-    `Agent: ${run.agentId} (${run.provider})`,
-    `State: ${run.state}`,
-    `Model: ${run.model ?? "default"}`,
-    `Cwd: ${run.cwd}`,
-    `Started: ${run.startedAt}`,
-    `Updated: ${run.updatedAt}`
+    "SUMMARY",
+    `${humanizeToken(run.agentId)} · ${humanizeRunState(run.state)}${run.strategy ? ` · ${run.strategy}` : ""}`,
+    `Model · ${run.model ?? "default"}`,
+    `Started · ${run.startedAt ?? "n/a"}`
   ];
+  if (run.completedAt) lines.push(`Completed · ${run.completedAt}`);
+  if (run.tokenUsage && typeof run.tokenUsage === "object") {
+    const parts = [];
+    if (Number.isFinite(run.tokenUsage.input)) parts.push(`in ${run.tokenUsage.input}`);
+    if (Number.isFinite(run.tokenUsage.output)) parts.push(`out ${run.tokenUsage.output}`);
+    if (Number.isFinite(run.tokenUsage.total)) parts.push(`total ${run.tokenUsage.total}`);
+    if (parts.length > 0) lines.push(`Tokens · ${parts.join(" · ")}`);
+  }
+  if (run.error) lines.push(`Error · ${run.error}`);
 
-  if (run.completedAt) lines.push(`Completed: ${run.completedAt}`);
-  if (run.tokenUsage) lines.push(`Tokens: ${JSON.stringify(run.tokenUsage)}`);
-  if (run.error) lines.push(`Error: ${run.error}`);
-  if (run.tools?.length) lines.push(`Tools: ${run.tools.join(", ")}`);
+  lines.push("", "DETAILS");
+  lines.push(`Run id · ${run.runId}`);
+  if (run.cwd) lines.push(`Cwd · ${formatConfirmPath(run.cwd, homeDir)}`);
+  if (run.tools?.length) lines.push(`Tools · ${run.tools.join(", ")}`);
 
   if (events.length > 0) {
     lines.push("", "Recent events");

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