@kal-elsam/kairo-runtime 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kal-elsam/kairo-runtime",
-  "version": "0.10.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.10.0");
+assert.equal(pkg.version, "0.11.0");
 assert.ok(pkg.dependencies["ansi-escapes"]);
 
 assert.equal(resolveLayoutMode({ columns: 120, rows: 40 }), LAYOUT_MODES.WIDE);

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

@@ -12,7 +12,7 @@ export function CockpitEmptyState({ title, message, hint, colorEnabled = true })
   return React.createElement(Box, { flexDirection: "column", marginY: 1 },
     title && React.createElement(Text, {
       bold: true,
-      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.secondary)
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.brand)
     }, title),
     message && React.createElement(Text, null, message),
     hint && React.createElement(Text, {
@@ -21,23 +21,20 @@ export function CockpitEmptyState({ title, message, hint, colorEnabled = true })
   );
 }
 
+/** 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: resolveInkColor(
-      colorEnabled,
-      focused ? COCKPIT_COLORS.primary : COCKPIT_COLORS.muted
-    ),
-    paddingX: 1,
+    paddingX: 0,
+    marginY: 1,
     flexGrow: 1
   },
     title && React.createElement(Text, {
       bold: true,
       color: resolveInkColor(
         colorEnabled,
-        focused ? COCKPIT_COLORS.primary : COCKPIT_COLORS.secondary
+        focused ? COCKPIT_COLORS.interactive : COCKPIT_COLORS.brand
       )
     }, title),
     children
@@ -48,7 +45,7 @@ export function CockpitSection({ title, children, colorEnabled = true }) {
   return React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
     title && React.createElement(Text, {
       bold: true,
-      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.secondary)
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.brand)
     }, title),
     children
   );
@@ -60,15 +57,29 @@ export function CockpitKeyHint({ keys, label, colorEnabled = true }) {
   }, `${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(Text, {
-      bold: true,
-      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.primary)
-    }, `╭─ ${model.brand} ─ ${model.status}`),
+    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, {
       color: resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
-    }, `${model.projectLabel} ─╮`)
+    }, model.projectLabel)
   );
 }
 
@@ -78,9 +89,9 @@ export function CockpitNav({ model, colorEnabled = true }) {
     model.items.map((item) => {
       const suffix = item.current && !item.selected ? " (open)" : "";
       const color = item.focused
-        ? resolveInkColor(colorEnabled, COCKPIT_COLORS.primary)
+        ? resolveInkColor(colorEnabled, COCKPIT_COLORS.interactive)
         : item.selected
-          ? resolveInkColor(colorEnabled, COCKPIT_COLORS.secondary)
+          ? resolveInkColor(colorEnabled, COCKPIT_COLORS.brand)
           : item.current
             ? resolveInkColor(colorEnabled, COCKPIT_COLORS.muted)
             : undefined;
@@ -101,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,
@@ -112,16 +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
-      ? resolveInkColor(colorEnabled, COCKPIT_COLORS.primary)
+    const active = item.focused || item.selected;
+    const color = item.focused || (focused && item.selected)
+      ? resolveInkColor(colorEnabled, COCKPIT_COLORS.interactive)
       : item.selected
-        ? resolveInkColor(colorEnabled, COCKPIT_COLORS.secondary)
+        ? 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 = [];
@@ -138,12 +153,8 @@ export function CockpitNavStrip({
   return React.createElement(Box, {
     flexDirection: "column",
     width: "100%",
-    borderStyle: "single",
-    borderColor: resolveInkColor(
-      colorEnabled,
-      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, {
@@ -170,20 +181,19 @@ export function CockpitSystemStrip({ model, colorEnabled = true }) {
   );
 }
 
+/** 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);
-  const muted = resolveInkColor(colorEnabled, COCKPIT_COLORS.muted);
-  return React.createElement(Box, { flexDirection: "column", width: "100%" },
-    React.createElement(Text, { color: muted }, `├${"─".repeat(bar)}┤`),
-    React.createElement(Text, { color: muted }, `│ ${model.text}`),
-    React.createElement(Text, { color: 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,

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

@@ -111,7 +111,8 @@ export function renderCockpitView({
         model: controlCenter,
         detailsOpen: overviewDetailsOpen,
         colorEnabled,
-        unicode
+        unicode,
+        layoutMode
       });
     case ORCHESTRATOR_VIEWS.USAGE:
       return React.createElement(SemanticUsagePanel, {

package/src/global/ink/orchestrator-app.js

@@ -41,7 +41,7 @@ import { handleLaunchInput } from "./launch-input.js";
 import { useTerminalSize } from "./use-terminal-size.js";
 import { useOrchestratorData } from "./use-orchestrator-data.js";
 import { resolveTerminalCapabilities } from "./terminal-capabilities.js";
-import { COCKPIT_COLORS } from "./theme.js";
+import { COCKPIT_COLORS, resolveInkColor } from "./theme.js";
 import { LAYOUT_MODES } from "./layout.js";
 import { CHANGES_PHASE } from "./cockpit-changes.js";
 import { RECOVERY_PHASE, listRecoverySnapshots } from "./cockpit-recovery.js";
@@ -466,14 +466,22 @@ export function OrchestratorApp({
 
   if (data.loading) {
     return React.createElement(Box, { flexDirection: "column" },
-      React.createElement(Text, { bold: true, color: COCKPIT_COLORS.primary }, "KAIRO"),
-      React.createElement(Text, { color: COCKPIT_COLORS.muted }, "Loading cockpit…")
+      React.createElement(Text, {
+        bold: true,
+        color: resolveInkColor(caps.color, COCKPIT_COLORS.brand)
+      }, "KAIRO"),
+      React.createElement(Text, {
+        color: resolveInkColor(caps.color, COCKPIT_COLORS.muted)
+      }, "Loading cockpit…")
     );
   }
 
   if (data.error) {
     return React.createElement(Box, { flexDirection: "column" },
-      React.createElement(Text, { bold: true, color: COCKPIT_COLORS.danger }, "Runtime error"),
+      React.createElement(Text, {
+        bold: true,
+        color: resolveInkColor(caps.color, COCKPIT_COLORS.danger)
+      }, "Runtime error"),
       React.createElement(Text, null, data.error),
       React.createElement(Text, { dimColor: true },
         data.retrying ? "Retrying read-only scan…" : "R Retry · Esc to exit")

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/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 = {
@@ -80,39 +87,82 @@ export function adaptControlCenterToOverview(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);
+}