@kal-elsam/kairo-runtime 0.9.0 → 0.11.0

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Box, Text, useApp, useInput } from "ink";
 import { stdout as output } from "node:process";
-import { BRAND, WIZARD_COPY } from "../brand/index.js";
+import { BRAND } from "../brand/index.js";
 import { DEFAULT_COMPONENT_IDS, describeComponentCatalog } from "../component-registry.js";
 import { GLOBAL_AGENT_IDS, detectInstalledAdapters, listAdapters } from "../registry.js";
 import { buildSetupPreview, resolveComponentSelection } from "../clack/setup-preview.js";
@@ -9,72 +9,57 @@ import {
   SETUP_STEPS,
   buildAgentOptions,
   buildComponentOptions,
-  formatInkDetectPanel,
   formatInkHeaderLines,
-  formatInkPreviewLines,
-  formatInkSelectList,
   formatInkSplashLines,
   INITIAL_SETUP_STEP,
   shouldStartPreviewLoad,
   shouldUseCompactSplashLogo,
+  setupLineKey,
   toggleComponentSelection,
   toggleSelection,
   transitionFromSplash
 } from "./setup-state.js";
-import { COCKPIT_COLORS } from "./theme.js";
-import { CockpitPanel } from "./cockpit/primitives.js";
+import { COCKPIT_COLORS, resolveInkColor } from "./theme.js";
+import { useTerminalSize } from "./use-terminal-size.js";
+import { resolveTerminalCapabilities } from "./terminal-capabilities.js";
+import { SemanticSetupPanel } from "./ux/live-setup.js";
 
-const INK_COLORS = {
-  accent: COCKPIT_COLORS.primary,
-  success: COCKPIT_COLORS.success,
-  warning: COCKPIT_COLORS.warning,
-  danger: COCKPIT_COLORS.danger,
-  muted: COCKPIT_COLORS.muted
-};
-
-function Header() {
+export function SetupHeader({ colorEnabled = true }) {
   const lines = formatInkHeaderLines();
   return React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
-    React.createElement(Text, { bold: true, color: INK_COLORS.accent }, `╭─ ${lines[0]}`),
-    React.createElement(Text, { color: COCKPIT_COLORS.secondary }, lines[1]),
+    React.createElement(Text, {
+      bold: true,
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.primary)
+    }, `╭─ ${lines[0]}`),
+    React.createElement(Text, {
+      color: resolveInkColor(colorEnabled, COCKPIT_COLORS.secondary)
+    }, lines[1]),
     React.createElement(Text, { dimColor: true }, lines[2])
   );
 }
 
-function Panel({ title, children }) {
-  return React.createElement(CockpitPanel, {
-    title,
-    focused: true,
-    width: "100%"
-  }, children);
-}
-
-function Footer({ children }) {
-  return React.createElement(Text, { dimColor: true }, children);
-}
-
-function Splash({ compact, onboarding = false }) {
+export function SetupSplash({ compact, onboarding = false, colorEnabled = true }) {
   const lines = formatInkSplashLines({ compact, onboarding });
   const logoLineCount = compact ? BRAND.compactLogo.length : BRAND.asciiLogo.length;
+  const accent = resolveInkColor(colorEnabled, COCKPIT_COLORS.primary);
+  const muted = resolveInkColor(colorEnabled, COCKPIT_COLORS.muted);
 
   return React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
     lines.map((line, index) => {
+      const key = setupLineKey(index, line);
       if (index < logoLineCount) {
-        return React.createElement(Text, { key: `logo-${index}`, bold: true, color: INK_COLORS.accent }, line);
+        return React.createElement(Text, { key, bold: true, color: accent }, line);
       }
       if (line === BRAND.name) {
-        return React.createElement(Text, { key: `line-${index}`, bold: true, color: INK_COLORS.accent }, line);
+        return React.createElement(Text, { key, bold: true, color: accent }, line);
       }
       if (line === BRAND.tagline) {
-        return React.createElement(Text, { key: `line-${index}`, color: INK_COLORS.muted }, line);
+        return React.createElement(Text, { key, color: muted }, line);
       }
       if (line === BRAND.splashHint || line.includes("Esc to exit") || line.includes("Press Enter")) {
-        return React.createElement(Text, { key: `line-${index}`, dimColor: true }, line);
-      }
-      if (line === "") {
-        return React.createElement(Text, { key: `line-${index}` }, "");
+        return React.createElement(Text, { key, dimColor: true }, line);
       }
-      return React.createElement(Text, { key: `line-${index}` }, line);
+      return React.createElement(Text, { key }, line);
     })
   );
 }
@@ -90,6 +75,12 @@ export function SetupApp({
   onComplete
 }) {
   const { exit } = useApp();
+  const { columns, rows, layoutMode } = useTerminalSize({
+    initialColumns: output.columns ?? 80,
+    initialRows: output.rows ?? 24
+  });
+  const caps = resolveTerminalCapabilities({ columns, rows, isTTY: true });
+  const colorEnabled = caps.color;
   const adapters = listAdapters();
   const detected = detectInstalledAdapters({ homeDir });
   const componentCatalog = describeComponentCatalog({ workspaceRoot });
@@ -98,7 +89,7 @@ export function SetupApp({
   const defaultAgents = detected.length > 0 ? detected : [...GLOBAL_AGENT_IDS];
 
   const [step, setStep] = useState(INITIAL_SETUP_STEP);
-  const useCompactSplash = shouldUseCompactSplashLogo(output.columns);
+  const useCompactSplash = shouldUseCompactSplashLogo(columns);
   const [activeIndex, setActiveIndex] = useState(0);
   const [selectedAgents, setSelectedAgents] = useState(defaultAgents);
   const [selectedComponents, setSelectedComponents] = useState([...DEFAULT_COMPONENT_IDS]);
@@ -238,42 +229,34 @@ export function SetupApp({
     }
   });
 
-  const detectPanel = formatInkDetectPanel({ adapters, detected });
-
   return React.createElement(Box, { flexDirection: "column" },
-    step === SETUP_STEPS.SPLASH && React.createElement(Splash, {
+    step === SETUP_STEPS.SPLASH && React.createElement(SetupSplash, {
       compact: useCompactSplash,
-      onboarding
+      onboarding,
+      colorEnabled
     }),
-    step !== SETUP_STEPS.SPLASH && React.createElement(Header),
-    step === SETUP_STEPS.DETECT && React.createElement(Panel, { title: WIZARD_COPY.detectTitle },
-      detectPanel.split("\n")
-        .map((line) => React.createElement(Text, { key: line }, line))
-    ),
-    step === SETUP_STEPS.AGENTS && React.createElement(Panel, { title: WIZARD_COPY.agentsPrompt },
-      formatInkSelectList({ options: agentOptions, selected: selectedAgents, activeIndex })
-        .map((line) => React.createElement(Text, { key: line }, line))
-    ),
-    step === SETUP_STEPS.COMPONENTS && React.createElement(Panel, { title: WIZARD_COPY.componentsPrompt },
-      formatInkSelectList({ options: componentOptions, selected: selectedComponents, activeIndex })
-        .map((line) => React.createElement(Text, { key: line }, line))
+    step === SETUP_STEPS.SPLASH && React.createElement(Text, { dimColor: true },
+      `${BRAND.splashHint} · Esc cancel`
     ),
-    step === SETUP_STEPS.PREVIEW && React.createElement(Panel, { title: WIZARD_COPY.previewTitle },
-      previewLoading && React.createElement(Text, { color: INK_COLORS.warning }, "Building preview…"),
-      previewError && React.createElement(Text, { color: INK_COLORS.danger }, previewError),
-      preview && formatInkPreviewLines({ preview, componentCatalog })
-        .map((line) => React.createElement(Text, { key: line }, line))
-    ),
-    step === SETUP_STEPS.CONFIRM && React.createElement(Panel, { title: "Confirm" },
-      React.createElement(Text, null, dryRun ? WIZARD_COPY.confirmDryRun : WIZARD_COPY.confirmApply)
-    ),
-    React.createElement(Footer, null,
-      step === SETUP_STEPS.SPLASH && `${BRAND.splashHint} · Esc cancel`,
-      step === SETUP_STEPS.DETECT && "Enter continue · Esc cancel",
-      step === SETUP_STEPS.AGENTS && "↑↓ move · Space toggle · Enter continue · Esc cancel",
-      step === SETUP_STEPS.COMPONENTS && "↑↓ move · Space toggle · Enter continue · Esc cancel",
-      step === SETUP_STEPS.PREVIEW && preview && !previewLoading && "Enter continue · Esc cancel",
-      step === SETUP_STEPS.CONFIRM && "Y apply · N cancel · Esc cancel"
-    )
+    step !== SETUP_STEPS.SPLASH && React.createElement(SetupHeader, { colorEnabled }),
+    step !== SETUP_STEPS.SPLASH && React.createElement(SemanticSetupPanel, {
+      step,
+      activeIndex,
+      agentOptions,
+      componentOptions,
+      componentCatalog,
+      selectedAgents,
+      selectedComponents,
+      adapters,
+      detected,
+      preview,
+      previewLoading,
+      previewError,
+      dryRun,
+      layoutMode,
+      colorEnabled,
+      unicode: caps.unicode,
+      columns
+    })
   );
 }

package/src/global/ink/setup-state.js

@@ -178,6 +178,22 @@ export function formatInkPreviewLines({ preview, componentCatalog }) {
   return lines;
 }
 
+/** Cap preview lines for the active layout; keep remaining-count when truncated. */
+export function setupPreviewLineLimit(layoutMode = "compact") {
+  if (layoutMode === "wide") return 12;
+  if (layoutMode === "minimal") return 5;
+  return 8;
+}
+
+export function windowSetupLines(lines = [], limit = 8) {
+  if (lines.length <= limit) return lines;
+  return [...lines.slice(0, limit), `… ${lines.length - limit} more`];
+}
+
+export function setupLineKey(index, line) {
+  return `${index}-${line}`;
+}
+
 export function formatInkSuccessLines(result, { dryRun = false, cliName = PREFERRED_CLI } = {}) {
   const agentLine = result.agents.map((id) => getAgentLabel(id)).join(", ");
   const componentLine = result.components.length > 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,10 +74,37 @@ export function statusColor(kind, { colorEnabled = true } = {}) {
     case "muted":
       return COCKPIT_COLORS.muted;
     default:
-      return COCKPIT_COLORS.primary;
+      return COCKPIT_COLORS.interactive;
   }
 }
 
+/** Ink `color` / `borderColor` prop — undefined when color is disabled. */
+export function resolveInkColor(colorEnabled, color) {
+  return colorEnabled ? color : undefined;
+}
+
+/**
+ * Detect ANSI color SGR in a string.
+ * Bold (1), dim (2), and reset (0) alone are not color.
+ */
+export function hasColorSgr(text) {
+  const re = /\u001b\[([0-9;]*)m/g;
+  let match;
+  while ((match = re.exec(String(text ?? ""))) !== null) {
+    const params = match[1].length === 0
+      ? []
+      : match[1].split(";").map((part) => Number(part));
+    for (let i = 0; i < params.length; i += 1) {
+      const code = params[i];
+      if (!Number.isFinite(code)) continue;
+      if (code === 38 || code === 48) return true;
+      if ((code >= 30 && code <= 37) || (code >= 90 && code <= 97)) return true;
+      if ((code >= 40 && code <= 47) || (code >= 100 && code <= 107)) return true;
+    }
+  }
+  return false;
+}
+
 export function formatStatusBadge(kind, label = STATUS_LABELS[kind] ?? String(kind)) {
   return label;
 }

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

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

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

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