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

package/dist/src/app-opentui/scenes/fleet.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":
@@ -62,11 +64,182 @@ function statusColor(status) {
       return RIG_UI.ink3;
   }
 }
+function statusGlyph(status) {
+  switch (status) {
+    case "success":
+    case "completed":
+    case "merged":
+      return "\u2713";
+    case "running":
+      return "\u25CF";
+    case "preparing":
+    case "created":
+    case "validating":
+    case "reviewing":
+    case "closing-out":
+    case "stopping":
+    case "loading":
+    case "action":
+      return "\u25D0";
+    case "needs-attention":
+    case "needs_attention":
+      return "\u26A0";
+    case "failed":
+    case "error":
+      return "\u2717";
+    default:
+      return "\xB7";
+  }
+}
+function noColorActive() {
+  const noColor = process.env.NO_COLOR;
+  if (noColor !== undefined && noColor !== "") {
+    return true;
+  }
+  return process.env.RIG_NO_COLOR !== undefined;
+}
+function statusLabel(status) {
+  return {
+    glyph: statusGlyph(status),
+    color: noColorActive() ? RIG_UI.ink : 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 };
 }
+function blank() {
+  return { text: "" };
+}
 function deckRow(input) {
   const prefix = input.active ? "\u25B8" : " ";
   const label = input.label.toUpperCase().padEnd(10);
@@ -77,10 +250,39 @@ function deckRow(input) {
     activateOnClick: input.activateOnClick
   });
 }
+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 selectableDeckRow(deck, item) {
+  return { ...deckRow({ ...deck, activateOnClick: true }), selectable: item };
+}
+function withSelectable(line2, item) {
+  return { ...line2, selectable: item, activateOnClick: true };
+}
+
 // packages/cli/src/app-opentui/list-search.ts
 function isListSearchScene(scene) {
   return scene === "fleet" || scene === "tasks";
@@ -113,15 +315,199 @@ function filterRunsForSearch(runs, query) {
 function searchSummary(kind, query, visible, total) {
   return query.trim() ? `search ${JSON.stringify(query)} \xB7 ${visible}/${total} ${kind}` : `${total} ${kind}`;
 }
+function runSortSpec(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    return null;
+  const record = value;
+  const key = record.key;
+  const dir = record.dir;
+  if ((key === "status" || key === "runId" || key === "title" || key === "age") && (dir === "asc" || dir === "desc")) {
+    return { key, dir };
+  }
+  return null;
+}
+function cycleRunSort(current, key) {
+  if (!current || current.key !== key)
+    return { key, dir: "asc" };
+  if (current.dir === "asc")
+    return { key, dir: "desc" };
+  return null;
+}
+function ageValue(updatedAt) {
+  const parsed = Date.parse(updatedAt ?? "");
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+function applyDir(rows, compare, dir) {
+  const sorted = [...rows].sort(compare);
+  return dir === "desc" ? sorted.reverse() : sorted;
+}
+function sortRuns(runs, spec) {
+  if (!spec)
+    return [...runs];
+  const { key, dir } = spec;
+  if (key === "age") {
+    const byNewest = applyDir(runs, (a, b) => ageValue(b.updatedAt) - ageValue(a.updatedAt) || a.runId.localeCompare(b.runId), "asc");
+    return dir === "asc" ? byNewest : [...byNewest].reverse();
+  }
+  const compare = (a, b) => {
+    if (key === "status")
+      return a.status.localeCompare(b.status) || a.runId.localeCompare(b.runId);
+    if (key === "title")
+      return a.title.localeCompare(b.title, undefined, { sensitivity: "base" }) || a.runId.localeCompare(b.runId);
+    return a.runId.localeCompare(b.runId, undefined, { numeric: true });
+  };
+  return applyDir(runs, compare, dir);
+}
+
+// packages/cli/src/app-opentui/fleet-stats.ts
+var ACTIVE_STATUSES = new Set([
+  "running",
+  "preparing",
+  "created",
+  "validating",
+  "reviewing",
+  "closing-out",
+  "stopping",
+  "loading"
+]);
+var SPARK_CHARS = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+function normalizeStatus(status) {
+  return status.replace(/_/g, "-").toLowerCase();
+}
+function computeFleetStats(runs) {
+  const byStatus = new Map;
+  let active = 0;
+  let succeeded = 0;
+  let failed = 0;
+  for (const run of runs) {
+    const status = normalizeStatus(run.status ?? "");
+    byStatus.set(status, (byStatus.get(status) ?? 0) + 1);
+    if (ACTIVE_STATUSES.has(status))
+      active += 1;
+    else if (status === "success" || status === "completed" || status === "merged")
+      succeeded += 1;
+    else if (status === "failed" || status === "error")
+      failed += 1;
+  }
+  const total = runs.length;
+  const load = total === 0 ? 0 : active / total;
+  const sparkline = buildSparklineSeries(active, succeeded, failed);
+  return { total, active, succeeded, failed, byStatus, load, sparkline };
+}
+function buildSparklineSeries(active, succeeded, failed) {
+  const peak = Math.max(1, active, succeeded, failed);
+  const base = [succeeded, Math.round(succeeded * 0.6 + failed * 0.4), failed, Math.round((active + failed) / 2), active];
+  return base.map((value) => Math.max(0, Math.min(peak, value)) / peak);
+}
+function sparklineString(values, width) {
+  if (values.length === 0)
+    return "";
+  const series = width && width > 0 && values.length > width ? values.slice(values.length - width) : values;
+  return series.map((value) => {
+    const clamped = Math.max(0, Math.min(1, value));
+    const index = Math.min(SPARK_CHARS.length - 1, Math.round(clamped * (SPARK_CHARS.length - 1)));
+    return SPARK_CHARS[index];
+  }).join("");
+}
+function statusSegments(stats, width) {
+  if (width <= 0 || stats.total === 0)
+    return { active: "", done: "", failed: "", other: "" };
+  const other = Math.max(0, stats.total - stats.active - stats.succeeded - stats.failed);
+  const raw = [
+    { key: "active", value: stats.active },
+    { key: "done", value: stats.succeeded },
+    { key: "failed", value: stats.failed },
+    { key: "other", value: other }
+  ];
+  const exact = raw.map((entry) => ({ key: entry.key, exact: entry.value / stats.total * width }));
+  const floored = exact.map((entry) => ({ key: entry.key, n: Math.floor(entry.exact), frac: entry.exact - Math.floor(entry.exact) }));
+  let remaining = width - floored.reduce((sum, entry) => sum + entry.n, 0);
+  for (const entry of [...floored].sort((a, b) => b.frac - a.frac)) {
+    if (remaining <= 0)
+      break;
+    entry.n += 1;
+    remaining -= 1;
+  }
+  const widths = new Map(floored.map((entry) => [entry.key, entry.n]));
+  return {
+    active: "\u2588".repeat(widths.get("active") ?? 0),
+    done: "\u2588".repeat(widths.get("done") ?? 0),
+    failed: "\u2588".repeat(widths.get("failed") ?? 0),
+    other: "\u2592".repeat(widths.get("other") ?? 0)
+  };
+}
 
 // packages/cli/src/app-opentui/scenes/fleet.ts
-function asRuns(state) {
+var FLEET_RECOVERY_ITEMS = [
+  { id: "tasks", label: "tasks", intent: { scene: "tasks", argv: ["tasks"], action: { kind: "refresh", label: "Open tasks" } }, message: "open tasks and dispatch work" },
+  { id: "repair", label: "repair", intent: { scene: "command", argv: ["init", "--repair"], action: { kind: "command-run", label: "Repair project link" } }, message: "repair project/server/auth link" },
+  { id: "server", label: "server", intent: { scene: "server", argv: ["server", "status"], action: { kind: "refresh", label: "Open server controls" } }, message: "server controls" },
+  { id: "doctor", label: "doctor", intent: { scene: "doctor", argv: ["doctor"], action: { kind: "doctor-run", label: "Run doctor" } }, message: "diagnose project" }
+];
+var COL = {
+  glyph: 1,
+  runId: 8,
+  status: 13,
+  age: 6,
+  model: 10
+};
+var GUTTER = "  ";
+var RUN_COLUMNS = [
+  { key: "status", label: "status", hint: "by run state" },
+  { key: "runId", label: "run-id", hint: "by run id" },
+  { key: "title", label: "task/title", hint: "by task title" },
+  { key: "age", label: "age", hint: "by recency" }
+];
+function runSelectableItem(run) {
+  const runId = run.runId?.trim();
+  if (!runId)
+    return null;
+  const title = (run.title || run.taskId || "run").trim() || "run";
+  return {
+    id: runId,
+    label: title,
+    data: { selectedRunId: runId },
+    intent: { scene: "run-detail", argv: ["run", "status", runId], action: { kind: "refresh", payload: { runId }, label: `Open run ${runId.slice(0, 8)}` } },
+    message: `open run ${runId.slice(0, 8)} detail`
+  };
+}
+function fleetSlice(state) {
   const fleet = state.data.fleet;
-  if (!fleet || typeof fleet !== "object" || Array.isArray(fleet))
-    return [];
-  const runs = fleet.runs;
+  return fleet && typeof fleet === "object" && !Array.isArray(fleet) ? fleet : null;
+}
+function asRuns(state) {
+  const runs = fleetSlice(state)?.runs;
   return Array.isArray(runs) ? runs : [];
 }
+function optimisticStatuses(state) {
+  const map = new Map;
+  for (const key of ["optimisticRun", "dispatchingRun"]) {
+    const value = state.data[key];
+    if (!value || typeof value !== "object" || Array.isArray(value))
+      continue;
+    const record = value;
+    if (typeof record.runId === "string" && typeof record.status === "string")
+      map.set(record.runId, record.status);
+  }
+  return map;
+}
+function updatedAgoLabel(state) {
+  const refreshedAt = fleetSlice(state)?.refreshedAt;
+  if (typeof refreshedAt !== "string")
+    return;
+  const parsed = Date.parse(refreshedAt);
+  if (!Number.isFinite(parsed))
+    return;
+  const seconds = Math.max(0, Math.round((Date.now() - parsed) / 1000));
+  if (seconds < 1)
+    return "updated just now";
+  if (seconds < 60)
+    return `updated ${seconds}s ago`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60)
+    return `updated ${minutes}m ago`;
+  return `updated ${Math.round(minutes / 60)}h ago`;
+}
 function panelWidth(layout) {
   return layout?.centerWidth ?? 100;
 }
@@ -133,27 +519,106 @@ function clip(value, width) {
     return "";
   return value.length <= width ? value : `${value.slice(0, Math.max(0, width - 1))}\u2026`;
 }
-function runRow(width, run, index, active) {
-  const id = run.runId.slice(0, 8).padEnd(9);
-  const status = run.status.replace(/[_-]/g, " ").slice(0, 13).padEnd(14);
+function cell(value, width) {
+  return clip(value, width).padEnd(width);
+}
+function relativeAge(updatedAt) {
+  const parsed = Date.parse(updatedAt ?? "");
+  if (!Number.isFinite(parsed))
+    return "\u2014";
+  const deltaMs = Date.now() - parsed;
+  if (deltaMs < 0)
+    return "now";
+  const seconds = Math.floor(deltaMs / 1000);
+  if (seconds < 60)
+    return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60)
+    return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24)
+    return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 99)
+    return `${days}d`;
+  return "99d+";
+}
+function modelLabel(run) {
+  const raw = run.raw;
+  for (const key of ["model", "runtimeAdapter", "adapter", "runtimeMode"]) {
+    const value = raw[key];
+    if (typeof value === "string" && value.trim())
+      return value.trim();
+  }
+  return "\u2014";
+}
+function sortArrow(spec, key) {
+  if (!spec || spec.key !== key)
+    return "";
+  return spec.dir === "asc" ? "\u25B2" : "\u25BC";
+}
+function headerRow(titleWidth, spec) {
+  const text = [
+    "   ",
+    cell(`run-id${sortArrow(spec, "runId")}`, COL.runId),
+    cell(`status${sortArrow(spec, "status")}`, COL.status),
+    cell(`task / title${sortArrow(spec, "title")}`, titleWidth),
+    cell(`age${sortArrow(spec, "age")}`, COL.age),
+    "model"
+  ].join(GUTTER);
+  return line(text, { fg: RIG_UI.ink, bold: true, bg: RIG_UI.glass });
+}
+function sortToggleRow(column, current) {
+  const arrow = sortArrow(current, column.key);
+  const active = current?.key === column.key;
+  const next = cycleRunSort(current, column.key);
+  const marker = active ? "\u25B8" : " ";
+  const label = `${column.label}${arrow ? ` ${arrow}` : ""}`.padEnd(14);
+  const row = line(`${marker} ${label} ${column.hint}`, {
+    fg: active ? RIG_UI.lime : RIG_UI.ink2,
+    bold: active
+  });
+  return withSelectable(row, {
+    id: `fleet-sort-${column.key}`,
+    label: `sort by ${column.label}`,
+    data: { fleetSort: next },
+    message: `sort runs ${next ? `${column.label} ${next.dir}` : "default"}`
+  });
+}
+function sortStrip(spec) {
+  return [
+    line("SORT", { fg: RIG_UI.ink3, bold: true }),
+    ...RUN_COLUMNS.map((column) => sortToggleRow(column, spec)),
+    line("", { fg: RIG_UI.ink3 })
+  ];
+}
+function runRow(width, run, active, optimistic) {
+  const effectiveStatus = optimistic ?? run.status;
+  const { glyph } = statusLabel(effectiveStatus);
   const marker = active ? "\u258C" : " ";
-  const prefix = `${marker} ${id} ${status}`;
-  const titleWidth = Math.max(12, width - prefix.length - 2);
-  return line(`${prefix}${clip(run.title, titleWidth)}`, {
-    fg: active ? RIG_UI.ink : statusColor(run.status),
+  const status = effectiveStatus.replace(/[_-]/g, " ");
+  const fixed = `${marker} ${glyph}${GUTTER}${cell(run.runId.slice(0, COL.runId), COL.runId)}${GUTTER}${cell(status, COL.status)}${GUTTER}`;
+  const tail = `${GUTTER}${cell(relativeAge(run.updatedAt), COL.age)}${GUTTER}${cell(modelLabel(run), COL.model)}`;
+  const titleWidth = Math.max(8, width - fixed.length - tail.length);
+  const row = line(`${fixed}${cell(run.title, titleWidth)}${tail}`, {
+    fg: active ? RIG_UI.ink : RIG_UI.ink2,
     bold: active,
-    selectableIndex: index,
-    activateOnClick: true
+    ...active ? { bg: RIG_UI.glass } : {}
   });
+  const item = runSelectableItem(run);
+  return item ? withSelectable(row, item) : row;
 }
+var RECOVERY_DECKS = [
+  { label: "tasks", detail: "open tasks and dispatch work" },
+  { label: "repair", detail: "repair project/server/auth link" },
+  { label: "server", detail: "open server controls" },
+  { label: "doctor", detail: "diagnose project" }
+];
 function recoveryRows(selected, reason) {
   return [
     ...reason ? [line(reason, { fg: RIG_UI.yellow }), line("", { fg: RIG_UI.ink3 })] : [],
     line("ACTIONS", { fg: RIG_UI.ink3, bold: true }),
-    deckRow({ label: "tasks", detail: "open tasks and dispatch work", index: 0, active: selected === 0, activateOnClick: true }),
-    deckRow({ label: "repair", detail: "repair project/server/auth link", index: 1, active: selected === 1, activateOnClick: true }),
-    deckRow({ label: "server", detail: "open server controls", index: 2, active: selected === 2, activateOnClick: true }),
-    deckRow({ label: "doctor", detail: "diagnose project", index: 3, active: selected === 3, activateOnClick: true })
+    ...RECOVERY_DECKS.map((deck, index) => selectableDeckRow({ ...deck, index, active: selected === index }, FLEET_RECOVERY_ITEMS[index]))
   ];
 }
 function emptyRows(query, total, selected) {
@@ -175,20 +640,41 @@ function renderFleetScene(state, layout) {
   const width = panelWidth(layout);
   const allRuns = asRuns(state);
   const query = listSearchQuery(state);
-  const runs = filterRunsForSearch(allRuns, query);
+  const spec = runSortSpec(state.data.fleetSort);
+  const runs = sortRuns(filterRunsForSearch(allRuns, query), spec);
   const selectedRun = typeof state.data.selectedRunId === "string" && runs.some((run) => run.runId === state.data.selectedRunId) ? state.data.selectedRunId : runs[0]?.runId;
   const selectedIndex = Math.max(0, runs.findIndex((run) => run.runId === selectedRun));
   const recoveryIndex = Math.max(0, Math.min(3, state.selection.index));
+  const optimistic = optimisticStatuses(state);
+  const updatedAgo = updatedAgoLabel(state);
   const panelTop = 0;
   const contentWidth = Math.max(12, width - (layout?.compact ? 8 : 10));
+  const stats = computeFleetStats(allRuns);
+  const barWidth = Math.max(8, Math.min(48, contentWidth - 8));
+  const segments = statusSegments(stats, barWidth);
+  const distributionBar = t`${styles.cyan(segments.active)}${styles.lime(segments.done)}${styles.red(segments.failed)}${styles.ink4(segments.other)}`;
+  const telemetry = allRuns.length > 0 ? [
+    line(`load ${sparklineString(stats.sparkline)} ${Math.round(stats.load * 100)}%   \u25CF${stats.active} active   \u2713${stats.succeeded} done   \u2717${stats.failed} failed   ${stats.total} total`, { fg: RIG_UI.cyan }),
+    { text: segments.active + segments.done + segments.failed + segments.other, styledText: distributionBar, fg: RIG_UI.ink2 },
+    line("", { fg: RIG_UI.ink3 })
+  ] : [];
+  const G = GUTTER.length;
+  const railWidth = 1 + 1 + COL.glyph;
+  const titleWidth = Math.max(8, contentWidth - (railWidth + G + COL.runId + G + COL.status + G + G + COL.age + G + COL.model));
+  const loading = state.status === "loading" && allRuns.length === 0;
+  const refreshError = lastRefreshError(state);
+  const banner = refreshError && !state.error ? errorBanner(refreshError) : [];
   const panelLines = [
-    line(`RUN       STATUS         TITLE`, { fg: RIG_UI.ink3, bold: true }),
-    line("", { fg: RIG_UI.ink3 }),
+    ...banner,
+    ...telemetry,
     ...runs.length > 0 ? [
       ...degradedRows(state, recoveryIndex),
       ...query.trim() ? [line(searchSummary("runs", query, runs.length, allRuns.length), { fg: RIG_UI.ink4 }), line("", { fg: RIG_UI.ink3 })] : [],
-      ...runs.map((run, index) => runRow(contentWidth, run, index, index === selectedIndex))
-    ] : state.error ? degradedRows(state, recoveryIndex) : [
+      ...sortStrip(spec),
+      headerRow(titleWidth, spec),
+      line("", { fg: RIG_UI.ink3 }),
+      ...runs.map((run, index) => runRow(contentWidth, run, index === selectedIndex, optimistic.get(run.runId)))
+    ] : state.error ? degradedRows(state, recoveryIndex) : loading ? loadingRows("runs", state.tick) : [
       ...query.trim() ? [line(searchSummary("runs", query, runs.length, allRuns.length), { fg: RIG_UI.ink4 }), line("", { fg: RIG_UI.ink3 })] : [],
       ...emptyRows(query, allRuns.length, recoveryIndex)
     ]
@@ -198,7 +684,7 @@ function renderFleetScene(state, layout) {
     title: "Runs",
     lines: [
       line("", { fg: RIG_UI.ink4 }),
-      line(query.trim() ? `   runs --search ${JSON.stringify(query)}` : "   runs", { fg: RIG_UI.ink3 })
+      line(`${query.trim() ? `   runs --search ${JSON.stringify(query)}` : "   runs"}${updatedAgo ? `   \xB7   ${updatedAgo}` : ""}`, { fg: RIG_UI.ink3 })
     ],
     panels: [{
       id: "runs-list",
@@ -216,7 +702,11 @@ function renderFleetScene(state, layout) {
       paddingX: layout?.compact ? 2 : 3,
       paddingY: 1
     }],
-    footer: { run: selectedRun ? selectedRun.slice(0, 8) : "no runs", message: searchSummary("runs", query, runs.length, allRuns.length) },
+    footer: {
+      run: selectedRun ? selectedRun.slice(0, 8) : "no runs",
+      message: searchSummary("runs", query, runs.length, allRuns.length),
+      ...updatedAgo ? { updated: updatedAgo } : {}
+    },
     typeBarPlaceholder: "search runs\u2026",
     live: true
   });