@h-rig/cli 0.0.6-alpha.82 → 0.0.6-alpha.84

package/dist/src/app-opentui/scenes/run-detail.js

@@ -11,15 +11,17 @@ var RIG_UI = {
   bg: "#070809",
   bg2: "#0b0c0e",
   panel: "#101115",
-  panel2: "#101115",
-  glass: "#14161b",
-  ink: "#f2f3f6",
-  ink2: "#aeb0ba",
-  ink3: "#6c6e79",
-  ink4: "#44464f",
+  panel2: "#14161b",
+  glass: "#1e2230",
+  border: "#2a2e3a",
+  ink: "#f4f5f8",
+  ink2: "#c7c9d3",
+  ink3: "#9aa0ae",
+  ink4: "#787b86",
   lime: "#ccff4d",
   limeDim: "#a9d63f",
   cyan: "#56d8ff",
+  cyanDim: "#3f9fbd",
   red: "#ff5d5d",
   yellow: "#ffd24d",
   magenta: "#ff79b0"
@@ -38,11 +40,11 @@ var styles = {
 };
 function statusColor(status) {
   switch (status) {
-    case "running":
     case "success":
     case "completed":
     case "merged":
       return RIG_UI.lime;
+    case "running":
     case "preparing":
     case "created":
     case "validating":
@@ -63,6 +65,134 @@ function statusColor(status) {
   }
 }
 
+// packages/cli/src/app-opentui/drone.ts
+import { RGBA, StyledText, TextAttributes as TextAttributes2 } from "@opentui/core";
+var MINI_DRONE = [
+  "(!!!)   (!!!)",
+  "  \\%==%/  ",
+  "   %%?%%   ",
+  "  /%==%\\  ",
+  "(!!!)   (!!!)"
+];
+var LEAD_MARK = [
+  " .-=-. ",
+  "=%%?%%=",
+  " '-=-' "
+];
+var BLADE_FRAMES = ["---", "\\\\\\", "|||", "///"];
+var EYE_FRAMES = ["o", "@", "\u2022", "."];
+var COLOR = {
+  body: RGBA.fromHex(RIG_UI.lime),
+  mini: RGBA.fromHex(RIG_UI.limeDim),
+  rotor: RGBA.fromHex(RIG_UI.cyan),
+  path: RGBA.fromHex(RIG_UI.cyan),
+  eye: RGBA.fromHex(RIG_UI.ink),
+  dim: RGBA.fromHex(RIG_UI.ink4),
+  ink: RGBA.fromHex(RIG_UI.ink2)
+};
+function bladeForTick(tick, phase = 0) {
+  return BLADE_FRAMES[(Math.floor(tick / 3) + phase) % BLADE_FRAMES.length];
+}
+function eyeForTick(tick, phase = 0) {
+  const pulse = Math.sin(tick * 0.09 + phase);
+  return pulse > 0.55 ? EYE_FRAMES[1] : pulse > 0.1 ? EYE_FRAMES[0] : pulse > -0.45 ? EYE_FRAMES[2] : EYE_FRAMES[3];
+}
+function chunk(text, fg, bold = false, dim = false) {
+  let attributes = TextAttributes2.NONE;
+  if (bold)
+    attributes |= TextAttributes2.BOLD;
+  if (dim)
+    attributes |= TextAttributes2.DIM;
+  return { __isChunk: true, text, fg, ...attributes !== TextAttributes2.NONE ? { attributes } : {} };
+}
+function styledLine(text, colorFor) {
+  const chunks = [];
+  let run = "";
+  let runColor = null;
+  const flush = () => {
+    if (!run || !runColor)
+      return;
+    chunks.push(chunk(run, COLOR[runColor], runColor === "body" || runColor === "eye", runColor === "dim"));
+    run = "";
+  };
+  for (const char of text) {
+    const next = colorFor(char);
+    if (next !== runColor) {
+      flush();
+      runColor = next;
+    }
+    run += char;
+  }
+  flush();
+  return new StyledText(chunks.length > 0 ? chunks : [chunk("", COLOR.ink)]);
+}
+function droneColor(char) {
+  if (char === "?" || char === "o" || char === "@" || char === "\u2022")
+    return "eye";
+  if (char === "%" || char === "=")
+    return "mini";
+  if (char === "$")
+    return "body";
+  if (char === "(" || char === ")" || char === "/" || char === "\\" || char === "|" || char === "-")
+    return "rotor";
+  if (char === "\xB7" || char === "\u2022" || char === "'" || char === ".")
+    return "path";
+  if (char.trim() === "")
+    return "dim";
+  return "ink";
+}
+function motionColor(char) {
+  if (char === "\u25CF" || char === "\u25C6" || char === "\u25C9")
+    return "body";
+  if (char === "\u2022" || char === "\xB7" || char === "\u2500" || char === "\u2502" || char === "\u2571" || char === "\u2572" || char === "\u256D" || char === "\u256E" || char === "\u2570" || char === "\u256F")
+    return "path";
+  if (char === "\u258C" || char === "\u2590" || char === "\u2581" || char === "\u2594")
+    return "mini";
+  return droneColor(char);
+}
+function materializeDrone(lines, tick, phase = 0) {
+  const blade = bladeForTick(tick, phase);
+  const eye = eyeForTick(tick, phase);
+  return lines.map((line) => line.replaceAll("!!!", blade).replaceAll("?", eye));
+}
+function miniDroneLines(tick, align = "left", phase = 0) {
+  return materializeDrone(MINI_DRONE, tick, phase).map((text) => ({
+    text,
+    styledText: styledLine(text, droneColor),
+    fg: RIG_UI.limeDim,
+    align
+  }));
+}
+function brandFleetLines(tick, align = "center") {
+  const left = materializeDrone(MINI_DRONE, tick, 0);
+  const right = materializeDrone(MINI_DRONE, tick, 2);
+  const lead = materializeDrone(LEAD_MARK, tick, 1);
+  const packet = ["\xB7", "\u2022", "\u25CF", "\u2022"][Math.floor(tick / 2) % 4];
+  const bridge = [
+    `    ${left[0]}       ${lead[0]}       ${right[0]}`,
+    `    ${left[1]}   \xB7\u2500\u2500${packet}\u2500\u2500\xB7   ${lead[1]}   \xB7\u2500\u2500${packet}\u2500\u2500\xB7   ${right[1]}`,
+    `    ${left[2]}  \xB7'       '${lead[2]}'       '\xB7  ${right[2]}`,
+    `    ${left[3]}       \u2572  signal bus  \u2571       ${right[3]}`,
+    `    ${left[4]}    \xB7\u2500\u2500\u2500${packet}\u2500\u2500\u2500\u2500\u2500\u2500${packet}\u2500\u2500\u2500\xB7    ${right[4]}`
+  ];
+  return bridge.map((text) => ({
+    text,
+    styledText: styledLine(text, motionColor),
+    fg: RIG_UI.limeDim,
+    align
+  }));
+}
+function actionDrone(tick, phase = 0) {
+  const blade = bladeForTick(tick, phase);
+  const eye = eyeForTick(tick, phase);
+  return `(${blade})\u2572${eye}\u2571(${blade})`;
+}
+function actionDroneLine(tick, text, fg = RIG_UI.ink2) {
+  const prefix = actionDrone(tick);
+  const content = `${prefix}  ${text}`;
+  return { text: content, styledText: styledLine(content, motionColor), fg, align: "center" };
+}
+
 // packages/cli/src/app-opentui/render/scene.ts
 function line(text, options = {}) {
   return { text, ...options };
@@ -70,9 +200,6 @@ function line(text, options = {}) {
 function blank() {
   return { text: "" };
 }
-function center(text, fg = RIG_UI.ink2, bold = false) {
-  return { text, fg, bold, align: "center" };
-}
 function deckRow(input) {
   const prefix = input.active ? "\u25B8" : " ";
   const label = input.label.toUpperCase().padEnd(10);
@@ -86,11 +213,81 @@ function deckRow(input) {
 function kv(label, value, fg = RIG_UI.ink2) {
   return line(`  ${label.toUpperCase().padEnd(10)} ${value}`, { fg });
 }
+function loadingRows(label, tick = 0, compact = false) {
+  const mascot = compact ? miniDroneLines(tick, "center") : brandFleetLines(tick, "center");
+  return [
+    blank(),
+    ...mascot,
+    blank(),
+    { ...actionDroneLine(tick, `loading ${label}\u2026`, RIG_UI.cyan), align: "center" }
+  ];
+}
+function errorBanner(message, hint) {
+  return [
+    line(`\u2717 failed to load \u2014 ${message}`, { fg: RIG_UI.red, bold: true }),
+    ...hint ? [line(`  ${hint}`, { fg: RIG_UI.ink3 })] : [],
+    line("  select refresh/retry below", { fg: RIG_UI.ink4 }),
+    line("", { fg: RIG_UI.ink3 })
+  ];
+}
+function lastRefreshError(state) {
+  const value = state.data.lastRefreshError;
+  return typeof value === "string" && value.trim() ? value : undefined;
+}
 function makeSceneFrame(input) {
   return input;
 }
 
+// packages/cli/src/app-opentui/selectable.ts
+function withSelectable(line2, item) {
+  return { ...line2, selectable: item, activateOnClick: true };
+}
+
 // packages/cli/src/app-opentui/scenes/run-detail.ts
+function actionRow(deck, item) {
+  const row = deckRow({ ...deck, activateOnClick: true });
+  return item ? withSelectable(row, item) : row;
+}
+function isTerminalRunStatus(status) {
+  return ["completed", "complete", "done", "failed", "error", "errored", "merged", "cancelled", "canceled", "stopped", "aborted"].includes(status.toLowerCase());
+}
+function runDetailActions(runId, status) {
+  const short = runId ? runId.slice(0, 8) : "";
+  const attach = {
+    label: "pi",
+    detail: "attach bundled Pi \u2014 live or finished transcript",
+    item: runId ? { id: "attach", label: "attach", intent: { scene: "handoff", argv: ["attach", runId], action: { kind: "run-attach", payload: { runId }, label: `Attach Pi ${short}` } }, message: "attach real bundled Pi" } : null
+  };
+  const inspect = {
+    label: "inspect",
+    detail: "logs/timeline/diff/failures",
+    item: runId ? { id: "inspect", label: "inspect", data: { selectedRunId: runId }, intent: { scene: "inspect", argv: ["inspect", runId], action: { kind: "refresh", payload: { runId }, label: `Inspect ${short}` } }, message: "logs/timeline/diff/failures" } : null
+  };
+  const fleet = {
+    label: "runs",
+    detail: "return to fleet",
+    item: { id: "fleet", label: "fleet", intent: { scene: "fleet", argv: ["fleet"], action: { kind: "refresh", label: "Opening fleet" } }, message: "back to fleet" }
+  };
+  if (runId && isTerminalRunStatus(status)) {
+    const rerun = {
+      label: "rerun",
+      detail: "re-dispatch this run from a clean runtime",
+      item: { id: "rerun", label: "rerun", intent: { scene: "command", argv: ["run", "restart", runId], action: { kind: "command-run", payload: { runId }, label: `Rerun ${short}` } }, message: "re-dispatch this run (rig run restart)" }
+    };
+    return [attach, rerun, inspect, fleet];
+  }
+  const steer = {
+    label: "steer",
+    detail: "send an inline steer message",
+    item: runId ? { id: "steer", label: "steer", prompt: { label: `steer ${short}`, scene: "run-detail", argv: ["steer", runId], intentKind: "run-steer", payloadBase: { runId }, payloadKey: "message" }, message: "send an inline steer message" } : null
+  };
+  const stop = {
+    label: "stop",
+    detail: "request stop",
+    item: runId ? { id: "stop", label: "stop", intent: { scene: "run-detail", argv: ["stop", runId], action: { kind: "run-stop", payload: { runId }, label: `Stop ${short}` } }, message: "request stop" } : null
+  };
+  return [attach, steer, stop, inspect, fleet];
+}
 function snapshot(state) {
   const value = state.data.runDetail;
   return value && typeof value === "object" && !Array.isArray(value) ? value : null;
@@ -100,37 +297,167 @@ function selectedRunId(state, run) {
     return run.runId;
   return typeof state.data.selectedRunId === "string" ? state.data.selectedRunId : undefined;
 }
-function entryText(entry) {
-  return String(entry.detail ?? entry.message ?? entry.text ?? entry.title ?? entry.type ?? "event").replace(/\s+/g, " ").slice(0, 96);
+var ENTRY_ROW_LIMIT = 40;
+function entryField(entry, keys) {
+  for (const key of keys) {
+    const value = entry[key];
+    if (typeof value === "string" && value.trim())
+      return value.trim();
+    if (typeof value === "number")
+      return String(value);
+  }
+  return "";
+}
+function entryMessage(entry) {
+  return String(entry.detail ?? entry.message ?? entry.text ?? entry.title ?? entry.type ?? "event").replace(/\s+/g, " ").slice(0, 160);
+}
+function entrySeverityColor(entry, fallback) {
+  const token = `${entryField(entry, ["type", "level", "status", "kind"])} ${entryMessage(entry)}`.toLowerCase();
+  if (/\b(fail|failed|failure|error|fatal|crash|abort)\b/.test(token))
+    return RIG_UI.red;
+  if (/\b(warn|warning|attention|degraded|retry)\b/.test(token))
+    return RIG_UI.yellow;
+  if (/\b(success|succeeded|completed|done|merged|passed)\b/.test(token))
+    return RIG_UI.limeDim;
+  return fallback;
+}
+function entryRow(entry, fallback) {
+  const color = entrySeverityColor(entry, fallback);
+  const time = entryField(entry, ["timestamp", "ts", "time", "at"]).replace("T", " ").slice(0, 19);
+  const type = entryField(entry, ["type", "level", "kind", "status"]).slice(0, 14);
+  const glyph = color === RIG_UI.red ? "\u2717" : color === RIG_UI.yellow ? "\u26A0" : "\xB7";
+  const segments = [time, type ? type.toUpperCase() : undefined, entryMessage(entry)].filter((part) => Boolean(part));
+  return line(`${glyph} ${segments.join(" \xB7 ")}`, { fg: color, bold: color === RIG_UI.red });
+}
+function entrySection(label, entries, fallback) {
+  if (entries.length === 0)
+    return [];
+  const shown = entries.slice(0, ENTRY_ROW_LIMIT);
+  const overflow = entries.length - shown.length;
+  return [
+    line("", { fg: RIG_UI.ink3 }),
+    line(`${label} (${entries.length})`, { fg: RIG_UI.ink3, bold: true }),
+    ...shown.map((entry) => entryRow(entry, fallback)),
+    ...overflow > 0 ? [line(`  (${overflow} more)`, { fg: RIG_UI.ink4 })] : []
+  ];
+}
+function primaryError(state) {
+  return state.error?.message ?? lastRefreshError(state);
+}
+function optimisticStatus(state, runId) {
+  const value = state.data.optimisticRun;
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    return;
+  const record = value;
+  if (runId && record.runId !== runId)
+    return;
+  return typeof record.status === "string" ? record.status : undefined;
+}
+function pendingSteer(state, runId) {
+  const value = state.data.pendingRunMessage;
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    return null;
+  const record = value;
+  if (runId && record.runId !== runId)
+    return null;
+  if (typeof record.text !== "string")
+    return null;
+  return {
+    text: record.text,
+    status: typeof record.status === "string" ? record.status : "queued",
+    ...typeof record.result === "string" && record.result.trim() ? { result: record.result.trim() } : {}
+  };
+}
+function steerBlock(pending) {
+  const failed = pending.status === "failed";
+  const sent = pending.status === "sent" || pending.status === "delivered";
+  const glyph = failed ? "\u2717" : sent ? "\u2713" : "\u27F3";
+  const color = failed ? RIG_UI.red : sent ? RIG_UI.lime : RIG_UI.cyan;
+  const echoed = pending.text.length > 84 ? `${pending.text.slice(0, 83)}\u2026` : pending.text;
+  return [
+    line("", { fg: RIG_UI.ink3 }),
+    line(`${glyph} STEER \xB7 ${pending.status}`, { fg: color, bold: true }),
+    line(`  "${echoed}"`, { fg: RIG_UI.ink2 }),
+    ...pending.result ? [line(`  ${failed ? "error" : "result"}: ${pending.result.replace(/\s+/g, " ").slice(0, 120)}`, { fg: failed ? RIG_UI.red : RIG_UI.ink3 })] : []
+  ];
 }
-function renderRunDetailScene(state) {
+function timelineCountLabel(snapshot2) {
+  const shown = snapshot2.timeline.length;
+  const total = snapshot2.timelineTotal;
+  return total !== undefined && total > shown ? `showing ${shown} of ${total}` : `${shown} loaded`;
+}
+function loadMoreItem(runId, cursor) {
+  return {
+    id: "timeline-load-more",
+    label: "load more timeline",
+    data: { runDetailLoadMore: { runId, cursor } },
+    intent: { scene: "run-detail", argv: ["run", "status", runId], action: { kind: "refresh", payload: { runId }, label: "Load more timeline" } },
+    message: "fetch the next page of timeline events"
+  };
+}
+function panelWidth(layout) {
+  return layout?.centerWidth ?? 100;
+}
+function panelHeight(layout) {
+  return Math.max(10, (layout?.centerHeight ?? 24) - 1);
+}
+function renderRunDetailScene(state, layout) {
   const run = snapshot(state);
   const runId = selectedRunId(state, run);
-  const selected = Math.max(0, Math.min(2, state.selection.index));
-  const timeline = run?.timeline.slice(-5).map((entry) => entryText(entry)) ?? [];
-  const logs = run?.logs.slice(-3).map((entry) => entryText(entry)) ?? [];
-  const status = run?.status ?? "loading";
-  const lines = [
-    center(run ? run.title : "run", RIG_UI.ink, true),
-    center(runId ? `${runId.slice(0, 8)} \xB7 ${status}` : "loading run", run ? statusColor(status) : RIG_UI.ink3),
-    blank(),
-    ...runId ? [
-      deckRow({ label: "pi", detail: "attach bundled Pi", index: 0, active: selected === 0, activateOnClick: true }),
-      deckRow({ label: "stop", detail: "request stop", index: 1, active: selected === 1, activateOnClick: true }),
-      deckRow({ label: "runs", detail: "return to list", index: 2, active: selected === 2, activateOnClick: true }),
-      blank(),
-      kv("status", status, statusColor(status)),
-      kv("run", runId, RIG_UI.ink2)
-    ] : [line("loading run telemetry", { fg: RIG_UI.ink3, align: "center" })],
-    ...timeline.length > 0 ? [blank(), line("  timeline", { fg: RIG_UI.ink4, bold: true }), ...timeline.map((entry) => line(`  \xB7 ${entry}`, { fg: RIG_UI.ink2 }))] : [],
-    ...logs.length > 0 ? [blank(), line("  logs", { fg: RIG_UI.ink4, bold: true }), ...logs.map((entry) => line(`  \xB7 ${entry}`, { fg: RIG_UI.ink4 }))] : []
-  ];
+  const status = optimisticStatus(state, runId) ?? run?.status ?? "loading";
+  const actions = runDetailActions(runId, status);
+  const actionCount = actions.length;
+  const canLoadMore = Boolean(run?.timelineCursor && runId);
+  const loadMoreIndex = actionCount;
+  const maxIndex = canLoadMore ? loadMoreIndex : Math.max(0, actionCount - 1);
+  const selected = Math.max(0, Math.min(maxIndex, state.selection.index));
+  const timeline = run?.timeline ?? [];
+  const logs = run?.logs ?? [];
+  const pending = pendingSteer(state, runId);
+  const loading = state.status === "loading" && !run;
+  const errorText = primaryError(state);
+  const timelineSection = run ? [
+    line("", { fg: RIG_UI.ink3 }),
+    line(`TIMELINE \xB7 ${timelineCountLabel(run)}`, { fg: RIG_UI.ink3, bold: true }),
+    ...timeline.slice(0, ENTRY_ROW_LIMIT).map((entry) => entryRow(entry, RIG_UI.ink2)),
+    ...canLoadMore && runId ? [withSelectable(deckRow({ label: "load more", detail: `next page \xB7 ${timelineCountLabel(run)}`, index: loadMoreIndex, active: selected === loadMoreIndex, activateOnClick: true }), loadMoreItem(runId, run.timelineCursor))] : []
+  ] : [];
   return makeSceneFrame({
     scene: "run-detail",
     title: "Run",
-    lines,
-    footer: { run: runId ? `${runId.slice(0, 8)} ${status}` : undefined },
-    typeBarPlaceholder: runId ? `attach ${runId.slice(0, 8)} \xB7 stop ${runId.slice(0, 8)} \xB7 runs` : "runs \xB7 tasks",
+    lines: [
+      line("", { fg: RIG_UI.ink4 }),
+      line(`   run \xB7 ${runId ? `${runId.slice(0, 8)} \xB7 ${status}` : "loading"}`, { fg: run ? statusColor(status) : RIG_UI.ink3 })
+    ],
+    panels: [{
+      id: "run-detail",
+      top: 0,
+      width: panelWidth(layout),
+      height: panelHeight(layout),
+      lines: [
+        ...errorText ? errorBanner(errorText, "select inspect/runs below, or retry the action") : [],
+        line(run ? run.title : "Run telemetry", { fg: RIG_UI.ink, bold: true }),
+        ...loading ? loadingRows("run telemetry", state.tick) : runId ? [kv("run", runId, RIG_UI.ink2), kv("status", status, statusColor(status))] : [line("loading run telemetry", { fg: RIG_UI.ink3 })],
+        ...pending ? steerBlock(pending) : [],
+        line("", { fg: RIG_UI.ink3 }),
+        line("ACTIONS", { fg: RIG_UI.ink3, bold: true }),
+        ...actions.map((action, index) => actionRow({ label: action.label, detail: action.detail, index, active: selected === index }, action.item)),
+        ...timelineSection,
+        ...entrySection("LOGS", logs, RIG_UI.ink3)
+      ],
+      backgroundColor: RIG_UI.panel,
+      backgroundAlpha: 184,
+      opacity: 1,
+      border: false,
+      stickyScroll: true,
+      stickyStart: "bottom",
+      chrome: "ad-terminal",
+      headerText: runId ? `run ${runId.slice(0, 8)}` : "run",
+      headerHeight: 3,
+      paddingX: layout?.compact ? 2 : 3,
+      paddingY: 1
+    }],
+    footer: { run: runId ? `${runId.slice(0, 8)} ${status}` : undefined, message: "enter/click action" },
     live: state.status === "action" || !run
   });
 }

package/dist/src/app-opentui/scenes/server.d.ts

@@ -1,2 +1,3 @@
 import type { AppSceneFrame, AppState } from "../types";
-export declare function renderServerScene(state: AppState): AppSceneFrame;
+import type { StageLayout } from "../layout";
+export declare function renderServerScene(state: AppState, layout?: StageLayout): AppSceneFrame;