@kal-elsam/kairo-runtime 0.8.0 → 0.10.0

package/src/global/ink/use-orchestrator-data.js

@@ -33,8 +33,14 @@ import {
   listRecoverySnapshots,
   reduceRecoveryAction
 } from "./cockpit-recovery.js";
+import {
+  createSettingsActionState,
+  listCuratedIntegrations,
+  reduceSettingsAction
+} from "./cockpit-settings.js";
 import { listReviewReceipts } from "../runtime/review/review-receipts.js";
 import { assertReceiptSecretFree } from "../runtime/review/review-validate.js";
+import { listAlerts, resolveAlert, dismissAlert } from "../runtime/alerts/alert-store.js";
 
 export function useOrchestratorData({
   homeDir,
@@ -54,6 +60,7 @@ export function useOrchestratorData({
   const [selectedEvents, setSelectedEvents] = useState([]);
   const [reviews, setReviews] = useState([]);
   const [selectedReview, setSelectedReview] = useState(null);
+  const [alerts, setAlerts] = useState(null);
   const [statusMessage, setStatusMessage] = useState(null);
   const [launchAgentIndex, setLaunchAgentIndex] = useState(0);
   const [launchStep, setLaunchStep] = useState(LAUNCH_WIZARD_STEPS.AGENT);
@@ -61,6 +68,7 @@ export function useOrchestratorData({
   const [launchPermissionIndex, setLaunchPermissionIndex] = useState(0);
   const [changesAction, setChangesAction] = useState(createChangesActionState);
   const [recoveryAction, setRecoveryAction] = useState(createRecoveryActionState);
+  const [settingsAction, setSettingsAction] = useState(createSettingsActionState);
 
   const serializedReload = useMemo(() => createSerializedReloader(() => loadCockpitScanBundle({
     homeDir,
@@ -90,6 +98,11 @@ export function useOrchestratorData({
     setDashboard(outcome.result.dashboard);
     setDiagnostics(outcome.result.diagnostics);
     setSnapshot(outcome.result.snapshot);
+    try {
+      setAlerts(await listAlerts({ homeDir, limit: 50 }));
+    } catch {
+      setAlerts(null);
+    }
     setError(null);
     setLoading(false);
     setRetrying(false);
@@ -149,6 +162,22 @@ export function useOrchestratorData({
     });
   };
 
+  const handleAlertTransition = async (alert, action) => {
+    if (!alert) return;
+    setBusy(true);
+    try {
+      if (action === "dismiss") await dismissAlert(alert.alertId, { homeDir });
+      else await resolveAlert(alert.alertId, { homeDir });
+      setAlerts(await listAlerts({ homeDir, limit: 50 }));
+      setStatusMessage(action === "dismiss" ? "Alert dismissed" : "Alert resolved");
+    } catch (error) {
+      setError(error instanceof Error ? error.message : String(error));
+      setAlerts(null);
+    } finally {
+      setBusy(false);
+    }
+  };
+
   const handleLaunch = async (draft, profile, dispatch) => {
     if (!draft.agentId || !draft.task.trim()) {
       setError("Agent and task are required.");
@@ -366,6 +395,26 @@ export function useOrchestratorData({
     await reload();
   };
 
+  const previewSettings = (id) => {
+    setSettingsAction((prev) => reduceSettingsAction(prev, { type: "preview", id }));
+  };
+
+  const promptConfirmSettings = () => {
+    setSettingsAction((prev) => reduceSettingsAction(prev, { type: "confirm-prompt" }));
+  };
+
+  const confirmSettings = () => {
+    setSettingsAction((prev) => reduceSettingsAction(prev, { type: "confirm" }));
+  };
+
+  const cancelSettings = () => {
+    setSettingsAction((prev) => reduceSettingsAction(prev, { type: "cancel" }));
+  };
+
+  const resetSettings = () => {
+    setSettingsAction(() => createSettingsActionState());
+  };
+
   return {
     loading,
     busy,
@@ -381,6 +430,7 @@ export function useOrchestratorData({
     reviews,
     selectedReview,
     setSelectedReview,
+    alerts,
     statusMessage,
     launchAgentIndex,
     setLaunchAgentIndex,
@@ -394,11 +444,14 @@ export function useOrchestratorData({
     scanOptions: CONTROL_PLANE_AUTO_SCAN,
     changesAction,
     recoveryAction,
+    settingsAction,
+    curatedIntegrations: listCuratedIntegrations(),
     reload,
     resetLaunchWizard,
     openRunDetail,
     loadReviews,
     openReviewDetail,
+    handleAlertTransition,
     handleLaunch,
     handleCancelRun,
     previewChanges,
@@ -409,6 +462,11 @@ export function useOrchestratorData({
     cancelRecovery,
     confirmApplyRecovery,
     rescanRecovery,
+    previewSettings,
+    promptConfirmSettings,
+    confirmSettings,
+    cancelSettings,
+    resetSettings,
     recoverySnapshots: listRecoverySnapshots(snapshot)
   };
 }

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

@@ -0,0 +1,194 @@
+/** Live semantic Activity/Recovery. Callout=status · Confirm=action · footer=keys · snapshots=focus. */
+import React from "react";
+import { Box, Text } from "ink";
+import { COCKPIT_COLORS } from "../theme.js";
+import { formatConfirmPath } from "../cockpit-path-label.js";
+import {
+  RECOVERY_PHASE, listRecoverySnapshots, formatWhen, formatResult, shortName
+} from "../cockpit-recovery.js";
+import { LAYOUT_MODES } from "../layout.js";
+import { ActionList, Callout, Confirm, Details } from "./semantic.js";
+import { detailsPathLimit } from "./live-governance.js";
+
+export function activityContentLimits(layoutMode = LAYOUT_MODES.COMPACT) {
+  return layoutMode === LAYOUT_MODES.WIDE
+    ? { events: 4, snapshots: 8 }
+    : { events: 3, snapshots: 3 };
+}
+
+export function activitySnapshotLimit(layoutMode = LAYOUT_MODES.COMPACT) {
+  return activityContentLimits(layoutMode).snapshots;
+}
+
+/** Visible window over full list; keeps `index` focused without truncating navigation. */
+export function windowSlice(items = [], index = 0, limit = 3) {
+  const total = items.length;
+  if (total === 0) return { items: [], selectedIndex: -1, start: 0 };
+  const size = Math.max(1, Math.min(limit, total));
+  const safeIndex = Math.min(Math.max(0, index), total - 1);
+  const start = Math.min(Math.max(0, safeIndex - Math.floor((size - 1) / 2)), total - size);
+  return { items: items.slice(start, start + size), selectedIndex: safeIndex - start, start };
+}
+
+function collectRecentItems(snapshot, dashboard, eventLimit) {
+  const items = [];
+  for (const event of (snapshot?.history?.events ?? []).slice(0, 3)) {
+    items.push({
+      id: `e-${items.length}`,
+      label: `${formatWhen(event.timestamp)} · ${event.command ?? event.type ?? "event"} · ${formatResult(event.action)}`
+    });
+  }
+  for (const run of (dashboard?.recentRuns ?? []).slice(0, 2)) {
+    items.push({
+      id: `r-${items.length}`,
+      label: `${formatWhen(run.updatedAt ?? run.endedAt ?? run.startedAt)} · ${run.agentId ?? "agent"} · ${formatResult(run.state)}`
+    });
+  }
+  return items.slice(0, eventLimit);
+}
+
+function phaseTone(phase) {
+  if (phase === RECOVERY_PHASE.FAILED) return "danger";
+  if (phase === RECOVERY_PHASE.COMPLETED) return "ready";
+  if (phase === RECOVERY_PHASE.CONFIRMING || phase === RECOVERY_PHASE.PREVIEWING || phase === RECOVERY_PHASE.APPLYING) {
+    return "warn";
+  }
+  return "info";
+}
+
+function phaseTitle(phase, snapCount, eventCount) {
+  if (phase === RECOVERY_PHASE.PREVIEWING) return "Previewing restore";
+  if (phase === RECOVERY_PHASE.CONFIRMING) return "Confirm restore";
+  if (phase === RECOVERY_PHASE.APPLYING) return "Restoring";
+  if (phase === RECOVERY_PHASE.COMPLETED) return "Restore complete";
+  if (phase === RECOVERY_PHASE.FAILED) return "Restore failed";
+  return `${snapCount} snapshot(s) · ${eventCount} recent`;
+}
+
+function calloutBody(phase, recoveryAction) {
+  const msg = recoveryAction?.message ?? "";
+  if (/Y restore|N\/Esc/i.test(msg)) return "";
+  if (phase === RECOVERY_PHASE.FAILED) {
+    return msg || (recoveryAction?.error ? `Error · ${recoveryAction.error}` : "");
+  }
+  return phase === RECOVERY_PHASE.IDLE ? msg : "";
+}
+
+function buildDetailsLines(preview, receipt, showPaths, homeDir, pathLimit) {
+  if (!showPaths) return [];
+  const files = preview?.files ?? [];
+  if (files.length > 0) {
+    const lines = files.slice(0, pathLimit).map((f) => formatConfirmPath(f.displayPath ?? f.path, homeDir));
+    if (files.length > pathLimit) lines.push(`… ${files.length - pathLimit} more`);
+    return lines;
+  }
+  if (receipt?.safetyBackup) return ["Safety backup retained"];
+  if (receipt) return [`Result · ${receipt.action ?? "rollback"} · ${receipt.restored?.length ?? 0} restored`];
+  return ["No path evidence in this preview."];
+}
+
+export function adaptActivityModel({
+  snapshot = null, recoveryAction = null, dashboard = null, listIndex = 0,
+  homeDir = null, detailsOpen = false, layoutMode = LAYOUT_MODES.COMPACT
+} = {}) {
+  const phase = recoveryAction?.phase ?? RECOVERY_PHASE.IDLE;
+  const limits = activityContentLimits(layoutMode);
+  const allSnapshots = listRecoverySnapshots(snapshot);
+  const windowed = windowSlice(allSnapshots, listIndex, limits.snapshots);
+  const preview = recoveryAction?.preview ?? null;
+  const receipt = recoveryAction?.receipt ?? null;
+  const hasPreview = Boolean(preview);
+  const confirming = phase === RECOVERY_PHASE.CONFIRMING;
+  const working = phase === RECOVERY_PHASE.PREVIEWING || phase === RECOVERY_PHASE.APPLYING;
+  const showPaths = (detailsOpen && hasPreview) || confirming;
+  const recentItems = collectRecentItems(snapshot, dashboard, limits.events);
+  const recent = recentItems.length > 0
+    ? recentItems
+    : [{ id: "empty-recent", label: "No recent agent activity." }];
+  const snapshotItems = windowed.items.length === 0
+    ? [{ id: "empty-snap", label: "No global snapshots yet." }]
+    : windowed.items.map((entry, index) => ({
+      id: entry.name ?? `s-${windowed.start + index}`,
+      label: `${shortName(entry.name)} · ${entry.fileCount ?? "?"} files`
+    }));
+  const focused = allSnapshots[Math.min(Math.max(0, listIndex), Math.max(0, allSnapshots.length - 1))] ?? null;
+  const fileCount = preview?.files?.length ?? 0;
+
+  return {
+    title: "Activity",
+    phase,
+    hasPreview,
+    callout: {
+      tone: phaseTone(phase),
+      title: phaseTitle(phase, allSnapshots.length, recentItems.length),
+      body: calloutBody(phase, recoveryAction)
+    },
+    primary: confirming || working ? null : {
+      label: hasPreview
+        ? `Restore preview · ${fileCount} file(s)`
+        : (allSnapshots.length > 0 ? "Select a snapshot to preview" : "No snapshots to restore"),
+      detail: receipt
+        ? `Result · ${receipt.action ?? "rollback"} · ${receipt.restored?.length ?? 0} restored`
+        : null
+    },
+    confirm: confirming ? {
+      summary: fileCount > 0
+        ? `Restore ${fileCount} file(s) from ${shortName(preview?.snapshot)}.`
+        : "Restore confirmed snapshot preview.",
+      primaryLabel: "Restore"
+    } : null,
+    recent,
+    snapshots: snapshotItems,
+    selectedIndex: windowed.items.length === 0 ? -1 : windowed.selectedIndex,
+    focusedSnapshot: focused?.name ?? null,
+    snapshotTotal: allSnapshots.length,
+    details: buildDetailsLines(preview, receipt, showPaths, homeDir, detailsPathLimit(layoutMode)),
+    detailsOpen: showPaths,
+    showDetails: hasPreview || confirming || Boolean(receipt)
+  };
+}
+
+export function SemanticActivityPanel({
+  snapshot = null, recoveryAction = null, dashboard = null, listIndex = 0,
+  homeDir = null, detailsOpen = false, layoutMode = LAYOUT_MODES.COMPACT,
+  contentFocused = false, colorEnabled = true, unicode = true
+}) {
+  const view = adaptActivityModel({
+    snapshot, recoveryAction, dashboard, listIndex, homeDir, detailsOpen, layoutMode
+  });
+  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 || undefined, colorEnabled, compact: true
+    }),
+    view.confirm
+      ? React.createElement(Confirm, {
+        summary: view.confirm.summary, primaryLabel: view.confirm.primaryLabel,
+        focused: false, colorEnabled, mark: " "
+      })
+      : view.primary
+        ? React.createElement(Text, { bold: true }, `  ${view.primary.label}`)
+        : null,
+    view.primary?.detail && !view.confirm
+      ? React.createElement(Text, null, view.primary.detail) : null,
+    React.createElement(Text, { bold: true }, "Recent"),
+    React.createElement(ActionList, {
+      items: view.recent, selectedIndex: -1, focused: false, colorEnabled, unicode
+    }),
+    React.createElement(Text, { bold: true }, "Snapshots"),
+    React.createElement(ActionList, {
+      items: view.snapshots, selectedIndex: view.selectedIndex,
+      focused: contentFocused, colorEnabled, unicode
+    }),
+    view.showDetails
+      ? React.createElement(Details, {
+        open: view.detailsOpen, summary: "Details",
+        lines: view.details.length > 0 ? view.details : ["No path evidence in this preview."],
+        colorEnabled, focused: false, mark: " "
+      })
+      : null
+  );
+}

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

@@ -0,0 +1,159 @@
+/**
+ * Live semantic Alerts inbox.
+ * ActionList owns the only focus mark; windowSlice keeps full open domain navigable.
+ * Enter resolve / D dismiss unchanged — adapter exposes focusedId aligned with selectAlertFromList.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { COCKPIT_COLORS } from "../theme.js";
+import { LAYOUT_MODES } from "../layout.js";
+import { ALERT_STATES } from "../../runtime/alerts/alert-types.js";
+import { formatAlertsHeadline, selectAlertFromList } from "../cockpit-alerts.js";
+import { ActionList, Callout } from "./semantic.js";
+import { windowSlice } from "./live-activity.js";
+
+export function alertsListLimit(layoutMode = LAYOUT_MODES.COMPACT) {
+  return layoutMode === LAYOUT_MODES.WIDE ? 8 : 3;
+}
+
+function formatAlertWhen(alert) {
+  return String(alert.createdAt ?? "").slice(0, 16).replace("T", " ") || "unknown time";
+}
+
+function alertLabel(alert) {
+  return `${alert.severity} · ${alert.title} · ${formatAlertWhen(alert)}`;
+}
+
+function openAlerts(alerts) {
+  if (!Array.isArray(alerts)) return [];
+  return alerts.filter((alert) => alert.state === ALERT_STATES.OPEN);
+}
+
+function unavailablePack() {
+  return {
+    items: [{ id: "unavailable", label: "Could not read the alert store." }],
+    selectedIndex: -1,
+    focusedId: null,
+    total: 0,
+    start: 0,
+    isEmpty: true,
+    isUnavailable: true
+  };
+}
+
+function emptyPack() {
+  return {
+    items: [{ id: "empty", label: "No pending alerts." }],
+    selectedIndex: -1,
+    focusedId: null,
+    total: 0,
+    start: 0,
+    isEmpty: true,
+    isUnavailable: false
+  };
+}
+
+function populatedPack(open, listIndex, limit) {
+  const windowed = windowSlice(open, listIndex, limit);
+  const safe = Math.min(Math.max(0, listIndex), open.length - 1);
+  const focused = open[safe] ?? null;
+  return {
+    items: windowed.items.map((alert, i) => ({
+      id: alert.alertId ?? `alert-${windowed.start + i}`,
+      label: alertLabel(alert)
+    })),
+    selectedIndex: windowed.selectedIndex,
+    focusedId: focused?.alertId ?? null,
+    total: open.length,
+    start: windowed.start,
+    isEmpty: false,
+    isUnavailable: false
+  };
+}
+
+/** Pure adapter: unavailable · empty · pending inbox. */
+export function adaptAlertsModel({
+  alerts = null,
+  listIndex = 0,
+  layoutMode = LAYOUT_MODES.COMPACT
+} = {}) {
+  const limit = alertsListLimit(layoutMode);
+  const headline = formatAlertsHeadline(alerts);
+  let list;
+
+  if (alerts == null) {
+    list = unavailablePack();
+  } else {
+    const open = openAlerts(alerts);
+    list = open.length === 0
+      ? emptyPack()
+      : populatedPack(open, listIndex, limit);
+  }
+
+  const selected = selectAlertFromList(alerts, listIndex);
+  if (!list.isEmpty && selected?.alertId) {
+    list.focusedId = selected.alertId;
+  }
+
+  const callout = list.isUnavailable
+    ? {
+      tone: "danger",
+      title: headline.headline,
+      body: "Esc back · / Alerts"
+    }
+    : list.isEmpty
+      ? {
+        tone: "info",
+        title: headline.headline,
+        body: "Esc back · / Alerts"
+      }
+      : {
+        tone: "warn",
+        title: headline.headline,
+        body: "Enter resolves · D dismisses · Esc back"
+      };
+
+  return {
+    title: "Alerts",
+    callout,
+    items: list.items,
+    selectedIndex: list.selectedIndex,
+    focusedId: list.focusedId,
+    total: list.total,
+    start: list.start,
+    isEmpty: list.isEmpty,
+    isUnavailable: list.isUnavailable,
+    listLimit: limit
+  };
+}
+
+export function SemanticAlertsPanel({
+  alerts = null,
+  listIndex = 0,
+  layoutMode = LAYOUT_MODES.COMPACT,
+  contentFocused = false,
+  colorEnabled = true,
+  unicode = true
+}) {
+  const model = adaptAlertsModel({ alerts, listIndex, layoutMode });
+  const listFocused = contentFocused && !model.isEmpty && !model.isUnavailable;
+  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-governance.js

@@ -0,0 +1,195 @@
+/** Live semantic Governance. Ownership: Callout=status · Confirm/primary=action · footer=keys. */
+import React from "react";
+import { Box, Text } from "ink";
+import { COCKPIT_COLORS } from "../theme.js";
+import { formatConfirmPath } from "../cockpit-path-label.js";
+import { CHANGES_PHASE } from "../cockpit-changes.js";
+import { LAYOUT_MODES } from "../layout.js";
+import { ActionList, Callout, Confirm, Details } from "./semantic.js";
+import { mapHealthTone } from "./live-overview.js";
+
+function healthLabel(kind) {
+  return String(kind ?? "unknown").replaceAll("_", " ");
+}
+
+function plannedChanges(snapshot, changesAction) {
+  const preview = changesAction?.preview;
+  const diff = snapshot?.diff;
+  if (preview?.hasChanges) return preview.changes ?? [];
+  if (diff?.hasChanges && !preview) return diff.changes ?? [];
+  return [];
+}
+
+function phaseTone(phase, healthKind) {
+  if (phase === CHANGES_PHASE.FAILED) return "danger";
+  if (phase === CHANGES_PHASE.COMPLETED) return "ready";
+  if (phase === CHANGES_PHASE.CONFIRMING || phase === CHANGES_PHASE.PREVIEWING || phase === CHANGES_PHASE.APPLYING) {
+    return "warn";
+  }
+  return mapHealthTone(healthKind);
+}
+
+function phaseTitle(phase, snapshot, changesAction) {
+  if (phase === CHANGES_PHASE.PREVIEWING) return "Previewing";
+  if (phase === CHANGES_PHASE.CONFIRMING) return "Confirm apply";
+  if (phase === CHANGES_PHASE.APPLYING) return "Applying";
+  if (phase === CHANGES_PHASE.COMPLETED) return "Apply complete";
+  if (phase === CHANGES_PHASE.FAILED) {
+    return changesAction?.error === "setup-required" ? "Setup required" : "Governance failed";
+  }
+  const pending = snapshot?.diff?.hasChanges
+    ? (snapshot.diff.changeCount ?? snapshot.diff.changes?.length ?? 0)
+    : 0;
+  return `${healthLabel(snapshot?.health)}${pending > 0 ? ` · ${pending} pending` : " · drift clean"}`;
+}
+
+/** Compact/minimal: 3 paths; wide: 12. */
+export function detailsPathLimit(layoutMode = LAYOUT_MODES.COMPACT) {
+  return layoutMode === LAYOUT_MODES.WIDE ? 12 : 3;
+}
+
+function calloutBody(phase, changesAction) {
+  if (phase !== CHANGES_PHASE.FAILED) return "";
+  if (changesAction?.error === "setup-required") return "Not configured — open Overview and run setup.";
+  if (changesAction?.error) return `Error · ${changesAction.error}`;
+  return changesAction?.message ?? "";
+}
+
+function buildDetailsLines(planned, showPaths, changesAction, homeDir, pathLimit) {
+  if (!showPaths) return [];
+  if (planned.length > 0) {
+    const lines = planned.slice(0, pathLimit).map((c) =>
+      `${c.action ?? c.kind} · ${formatConfirmPath(c.target, homeDir)}`
+    );
+    if (planned.length > pathLimit) lines.push(`… ${planned.length - pathLimit} more`);
+    return lines;
+  }
+  const receipt = changesAction?.receipt;
+  if (receipt?.checksBefore && receipt?.checksAfter) {
+    return [`Checks · before ok=${receipt.checksBefore.ok} → after ok=${receipt.checksAfter.ok}`];
+  }
+  return ["No path evidence on this scan."];
+}
+
+/** Pure adapter: paths only in detailsLines (confirming or Details open). */
+export function adaptGovernanceModel({
+  snapshot = null,
+  changesAction = null,
+  homeDir = null,
+  detailsOpen = false,
+  layoutMode = LAYOUT_MODES.COMPACT
+} = {}) {
+  const phase = changesAction?.phase ?? CHANGES_PHASE.IDLE;
+  const coverage = snapshot?.coverage ?? {};
+  const cta = snapshot?.cta;
+  const planned = plannedChanges(snapshot, changesAction);
+  const showPaths = detailsOpen || phase === CHANGES_PHASE.CONFIRMING;
+  const confirming = phase === CHANGES_PHASE.CONFIRMING;
+  const working = phase === CHANGES_PHASE.PREVIEWING || phase === CHANGES_PHASE.APPLYING;
+  const actionable = phase === CHANGES_PHASE.IDLE
+    || phase === CHANGES_PHASE.COMPLETED
+    || phase === CHANGES_PHASE.FAILED;
+
+  const metrics = [
+    {
+      id: "coverage",
+      label: `Coverage · ${coverage.governedAgents ?? 0}/${coverage.detectedAgents ?? 0} agents · ${coverage.components ?? 0} components`
+    },
+    {
+      id: "planned",
+      label: planned.length > 0
+        ? `Planned · ${planned.length} change(s)`
+        : (snapshot?.diff?.summary ?? "No pending governance changes.")
+    }
+  ];
+  if (changesAction?.receipt) {
+    const r = changesAction.receipt;
+    metrics.push({
+      id: "receipt",
+      label: `Result · ${r.action}${r.partial ? " (partial)" : ""}${r.backups?.length ? ` · ${r.backups.length} backup(s)` : ""}`
+    });
+  }
+
+  return {
+    title: "Governance",
+    phase,
+    callout: {
+      tone: phaseTone(phase, snapshot?.health),
+      title: phaseTitle(phase, snapshot, changesAction),
+      body: calloutBody(phase, changesAction)
+    },
+    primary: confirming || working
+      ? null
+      : {
+        label: cta?.title ?? "Review governance when ready",
+        detail: actionable ? (cta?.detail ?? null) : null
+      },
+    confirm: confirming
+      ? {
+        summary: planned.length > 0
+          ? `Apply ${planned.length} planned change(s).`
+          : "Apply confirmed governance preview.",
+        primaryLabel: "Apply"
+      }
+      : null,
+    metrics,
+    details: buildDetailsLines(planned, showPaths, changesAction, homeDir, detailsPathLimit(layoutMode)),
+    detailsOpen: showPaths
+  };
+}
+
+export function SemanticGovernancePanel({
+  snapshot = null,
+  changesAction = null,
+  homeDir = null,
+  detailsOpen = false,
+  layoutMode = LAYOUT_MODES.COMPACT,
+  colorEnabled = true,
+  unicode = true
+}) {
+  const view = adaptGovernanceModel({
+    snapshot, changesAction, homeDir, detailsOpen, layoutMode
+  });
+  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 || undefined,
+      colorEnabled,
+      compact: true
+    }),
+    view.confirm
+      ? React.createElement(Confirm, {
+        summary: view.confirm.summary,
+        primaryLabel: view.confirm.primaryLabel,
+        focused: false,
+        colorEnabled,
+        mark: " "
+      })
+      : view.primary
+        ? React.createElement(Box, { flexDirection: "column" },
+          React.createElement(Text, { bold: true }, `  ${view.primary.label}`),
+          view.primary.detail ? React.createElement(Text, null, view.primary.detail) : null
+        )
+        : null,
+    React.createElement(ActionList, {
+      items: view.metrics,
+      selectedIndex: -1,
+      focused: false,
+      colorEnabled,
+      unicode
+    }),
+    React.createElement(Details, {
+      open: view.detailsOpen,
+      summary: "Details",
+      lines: view.details.length > 0 ? view.details : ["No path evidence on this scan."],
+      colorEnabled,
+      focused: false,
+      mark: " "
+    })
+  );
+}