@kal-elsam/kairo-runtime 0.2.2 → 0.3.0

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { render } from "ink";
 import { OrchestratorApp } from "./orchestrator-app.js";
+import { createFullscreenSession } from "./fullscreen-session.js";
 
 export async function runOrchestratorInk({
   homeDir,
@@ -8,22 +9,43 @@ export async function runOrchestratorInk({
   packageRoot,
   packageName,
   cliVersion,
-  renderImpl = render
+  hasGlobalState = false,
+  renderImpl = render,
+  fullscreenSession = null,
+  stdout = process.stdout
 }) {
-  return new Promise((resolve) => {
-    const { waitUntilExit } = renderImpl(
-      React.createElement(OrchestratorApp, {
-        homeDir,
-        workspaceRoot,
-        packageRoot,
-        packageName,
-        cliVersion,
-        onComplete: resolve
-      })
-    );
+  const ownsSession = !fullscreenSession;
+  const session = fullscreenSession ?? createFullscreenSession({
+    stdout,
+    enabled: Boolean(stdout?.isTTY)
+  });
+
+  if (ownsSession) {
+    session.enter();
+  }
 
-    waitUntilExit().catch((error) => {
-      resolve({ cancelled: true, error });
+  try {
+    return await new Promise((resolve) => {
+      const { waitUntilExit } = renderImpl(
+        React.createElement(OrchestratorApp, {
+          homeDir,
+          workspaceRoot,
+          packageRoot,
+          packageName,
+          cliVersion,
+          hasGlobalState,
+          onComplete: resolve
+        }),
+        stdout ? { stdout } : undefined
+      );
+
+      waitUntilExit().catch((error) => {
+        resolve({ cancelled: true, error });
+      });
     });
-  });
+  } finally {
+    if (ownsSession) {
+      session.leave();
+    }
+  }
 }

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

@@ -5,6 +5,7 @@ import { loadConsentAudit } from "../policy.js";
 import { formatResultNote } from "../clack/theme.js";
 import { SetupWizardCancelledError } from "../clack/setup-wizard-constants.js";
 import { SetupApp } from "./setup-app.js";
+import { createFullscreenSession } from "./fullscreen-session.js";
 
 export { SetupWizardCancelledError };
 
@@ -15,6 +16,7 @@ export async function runSetupInk({
   packageName,
   cliVersion,
   dryRun = false,
+  onboarding = false,
   preflight = true,
   yes = false,
   confirm = false,
@@ -22,25 +24,46 @@ export async function runSetupInk({
   yesExplicit = false,
   confirmExplicit = false,
   interactive = true,
-  renderImpl = render
+  renderImpl = render,
+  fullscreenSession = null,
+  stdout = process.stdout
 }) {
-  const outcome = await new Promise((resolve) => {
-    const { waitUntilExit } = renderImpl(
-      React.createElement(SetupApp, {
-        homeDir,
-        workspaceRoot,
-        packageRoot,
-        packageName,
-        cliVersion,
-        dryRun,
-        onComplete: resolve
-      })
-    );
+  const ownsSession = !fullscreenSession;
+  const session = fullscreenSession ?? createFullscreenSession({
+    stdout,
+    enabled: Boolean(stdout?.isTTY)
+  });
+
+  if (ownsSession) {
+    session.enter();
+  }
 
-    waitUntilExit().catch((error) => {
-      resolve({ cancelled: true, usedWizard: true, error });
+  let outcome;
+  try {
+    outcome = await new Promise((resolve) => {
+      const { waitUntilExit } = renderImpl(
+        React.createElement(SetupApp, {
+          homeDir,
+          workspaceRoot,
+          packageRoot,
+          packageName,
+          cliVersion,
+          dryRun,
+          onboarding,
+          onComplete: resolve
+        }),
+        stdout ? { stdout } : undefined
+      );
+
+      waitUntilExit().catch((error) => {
+        resolve({ cancelled: true, usedWizard: true, error });
+      });
     });
-  });
+  } finally {
+    if (ownsSession) {
+      session.leave();
+    }
+  }
 
   if (outcome.error) {
     throw outcome.error;

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

@@ -21,43 +21,40 @@ import {
   toggleSelection,
   transitionFromSplash
 } from "./setup-state.js";
+import { COCKPIT_COLORS } from "./theme.js";
+import { CockpitPanel } from "./cockpit/primitives.js";
 
 const INK_COLORS = {
-  accent: "cyan",
-  success: "green",
-  warning: "yellow",
-  danger: "red",
-  muted: "gray"
+  accent: COCKPIT_COLORS.primary,
+  success: COCKPIT_COLORS.success,
+  warning: COCKPIT_COLORS.warning,
+  danger: COCKPIT_COLORS.danger,
+  muted: COCKPIT_COLORS.muted
 };
 
 function Header() {
   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: INK_COLORS.muted }, lines[1]),
+    React.createElement(Text, { bold: true, color: INK_COLORS.accent }, `╭─ ${lines[0]}`),
+    React.createElement(Text, { color: COCKPIT_COLORS.secondary }, lines[1]),
     React.createElement(Text, { dimColor: true }, lines[2])
   );
 }
 
 function Panel({ title, children }) {
-  return React.createElement(Box, {
-    flexDirection: "column",
-    borderStyle: "round",
-    borderColor: INK_COLORS.accent,
-    paddingX: 1,
-    marginBottom: 1
-  },
-  React.createElement(Text, { bold: true, color: INK_COLORS.accent }, 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 }) {
-  const lines = formatInkSplashLines({ compact });
+function Splash({ compact, onboarding = false }) {
+  const lines = formatInkSplashLines({ compact, onboarding });
   const logoLineCount = compact ? BRAND.compactLogo.length : BRAND.asciiLogo.length;
 
   return React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
@@ -71,7 +68,7 @@ function Splash({ compact }) {
       if (line === BRAND.tagline) {
         return React.createElement(Text, { key: `line-${index}`, color: INK_COLORS.muted }, line);
       }
-      if (line === BRAND.splashHint) {
+      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 === "") {
@@ -89,6 +86,7 @@ export function SetupApp({
   packageName,
   cliVersion,
   dryRun = false,
+  onboarding = false,
   onComplete
 }) {
   const { exit } = useApp();
@@ -243,7 +241,10 @@ export function SetupApp({
   const detectPanel = formatInkDetectPanel({ adapters, detected });
 
   return React.createElement(Box, { flexDirection: "column" },
-    step === SETUP_STEPS.SPLASH && React.createElement(Splash, { compact: useCompactSplash }),
+    step === SETUP_STEPS.SPLASH && React.createElement(Splash, {
+      compact: useCompactSplash,
+      onboarding
+    }),
     step !== SETUP_STEPS.SPLASH && React.createElement(Header),
     step === SETUP_STEPS.DETECT && React.createElement(Panel, { title: WIZARD_COPY.detectTitle },
       detectPanel.split("\n")

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

@@ -1,4 +1,12 @@
-import { AGENT_HINTS, BRAND, formatCliCommand, getAgentLabel, PREFERRED_CLI, WIZARD_COPY } from "../brand/index.js";
+import {
+  AGENT_HINTS,
+  BRAND,
+  ONBOARDING_COPY,
+  formatCliCommand,
+  getAgentLabel,
+  PREFERRED_CLI,
+  WIZARD_COPY
+} from "../brand/index.js";
 import { formatAgentMultiselectHint } from "../clack/theme.js";
 
 export const SETUP_STEPS = {
@@ -16,8 +24,22 @@ export function shouldUseCompactSplashLogo(columns) {
   return columns < fullWidth + 4;
 }
 
-export function formatInkSplashLines({ compact = false } = {}) {
+export function formatInkSplashLines({ compact = false, onboarding = false } = {}) {
   const logo = compact ? BRAND.compactLogo : BRAND.asciiLogo;
+  if (onboarding) {
+    return [
+      ...logo,
+      "",
+      BRAND.name,
+      BRAND.tagline,
+      "",
+      ONBOARDING_COPY.purpose,
+      ONBOARDING_COPY.safety,
+      "",
+      ONBOARDING_COPY.continueHint
+    ];
+  }
+
   return [
     ...logo,
     "",

package/src/global/ink/terminal-capabilities.js

@@ -0,0 +1,50 @@
+/**
+ * Pure terminal capability resolution for Ink cockpit / setup.
+ * Never communicates state via color alone — callers must keep text labels.
+ */
+
+export const LAYOUT_MODES = {
+  WIDE: "wide",
+  COMPACT: "compact",
+  MINIMAL: "minimal"
+};
+
+/**
+ * @param {{
+ *   columns?: number,
+ *   rows?: number,
+ *   env?: NodeJS.ProcessEnv | Record<string, string | undefined>,
+ *   isTTY?: boolean,
+ *   term?: string
+ * }} [options]
+ */
+export function resolveTerminalCapabilities({
+  columns = 80,
+  rows = 24,
+  env = process.env,
+  isTTY = true,
+  term = env.TERM ?? ""
+} = {}) {
+  const forceInk = env.HARNESS_INK !== "0";
+  const noColor = Boolean(env.NO_COLOR) || env.FORCE_COLOR === "0";
+  const unicode = !(
+    env.HARNESS_ASCII === "1"
+    || env.LC_ALL === "C"
+    || term === "dumb"
+    || /^(linux|vt100|vt220)$/i.test(term)
+  );
+
+  const safeColumns = Number.isFinite(columns) && columns > 0 ? columns : 80;
+  const safeRows = Number.isFinite(rows) && rows > 0 ? rows : 24;
+
+  return {
+    isTTY: Boolean(isTTY),
+    term: term || "",
+    columns: safeColumns,
+    rows: safeRows,
+    forceInk,
+    color: !noColor,
+    unicode,
+    canUseInk: Boolean(isTTY) && forceInk && term !== "dumb" && safeColumns >= 60
+  };
+}

package/src/global/ink/terminal.js

@@ -1,13 +1,35 @@
 import { stdin as input, stdout as output } from "node:process";
+import { resolveTerminalCapabilities } from "./terminal-capabilities.js";
+import { resolveLayoutMode } from "./layout.js";
+
+export { resolveTerminalCapabilities } from "./terminal-capabilities.js";
+export { resolveLayoutMode, resolveListLimit, LAYOUT_MODES } from "./layout.js";
+export { windowList } from "./list-window.js";
 
 export function canUseSetupInk({
   interactive = Boolean(input.isTTY && output.isTTY),
   term = process.env.TERM ?? "",
   columns = output.columns ?? 80,
-  forceInk = process.env.HARNESS_INK !== "0"
+  rows = output.rows ?? 24,
+  forceInk = process.env.HARNESS_INK !== "0",
+  env = process.env
+} = {}) {
+  const caps = resolveTerminalCapabilities({
+    columns,
+    rows,
+    env: { ...env, HARNESS_INK: forceInk ? env.HARNESS_INK : "0", TERM: term },
+    isTTY: interactive,
+    term
+  });
+  return caps.canUseInk;
+}
+
+/**
+ * Snapshot of layout mode from live stdout dimensions.
+ */
+export function readTerminalLayout({
+  columns = output.columns ?? 80,
+  rows = output.rows ?? 24
 } = {}) {
-  if (!interactive || !forceInk) return false;
-  if (term === "dumb") return false;
-  if (columns > 0 && columns < 60) return false;
-  return true;
+  return resolveLayoutMode({ columns, rows });
 }

package/src/global/ink/theme.js

@@ -0,0 +1,72 @@
+/**
+ * Deep-space cockpit theme. Status always has a text label — never color alone.
+ */
+
+export const COCKPIT_COLORS = {
+  primary: "cyan",
+  secondary: "magenta",
+  success: "green",
+  warning: "yellow",
+  danger: "red",
+  muted: "gray",
+  border: "cyan"
+};
+
+export const STATUS_LABELS = {
+  ready: "Ready",
+  warn: "Warn",
+  error: "Error",
+  offline: "Offline",
+  local: "Local",
+  online: "ONLINE",
+  loading: "Loading"
+};
+
+export const COCKPIT_GLYPHS = {
+  focus: "›",
+  focusAscii: ">",
+  bullet: "·",
+  bulletAscii: "-",
+  more: "…",
+  moreAscii: "..."
+};
+
+export function resolveGlyphs(unicode = true) {
+  if (unicode) {
+    return {
+      focus: COCKPIT_GLYPHS.focus,
+      bullet: COCKPIT_GLYPHS.bullet,
+      more: COCKPIT_GLYPHS.more
+    };
+  }
+  return {
+    focus: COCKPIT_GLYPHS.focusAscii,
+    bullet: COCKPIT_GLYPHS.bulletAscii,
+    more: COCKPIT_GLYPHS.moreAscii
+  };
+}
+
+export function statusColor(kind, { colorEnabled = true } = {}) {
+  if (!colorEnabled) return undefined;
+  switch (kind) {
+    case "ready":
+    case "success":
+    case "online":
+      return COCKPIT_COLORS.success;
+    case "warn":
+    case "warning":
+      return COCKPIT_COLORS.warning;
+    case "error":
+    case "danger":
+      return COCKPIT_COLORS.danger;
+    case "offline":
+    case "muted":
+      return COCKPIT_COLORS.muted;
+    default:
+      return COCKPIT_COLORS.primary;
+  }
+}
+
+export function formatStatusBadge(kind, label = STATUS_LABELS[kind] ?? String(kind)) {
+  return label;
+}

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

@@ -0,0 +1,158 @@
+import { useEffect, useState } from "react";
+import { buildReadOnlyDiagnostics } from "../action-planner.js";
+import { buildRuntimeDashboardData } from "../runtime/run-cli.js";
+import { readRunEvents } from "../runtime/run-store.js";
+import { startRun, stopRun } from "../runtime/run-manager.js";
+import {
+  createLaunchDraft,
+  isRunCancellable,
+  resolveLaunchPermissions,
+  resolveLaunchableAgents
+} from "./orchestrator-state.js";
+import { LAUNCH_WIZARD_STEPS, ORCHESTRATOR_VIEWS } from "./orchestrator-state.js";
+
+export function useOrchestratorData({
+  homeDir,
+  workspaceRoot,
+  packageName,
+  packageRoot,
+  cliVersion
+}) {
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [dashboard, setDashboard] = useState(null);
+  const [diagnostics, setDiagnostics] = useState(null);
+  const [selectedRun, setSelectedRun] = useState(null);
+  const [selectedEvents, setSelectedEvents] = useState([]);
+  const [statusMessage, setStatusMessage] = useState(null);
+  const [launchAgentIndex, setLaunchAgentIndex] = useState(0);
+  const [launchStep, setLaunchStep] = useState(LAUNCH_WIZARD_STEPS.AGENT);
+  const [launchDraft, setLaunchDraft] = useState(createLaunchDraft);
+  const [launchPermissionIndex, setLaunchPermissionIndex] = useState(0);
+
+  const reload = async () => {
+    const [dash, diag] = await Promise.all([
+      buildRuntimeDashboardData({ homeDir, workspaceRoot, cliVersion }),
+      buildReadOnlyDiagnostics({ homeDir, workspaceRoot, packageName, packageRoot, cliVersion })
+    ]);
+    setDashboard(dash);
+    setDiagnostics(diag);
+  };
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        await reload();
+        if (!cancelled) setLoading(false);
+      } catch (loadError) {
+        if (!cancelled) {
+          setError(loadError instanceof Error ? loadError.message : String(loadError));
+          setLoading(false);
+        }
+      }
+    }
+    load();
+    return () => { cancelled = true; };
+  }, [homeDir, workspaceRoot, packageName, packageRoot, cliVersion]);
+
+  const resetLaunchWizard = () => {
+    setLaunchStep(LAUNCH_WIZARD_STEPS.AGENT);
+    setLaunchDraft(createLaunchDraft());
+    setLaunchAgentIndex(0);
+    setLaunchPermissionIndex(0);
+  };
+
+  const openRunDetail = async (run, dispatch) => {
+    if (!run) return;
+    const events = await readRunEvents(homeDir, run.runId, { limit: 20 });
+    setSelectedRun(run);
+    setSelectedEvents(events);
+    dispatch({ type: "set-view", view: ORCHESTRATOR_VIEWS.RUN_DETAIL });
+  };
+
+  const handleLaunch = async (draft, profile, dispatch) => {
+    if (!draft.agentId || !draft.task.trim()) {
+      setError("Agent and task are required.");
+      return;
+    }
+    setBusy(true);
+    setStatusMessage(`Launching ${draft.agentId}…`);
+    try {
+      const permissions = resolveLaunchPermissions({
+        ...draft,
+        permissionIndex: launchPermissionIndex
+      });
+      const { runId } = await startRun({
+        homeDir,
+        agentId: draft.agentId,
+        task: draft.task.trim(),
+        cwd: workspaceRoot,
+        model: draft.model.trim() || null,
+        permissions,
+        cliVersion,
+        profile: profile ?? null,
+        follow: false,
+        wait: false
+      });
+      await reload();
+      const run = (await buildRuntimeDashboardData({ homeDir, workspaceRoot, cliVersion }))
+        .runs.find((entry) => entry.runId === runId);
+      setStatusMessage(`Run started: ${runId}`);
+      resetLaunchWizard();
+      dispatch({ type: "set-view", view: ORCHESTRATOR_VIEWS.HOME });
+      if (run) await openRunDetail(run, dispatch);
+    } catch (launchError) {
+      setError(launchError instanceof Error ? launchError.message : String(launchError));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const handleCancelRun = async () => {
+    if (!selectedRun || !isRunCancellable(selectedRun)) return;
+    setBusy(true);
+    try {
+      await stopRun(homeDir, selectedRun.runId);
+      await reload();
+      const refreshed = await buildRuntimeDashboardData({ homeDir, workspaceRoot, cliVersion });
+      const run = refreshed.runs.find((entry) => entry.runId === selectedRun.runId);
+      const events = await readRunEvents(homeDir, selectedRun.runId, { limit: 20 });
+      setSelectedRun(run ?? selectedRun);
+      setSelectedEvents(events);
+      setStatusMessage(`Cancelled ${selectedRun.runId}`);
+    } catch (cancelError) {
+      setError(cancelError instanceof Error ? cancelError.message : String(cancelError));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return {
+    loading,
+    busy,
+    error,
+    setError,
+    dashboard,
+    diagnostics,
+    selectedRun,
+    setSelectedRun,
+    selectedEvents,
+    statusMessage,
+    launchAgentIndex,
+    setLaunchAgentIndex,
+    launchStep,
+    setLaunchStep,
+    launchDraft,
+    setLaunchDraft,
+    launchPermissionIndex,
+    setLaunchPermissionIndex,
+    launchableAgents: resolveLaunchableAgents(dashboard?.providers ?? []),
+    reload,
+    resetLaunchWizard,
+    openRunDetail,
+    handleLaunch,
+    handleCancelRun
+  };
+}

package/src/global/ink/use-terminal-size.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from "react";
+import { useStdout } from "ink";
+import { resolveLayoutMode } from "./layout.js";
+
+/**
+ * Live terminal size + layout mode. Updates on stdout resize.
+ */
+export function useTerminalSize({
+  initialColumns = 80,
+  initialRows = 24
+} = {}) {
+  const { stdout } = useStdout();
+  const [size, setSize] = useState(() => ({
+    columns: stdout?.columns ?? initialColumns,
+    rows: stdout?.rows ?? initialRows
+  }));
+
+  useEffect(() => {
+    if (!stdout || typeof stdout.on !== "function") return undefined;
+
+    const sync = () => {
+      setSize({
+        columns: stdout.columns ?? initialColumns,
+        rows: stdout.rows ?? initialRows
+      });
+    };
+
+    sync();
+    stdout.on("resize", sync);
+    return () => {
+      stdout.off("resize", sync);
+    };
+  }, [stdout, initialColumns, initialRows]);
+
+  return {
+    ...size,
+    layoutMode: resolveLayoutMode(size)
+  };
+}