@kal-elsam/kairo-runtime 0.10.0 → 0.12.0

package/src/global/ink/theme.js

@@ -1,15 +1,20 @@
 /**
- * Deep-space cockpit theme. Status always has a text label — never color alone.
+ * Kairo Cockpit theme — amber brand, ice interactive, semantic status.
+ * Status always has a text label — never color alone.
  */
 
 export const COCKPIT_COLORS = {
-  primary: "cyan",
-  secondary: "magenta",
-  success: "green",
-  warning: "yellow",
-  danger: "red",
+  brand: "#E8A017",
+  interactive: "#7EC8E8",
+  success: "#3DDC97",
+  warning: "#F0C674",
+  danger: "#FF6B6B",
   muted: "gray",
-  border: "cyan"
+  /** @deprecated alias — prefer interactive */
+  primary: "#7EC8E8",
+  /** @deprecated alias — prefer brand */
+  secondary: "#E8A017",
+  border: "#7EC8E8"
 };
 
 export const STATUS_LABELS = {
@@ -69,7 +74,7 @@ export function statusColor(kind, { colorEnabled = true } = {}) {
     case "muted":
       return COCKPIT_COLORS.muted;
     default:
-      return COCKPIT_COLORS.primary;
+      return COCKPIT_COLORS.interactive;
   }
 }
 

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

@@ -40,7 +40,14 @@ import {
 } 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";
+import { listAlerts } from "../runtime/alerts/alert-store.js";
+import {
+  controlledDismissAlert, controlledResolveAlert
+} from "../runtime/alerts/controlled-alert-actions.js";
+import { buildCompanionSnapshot } from "../observability/build-companion-snapshot.js";
+import { resolveGitHeadSha } from "../observability/graphify-probe.js";
+import { runPassiveObservabilitySnapshot } from "../observability/passive-snapshot-flight.js";
+import { inspectEngramIntegration } from "../integrations/engram-evidence.js";
 
 export function useOrchestratorData({
   homeDir,
@@ -56,6 +63,7 @@ export function useOrchestratorData({
   const [dashboard, setDashboard] = useState(null);
   const [diagnostics, setDiagnostics] = useState(null);
   const [snapshot, setSnapshot] = useState(null);
+  const [companion, setCompanion] = useState(null);
   const [selectedRun, setSelectedRun] = useState(null);
   const [selectedEvents, setSelectedEvents] = useState([]);
   const [reviews, setReviews] = useState([]);
@@ -78,7 +86,24 @@ export function useOrchestratorData({
     cliVersion,
     buildDashboard: buildRuntimeDashboardData,
     buildDiagnostics: buildReadOnlyDiagnostics,
-    buildSnapshot: buildControlPlaneSnapshot
+    buildSnapshot: buildControlPlaneSnapshot,
+    buildCompanion: async ({ dashboard, snapshot: snap }) => buildCompanionSnapshot({
+      controlPlaneHealth: snap?.health ?? null,
+      runs: dashboard?.recentRuns ?? [],
+      inspectEngram: (ctx) => inspectEngramIntegration({
+        env: ctx?.env ?? process.env,
+        homeDir: ctx?.homeDir ?? homeDir
+      }),
+      buildObservability: (ctx) => runPassiveObservabilitySnapshot(ctx, {
+        force: Boolean(ctx?.force)
+      }),
+      observabilityContext: {
+        cwd: workspaceRoot, workspaceRoot, env: process.env,
+        headSha: resolveGitHeadSha(workspaceRoot)
+      },
+      loadReviews: async () => listReviewReceipts({ homeDir, limit: 20 }),
+      loadAlerts: async () => listAlerts({ homeDir, limit: 50 })
+    })
   })), [homeDir, workspaceRoot, packageName, packageRoot, cliVersion]);
 
   const reload = async ({ showLoading = false, asRetry = false } = {}) => {
@@ -98,6 +123,7 @@ export function useOrchestratorData({
     setDashboard(outcome.result.dashboard);
     setDiagnostics(outcome.result.diagnostics);
     setSnapshot(outcome.result.snapshot);
+    setCompanion(outcome.result.companion ?? null);
     try {
       setAlerts(await listAlerts({ homeDir, limit: 50 }));
     } catch {
@@ -166,8 +192,14 @@ export function useOrchestratorData({
     if (!alert) return;
     setBusy(true);
     try {
-      if (action === "dismiss") await dismissAlert(alert.alertId, { homeDir });
-      else await resolveAlert(alert.alertId, { homeDir });
+      const result = action === "dismiss"
+        ? await controlledDismissAlert({
+          alertId: alert.alertId, confirmed: true, source: "cockpit", homeDir
+        })
+        : await controlledResolveAlert({
+          alertId: alert.alertId, confirmed: true, source: "cockpit", homeDir
+        });
+      if (!result.ok) throw new Error(result.message ?? result.code);
       setAlerts(await listAlerts({ homeDir, limit: 50 }));
       setStatusMessage(action === "dismiss" ? "Alert dismissed" : "Alert resolved");
     } catch (error) {
@@ -197,6 +229,9 @@ export function useOrchestratorData({
         cwd: workspaceRoot,
         model: draft.model.trim() || null,
         permissions,
+        allowUnsafePermissions: Boolean(draft.allowUnsafePermissions),
+        permissionSource: draft.permissionSource ?? "cockpit",
+        permissionConsentType: draft.allowUnsafePermissions ? "cockpit-unsafe-confirm" : null,
         cliVersion,
         profile: profile ?? null,
         follow: false,
@@ -424,6 +459,7 @@ export function useOrchestratorData({
     dashboard,
     diagnostics,
     snapshot,
+    companion,
     selectedRun,
     setSelectedRun,
     selectedEvents,

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

@@ -1,13 +1,12 @@
 /** 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 { ActionList, Callout, Confirm, Details, SectionLabel, ViewTitle } from "./semantic.js";
 import { detailsPathLimit } from "./live-governance.js";
 
 export function activityContentLimits(layoutMode = LAYOUT_MODES.COMPACT) {
@@ -157,9 +156,7 @@ export function SemanticActivityPanel({
     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(ViewTitle, { colorEnabled }, view.title),
     React.createElement(Callout, {
       tone: view.callout.tone, title: view.callout.title,
       body: view.callout.body || undefined, colorEnabled, compact: true
@@ -174,11 +171,11 @@ export function SemanticActivityPanel({
         : null,
     view.primary?.detail && !view.confirm
       ? React.createElement(Text, null, view.primary.detail) : null,
-    React.createElement(Text, { bold: true }, "Recent"),
+    React.createElement(SectionLabel, { colorEnabled }, "Recent"),
     React.createElement(ActionList, {
       items: view.recent, selectedIndex: -1, focused: false, colorEnabled, unicode
     }),
-    React.createElement(Text, { bold: true }, "Snapshots"),
+    React.createElement(SectionLabel, { colorEnabled }, "Snapshots"),
     React.createElement(ActionList, {
       items: view.snapshots, selectedIndex: view.selectedIndex,
       focused: contentFocused, colorEnabled, unicode

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

@@ -5,11 +5,10 @@
  */
 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 { ActionList, Callout, ViewTitle } from "./semantic.js";
 import { windowSlice } from "./live-activity.js";
 
 export function alertsListLimit(layoutMode = LAYOUT_MODES.COMPACT) {
@@ -138,9 +137,7 @@ export function SemanticAlertsPanel({
   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(ViewTitle, { colorEnabled }, model.title),
     React.createElement(Callout, {
       tone: model.callout.tone,
       title: model.callout.title,

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

@@ -1,11 +1,10 @@
 /** 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 { ActionList, Callout, Confirm, Details, ViewTitle } from "./semantic.js";
 import { mapHealthTone } from "./live-overview.js";
 
 function healthLabel(kind) {
@@ -151,10 +150,7 @@ export function SemanticGovernancePanel({
     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(ViewTitle, { colorEnabled }, view.title),
     React.createElement(Callout, {
       tone: view.callout.tone,
       title: view.callout.title,

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

@@ -5,14 +5,13 @@
  */
 import React from "react";
 import { Box, Text } from "ink";
-import { COCKPIT_COLORS } from "../theme.js";
 import { LAYOUT_MODES } from "../layout.js";
 import { ORCHESTRATOR_VIEWS, formatRunLines } from "../orchestrator-state.js";
 import {
   RUNS_HUB_ITEMS, formatOrchestrationStatus, formatRunsHubLines
 } from "../cockpit-runs.js";
 import { formatReviewListLines } from "../cockpit-reviews.js";
-import { ActionList, Callout } from "./semantic.js";
+import { ActionList, Callout, ViewTitle } from "./semantic.js";
 import { windowSlice } from "./live-activity.js";
 
 export function orchestrationListLimit(layoutMode = LAYOUT_MODES.COMPACT) {
@@ -167,9 +166,7 @@ export function SemanticOrchestrationPanel({
   });
   const listFocused = contentFocused && !model.isEmpty;
   return React.createElement(Box, { flexDirection: "column" },
-    React.createElement(Text, {
-      bold: true, color: colorEnabled ? COCKPIT_COLORS.secondary : undefined
-    }, model.title),
+    React.createElement(ViewTitle, { colorEnabled }, model.title),
     React.createElement(Callout, {
       tone: model.callout.tone,
       title: model.callout.title,

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

@@ -1,11 +1,18 @@
 /**
- * Live semantic Overview for Cockpit HOME.
+ * 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 = {
@@ -48,6 +55,10 @@ export function buildOverviewDetails(model = {}) {
   if (typeof model.alerts?.count === "number") {
     lines.push(`Open alerts · ${model.alerts.count}`);
   }
+  const secondary = model.companionNextAction;
+  if (secondary?.title && secondary.kind !== "idle") {
+    lines.push(`Companion · ${secondary.title}`);
+  }
   if (lines.length === 0) return ["No extra evidence beyond the metrics above."];
   return lines;
 }
@@ -55,10 +66,15 @@ export function buildOverviewDetails(model = {}) {
 /**
  * Pure adapter: buildControlCenterModel → semantic overview props.
  * Callout / CTA / metrics never include paths or IDs.
+ * Primary action is always governance CTA — companion is secondary metrics/details only.
  */
 export function adaptControlCenterToOverview(model = {}) {
   const status = model.status ?? model.health ?? {};
   const next = model.nextAction ?? model.cta ?? {};
+  const companionMetrics = (model.companion?.lines ?? []).map((label, i) => ({
+    id: `companion-${i}`,
+    label
+  }));
   return {
     title: model.title ?? "Overview",
     callout: {
@@ -74,45 +90,89 @@ export function adaptControlCenterToOverview(model = {}) {
     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"}` }
+      { id: "tokens", label: `Tokens · ${model.tokens?.headline ?? "Data unavailable"}` },
+      ...companionMetrics
     ],
     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
+  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" },
-    React.createElement(Text, {
-      bold: true,
-      color: colorEnabled ? COCKPIT_COLORS.secondary : undefined
-    }, view.title),
-    React.createElement(Callout, {
-      tone: view.callout.tone,
-      title: view.callout.title,
-      body: view.callout.body,
-      colorEnabled,
-      compact: true
-    }),
-    React.createElement(Text, { bold: true }, `  ${view.primary.label}`),
-    view.primary.detail
-      ? React.createElement(Text, null, view.primary.detail)
-      : null,
-    view.primary.hint
-      ? React.createElement(Text, { color: colorEnabled ? COCKPIT_COLORS.muted : undefined }, view.primary.hint)
-      : null,
-    React.createElement(ActionList, {
-      items: view.metrics,
-      selectedIndex: -1,
-      focused: false,
-      colorEnabled,
-      unicode
-    }),
+    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",

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

@@ -4,12 +4,11 @@
  */
 import React from "react";
 import { Box, Text } from "ink";
-import { COCKPIT_COLORS } from "../theme.js";
 import { LAYOUT_MODES } from "../layout.js";
 import {
   SETTINGS_PHASE, getCuratedIntegration, listCuratedIntegrations
 } from "../cockpit-settings.js";
-import { ActionList, Callout, Confirm, Details, Receipt } from "./semantic.js";
+import { ActionList, Callout, Confirm, Details, Receipt, SectionLabel, ViewTitle } from "./semantic.js";
 import { windowSlice } from "./live-activity.js";
 
 export function settingsListLimit(layoutMode = LAYOUT_MODES.COMPACT) {
@@ -160,9 +159,7 @@ export function SemanticSettingsPanel({
     model.receipt && React.createElement(Receipt, {
       title: model.receipt.title, lines: model.receipt.lines, colorEnabled
     }),
-    React.createElement(Text, {
-      bold: true, color: colorEnabled ? COCKPIT_COLORS.secondary : undefined
-    }, model.title),
+    React.createElement(ViewTitle, { colorEnabled }, model.title),
     React.createElement(Callout, {
       tone: model.callout.tone, title: model.callout.title,
       body: model.callout.body || undefined, colorEnabled, compact: true
@@ -176,7 +173,7 @@ export function SemanticSettingsPanel({
       focused: listFocused, colorEnabled, unicode
     }),
     model.profilePolicy.length > 0 && React.createElement(Box, { flexDirection: "column" },
-      React.createElement(Text, { bold: true }, "Profile & Policy"),
+      React.createElement(SectionLabel, { colorEnabled }, "Profile & Policy"),
       React.createElement(ActionList, {
         items: model.profilePolicy, selectedIndex: -1, focused: false, colorEnabled, unicode
       })

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

@@ -7,7 +7,7 @@ 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 } from "./semantic.js";
+import { ActionList, Callout, SectionLabel, ViewTitle } from "./semantic.js";
 
 export function SemanticUsagePanel({
   snapshot = null,
@@ -19,9 +19,7 @@ export function SemanticUsagePanel({
   const model = adaptUsageModel({ snapshot, dashboard, layoutMode });
   const muted = colorEnabled ? COCKPIT_COLORS.muted : undefined;
   return React.createElement(Box, { flexDirection: "column" },
-    React.createElement(Text, {
-      bold: true, color: colorEnabled ? COCKPIT_COLORS.secondary : undefined
-    }, model.title),
+    React.createElement(ViewTitle, { colorEnabled }, model.title),
     React.createElement(Callout, {
       tone: model.callout.tone,
       title: model.callout.title,
@@ -29,11 +27,11 @@ export function SemanticUsagePanel({
       colorEnabled,
       compact: true
     }),
-    React.createElement(Text, { bold: true }, "Measured"),
+    React.createElement(SectionLabel, { colorEnabled }, "Measured"),
     React.createElement(Text, null, `  ${model.measured}`),
-    React.createElement(Text, { bold: true }, "Configured limits"),
+    React.createElement(SectionLabel, { colorEnabled }, "Configured limits"),
     React.createElement(Text, null, `  ${model.configured}`),
-    React.createElement(Text, { bold: true }, "Run usage"),
+    React.createElement(SectionLabel, { colorEnabled }, "Run usage"),
     model.runs.length === 0
       ? React.createElement(Text, null, "  No auditable run tokenUsage yet.")
       : React.createElement(ActionList, {

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

@@ -4,6 +4,15 @@ 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);
@@ -13,7 +22,7 @@ export function ActionList({ items = [], selectedIndex = 0, focused = true, colo
       return React.createElement(Text, {
         key: item.id ?? String(i),
         bold: sel,
-        color: sel && focused && colorEnabled ? COCKPIT_COLORS.primary : undefined
+        color: sel && focused && colorEnabled ? COCKPIT_COLORS.interactive : undefined
       }, `${sel && focused ? g.focus : " "} ${item.label}${item.hint ? `  ${item.hint}` : ""}`);
     })
   );
@@ -30,7 +39,7 @@ export function Stepper({ steps = [], currentIndex = 0, colorEnabled = true, uni
       const cur = i === currentIndex;
       const color = isDone
         ? (colorEnabled ? COCKPIT_COLORS.success : undefined)
-        : cur ? (colorEnabled ? COCKPIT_COLORS.primary : undefined) : mute(colorEnabled);
+        : 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}`);
@@ -50,24 +59,24 @@ export function Callout({ tone = "info", title, body, colorEnabled = true, compa
 }
 
 export function Confirm({ summary, primaryLabel = "Confirm", focused = true, colorEnabled = true, mark = " " }) {
-  return React.createElement(Box, { flexDirection: "column" },
+  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.primary : undefined
+      color: focused && colorEnabled ? COCKPIT_COLORS.interactive : undefined
     }, `${mark} ${primaryLabel}`)
   );
 }
 
 export function Receipt({ title = "Receipt", lines = [], colorEnabled = true }) {
-  return React.createElement(Box, { flexDirection: "column" },
+  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.primary : mute(colorEnabled);
+  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}`),
@@ -82,3 +91,11 @@ export function KeyBar({ hints = [], colorEnabled = true, columns = 80 }) {
       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);
+}