@kal-elsam/kairo-runtime 0.9.0 → 0.11.0

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

@@ -0,0 +1,186 @@
+/**
+ * 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 { LAYOUT_MODES } from "../layout.js";
+import {
+  SETTINGS_PHASE, getCuratedIntegration, listCuratedIntegrations
+} from "../cockpit-settings.js";
+import { ActionList, Callout, Confirm, Details, Receipt, SectionLabel, ViewTitle } 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(ViewTitle, { colorEnabled }, 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(SectionLabel, { colorEnabled }, "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 })
+  );
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Live semantic Usage panel — renderer only; model lives in cockpit-usage.js.
+ * ActionList never owns focus.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { COCKPIT_COLORS } from "../theme.js";
+import { LAYOUT_MODES } from "../layout.js";
+import { adaptUsageModel } from "../cockpit-usage.js";
+import { ActionList, Callout, SectionLabel, ViewTitle } from "./semantic.js";
+
+export function SemanticUsagePanel({
+  snapshot = null,
+  dashboard = null,
+  layoutMode = LAYOUT_MODES.COMPACT,
+  colorEnabled = true,
+  unicode = true
+}) {
+  const model = adaptUsageModel({ snapshot, dashboard, layoutMode });
+  const muted = colorEnabled ? COCKPIT_COLORS.muted : undefined;
+  return React.createElement(Box, { flexDirection: "column" },
+    React.createElement(ViewTitle, { colorEnabled }, model.title),
+    React.createElement(Callout, {
+      tone: model.callout.tone,
+      title: model.callout.title,
+      body: model.callout.body || undefined,
+      colorEnabled,
+      compact: true
+    }),
+    React.createElement(SectionLabel, { colorEnabled }, "Measured"),
+    React.createElement(Text, null, `  ${model.measured}`),
+    React.createElement(SectionLabel, { colorEnabled }, "Configured limits"),
+    React.createElement(Text, null, `  ${model.configured}`),
+    React.createElement(SectionLabel, { colorEnabled }, "Run usage"),
+    model.runs.length === 0
+      ? React.createElement(Text, null, "  No auditable run tokenUsage yet.")
+      : React.createElement(ActionList, {
+        items: model.runs,
+        selectedIndex: -1,
+        focused: false,
+        colorEnabled,
+        unicode
+      }),
+    model.moreLine
+      ? React.createElement(Text, { color: muted }, model.moreLine)
+      : null,
+    React.createElement(Text, { color: muted }, model.footnote)
+  );
+}

package/src/global/ink/ux/semantic.js

@@ -0,0 +1,101 @@
+/** Semantic Ink primitives — structured models, not string-array panels. */
+import React from "react";
+import { Box, Text } from "ink";
+import { COCKPIT_COLORS, statusColor, resolveGlyphs } from "../theme.js";
+
+const mute = (on) => (on ? COCKPIT_COLORS.muted : undefined);
+const ice = (on) => (on ? COCKPIT_COLORS.interactive : undefined);
+
+/** Short typographic view title — brand amber, no border. */
+export function ViewTitle({ children, colorEnabled = true }) {
+  return React.createElement(Text, {
+    bold: true,
+    color: colorEnabled ? COCKPIT_COLORS.brand : undefined
+  }, children);
+}
+
+export function ActionList({ items = [], selectedIndex = 0, focused = true, colorEnabled = true, unicode = true }) {
+  const g = resolveGlyphs(unicode);
+  return React.createElement(Box, { flexDirection: "column" },
+    ...items.map((item, i) => {
+      const sel = i === selectedIndex;
+      return React.createElement(Text, {
+        key: item.id ?? String(i),
+        bold: sel,
+        color: sel && focused && colorEnabled ? COCKPIT_COLORS.interactive : undefined
+      }, `${sel && focused ? g.focus : " "} ${item.label}${item.hint ? `  ${item.hint}` : ""}`);
+    })
+  );
+}
+
+export function Stepper({ steps = [], currentIndex = 0, colorEnabled = true, unicode = true }) {
+  // Progress marks: not focus `>` and not failure-looking `x`.
+  const done = unicode ? "✓" : "+";
+  const current = unicode ? "●" : "*";
+  const idle = unicode ? "·" : "-";
+  return React.createElement(Box, { flexDirection: "column" },
+    ...steps.map((step, i) => {
+      const isDone = i < currentIndex;
+      const cur = i === currentIndex;
+      const color = isDone
+        ? (colorEnabled ? COCKPIT_COLORS.success : undefined)
+        : cur ? ice(colorEnabled) : mute(colorEnabled);
+      return React.createElement(Text, {
+        key: step.id ?? String(i), bold: cur, color
+      }, `${isDone ? done : cur ? current : idle} ${i + 1}. ${step.label}`);
+    })
+  );
+}
+
+export function Callout({ tone = "info", title, body, colorEnabled = true, compact = false }) {
+  const kind = tone === "danger" ? "danger" : tone === "warn" ? "warn" : "ready";
+  return React.createElement(Box, {
+    flexDirection: "column",
+    marginY: compact ? 0 : 1
+  },
+    React.createElement(Text, { bold: true, color: statusColor(kind, { colorEnabled }) }, title),
+    body ? React.createElement(Text, null, body) : null
+  );
+}
+
+export function Confirm({ summary, primaryLabel = "Confirm", focused = true, colorEnabled = true, mark = " " }) {
+  return React.createElement(Box, { flexDirection: "column", marginY: 1 },
+    summary ? React.createElement(Text, null, summary) : null,
+    React.createElement(Text, {
+      bold: focused,
+      color: focused && colorEnabled ? COCKPIT_COLORS.interactive : undefined
+    }, `${mark} ${primaryLabel}`)
+  );
+}
+
+export function Receipt({ title = "Receipt", lines = [], colorEnabled = true }) {
+  return React.createElement(Box, { flexDirection: "column", marginY: 1 },
+    React.createElement(Text, { bold: true, color: colorEnabled ? COCKPIT_COLORS.success : undefined }, title),
+    ...lines.map((line, i) => React.createElement(Text, { key: `r${i}`, color: mute(colorEnabled) }, line))
+  );
+}
+
+export function Details({ open = false, summary = "Details", lines = [], colorEnabled = true, focused = false, mark = " " }) {
+  const color = focused && colorEnabled ? COCKPIT_COLORS.interactive : mute(colorEnabled);
+  if (!open) return React.createElement(Text, { bold: focused, color }, `${mark} ${summary} · Space`);
+  return React.createElement(Box, { flexDirection: "column" },
+    React.createElement(Text, { bold: true, color }, `${mark} ${summary}`),
+    ...lines.map((line, i) => React.createElement(Text, { key: `d${i}`, color: mute(colorEnabled) }, line))
+  );
+}
+
+export function KeyBar({ hints = [], colorEnabled = true, columns = 80 }) {
+  const width = Math.max(24, Math.min(Number(columns) || 80, 120));
+  return React.createElement(Box, { width },
+    React.createElement(Text, { color: mute(colorEnabled) },
+      hints.map((h) => `${h.keys} ${h.label}`).join(" · "))
+  );
+}
+
+/** Section label inside a panel — muted brand hierarchy under ViewTitle. */
+export function SectionLabel({ children, colorEnabled = true }) {
+  return React.createElement(Text, {
+    bold: true,
+    color: colorEnabled ? COCKPIT_COLORS.muted : undefined
+  }, children);
+}

package/src/global/ink/ux/task-flow-app.js

@@ -0,0 +1,85 @@
+import React, { useEffect, useReducer } from "react";
+import { Box, Text, useApp, useInput, useStdout } from "ink";
+import { COCKPIT_COLORS, resolveGlyphs } from "../theme.js";
+import { resolveTerminalCapabilities } from "../terminal-capabilities.js";
+import { ActionList, Callout, Confirm, Details, KeyBar, Receipt, Stepper } from "./semantic.js";
+import {
+  FOCUS, SCREENS, createTaskFlowState, keyHintsFor, modelForState, reduceTaskFlow, resolvePrimaryPresentation
+} from "./task-flow.js";
+
+export function TaskFlowApp({ columns: cols, rows: rowCount, onExit } = {}) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [state, dispatch] = useReducer(
+    reduceTaskFlow,
+    createTaskFlowState({ columns: cols ?? stdout?.columns ?? 80, rows: rowCount ?? stdout?.rows ?? 24 })
+  );
+  const caps = resolveTerminalCapabilities({
+    columns: state.columns, rows: state.rows, env: process.env, isTTY: true
+  });
+  const model = modelForState(state);
+  const primary = resolvePrimaryPresentation(model, state, caps.unicode);
+  const detailsMark = state.focus === FOCUS.DETAILS ? resolveGlyphs(caps.unicode).focus : " ";
+  const accent = caps.color ? COCKPIT_COLORS.primary : undefined;
+
+  useEffect(() => {
+    if (!stdout) return undefined;
+    const onResize = () => dispatch({ type: "resize", columns: stdout.columns ?? 80, rows: stdout.rows ?? 24 });
+    stdout.on("resize", onResize);
+    return () => stdout.off("resize", onResize);
+  }, [stdout]);
+
+  useEffect(() => {
+    if (!state.exited) return;
+    onExit?.({ reason: "escape" });
+    exit();
+  }, [state.exited, exit, onExit]);
+
+  useInput((input, key) => {
+    if (key.upArrow) dispatch({ type: "up" });
+    else if (key.downArrow) dispatch({ type: "down" });
+    else if (key.return) dispatch({ type: "enter" });
+    else if (key.escape) dispatch({ type: "escape" });
+    else if (input === " ") dispatch({ type: "space" });
+    else if (input === "/") dispatch({ type: "slash" });
+  });
+
+  return React.createElement(Box, { flexDirection: "column", width: state.columns },
+    React.createElement(Text, { bold: true, color: accent }, `Kairo · ${model.title} · ${state.layout}`),
+    React.createElement(Callout, { ...model.callout, colorEnabled: caps.color }),
+    state.screen === SCREENS.SETUP
+      ? React.createElement(Stepper, {
+        steps: model.steps, currentIndex: model.stepIndex, colorEnabled: caps.color, unicode: caps.unicode
+      })
+      : null,
+    primary.mode === "confirm"
+      ? React.createElement(Confirm, {
+        summary: primary.summary, primaryLabel: primary.label,
+        focused: state.focus === FOCUS.PRIMARY, colorEnabled: caps.color, mark: primary.mark
+      })
+      : React.createElement(Box, { flexDirection: "column" },
+        React.createElement(Text, {
+          bold: state.focus === FOCUS.PRIMARY,
+          color: state.focus === FOCUS.PRIMARY ? accent : undefined
+        }, `${primary.mark} ${primary.label}`),
+        primary.detail
+          ? React.createElement(Text, { color: caps.color ? COCKPIT_COLORS.muted : undefined }, primary.detail)
+          : null
+      ),
+    model.receipt ? React.createElement(Receipt, { ...model.receipt, colorEnabled: caps.color }) : null,
+    (model.secondary || model.metrics)
+      ? React.createElement(ActionList, {
+        items: model.secondary ?? model.metrics,
+        selectedIndex: state.listIndex,
+        focused: state.focus === FOCUS.LIST,
+        colorEnabled: caps.color,
+        unicode: caps.unicode
+      })
+      : null,
+    React.createElement(Details, {
+      open: state.detailsOpen, summary: "Details", lines: model.details,
+      colorEnabled: caps.color, focused: state.focus === FOCUS.DETAILS, mark: detailsMark
+    }),
+    React.createElement(KeyBar, { hints: keyHintsFor(state), colorEnabled: caps.color, columns: state.columns })
+  );
+}