@kal-elsam/kairo-runtime 0.9.0 → 0.11.0

package/README.md

@@ -16,8 +16,11 @@ as a technical alias).
 Kairo Runtime and prints a migration warning. Prefer `@kal-elsam/kairo-runtime` and the
 `kairo` CLI for new installs. See [`packages/harness-bridge/README.md`](packages/harness-bridge/README.md).
 
-Terminal UX aims for Pi-like clarity (clear modes, non-interactive flags, extensible
-commands) without depending on Pi as a runtime or adding a Pi adapter.
+Terminal UX is **terminal-first**: bare `kairo` opens the Ink Control Center (or Setup
+when unconfigured). Explicit commands (`setup`, `status`, `sync`, `doctor`, `monitor`,
+`shell`, …) keep their current behavior. Progressive disclosure keeps paths and IDs in
+Details, list caps honest (`… N more`), and Callout reserved for status — never for
+primary values. No web loopback / `kairo ui` in this release.
 
 - **npm:** https://www.npmjs.com/package/@kal-elsam/kairo-runtime
 - **repo:** https://github.com/Kal-elSam/harness
@@ -32,13 +35,11 @@ npx @kal-elsam/kairo-runtime
 kairo
 ```
 
-**First run** (no `~/.harness/state.json`): interactive onboarding → safe diagnosis →
-setup with confirmation → full-screen operations cockpit.
+**First run** (no `~/.harness/state.json`): semantic Setup (Detect → Agents →
+Components → Preview → Confirm) → full-screen Control Center.
 
-**Later runs** (state present): full-screen Control Center oriented around user
-tasks — overall health, one next action, activity, pending alerts, and guided
-governance (scan → evidence → preview → confirm → apply → re-scan → recovery).
-Runs stay secondary. Layout adapts to terminal size:
+**Later runs** (state present): semantic Cockpit — Overview, Governance, Activity,
+Orchestration, Usage, Settings — plus Alerts inbox. Layout adapts to terminal size:
 
 | Mode | Size | Layout |
 |------|------|--------|
@@ -73,6 +74,11 @@ Settings browses a curated catalog (pinned `pi-usage-widget@0.2.1`, MIT).
 Preview → confirm shows an in-session confirmation receipt (`wroteFiles: false`);
 it does not persist or install anything.
 
+### Usage evidence
+
+Usage shows measured budget pairs, profile limits, and finite run `tokenUsage`
+fields only. It never invents totals, costs, or savings.
+
 Respects `NO_COLOR`, `HARNESS_ASCII=1`, and `HARNESS_INK=0`. Status is always labeled
 in text, never color alone.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kal-elsam/kairo-runtime",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Kairo Runtime — local agent operating system for Codex, Cursor, Claude, Pi, Engram, and Graphify.",
   "type": "module",
   "homepage": "https://github.com/Kal-elSam/harness#readme",

package/scripts/cockpit-smoke.mjs

@@ -26,7 +26,7 @@ const root = join(dirname(fileURLToPath(import.meta.url)), "..");
 const require = createRequire(import.meta.url);
 const pkg = require(join(root, "package.json"));
 
-assert.equal(pkg.version, "0.9.0");
+assert.equal(pkg.version, "0.11.0");
 assert.ok(pkg.dependencies["ansi-escapes"]);
 
 assert.equal(resolveLayoutMode({ columns: 120, rows: 40 }), LAYOUT_MODES.WIDE);
@@ -132,7 +132,7 @@ const proposalLines = formatProposalLines([
     id: "setup-local",
     severity: "high",
     title: "Finish local setup",
-    destination: "changes",
+    destination: "setup",
     evidence: [{ type: "status", source: "status.overall", ref: "missing" }]
   }
 ], {
@@ -143,7 +143,7 @@ const proposalLines = formatProposalLines([
     requestBudgetTokens: 10
   }
 });
-assert.match(proposalLines.join("\n"), /\[HIGH\] Finish local setup → changes/);
+assert.match(proposalLines.join("\n"), /\[HIGH\] Finish local setup → setup/);
 assert.match(proposalLines.join("\n"), /Budget · stable 1\/10/);
 assert.match(proposalLines.join("\n"), /evidence: status\.overall/);
 

package/scripts/ux-prototype-tty.mjs

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+/** Manual TTY gate: Home → Setup → Overview. No writes. Esc exits. */
+import React from "react";
+import { render } from "ink";
+import { TaskFlowApp } from "../src/global/ink/ux/task-flow-app.js";
+
+const app = render(React.createElement(TaskFlowApp, {
+  onExit: () => app.unmount()
+}));

package/src/global/control-plane-proposals.js

@@ -12,6 +12,7 @@ export const PROPOSAL_SEVERITY = Object.freeze({
 });
 
 export const PROPOSAL_DESTINATION = Object.freeze({
+  SETUP: "setup",
   CHANGES: "changes",
   CONTROL_CENTER: "control-center",
   IDES: "ides",
@@ -48,7 +49,7 @@ export function buildControlPlaneProposals({
       PROPOSAL_SEVERITY.HIGH,
       "Finish local setup",
       status?.nextAction ?? "Configure the local ecosystem before applying repairs.",
-      PROPOSAL_DESTINATION.CHANGES,
+      PROPOSAL_DESTINATION.SETUP,
       [
         ev("status", "status.overall", status?.overall ?? "missing"),
         ev("health", "control-plane.health", health ?? "NOT_CONFIGURED")

package/src/global/control-plane-snapshot.js

@@ -66,7 +66,7 @@ export function resolveControlPlaneCta({ health, status, diff } = {}) {
         title: "Finish local setup",
         detail: status?.nextAction
           ?? `Run ${formatCliCommand("setup")} to configure the local ecosystem.`,
-        destination: "changes"
+        destination: "setup"
       };
     case CONTROL_PLANE_HEALTH.ACTION_REQUIRED:
       return {

package/src/global/ink/brand/wordmark.js

@@ -0,0 +1,50 @@
+/**
+ * Static ASCII wordmark for Kairo Overview — no figlet dependency.
+ * Hero art appears only on Overview (wide / compact); minimal stays textual.
+ */
+
+import { LAYOUT_MODES } from "../layout.js";
+
+const WORDMARK_WIDE = [
+  "╦╔═╔═╗╦╦═╗╔═╗",
+  "╠╩╗╠═╣║╠╦╝║ ║",
+  "╩ ╩╩ ╩╩╩╚═╚═╝"
+];
+
+const WORDMARK_COMPACT = [
+  "╦╔═╔═╗╦╦═╗╔═╗",
+  "╩ ╩╩ ╩╩╩╚═╚═╝"
+];
+
+const WORDMARK_WIDE_ASCII = [
+  "K A I R O",
+  "========="
+];
+
+const WORDMARK_COMPACT_ASCII = [
+  "KAIRO"
+];
+
+export function shouldShowWordmark(layoutMode) {
+  return layoutMode === LAYOUT_MODES.WIDE || layoutMode === LAYOUT_MODES.COMPACT;
+}
+
+/**
+ * @param {"wide"|"compact"|"minimal"|string} layoutMode
+ * @param {{ unicode?: boolean }} [opts]
+ * @returns {string[]}
+ */
+export function wordmarkLines(layoutMode, { unicode = true } = {}) {
+  if (layoutMode === LAYOUT_MODES.WIDE) {
+    return unicode ? WORDMARK_WIDE.slice() : WORDMARK_WIDE_ASCII.slice();
+  }
+  if (layoutMode === LAYOUT_MODES.COMPACT) {
+    return unicode ? WORDMARK_COMPACT.slice() : WORDMARK_COMPACT_ASCII.slice();
+  }
+  return [];
+}
+
+export function overviewBrandTitle(layoutMode) {
+  if (shouldShowWordmark(layoutMode)) return null;
+  return "KAIRO · Overview";
+}

package/src/global/ink/cockpit/primitives.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { COCKPIT_COLORS, statusColor } from "../theme.js";
+import { COCKPIT_COLORS, resolveInkColor, statusColor } from "../theme.js";
 
 export function CockpitBadge({ label, kind = "ready", colorEnabled = true }) {
   return React.createElement(Text, {
@@ -8,36 +8,44 @@ export function CockpitBadge({ label, kind = "ready", colorEnabled = true }) {
   }, label);
 }
 
-export function CockpitEmptyState({ title, message, hint }) {
+export function CockpitEmptyState({ title, message, hint, colorEnabled = true }) {
   return React.createElement(Box, { flexDirection: "column", marginY: 1 },
-    title && React.createElement(Text, { bold: true, color: COCKPIT_COLORS.secondary }, title),
+    title && React.createElement(Text, {
+      bold: true,
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.brand)
+    }, title),
     message && React.createElement(Text, null, message),
-    hint && React.createElement(Text, { color: COCKPIT_COLORS.muted }, hint)
+    hint && React.createElement(Text, {
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
+    }, hint)
   );
 }
 
-export function CockpitPanel({ title, focused = false, width, children }) {
+/** Content region — no border; focus is conveyed by interactive children. */
+export function CockpitPanel({ title, focused = false, width, children, colorEnabled = true }) {
   return React.createElement(Box, {
     flexDirection: "column",
     width,
-    borderStyle: "single",
-    borderColor: focused ? COCKPIT_COLORS.primary : COCKPIT_COLORS.muted,
-    paddingX: 1,
+    paddingX: 0,
+    marginY: 1,
     flexGrow: 1
   },
     title && React.createElement(Text, {
       bold: true,
-      color: focused ? COCKPIT_COLORS.primary : COCKPIT_COLORS.secondary
+      color: resolveInkColor(
+        colorEnabled,
+        focused ? COCKPIT_COLORS.interactive : COCKPIT_COLORS.brand
+      )
     }, title),
     children
   );
 }
 
-export function CockpitSection({ title, children }) {
+export function CockpitSection({ title, children, colorEnabled = true }) {
   return React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
     title && React.createElement(Text, {
       bold: true,
-      color: COCKPIT_COLORS.secondary
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.brand)
     }, title),
     children
   );
@@ -45,19 +53,33 @@ export function CockpitSection({ title, children }) {
 
 export function CockpitKeyHint({ keys, label, colorEnabled = true }) {
   return React.createElement(Text, {
-    color: colorEnabled ? COCKPIT_COLORS.muted : undefined
+    color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
   }, `${keys} ${label}`);
 }
 
+/** Compact header: brand · status · project — no box-drawing. */
 export function CockpitTopBar({ model, colorEnabled = true }) {
+  const statusKind = String(model.status ?? "").toUpperCase() === "ONLINE"
+    ? "online"
+    : "muted";
   return React.createElement(Box, { justifyContent: "space-between", width: "100%" },
+    React.createElement(Box, null,
+      React.createElement(Text, {
+        bold: true,
+        color: resolveInkColor(colorEnabled, COCKPIT_COLORS.brand)
+      }, model.brand),
+      React.createElement(Text, {
+        color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
+      }, " · "),
+      React.createElement(CockpitBadge, {
+        label: model.status,
+        kind: statusKind,
+        colorEnabled
+      })
+    ),
     React.createElement(Text, {
-      bold: true,
-      color: colorEnabled ? COCKPIT_COLORS.primary : undefined
-    }, `╭─ ${model.brand} ─ ${model.status}`),
-    React.createElement(Text, {
-      color: colorEnabled ? COCKPIT_COLORS.muted : undefined
-    }, `${model.projectLabel} ─╮`)
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
+    }, model.projectLabel)
   );
 }
 
@@ -67,11 +89,11 @@ export function CockpitNav({ model, colorEnabled = true }) {
     model.items.map((item) => {
       const suffix = item.current && !item.selected ? " (open)" : "";
       const color = item.focused
-        ? (colorEnabled ? COCKPIT_COLORS.primary : undefined)
+        ? resolveInkColor(colorEnabled, COCKPIT_COLORS.interactive)
         : item.selected
-          ? (colorEnabled ? COCKPIT_COLORS.secondary : undefined)
+          ? resolveInkColor(colorEnabled, COCKPIT_COLORS.brand)
           : item.current
-            ? (colorEnabled ? COCKPIT_COLORS.muted : undefined)
+            ? resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
             : undefined;
       return React.createElement(Text, {
         key: item.id,
@@ -80,7 +102,7 @@ export function CockpitNav({ model, colorEnabled = true }) {
       }, `${item.marker} ${item.label}${suffix}`);
     }),
     model.explanation && React.createElement(Text, {
-      color: COCKPIT_COLORS.muted
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
     }, model.explanation)
   );
 }
@@ -90,7 +112,7 @@ function stripLabel(item, { compact }) {
   return item.label.split(/[&·]/)[0].trim().split(/\s+/)[0];
 }
 
-/** Horizontal navigation strip under the top bar. */
+/** Segmented horizontal nav — no border; active segment uses interactive. */
 export function CockpitNavStrip({
   model,
   colorEnabled = true,
@@ -101,18 +123,20 @@ export function CockpitNavStrip({
   const parts = model.items.map((item) => {
     const label = stripLabel(item, { compact });
     const suffix = item.current && !item.selected ? "*" : "";
-    const color = item.focused
-      ? (colorEnabled ? COCKPIT_COLORS.primary : undefined)
+    const active = item.focused || item.selected;
+    const color = item.focused || (focused && item.selected)
+      ? resolveInkColor(colorEnabled, COCKPIT_COLORS.interactive)
       : item.selected
-        ? (colorEnabled ? COCKPIT_COLORS.secondary : undefined)
-        : item.current
-          ? (colorEnabled ? COCKPIT_COLORS.muted : undefined)
-          : (colorEnabled ? COCKPIT_COLORS.muted : undefined);
+        ? resolveInkColor(colorEnabled, COCKPIT_COLORS.interactive)
+        : resolveInkColor(colorEnabled, COCKPIT_COLORS.muted);
+    const text = focused && item.selected
+      ? `[${label}]${suffix}`
+      : `${item.marker}${label}${suffix}`;
     return React.createElement(Text, {
       key: item.id,
-      bold: item.focused || item.selected,
+      bold: active,
       color
-    }, `${item.marker}${label}${suffix}`);
+    }, text);
   });
 
   const joined = [];
@@ -120,7 +144,7 @@ export function CockpitNavStrip({
     if (index > 0) {
       joined.push(React.createElement(Text, {
         key: `sep-${index}`,
-        color: colorEnabled ? COCKPIT_COLORS.muted : undefined
+        color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
       }, " · "));
     }
     joined.push(node);
@@ -129,13 +153,12 @@ export function CockpitNavStrip({
   return React.createElement(Box, {
     flexDirection: "column",
     width: "100%",
-    borderStyle: "single",
-    borderColor: focused ? COCKPIT_COLORS.primary : COCKPIT_COLORS.muted,
-    paddingX: 1
+    marginTop: 0,
+    marginBottom: 0
   },
     React.createElement(Box, { flexDirection: "row", flexWrap: "wrap" }, ...joined),
     model.explanation && React.createElement(Text, {
-      color: COCKPIT_COLORS.muted
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
     }, model.explanation)
   );
 }
@@ -145,7 +168,9 @@ export function CockpitSystemStrip({ model, colorEnabled = true }) {
   return React.createElement(Box, { flexDirection: "column" },
     model.rows.map((row) =>
       React.createElement(Text, { key: row.key },
-        React.createElement(Text, { color: COCKPIT_COLORS.muted }, `${row.key.padEnd(7)}`),
+        React.createElement(Text, {
+          color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
+        }, `${row.key.padEnd(7)}`),
         React.createElement(CockpitBadge, {
           label: row.value,
           kind: row.kind,
@@ -156,23 +181,19 @@ export function CockpitSystemStrip({ model, colorEnabled = true }) {
   );
 }
 
-export function CockpitFooter({ model, columns = 80 }) {
+/** Single-line shortcut bar — no framed box. */
+export function CockpitFooter({ model, columns = 80, colorEnabled = true }) {
   const width = Math.max(24, Math.min(Number(columns) || 80, 120));
-  const bar = Math.max(20, width - 2);
-  return React.createElement(Box, { flexDirection: "column", width: "100%" },
-    React.createElement(Text, { color: COCKPIT_COLORS.muted },
-      `├${"─".repeat(bar)}┤`
-    ),
-    React.createElement(Text, { color: COCKPIT_COLORS.muted }, `│ ${model.text}`),
-    React.createElement(Text, { color: COCKPIT_COLORS.muted },
-      `╰${"─".repeat(bar)}╯`
-    )
+  return React.createElement(Box, { width: "100%", marginTop: 1 },
+    React.createElement(Text, {
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
+    }, String(model.text ?? "").slice(0, width))
   );
 }
 
 /**
  * Responsive single-panel shell: TopBar → NavStrip → Main → Footer.
- * SYSTEM side column removed (diagnostics via Enter/detail in later slices).
+ * No nested borders — hierarchy via type and spacing.
  */
 export function CockpitShell({
   topBar,
@@ -196,8 +217,9 @@ export function CockpitShell({
     React.createElement(CockpitPanel, {
       title: undefined,
       focused: contentFocused,
-      width: "100%"
+      width: "100%",
+      colorEnabled
     }, children),
-    React.createElement(CockpitFooter, { model: footer, columns })
+    React.createElement(CockpitFooter, { model: footer, columns, colorEnabled })
   );
 }

package/src/global/ink/cockpit-changes.js

@@ -143,6 +143,6 @@ export function formatChangesActionLines({
 
 export function buildChangesFooterParts(phase) {
   if (phase === CHANGES_PHASE.PREVIEWING || phase === CHANGES_PHASE.APPLYING) return ["Working…", "Esc Back"];
-  if (phase === CHANGES_PHASE.CONFIRMING) return ["Y Apply", "N/Esc Cancel"];
-  return ["A Preview", "R Re-scan", "Esc Back"];
+  if (phase === CHANGES_PHASE.CONFIRMING) return ["Y Apply", "N/Esc Cancel", "Space"];
+  return ["A Preview", "R Re-scan", "Space", "Esc Back"];
 }

package/src/global/ink/cockpit-control-center.js

@@ -1,5 +1,10 @@
 import { CONTROL_PLANE_HEALTH } from "../control-plane-snapshot.js";
 import { formatAlertsHeadline } from "./cockpit-alerts.js";
+import {
+  adaptUsageModel,
+  formatMeasuredBudgets,
+  formatUsageLinesFromModel
+} from "./cockpit-usage.js";
 
 export function buildControlCenterModel({
   projectName = "project",
@@ -112,73 +117,16 @@ function formatHealthLabel(kind) {
 }
 
 function formatTokenHeadline(budgets) {
-  if (!budgets || typeof budgets !== "object") return "Data unavailable";
-  const parts = [];
-  if (Number.isFinite(budgets.stableUsedTokens) && Number.isFinite(budgets.stableBudgetTokens)) {
-    parts.push(`stable ${budgets.stableUsedTokens}/${budgets.stableBudgetTokens}`);
-  }
-  if (Number.isFinite(budgets.requestUsedTokens) && Number.isFinite(budgets.requestBudgetTokens)) {
-    parts.push(`request ${budgets.requestUsedTokens}/${budgets.requestBudgetTokens}`);
-  }
-  return parts.length > 0 ? parts.join(" · ") : "Data unavailable";
-}
-
-/**
- * Usage surface: measured budgets when present, configured profile limits,
- * and auditable run tokenUsage — never invent totals.
- */
-function resolveProfileLimits(dashboard) {
-  const resolved = dashboard?.profile?.profile ?? {};
-  const configured = [];
-  if (Number.isFinite(resolved.tokenBudget)) configured.push(`token ${resolved.tokenBudget}`);
-  if (Number.isFinite(resolved.stableContextBudget)) configured.push(`stable ${resolved.stableContextBudget}`);
-  if (Number.isFinite(resolved.requestContextBudget)) configured.push(`request ${resolved.requestContextBudget}`);
-  return configured;
+  return formatMeasuredBudgets(budgets) ?? "Data unavailable";
 }
 
-function hasFiniteUsage(usage) {
-  if (!usage || typeof usage !== "object") return false;
-  return Number.isFinite(usage.total)
-    || Number.isFinite(usage.input)
-    || Number.isFinite(usage.output);
-}
-
-function formatRunUsageLine(run) {
-  const usage = run.tokenUsage;
-  const parts = [];
-  if (Number.isFinite(usage.input)) parts.push(`in ${usage.input}`);
-  if (Number.isFinite(usage.output)) parts.push(`out ${usage.output}`);
-  if (Number.isFinite(usage.total)) parts.push(`total ${usage.total}`);
-  return `${run.agentId ?? "agent"} · ${parts.join(" · ")}`;
-}
-
-export function formatUsageLines({ snapshot = null, dashboard = null } = {}) {
-  const lines = ["MEASURED"];
-  const measured = formatTokenHeadline(snapshot?.budgets);
-  lines.push(measured === "Data unavailable" ? "Data unavailable" : measured);
-
-  const configured = resolveProfileLimits(dashboard);
-  lines.push("", "CONFIGURED LIMITS");
-  lines.push(configured.length > 0 ? configured.join(" · ") : "No profile token budgets configured.");
-
-  const runs = [...(dashboard?.activeRuns ?? []), ...(dashboard?.recentRuns ?? [])]
-    .filter((run) => hasFiniteUsage(run?.tokenUsage));
-  lines.push("", "RUN USAGE");
-  if (runs.length === 0) {
-    lines.push("No auditable run tokenUsage yet.");
-  } else {
-    for (const run of runs.slice(0, 3)) {
-      lines.push(formatRunUsageLine(run));
-    }
-  }
-
-  lines.push("", "Auditable budgets only — no invented token savings.");
-  return lines;
+/** Usage surface via shared auditable model — never invent totals. */
+export function formatUsageLines({
+  snapshot = null, dashboard = null, layoutMode = undefined
+} = {}) {
+  return formatUsageLinesFromModel(adaptUsageModel({ snapshot, dashboard, layoutMode }));
 }
 
 export function hasAuditableUsage({ snapshot = null, dashboard = null } = {}) {
-  if (formatTokenHeadline(snapshot?.budgets) !== "Data unavailable") return true;
-  if (resolveProfileLimits(dashboard).length > 0) return true;
-  return [...(dashboard?.activeRuns ?? []), ...(dashboard?.recentRuns ?? [])]
-    .some((run) => hasFiniteUsage(run?.tokenUsage));
+  return adaptUsageModel({ snapshot, dashboard }).hasEvidence;
 }

package/src/global/ink/cockpit-controller.js

@@ -35,7 +35,10 @@ export function createCockpitUiState({
   helpOpen = false,
   returnView = null,
   paletteOpen = false,
-  paletteIndex = 0
+  paletteIndex = 0,
+  overviewDetailsOpen = false,
+  governanceDetailsOpen = false,
+  activityDetailsOpen = false
 } = {}) {
   const regions = regionsForLayout(layoutMode);
   const preferred = region ?? defaultRegionForView(view, layoutMode);
@@ -52,6 +55,9 @@ export function createCockpitUiState({
     returnView,
     paletteOpen,
     paletteIndex: Math.max(0, paletteIndex),
+    overviewDetailsOpen: Boolean(overviewDetailsOpen),
+    governanceDetailsOpen: Boolean(governanceDetailsOpen),
+    activityDetailsOpen: Boolean(activityDetailsOpen),
     shouldExit: false
   };
 }
@@ -145,7 +151,10 @@ export function reduceCockpitUi(state, action) {
         listIndex: 0,
         region: defaultRegionForView(item.view, state.layoutMode),
         helpOpen: false,
-        returnView: null
+        returnView: null,
+        overviewDetailsOpen: false,
+        governanceDetailsOpen: false,
+        activityDetailsOpen: false
       });
     }
     case "set-view": {
@@ -159,9 +168,21 @@ export function reduceCockpitUi(state, action) {
           : clamp(action.navIndex, 0, COCKPIT_NAV.length - 1),
         region: action.region ?? defaultRegionForView(nextView, state.layoutMode),
         returnView: action.returnView ?? state.returnView,
-        helpOpen: nextView === ORCHESTRATOR_VIEWS.HELP
+        helpOpen: nextView === ORCHESTRATOR_VIEWS.HELP,
+        overviewDetailsOpen: false,
+        governanceDetailsOpen: false,
+        activityDetailsOpen: false
       });
     }
+    case "toggle-overview-details":
+      if (state.view !== ORCHESTRATOR_VIEWS.HOME) return state;
+      return { ...state, overviewDetailsOpen: !state.overviewDetailsOpen };
+    case "toggle-governance-details":
+      if (state.view !== ORCHESTRATOR_VIEWS.CHANGES) return state;
+      return { ...state, governanceDetailsOpen: !state.governanceDetailsOpen };
+    case "toggle-activity-details":
+      if (state.view !== ORCHESTRATOR_VIEWS.ACTIVITY) return state;
+      return { ...state, activityDetailsOpen: !state.activityDetailsOpen };
     case "toggle-help":
       if (state.helpOpen || state.view === ORCHESTRATOR_VIEWS.HELP) {
         return goOverview(state);
@@ -170,12 +191,24 @@ export function reduceCockpitUi(state, action) {
         ...state,
         helpOpen: true,
         view: ORCHESTRATOR_VIEWS.HELP,
-        region: defaultRegionForView(ORCHESTRATOR_VIEWS.HELP, state.layoutMode)
+        region: defaultRegionForView(ORCHESTRATOR_VIEWS.HELP, state.layoutMode),
+        overviewDetailsOpen: false,
+        governanceDetailsOpen: false,
+        activityDetailsOpen: false
       });
     case "escape": {
       if (state.paletteOpen) {
         return closePalette(state);
       }
+      if (state.view === ORCHESTRATOR_VIEWS.HOME && state.overviewDetailsOpen) {
+        return { ...state, overviewDetailsOpen: false };
+      }
+      if (state.view === ORCHESTRATOR_VIEWS.CHANGES && state.governanceDetailsOpen) {
+        return { ...state, governanceDetailsOpen: false };
+      }
+      if (state.view === ORCHESTRATOR_VIEWS.ACTIVITY && state.activityDetailsOpen) {
+        return { ...state, activityDetailsOpen: false };
+      }
       if (state.helpOpen || state.view === ORCHESTRATOR_VIEWS.HELP) {
         return goOverview(state);
       }
@@ -228,7 +261,10 @@ function goOverview(state) {
     navIndex: 0,
     listIndex: 0,
     region: defaultRegionForView(ORCHESTRATOR_VIEWS.HOME, state.layoutMode),
-    returnView: null
+    returnView: null,
+    overviewDetailsOpen: false,
+    governanceDetailsOpen: false,
+    activityDetailsOpen: false
   });
 }
 

package/src/global/ink/cockpit-enter.js

@@ -14,6 +14,7 @@ export function resolveEnterNavIntent({
   const isOverview = navItem.id === "overview" || navItem.view === ORCHESTRATOR_VIEWS.HOME;
   if (isOverview) {
     if (currentView === ORCHESTRATOR_VIEWS.HOME && ctaDestination) {
+      if (ctaDestination === "setup") return { kind: "activate-setup" };
       return { kind: "activate-cta", destination: ctaDestination };
     }
     return { kind: "open-nav", view: ORCHESTRATOR_VIEWS.HOME };