@kal-elsam/kairo-runtime 0.9.0 → 0.11.0

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

@@ -0,0 +1,191 @@
+/** Live semantic Governance. Ownership: Callout=status · Confirm/primary=action · footer=keys. */
+import React from "react";
+import { Box, Text } from "ink";
+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, ViewTitle } 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(ViewTitle, { colorEnabled }, 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: " "
+    })
+  );
+}

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

@@ -0,0 +1,185 @@
+/**
+ * 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 { 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, ViewTitle } 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(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(ActionList, {
+      items: model.items,
+      selectedIndex: model.selectedIndex,
+      focused: listFocused,
+      colorEnabled,
+      unicode
+    })
+  );
+}

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

@@ -0,0 +1,175 @@
+/**
+ * Live semantic Overview for Cockpit HOME — product cover.
+ * Nav owns the sole focus mark — this panel never renders `>`.
+ * ASCII wordmark only here (wide/compact); minimal is textual.
+ */
+import React from "react";
+import { Box, Text } from "ink";
+import { CONTROL_PLANE_HEALTH } from "../../control-plane-snapshot.js";
+import { LAYOUT_MODES } from "../layout.js";
+import { COCKPIT_COLORS } from "../theme.js";
+import {
+  overviewBrandTitle,
+  shouldShowWordmark,
+  wordmarkLines
+} from "../brand/wordmark.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)
+  };
+}
+
+function renderWordmark({ layoutMode, colorEnabled = true, unicode = true }) {
+  const lines = wordmarkLines(layoutMode, { unicode });
+  if (lines.length === 0) return null;
+  return React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+    ...lines.map((line, i) => React.createElement(Text, {
+      key: `wm-${i}`,
+      bold: i === 0,
+      color: colorEnabled ? COCKPIT_COLORS.brand : undefined
+    }, line))
+  );
+}
+
+function renderCallout(view, colorEnabled) {
+  return React.createElement(Callout, {
+    tone: view.callout.tone,
+    title: view.callout.title,
+    body: view.callout.body,
+    colorEnabled,
+    compact: true
+  });
+}
+
+export function SemanticOverviewPanel({
+  model,
+  detailsOpen = false,
+  colorEnabled = true,
+  unicode = true,
+  layoutMode = LAYOUT_MODES.COMPACT
+}) {
+  const view = adaptControlCenterToOverview(model);
+  const showArt = shouldShowWordmark(layoutMode);
+  const brandTitle = overviewBrandTitle(layoutMode);
+  const isWide = layoutMode === LAYOUT_MODES.WIDE;
+  const mark = renderWordmark({ layoutMode, colorEnabled, unicode });
+  const status = renderCallout(view, colorEnabled);
+
+  const hero = showArt
+    ? (isWide
+      ? React.createElement(Box, { flexDirection: "row", marginBottom: 1 },
+        React.createElement(Box, { marginRight: 2 }, mark),
+        React.createElement(Box, { flexDirection: "column", flexGrow: 1 }, status)
+      )
+      : React.createElement(Box, { flexDirection: "column" }, mark, status))
+    : React.createElement(Box, { flexDirection: "column" },
+      React.createElement(Text, {
+        bold: true,
+        color: colorEnabled ? COCKPIT_COLORS.brand : undefined
+      }, brandTitle),
+      status
+    );
+
+  return React.createElement(Box, { flexDirection: "column" },
+    hero,
+    React.createElement(Box, { marginTop: 1, flexDirection: "column" },
+      React.createElement(Text, {
+        bold: true,
+        color: colorEnabled ? COCKPIT_COLORS.interactive : undefined
+      }, 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(Box, { marginTop: 1, flexDirection: "column" },
+      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: " "
+    })
+  );
+}