@xenosystem/blocks 0.13.11 → 0.13.13

package/dist/ops/index.js

@@ -7,11 +7,8 @@ import {
   terminalThemeVar
 } from "../chunk-WE6A2DTY.js";
 import {
-  CancelGlyph,
-  ClearGlyph,
-  CopyGlyph,
-  RetryGlyph
-} from "../chunk-K7YLLV2W.js";
+  ICONS
+} from "../chunk-6XVFYPVH.js";
 import "../chunk-2KG3PWR4.js";
 
 // src/ops/console/panel.ts
@@ -63,10 +60,10 @@ function spliceRedactedAppend(existing, addition, redact, carry = REDACTION_CARR
   const tail = existing.slice(cut);
   return head + redact(tail + addition);
 }
-function truncateLogMessage(text, max) {
-  if (max <= 0 || text.length <= max) return text;
-  if (max <= MESSAGE_ELISION.length) return text.slice(text.length - max);
-  return MESSAGE_ELISION + text.slice(text.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();
@@ -243,7 +240,7 @@ var ConsoleController = class {
    */
   merge(existing, patch) {
     const secrets = [...this.host.getSecrets?.() ?? []];
-    const redact = (text) => redactForLog(text, 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) {
@@ -388,6 +385,29 @@ var ConsoleController = class {
   }
   /* ── Interaction ───────────────────────────────────────────────────────── */
   /** Follow the tail. Auto-disabled by the view when the user scrolls up. */
+  /* ── View state the declaration cannot hold ────────────────────────────── */
+  expandedId = null;
+  viewport = { height: 0, scrollTop: 0 };
+  /** Which record's data is expanded under its row, if any. */
+  getExpanded() {
+    return this.expandedId;
+  }
+  /** Toggle a record's expanded detail (only records carrying `data` expand). */
+  toggleExpanded(recordId) {
+    const record = this.records.find((r) => r.id === recordId);
+    if (!record || record.data === void 0) return;
+    this.expandedId = this.expandedId === recordId ? null : recordId;
+    this.notify();
+  }
+  /** The scroller reports its viewport; the view state windows the rows from it. */
+  setViewport(height, scrollTop) {
+    if (this.viewport.height === height && this.viewport.scrollTop === scrollTop) return;
+    this.viewport = { height, scrollTop };
+    this.notify();
+  }
+  getViewport() {
+    return this.viewport;
+  }
   setFollow(follow) {
     if (this.follow === follow) return;
     this.follow = follow;
@@ -607,203 +627,289 @@ var consoleManifest = {
 };
 
 // src/ops/console/react/ConsolePanelView.tsx
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useEffect, useRef, useSyncExternalStore } from "react";
 import {
   Badge,
+  Code,
+  Column,
   EmptyState,
+  FilterChip,
   IconButton,
   Row,
   RowList,
   ScrollArea,
   SearchField,
   SegmentedControl,
+  Stack,
   StatusBar,
+  Text,
   Toolbar,
-  ToolbarGroup
+  ToolbarGroup,
+  VirtualWindow
 } from "@xenosystem/components/chrome";
+
+// src/ops/console/declaration.ts
 import { computeWindow } from "@xenosystem/tree-core";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var TONE = {
-  trace: "neutral",
-  debug: "neutral",
-  info: "info",
-  warn: "warning",
-  error: "error"
+var TONE = { trace: "neutral", debug: "neutral", info: "info", warn: "warning", error: "error" };
+function consoleViewState(c, options = {}) {
+  const s = c.getState();
+  const rowHeight = options.rowHeight ?? 20;
+  const showTimestamps = options.showTimestamps ?? true;
+  const viewport = c.getViewport();
+  const window_ = computeWindow({ scrollTop: viewport.scrollTop, viewportHeight: viewport.height || rowHeight * 20, rowHeight, rowCount: s.rows.length });
+  const expanded = c.getExpanded();
+  return {
+    search: s.filter.search ?? "",
+    levels: LEVEL_ORDER.map((l) => ({ value: l, label: l.slice(0, 1).toUpperCase() })),
+    level: s.filter.minLevel ?? "trace",
+    errors: s.counts.error > 0 ? String(s.counts.error) : void 0,
+    warns: s.counts.warn > 0 ? String(s.counts.warn) : void 0,
+    multiSource: s.sources.length > 1,
+    sources: s.sources.map((src) => ({ id: src.id, label: src.label ?? src.id, on: src.enabled, title: `${src.count} records` })),
+    empty: s.rows.length === 0,
+    emptyTitle: s.total > 0 ? "No matches" : "No output",
+    emptyHint: s.total > 0 ? "Nothing matches the current filter." : options.emptyHint ?? "Run something to see its output here.",
+    listed: s.rows.length > 0,
+    rowHeight,
+    totalHeight: window_.totalHeight,
+    offsetTop: window_.offsetTop,
+    rows: s.rows.slice(window_.startIndex, window_.endIndex).map((record) => ({
+      id: record.id,
+      time: showTimestamps ? new Date(record.ts).toISOString().slice(11, 23) : void 0,
+      level: record.level,
+      tone: TONE[record.level],
+      source: record.source,
+      message: record.message,
+      repeat: (record.count ?? 1) > 1 ? `x${record.count}` : void 0,
+      expanded: expanded === record.id && record.data !== void 0,
+      // Already redacted — the buffer never held the raw value.
+      detail: expanded === record.id && record.data !== void 0 ? safeJson(record.data) : void 0
+    })),
+    countLabel: `${s.rows.length} of ${s.total}` + (s.dropped > 0 ? ` \xB7 ${s.dropped} dropped` : "") + (s.droppedPatches > 0 ? ` \xB7 ${s.droppedPatches} unmatched` : ""),
+    followLabel: s.follow ? "following" : void 0
+  };
+}
+function applyConsoleUi(c, intent) {
+  switch (intent.kind) {
+    case "search":
+      c.setSearch(intent.value);
+      break;
+    case "level":
+      c.setLevel(intent.level === "trace" ? void 0 : intent.level);
+      break;
+    case "copyVisible":
+      void globalThis.navigator?.clipboard?.writeText(c.copyVisible());
+      break;
+    case "clear":
+      c.clear();
+      break;
+    case "source":
+      c.toggleSource(intent.id, intent.on);
+      break;
+    case "row":
+      c.toggleExpanded(intent.id);
+      c.activate(intent.id);
+      break;
+    case "contextMenu":
+      c.requestContextMenu(intent.id, intent.x, intent.y);
+      break;
+  }
+}
+var consoleViewManifest = {
+  id: consoleManifest.id,
+  version: "1.0.0",
+  title: "Console",
+  category: "ops",
+  layout: { slot: "bottom" },
+  inputs: [{ id: "view", type: "object", label: "View state", description: "The ConsoleViewModel 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: []
 };
-function ConsolePanelView({
-  controller,
-  rowHeight = 20,
-  showTimestamps = true,
-  emptyHint
-}) {
+var EMPTY = { search: "", levels: [], level: "trace", multiSource: false, sources: [], empty: true, emptyTitle: "No output", emptyHint: "Run something to see its output here.", listed: false, rowHeight: 20, totalHeight: 0, offsetTop: 0, rows: [], countLabel: "0 of 0" };
+var BEHAVIOURS = {
+  "ops/consolePanelView": (inputs) => inputs.view ?? EMPTY
+};
+var CONSOLE_RUNTIME_UNITS = ["console/Scroller"];
+var text = (b) => ({ component: "text", props: { text: b } });
+var ui = (kind, fields = {}) => ({ emit: "ui", value: { object: { kind: { value: kind }, ...fields } } });
+var CONSOLE_DECLARATION = {
+  format: "xeno.block@1",
+  manifest: consoleViewManifest,
+  behaviour: "ops/consolePanelView",
+  composition: {
+    component: "chrome/Column",
+    children: [
+      {
+        component: "chrome/Toolbar",
+        props: {
+          left: {
+            node: {
+              component: "fragment",
+              children: [
+                { component: "chrome/SearchField", props: { value: { input: "view.search" }, placeholder: { value: "Filter\u2026" } }, on: { onChange: ui("search", { value: { arg: "" } }) } },
+                { component: "chrome/SegmentedControl", props: { size: { value: "sm" }, label: { value: "Minimum level" }, options: { input: "view.levels" }, value: { input: "view.level" } }, on: { onChange: ui("level", { level: { arg: "" } }) } }
+              ]
+            }
+          },
+          right: {
+            node: {
+              component: "chrome/ToolbarGroup",
+              props: { end: { value: true } },
+              children: [
+                { component: "chrome/Badge", when: { input: "view.errors" }, props: { tone: { value: "error" } }, children: [text({ input: "view.errors" })] },
+                { component: "chrome/Badge", when: { input: "view.warns" }, props: { tone: { value: "warning" } }, children: [text({ input: "view.warns" })] },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Copy" } }, label: { value: "Copy visible" } }, on: { onClick: ui("copyVisible") } },
+                { component: "chrome/IconButton", props: { icon: { node: { component: "icons/Clear" } }, label: { value: "Clear" } }, on: { onClick: ui("clear") } }
+              ]
+            }
+          }
+        }
+      },
+      {
+        component: "chrome/Stack",
+        when: { input: "view.multiSource" },
+        props: { direction: { value: "row" }, gap: { value: 4 }, pad: { value: "inset" } },
+        children: [
+          { component: "chrome/FilterChip", each: { input: "view.sources", key: "id" }, props: { on: { item: "on" }, title: { item: "title" } }, on: { onChange: ui("source", { id: { item: "id" }, on: { arg: "" } }) }, children: [text({ item: "label" })] }
+        ]
+      },
+      { component: "chrome/EmptyState", when: { input: "view.empty" }, props: { title: { input: "view.emptyTitle" }, hint: { input: "view.emptyHint" } } },
+      {
+        component: "console/Scroller",
+        when: { input: "view.listed" },
+        children: [
+          {
+            component: "chrome/VirtualWindow",
+            props: { totalHeight: { input: "view.totalHeight" }, offsetTop: { input: "view.offsetTop" } },
+            children: [
+              {
+                component: "chrome/RowList",
+                props: { role: { value: "log" } },
+                children: [
+                  {
+                    component: "fragment",
+                    each: { input: "view.rows", key: "id" },
+                    children: [
+                      {
+                        component: "chrome/Row",
+                        props: {
+                          height: { input: "view.rowHeight" },
+                          noIcon: { value: true },
+                          label: {
+                            node: {
+                              component: "chrome/Stack",
+                              props: { direction: { value: "row" }, pad: { value: "none" } },
+                              children: [
+                                { component: "chrome/Text", when: { item: "time" }, props: { role: { value: "number" } }, children: [text({ item: "time" })] },
+                                { component: "chrome/Badge", props: { tone: { item: "tone" } }, children: [text({ item: "level" })] },
+                                { component: "chrome/Text", when: { item: "source" }, props: { role: { value: "meta" } }, children: [text({ item: "source" })] },
+                                { component: "chrome/Text", children: [text({ item: "message" })] }
+                              ]
+                            }
+                          },
+                          trailing: { node: { component: "chrome/Badge", when: { item: "repeat" }, props: { title: { value: "Repeated consecutively" } }, children: [text({ item: "repeat" })] } }
+                        },
+                        on: { onClick: ui("row", { id: { item: "id" } }), onContextMenuAt: ui("contextMenu", { id: { item: "id" }, x: { arg: "", index: 0 }, y: { arg: "", index: 1 } }) }
+                      },
+                      { component: "chrome/Code", when: { item: "expanded" }, children: [text({ item: "detail" })] }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      { component: "chrome/StatusBar", props: { left: { input: "view.countLabel" }, right: { input: "view.followLabel" } } }
+    ]
+  }
+};
+
+// src/ops/console/react/ConsolePanelView.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var CopyGlyph = ICONS["icons/Copy"];
+var ClearGlyph = ICONS["icons/Clear"];
+function ConsoleScroller({ controller, rowHeight = 20, children }) {
   const state = useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
-  const scrollRef = useRef(null);
-  const [viewport, setViewport] = useState({ height: 0, scrollTop: 0 });
-  const [expanded, setExpanded] = useState(null);
+  const ref = useRef(null);
   useEffect(() => {
-    const element = scrollRef.current;
-    if (!element || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(() => setViewport((v) => ({ ...v, height: element.clientHeight })));
-    observer.observe(element);
-    setViewport((v) => ({ ...v, height: element.clientHeight }));
-    return () => observer.disconnect();
-  }, []);
+    const el = ref.current;
+    if (!el) return;
+    controller.setViewport(el.clientHeight, el.scrollTop);
+    const RO = globalThis.ResizeObserver;
+    if (!RO) return;
+    const ro = new RO(() => controller.setViewport(el.clientHeight, el.scrollTop));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [controller]);
   useEffect(() => {
-    const element = scrollRef.current;
-    if (!element || !state.follow) return;
-    element.scrollTop = element.scrollHeight;
+    const el = ref.current;
+    if (!el || !state.follow) return;
+    el.scrollTop = el.scrollHeight;
   }, [state.rows.length, state.follow]);
-  const onScroll = useCallback(
-    (event) => {
-      const el = event.currentTarget;
-      setViewport((v) => ({ ...v, scrollTop: el.scrollTop }));
-      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < rowHeight;
-      if (state.follow && !atBottom) controller.setFollow(false);
-      else if (!state.follow && atBottom) controller.setFollow(true);
-    },
-    [controller, rowHeight, state.follow]
+  return /* @__PURE__ */ jsx(
+    ScrollArea,
+    {
+      ref,
+      onScroll: (e) => {
+        const el = e.currentTarget;
+        controller.setViewport(el.clientHeight, el.scrollTop);
+        const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < rowHeight;
+        if (state.follow && !atBottom) controller.setFollow(false);
+        else if (!state.follow && atBottom) controller.setFollow(true);
+      },
+      children
+    }
   );
-  const window = computeWindow({
-    scrollTop: viewport.scrollTop,
-    viewportHeight: viewport.height || rowHeight * 20,
-    rowHeight,
-    rowCount: state.rows.length
-  });
-  const slice = state.rows.slice(window.startIndex, window.endIndex);
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }, children: [
+}
+function consoleRuntimeComponents(controller, rowHeight) {
+  return {
+    "console/Scroller": ({ children }) => /* @__PURE__ */ jsx(ConsoleScroller, { controller, rowHeight, children })
+  };
+}
+function ConsolePanelView({ controller, ...options }) {
+  useSyncExternalStore(controller.subscribe, controller.getState, controller.getState);
+  const view = consoleViewState(controller, options);
+  const ui3 = (intent) => applyConsoleUi(controller, intent);
+  return /* @__PURE__ */ jsxs(Column, { children: [
     /* @__PURE__ */ jsx(
       Toolbar,
       {
         left: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            SearchField,
-            {
-              value: state.filter.search ?? "",
-              onChange: (term) => controller.setSearch(term),
-              placeholder: "Filter\u2026"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            SegmentedControl,
-            {
-              size: "sm",
-              label: "Minimum level",
-              options: LEVEL_ORDER.map((l) => ({ value: l, label: l.slice(0, 1).toUpperCase() })),
-              value: state.filter.minLevel ?? "trace",
-              onChange: (level) => controller.setLevel(level === "trace" ? void 0 : 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: [
-          state.counts.error > 0 ? /* @__PURE__ */ jsx(Badge, { tone: "error", children: String(state.counts.error) }) : null,
-          state.counts.warn > 0 ? /* @__PURE__ */ jsx(Badge, { tone: "warning", children: String(state.counts.warn) }) : null,
-          /* @__PURE__ */ jsx(
-            IconButton,
-            {
-              icon: /* @__PURE__ */ jsx(CopyGlyph, {}),
-              label: "Copy visible",
-              onClick: () => {
-                void navigator?.clipboard?.writeText(controller.copyVisible());
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(ClearGlyph, {}), label: "Clear", onClick: () => controller.clear() })
+          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: () => ui3({ kind: "copyVisible" }) }),
+          /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(ClearGlyph, {}), label: "Clear", onClick: () => ui3({ kind: "clear" }) })
         ] })
       }
     ),
-    state.sources.length > 1 ? /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4, padding: "2px 6px", flexWrap: "wrap" }, children: state.sources.map((source) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        onClick: () => controller.toggleSource(source.id),
-        style: { cursor: "pointer", opacity: source.enabled ? 1 : 0.4 },
-        children: /* @__PURE__ */ jsx(Badge, { title: `${source.count} records`, children: source.label ?? source.id })
-      },
-      source.id
-    )) }) : null,
-    state.rows.length === 0 ? /* @__PURE__ */ jsx(
-      EmptyState,
-      {
-        title: state.total > 0 ? "No matches" : "No output",
-        hint: state.total > 0 ? "Nothing matches the current filter." : emptyHint ?? "Run something to see its output here."
-      }
-    ) : /* @__PURE__ */ jsx(ScrollArea, { children: /* @__PURE__ */ jsx("div", { ref: scrollRef, onScroll, style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsx("div", { style: { height: window.totalHeight, position: "relative" }, children: /* @__PURE__ */ jsx("div", { style: { transform: `translateY(${window.offsetTop}px)` }, children: /* @__PURE__ */ jsx(RowList, { role: "log", children: slice.map((record) => /* @__PURE__ */ jsx(
-      LogRow,
-      {
-        record,
-        controller,
-        rowHeight,
-        showTimestamps,
-        expanded: expanded === record.id,
-        onToggle: () => setExpanded(expanded === record.id ? null : record.id)
-      },
-      record.id
-    )) }) }) }) }) }),
-    /* @__PURE__ */ jsx(
-      StatusBar,
-      {
-        left: `${state.rows.length} of ${state.total}` + (state.dropped > 0 ? ` \xB7 ${state.dropped} dropped` : "") + // A patch that addressed nothing is the one streaming failure with no visible symptom:
-        // the producer sees no line grow, and a mis-keyed wire looks exactly like a dead one.
-        (state.droppedPatches > 0 ? ` \xB7 ${state.droppedPatches} unmatched` : ""),
-        right: state.follow ? "following" : void 0
-      }
-    )
-  ] });
-}
-function LogRow({
-  record,
-  controller,
-  rowHeight,
-  showTimestamps,
-  expanded,
-  onToggle
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Row,
-      {
-        style: { height: rowHeight, alignItems: "flex-start" },
-        noIcon: true,
-        onClick: () => {
-          if (record.data !== void 0) onToggle();
-          controller.activate(record.id);
-        },
-        onContextMenu: (e) => {
-          e.preventDefault();
-          controller.requestContextMenu(record.id, e.clientX, e.clientY);
-        },
-        label: /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: 6, alignItems: "center", minWidth: 0 }, children: [
-          showTimestamps ? /* @__PURE__ */ jsx("span", { style: { opacity: 0.45, fontVariantNumeric: "tabular-nums", flex: "0 0 auto" }, children: new Date(record.ts).toISOString().slice(11, 23) }) : null,
-          /* @__PURE__ */ jsx(Badge, { tone: TONE[record.level], children: record.level }),
-          record.source ? /* @__PURE__ */ jsx("span", { style: { opacity: 0.55 }, children: record.source }) : null,
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", minWidth: 0 },
-              children: record.message
-            }
-          )
-        ] }),
-        trailing: (record.count ?? 1) > 1 ? (
-          // The best feature in any incumbent: a run of identical lines is one row with a count.
-          /* @__PURE__ */ jsx(Badge, { title: "Repeated consecutively", children: `x${record.count}` })
-        ) : null
-      }
-    ),
-    expanded && record.data !== void 0 ? /* @__PURE__ */ jsx(
-      "pre",
-      {
-        style: {
-          margin: 0,
-          padding: "2px 10px 6px 24px",
-          fontSize: 10,
-          lineHeight: 1.4,
-          whiteSpace: "pre-wrap",
-          wordBreak: "break-all",
-          opacity: 0.8
+    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(
+        Row,
+        {
+          height: view.rowHeight,
+          noIcon: true,
+          label: /* @__PURE__ */ jsxs(Stack, { direction: "row", pad: "none", children: [
+            row.time ? /* @__PURE__ */ jsx(Text, { role: "number", children: row.time }) : null,
+            /* @__PURE__ */ jsx(Badge, { tone: row.tone, children: row.level }),
+            row.source ? /* @__PURE__ */ jsx(Text, { role: "meta", children: row.source }) : null,
+            /* @__PURE__ */ jsx(Text, { children: row.message })
+          ] }),
+          trailing: row.repeat ? /* @__PURE__ */ jsx(Badge, { title: "Repeated consecutively", children: row.repeat }) : null,
+          onClick: () => ui3({ kind: "row", id: row.id }),
+          onContextMenuAt: (x, y) => ui3({ kind: "contextMenu", id: row.id, x, y })
         },
-        children: safeJson(record.data)
-      }
-    ) : null
+        row.id
+      ),
+      row.expanded ? /* @__PURE__ */ jsx(Code, { children: row.detail }, `${row.id}:detail`) : null
+    ] })) }) }) }) : null,
+    /* @__PURE__ */ jsx(StatusBar, { left: view.countLabel, right: view.followLabel })
   ] });
 }
 
@@ -1708,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",
@@ -1733,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,
-  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: text }),
-    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
@@ -2822,11 +3025,11 @@ function omissionLabel(omission) {
 }
 
 // src/ops/diff/controller.ts
-var EMPTY = { files: [], status: "idle" };
+var EMPTY3 = { files: [], status: "idle" };
 var DiffController = class {
   host;
   reviewEnabled;
-  model = EMPTY;
+  model = EMPTY3;
   rev = -1;
   decisions = /* @__PURE__ */ new Map();
   view;
@@ -3089,7 +3292,7 @@ var DiffController = class {
   /** Tear down. */
   dispose() {
     this.listeners.clear();
-    this.model = EMPTY;
+    this.model = EMPTY3;
     this.decisions.clear();
   }
 };
@@ -3245,8 +3448,8 @@ var MARK = {
   context: {}
 };
 var SIGIL = { added: "+", removed: "-", context: " " };
-function visible(text, show) {
-  return show ? text.replace(/\t/g, "\u2192   ").replace(/ /g, "\xB7") : text;
+function visible(text3, show) {
+  return show ? text3.replace(/\t/g, "\u2192   ").replace(/ /g, "\xB7") : text3;
 }
 function LineText({
   line,
@@ -3629,9 +3832,13 @@ function createDiffPanel(options = {}) {
 var diffPanel = createDiffPanel();
 export {
   ALL_STATUSES,
+  BEHAVIOURS as CONSOLE_BEHAVIOURS,
+  CONSOLE_DECLARATION,
   CONSOLE_PANEL_ID,
+  CONSOLE_RUNTIME_UNITS,
   ConsoleController,
   ConsolePanelView,
+  ConsoleScroller,
   DEFAULT_MAX_STEP_DEPTH,
   DIFF_PANEL_ID,
   DiffController,
@@ -3639,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,
@@ -3650,12 +3860,17 @@ export {
   TerminalPanelView,
   XENO_TERMINAL_THEME_KEYS,
   appendStepsAtPath,
+  applyConsoleUi,
+  applyRunsUi,
   canCancel,
   canRetry,
   collapseAdjacent,
   computeStats,
   consoleManifest,
   consolePanel,
+  consoleRuntimeComponents,
+  consoleViewManifest,
+  consoleViewState,
   countChanges,
   createConsolePanel,
   createDiffPanel,
@@ -3688,6 +3903,8 @@ export {
   resolveStepPath,
   runsManifest,
   runsPanel,
+  runsViewManifest,
+  runsViewState,
   safeJson,
   spliceRedactedAppend,
   splitRows,
@@ -3695,5 +3912,6 @@ export {
   terminalManifest,
   terminalPanel,
   terminalThemeVar,
+  toneOf,
   truncateLogMessage
 };