@kal-elsam/kairo-runtime 0.2.3 → 0.3.0

package/README.md

@@ -33,10 +33,23 @@ kairo
 ```
 
 **First run** (no `~/.harness/state.json`): interactive onboarding → safe diagnosis →
-setup with confirmation → operations dashboard.
+setup with confirmation → full-screen operations cockpit.
 
-**Later runs** (state present): operations dashboard with a stable purpose line and a
-contextual next step (configure, enable intelligence, launch a run, or review problems).
+**Later runs** (state present): full-screen cockpit with mission control (recommended
+action), navigation, and a system strip. Layout adapts to terminal size:
+
+| Mode | Size | Layout |
+|------|------|--------|
+| Wide | ≥100 cols × ≥28 rows | Nav + content + system |
+| Compact | ≥72×20 | Nav + content |
+| Minimal | 60–71 cols or short height | Single panel + nav header |
+| Below gate | <60 cols | Explicit TTY fallback (Ink disabled) |
+
+Keys: `↑↓` navigate · `Tab` region · `Enter` open · `R` refresh · `C` cancel run ·
+`?` help · `Esc` back (exit only from Home).
+
+Respects `NO_COLOR`, `HARNESS_ASCII=1`, and `HARNESS_INK=0`. Status is always labeled
+in text, never color alone.
 
 Explicit commands and setup flags keep their current behavior (`kairo setup`,
 `kairo --dry-run`, `kairo shell`, non-TTY scripts, etc.).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kal-elsam/kairo-runtime",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Kairo Runtime — local agent operating system for Codex, Cursor, Claude, Gemini, Copilot, Engram, and Graphify.",
   "type": "module",
   "homepage": "https://github.com/Kal-elSam/harness#readme",
@@ -33,6 +33,7 @@
     "doctor": "node ./bin/kairo.js doctor",
     "smoke": "bash scripts/smoke-test.sh",
     "ux:smoke": "bash scripts/ux-smoke-test.sh",
+    "smoke:cockpit": "bash scripts/cockpit-smoke-test.sh",
     "smoke:registry": "bash scripts/registry-smoke-test.sh",
     "smoke:installer": "bash scripts/installer-smoke-test.sh",
     "smoke:bridge": "bash scripts/bridge-smoke-test.sh",
@@ -59,6 +60,7 @@
   },
   "dependencies": {
     "@clack/prompts": "^1.7.0",
+    "ansi-escapes": "^7.3.0",
     "ink": "^5.2.1",
     "react": "^18.3.1"
   }

package/scripts/cockpit-smoke-test.sh

@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+# Cockpit smoke — layout/capabilities + package wiring (no PTY required).
+set -euo pipefail
+
+ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
+cd "$ROOT"
+
+echo "Kairo cockpit smoke"
+node "$ROOT/scripts/cockpit-smoke.mjs"
+
+node --test \
+  test/fullscreen-session.test.js \
+  test/layout.test.js \
+  test/terminal-capabilities.test.js \
+  test/cockpit-models.test.js \
+  test/cockpit-controller.test.js \
+  test/cockpit-frame.test.js
+
+echo "Kairo cockpit smoke passed"

package/scripts/cockpit-smoke.mjs

@@ -0,0 +1,51 @@
+#!/usr/bin/env node
+import assert from "node:assert/strict";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { resolveLayoutMode, LAYOUT_MODES } from "../src/global/ink/layout.js";
+import { resolveTerminalCapabilities } from "../src/global/ink/terminal-capabilities.js";
+import { createFullscreenSession } from "../src/global/ink/fullscreen-session.js";
+import { buildTopBarModel, buildHomeMissionModel } from "../src/global/ink/cockpit-models.js";
+
+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.3.0");
+assert.ok(pkg.dependencies["ansi-escapes"]);
+
+assert.equal(resolveLayoutMode({ columns: 120, rows: 40 }), LAYOUT_MODES.WIDE);
+assert.equal(resolveLayoutMode({ columns: 80, rows: 24 }), LAYOUT_MODES.COMPACT);
+assert.equal(resolveLayoutMode({ columns: 65, rows: 24 }), LAYOUT_MODES.MINIMAL);
+assert.equal(resolveLayoutMode({ columns: 50, rows: 24 }), null);
+
+const caps = resolveTerminalCapabilities({
+  columns: 80,
+  rows: 24,
+  isTTY: true,
+  term: "xterm-256color",
+  env: { NO_COLOR: "1" }
+});
+assert.equal(caps.color, false);
+assert.equal(caps.canUseInk, true);
+
+const session = createFullscreenSession({
+  stdout: { isTTY: true, write: () => true },
+  processRef: { on() {}, removeListener() {}, exit() {} },
+  onSignal: () => {}
+});
+assert.equal(session.enter(), true);
+assert.equal(session.leave(), true);
+assert.equal(session.leave(), false);
+
+const top = buildTopBarModel({ projectName: "smoke" });
+assert.match(top.status, /ONLINE|Offline/);
+const mission = buildHomeMissionModel({
+  hasGlobalState: false,
+  diagnostics: { diagnostics: { detected: 0 } },
+  dashboard: { providers: [], recentRuns: [] }
+});
+assert.match(mission.title, /MISSION CONTROL/);
+
+console.log("cockpit smoke OK");

package/src/cli.js

@@ -696,11 +696,11 @@ sections, components, backups, and drift repair under ~/.harness.
 Bootstrap: see README.md (curl install.sh or npx ${PACKAGE_NAME}).
 
 Usage:
-  ${cli}                              First run: onboarding → setup → dashboard (TTY).
-                                      Later: operations dashboard with next-step guidance.
+  ${cli}                              First run: onboarding → setup → cockpit (TTY).
+                                      Later: full-screen cockpit (wide/compact/minimal).
   ${cli} --dry-run                      Setup dry-run (scriptable)
   ${cli} --version
-  ${cli} shell                          Operations dashboard (TTY)
+  ${cli} shell                          Operations cockpit (TTY)
   ${cli} run --agent <id> --task "..." [--model <name>] [--cwd <dir>] [--permissions force] [--capture-transcript] [--follow] [--no-wait] [--json]
   ${cli} runs list [--json] [--limit <n>] [--active-only]
   ${cli} runs show <runId> [--json] [--limit <n>] [--follow]
@@ -741,8 +741,9 @@ Scopes:
                           Explicit --scope=workspace only.
 
 Commands:
-  shell      Operations dashboard (TTY). Bare ${cli} opens onboarding when ~/.harness/state.json
-             is missing, otherwise the dashboard. Explicit ${cli} shell always opens the dashboard.
+  shell      Operations cockpit (TTY). Bare ${cli} opens onboarding when ~/.harness/state.json
+             is missing, otherwise the cockpit. Explicit ${cli} shell always opens the cockpit.
+             Keys: ↑↓ · Tab region · Enter · R refresh · C cancel · ? help · Esc back/exit.
   run        Launch a managed agent run with local audit trail.
   runs       List, inspect, or cancel agent runs under ~/.harness/runs/.
   orchestrator  Read-only capability registry diagnostics (--json supported).

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

@@ -0,0 +1,131 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { COCKPIT_COLORS, statusColor } from "../theme.js";
+
+export function CockpitBadge({ label, kind = "ready", colorEnabled = true }) {
+  return React.createElement(Text, {
+    color: statusColor(kind, { colorEnabled })
+  }, label);
+}
+
+export function CockpitEmptyState({ title, message, hint }) {
+  return React.createElement(Box, { flexDirection: "column", marginY: 1 },
+    title && React.createElement(Text, { bold: true, color: COCKPIT_COLORS.secondary }, title),
+    message && React.createElement(Text, null, message),
+    hint && React.createElement(Text, { color: COCKPIT_COLORS.muted }, hint)
+  );
+}
+
+export function CockpitPanel({ title, focused = false, width, children }) {
+  return React.createElement(Box, {
+    flexDirection: "column",
+    width,
+    borderStyle: "single",
+    borderColor: focused ? COCKPIT_COLORS.primary : COCKPIT_COLORS.muted,
+    paddingX: 1,
+    flexGrow: 1
+  },
+    title && React.createElement(Text, {
+      bold: true,
+      color: focused ? COCKPIT_COLORS.primary : COCKPIT_COLORS.secondary
+    }, title),
+    children
+  );
+}
+
+export function CockpitTopBar({ model, colorEnabled = true }) {
+  return React.createElement(Box, { justifyContent: "space-between", width: "100%" },
+    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} ─╮`)
+  );
+}
+
+export function CockpitNav({ model, colorEnabled = true }) {
+  return React.createElement(Box, { flexDirection: "column" },
+    model.items.map((item) =>
+      React.createElement(Text, {
+        key: item.id,
+        bold: item.focused || item.selected,
+        color: item.focused
+          ? (colorEnabled ? COCKPIT_COLORS.primary : undefined)
+          : item.selected
+            ? (colorEnabled ? COCKPIT_COLORS.secondary : undefined)
+            : undefined
+      }, `${item.marker} ${item.label}`)
+    )
+  );
+}
+
+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(CockpitBadge, {
+          label: row.value,
+          kind: row.kind,
+          colorEnabled
+        })
+      )
+    )
+  );
+}
+
+export function CockpitFooter({ model }) {
+  return React.createElement(Box, { flexDirection: "column" },
+    React.createElement(Text, { color: COCKPIT_COLORS.muted },
+      `├${"─".repeat(62)}┤`
+    ),
+    React.createElement(Text, { color: COCKPIT_COLORS.muted }, `│ ${model.text}`),
+    React.createElement(Text, { color: COCKPIT_COLORS.muted },
+      `╰${"─".repeat(62)}╯`
+    )
+  );
+}
+
+export function CockpitShell({
+  topBar,
+  footer,
+  layoutMode,
+  nav,
+  system,
+  navFocused,
+  contentFocused,
+  systemFocused,
+  colorEnabled = true,
+  children
+}) {
+  const showNav = layoutMode === "wide" || layoutMode === "compact";
+  const showSystem = layoutMode === "wide";
+
+  return React.createElement(Box, { flexDirection: "column", width: "100%" },
+    React.createElement(CockpitTopBar, { model: topBar, colorEnabled }),
+    layoutMode === "minimal" && nav && React.createElement(Box, { marginY: 0 },
+      React.createElement(Text, { color: COCKPIT_COLORS.muted }, "Nav: "),
+      React.createElement(CockpitNav, { model: nav, colorEnabled })
+    ),
+    React.createElement(Box, { flexDirection: "row", width: "100%" },
+      showNav && React.createElement(CockpitPanel, {
+        title: nav?.title ?? "NAVIGATION",
+        focused: navFocused,
+        width: 22
+      }, React.createElement(CockpitNav, { model: nav, colorEnabled })),
+      React.createElement(CockpitPanel, {
+        title: undefined,
+        focused: contentFocused,
+        width: showSystem ? 48 : showNav ? 56 : "100%"
+      }, children),
+      showSystem && React.createElement(CockpitPanel, {
+        title: system?.title ?? "SYSTEM",
+        focused: systemFocused,
+        width: 20
+      }, React.createElement(CockpitSystemStrip, { model: system, colorEnabled }))
+    ),
+    React.createElement(CockpitFooter, { model: footer })
+  );
+}

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

@@ -0,0 +1,131 @@
+import { COCKPIT_NAV, COCKPIT_REGIONS, regionsForLayout } from "./cockpit-models.js";
+import { ORCHESTRATOR_VIEWS } from "./orchestrator-state.js";
+import { LAYOUT_MODES } from "./layout.js";
+
+/**
+ * Pure cockpit focus / navigation reducer — no I/O, no React.
+ */
+
+export function createCockpitUiState({
+  layoutMode = LAYOUT_MODES.COMPACT,
+  view = ORCHESTRATOR_VIEWS.HOME,
+  region = COCKPIT_REGIONS.NAV,
+  navIndex = 0,
+  listIndex = 0,
+  helpOpen = false
+} = {}) {
+  const regions = regionsForLayout(layoutMode);
+  const safeRegion = regions.includes(region) ? region : regions[0];
+  return {
+    layoutMode,
+    view,
+    region: safeRegion,
+    navIndex: clamp(navIndex, 0, COCKPIT_NAV.length - 1),
+    listIndex: Math.max(0, listIndex),
+    helpOpen,
+    shouldExit: false
+  };
+}
+
+export function reduceCockpitUi(state, action) {
+  switch (action.type) {
+    case "resize": {
+      const regions = regionsForLayout(action.layoutMode);
+      const region = regions.includes(state.region) ? state.region : regions[0];
+      return { ...state, layoutMode: action.layoutMode, region };
+    }
+    case "tab": {
+      const regions = regionsForLayout(state.layoutMode);
+      if (regions.length < 2) return state;
+      const index = regions.indexOf(state.region);
+      const next = regions[(index + 1) % regions.length];
+      return { ...state, region: next };
+    }
+    case "arrow": {
+      if (state.helpOpen) return state;
+      if (state.region === COCKPIT_REGIONS.SYSTEM) return state;
+
+      const navigatesNav = state.region === COCKPIT_REGIONS.NAV
+        || (state.view === ORCHESTRATOR_VIEWS.HOME
+          && state.layoutMode === LAYOUT_MODES.MINIMAL);
+
+      if (navigatesNav) {
+        const delta = action.direction === "up" ? -1 : 1;
+        return {
+          ...state,
+          navIndex: clamp(state.navIndex + delta, 0, COCKPIT_NAV.length - 1)
+        };
+      }
+
+      const delta = action.direction === "up" ? -1 : 1;
+      const max = Math.max(0, (action.listLength ?? 1) - 1);
+      return { ...state, listIndex: clamp(state.listIndex + delta, 0, max) };
+    }
+    case "enter-nav": {
+      const item = COCKPIT_NAV[state.navIndex];
+      if (!item) return state;
+      if (item.view === ORCHESTRATOR_VIEWS.HOME) {
+        return {
+          ...state,
+          view: ORCHESTRATOR_VIEWS.HOME,
+          listIndex: 0,
+          region: COCKPIT_REGIONS.CONTENT
+        };
+      }
+      return {
+        ...state,
+        view: item.view,
+        listIndex: 0,
+        region: COCKPIT_REGIONS.CONTENT,
+        helpOpen: false
+      };
+    }
+    case "set-view":
+      return {
+        ...state,
+        view: action.view,
+        listIndex: 0,
+        region: action.region ?? COCKPIT_REGIONS.CONTENT
+      };
+    case "toggle-help":
+      if (state.helpOpen) {
+        return {
+          ...state,
+          helpOpen: false,
+          view: state.view === ORCHESTRATOR_VIEWS.HELP
+            ? ORCHESTRATOR_VIEWS.HOME
+            : state.view
+        };
+      }
+      return { ...state, helpOpen: true, view: ORCHESTRATOR_VIEWS.HELP };
+    case "escape": {
+      if (state.helpOpen) {
+        return { ...state, helpOpen: false, view: ORCHESTRATOR_VIEWS.HOME };
+      }
+      if (state.view !== ORCHESTRATOR_VIEWS.HOME) {
+        const regions = regionsForLayout(state.layoutMode);
+        return {
+          ...state,
+          view: ORCHESTRATOR_VIEWS.HOME,
+          listIndex: 0,
+          region: regions.includes(COCKPIT_REGIONS.NAV)
+            ? COCKPIT_REGIONS.NAV
+            : COCKPIT_REGIONS.CONTENT
+        };
+      }
+      return { ...state, shouldExit: true };
+    }
+    case "clear-exit":
+      return { ...state, shouldExit: false };
+    default:
+      return state;
+  }
+}
+
+export function resolveNavAction(navIndex) {
+  return COCKPIT_NAV[navIndex] ?? null;
+}
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}

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

@@ -0,0 +1,153 @@
+import { LAYOUT_MODES } from "./layout.js";
+import { ORCHESTRATOR_VIEWS } from "./orchestrator-state.js";
+import { resolveDashboardRecommendation } from "../dashboard-guidance.js";
+import { STATUS_LABELS, resolveGlyphs } from "./theme.js";
+import { windowList } from "./list-window.js";
+import { resolveListLimit } from "./layout.js";
+
+export const COCKPIT_REGIONS = {
+  NAV: "nav",
+  CONTENT: "content",
+  SYSTEM: "system"
+};
+
+export const COCKPIT_NAV = [
+  { id: "overview", label: "Overview", view: ORCHESTRATOR_VIEWS.HOME },
+  { id: "active", label: "Active runs", view: ORCHESTRATOR_VIEWS.ACTIVE_RUNS },
+  { id: "recent", label: "Recent runs", view: ORCHESTRATOR_VIEWS.RECENT_RUNS },
+  { id: "providers", label: "Providers", view: ORCHESTRATOR_VIEWS.PROVIDERS },
+  { id: "launch", label: "Launch run", view: ORCHESTRATOR_VIEWS.LAUNCH, action: "launch" },
+  { id: "diagnostics", label: "Diagnostics", view: ORCHESTRATOR_VIEWS.DIAGNOSTICS }
+];
+
+export function regionsForLayout(layoutMode) {
+  if (layoutMode === LAYOUT_MODES.WIDE) {
+    return [COCKPIT_REGIONS.NAV, COCKPIT_REGIONS.CONTENT, COCKPIT_REGIONS.SYSTEM];
+  }
+  if (layoutMode === LAYOUT_MODES.COMPACT) {
+    return [COCKPIT_REGIONS.NAV, COCKPIT_REGIONS.CONTENT];
+  }
+  return [COCKPIT_REGIONS.CONTENT];
+}
+
+export function buildTopBarModel({
+  projectName = "project",
+  systemOnline = true,
+  unicode = true
+} = {}) {
+  const glyphs = resolveGlyphs(unicode);
+  const status = systemOnline ? STATUS_LABELS.online : STATUS_LABELS.offline;
+  return {
+    brand: "KAIRO",
+    status,
+    statusKind: systemOnline ? "online" : "offline",
+    projectLabel: `Project: ${projectName}`,
+    separator: glyphs.bullet
+  };
+}
+
+export function buildNavModel({
+  navIndex = 0,
+  focused = false,
+  unicode = true,
+  items = COCKPIT_NAV
+} = {}) {
+  const glyphs = resolveGlyphs(unicode);
+  return {
+    title: "NAVIGATION",
+    items: items.map((item, index) => ({
+      ...item,
+      marker: index === navIndex ? glyphs.focus : " ",
+      selected: index === navIndex,
+      focused: focused && index === navIndex
+    }))
+  };
+}
+
+export function buildSystemStripModel({
+  dashboard = null,
+  diagnostics = null,
+  healthKind = "ready"
+} = {}) {
+  const agentsDetected = diagnostics?.diagnostics?.detected
+    ?? (dashboard?.providers ?? []).filter((p) => p.available).length;
+  const agentsTotal = diagnostics?.capabilities?.length
+    ?? dashboard?.providers?.length
+    ?? 0;
+  const activeRuns = dashboard?.activeRuns?.length ?? 0;
+  const intelligence = diagnostics?.intelligence?.summary;
+  const intelLabel = intelligence?.localAvailable
+    ? STATUS_LABELS.local
+    : intelligence?.cloudAuthenticated
+      ? "Cloud"
+      : "None";
+
+  return {
+    title: "SYSTEM",
+    rows: [
+      { key: "Agents", value: `${agentsDetected}/${agentsTotal}`, kind: agentsDetected > 0 ? "ready" : "warn" },
+      { key: "Runs", value: String(activeRuns), kind: activeRuns > 0 ? "ready" : "muted" },
+      { key: "Intel", value: intelLabel, kind: intelLabel === "None" ? "warn" : "ready" },
+      { key: "Health", value: STATUS_LABELS[healthKind] ?? healthKind, kind: healthKind }
+    ]
+  };
+}
+
+export function buildHomeMissionModel({
+  hasGlobalState = false,
+  diagnostics = null,
+  dashboard = null,
+  layoutMode = LAYOUT_MODES.COMPACT,
+  activityLines = []
+} = {}) {
+  const recommendation = resolveDashboardRecommendation({
+    hasGlobalState,
+    diagnostics,
+    dashboard
+  });
+  const limit = resolveListLimit(layoutMode, { contentRows: 10 });
+  const windowed = windowList(activityLines, limit);
+
+  return {
+    title: "MISSION CONTROL",
+    recommendedTitle: "Recommended action",
+    recommendedAction: recommendation.message,
+    recommendedKind: recommendation.kind,
+    activityTitle: activityLines.length ? "Activity" : "Activity / empty state",
+    activityLines: windowed.items,
+    moreLine: windowed.moreLine,
+    emptyHint: activityLines.length === 0
+      ? "No recent activity. Launch a run when agents are ready."
+      : null
+  };
+}
+
+export function buildFooterModel({
+  view = ORCHESTRATOR_VIEWS.HOME,
+  region = COCKPIT_REGIONS.NAV,
+  helpOpen = false,
+  canCancel = false,
+  unicode = true
+} = {}) {
+  const glyphs = resolveGlyphs(unicode);
+  if (helpOpen) {
+    return {
+      text: `Esc close help ${glyphs.bullet} R refresh ${glyphs.bullet} C cancel run`
+    };
+  }
+  if (view === ORCHESTRATOR_VIEWS.HOME) {
+    return {
+      text: `↑↓ Navigate ${glyphs.bullet} Tab Region ${glyphs.bullet} Enter Open ${glyphs.bullet} ? Help ${glyphs.bullet} Esc Exit`
+    };
+  }
+  const cancel = canCancel ? ` ${glyphs.bullet} C cancel` : "";
+  return {
+    text: `↑↓ Navigate ${glyphs.bullet} Enter Open ${glyphs.bullet} R refresh${cancel} ${glyphs.bullet} Esc Back · focus:${region}`
+  };
+}
+
+export function resolveProjectName(workspaceRoot = "") {
+  if (!workspaceRoot) return "project";
+  const parts = String(workspaceRoot).split(/[/\\]/).filter(Boolean);
+  return parts[parts.length - 1] || "project";
+}