@kal-elsam/kairo-runtime 0.8.0 → 0.10.0

package/src/global/ink/ux/live-orchestration.js

@@ -0,0 +1,188 @@
+/**
+ * Live semantic Orchestration lists (Hub / Active / History / Reviews).
+ * ActionList owns the only focus mark; windowSlice keeps full domain navigable.
+ * Enter destinations unchanged — adapter exposes focused identity for listIndex.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { COCKPIT_COLORS } from "../theme.js";
+import { LAYOUT_MODES } from "../layout.js";
+import { ORCHESTRATOR_VIEWS, formatRunLines } from "../orchestrator-state.js";
+import {
+  RUNS_HUB_ITEMS, formatOrchestrationStatus, formatRunsHubLines
+} from "../cockpit-runs.js";
+import { formatReviewListLines } from "../cockpit-reviews.js";
+import { ActionList, Callout } from "./semantic.js";
+import { windowSlice } from "./live-activity.js";
+
+export function orchestrationListLimit(layoutMode = LAYOUT_MODES.COMPACT) {
+  return layoutMode === LAYOUT_MODES.WIDE ? 8 : 3;
+}
+
+function emptyPack(label) {
+  return {
+    items: [{ id: "empty", label }],
+    selectedIndex: -1,
+    focusedId: null,
+    total: 0,
+    start: 0,
+    isEmpty: true
+  };
+}
+
+function windowDomain(domain, listIndex, limit, toItem, emptyLabel) {
+  const windowed = windowSlice(domain, listIndex, limit);
+  if (windowed.items.length === 0) return emptyPack(emptyLabel);
+  const safe = Math.min(Math.max(0, listIndex), domain.length - 1);
+  return {
+    items: windowed.items.map((entry, i) => toItem(entry, windowed.start + i)),
+    selectedIndex: windowed.selectedIndex,
+    focusedId: toItem(domain[safe], safe).id,
+    total: domain.length,
+    start: windowed.start,
+    isEmpty: false
+  };
+}
+
+function hubPack(listIndex) {
+  const labels = formatRunsHubLines(RUNS_HUB_ITEMS);
+  const items = RUNS_HUB_ITEMS.map((item, i) => ({
+    id: item.id,
+    label: labels[i] ?? item.label
+  }));
+  const safe = Math.min(Math.max(0, listIndex), items.length - 1);
+  return {
+    items,
+    selectedIndex: safe,
+    focusedId: items[safe]?.id ?? null,
+    total: items.length,
+    start: 0,
+    isEmpty: false
+  };
+}
+
+function runPack(runs, listIndex, limit, emptyLabel) {
+  return windowDomain(runs, listIndex, limit, (run, absoluteIndex) => ({
+    id: run.runId ?? `run-${absoluteIndex}`,
+    label: formatRunLines([run], { readable: true })[0]
+  }), emptyLabel);
+}
+
+function reviewPack(reviews, listIndex, limit) {
+  const empty = "No review receipts yet. Run kairo review --agent codex|pi.";
+  return windowDomain(reviews, listIndex, limit, (receipt, absoluteIndex) => ({
+    id: receipt.reviewId ?? `review-${absoluteIndex}`,
+    label: formatReviewListLines([receipt])[0]
+  }), empty);
+}
+
+/** Pure adapter: Hub · Active · History · Reviews. */
+export function adaptOrchestrationModel({
+  view = ORCHESTRATOR_VIEWS.RUNS,
+  dashboard = null,
+  reviews = [],
+  listIndex = 0,
+  layoutMode = LAYOUT_MODES.COMPACT
+} = {}) {
+  const limit = orchestrationListLimit(layoutMode);
+  const active = dashboard?.activeRuns ?? [];
+  const recent = dashboard?.recentRuns ?? [];
+  const reviewList = Array.isArray(reviews) ? reviews : [];
+  const status = formatOrchestrationStatus({
+    active: active.length, recent: recent.length, reviews: reviewList.length
+  });
+
+  let title = "Orchestration";
+  let callout = { tone: active.length > 0 ? "warn" : "info", title: status, body: "" };
+  let list = hubPack(listIndex);
+
+  if (view === ORCHESTRATOR_VIEWS.RUNS) {
+    callout = {
+      tone: active.length > 0 ? "warn" : "info",
+      title: status,
+      body: "Choose Active runs, History, Reviews, or New run."
+    };
+    list = hubPack(listIndex);
+  } else if (view === ORCHESTRATOR_VIEWS.ACTIVE_RUNS) {
+    title = "Active runs";
+    list = runPack(
+      active, listIndex, limit,
+      "No runs executing. Governance first — launch only after setup/repairs."
+    );
+    callout = {
+      tone: list.isEmpty ? "info" : "warn",
+      title: list.isEmpty ? "None active" : `${list.total} active`,
+      body: list.isEmpty
+        ? "Esc back to Orchestration"
+        : "Enter opens detail"
+    };
+  } else if (view === ORCHESTRATOR_VIEWS.RECENT_RUNS) {
+    title = "Run history";
+    list = runPack(recent, listIndex, limit, "No completed runs yet.");
+    callout = {
+      tone: "info",
+      title: list.isEmpty ? "None completed" : `${list.total} completed`,
+      body: list.isEmpty
+        ? "Esc back to Orchestration"
+        : "Enter opens detail"
+    };
+  } else if (view === ORCHESTRATOR_VIEWS.REVIEWS) {
+    title = "Reviews";
+    list = reviewPack(reviewList, listIndex, limit);
+    callout = {
+      tone: "info",
+      title: list.isEmpty ? "None yet" : `${list.total} receipts`,
+      body: list.isEmpty
+        ? "Launch via kairo review --agent codex|pi."
+        : "Read-only · Enter opens detail"
+    };
+  }
+
+  return {
+    title,
+    view,
+    callout,
+    items: list.items,
+    selectedIndex: list.selectedIndex,
+    focusedId: list.focusedId,
+    total: list.total,
+    start: list.start,
+    isEmpty: list.isEmpty,
+    listLimit: limit
+  };
+}
+
+export function SemanticOrchestrationPanel({
+  view = ORCHESTRATOR_VIEWS.RUNS,
+  dashboard = null,
+  reviews = [],
+  listIndex = 0,
+  layoutMode = LAYOUT_MODES.COMPACT,
+  contentFocused = false,
+  colorEnabled = true,
+  unicode = true
+}) {
+  const model = adaptOrchestrationModel({
+    view, dashboard, reviews, listIndex, layoutMode
+  });
+  const listFocused = contentFocused && !model.isEmpty;
+  return React.createElement(Box, { flexDirection: "column" },
+    React.createElement(Text, {
+      bold: true, color: colorEnabled ? COCKPIT_COLORS.secondary : undefined
+    }, model.title),
+    React.createElement(Callout, {
+      tone: model.callout.tone,
+      title: model.callout.title,
+      body: model.callout.body || undefined,
+      colorEnabled,
+      compact: true
+    }),
+    React.createElement(ActionList, {
+      items: model.items,
+      selectedIndex: model.selectedIndex,
+      focused: listFocused,
+      colorEnabled,
+      unicode
+    })
+  );
+}

package/src/global/ink/ux/live-overview.js

@@ -0,0 +1,125 @@
+/**
+ * Live semantic Overview for Cockpit HOME.
+ * Nav owns the sole focus mark — this panel never renders `>`.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { CONTROL_PLANE_HEALTH } from "../../control-plane-snapshot.js";
+import { COCKPIT_COLORS } from "../theme.js";
+import { ActionList, Callout, Details } from "./semantic.js";
+
+const DESTINATION_LABELS = {
+  setup: "Setup",
+  changes: "Governance",
+  ides: "Agents",
+  runs: "Orchestration",
+  "control-center": "Overview",
+  activity: "Activity",
+  usage: "Usage",
+  profile: "Settings"
+};
+
+export function mapHealthTone(kind) {
+  switch (kind) {
+    case CONTROL_PLANE_HEALTH.CHECK_FAILED:
+      return "danger";
+    case CONTROL_PLANE_HEALTH.ACTION_REQUIRED:
+    case CONTROL_PLANE_HEALTH.NOT_CONFIGURED:
+    case CONTROL_PLANE_HEALTH.HEALTHY_WITH_NOTES:
+      return "warn";
+    case CONTROL_PLANE_HEALTH.HEALTHY:
+      return "ready";
+    default:
+      return "warn";
+  }
+}
+
+function humanizeDestination(destination) {
+  if (!destination) return null;
+  return DESTINATION_LABELS[destination] ?? null;
+}
+
+/** Safe Details lines only — never invent paths/IDs; honest empty when none. */
+export function buildOverviewDetails(model = {}) {
+  const lines = [];
+  const next = model.nextAction ?? model.cta ?? {};
+  const dest = humanizeDestination(next.destination);
+  if (dest) lines.push(`Next destination · ${dest}`);
+  if (typeof model.alerts?.count === "number") {
+    lines.push(`Open alerts · ${model.alerts.count}`);
+  }
+  if (lines.length === 0) return ["No extra evidence beyond the metrics above."];
+  return lines;
+}
+
+/**
+ * Pure adapter: buildControlCenterModel → semantic overview props.
+ * Callout / CTA / metrics never include paths or IDs.
+ */
+export function adaptControlCenterToOverview(model = {}) {
+  const status = model.status ?? model.health ?? {};
+  const next = model.nextAction ?? model.cta ?? {};
+  return {
+    title: model.title ?? "Overview",
+    callout: {
+      tone: mapHealthTone(status.kind),
+      title: status.label ?? "Unknown",
+      body: status.summaryLine ?? ""
+    },
+    primary: {
+      label: next.actionTitle ?? "Review control plane",
+      detail: next.actionDetail || null,
+      hint: next.enterHint ?? null
+    },
+    metrics: [
+      { id: "activity", label: `Activity · ${model.activity?.headline ?? "Idle"}` },
+      { id: "alerts", label: `Alerts · ${model.alerts?.headline ?? "Alert data unavailable"}` },
+      { id: "tokens", label: `Tokens · ${model.tokens?.headline ?? "Data unavailable"}` }
+    ],
+    details: buildOverviewDetails(model)
+  };
+}
+
+export function SemanticOverviewPanel({
+  model,
+  detailsOpen = false,
+  colorEnabled = true,
+  unicode = true
+}) {
+  const view = adaptControlCenterToOverview(model);
+  return React.createElement(Box, { flexDirection: "column" },
+    React.createElement(Text, {
+      bold: true,
+      color: colorEnabled ? COCKPIT_COLORS.secondary : undefined
+    }, view.title),
+    React.createElement(Callout, {
+      tone: view.callout.tone,
+      title: view.callout.title,
+      body: view.callout.body,
+      colorEnabled,
+      compact: true
+    }),
+    React.createElement(Text, { bold: true }, `  ${view.primary.label}`),
+    view.primary.detail
+      ? React.createElement(Text, null, view.primary.detail)
+      : null,
+    view.primary.hint
+      ? React.createElement(Text, { color: colorEnabled ? COCKPIT_COLORS.muted : undefined }, view.primary.hint)
+      : null,
+    React.createElement(ActionList, {
+      items: view.metrics,
+      selectedIndex: -1,
+      focused: false,
+      colorEnabled,
+      unicode
+    }),
+    React.createElement(Details, {
+      open: detailsOpen,
+      summary: "Details",
+      lines: view.details,
+      colorEnabled,
+      focused: false,
+      mark: " "
+    })
+  );
+}

package/src/global/ink/ux/live-settings.js

@@ -0,0 +1,189 @@
+/**
+ * Live semantic Settings. Browse → preview → confirm → receipt (no filesystem install).
+ * Ownership: ActionList=browse focus · Callout=status · Confirm=intent · footer/KeyBar=keys · Receipt=result.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { COCKPIT_COLORS } from "../theme.js";
+import { LAYOUT_MODES } from "../layout.js";
+import {
+  SETTINGS_PHASE, getCuratedIntegration, listCuratedIntegrations
+} from "../cockpit-settings.js";
+import { ActionList, Callout, Confirm, Details, Receipt } from "./semantic.js";
+import { windowSlice } from "./live-activity.js";
+
+export function settingsListLimit(layoutMode = LAYOUT_MODES.COMPACT) {
+  return layoutMode === LAYOUT_MODES.WIDE ? 8 : 3;
+}
+
+/** Key ownership lives in shell KeyBar/footer — Confirm never owns Y/N/Esc. */
+export function settingsKeyHints(phase = SETTINGS_PHASE.BROWSE) {
+  if (phase === SETTINGS_PHASE.PREVIEW) {
+    return [{ keys: "Enter", label: "Confirm" }, { keys: "Esc", label: "Back" }];
+  }
+  if (phase === SETTINGS_PHASE.CONFIRMING) {
+    return [
+      { keys: "Y", label: "Confirm" }, { keys: "N", label: "Cancel" },
+      { keys: "Esc", label: "Cancel" }
+    ];
+  }
+  if (phase === SETTINGS_PHASE.COMPLETED) {
+    return [{ keys: "Esc", label: "Back" }, { keys: "/", label: "Actions" }];
+  }
+  return [
+    { keys: "↑↓", label: "Select" }, { keys: "Enter", label: "Preview" },
+    { keys: "Esc", label: "Nav" }, { keys: "/", label: "Actions" }
+  ];
+}
+
+function entryLabel(entry) {
+  return `${entry.status} · ${entry.name} · ${entry.version} · ${entry.license}`;
+}
+
+function resolveEntry(integrations, selectedId) {
+  if (!selectedId) return null;
+  return integrations.find((e) => e.id === selectedId) ?? getCuratedIntegration(selectedId);
+}
+
+function phaseTone(phase) {
+  if (phase === SETTINGS_PHASE.COMPLETED) return "ready";
+  if (phase === SETTINGS_PHASE.CONFIRMING || phase === SETTINGS_PHASE.PREVIEW) return "warn";
+  return "info";
+}
+
+function phaseTitle(phase, total) {
+  if (phase === SETTINGS_PHASE.PREVIEW) return "Preview integration";
+  if (phase === SETTINGS_PHASE.CONFIRMING) return "Confirm intent";
+  if (phase === SETTINGS_PHASE.COMPLETED) return "Intent recorded";
+  return total === 0 ? "No curated integrations" : `${total} curated integration${total === 1 ? "" : "s"}`;
+}
+
+function buildDetailsLines(entry) {
+  if (!entry) return ["Integration not found."];
+  return [
+    `License · ${entry.license}`, `Audit · ${entry.audit}`,
+    `Capabilities · ${entry.capabilities?.join(" · ") || "none"}`,
+    `Permissions · ${entry.permissions?.join(" · ") || "none"}`,
+    entry.summary, entry.notes
+  ].filter(Boolean);
+}
+
+function receiptLines(receipt, entry) {
+  if (!receipt) return [];
+  return [
+    `Id · ${receipt.id} · wroteFiles · ${receipt.wroteFiles}`,
+    `Confirmed · ${receipt.confirmedAt}`,
+    entry ? `${entry.name} · ${entry.version} · ${entry.license}` : null,
+    "Confirm records intent — does not install packages."
+  ].filter(Boolean);
+}
+
+/** Browse-only: profile · apply · preflight · sources. */
+function profilePolicyItems(snapshot = null, diagnostics = null) {
+  const p = snapshot?.policy, s = diagnostics?.profile?.sources;
+  const src = [s?.global && "global", s?.project && "project"].filter(Boolean).join(", ") || "none";
+  return [
+    { id: "policy", label: `Policy · ${p?.profile ?? "none"} · apply ${p?.applyMode ?? "n/a"}` },
+    { id: "preflight", label: `Preflight · ${p?.preflight ?? "n/a"} · sources · ${src}` }
+  ];
+}
+
+/** Pure adapter: browse window · preview Details · confirm intent · receipt first. */
+export function adaptSettingsModel({
+  integrations = listCuratedIntegrations(), listIndex = 0, settingsAction = null,
+  layoutMode = LAYOUT_MODES.COMPACT, snapshot = null, diagnostics = null
+} = {}) {
+  const phase = settingsAction?.phase ?? SETTINGS_PHASE.BROWSE;
+  const catalog = Array.isArray(integrations) ? integrations : [];
+  const limit = settingsListLimit(layoutMode);
+  const windowed = windowSlice(catalog, listIndex, limit);
+  const browsing = phase === SETTINGS_PHASE.BROWSE;
+  const safe = catalog.length > 0
+    ? Math.min(Math.max(0, listIndex), catalog.length - 1) : -1;
+  const focused = browsing && safe >= 0 ? catalog[safe] : null;
+  const entry = resolveEntry(catalog, settingsAction?.selectedId)
+    ?? (browsing ? focused : null);
+  const detailing = phase === SETTINGS_PHASE.PREVIEW || phase === SETTINGS_PHASE.CONFIRMING;
+  const items = catalog.length === 0
+    ? [{ id: "empty", label: "No curated integrations available." }]
+    : windowed.items.map((item, i) => ({
+      id: item.id ?? `integration-${windowed.start + i}`,
+      label: entryLabel(item)
+    }));
+
+  return {
+    title: "Settings",
+    phase,
+    callout: {
+      tone: phaseTone(phase),
+      title: phaseTitle(phase, catalog.length),
+      body: browsing
+        ? "Browse → preview → confirm. Confirm records intent — does not install packages."
+        : (phase === SETTINGS_PHASE.PREVIEW ? "No filesystem changes. Enter opens confirm." : "")
+    },
+    items,
+    selectedIndex: browsing && catalog.length > 0 ? windowed.selectedIndex : -1,
+    focusedId: focused?.id ?? null,
+    total: catalog.length,
+    start: windowed.start,
+    listLimit: limit,
+    listFocused: browsing && catalog.length > 0,
+    entry,
+    details: detailing ? buildDetailsLines(entry) : [],
+    detailsOpen: detailing,
+    confirm: phase === SETTINGS_PHASE.CONFIRMING
+      ? {
+        summary: entry
+          ? `Record install intent for ${entry.name}. Does not install packages.`
+          : "Record install intent. Does not install packages.",
+        primaryLabel: "Confirm intent"
+      }
+      : null,
+    receipt: phase === SETTINGS_PHASE.COMPLETED && settingsAction?.receipt
+      ? { title: "Receipt", lines: receiptLines(settingsAction.receipt, entry) }
+      : null,
+    profilePolicy: browsing ? profilePolicyItems(snapshot, diagnostics) : [],
+    keyHints: settingsKeyHints(phase)
+  };
+}
+
+export function SemanticSettingsPanel({
+  integrations = listCuratedIntegrations(), listIndex = 0, settingsAction = null,
+  layoutMode = LAYOUT_MODES.COMPACT, contentFocused = false, colorEnabled = true, unicode = true,
+  snapshot = null, diagnostics = null
+}) {
+  const model = adaptSettingsModel({
+    integrations, listIndex, settingsAction, layoutMode, snapshot, diagnostics
+  });
+  const listFocused = contentFocused && model.listFocused;
+  return React.createElement(Box, { flexDirection: "column" },
+    model.receipt && React.createElement(Receipt, {
+      title: model.receipt.title, lines: model.receipt.lines, colorEnabled
+    }),
+    React.createElement(Text, {
+      bold: true, color: colorEnabled ? COCKPIT_COLORS.secondary : undefined
+    }, model.title),
+    React.createElement(Callout, {
+      tone: model.callout.tone, title: model.callout.title,
+      body: model.callout.body || undefined, colorEnabled, compact: true
+    }),
+    model.confirm && React.createElement(Confirm, {
+      summary: model.confirm.summary, primaryLabel: model.confirm.primaryLabel,
+      focused: false, colorEnabled, mark: " "
+    }),
+    model.phase === SETTINGS_PHASE.BROWSE && React.createElement(ActionList, {
+      items: model.items, selectedIndex: model.selectedIndex,
+      focused: listFocused, colorEnabled, unicode
+    }),
+    model.profilePolicy.length > 0 && React.createElement(Box, { flexDirection: "column" },
+      React.createElement(Text, { bold: true }, "Profile & Policy"),
+      React.createElement(ActionList, {
+        items: model.profilePolicy, selectedIndex: -1, focused: false, colorEnabled, unicode
+      })
+    ),
+    model.detailsOpen && React.createElement(Details, {
+      open: true, summary: "Details", lines: model.details,
+      colorEnabled, focused: false, mark: " "
+    })
+  );
+}

package/src/global/ink/ux/live-setup.js

@@ -0,0 +1,160 @@
+/**
+ * Live semantic Setup. Splash stays separate.
+ * Ownership: Callout=status · list/Confirm=decision · KeyBar=keys.
+ * Focus mark only on ActionList (Enter/Space executable); Confirm is Y/N/Esc via KeyBar.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { AGENT_HINTS, WIZARD_COPY, getAgentLabel } from "../../brand/index.js";
+import { LAYOUT_MODES } from "../layout.js";
+import { COCKPIT_COLORS } from "../theme.js";
+import {
+  SETUP_STEPS, formatInkPreviewLines, setupPreviewLineLimit, windowSetupLines
+} from "../setup-state.js";
+import { ActionList, Callout, Confirm, KeyBar, Stepper } from "./semantic.js";
+
+export const SETUP_STEPPER_STEPS = [
+  { id: SETUP_STEPS.DETECT, label: "Detect" },
+  { id: SETUP_STEPS.AGENTS, label: "Agents" },
+  { id: SETUP_STEPS.COMPONENTS, label: "Components" },
+  { id: SETUP_STEPS.PREVIEW, label: "Preview" },
+  { id: SETUP_STEPS.CONFIRM, label: "Confirm" }
+];
+
+export function setupStepperIndex(step) {
+  return SETUP_STEPPER_STEPS.findIndex((entry) => entry.id === step);
+}
+
+export function setupKeyHints(step, { previewReady = false, dryRun = false } = {}) {
+  if (step === SETUP_STEPS.AGENTS || step === SETUP_STEPS.COMPONENTS) {
+    return [
+      { keys: "↑↓", label: "Move" }, { keys: "Space", label: "Toggle" },
+      { keys: "Enter", label: "Continue" }, { keys: "Esc", label: "Cancel" }
+    ];
+  }
+  if (step === SETUP_STEPS.CONFIRM) {
+    return [
+      { keys: "Y", label: dryRun ? "Continue" : "Apply" },
+      { keys: "N", label: "Cancel" },
+      { keys: "Esc", label: "Cancel" }
+    ];
+  }
+  if (step === SETUP_STEPS.PREVIEW && !previewReady) return [{ keys: "Esc", label: "Cancel" }];
+  if (step === SETUP_STEPS.DETECT || step === SETUP_STEPS.PREVIEW) {
+    return [{ keys: "Enter", label: "Continue" }, { keys: "Esc", label: "Cancel" }];
+  }
+  return [{ keys: "Esc", label: "Cancel" }];
+}
+
+function buildCallout(step, { adapters = [], detected = [], previewLoading = false, previewError = null } = {}) {
+  if (step === SETUP_STEPS.DETECT) {
+    return {
+      tone: "info", title: WIZARD_COPY.detectTitle,
+      body: `Your agents · ${detected.length}/${adapters.length} roots found`
+    };
+  }
+  if (step === SETUP_STEPS.AGENTS) {
+    return { tone: "info", title: "Agents", body: WIZARD_COPY.agentsPrompt };
+  }
+  if (step === SETUP_STEPS.COMPONENTS) {
+    return { tone: "info", title: "Components", body: WIZARD_COPY.componentsPrompt };
+  }
+  if (step === SETUP_STEPS.PREVIEW) {
+    if (previewLoading) return { tone: "warn", title: WIZARD_COPY.previewTitle, body: "Building preview…" };
+    if (previewError) return { tone: "danger", title: WIZARD_COPY.previewTitle, body: String(previewError) };
+    return { tone: "info", title: WIZARD_COPY.previewTitle, body: "" };
+  }
+  if (step === SETUP_STEPS.CONFIRM) return { tone: "warn", title: "Confirm", body: "" };
+  return { tone: "info", title: "Setup", body: "" };
+}
+
+function buildListItems(step, {
+  agentOptions, componentOptions, selectedAgents, selectedComponents, adapters, detected
+}) {
+  if (step === SETUP_STEPS.AGENTS || step === SETUP_STEPS.COMPONENTS) {
+    const options = step === SETUP_STEPS.AGENTS ? agentOptions : componentOptions;
+    const selected = step === SETUP_STEPS.AGENTS ? selectedAgents : selectedComponents;
+    return options.map((option) => ({
+      id: option.id,
+      label: `${selected.includes(option.id) ? "[x]" : "[ ]"} ${option.label}`,
+      hint: option.hint
+    }));
+  }
+  if (step !== SETUP_STEPS.DETECT) return [];
+  return adapters.map((adapter) => ({
+    id: adapter.id,
+    label: `${getAgentLabel(adapter.id)} · ${
+      detected.includes(adapter.id) ? AGENT_HINTS.ready : AGENT_HINTS.notDetected
+    }`
+  }));
+}
+
+/** Pure adapter for Detect→Agents→Components→Preview→Confirm (no splash). */
+export function adaptSetupModel({
+  step = SETUP_STEPS.DETECT, activeIndex = 0, agentOptions = [], componentOptions = [],
+  componentCatalog = [], selectedAgents = [], selectedComponents = [], adapters = [],
+  detected = [], preview = null, previewLoading = false, previewError = null,
+  dryRun = false, layoutMode = LAYOUT_MODES.COMPACT
+} = {}) {
+  const listFocused = step === SETUP_STEPS.AGENTS || step === SETUP_STEPS.COMPONENTS;
+  const previewReady = Boolean(preview) && !previewLoading && !previewError;
+  const catalog = componentCatalog.length > 0 ? componentCatalog : componentOptions;
+  return {
+    steps: SETUP_STEPPER_STEPS,
+    stepIndex: Math.max(0, setupStepperIndex(step)),
+    callout: buildCallout(step, { adapters, detected, previewLoading, previewError }),
+    listItems: buildListItems(step, {
+      agentOptions, componentOptions, selectedAgents, selectedComponents, adapters, detected
+    }),
+    listSelectedIndex: listFocused ? activeIndex : -1,
+    listFocused,
+    previewLines: previewReady
+      ? windowSetupLines(
+        formatInkPreviewLines({ preview, componentCatalog: catalog }),
+        setupPreviewLineLimit(layoutMode)
+      )
+      : [],
+    confirm: step === SETUP_STEPS.CONFIRM
+      ? {
+        summary: dryRun ? WIZARD_COPY.confirmDryRun : WIZARD_COPY.confirmApply,
+        primaryLabel: dryRun ? "Continue dry run" : "Apply plan"
+      }
+      : null,
+    keyHints: setupKeyHints(step, { previewReady, dryRun }),
+    // Confirm is Y/N/Esc only — no focus mark (Enter is not executable here).
+    focusSurface: listFocused ? "list" : "none"
+  };
+}
+
+export function SemanticSetupPanel(props) {
+  const {
+    colorEnabled = true, unicode = true, columns = 80, layoutMode = LAYOUT_MODES.COMPACT, ...rest
+  } = props;
+  const view = adaptSetupModel({ ...rest, layoutMode });
+  const muted = colorEnabled ? COCKPIT_COLORS.muted : undefined;
+  return React.createElement(Box, { flexDirection: "column" },
+    React.createElement(Stepper, {
+      steps: view.steps, currentIndex: view.stepIndex, colorEnabled, unicode
+    }),
+    React.createElement(Callout, {
+      tone: view.callout.tone, title: view.callout.title,
+      body: view.callout.body || undefined, colorEnabled, compact: true
+    }),
+    view.listItems.length > 0
+      ? React.createElement(ActionList, {
+        items: view.listItems, selectedIndex: view.listSelectedIndex,
+        focused: view.listFocused, colorEnabled, unicode
+      })
+      : null,
+    ...view.previewLines.map((line, index) =>
+      React.createElement(Text, { key: `p${index}`, color: muted }, line || " ")
+    ),
+    view.confirm
+      ? React.createElement(Confirm, {
+        summary: view.confirm.summary, primaryLabel: view.confirm.primaryLabel,
+        focused: false, colorEnabled, mark: " "
+      })
+      : null,
+    React.createElement(KeyBar, { hints: view.keyHints, colorEnabled, columns })
+  );
+}