@xenosystem/blocks 0.13.12 → 0.13.14

package/dist/ops/index.js

@@ -7,10 +7,8 @@ import {
   terminalThemeVar
 } from "../chunk-WE6A2DTY.js";
 import {
-  CancelGlyph,
-  ICONS,
-  RetryGlyph
-} from "../chunk-5BVZMAD2.js";
+  ICONS
+} from "../chunk-PI5WOATA.js";
 import "../chunk-2KG3PWR4.js";
 
 // src/ops/console/panel.ts
@@ -62,10 +60,10 @@ function spliceRedactedAppend(existing, addition, redact, carry = REDACTION_CARR
   const tail = existing.slice(cut);
   return head + redact(tail + addition);
 }
-function truncateLogMessage(text2, max) {
-  if (max <= 0 || text2.length <= max) return text2;
-  if (max <= MESSAGE_ELISION.length) return text2.slice(text2.length - max);
-  return MESSAGE_ELISION + text2.slice(text2.length - (max - MESSAGE_ELISION.length));
+function truncateLogMessage(text3, max) {
+  if (max <= 0 || text3.length <= max) return text3;
+  if (max <= MESSAGE_ELISION.length) return text3.slice(text3.length - max);
+  return MESSAGE_ELISION + text3.slice(text3.length - (max - MESSAGE_ELISION.length));
 }
 function formatRecord(record) {
   const time = new Date(record.ts).toISOString();
@@ -242,7 +240,7 @@ var ConsoleController = class {
    */
   merge(existing, patch) {
     const secrets = [...this.host.getSecrets?.() ?? []];
-    const redact = (text2) => redactForLog(text2, secrets);
+    const redact = (text3) => redactForLog(text3, secrets);
     let message = existing.message;
     if (typeof patch.message === "string") message = redact(patch.message);
     if (typeof patch.appendMessage === "string" && patch.appendMessage.length > 0) {
@@ -872,24 +870,24 @@ function consoleRuntimeComponents(controller, rowHeight) {
 function ConsolePanelView({ controller, ...options }) {
   useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
   const view = consoleViewState(controller, options);
-  const ui2 = (intent) => applyConsoleUi(controller, intent);
+  const ui3 = (intent) => applyConsoleUi(controller, intent);
   return /* @__PURE__ */ jsxs(Column, { children: [
     /* @__PURE__ */ jsx(
       Toolbar,
       {
         left: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(SearchField, { value: view.search, placeholder: "Filter\u2026", onChange: (value) => ui2({ kind: "search", value }) }),
-          /* @__PURE__ */ jsx(SegmentedControl, { size: "sm", label: "Minimum level", options: view.levels, value: view.level, onChange: (level) => ui2({ kind: "level", level }) })
+          /* @__PURE__ */ jsx(SearchField, { value: view.search, placeholder: "Filter\u2026", onChange: (value) => ui3({ kind: "search", value }) }),
+          /* @__PURE__ */ jsx(SegmentedControl, { size: "sm", label: "Minimum level", options: view.levels, value: view.level, onChange: (level) => ui3({ kind: "level", level }) })
         ] }),
         right: /* @__PURE__ */ jsxs(ToolbarGroup, { end: true, children: [
           view.errors ? /* @__PURE__ */ jsx(Badge, { tone: "error", children: view.errors }) : null,
           view.warns ? /* @__PURE__ */ jsx(Badge, { tone: "warning", children: view.warns }) : null,
-          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CopyGlyph, {}), label: "Copy visible", onClick: () => ui2({ kind: "copyVisible" }) }),
-          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(ClearGlyph, {}), label: "Clear", onClick: () => ui2({ kind: "clear" }) })
+          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(CopyGlyph, {}), label: "Copy visible", onClick: () => ui3({ kind: "copyVisible" }) }),
+          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(ClearGlyph, {}), label: "Clear", onClick: () => ui3({ kind: "clear" }) })
         ] })
       }
     ),
-    view.multiSource ? /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 4, pad: "inset", children: view.sources.map((source) => /* @__PURE__ */ jsx(FilterChip, { on: source.on, title: source.title, onChange: (on) => ui2({ kind: "source", id: source.id, on }), children: source.label }, source.id)) }) : null,
+    view.multiSource ? /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 4, pad: "inset", children: view.sources.map((source) => /* @__PURE__ */ jsx(FilterChip, { on: source.on, title: source.title, onChange: (on) => ui3({ kind: "source", id: source.id, on }), children: source.label }, source.id)) }) : null,
     view.empty ? /* @__PURE__ */ jsx(EmptyState, { title: view.emptyTitle, hint: view.emptyHint }) : null,
     view.listed ? /* @__PURE__ */ jsx(ConsoleScroller, { controller, rowHeight: view.rowHeight, children: /* @__PURE__ */ jsx(VirtualWindow, { totalHeight: view.totalHeight, offsetTop: view.offsetTop, children: /* @__PURE__ */ jsx(RowList, { role: "log", children: view.rows.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -904,8 +902,8 @@ function ConsolePanelView({ controller, ...options }) {
             /* @__PURE__ */ jsx(Text, { children: row.message })
           ] }),
           trailing: row.repeat ? /* @__PURE__ */ jsx(Badge, { title: "Repeated consecutively", children: row.repeat }) : null,
-          onClick: () => ui2({ kind: "row", id: row.id }),
-          onContextMenuAt: (x, y) => ui2({ kind: "contextMenu", id: row.id, x, y })
+          onClick: () => ui3({ kind: "row", id: row.id }),
+          onContextMenuAt: (x, y) => ui3({ kind: "contextMenu", id: row.id, x, y })
         },
         row.id
       ),
@@ -1816,19 +1814,25 @@ var runsManifest = {
 import { useSyncExternalStore as useSyncExternalStore2 } from "react";
 import {
   Badge as Badge2,
+  Column as Column2,
   EmptyState as EmptyState2,
+  FilterChip as FilterChip2,
   IconButton as IconButton2,
-  ProportionBar,
+  Note,
+  Progress,
   Row as Row2,
   RowList as RowList2,
   ScrollArea as ScrollArea2,
   SearchField as SearchField2,
+  Stack as Stack2,
   StatusBar as StatusBar2,
+  Text as Text2,
   TextButton,
   Toolbar as Toolbar2,
   ToolbarGroup as ToolbarGroup2
 } from "@xenosystem/components/chrome";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/ops/runs/declaration.ts
 var TONE2 = {
   requested: "neutral",
   queued: "neutral",
@@ -1841,205 +1845,296 @@ var TONE2 = {
   failed: "error",
   cancelled: "neutral"
 };
-function toneOf(status) {
-  return TONE2[status] ?? "neutral";
-}
-function RunsPanelView({
-  controller,
-  showStats = true,
-  showProgress = true,
-  emptyHint,
-  now = () => Date.now()
-}) {
-  const state = useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
-  const active = new Set(state.filter.statuses ?? []);
-  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
-    /* @__PURE__ */ jsx2(
-      Toolbar2,
-      {
-        left: /* @__PURE__ */ jsx2(
-          SearchField2,
-          {
-            value: state.filter.search ?? "",
-            onChange: (term) => controller.setSearch(term),
-            placeholder: "Filter runs\u2026"
-          }
-        ),
-        right: /* @__PURE__ */ jsx2(ToolbarGroup2, { end: true, children: /* @__PURE__ */ jsx2(TextButton, { onClick: () => controller.clearTerminal(), children: "Clear finished" }) })
-      }
-    ),
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 4, padding: "2px 6px", flexWrap: "wrap" }, children: [
-      ALL_STATUSES.filter((s) => state.counts[s] > 0).map((status) => /* @__PURE__ */ jsx2(
-        "span",
-        {
-          onClick: () => controller.setStatuses(
-            active.has(status) ? [...active].filter((s) => s !== status) : [...active, status]
-          ),
-          style: { cursor: "pointer", opacity: active.size === 0 || active.has(status) ? 1 : 0.4 },
-          children: /* @__PURE__ */ jsx2(Badge2, { tone: TONE2[status], children: `${status} ${state.counts[status]}` })
-        },
-        status
-      )),
-      state.sources.length > 1 ? state.sources.map((source) => /* @__PURE__ */ jsx2(
-        "span",
-        {
-          onClick: () => controller.toggleSource(source.id),
-          style: { cursor: "pointer", opacity: source.enabled ? 1 : 0.4 },
-          children: /* @__PURE__ */ jsx2(Badge2, { title: `${source.count} runs`, children: source.label })
-        },
-        source.id
-      )) : null
-    ] }),
-    state.rows.length === 0 ? /* @__PURE__ */ jsx2(
-      EmptyState2,
-      {
-        title: state.total > 0 ? "No matching runs" : "No runs yet",
-        hint: state.total > 0 ? "Nothing matches the current filter." : emptyHint ?? "Run something to see it here."
-      }
-    ) : /* @__PURE__ */ jsx2(ScrollArea2, { children: /* @__PURE__ */ jsx2(RowList2, { role: "list", children: state.rows.map(
-      (row) => row.kind === "run" ? /* @__PURE__ */ jsx2(RunRow, { row, controller, showProgress, now }, row.key) : /* @__PURE__ */ jsx2(StepRow, { row, controller, showProgress }, row.key)
-    ) }) }),
-    /* @__PURE__ */ jsx2(
-      StatusBar2,
-      {
-        left: `${state.runs.length} of ${state.total}${state.dropped > 0 ? ` \xB7 ${state.dropped} dropped` : ""}`,
-        right: showStats && state.stats.terminal > 0 ? `${Math.round((state.stats.successRate ?? 0) * 100)}% ok${state.stats.meanDurationMs !== null ? ` \xB7 ~${formatDuration(state.stats.meanDurationMs)}` : ""}` : (
-          // `null` success rate is NOT 0% — nothing has finished, which is a different fact.
-          state.stats.active > 0 ? `${state.stats.active} active` : void 0
-        )
+var toneOf = (status) => TONE2[status] ?? "neutral";
+var truncationHint = (reason) => reason === "cycle" ? "This step is nested inside itself \u2014 the panel stopped here rather than repeat it." : "Nesting is deeper than this panel will render.";
+function runsViewState(c, options = {}) {
+  const s = c.getState();
+  const showStats = options.showStats ?? true;
+  const showProgress = options.showProgress ?? true;
+  const now = options.now ?? (() => Date.now());
+  const active = new Set(s.filter.statuses ?? []);
+  const statuses = ALL_STATUSES.filter((st) => s.counts[st] > 0).map((st) => ({ id: st, label: `${st} ${s.counts[st]}`, on: active.size === 0 || active.has(st), tone: toneOf(st) }));
+  const sources = s.sources.length > 1 ? s.sources.map((src) => ({ id: src.id, label: src.label, on: src.enabled, tone: "neutral", title: `${src.count} runs` })) : [];
+  const stats = showStats && s.stats.terminal > 0 ? `${Math.round((s.stats.successRate ?? 0) * 100)}% ok${s.stats.meanDurationMs !== null ? ` \xB7 ~${formatDuration(s.stats.meanDurationMs)}` : ""}` : s.stats.active > 0 ? `${s.stats.active} active` : void 0;
+  return {
+    search: s.filter.search ?? "",
+    statuses,
+    multiSource: s.sources.length > 1,
+    sources,
+    hasChips: statuses.length > 0 || sources.length > 0,
+    empty: s.rows.length === 0,
+    emptyTitle: s.total > 0 ? "No matching runs" : "No runs yet",
+    emptyHint: s.total > 0 ? "Nothing matches the current filter." : options.emptyHint ?? "Run something to see it here.",
+    listed: s.rows.length > 0,
+    rows: s.rows.map((row) => {
+      const run = row.run;
+      if (row.kind === "run") {
+        const duration = durationOf(run, now());
+        const hasProgress2 = showProgress && run.progress !== void 0;
+        return {
+          key: row.key,
+          runId: run.id,
+          stepPath: [],
+          depth: 0,
+          step: false,
+          status: run.status,
+          tone: toneOf(run.status),
+          label: run.label,
+          trigger: run.trigger,
+          retries: (run.retryCount ?? 0) > 0 ? `retry x${run.retryCount}` : void 0,
+          truncated: row.truncated ? row.truncated === "cycle" ? "cycle" : "deeper\u2026" : void 0,
+          truncatedHint: row.truncated ? truncationHint(row.truncated) : void 0,
+          hasProgress: hasProgress2,
+          progress: run.progress ?? 0,
+          progressLabel: `${Math.round((run.progress ?? 0) * 100)}%`,
+          duration: !hasProgress2 && duration !== null ? formatDuration(duration) : void 0,
+          canCancel: canCancel(run),
+          cancelLabel: `Cancel ${run.label}`,
+          canRetry: canRetry(run),
+          retryLabel: `Retry ${run.label}`,
+          hasError: !!run.error,
+          errorCode: run.error?.code,
+          errorMessage: run.error?.message
+        };
       }
-    )
-  ] });
+      const step = row.step;
+      const elapsed = step.startedAt !== void 0 && step.endedAt !== void 0 ? step.endedAt - step.startedAt : null;
+      const hasProgress = showProgress && step.progress !== void 0;
+      return {
+        key: row.key,
+        runId: row.runId,
+        stepPath: row.stepPath,
+        depth: row.depth,
+        step: true,
+        status: step.status,
+        tone: toneOf(step.status),
+        label: step.label,
+        truncated: row.truncated ? row.truncated === "cycle" ? "cycle" : "deeper\u2026" : void 0,
+        truncatedHint: row.truncated ? truncationHint(row.truncated) : void 0,
+        hasProgress,
+        progress: step.progress ?? 0,
+        progressLabel: `${Math.round((step.progress ?? 0) * 100)}%`,
+        duration: !hasProgress && elapsed !== null ? formatDuration(elapsed) : void 0,
+        canCancel: false,
+        cancelLabel: "",
+        canRetry: false,
+        retryLabel: "",
+        hasError: false
+      };
+    }),
+    countLabel: `${s.runs.length} of ${s.total}${s.dropped > 0 ? ` \xB7 ${s.dropped} dropped` : ""}`,
+    statsLabel: stats
+  };
 }
-function TruncationBadge({ reason }) {
-  return /* @__PURE__ */ jsx2(
-    Badge2,
-    {
-      tone: "warning",
-      title: reason === "cycle" ? "This step is nested inside itself \u2014 the panel stopped here rather than repeat it." : "Nesting is deeper than this panel will render.",
-      children: reason === "cycle" ? "cycle" : "deeper\u2026"
+function applyRunsUi(c, intent) {
+  switch (intent.kind) {
+    case "search":
+      c.setSearch(intent.value);
+      break;
+    case "clearTerminal":
+      c.clearTerminal();
+      break;
+    case "status": {
+      const active = new Set(c.getState().filter.statuses ?? []);
+      const st = intent.status;
+      if (active.has(st)) active.delete(st);
+      else active.add(st);
+      c.setStatuses([...active]);
+      break;
     }
-  );
-}
-function RowLabel({
-  status,
-  text: text2,
-  trailing
-}) {
-  return /* @__PURE__ */ jsxs2("span", { style: { display: "flex", gap: 6, alignItems: "center", minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx2(Badge2, { tone: toneOf(status), children: status }),
-    /* @__PURE__ */ jsx2("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: text2 }),
-    trailing
-  ] });
+    case "source":
+      c.toggleSource(intent.id, intent.on);
+      break;
+    case "row": {
+      const row = c.getState().rows.find((r) => r.runId === intent.runId && r.stepPath.join("/") === intent.stepPath.join("/"));
+      if (row?.hasChildren) c.toggleExpanded(intent.runId, intent.stepPath.length ? intent.stepPath : void 0);
+      c.activate(intent.runId, intent.stepPath.length ? intent.stepPath : void 0);
+      break;
+    }
+    case "contextMenu":
+      c.requestContextMenu(intent.runId, intent.x, intent.y);
+      break;
+    case "cancel":
+      c.cancel(intent.runId);
+      break;
+    case "retry":
+      c.retry(intent.runId);
+      break;
+  }
 }
-function RunRow({
-  row,
-  controller,
-  showProgress,
-  now
-}) {
-  const run = row.run;
-  const duration = durationOf(run, now());
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2(
-      Row2,
+var runsViewManifest = {
+  id: runsManifest.id,
+  version: "1.0.0",
+  title: "Runs",
+  category: "ops",
+  layout: { slot: "side" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The RunsViewModel the runtime derives from the controller on every draw." }],
+  outputs: [{ id: "ui", type: "object", label: "UI intent", description: "{ kind, \u2026 } \u2014 applied by the runtime to the controller." }],
+  commands: []
+};
+var EMPTY2 = { search: "", statuses: [], multiSource: false, sources: [], hasChips: false, empty: true, emptyTitle: "No runs yet", emptyHint: "Run something to see it here.", listed: false, rows: [], countLabel: "0 of 0" };
+var BEHAVIOURS2 = {
+  "ops/runsPanelView": (inputs) => inputs.view ?? EMPTY2
+};
+var RUNS_RUNTIME_UNITS = [];
+var text2 = (b) => ({ component: "text", props: { text: b } });
+var ui2 = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var chip = (intent) => ({
+  component: "chrome/FilterChip",
+  props: { on: { item: "on" }, title: { item: "title" } },
+  on: { onChange: intent },
+  children: [{ component: "chrome/Badge", props: { tone: { item: "tone" } }, children: [text2({ item: "label" })] }]
+});
+var RUNS_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: runsViewManifest,
+  behaviour: "ops/runsPanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
       {
-        noIcon: true,
-        onClick: () => {
-          if (row.hasChildren) controller.toggleExpanded(run.id);
-          controller.activate(run.id);
-        },
-        onContextMenu: (e) => {
-          e.preventDefault();
-          controller.requestContextMenu(run.id, e.clientX, e.clientY);
-        },
-        label: /* @__PURE__ */ jsx2(
-          RowLabel,
-          {
-            status: run.status,
-            text: run.label,
-            trailing: /* @__PURE__ */ jsxs2(Fragment2, { children: [
-              run.trigger ? /* @__PURE__ */ jsx2("span", { style: { opacity: 0.5, fontSize: 9 }, children: run.trigger }) : null,
-              (run.retryCount ?? 0) > 0 ? /* @__PURE__ */ jsx2(Badge2, { title: "Retries so far", children: `retry x${run.retryCount}` }) : null,
-              row.truncated ? /* @__PURE__ */ jsx2(TruncationBadge, { reason: row.truncated }) : null
-            ] })
-          }
-        ),
-        meta: showProgress && run.progress !== void 0 ? /* @__PURE__ */ jsx2("span", { style: { width: 48, display: "inline-flex" }, children: /* @__PURE__ */ jsx2(
-          ProportionBar,
+        component: "chrome/Toolbar",
+        props: {
+          left: { node: { component: "chrome/SearchField", props: { value: { input: "view.search" }, placeholder: { value: "Filter runs\u2026" } }, on: { onChange: ui2("search", { value: { arg: "" } }) } } },
+          right: { node: { component: "chrome/ToolbarGroup", props: { end: { value: true } }, children: [{ component: "chrome/TextButton", on: { onClick: ui2("clearTerminal") }, children: [text2({ value: "Clear finished" })] }] } }
+        }
+      },
+      {
+        component: "chrome/Stack",
+        when: { input: "view.hasChips" },
+        props: { direction: { value: "row" }, gap: { value: 4 }, pad: { value: "inset" } },
+        children: [
+          { ...chip(ui2("status", { status: { item: "id" }, on: { arg: "" } })), each: { input: "view.statuses", key: "id" } },
+          { ...chip(ui2("source", { id: { item: "id" }, on: { arg: "" } })), each: { input: "view.sources", key: "id" } }
+        ]
+      },
+      { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { input: "view.emptyTitle" }, hint: { input: "view.emptyHint" } } },
+      {
+        component: "chrome/ScrollArea",
+        when: { input: "view.listed" },
+        children: [
           {
-            label: `${Math.round(run.progress * 100)}%`,
-            segments: [
-              { value: run.progress, opacity: 0.45 },
-              { value: Math.max(0, 1 - run.progress), opacity: 0.06 }
+            component: "chrome/RowList",
+            children: [
+              {
+                component: "fragment",
+                each: { input: "view.rows", key: "key" },
+                children: [
+                  {
+                    component: "chrome/Row",
+                    props: {
+                      noIcon: { value: true },
+                      depth: { item: "depth" },
+                      dimmed: { item: "step" },
+                      label: {
+                        node: {
+                          component: "chrome/Stack",
+                          props: { direction: { value: "row" }, pad: { value: "none" } },
+                          children: [
+                            { component: "chrome/Badge", props: { tone: { item: "tone" } }, children: [text2({ item: "status" })] },
+                            { component: "chrome/Text", children: [text2({ item: "label" })] },
+                            { component: "chrome/Text", when: { item: "trigger" }, props: { role: { value: "caption" } }, children: [text2({ item: "trigger" })] },
+                            { component: "chrome/Badge", when: { item: "retries" }, props: { title: { value: "Retries so far" } }, children: [text2({ item: "retries" })] },
+                            { component: "chrome/Badge", when: { item: "truncated" }, props: { tone: { value: "warning" }, title: { item: "truncatedHint" } }, children: [text2({ item: "truncated" })] }
+                          ]
+                        }
+                      },
+                      meta: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "chrome/Progress", when: { item: "hasProgress" }, props: { value: { item: "progress" }, label: { item: "progressLabel" } } },
+                            { component: "chrome/Text", when: { item: "duration" }, props: { role: { value: "number" } }, children: [text2({ item: "duration" })] }
+                          ]
+                        }
+                      },
+                      trailing: {
+                        node: {
+                          component: "fragment",
+                          children: [
+                            { component: "chrome/IconButton", when: { item: "canCancel" }, props: { size: { value: "sm" }, icon: { node: { component: "icons/Cancel" } }, label: { item: "cancelLabel" } }, on: { onClick: ui2("cancel", { runId: { item: "runId" } }) } },
+                            { component: "chrome/IconButton", when: { item: "canRetry" }, props: { size: { value: "sm" }, icon: { node: { component: "icons/Retry" } }, label: { item: "retryLabel" } }, on: { onClick: ui2("retry", { runId: { item: "runId" } }) } }
+                          ]
+                        }
+                      }
+                    },
+                    on: { onClick: ui2("row", { runId: { item: "runId" }, stepPath: { item: "stepPath" } }), onContextMenuAt: ui2("contextMenu", { runId: { item: "runId" }, x: { arg: "", index: 0 }, y: { arg: "", index: 1 } }) }
+                  },
+                  {
+                    component: "chrome/Note",
+                    when: { item: "hasError" },
+                    props: { variant: { value: "inset" } },
+                    // The host's sentence, verbatim. The panel never composes error prose.
+                    children: [{ component: "chrome/Badge", props: { tone: { value: "error" } }, children: [text2({ item: "errorCode" })] }, text2({ value: " " }), text2({ item: "errorMessage" })]
+                  }
+                ]
+              }
             ]
           }
-        ) }) : duration !== null ? /* @__PURE__ */ jsx2("span", { style: { fontVariantNumeric: "tabular-nums", opacity: 0.6 }, children: formatDuration(duration) }) : null,
-        trailing: /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          canCancel(run) ? /* @__PURE__ */ jsx2(
-            IconButton2,
-            {
-              size: "sm",
-              icon: /* @__PURE__ */ jsx2(CancelGlyph, {}),
-              label: `Cancel ${run.label}`,
-              onClick: () => controller.cancel(run.id)
-            }
-          ) : null,
-          canRetry(run) ? /* @__PURE__ */ jsx2(
-            IconButton2,
-            {
-              size: "sm",
-              icon: /* @__PURE__ */ jsx2(RetryGlyph, {}),
-              label: `Retry ${run.label}`,
-              onClick: () => controller.retry(run.id)
-            }
-          ) : null
-        ] })
+        ]
+      },
+      { component: "chrome/StatusBar", props: { left: { input: "view.countLabel" }, right: { input: "view.statsLabel" } } }
+    ]
+  }
+};
+
+// src/ops/runs/react/RunsPanelView.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CancelGlyph = ICONS["icons/Cancel"];
+var RetryGlyph = ICONS["icons/Retry"];
+function RunsPanelView({ controller, ...options }) {
+  useSyncExternalStore2(controller.subscribe, controller.getState, controller.getState);
+  const view = runsViewState(controller, options);
+  const ui3 = (intent) => applyRunsUi(controller, intent);
+  const chip2 = (c, onChange) => /* @__PURE__ */ jsx2(FilterChip2, { on: c.on, title: c.title, onChange, children: /* @__PURE__ */ jsx2(Badge2, { tone: c.tone, children: c.label }) }, c.id);
+  return /* @__PURE__ */ jsxs2(Column2, { children: [
+    /* @__PURE__ */ jsx2(
+      Toolbar2,
+      {
+        left: /* @__PURE__ */ jsx2(SearchField2, { value: view.search, placeholder: "Filter runs\u2026", onChange: (value) => ui3({ kind: "search", value }) }),
+        right: /* @__PURE__ */ jsx2(ToolbarGroup2, { end: true, children: /* @__PURE__ */ jsx2(TextButton, { onClick: () => ui3({ kind: "clearTerminal" }), children: "Clear finished" }) })
       }
     ),
-    run.error ? /* @__PURE__ */ jsxs2("div", { style: { padding: "0 10px 3px 24px", fontSize: 10, opacity: 0.75 }, children: [
-      /* @__PURE__ */ jsx2(Badge2, { tone: "error", children: run.error.code }),
-      " ",
-      run.error.message
-    ] }) : null
-  ] });
-}
-function StepRow({
-  row,
-  controller,
-  showProgress
-}) {
-  const step = row.step;
-  const elapsed = step.startedAt !== void 0 && step.endedAt !== void 0 ? step.endedAt - step.startedAt : null;
-  return /* @__PURE__ */ jsx2(
-    Row2,
-    {
-      noIcon: true,
-      style: { paddingLeft: 12 + row.depth * 12, opacity: 0.85 },
-      onClick: () => {
-        if (row.hasChildren) controller.toggleExpanded(row.runId, row.stepPath);
-        controller.activate(row.runId, row.stepPath);
-      },
-      label: /* @__PURE__ */ jsx2(
-        RowLabel,
+    view.hasChips ? /* @__PURE__ */ jsxs2(Stack2, { direction: "row", gap: 4, pad: "inset", children: [
+      view.statuses.map((c) => chip2(c, (on) => ui3({ kind: "status", status: c.id, on }))),
+      view.sources.map((c) => chip2(c, (on) => ui3({ kind: "source", id: c.id, on })))
+    ] }) : null,
+    view.empty ? /* @__PURE__ */ jsx2(EmptyState2, { title: view.emptyTitle, hint: view.emptyHint }) : null,
+    view.listed ? /* @__PURE__ */ jsx2(ScrollArea2, { children: /* @__PURE__ */ jsx2(RowList2, { children: view.rows.map((row) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(
+        Row2,
         {
-          status: step.status,
-          text: step.label,
-          trailing: row.truncated ? /* @__PURE__ */ jsx2(TruncationBadge, { reason: row.truncated }) : null
-        }
+          noIcon: true,
+          depth: row.depth,
+          dimmed: row.step,
+          label: /* @__PURE__ */ jsxs2(Stack2, { direction: "row", pad: "none", children: [
+            /* @__PURE__ */ jsx2(Badge2, { tone: row.tone, children: row.status }),
+            /* @__PURE__ */ jsx2(Text2, { children: row.label }),
+            row.trigger ? /* @__PURE__ */ jsx2(Text2, { role: "caption", children: row.trigger }) : null,
+            row.retries ? /* @__PURE__ */ jsx2(Badge2, { title: "Retries so far", children: row.retries }) : null,
+            row.truncated ? /* @__PURE__ */ jsx2(Badge2, { tone: "warning", title: row.truncatedHint, children: row.truncated }) : null
+          ] }),
+          meta: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            row.hasProgress ? /* @__PURE__ */ jsx2(Progress, { value: row.progress, label: row.progressLabel }) : null,
+            row.duration ? /* @__PURE__ */ jsx2(Text2, { role: "number", children: row.duration }) : null
+          ] }),
+          trailing: /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            row.canCancel ? /* @__PURE__ */ jsx2(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx2(CancelGlyph, {}), label: row.cancelLabel, onClick: () => ui3({ kind: "cancel", runId: row.runId }) }) : null,
+            row.canRetry ? /* @__PURE__ */ jsx2(IconButton2, { size: "sm", icon: /* @__PURE__ */ jsx2(RetryGlyph, {}), label: row.retryLabel, onClick: () => ui3({ kind: "retry", runId: row.runId }) }) : null
+          ] }),
+          onClick: () => ui3({ kind: "row", runId: row.runId, stepPath: row.stepPath }),
+          onContextMenuAt: (x, y) => ui3({ kind: "contextMenu", runId: row.runId, x, y })
+        },
+        row.key
       ),
-      meta: showProgress && step.progress !== void 0 ? /* @__PURE__ */ jsx2("span", { style: { width: 48, display: "inline-flex" }, children: /* @__PURE__ */ jsx2(
-        ProportionBar,
-        {
-          label: `${Math.round(step.progress * 100)}%`,
-          segments: [
-            { value: step.progress, opacity: 0.45 },
-            { value: Math.max(0, 1 - step.progress), opacity: 0.06 }
-          ]
-        }
-      ) }) : elapsed !== null ? /* @__PURE__ */ jsx2("span", { style: { fontVariantNumeric: "tabular-nums", opacity: 0.6 }, children: formatDuration(elapsed) }) : null
-    }
-  );
+      row.hasError ? /* @__PURE__ */ jsxs2(Note, { variant: "inset", children: [
+        /* @__PURE__ */ jsx2(Badge2, { tone: "error", children: row.errorCode }),
+        " ",
+        row.errorMessage
+      ] }, `${row.key}:error`) : null
+    ] })) }) }) : null,
+    /* @__PURE__ */ jsx2(StatusBar2, { left: view.countLabel, right: view.statsLabel })
+  ] });
 }
 
 // src/ops/runs/panel.ts
@@ -2930,11 +3025,11 @@ function omissionLabel(omission) {
 }
 
 // src/ops/diff/controller.ts
-var EMPTY2 = { files: [], status: "idle" };
+var EMPTY3 = { files: [], status: "idle" };
 var DiffController = class {
   host;
   reviewEnabled;
-  model = EMPTY2;
+  model = EMPTY3;
   rev = -1;
   decisions = /* @__PURE__ */ new Map();
   view;
@@ -3197,7 +3292,7 @@ var DiffController = class {
   /** Tear down. */
   dispose() {
     this.listeners.clear();
-    this.model = EMPTY2;
+    this.model = EMPTY3;
     this.decisions.clear();
   }
 };
@@ -3353,8 +3448,8 @@ var MARK = {
   context: {}
 };
 var SIGIL = { added: "+", removed: "-", context: " " };
-function visible(text2, show) {
-  return show ? text2.replace(/\t/g, "\u2192   ").replace(/ /g, "\xB7") : text2;
+function visible(text3, show) {
+  return show ? text3.replace(/\t/g, "\u2192   ").replace(/ /g, "\xB7") : text3;
 }
 function LineText({
   line,
@@ -3751,7 +3846,10 @@ export {
   LEVEL_ORDER,
   MESSAGE_ELISION,
   REDACTION_CARRY,
+  BEHAVIOURS2 as RUNS_BEHAVIOURS,
+  RUNS_DECLARATION,
   RUNS_PANEL_ID,
+  RUNS_RUNTIME_UNITS,
   RUN_PATH_SEPARATOR,
   RUN_STATUSES,
   RunsController,
@@ -3763,6 +3861,7 @@ export {
   XENO_TERMINAL_THEME_KEYS,
   appendStepsAtPath,
   applyConsoleUi,
+  applyRunsUi,
   canCancel,
   canRetry,
   collapseAdjacent,
@@ -3804,6 +3903,8 @@ export {
   resolveStepPath,
   runsManifest,
   runsPanel,
+  runsViewManifest,
+  runsViewState,
   safeJson,
   spliceRedactedAppend,
   splitRows,
@@ -3811,5 +3912,6 @@ export {
   terminalManifest,
   terminalPanel,
   terminalThemeVar,
+  toneOf,
   truncateLogMessage
 };