@flanksource/clicky-ui 0.3.15 → 0.3.17

package/dist/data/TaskProcessDetails.js

@@ -0,0 +1,113 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { TimeseriesGauge } from "./TimeseriesGauge.js";
+import { DiagnosticsTree } from "./diagnostics/DiagnosticsTree.js";
+import { buildTaskProcessForest } from "./task-process-details.js";
+import { formatBytes } from "../lib/format.js";
+import { UiActivity } from "../icons/components/UiActivity.js";
+import { UiDatabase } from "../icons/components/UiDatabase.js";
+import { UiFile } from "../icons/components/UiFile.js";
+function TaskProcessDetailsView({
+  details,
+  metricsBaseUrl
+}) {
+  const forest = buildTaskProcessForest(details.tree ?? []);
+  const metricBase = metricsBaseUrl ?? "/api/v1/tasks/metrics/";
+  const restartLabel = `${details.restarts} ${details.restarts === 1 ? "restart" : "restarts"}`;
+  return /* @__PURE__ */ jsxs("section", { className: "mb-3 space-y-3 rounded-md border bg-muted/20 p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { className: "font-mono text-foreground", children: [
+        "pid ",
+        details.pid ?? "—"
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: details.status }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        details.latest.cpuPercent.toFixed(1),
+        "% CPU"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        formatBytes(details.latest.rssBytes),
+        " RSS"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        formatBytes(details.latest.vmsBytes),
+        " VMS"
+      ] }),
+      /* @__PURE__ */ jsx("span", { children: details.latest.openFiles >= 0 ? `${details.latest.openFiles} files` : "files unavailable" }),
+      /* @__PURE__ */ jsx("span", { children: restartLabel }),
+      /* @__PURE__ */ jsx("span", { children: details.restartPolicy }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Peak ",
+        details.peak.cpuPercent.toFixed(1),
+        "% CPU · ",
+        formatBytes(details.peak.rssBytes),
+        " RSS · ",
+        formatBytes(details.peak.vmsBytes),
+        " VMS · ",
+        details.peak.openFiles >= 0 ? `${details.peak.openFiles} files` : "files unavailable"
+      ] })
+    ] }),
+    Object.keys(details.metrics).length > 0 && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-4", children: [
+      details.metrics.cpu && /* @__PURE__ */ jsx(
+        TimeseriesGauge,
+        {
+          baseUrl: metricBase,
+          value: { id: encodeURIComponent(details.metrics.cpu) },
+          title: "CPU",
+          icon: UiActivity,
+          unit: "percent",
+          variant: "cell",
+          range: "15m",
+          refreshMs: 2e3
+        }
+      ),
+      details.metrics.rss && /* @__PURE__ */ jsx(
+        TimeseriesGauge,
+        {
+          baseUrl: metricBase,
+          value: { id: encodeURIComponent(details.metrics.rss) },
+          title: "RSS",
+          icon: UiDatabase,
+          unit: "bytes",
+          variant: "cell",
+          range: "15m",
+          refreshMs: 2e3
+        }
+      ),
+      details.metrics.vms && /* @__PURE__ */ jsx(
+        TimeseriesGauge,
+        {
+          baseUrl: metricBase,
+          value: { id: encodeURIComponent(details.metrics.vms) },
+          title: "VMS",
+          icon: UiDatabase,
+          unit: "bytes",
+          variant: "cell",
+          range: "15m",
+          refreshMs: 2e3
+        }
+      ),
+      details.metrics.openFiles && /* @__PURE__ */ jsx(
+        TimeseriesGauge,
+        {
+          baseUrl: metricBase,
+          value: { id: encodeURIComponent(details.metrics.openFiles) },
+          title: "Open files",
+          icon: UiFile,
+          unit: "short",
+          variant: "cell",
+          range: "15m",
+          refreshMs: 2e3
+        }
+      )
+    ] }),
+    forest.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Process tree" }),
+      /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border bg-background", children: forest.map((root) => /* @__PURE__ */ jsx(DiagnosticsTree, { root, expandAll: true, onSelect: () => {
+      } }, root.pid)) })
+    ] })
+  ] });
+}
+export {
+  TaskProcessDetailsView
+};
+//# sourceMappingURL=TaskProcessDetails.js.map

package/dist/data/TaskProcessDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskProcessDetails.js","sources":["../../src/data/TaskProcessDetails.tsx"],"sourcesContent":["import { UiActivity, UiDatabase, UiFile } from \"../icons\";\nimport { TimeseriesGauge } from \"./TimeseriesGauge\";\nimport { DiagnosticsTree } from \"./diagnostics/DiagnosticsTree\";\nimport { formatBytes } from \"./diagnostics/utils\";\nimport { buildTaskProcessForest } from \"./task-process-details\";\nimport type { TaskProcessDetails } from \"./TaskSnapshot\";\n\nexport function TaskProcessDetailsView({\n  details,\n  metricsBaseUrl,\n}: {\n  details: TaskProcessDetails;\n  metricsBaseUrl?: string;\n}) {\n  const forest = buildTaskProcessForest(details.tree ?? []);\n  const metricBase = metricsBaseUrl ?? \"/api/v1/tasks/metrics/\";\n  const restartLabel = `${details.restarts} ${details.restarts === 1 ? \"restart\" : \"restarts\"}`;\n\n  return (\n    <section className=\"mb-3 space-y-3 rounded-md border bg-muted/20 p-3\">\n      <div className=\"flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground\">\n        <span className=\"font-mono text-foreground\">pid {details.pid ?? \"—\"}</span>\n        <span>{details.status}</span>\n        <span>{details.latest.cpuPercent.toFixed(1)}% CPU</span>\n        <span>{formatBytes(details.latest.rssBytes)} RSS</span>\n        <span>{formatBytes(details.latest.vmsBytes)} VMS</span>\n        <span>{details.latest.openFiles >= 0 ? `${details.latest.openFiles} files` : \"files unavailable\"}</span>\n        <span>{restartLabel}</span>\n        <span>{details.restartPolicy}</span>\n        <span>\n          Peak {details.peak.cpuPercent.toFixed(1)}% CPU · {formatBytes(details.peak.rssBytes)} RSS · {formatBytes(details.peak.vmsBytes)} VMS · {details.peak.openFiles >= 0 ? `${details.peak.openFiles} files` : \"files unavailable\"}\n        </span>\n      </div>\n\n      {Object.keys(details.metrics).length > 0 && (\n        <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-4\">\n          {details.metrics.cpu && (\n            <TimeseriesGauge\n              baseUrl={metricBase}\n              value={{ id: encodeURIComponent(details.metrics.cpu) }}\n              title=\"CPU\"\n              icon={UiActivity}\n              unit=\"percent\"\n              variant=\"cell\"\n              range=\"15m\"\n              refreshMs={2000}\n            />\n          )}\n          {details.metrics.rss && (\n            <TimeseriesGauge\n              baseUrl={metricBase}\n              value={{ id: encodeURIComponent(details.metrics.rss) }}\n              title=\"RSS\"\n              icon={UiDatabase}\n              unit=\"bytes\"\n              variant=\"cell\"\n              range=\"15m\"\n              refreshMs={2000}\n            />\n          )}\n          {details.metrics.vms && (\n            <TimeseriesGauge\n              baseUrl={metricBase}\n              value={{ id: encodeURIComponent(details.metrics.vms) }}\n              title=\"VMS\"\n              icon={UiDatabase}\n              unit=\"bytes\"\n              variant=\"cell\"\n              range=\"15m\"\n              refreshMs={2000}\n            />\n          )}\n          {details.metrics.openFiles && (\n            <TimeseriesGauge\n              baseUrl={metricBase}\n              value={{ id: encodeURIComponent(details.metrics.openFiles) }}\n              title=\"Open files\"\n              icon={UiFile}\n              unit=\"short\"\n              variant=\"cell\"\n              range=\"15m\"\n              refreshMs={2000}\n            />\n          )}\n        </div>\n      )}\n\n      {forest.length > 0 && (\n        <div className=\"space-y-1\">\n          <div className=\"text-[11px] font-semibold uppercase tracking-wide text-muted-foreground\">\n            Process tree\n          </div>\n          <div className=\"overflow-hidden rounded-md border bg-background\">\n            {forest.map((root) => (\n              <DiagnosticsTree key={root.pid} root={root} expandAll onSelect={() => {}} />\n            ))}\n          </div>\n        </div>\n      )}\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAOO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AACF,GAGG;AACD,QAAM,SAAS,uBAAuB,QAAQ,QAAQ,CAAA,CAAE;AACxD,QAAM,aAAa,kBAAkB;AACrC,QAAM,eAAe,GAAG,QAAQ,QAAQ,IAAI,QAAQ,aAAa,IAAI,YAAY,UAAU;AAE3F,SACE,qBAAC,WAAA,EAAQ,WAAU,oDACjB,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,6EACb,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,6BAA4B,UAAA;AAAA,QAAA;AAAA,QAAK,QAAQ,OAAO;AAAA,MAAA,GAAI;AAAA,MACpE,oBAAC,QAAA,EAAM,UAAA,QAAQ,OAAA,CAAO;AAAA,2BACrB,QAAA,EAAM,UAAA;AAAA,QAAA,QAAQ,OAAO,WAAW,QAAQ,CAAC;AAAA,QAAE;AAAA,MAAA,GAAK;AAAA,2BAChD,QAAA,EAAM,UAAA;AAAA,QAAA,YAAY,QAAQ,OAAO,QAAQ;AAAA,QAAE;AAAA,MAAA,GAAI;AAAA,2BAC/C,QAAA,EAAM,UAAA;AAAA,QAAA,YAAY,QAAQ,OAAO,QAAQ;AAAA,QAAE;AAAA,MAAA,GAAI;AAAA,MAChD,oBAAC,QAAA,EAAM,UAAA,QAAQ,OAAO,aAAa,IAAI,GAAG,QAAQ,OAAO,SAAS,WAAW,oBAAA,CAAoB;AAAA,MACjG,oBAAC,UAAM,UAAA,aAAA,CAAa;AAAA,MACpB,oBAAC,QAAA,EAAM,UAAA,QAAQ,cAAA,CAAc;AAAA,2BAC5B,QAAA,EAAK,UAAA;AAAA,QAAA;AAAA,QACE,QAAQ,KAAK,WAAW,QAAQ,CAAC;AAAA,QAAE;AAAA,QAAS,YAAY,QAAQ,KAAK,QAAQ;AAAA,QAAE;AAAA,QAAQ,YAAY,QAAQ,KAAK,QAAQ;AAAA,QAAE;AAAA,QAAQ,QAAQ,KAAK,aAAa,IAAI,GAAG,QAAQ,KAAK,SAAS,WAAW;AAAA,MAAA,EAAA,CAC5M;AAAA,IAAA,GACF;AAAA,IAEC,OAAO,KAAK,QAAQ,OAAO,EAAE,SAAS,KACrC,qBAAC,OAAA,EAAI,WAAU,wDACZ,UAAA;AAAA,MAAA,QAAQ,QAAQ,OACf;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,EAAE,IAAI,mBAAmB,QAAQ,QAAQ,GAAG,EAAA;AAAA,UACnD,OAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAGd,QAAQ,QAAQ,OACf;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,EAAE,IAAI,mBAAmB,QAAQ,QAAQ,GAAG,EAAA;AAAA,UACnD,OAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAGd,QAAQ,QAAQ,OACf;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,EAAE,IAAI,mBAAmB,QAAQ,QAAQ,GAAG,EAAA;AAAA,UACnD,OAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,MAGd,QAAQ,QAAQ,aACf;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,OAAO,EAAE,IAAI,mBAAmB,QAAQ,QAAQ,SAAS,EAAA;AAAA,UACzD,OAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,WAAW;AAAA,QAAA;AAAA,MAAA;AAAA,IACb,GAEJ;AAAA,IAGD,OAAO,SAAS,KACf,qBAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,2EAA0E,UAAA,gBAEzF;AAAA,MACA,oBAAC,OAAA,EAAI,WAAU,mDACZ,iBAAO,IAAI,CAAC,SACX,oBAAC,iBAAA,EAA+B,MAAY,WAAS,MAAC,UAAU,MAAM;AAAA,MAAC,KAAjD,KAAK,GAA+C,CAC3E,EAAA,CACH;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/data/TaskProgress.cjs

@@ -2,13 +2,20 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const button = require("../components/button.cjs");
 const utils = require("../lib/utils.cjs");
+const AnsiHtml = require("./AnsiHtml.cjs");
 const Icon = require("./Icon.cjs");
 const ProgressBar = require("./ProgressBar.cjs");
+const TaskProcessDetails = require("./TaskProcessDetails.cjs");
+const taskProcessDetails = require("./task-process-details.cjs");
 const taskStatus = require("./task-status.cjs");
+const UiRestart = require("../icons/components/UiRestart.cjs");
+const UiStop = require("../icons/components/UiStop.cjs");
+const UiPlay = require("../icons/components/UiPlay.cjs");
 const MAX_COMPLETED = 5;
 const MAX_PENDING = 3;
-function TaskProgress({ snapshots, title, compact, className }) {
+function TaskProgress({ snapshots, title, compact, className, onControl, metricsBaseUrl }) {
   const groups = snapshots.filter((s) => s.type === "group");
   const tasks = snapshots.filter((s) => s.type === "task");
   if (groups.length === 0) {
@@ -24,7 +31,9 @@ function TaskProgress({ snapshots, title, compact, className }) {
       {
         group: g,
         tasks: tasks.filter((t) => t.groupId === g.groupId || t.group === g.id),
-        compact
+        compact,
+        ...onControl ? { onControl } : {},
+        ...metricsBaseUrl ? { metricsBaseUrl } : {}
       },
       g.groupId || g.id
     ))
@@ -36,7 +45,9 @@ function isFailedOrWarn(t) {
 function TaskGroupCard({
   group: g,
   tasks,
-  compact
+  compact,
+  onControl,
+  metricsBaseUrl
 }) {
   const [showAll, setShowAll] = react.useState(false);
   const total = g.total ?? tasks.length;
@@ -56,7 +67,7 @@ function TaskGroupCard({
   const visiblePending = collapsePending ? pending.slice(0, MAX_PENDING) : pending;
   const isTerminal = g.status !== "running" && g.status !== "pending";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("rounded-lg border bg-card", compact ? "p-3" : "p-4"), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "flex items-center gap-1.5 text-sm font-semibold", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Icon.Icon,
@@ -69,19 +80,29 @@ function TaskGroupCard({
         progress && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: progress }),
         g.kind && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground", children: g.kind })
       ] }),
-      isTerminal && /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: utils.cn(
-            "rounded-full px-2 py-0.5 text-xs",
-            taskStatus.taskStatusColor(g.status),
-            taskStatus.taskStatusBg(g.status)
-          ),
-          children: g.status
-        }
-      )
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+        isTerminal && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: utils.cn(
+              "rounded-full px-2 py-0.5 text-xs",
+              taskStatus.taskStatusColor(g.status),
+              taskStatus.taskStatusBg(g.status)
+            ),
+            children: g.status
+          }
+        ),
+        onControl && /* @__PURE__ */ jsxRuntime.jsx(TaskControls, { group: g, onControl })
+      ] })
     ] }),
     total > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar.ProgressBar, { segments: taskStatus.taskSegments(counts), total, height: "h-1.5" }) }),
+    taskProcessDetails.isTaskProcessDetails(g.details) && /* @__PURE__ */ jsxRuntime.jsx(
+      TaskProcessDetails.TaskProcessDetailsView,
+      {
+        details: g.details,
+        ...metricsBaseUrl ? { metricsBaseUrl } : {}
+      }
+    ),
     hiddenCompleted > 0 || hiddenPending > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -98,6 +119,7 @@ function TaskRow({ task: t }) {
   const [expanded, setExpanded] = react.useState(false);
   const logs = t.logs ?? [];
   const hasLogs = logs.length > 0;
+  const hasOutput = !!t.stdout || !!t.stderr;
   const latestWarn = t.error ? void 0 : logs.filter((l) => l.level === "warn").at(-1);
   const done = t.progress ?? 0;
   const hasProgress = typeof t.maxValue === "number" && t.maxValue > 0 && done > 0;
@@ -107,9 +129,9 @@ function TaskRow({ task: t }) {
     {
       className: utils.cn(
         "flex items-start gap-3 border-b py-2 last:border-0",
-        hasLogs && "-mx-1 cursor-pointer rounded px-1 hover:bg-muted/50"
+        (hasLogs || hasOutput) && "-mx-1 cursor-pointer rounded px-1 hover:bg-muted/50"
       ),
-      onClick: hasLogs ? () => setExpanded((v) => !v) : void 0,
+      onClick: hasLogs || hasOutput ? () => setExpanded((v) => !v) : void 0,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           Icon.Icon,
@@ -124,7 +146,7 @@ function TaskRow({ task: t }) {
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: t.name }),
               t.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-normal text-red-500", children: t.error }),
               latestWarn && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils.cn("truncate text-xs font-normal", taskStatus.logLevelColor("warn")), children: latestWarn.message }),
-              hasLogs && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0 items-center rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: logs.length })
+              (hasLogs || hasOutput) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex shrink-0 items-center rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: logs.length + (t.stdout ? 1 : 0) + (t.stderr ? 1 : 0) })
             ] }),
             t.duration && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: t.duration })
           ] }),
@@ -150,11 +172,76 @@ function TaskRow({ task: t }) {
           expanded && hasLogs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 ml-1 max-h-48 space-y-0.5 overflow-y-auto border-l-2 pl-2", children: logs.map((l, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("text-xs", taskStatus.logLevelColor(l.level)), children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1 font-mono text-muted-foreground", children: l.level.substring(0, 3) }),
             l.message
-          ] }, i)) })
+          ] }, i)) }),
+          expanded && hasOutput && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 space-y-2", children: [
+            t.stdout && /* @__PURE__ */ jsxRuntime.jsx(TaskStream, { label: "stdout", text: t.stdout, ...t.stdoutTruncated ? { truncated: true } : {} }),
+            t.stderr && /* @__PURE__ */ jsxRuntime.jsx(TaskStream, { label: "stderr", text: t.stderr, ...t.stderrTruncated ? { truncated: true } : {}, error: true })
+          ] })
         ] })
       ]
     }
   );
 }
+function TaskStream({
+  label,
+  text,
+  truncated,
+  error
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded border bg-black", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-white/10 px-2 py-1 text-[10px] text-gray-400", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+      truncated && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "showing latest 1 MiB" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AnsiHtml.AnsiHtml,
+      {
+        text,
+        className: utils.cn("max-h-64 overflow-auto whitespace-pre-wrap p-2 text-xs text-gray-100", error && "text-red-300")
+      }
+    )
+  ] });
+}
+function TaskControls({
+  group,
+  onControl
+}) {
+  const [busy, setBusy] = react.useState(null);
+  const [error, setError] = react.useState("");
+  const icons = { start: UiPlay.UiPlay, stop: UiStop.UiStop, restart: UiRestart.UiRestart };
+  const invoke = async (action) => {
+    setBusy(action);
+    setError("");
+    try {
+      await onControl(action, group);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : `Failed to ${action} task`);
+    } finally {
+      setBusy(null);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    (group.controls ?? []).map((action) => {
+      var _a;
+      const ControlIcon = icons[action];
+      const label = ((_a = action[0]) == null ? void 0 : _a.toUpperCase()) + action.slice(1);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          "aria-label": label,
+          title: label,
+          disabled: busy !== null,
+          onClick: () => void invoke(action),
+          children: /* @__PURE__ */ jsxRuntime.jsx(ControlIcon, {})
+        },
+        action
+      );
+    }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { role: "alert", className: "text-xs text-red-600", children: error })
+  ] });
+}
 exports.TaskProgress = TaskProgress;
 //# sourceMappingURL=TaskProgress.cjs.map

package/dist/data/TaskProgress.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TaskProgress.cjs","sources":["../../src/data/TaskProgress.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"./Icon\";\nimport { ProgressBar } from \"./ProgressBar\";\nimport type { LogEntry, TaskSnapshot } from \"./TaskSnapshot\";\nimport {\n  bucketTasks,\n  logLevelColor,\n  taskSegments,\n  taskStatusBg,\n  taskStatusColor,\n  taskStatusIcon,\n} from \"./task-status\";\n\n// TaskProgress renders one or more clicky task runs (groups) and their child\n// tasks: a segmented progress bar per group plus collapsible per-task rows with\n// status icon, duration, error, and expandable logs. Presentational only —\n// callers feed it snapshots from useTaskRun (SSE) or any other source.\n\nconst MAX_COMPLETED = 5;\nconst MAX_PENDING = 3;\n\nexport interface TaskProgressProps {\n  snapshots: TaskSnapshot[];\n  title?: string;\n  /** Tighter spacing for embedding in a panel. */\n  compact?: boolean;\n  className?: string;\n}\n\nexport function TaskProgress({ snapshots, title, compact, className }: TaskProgressProps) {\n  const groups = snapshots.filter((s) => s.type === \"group\");\n  const tasks = snapshots.filter((s) => s.type === \"task\");\n\n  if (groups.length === 0) {\n    return (\n      <div className={cn(\"text-sm text-muted-foreground\", className)}>\n        {title ? `${title}: ` : \"\"}No tasks yet.\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(compact ? \"space-y-2\" : \"space-y-3\", className)}>\n      {title && <h2 className=\"text-sm font-semibold\">{title}</h2>}\n      {groups.map((g) => (\n        <TaskGroupCard\n          key={g.groupId || g.id}\n          group={g}\n          tasks={tasks.filter((t) => t.groupId === g.groupId || t.group === g.id)}\n          compact={compact}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction isFailedOrWarn(t: TaskSnapshot): boolean {\n  return t.status === \"failed\" || t.status === \"FAIL\" || t.status === \"ERR\" || t.status === \"warning\";\n}\n\nfunction TaskGroupCard({\n  group: g,\n  tasks,\n  compact,\n}: {\n  group: TaskSnapshot;\n  tasks: TaskSnapshot[];\n  compact: boolean | undefined;\n}) {\n  const [showAll, setShowAll] = useState(false);\n  const total = g.total ?? tasks.length;\n  const counts = bucketTasks(tasks);\n  const done = counts.ok + counts.warn + counts.fail;\n  const progress = total > 0 ? `${done}/${total}` : \"\";\n\n  const running = tasks.filter((t) => t.status === \"running\");\n  const pending = tasks.filter((t) => t.status === \"pending\");\n  const completed = tasks.filter((t) => t.status !== \"running\" && t.status !== \"pending\");\n  const alwaysShow = completed.filter(isFailedOrWarn);\n  const collapsible = completed.filter((t) => !isFailedOrWarn(t));\n\n  const hiddenCompleted = collapsible.length - MAX_COMPLETED;\n  const collapseCompleted = !showAll && hiddenCompleted > 0;\n  const visibleSuccess = collapseCompleted ? collapsible.slice(-MAX_COMPLETED) : collapsible;\n\n  const hiddenPending = pending.length - MAX_PENDING;\n  const collapsePending = !showAll && hiddenPending > 0;\n  const visiblePending = collapsePending ? pending.slice(0, MAX_PENDING) : pending;\n\n  const isTerminal = g.status !== \"running\" && g.status !== \"pending\";\n\n  return (\n    <div className={cn(\"rounded-lg border bg-card\", compact ? \"p-3\" : \"p-4\")}>\n      <div className=\"mb-3 flex items-center justify-between\">\n        <h3 className=\"flex items-center gap-1.5 text-sm font-semibold\">\n          <Icon\n            icon={taskStatusIcon(g.status)}\n            className={cn(taskStatusColor(g.status), g.status === \"running\" && \"animate-spin\")}\n          />\n          <span>{g.name}</span>\n          {progress && <span className=\"text-xs text-muted-foreground\">{progress}</span>}\n          {g.kind && (\n            <span className=\"rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground\">\n              {g.kind}\n            </span>\n          )}\n        </h3>\n        {isTerminal && (\n          <span\n            className={cn(\n              \"rounded-full px-2 py-0.5 text-xs\",\n              taskStatusColor(g.status),\n              taskStatusBg(g.status),\n            )}\n          >\n            {g.status}\n          </span>\n        )}\n      </div>\n\n      {total > 0 && (\n        <div className=\"mb-3\">\n          <ProgressBar segments={taskSegments(counts)} total={total} height=\"h-1.5\" />\n        </div>\n      )}\n\n      {hiddenCompleted > 0 || hiddenPending > 0 ? (\n        <button\n          type=\"button\"\n          className=\"border-b py-1.5 text-xs text-muted-foreground hover:text-foreground\"\n          onClick={() => setShowAll((v) => !v)}\n        >\n          {showAll\n            ? \"▲ collapse\"\n            : `... ${(collapseCompleted ? hiddenCompleted : 0) + (collapsePending ? hiddenPending : 0)} more tasks`}\n        </button>\n      ) : null}\n\n      {[...visibleSuccess, ...alwaysShow, ...running, ...visiblePending].map((t) => (\n        <TaskRow key={t.id} task={t} />\n      ))}\n    </div>\n  );\n}\n\nfunction TaskRow({ task: t }: { task: TaskSnapshot }) {\n  const [expanded, setExpanded] = useState(false);\n  const logs: LogEntry[] = t.logs ?? [];\n  const hasLogs = logs.length > 0;\n  // Promote the latest warning message inline so a `warning` row shows its\n  // reason without expanding. Suppressed when an error is already shown.\n  const latestWarn = t.error ? undefined : logs.filter((l) => l.level === \"warn\").at(-1);\n  // Bounded per-task progress (e.g. records emitted in a phase): render an x/y\n  // count, a percentage, and a thin bar while the task runs.\n  const done = t.progress ?? 0;\n  // Only surface bounded progress once work has actually started — an untouched\n  // task should not render a \"0/100 · 0%\" placeholder.\n  const hasProgress = typeof t.maxValue === \"number\" && t.maxValue > 0 && done > 0;\n  const pct = hasProgress ? Math.round((done / (t.maxValue as number)) * 100) : 0;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-start gap-3 border-b py-2 last:border-0\",\n        hasLogs && \"-mx-1 cursor-pointer rounded px-1 hover:bg-muted/50\",\n      )}\n      onClick={hasLogs ? () => setExpanded((v) => !v) : undefined}\n    >\n      <Icon\n        icon={taskStatusIcon(t.status)}\n        className={cn(taskStatusColor(t.status), \"mt-0.5 text-lg\", t.status === \"running\" && \"animate-spin\")}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"flex min-w-0 items-center gap-1.5 text-sm font-medium\">\n            <span className=\"truncate\">{t.name}</span>\n            {t.error && <span className=\"truncate text-xs font-normal text-red-500\">{t.error}</span>}\n            {latestWarn && (\n              <span className={cn(\"truncate text-xs font-normal\", logLevelColor(\"warn\"))}>\n                {latestWarn.message}\n              </span>\n            )}\n            {hasLogs && (\n              <span className=\"inline-flex shrink-0 items-center rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground\">\n                {logs.length}\n              </span>\n            )}\n          </span>\n          {t.duration && <span className=\"shrink-0 text-xs text-muted-foreground\">{t.duration}</span>}\n        </div>\n        {(t.description || hasProgress) && (\n          <div className=\"mt-0.5 flex items-center gap-2\">\n            {t.description && (\n              <span className=\"min-w-0 flex-1 truncate text-xs text-muted-foreground\">{t.description}</span>\n            )}\n            {hasProgress && (\n              <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\">\n                {done}/{t.maxValue} · {pct}%\n              </span>\n            )}\n          </div>\n        )}\n        {hasProgress && t.status === \"running\" && (\n          <div className=\"mt-1\">\n            <ProgressBar\n              segments={[{ count: done, color: \"bg-blue-500\", label: \"done\" }]}\n              total={t.maxValue as number}\n              height=\"h-1\"\n            />\n          </div>\n        )}\n        {expanded && hasLogs && (\n          <div className=\"mt-1 ml-1 max-h-48 space-y-0.5 overflow-y-auto border-l-2 pl-2\">\n            {logs.map((l, i) => (\n              <div key={i} className={cn(\"text-xs\", logLevelColor(l.level))}>\n                <span className=\"mr-1 font-mono text-muted-foreground\">{l.level.substring(0, 3)}</span>\n                {l.message}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["cn","jsxs","jsx","useState","bucketTasks","Icon","taskStatusIcon","taskStatusColor","taskStatusBg","ProgressBar","taskSegments","logLevelColor"],"mappings":"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"}
+{"version":3,"file":"TaskProgress.cjs","sources":["../../src/data/TaskProgress.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Button } from \"../components/button\";\nimport { UiPlay, UiRestart, UiStop } from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { AnsiHtml } from \"./AnsiHtml\";\nimport { Icon } from \"./Icon\";\nimport { ProgressBar } from \"./ProgressBar\";\nimport { TaskProcessDetailsView } from \"./TaskProcessDetails\";\nimport type { LogEntry, TaskControlAction, TaskSnapshot } from \"./TaskSnapshot\";\nimport { isTaskProcessDetails } from \"./task-process-details\";\nimport {\n  bucketTasks,\n  logLevelColor,\n  taskSegments,\n  taskStatusBg,\n  taskStatusColor,\n  taskStatusIcon,\n} from \"./task-status\";\n\n// TaskProgress renders one or more clicky task runs (groups) and their child\n// tasks: a segmented progress bar per group plus collapsible per-task rows with\n// status icon, duration, error, and expandable logs. Presentational only —\n// callers feed it snapshots from useTaskRun (SSE) or any other source.\n\nconst MAX_COMPLETED = 5;\nconst MAX_PENDING = 3;\n\nexport interface TaskProgressProps {\n  snapshots: TaskSnapshot[];\n  title?: string;\n  /** Tighter spacing for embedding in a panel. */\n  compact?: boolean;\n  className?: string;\n  onControl?: (action: TaskControlAction, group: TaskSnapshot) => void | Promise<void>;\n  metricsBaseUrl?: string;\n}\n\nexport function TaskProgress({ snapshots, title, compact, className, onControl, metricsBaseUrl }: TaskProgressProps) {\n  const groups = snapshots.filter((s) => s.type === \"group\");\n  const tasks = snapshots.filter((s) => s.type === \"task\");\n\n  if (groups.length === 0) {\n    return (\n      <div className={cn(\"text-sm text-muted-foreground\", className)}>\n        {title ? `${title}: ` : \"\"}No tasks yet.\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(compact ? \"space-y-2\" : \"space-y-3\", className)}>\n      {title && <h2 className=\"text-sm font-semibold\">{title}</h2>}\n      {groups.map((g) => (\n        <TaskGroupCard\n          key={g.groupId || g.id}\n          group={g}\n          tasks={tasks.filter((t) => t.groupId === g.groupId || t.group === g.id)}\n          compact={compact}\n          {...(onControl ? { onControl } : {})}\n          {...(metricsBaseUrl ? { metricsBaseUrl } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction isFailedOrWarn(t: TaskSnapshot): boolean {\n  return t.status === \"failed\" || t.status === \"FAIL\" || t.status === \"ERR\" || t.status === \"warning\";\n}\n\nfunction TaskGroupCard({\n  group: g,\n  tasks,\n  compact,\n  onControl,\n  metricsBaseUrl,\n}: {\n  group: TaskSnapshot;\n  tasks: TaskSnapshot[];\n  compact: boolean | undefined;\n  onControl?: (action: TaskControlAction, group: TaskSnapshot) => void | Promise<void>;\n  metricsBaseUrl?: string;\n}) {\n  const [showAll, setShowAll] = useState(false);\n  const total = g.total ?? tasks.length;\n  const counts = bucketTasks(tasks);\n  const done = counts.ok + counts.warn + counts.fail;\n  const progress = total > 0 ? `${done}/${total}` : \"\";\n\n  const running = tasks.filter((t) => t.status === \"running\");\n  const pending = tasks.filter((t) => t.status === \"pending\");\n  const completed = tasks.filter((t) => t.status !== \"running\" && t.status !== \"pending\");\n  const alwaysShow = completed.filter(isFailedOrWarn);\n  const collapsible = completed.filter((t) => !isFailedOrWarn(t));\n\n  const hiddenCompleted = collapsible.length - MAX_COMPLETED;\n  const collapseCompleted = !showAll && hiddenCompleted > 0;\n  const visibleSuccess = collapseCompleted ? collapsible.slice(-MAX_COMPLETED) : collapsible;\n\n  const hiddenPending = pending.length - MAX_PENDING;\n  const collapsePending = !showAll && hiddenPending > 0;\n  const visiblePending = collapsePending ? pending.slice(0, MAX_PENDING) : pending;\n\n  const isTerminal = g.status !== \"running\" && g.status !== \"pending\";\n\n  return (\n    <div className={cn(\"rounded-lg border bg-card\", compact ? \"p-3\" : \"p-4\")}>\n      <div className=\"mb-3 flex items-center justify-between gap-3\">\n        <h3 className=\"flex items-center gap-1.5 text-sm font-semibold\">\n          <Icon\n            icon={taskStatusIcon(g.status)}\n            className={cn(taskStatusColor(g.status), g.status === \"running\" && \"animate-spin\")}\n          />\n          <span>{g.name}</span>\n          {progress && <span className=\"text-xs text-muted-foreground\">{progress}</span>}\n          {g.kind && (\n            <span className=\"rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground\">\n              {g.kind}\n            </span>\n          )}\n        </h3>\n        <div className=\"flex shrink-0 items-center gap-1\">\n          {isTerminal && (\n            <span\n              className={cn(\n                \"rounded-full px-2 py-0.5 text-xs\",\n                taskStatusColor(g.status),\n                taskStatusBg(g.status),\n              )}\n            >\n              {g.status}\n            </span>\n          )}\n          {onControl && <TaskControls group={g} onControl={onControl} />}\n        </div>\n      </div>\n\n      {total > 0 && (\n        <div className=\"mb-3\">\n          <ProgressBar segments={taskSegments(counts)} total={total} height=\"h-1.5\" />\n        </div>\n      )}\n\n      {isTaskProcessDetails(g.details) && (\n        <TaskProcessDetailsView\n          details={g.details}\n          {...(metricsBaseUrl ? { metricsBaseUrl } : {})}\n        />\n      )}\n\n      {hiddenCompleted > 0 || hiddenPending > 0 ? (\n        <button\n          type=\"button\"\n          className=\"border-b py-1.5 text-xs text-muted-foreground hover:text-foreground\"\n          onClick={() => setShowAll((v) => !v)}\n        >\n          {showAll\n            ? \"▲ collapse\"\n            : `... ${(collapseCompleted ? hiddenCompleted : 0) + (collapsePending ? hiddenPending : 0)} more tasks`}\n        </button>\n      ) : null}\n\n      {[...visibleSuccess, ...alwaysShow, ...running, ...visiblePending].map((t) => (\n        <TaskRow key={t.id} task={t} />\n      ))}\n    </div>\n  );\n}\n\nfunction TaskRow({ task: t }: { task: TaskSnapshot }) {\n  const [expanded, setExpanded] = useState(false);\n  const logs: LogEntry[] = t.logs ?? [];\n  const hasLogs = logs.length > 0;\n  const hasOutput = !!t.stdout || !!t.stderr;\n  // Promote the latest warning message inline so a `warning` row shows its\n  // reason without expanding. Suppressed when an error is already shown.\n  const latestWarn = t.error ? undefined : logs.filter((l) => l.level === \"warn\").at(-1);\n  // Bounded per-task progress (e.g. records emitted in a phase): render an x/y\n  // count, a percentage, and a thin bar while the task runs.\n  const done = t.progress ?? 0;\n  // Only surface bounded progress once work has actually started — an untouched\n  // task should not render a \"0/100 · 0%\" placeholder.\n  const hasProgress = typeof t.maxValue === \"number\" && t.maxValue > 0 && done > 0;\n  const pct = hasProgress ? Math.round((done / (t.maxValue as number)) * 100) : 0;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-start gap-3 border-b py-2 last:border-0\",\n        (hasLogs || hasOutput) && \"-mx-1 cursor-pointer rounded px-1 hover:bg-muted/50\",\n      )}\n      onClick={hasLogs || hasOutput ? () => setExpanded((v) => !v) : undefined}\n    >\n      <Icon\n        icon={taskStatusIcon(t.status)}\n        className={cn(taskStatusColor(t.status), \"mt-0.5 text-lg\", t.status === \"running\" && \"animate-spin\")}\n      />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <span className=\"flex min-w-0 items-center gap-1.5 text-sm font-medium\">\n            <span className=\"truncate\">{t.name}</span>\n            {t.error && <span className=\"truncate text-xs font-normal text-red-500\">{t.error}</span>}\n            {latestWarn && (\n              <span className={cn(\"truncate text-xs font-normal\", logLevelColor(\"warn\"))}>\n                {latestWarn.message}\n              </span>\n            )}\n            {(hasLogs || hasOutput) && (\n              <span className=\"inline-flex shrink-0 items-center rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground\">\n                {logs.length + (t.stdout ? 1 : 0) + (t.stderr ? 1 : 0)}\n              </span>\n            )}\n          </span>\n          {t.duration && <span className=\"shrink-0 text-xs text-muted-foreground\">{t.duration}</span>}\n        </div>\n        {(t.description || hasProgress) && (\n          <div className=\"mt-0.5 flex items-center gap-2\">\n            {t.description && (\n              <span className=\"min-w-0 flex-1 truncate text-xs text-muted-foreground\">{t.description}</span>\n            )}\n            {hasProgress && (\n              <span className=\"shrink-0 text-xs tabular-nums text-muted-foreground\">\n                {done}/{t.maxValue} · {pct}%\n              </span>\n            )}\n          </div>\n        )}\n        {hasProgress && t.status === \"running\" && (\n          <div className=\"mt-1\">\n            <ProgressBar\n              segments={[{ count: done, color: \"bg-blue-500\", label: \"done\" }]}\n              total={t.maxValue as number}\n              height=\"h-1\"\n            />\n          </div>\n        )}\n        {expanded && hasLogs && (\n          <div className=\"mt-1 ml-1 max-h-48 space-y-0.5 overflow-y-auto border-l-2 pl-2\">\n            {logs.map((l, i) => (\n              <div key={i} className={cn(\"text-xs\", logLevelColor(l.level))}>\n                <span className=\"mr-1 font-mono text-muted-foreground\">{l.level.substring(0, 3)}</span>\n                {l.message}\n              </div>\n            ))}\n          </div>\n        )}\n        {expanded && hasOutput && (\n          <div className=\"mt-2 space-y-2\">\n            {t.stdout && <TaskStream label=\"stdout\" text={t.stdout} {...(t.stdoutTruncated ? { truncated: true } : {})} />}\n            {t.stderr && <TaskStream label=\"stderr\" text={t.stderr} {...(t.stderrTruncated ? { truncated: true } : {})} error />}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction TaskStream({\n  label,\n  text,\n  truncated,\n  error,\n}: {\n  label: string;\n  text: string;\n  truncated?: boolean;\n  error?: boolean;\n}) {\n  return (\n    <div className=\"overflow-hidden rounded border bg-black\">\n      <div className=\"flex items-center justify-between border-b border-white/10 px-2 py-1 text-[10px] text-gray-400\">\n        <span>{label}</span>\n        {truncated && <span>showing latest 1 MiB</span>}\n      </div>\n      <AnsiHtml\n        text={text}\n        className={cn(\"max-h-64 overflow-auto whitespace-pre-wrap p-2 text-xs text-gray-100\", error && \"text-red-300\")}\n      />\n    </div>\n  );\n}\n\nfunction TaskControls({\n  group,\n  onControl,\n}: {\n  group: TaskSnapshot;\n  onControl: (action: TaskControlAction, group: TaskSnapshot) => void | Promise<void>;\n}) {\n  const [busy, setBusy] = useState<TaskControlAction | null>(null);\n  const [error, setError] = useState(\"\");\n  const icons = { start: UiPlay, stop: UiStop, restart: UiRestart };\n  const invoke = async (action: TaskControlAction) => {\n    setBusy(action);\n    setError(\"\");\n    try {\n      await onControl(action, group);\n    } catch (cause) {\n      setError(cause instanceof Error ? cause.message : `Failed to ${action} task`);\n    } finally {\n      setBusy(null);\n    }\n  };\n  return (\n    <>\n      {(group.controls ?? []).map((action) => {\n        const ControlIcon = icons[action];\n        const label = action[0]?.toUpperCase() + action.slice(1);\n        return (\n          <Button\n            key={action}\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon\"\n            aria-label={label}\n            title={label}\n            disabled={busy !== null}\n            onClick={() => void invoke(action)}\n          >\n            <ControlIcon />\n          </Button>\n        );\n      })}\n      {error && <span role=\"alert\" className=\"text-xs text-red-600\">{error}</span>}\n    </>\n  );\n}\n"],"names":["cn","jsxs","jsx","useState","bucketTasks","Icon","taskStatusIcon","taskStatusColor","taskStatusBg","ProgressBar","taskSegments","isTaskProcessDetails","TaskProcessDetailsView","logLevelColor","AnsiHtml","UiPlay","UiStop","UiRestart","Fragment","Button"],"mappings":"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"}

package/dist/data/TaskProgress.d.ts

@@ -1,10 +1,12 @@
-import { TaskSnapshot } from './TaskSnapshot';
+import { TaskControlAction, TaskSnapshot } from './TaskSnapshot';
 export interface TaskProgressProps {
     snapshots: TaskSnapshot[];
     title?: string;
     /** Tighter spacing for embedding in a panel. */
     compact?: boolean;
     className?: string;
+    onControl?: (action: TaskControlAction, group: TaskSnapshot) => void | Promise<void>;
+    metricsBaseUrl?: string;
 }
-export declare function TaskProgress({ snapshots, title, compact, className }: TaskProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaskProgress({ snapshots, title, compact, className, onControl, metricsBaseUrl }: TaskProgressProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TaskProgress.d.ts.map

package/dist/data/TaskProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskProgress.d.ts","sourceRoot":"","sources":["../../src/data/TaskProgress.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAY,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAkB7D,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAyBvF"}
+{"version":3,"file":"TaskProgress.d.ts","sourceRoot":"","sources":["../../src/data/TaskProgress.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAY,iBAAiB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmBhF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrF,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,iBAAiB,2CA2BlH"}

package/dist/data/TaskProgress.js

@@ -1,12 +1,19 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
+import { Button } from "../components/button.js";
 import { cn } from "../lib/utils.js";
+import { AnsiHtml } from "./AnsiHtml.js";
 import { Icon } from "./Icon.js";
 import { ProgressBar } from "./ProgressBar.js";
+import { TaskProcessDetailsView } from "./TaskProcessDetails.js";
+import { isTaskProcessDetails } from "./task-process-details.js";
 import { bucketTasks, taskStatusColor, taskStatusIcon, taskStatusBg, taskSegments, logLevelColor } from "./task-status.js";
+import { UiRestart } from "../icons/components/UiRestart.js";
+import { UiStop } from "../icons/components/UiStop.js";
+import { UiPlay } from "../icons/components/UiPlay.js";
 const MAX_COMPLETED = 5;
 const MAX_PENDING = 3;
-function TaskProgress({ snapshots, title, compact, className }) {
+function TaskProgress({ snapshots, title, compact, className, onControl, metricsBaseUrl }) {
   const groups = snapshots.filter((s) => s.type === "group");
   const tasks = snapshots.filter((s) => s.type === "task");
   if (groups.length === 0) {
@@ -22,7 +29,9 @@ function TaskProgress({ snapshots, title, compact, className }) {
       {
         group: g,
         tasks: tasks.filter((t) => t.groupId === g.groupId || t.group === g.id),
-        compact
+        compact,
+        ...onControl ? { onControl } : {},
+        ...metricsBaseUrl ? { metricsBaseUrl } : {}
       },
       g.groupId || g.id
     ))
@@ -34,7 +43,9 @@ function isFailedOrWarn(t) {
 function TaskGroupCard({
   group: g,
   tasks,
-  compact
+  compact,
+  onControl,
+  metricsBaseUrl
 }) {
   const [showAll, setShowAll] = useState(false);
   const total = g.total ?? tasks.length;
@@ -54,7 +65,7 @@ function TaskGroupCard({
   const visiblePending = collapsePending ? pending.slice(0, MAX_PENDING) : pending;
   const isTerminal = g.status !== "running" && g.status !== "pending";
   return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border bg-card", compact ? "p-3" : "p-4"), children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ jsxs("h3", { className: "flex items-center gap-1.5 text-sm font-semibold", children: [
         /* @__PURE__ */ jsx(
           Icon,
@@ -67,19 +78,29 @@ function TaskGroupCard({
         progress && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: progress }),
         g.kind && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground", children: g.kind })
       ] }),
-      isTerminal && /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "rounded-full px-2 py-0.5 text-xs",
-            taskStatusColor(g.status),
-            taskStatusBg(g.status)
-          ),
-          children: g.status
-        }
-      )
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+        isTerminal && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "rounded-full px-2 py-0.5 text-xs",
+              taskStatusColor(g.status),
+              taskStatusBg(g.status)
+            ),
+            children: g.status
+          }
+        ),
+        onControl && /* @__PURE__ */ jsx(TaskControls, { group: g, onControl })
+      ] })
     ] }),
     total > 0 && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(ProgressBar, { segments: taskSegments(counts), total, height: "h-1.5" }) }),
+    isTaskProcessDetails(g.details) && /* @__PURE__ */ jsx(
+      TaskProcessDetailsView,
+      {
+        details: g.details,
+        ...metricsBaseUrl ? { metricsBaseUrl } : {}
+      }
+    ),
     hiddenCompleted > 0 || hiddenPending > 0 ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -96,6 +117,7 @@ function TaskRow({ task: t }) {
   const [expanded, setExpanded] = useState(false);
   const logs = t.logs ?? [];
   const hasLogs = logs.length > 0;
+  const hasOutput = !!t.stdout || !!t.stderr;
   const latestWarn = t.error ? void 0 : logs.filter((l) => l.level === "warn").at(-1);
   const done = t.progress ?? 0;
   const hasProgress = typeof t.maxValue === "number" && t.maxValue > 0 && done > 0;
@@ -105,9 +127,9 @@ function TaskRow({ task: t }) {
     {
       className: cn(
         "flex items-start gap-3 border-b py-2 last:border-0",
-        hasLogs && "-mx-1 cursor-pointer rounded px-1 hover:bg-muted/50"
+        (hasLogs || hasOutput) && "-mx-1 cursor-pointer rounded px-1 hover:bg-muted/50"
       ),
-      onClick: hasLogs ? () => setExpanded((v) => !v) : void 0,
+      onClick: hasLogs || hasOutput ? () => setExpanded((v) => !v) : void 0,
       children: [
         /* @__PURE__ */ jsx(
           Icon,
@@ -122,7 +144,7 @@ function TaskRow({ task: t }) {
               /* @__PURE__ */ jsx("span", { className: "truncate", children: t.name }),
               t.error && /* @__PURE__ */ jsx("span", { className: "truncate text-xs font-normal text-red-500", children: t.error }),
               latestWarn && /* @__PURE__ */ jsx("span", { className: cn("truncate text-xs font-normal", logLevelColor("warn")), children: latestWarn.message }),
-              hasLogs && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: logs.length })
+              (hasLogs || hasOutput) && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center rounded-full bg-muted px-1.5 text-[10px] font-medium text-muted-foreground", children: logs.length + (t.stdout ? 1 : 0) + (t.stderr ? 1 : 0) })
             ] }),
             t.duration && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: t.duration })
           ] }),
@@ -148,12 +170,77 @@ function TaskRow({ task: t }) {
           expanded && hasLogs && /* @__PURE__ */ jsx("div", { className: "mt-1 ml-1 max-h-48 space-y-0.5 overflow-y-auto border-l-2 pl-2", children: logs.map((l, i) => /* @__PURE__ */ jsxs("div", { className: cn("text-xs", logLevelColor(l.level)), children: [
             /* @__PURE__ */ jsx("span", { className: "mr-1 font-mono text-muted-foreground", children: l.level.substring(0, 3) }),
             l.message
-          ] }, i)) })
+          ] }, i)) }),
+          expanded && hasOutput && /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+            t.stdout && /* @__PURE__ */ jsx(TaskStream, { label: "stdout", text: t.stdout, ...t.stdoutTruncated ? { truncated: true } : {} }),
+            t.stderr && /* @__PURE__ */ jsx(TaskStream, { label: "stderr", text: t.stderr, ...t.stderrTruncated ? { truncated: true } : {}, error: true })
+          ] })
         ] })
       ]
     }
   );
 }
+function TaskStream({
+  label,
+  text,
+  truncated,
+  error
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded border bg-black", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-white/10 px-2 py-1 text-[10px] text-gray-400", children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      truncated && /* @__PURE__ */ jsx("span", { children: "showing latest 1 MiB" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      AnsiHtml,
+      {
+        text,
+        className: cn("max-h-64 overflow-auto whitespace-pre-wrap p-2 text-xs text-gray-100", error && "text-red-300")
+      }
+    )
+  ] });
+}
+function TaskControls({
+  group,
+  onControl
+}) {
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState("");
+  const icons = { start: UiPlay, stop: UiStop, restart: UiRestart };
+  const invoke = async (action) => {
+    setBusy(action);
+    setError("");
+    try {
+      await onControl(action, group);
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : `Failed to ${action} task`);
+    } finally {
+      setBusy(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    (group.controls ?? []).map((action) => {
+      var _a;
+      const ControlIcon = icons[action];
+      const label = ((_a = action[0]) == null ? void 0 : _a.toUpperCase()) + action.slice(1);
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          "aria-label": label,
+          title: label,
+          disabled: busy !== null,
+          onClick: () => void invoke(action),
+          children: /* @__PURE__ */ jsx(ControlIcon, {})
+        },
+        action
+      );
+    }),
+    error && /* @__PURE__ */ jsx("span", { role: "alert", className: "text-xs text-red-600", children: error })
+  ] });
+}
 export {
   TaskProgress
 };