@flanksource/clicky-ui 0.3.34 → 0.3.35

package/dist/data/TaskManagerButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TaskManagerButton.cjs","sources":["../../src/data/TaskManagerButton.tsx"],"sourcesContent":["import { Button } from \"../components/button\";\nimport { UiActivity, UiListChecks, UiMemoryStick } from \"../icons\";\nimport { useTaskRun, useTaskRuns } from \"../hooks/use-task-run\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { formatBytes } from \"../lib/format\";\nimport { TaskManager } from \"./TaskManager\";\nimport { isTaskProcessDetails } from \"./task-process-details\";\nimport type { TaskSnapshot } from \"./TaskSnapshot\";\nimport { taskStatusIcon } from \"./task-status\";\n\nexport interface TaskManagerButtonProps {\n  basePath?: string;\n  tasksHref?: string;\n  latest?: number;\n  onNavigate?: (href: string) => void;\n  panel?: boolean;\n  kind?: string;\n  labels?: Record<string, string>;\n  selectedId?: string;\n  onSelectRun?: (id: string | null) => void;\n}\n\nexport function TaskManagerButton({\n  basePath,\n  tasksHref = \"/tasks\",\n  latest = 5,\n  onNavigate,\n  panel,\n  kind,\n  labels,\n  selectedId,\n  onSelectRun,\n}: TaskManagerButtonProps) {\n  const { runs } = useTaskRuns({ basePath, kind, labels });\n  const activeRuns = runs.filter((run) => run.status === \"running\" || run.status === \"pending\");\n  const { snapshots } = useTaskRun({\n    ...(basePath ? { basePath } : {}),\n    ids: activeRuns.map((run) => run.id),\n    enabled: activeRuns.length > 0,\n  });\n  const resources = resourceSummary(snapshots);\n  const trigger = <TaskTrigger active={activeRuns.length} {...(resources ? { resources } : {})} />;\n\n  return panel ? (\n    <TaskPanelDropdown\n      {...(basePath ? { basePath } : {})}\n      {...(kind ? { kind } : {})}\n      {...(labels ? { labels } : {})}\n      {...(onSelectRun ? { onSelectRun } : {})}\n      {...(selectedId ? { selectedId } : {})}\n      trigger={trigger}\n    />\n  ) : (\n    <RecentTasksDropdown\n      latest={latest}\n      {...(onNavigate ? { onNavigate } : {})}\n      runs={runs}\n      tasksHref={tasksHref}\n      trigger={trigger}\n    />\n  );\n}\n\nfunction TaskPanelDropdown({ basePath, kind, labels, onSelectRun, selectedId, trigger }: TaskManagerButtonProps & { trigger: React.ReactNode }) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      header={<span className=\"text-xs font-semibold\">Activity</span>}\n      menuClassName=\"w-[min(42rem,calc(100vw-1rem))] max-w-none p-0\"\n      menuLabel=\"Task activity\"\n      trigger={trigger}\n    >\n      {() => (\n        <div className=\"max-h-[min(42rem,calc(100vh-5rem))] overflow-auto p-3\">\n          <TaskManager\n            {...(basePath ? { basePath } : {})}\n            {...(kind ? { kind } : {})}\n            {...(labels ? { labels } : {})}\n            {...(onSelectRun ? { onSelectRun } : {})}\n            {...(selectedId ? { selectedId } : {})}\n          />\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\ntype TaskRuns = ReturnType<typeof useTaskRuns>[\"runs\"];\n\nfunction RecentTasksDropdown({\n  latest,\n  onNavigate,\n  runs,\n  tasksHref,\n  trigger,\n}: {\n  latest: number;\n  onNavigate?: (href: string) => void;\n  runs: TaskRuns;\n  tasksHref: string;\n  trigger: React.ReactNode;\n}) {\n  const navigate = (href: string) => {\n    if (onNavigate) onNavigate(href);\n    else window.location.assign(href);\n  };\n  const items: DropdownMenuItem[] = runs.slice(0, latest).map((run) => ({\n    label: (\n      <span className=\"flex min-w-0 items-center justify-between gap-3\">\n        <span className=\"truncate\">{run.name}</span>\n        <span className=\"shrink-0 text-[10px] text-muted-foreground\">{run.status}</span>\n      </span>\n    ),\n    icon: taskStatusIcon(run.status),\n    onSelect: () => navigate(run.href ?? `${tasksHref}/${encodeURIComponent(run.id)}`),\n  }));\n  if (items.length === 0) {\n    items.push({ label: \"No tasks yet\", disabled: true, onSelect: () => {} });\n  }\n\n  return (\n    <DropdownMenu\n      items={items}\n      align=\"right\"\n      menuLabel=\"Recent tasks\"\n      trigger={trigger}\n      footer={(\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"w-full justify-start\" onClick={() => navigate(tasksHref)}>\n          View all tasks\n        </Button>\n      )}\n    />\n  );\n}\n\ntype ResourceSummary = { cpu: number; rss: number; peakRss: number };\n\nfunction TaskTrigger({ active, resources }: { active: number; resources?: ResourceSummary }) {\n  const label = `Tasks (${active} active)`;\n  return (\n    <Button type=\"button\" variant=\"ghost\" size={resources ? \"sm\" : \"icon\"} aria-label={label} title={label} className=\"relative gap-1.5\">\n      <UiListChecks className={active > 0 ? \"animate-pulse\" : undefined} />\n      {resources ? (\n        <>\n          <ResourceGauge icon={<UiActivity />} label=\"CPU\" percent={resources.cpu} value={`${resources.cpu.toFixed(1)}%`} />\n          <ResourceGauge icon={<UiMemoryStick />} label=\"Memory\" percent={resources.peakRss ? resources.rss / resources.peakRss * 100 : 0} value={formatBytes(resources.rss)} />\n        </>\n      ) : active > 0 ? (\n        <span className=\"absolute -right-0.5 -top-0.5 min-w-4 rounded-full bg-primary px-1 text-[9px] leading-4 text-primary-foreground\">{active}</span>\n      ) : null}\n    </Button>\n  );\n}\n\nfunction ResourceGauge({ icon, label, percent, value }: { icon: React.ReactNode; label: string; percent: number; value: string }) {\n  return (\n    <span aria-label={`${label} ${value}`} className=\"flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium\" title={`${label} ${value}`}>\n      {icon}\n      <span aria-hidden className=\"h-1 w-5 overflow-hidden rounded bg-border\">\n        <span className=\"block h-full rounded bg-primary\" style={{ width: `${Math.max(0, Math.min(100, percent))}%` }} />\n      </span>\n      <span>{value}</span>\n    </span>\n  );\n}\n\nfunction resourceSummary(snapshots: TaskSnapshot[]): ResourceSummary | undefined {\n  const activeSnapshots = snapshots.filter(\n    (snapshot) => snapshot.status === \"running\" || snapshot.status === \"pending\",\n  );\n  const tasks = activeSnapshots.filter(\n    (snapshot) => snapshot.type === \"task\" && isTaskProcessDetails(snapshot.details),\n  );\n  const processes = tasks.length\n    ? tasks\n    : activeSnapshots.filter((snapshot) => isTaskProcessDetails(snapshot.details));\n  if (!processes.length) return undefined;\n  return processes.reduce<ResourceSummary>((total, snapshot) => {\n    if (!isTaskProcessDetails(snapshot.details)) return total;\n    return {\n      cpu: total.cpu + snapshot.details.latest.cpuPercent,\n      rss: total.rss + snapshot.details.latest.rssBytes,\n      peakRss: total.peakRss + snapshot.details.peak.rssBytes,\n    };\n  }, { cpu: 0, rss: 0, peakRss: 0 });\n}\n"],"names":["useTaskRuns","useTaskRun","jsx","DropdownMenu","TaskManager","jsxs","taskStatusIcon","Button","UiListChecks","Fragment","UiActivity","UiMemoryStick","formatBytes","isTaskProcessDetails"],"mappings":"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"}
+{"version":3,"file":"TaskManagerButton.cjs","sources":["../../src/data/TaskManagerButton.tsx"],"sourcesContent":["import { resourceSummary, taskTransportConnected, type ResourceSummary } from \"./task-resource-summary\";\nimport { useResourceClock } from \"../hooks/use-resource-clock\";\nimport { Button } from \"../components/button\";\nimport { UiActivity, UiListChecks, UiMemoryStick } from \"../icons\";\nimport { useTaskRun, useTaskRuns } from \"../hooks/use-task-run\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { formatBytes } from \"../lib/format\";\nimport { TaskManager } from \"./TaskManager\";\nimport { taskStatusIcon } from \"./task-status\";\n\nexport interface TaskManagerButtonProps {\n  basePath?: string;\n  tasksHref?: string;\n  latest?: number;\n  onNavigate?: (href: string) => void;\n  panel?: boolean;\n  kind?: string;\n  labels?: Record<string, string>;\n  selectedId?: string;\n  onSelectRun?: (id: string | null) => void;\n}\n\nexport function TaskManagerButton({\n  basePath,\n  tasksHref = \"/tasks\",\n  latest = 5,\n  onNavigate,\n  panel,\n  kind,\n  labels,\n  selectedId,\n  onSelectRun,\n}: TaskManagerButtonProps) {\n  const { runs, status: runsStatus } = useTaskRuns({ basePath, kind, labels });\n  const activeRuns = runs.filter((run) => run.status === \"running\" || run.status === \"pending\");\n  const { snapshots, status: snapshotStatus } = useTaskRun({\n    ...(basePath ? { basePath } : {}),\n    ids: activeRuns.map((run) => run.id),\n    enabled: activeRuns.length > 0,\n  });\n  const now = useResourceClock(activeRuns.length > 0);\n  const resources = resourceSummary(snapshots, { now, connected: taskTransportConnected(runsStatus) && taskTransportConnected(snapshotStatus) });\n  const trigger = <TaskTrigger active={activeRuns.length} {...(activeRuns.length ? { resources } : {})} />;\n\n  return panel ? (\n    <TaskPanelDropdown\n      {...(basePath ? { basePath } : {})}\n      {...(kind ? { kind } : {})}\n      {...(labels ? { labels } : {})}\n      {...(onSelectRun ? { onSelectRun } : {})}\n      {...(selectedId ? { selectedId } : {})}\n      trigger={trigger}\n    />\n  ) : (\n    <RecentTasksDropdown\n      latest={latest}\n      {...(onNavigate ? { onNavigate } : {})}\n      runs={runs}\n      tasksHref={tasksHref}\n      trigger={trigger}\n    />\n  );\n}\n\nfunction TaskPanelDropdown({ basePath, kind, labels, onSelectRun, selectedId, trigger }: TaskManagerButtonProps & { trigger: React.ReactNode }) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      header={<span className=\"text-xs font-semibold\">Activity</span>}\n      menuClassName=\"w-[min(42rem,calc(100vw-1rem))] max-w-none p-0\"\n      menuLabel=\"Task activity\"\n      trigger={trigger}\n    >\n      {() => (\n        <div className=\"max-h-[min(42rem,calc(100vh-5rem))] overflow-auto p-3\">\n          <TaskManager\n            {...(basePath ? { basePath } : {})}\n            {...(kind ? { kind } : {})}\n            {...(labels ? { labels } : {})}\n            {...(onSelectRun ? { onSelectRun } : {})}\n            {...(selectedId ? { selectedId } : {})}\n          />\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\ntype TaskRuns = ReturnType<typeof useTaskRuns>[\"runs\"];\n\nfunction RecentTasksDropdown({\n  latest,\n  onNavigate,\n  runs,\n  tasksHref,\n  trigger,\n}: {\n  latest: number;\n  onNavigate?: (href: string) => void;\n  runs: TaskRuns;\n  tasksHref: string;\n  trigger: React.ReactNode;\n}) {\n  const navigate = (href: string) => {\n    if (onNavigate) onNavigate(href);\n    else window.location.assign(href);\n  };\n  const items: DropdownMenuItem[] = runs.slice(0, latest).map((run) => ({\n    label: (\n      <span className=\"flex min-w-0 items-center justify-between gap-3\">\n        <span className=\"truncate\">{run.name}</span>\n        <span className=\"shrink-0 text-[10px] text-muted-foreground\">{run.status}</span>\n      </span>\n    ),\n    icon: taskStatusIcon(run.status),\n    onSelect: () => navigate(run.href ?? `${tasksHref}/${encodeURIComponent(run.id)}`),\n  }));\n  if (items.length === 0) {\n    items.push({ label: \"No tasks yet\", disabled: true, onSelect: () => {} });\n  }\n\n  return (\n    <DropdownMenu\n      items={items}\n      align=\"right\"\n      menuLabel=\"Recent tasks\"\n      trigger={trigger}\n      footer={(\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"w-full justify-start\" onClick={() => navigate(tasksHref)}>\n          View all tasks\n        </Button>\n      )}\n    />\n  );\n}\n\nfunction TaskTrigger({ active, resources }: { active: number; resources?: ResourceSummary }) {\n  const label = `Tasks (${active} active)`;\n  return (\n    <Button type=\"button\" variant=\"ghost\" size={resources ? \"sm\" : \"icon\"} aria-label={label} title={label} className=\"relative gap-1.5\">\n      <UiListChecks className={active > 0 ? \"animate-pulse\" : undefined} />\n      {resources?.state === \"unavailable\" ? <span className=\"text-xs text-muted-foreground\">Resources unavailable</span> : resources ? (\n        <span className=\"flex items-center gap-1.5 text-xs\" title={`Sampled ${new Date(resources.sampledAt).toLocaleTimeString()}; CPU 100% equals one core`}>\n          <UiActivity /><span>{resources.cpu.toFixed(1)}%</span>\n          <UiMemoryStick /><span>{formatBytes(resources.rss)}</span>\n          {resources.state === \"stale\" && <span className=\"text-muted-foreground\">Stale</span>}\n        </span>\n      ) : null}\n    </Button>\n  );\n}\n"],"names":["useTaskRuns","useTaskRun","useResourceClock","resourceSummary","taskTransportConnected","jsx","DropdownMenu","TaskManager","jsxs","taskStatusIcon","Button","UiListChecks","UiActivity","UiMemoryStick","formatBytes"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManagerButton.d.ts","sourceRoot":"","sources":["../../src/data/TaskManagerButton.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAoB,EACpB,MAAU,EACV,UAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,EACN,UAAU,EACV,WAAW,GACZ,EAAE,sBAAsB,+BA6BxB"}
+{"version":3,"file":"TaskManagerButton.d.ts","sourceRoot":"","sources":["../../src/data/TaskManagerButton.tsx"],"names":[],"mappings":"AAUA,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAoB,EACpB,MAAU,EACV,UAAU,EACV,KAAK,EACL,IAAI,EACJ,MAAM,EACN,UAAU,EACV,WAAW,GACZ,EAAE,sBAAsB,+BA8BxB"}

package/dist/data/TaskManagerButton.js

@@ -1,10 +1,11 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { resourceSummary, taskTransportConnected } from "./task-resource-summary.js";
+import { useResourceClock } from "../hooks/use-resource-clock.js";
 import { Button } from "../components/button.js";
 import { useTaskRuns, useTaskRun } from "../hooks/use-task-run.js";
 import { DropdownMenu } from "../overlay/DropdownMenu.js";
 import { formatBytes } from "../lib/format.js";
 import { TaskManager } from "./TaskManager.js";
-import { isTaskProcessDetails } from "./task-process-details.js";
 import { taskStatusIcon } from "./task-status.js";
 import { UiListChecks } from "../icons/components/UiListChecks.js";
 import { UiActivity } from "../icons/components/UiActivity.js";
@@ -20,15 +21,16 @@ function TaskManagerButton({
   selectedId,
   onSelectRun
 }) {
-  const { runs } = useTaskRuns({ basePath, kind, labels });
+  const { runs, status: runsStatus } = useTaskRuns({ basePath, kind, labels });
   const activeRuns = runs.filter((run) => run.status === "running" || run.status === "pending");
-  const { snapshots } = useTaskRun({
+  const { snapshots, status: snapshotStatus } = useTaskRun({
     ...basePath ? { basePath } : {},
     ids: activeRuns.map((run) => run.id),
     enabled: activeRuns.length > 0
   });
-  const resources = resourceSummary(snapshots);
-  const trigger = /* @__PURE__ */ jsx(TaskTrigger, { active: activeRuns.length, ...resources ? { resources } : {} });
+  const now = useResourceClock(activeRuns.length > 0);
+  const resources = resourceSummary(snapshots, { now, connected: taskTransportConnected(runsStatus) && taskTransportConnected(snapshotStatus) });
+  const trigger = /* @__PURE__ */ jsx(TaskTrigger, { active: activeRuns.length, ...activeRuns.length ? { resources } : {} });
   return panel ? /* @__PURE__ */ jsx(
     TaskPanelDropdown,
     {
@@ -110,37 +112,18 @@ function TaskTrigger({ active, resources }) {
   const label = `Tasks (${active} active)`;
   return /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: resources ? "sm" : "icon", "aria-label": label, title: label, className: "relative gap-1.5", children: [
     /* @__PURE__ */ jsx(UiListChecks, { className: active > 0 ? "animate-pulse" : void 0 }),
-    resources ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ResourceGauge, { icon: /* @__PURE__ */ jsx(UiActivity, {}), label: "CPU", percent: resources.cpu, value: `${resources.cpu.toFixed(1)}%` }),
-      /* @__PURE__ */ jsx(ResourceGauge, { icon: /* @__PURE__ */ jsx(UiMemoryStick, {}), label: "Memory", percent: resources.peakRss ? resources.rss / resources.peakRss * 100 : 0, value: formatBytes(resources.rss) })
-    ] }) : active > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -right-0.5 -top-0.5 min-w-4 rounded-full bg-primary px-1 text-[9px] leading-4 text-primary-foreground", children: active }) : null
+    (resources == null ? void 0 : resources.state) === "unavailable" ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Resources unavailable" }) : resources ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs", title: `Sampled ${new Date(resources.sampledAt).toLocaleTimeString()}; CPU 100% equals one core`, children: [
+      /* @__PURE__ */ jsx(UiActivity, {}),
+      /* @__PURE__ */ jsxs("span", { children: [
+        resources.cpu.toFixed(1),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(UiMemoryStick, {}),
+      /* @__PURE__ */ jsx("span", { children: formatBytes(resources.rss) }),
+      resources.state === "stale" && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Stale" })
+    ] }) : null
   ] });
 }
-function ResourceGauge({ icon, label, percent, value }) {
-  return /* @__PURE__ */ jsxs("span", { "aria-label": `${label} ${value}`, className: "flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium", title: `${label} ${value}`, children: [
-    icon,
-    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-1 w-5 overflow-hidden rounded bg-border", children: /* @__PURE__ */ jsx("span", { className: "block h-full rounded bg-primary", style: { width: `${Math.max(0, Math.min(100, percent))}%` } }) }),
-    /* @__PURE__ */ jsx("span", { children: value })
-  ] });
-}
-function resourceSummary(snapshots) {
-  const activeSnapshots = snapshots.filter(
-    (snapshot) => snapshot.status === "running" || snapshot.status === "pending"
-  );
-  const tasks = activeSnapshots.filter(
-    (snapshot) => snapshot.type === "task" && isTaskProcessDetails(snapshot.details)
-  );
-  const processes = tasks.length ? tasks : activeSnapshots.filter((snapshot) => isTaskProcessDetails(snapshot.details));
-  if (!processes.length) return void 0;
-  return processes.reduce((total, snapshot) => {
-    if (!isTaskProcessDetails(snapshot.details)) return total;
-    return {
-      cpu: total.cpu + snapshot.details.latest.cpuPercent,
-      rss: total.rss + snapshot.details.latest.rssBytes,
-      peakRss: total.peakRss + snapshot.details.peak.rssBytes
-    };
-  }, { cpu: 0, rss: 0, peakRss: 0 });
-}
 export {
   TaskManagerButton
 };

package/dist/data/TaskManagerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskManagerButton.js","sources":["../../src/data/TaskManagerButton.tsx"],"sourcesContent":["import { Button } from \"../components/button\";\nimport { UiActivity, UiListChecks, UiMemoryStick } from \"../icons\";\nimport { useTaskRun, useTaskRuns } from \"../hooks/use-task-run\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { formatBytes } from \"../lib/format\";\nimport { TaskManager } from \"./TaskManager\";\nimport { isTaskProcessDetails } from \"./task-process-details\";\nimport type { TaskSnapshot } from \"./TaskSnapshot\";\nimport { taskStatusIcon } from \"./task-status\";\n\nexport interface TaskManagerButtonProps {\n  basePath?: string;\n  tasksHref?: string;\n  latest?: number;\n  onNavigate?: (href: string) => void;\n  panel?: boolean;\n  kind?: string;\n  labels?: Record<string, string>;\n  selectedId?: string;\n  onSelectRun?: (id: string | null) => void;\n}\n\nexport function TaskManagerButton({\n  basePath,\n  tasksHref = \"/tasks\",\n  latest = 5,\n  onNavigate,\n  panel,\n  kind,\n  labels,\n  selectedId,\n  onSelectRun,\n}: TaskManagerButtonProps) {\n  const { runs } = useTaskRuns({ basePath, kind, labels });\n  const activeRuns = runs.filter((run) => run.status === \"running\" || run.status === \"pending\");\n  const { snapshots } = useTaskRun({\n    ...(basePath ? { basePath } : {}),\n    ids: activeRuns.map((run) => run.id),\n    enabled: activeRuns.length > 0,\n  });\n  const resources = resourceSummary(snapshots);\n  const trigger = <TaskTrigger active={activeRuns.length} {...(resources ? { resources } : {})} />;\n\n  return panel ? (\n    <TaskPanelDropdown\n      {...(basePath ? { basePath } : {})}\n      {...(kind ? { kind } : {})}\n      {...(labels ? { labels } : {})}\n      {...(onSelectRun ? { onSelectRun } : {})}\n      {...(selectedId ? { selectedId } : {})}\n      trigger={trigger}\n    />\n  ) : (\n    <RecentTasksDropdown\n      latest={latest}\n      {...(onNavigate ? { onNavigate } : {})}\n      runs={runs}\n      tasksHref={tasksHref}\n      trigger={trigger}\n    />\n  );\n}\n\nfunction TaskPanelDropdown({ basePath, kind, labels, onSelectRun, selectedId, trigger }: TaskManagerButtonProps & { trigger: React.ReactNode }) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      header={<span className=\"text-xs font-semibold\">Activity</span>}\n      menuClassName=\"w-[min(42rem,calc(100vw-1rem))] max-w-none p-0\"\n      menuLabel=\"Task activity\"\n      trigger={trigger}\n    >\n      {() => (\n        <div className=\"max-h-[min(42rem,calc(100vh-5rem))] overflow-auto p-3\">\n          <TaskManager\n            {...(basePath ? { basePath } : {})}\n            {...(kind ? { kind } : {})}\n            {...(labels ? { labels } : {})}\n            {...(onSelectRun ? { onSelectRun } : {})}\n            {...(selectedId ? { selectedId } : {})}\n          />\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\ntype TaskRuns = ReturnType<typeof useTaskRuns>[\"runs\"];\n\nfunction RecentTasksDropdown({\n  latest,\n  onNavigate,\n  runs,\n  tasksHref,\n  trigger,\n}: {\n  latest: number;\n  onNavigate?: (href: string) => void;\n  runs: TaskRuns;\n  tasksHref: string;\n  trigger: React.ReactNode;\n}) {\n  const navigate = (href: string) => {\n    if (onNavigate) onNavigate(href);\n    else window.location.assign(href);\n  };\n  const items: DropdownMenuItem[] = runs.slice(0, latest).map((run) => ({\n    label: (\n      <span className=\"flex min-w-0 items-center justify-between gap-3\">\n        <span className=\"truncate\">{run.name}</span>\n        <span className=\"shrink-0 text-[10px] text-muted-foreground\">{run.status}</span>\n      </span>\n    ),\n    icon: taskStatusIcon(run.status),\n    onSelect: () => navigate(run.href ?? `${tasksHref}/${encodeURIComponent(run.id)}`),\n  }));\n  if (items.length === 0) {\n    items.push({ label: \"No tasks yet\", disabled: true, onSelect: () => {} });\n  }\n\n  return (\n    <DropdownMenu\n      items={items}\n      align=\"right\"\n      menuLabel=\"Recent tasks\"\n      trigger={trigger}\n      footer={(\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"w-full justify-start\" onClick={() => navigate(tasksHref)}>\n          View all tasks\n        </Button>\n      )}\n    />\n  );\n}\n\ntype ResourceSummary = { cpu: number; rss: number; peakRss: number };\n\nfunction TaskTrigger({ active, resources }: { active: number; resources?: ResourceSummary }) {\n  const label = `Tasks (${active} active)`;\n  return (\n    <Button type=\"button\" variant=\"ghost\" size={resources ? \"sm\" : \"icon\"} aria-label={label} title={label} className=\"relative gap-1.5\">\n      <UiListChecks className={active > 0 ? \"animate-pulse\" : undefined} />\n      {resources ? (\n        <>\n          <ResourceGauge icon={<UiActivity />} label=\"CPU\" percent={resources.cpu} value={`${resources.cpu.toFixed(1)}%`} />\n          <ResourceGauge icon={<UiMemoryStick />} label=\"Memory\" percent={resources.peakRss ? resources.rss / resources.peakRss * 100 : 0} value={formatBytes(resources.rss)} />\n        </>\n      ) : active > 0 ? (\n        <span className=\"absolute -right-0.5 -top-0.5 min-w-4 rounded-full bg-primary px-1 text-[9px] leading-4 text-primary-foreground\">{active}</span>\n      ) : null}\n    </Button>\n  );\n}\n\nfunction ResourceGauge({ icon, label, percent, value }: { icon: React.ReactNode; label: string; percent: number; value: string }) {\n  return (\n    <span aria-label={`${label} ${value}`} className=\"flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium\" title={`${label} ${value}`}>\n      {icon}\n      <span aria-hidden className=\"h-1 w-5 overflow-hidden rounded bg-border\">\n        <span className=\"block h-full rounded bg-primary\" style={{ width: `${Math.max(0, Math.min(100, percent))}%` }} />\n      </span>\n      <span>{value}</span>\n    </span>\n  );\n}\n\nfunction resourceSummary(snapshots: TaskSnapshot[]): ResourceSummary | undefined {\n  const activeSnapshots = snapshots.filter(\n    (snapshot) => snapshot.status === \"running\" || snapshot.status === \"pending\",\n  );\n  const tasks = activeSnapshots.filter(\n    (snapshot) => snapshot.type === \"task\" && isTaskProcessDetails(snapshot.details),\n  );\n  const processes = tasks.length\n    ? tasks\n    : activeSnapshots.filter((snapshot) => isTaskProcessDetails(snapshot.details));\n  if (!processes.length) return undefined;\n  return processes.reduce<ResourceSummary>((total, snapshot) => {\n    if (!isTaskProcessDetails(snapshot.details)) return total;\n    return {\n      cpu: total.cpu + snapshot.details.latest.cpuPercent,\n      rss: total.rss + snapshot.details.latest.rssBytes,\n      peakRss: total.peakRss + snapshot.details.peak.rssBytes,\n    };\n  }, { cpu: 0, rss: 0, peakRss: 0 });\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAsBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,EAAE,SAAS,YAAY,EAAE,UAAU,MAAM,QAAQ;AACvD,QAAM,aAAa,KAAK,OAAO,CAAC,QAAQ,IAAI,WAAW,aAAa,IAAI,WAAW,SAAS;AAC5F,QAAM,EAAE,UAAA,IAAc,WAAW;AAAA,IAC/B,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,IAC9B,KAAK,WAAW,IAAI,CAAC,QAAQ,IAAI,EAAE;AAAA,IACnC,SAAS,WAAW,SAAS;AAAA,EAAA,CAC9B;AACD,QAAM,YAAY,gBAAgB,SAAS;AAC3C,QAAM,UAAU,oBAAC,aAAA,EAAY,QAAQ,WAAW,QAAS,GAAI,YAAY,EAAE,UAAA,IAAc,CAAA,EAAC,CAAI;AAE9F,SAAO,QACL;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,MAC9B,GAAI,OAAO,EAAE,KAAA,IAAS,CAAA;AAAA,MACtB,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC1B,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,MACpC,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,kBAAkB,EAAE,UAAU,MAAM,QAAQ,aAAa,YAAY,WAAkE;AAC9I,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAQ,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,YAAQ;AAAA,MACxD,eAAc;AAAA,MACd,WAAU;AAAA,MACV;AAAA,MAEC,UAAA,MACC,oBAAC,OAAA,EAAI,WAAU,yDACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,UAC9B,GAAI,OAAO,EAAE,KAAA,IAAS,CAAA;AAAA,UACtB,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,UAC1B,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,UACpC,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,QAAC;AAAA,MAAA,EACtC,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAIA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,WAAW,CAAC,SAAiB;AACjC,QAAI,uBAAuB,IAAI;AAAA,QAC1B,QAAO,SAAS,OAAO,IAAI;AAAA,EAClC;AACA,QAAM,QAA4B,KAAK,MAAM,GAAG,MAAM,EAAE,IAAI,CAAC,SAAS;AAAA,IACpE,OACE,qBAAC,QAAA,EAAK,WAAU,mDACd,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,IAAI,MAAK;AAAA,MACrC,oBAAC,QAAA,EAAK,WAAU,8CAA8C,cAAI,OAAA,CAAO;AAAA,IAAA,GAC3E;AAAA,IAEF,MAAM,eAAe,IAAI,MAAM;AAAA,IAC/B,UAAU,MAAM,SAAS,IAAI,QAAQ,GAAG,SAAS,IAAI,mBAAmB,IAAI,EAAE,CAAC,EAAE;AAAA,EAAA,EACjF;AACF,MAAI,MAAM,WAAW,GAAG;AACtB,UAAM,KAAK,EAAE,OAAO,gBAAgB,UAAU,MAAM,UAAU,MAAM;AAAA,IAAC,GAAG;AAAA,EAC1E;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MACN,WAAU;AAAA,MACV;AAAA,MACA,QACE,oBAAC,QAAA,EAAO,MAAK,UAAS,SAAQ,SAAQ,MAAK,MAAK,WAAU,wBAAuB,SAAS,MAAM,SAAS,SAAS,GAAG,UAAA,iBAAA,CAErH;AAAA,IAAA;AAAA,EAAA;AAIR;AAIA,SAAS,YAAY,EAAE,QAAQ,aAA8D;AAC3F,QAAM,QAAQ,UAAU,MAAM;AAC9B,SACE,qBAAC,QAAA,EAAO,MAAK,UAAS,SAAQ,SAAQ,MAAM,YAAY,OAAO,QAAQ,cAAY,OAAO,OAAO,OAAO,WAAU,oBAChH,UAAA;AAAA,IAAA,oBAAC,cAAA,EAAa,WAAW,SAAS,IAAI,kBAAkB,QAAW;AAAA,IAClE,YACC,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA,oBAAC,iBAAc,MAAM,oBAAC,YAAA,EAAW,GAAI,OAAM,OAAM,SAAS,UAAU,KAAK,OAAO,GAAG,UAAU,IAAI,QAAQ,CAAC,CAAC,KAAK;AAAA,MAChH,oBAAC,iBAAc,MAAM,oBAAC,iBAAc,GAAI,OAAM,UAAS,SAAS,UAAU,UAAU,UAAU,MAAM,UAAU,UAAU,MAAM,GAAG,OAAO,YAAY,UAAU,GAAG,EAAA,CAAG;AAAA,IAAA,EAAA,CACtK,IACE,SAAS,IACX,oBAAC,UAAK,WAAU,kHAAkH,kBAAO,IACvI;AAAA,EAAA,GACN;AAEJ;AAEA,SAAS,cAAc,EAAE,MAAM,OAAO,SAAS,SAAmF;AAChI,SACE,qBAAC,QAAA,EAAK,cAAY,GAAG,KAAK,IAAI,KAAK,IAAI,WAAU,kFAAiF,OAAO,GAAG,KAAK,IAAI,KAAK,IACvJ,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAU,6CAC1B,UAAA,oBAAC,QAAA,EAAK,WAAU,mCAAkC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,OAAO,CAAC,CAAC,IAAA,EAAI,CAAG,EAAA,CACjH;AAAA,IACA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,EAAA,GACf;AAEJ;AAEA,SAAS,gBAAgB,WAAwD;AAC/E,QAAM,kBAAkB,UAAU;AAAA,IAChC,CAAC,aAAa,SAAS,WAAW,aAAa,SAAS,WAAW;AAAA,EAAA;AAErE,QAAM,QAAQ,gBAAgB;AAAA,IAC5B,CAAC,aAAa,SAAS,SAAS,UAAU,qBAAqB,SAAS,OAAO;AAAA,EAAA;AAEjF,QAAM,YAAY,MAAM,SACpB,QACA,gBAAgB,OAAO,CAAC,aAAa,qBAAqB,SAAS,OAAO,CAAC;AAC/E,MAAI,CAAC,UAAU,OAAQ,QAAO;AAC9B,SAAO,UAAU,OAAwB,CAAC,OAAO,aAAa;AAC5D,QAAI,CAAC,qBAAqB,SAAS,OAAO,EAAG,QAAO;AACpD,WAAO;AAAA,MACL,KAAK,MAAM,MAAM,SAAS,QAAQ,OAAO;AAAA,MACzC,KAAK,MAAM,MAAM,SAAS,QAAQ,OAAO;AAAA,MACzC,SAAS,MAAM,UAAU,SAAS,QAAQ,KAAK;AAAA,IAAA;AAAA,EAEnD,GAAG,EAAE,KAAK,GAAG,KAAK,GAAG,SAAS,GAAG;AACnC;"}
+{"version":3,"file":"TaskManagerButton.js","sources":["../../src/data/TaskManagerButton.tsx"],"sourcesContent":["import { resourceSummary, taskTransportConnected, type ResourceSummary } from \"./task-resource-summary\";\nimport { useResourceClock } from \"../hooks/use-resource-clock\";\nimport { Button } from \"../components/button\";\nimport { UiActivity, UiListChecks, UiMemoryStick } from \"../icons\";\nimport { useTaskRun, useTaskRuns } from \"../hooks/use-task-run\";\nimport { DropdownMenu, type DropdownMenuItem } from \"../overlay/DropdownMenu\";\nimport { formatBytes } from \"../lib/format\";\nimport { TaskManager } from \"./TaskManager\";\nimport { taskStatusIcon } from \"./task-status\";\n\nexport interface TaskManagerButtonProps {\n  basePath?: string;\n  tasksHref?: string;\n  latest?: number;\n  onNavigate?: (href: string) => void;\n  panel?: boolean;\n  kind?: string;\n  labels?: Record<string, string>;\n  selectedId?: string;\n  onSelectRun?: (id: string | null) => void;\n}\n\nexport function TaskManagerButton({\n  basePath,\n  tasksHref = \"/tasks\",\n  latest = 5,\n  onNavigate,\n  panel,\n  kind,\n  labels,\n  selectedId,\n  onSelectRun,\n}: TaskManagerButtonProps) {\n  const { runs, status: runsStatus } = useTaskRuns({ basePath, kind, labels });\n  const activeRuns = runs.filter((run) => run.status === \"running\" || run.status === \"pending\");\n  const { snapshots, status: snapshotStatus } = useTaskRun({\n    ...(basePath ? { basePath } : {}),\n    ids: activeRuns.map((run) => run.id),\n    enabled: activeRuns.length > 0,\n  });\n  const now = useResourceClock(activeRuns.length > 0);\n  const resources = resourceSummary(snapshots, { now, connected: taskTransportConnected(runsStatus) && taskTransportConnected(snapshotStatus) });\n  const trigger = <TaskTrigger active={activeRuns.length} {...(activeRuns.length ? { resources } : {})} />;\n\n  return panel ? (\n    <TaskPanelDropdown\n      {...(basePath ? { basePath } : {})}\n      {...(kind ? { kind } : {})}\n      {...(labels ? { labels } : {})}\n      {...(onSelectRun ? { onSelectRun } : {})}\n      {...(selectedId ? { selectedId } : {})}\n      trigger={trigger}\n    />\n  ) : (\n    <RecentTasksDropdown\n      latest={latest}\n      {...(onNavigate ? { onNavigate } : {})}\n      runs={runs}\n      tasksHref={tasksHref}\n      trigger={trigger}\n    />\n  );\n}\n\nfunction TaskPanelDropdown({ basePath, kind, labels, onSelectRun, selectedId, trigger }: TaskManagerButtonProps & { trigger: React.ReactNode }) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      header={<span className=\"text-xs font-semibold\">Activity</span>}\n      menuClassName=\"w-[min(42rem,calc(100vw-1rem))] max-w-none p-0\"\n      menuLabel=\"Task activity\"\n      trigger={trigger}\n    >\n      {() => (\n        <div className=\"max-h-[min(42rem,calc(100vh-5rem))] overflow-auto p-3\">\n          <TaskManager\n            {...(basePath ? { basePath } : {})}\n            {...(kind ? { kind } : {})}\n            {...(labels ? { labels } : {})}\n            {...(onSelectRun ? { onSelectRun } : {})}\n            {...(selectedId ? { selectedId } : {})}\n          />\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\ntype TaskRuns = ReturnType<typeof useTaskRuns>[\"runs\"];\n\nfunction RecentTasksDropdown({\n  latest,\n  onNavigate,\n  runs,\n  tasksHref,\n  trigger,\n}: {\n  latest: number;\n  onNavigate?: (href: string) => void;\n  runs: TaskRuns;\n  tasksHref: string;\n  trigger: React.ReactNode;\n}) {\n  const navigate = (href: string) => {\n    if (onNavigate) onNavigate(href);\n    else window.location.assign(href);\n  };\n  const items: DropdownMenuItem[] = runs.slice(0, latest).map((run) => ({\n    label: (\n      <span className=\"flex min-w-0 items-center justify-between gap-3\">\n        <span className=\"truncate\">{run.name}</span>\n        <span className=\"shrink-0 text-[10px] text-muted-foreground\">{run.status}</span>\n      </span>\n    ),\n    icon: taskStatusIcon(run.status),\n    onSelect: () => navigate(run.href ?? `${tasksHref}/${encodeURIComponent(run.id)}`),\n  }));\n  if (items.length === 0) {\n    items.push({ label: \"No tasks yet\", disabled: true, onSelect: () => {} });\n  }\n\n  return (\n    <DropdownMenu\n      items={items}\n      align=\"right\"\n      menuLabel=\"Recent tasks\"\n      trigger={trigger}\n      footer={(\n        <Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"w-full justify-start\" onClick={() => navigate(tasksHref)}>\n          View all tasks\n        </Button>\n      )}\n    />\n  );\n}\n\nfunction TaskTrigger({ active, resources }: { active: number; resources?: ResourceSummary }) {\n  const label = `Tasks (${active} active)`;\n  return (\n    <Button type=\"button\" variant=\"ghost\" size={resources ? \"sm\" : \"icon\"} aria-label={label} title={label} className=\"relative gap-1.5\">\n      <UiListChecks className={active > 0 ? \"animate-pulse\" : undefined} />\n      {resources?.state === \"unavailable\" ? <span className=\"text-xs text-muted-foreground\">Resources unavailable</span> : resources ? (\n        <span className=\"flex items-center gap-1.5 text-xs\" title={`Sampled ${new Date(resources.sampledAt).toLocaleTimeString()}; CPU 100% equals one core`}>\n          <UiActivity /><span>{resources.cpu.toFixed(1)}%</span>\n          <UiMemoryStick /><span>{formatBytes(resources.rss)}</span>\n          {resources.state === \"stale\" && <span className=\"text-muted-foreground\">Stale</span>}\n        </span>\n      ) : null}\n    </Button>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAsBO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2B;AACzB,QAAM,EAAE,MAAM,QAAQ,WAAA,IAAe,YAAY,EAAE,UAAU,MAAM,QAAQ;AAC3E,QAAM,aAAa,KAAK,OAAO,CAAC,QAAQ,IAAI,WAAW,aAAa,IAAI,WAAW,SAAS;AAC5F,QAAM,EAAE,WAAW,QAAQ,eAAA,IAAmB,WAAW;AAAA,IACvD,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,IAC9B,KAAK,WAAW,IAAI,CAAC,QAAQ,IAAI,EAAE;AAAA,IACnC,SAAS,WAAW,SAAS;AAAA,EAAA,CAC9B;AACD,QAAM,MAAM,iBAAiB,WAAW,SAAS,CAAC;AAClD,QAAM,YAAY,gBAAgB,WAAW,EAAE,KAAK,WAAW,uBAAuB,UAAU,KAAK,uBAAuB,cAAc,EAAA,CAAG;AAC7I,QAAM,UAAU,oBAAC,aAAA,EAAY,QAAQ,WAAW,QAAS,GAAI,WAAW,SAAS,EAAE,UAAA,IAAc,CAAA,EAAC,CAAI;AAEtG,SAAO,QACL;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,MAC9B,GAAI,OAAO,EAAE,KAAA,IAAS,CAAA;AAAA,MACtB,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC1B,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,MACpC,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,MACnC;AAAA,IAAA;AAAA,EAAA,IAGF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACC,GAAI,aAAa,EAAE,WAAA,IAAe,CAAA;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,kBAAkB,EAAE,UAAU,MAAM,QAAQ,aAAa,YAAY,WAAkE;AAC9I,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAQ,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,YAAQ;AAAA,MACxD,eAAc;AAAA,MACd,WAAU;AAAA,MACV;AAAA,MAEC,UAAA,MACC,oBAAC,OAAA,EAAI,WAAU,yDACb,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAI,WAAW,EAAE,SAAA,IAAa,CAAA;AAAA,UAC9B,GAAI,OAAO,EAAE,KAAA,IAAS,CAAA;AAAA,UACtB,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,UAC1B,GAAI,cAAc,EAAE,YAAA,IAAgB,CAAA;AAAA,UACpC,GAAI,aAAa,EAAE,eAAe,CAAA;AAAA,QAAC;AAAA,MAAA,EACtC,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAIA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,WAAW,CAAC,SAAiB;AACjC,QAAI,uBAAuB,IAAI;AAAA,QAC1B,QAAO,SAAS,OAAO,IAAI;AAAA,EAClC;AACA,QAAM,QAA4B,KAAK,MAAM,GAAG,MAAM,EAAE,IAAI,CAAC,SAAS;AAAA,IACpE,OACE,qBAAC,QAAA,EAAK,WAAU,mDACd,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,IAAI,MAAK;AAAA,MACrC,oBAAC,QAAA,EAAK,WAAU,8CAA8C,cAAI,OAAA,CAAO;AAAA,IAAA,GAC3E;AAAA,IAEF,MAAM,eAAe,IAAI,MAAM;AAAA,IAC/B,UAAU,MAAM,SAAS,IAAI,QAAQ,GAAG,SAAS,IAAI,mBAAmB,IAAI,EAAE,CAAC,EAAE;AAAA,EAAA,EACjF;AACF,MAAI,MAAM,WAAW,GAAG;AACtB,UAAM,KAAK,EAAE,OAAO,gBAAgB,UAAU,MAAM,UAAU,MAAM;AAAA,IAAC,GAAG;AAAA,EAC1E;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,OAAM;AAAA,MACN,WAAU;AAAA,MACV;AAAA,MACA,QACE,oBAAC,QAAA,EAAO,MAAK,UAAS,SAAQ,SAAQ,MAAK,MAAK,WAAU,wBAAuB,SAAS,MAAM,SAAS,SAAS,GAAG,UAAA,iBAAA,CAErH;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,SAAS,YAAY,EAAE,QAAQ,aAA8D;AAC3F,QAAM,QAAQ,UAAU,MAAM;AAC9B,SACE,qBAAC,QAAA,EAAO,MAAK,UAAS,SAAQ,SAAQ,MAAM,YAAY,OAAO,QAAQ,cAAY,OAAO,OAAO,OAAO,WAAU,oBAChH,UAAA;AAAA,IAAA,oBAAC,cAAA,EAAa,WAAW,SAAS,IAAI,kBAAkB,QAAW;AAAA,KAClE,uCAAW,WAAU,gBAAgB,oBAAC,UAAK,WAAU,iCAAgC,UAAA,wBAAA,CAAqB,IAAU,YACnH,qBAAC,UAAK,WAAU,qCAAoC,OAAO,WAAW,IAAI,KAAK,UAAU,SAAS,EAAE,mBAAA,CAAoB,8BACtH,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW;AAAA,2BAAG,QAAA,EAAM,UAAA;AAAA,QAAA,UAAU,IAAI,QAAQ,CAAC;AAAA,QAAE;AAAA,MAAA,GAAC;AAAA,0BAC9C,eAAA,EAAc;AAAA,MAAE,oBAAC,QAAA,EAAM,UAAA,YAAY,UAAU,GAAG,GAAE;AAAA,MAClD,UAAU,UAAU,+BAAY,QAAA,EAAK,WAAU,yBAAwB,UAAA,QAAA,CAAK;AAAA,IAAA,EAAA,CAC/E,IACE;AAAA,EAAA,GACN;AAEJ;"}

package/dist/data/TaskProcessDetails.cjs

@@ -3,15 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const TimeseriesGauge = require("./TimeseriesGauge.cjs");
 const DiagnosticsTree = require("./diagnostics/DiagnosticsTree.cjs");
+const TaskResourceReadings = require("./TaskResourceReadings.cjs");
 const taskProcessDetails = require("./task-process-details.cjs");
 const TaskExecDetails = require("./TaskExecDetails.cjs");
-const format = require("../lib/format.cjs");
 const UiActivity = require("../icons/components/UiActivity.cjs");
 const UiDatabase = require("../icons/components/UiDatabase.cjs");
 const UiFile = require("../icons/components/UiFile.cjs");
 function TaskProcessDetailsView({
   details,
-  metricsBaseUrl
+  metricsBaseUrl,
+  connectionStatus
 }) {
   const forest = taskProcessDetails.buildTaskProcessForest(details.tree ?? []);
   const metricBase = metricsBaseUrl ?? "/api/v1/tasks/metrics/";
@@ -24,31 +25,9 @@ function TaskProcessDetailsView({
         details.pid ?? "—"
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: details.status }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        details.latest.cpuPercent.toFixed(1),
-        "% CPU"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        format.formatBytes(details.latest.rssBytes),
-        " RSS"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        format.formatBytes(details.latest.vmsBytes),
-        " VMS"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: details.latest.openFiles >= 0 ? `${details.latest.openFiles} files` : "files unavailable" }),
+      /* @__PURE__ */ jsxRuntime.jsx(TaskResourceReadings.TaskResourceReadings, { details, ...connectionStatus ? { connectionStatus } : {} }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: restartLabel }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: details.restartPolicy }),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        "Peak ",
-        details.peak.cpuPercent.toFixed(1),
-        "% CPU · ",
-        format.formatBytes(details.peak.rssBytes),
-        " RSS · ",
-        format.formatBytes(details.peak.vmsBytes),
-        " VMS · ",
-        details.peak.openFiles >= 0 ? `${details.peak.openFiles} files` : "files unavailable"
-      ] })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: details.restartPolicy })
     ] }),
     Object.keys(details.metrics).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-4", children: [
       details.metrics.cpu && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/data/TaskProcessDetails.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TaskProcessDetails.cjs","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 { TaskCommandLine } from \"./TaskExecDetails\";\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      <TaskCommandLine command={details.command} {...(details.args ? { args: details.args } : {})} />\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":["buildTaskProcessForest","jsxs","jsx","TaskCommandLine","formatBytes","TimeseriesGauge","UiActivity","UiDatabase","UiFile","DiagnosticsTree"],"mappings":"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"}
+{"version":3,"file":"TaskProcessDetails.cjs","sources":["../../src/data/TaskProcessDetails.tsx"],"sourcesContent":["import { UiActivity, UiDatabase, UiFile } from \"../icons\";\nimport { TimeseriesGauge } from \"./TimeseriesGauge\";\nimport { DiagnosticsTree } from \"./diagnostics/DiagnosticsTree\";\nimport { TaskResourceReadings } from \"./TaskResourceReadings\";\nimport { buildTaskProcessForest } from \"./task-process-details\";\nimport { TaskCommandLine } from \"./TaskExecDetails\";\nimport type { TaskProcessDetails } from \"./TaskSnapshot\";\n\nexport function TaskProcessDetailsView({\n  details,\n  metricsBaseUrl,\n  connectionStatus,\n}: {\n  details: TaskProcessDetails;\n  metricsBaseUrl?: string;\n  connectionStatus?: 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      <TaskCommandLine command={details.command} {...(details.args ? { args: details.args } : {})} />\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        <TaskResourceReadings details={details} {...(connectionStatus ? { connectionStatus } : {})} />\n        <span>{restartLabel}</span>\n        <span>{details.restartPolicy}</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":["buildTaskProcessForest","jsxs","jsx","TaskCommandLine","TaskResourceReadings","TimeseriesGauge","UiActivity","UiDatabase","UiFile","DiagnosticsTree"],"mappings":"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"}

package/dist/data/TaskProcessDetails.d.ts

@@ -1,6 +1,7 @@
 import { TaskProcessDetails } from './TaskSnapshot';
-export declare function TaskProcessDetailsView({ details, metricsBaseUrl, }: {
+export declare function TaskProcessDetailsView({ details, metricsBaseUrl, connectionStatus, }: {
     details: TaskProcessDetails;
     metricsBaseUrl?: string;
+    connectionStatus?: string;
 }): import("react").JSX.Element;
 //# sourceMappingURL=TaskProcessDetails.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TaskProcessDetails.d.ts","sourceRoot":"","sources":["../../src/data/TaskProcessDetails.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,cAAc,GACf,EAAE;IACD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,+BAyFA"}
+{"version":3,"file":"TaskProcessDetails.d.ts","sourceRoot":"","sources":["../../src/data/TaskProcessDetails.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,cAAc,EACd,gBAAgB,GACjB,EAAE;IACD,OAAO,EAAE,kBAAkB,CAAC;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,+BAmFA"}

package/dist/data/TaskProcessDetails.js

@@ -1,15 +1,16 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { TimeseriesGauge } from "./TimeseriesGauge.js";
 import { DiagnosticsTree } from "./diagnostics/DiagnosticsTree.js";
+import { TaskResourceReadings } from "./TaskResourceReadings.js";
 import { buildTaskProcessForest } from "./task-process-details.js";
 import { TaskCommandLine } from "./TaskExecDetails.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
+  metricsBaseUrl,
+  connectionStatus
 }) {
   const forest = buildTaskProcessForest(details.tree ?? []);
   const metricBase = metricsBaseUrl ?? "/api/v1/tasks/metrics/";
@@ -22,31 +23,9 @@ function TaskProcessDetailsView({
         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(TaskResourceReadings, { details, ...connectionStatus ? { connectionStatus } : {} }),
       /* @__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"
-      ] })
+      /* @__PURE__ */ jsx("span", { children: details.restartPolicy })
     ] }),
     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(

package/dist/data/TaskProcessDetails.js.map

@@ -1 +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 { TaskCommandLine } from \"./TaskExecDetails\";\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      <TaskCommandLine command={details.command} {...(details.args ? { args: details.args } : {})} />\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":";;;;;;;;;AAQO,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,oBAAC,iBAAA,EAAgB,SAAS,QAAQ,SAAU,GAAI,QAAQ,OAAO,EAAE,MAAM,QAAQ,KAAA,IAAS,CAAA,EAAC,CAAI;AAAA,IAC7F,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;"}
+{"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 { TaskResourceReadings } from \"./TaskResourceReadings\";\nimport { buildTaskProcessForest } from \"./task-process-details\";\nimport { TaskCommandLine } from \"./TaskExecDetails\";\nimport type { TaskProcessDetails } from \"./TaskSnapshot\";\n\nexport function TaskProcessDetailsView({\n  details,\n  metricsBaseUrl,\n  connectionStatus,\n}: {\n  details: TaskProcessDetails;\n  metricsBaseUrl?: string;\n  connectionStatus?: 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      <TaskCommandLine command={details.command} {...(details.args ? { args: details.args } : {})} />\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        <TaskResourceReadings details={details} {...(connectionStatus ? { connectionStatus } : {})} />\n        <span>{restartLabel}</span>\n        <span>{details.restartPolicy}</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":";;;;;;;;;AAQO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACF,GAIG;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,oBAAC,iBAAA,EAAgB,SAAS,QAAQ,SAAU,GAAI,QAAQ,OAAO,EAAE,MAAM,QAAQ,KAAA,IAAS,CAAA,EAAC,CAAI;AAAA,IAC7F,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,MACtB,oBAAC,wBAAqB,SAAmB,GAAI,mBAAmB,EAAE,iBAAA,IAAqB,CAAA,GAAK;AAAA,MAC5F,oBAAC,UAAM,UAAA,aAAA,CAAa;AAAA,MACpB,oBAAC,QAAA,EAAM,UAAA,QAAQ,cAAA,CAAc;AAAA,IAAA,GAC/B;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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const taskWorkProgress = require("./task-work-progress.cjs");
 const react = require("react");
 const button = require("../components/button.cjs");
 const CopyButton = require("../components/CopyButton.cjs");
@@ -20,8 +21,8 @@ const UiJson = require("../icons/components/UiJson.cjs");
 const UiWarningTriangle = require("../icons/components/UiWarningTriangle.cjs");
 const UiCheck = require("../icons/components/UiCheck.cjs");
 const UiCopy = require("../icons/components/UiCopy.cjs");
-const UiRestart = require("../icons/components/UiRestart.cjs");
 const UiStop = require("../icons/components/UiStop.cjs");
+const UiRestart = require("../icons/components/UiRestart.cjs");
 const UiPlay = require("../icons/components/UiPlay.cjs");
 const MAX_COMPLETED = 5;
 const MAX_PENDING = 3;
@@ -32,7 +33,8 @@ function TaskProgress({
   className,
   onControl,
   onTaskControl,
-  metricsBaseUrl
+  metricsBaseUrl,
+  connectionStatus
 }) {
   const groups = snapshots.filter((s) => s.type === "group");
   const tasks = snapshots.filter((s) => s.type === "task");
@@ -48,11 +50,12 @@ function TaskProgress({
       TaskGroupCard,
       {
         group: g,
-        tasks: tasks.filter((t) => t.groupId === g.groupId || t.group === g.id),
+        tasks: tasks.filter((t) => g.groupId ? t.groupId === g.groupId : t.group === g.id),
         compact,
         ...onControl ? { onControl } : {},
         ...onTaskControl ? { onTaskControl } : {},
-        ...metricsBaseUrl ? { metricsBaseUrl } : {}
+        ...metricsBaseUrl ? { metricsBaseUrl } : {},
+        ...connectionStatus ? { connectionStatus } : {}
       },
       g.groupId || g.id
     ))
@@ -64,14 +67,16 @@ function TaskGroupCard({
   compact,
   onControl,
   onTaskControl,
-  metricsBaseUrl
+  metricsBaseUrl,
+  connectionStatus
 }) {
   const [showAll, setShowAll] = react.useState(false);
   const { state: copyState, copy } = clipboard.useCopyFlash();
-  const total = g.total ?? tasks.length;
-  const counts = taskStatus.bucketTasks(tasks);
-  const done = counts.ok + counts.warn + counts.fail;
-  const progress = total > 0 ? `${done}/${total}` : "";
+  const work = taskWorkProgress.taskWorkProgress(g);
+  const total = g.work ? work.total : g.total ?? tasks.length;
+  const counts = g.work ? work.counts : taskStatus.bucketTasks(tasks);
+  const done = counts.ok + counts.warn + counts.fail + counts.canceled;
+  const progress = g.work ? work.label : total > 0 ? `${done}/${total}` : "";
   const running = tasks.filter((t) => t.status === "running");
   const pending = tasks.filter((t) => t.status === "pending");
   const completed = tasks.filter((t) => t.status !== "running" && t.status !== "pending");
@@ -147,7 +152,8 @@ function TaskGroupCard({
       TaskProcessDetails.TaskProcessDetailsView,
       {
         details: g.details,
-        ...metricsBaseUrl ? { metricsBaseUrl } : {}
+        ...metricsBaseUrl ? { metricsBaseUrl } : {},
+        ...connectionStatus ? { connectionStatus } : {}
       }
     ),
     !taskProcessDetails.isTaskProcessDetails(g.details) && taskExecDetails.isTaskExecDetails(g.details) && /* @__PURE__ */ jsxRuntime.jsx(TaskExecDetails.TaskExecDetailsView, { details: g.details }),
@@ -166,7 +172,8 @@ function TaskGroupCard({
         task: t,
         group: g,
         ...onTaskControl ? { onTaskControl } : {},
-        ...metricsBaseUrl ? { metricsBaseUrl } : {}
+        ...metricsBaseUrl ? { metricsBaseUrl } : {},
+        ...connectionStatus ? { connectionStatus } : {}
       },
       t.id
     ))
@@ -176,7 +183,8 @@ function TaskRow({
   task: t,
   group,
   onTaskControl,
-  metricsBaseUrl
+  metricsBaseUrl,
+  connectionStatus
 }) {
   const [expanded, setExpanded] = react.useState(false);
   const logs = t.logs ?? [];
@@ -259,7 +267,8 @@ function TaskRow({
             TaskProcessDetails.TaskProcessDetailsView,
             {
               details: processDetails,
-              ...metricsBaseUrl ? { metricsBaseUrl } : {}
+              ...metricsBaseUrl ? { metricsBaseUrl } : {},
+              ...connectionStatus ? { connectionStatus } : {}
             }
           ),
           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: [
@@ -303,7 +312,7 @@ function TaskControls({
 }) {
   const [busy, setBusy] = react.useState(null);
   const [error, setError] = react.useState("");
-  const icons = { start: UiPlay.UiPlay, stop: UiStop.UiStop, restart: UiRestart.UiRestart };
+  const icons = { start: UiPlay.UiPlay, stop: UiStop.UiStop, restart: UiRestart.UiRestart, drain: UiStop.UiStop };
   const invoke = async (action) => {
     setBusy(action);
     setError("");
@@ -319,7 +328,7 @@ function TaskControls({
     (target.controls ?? []).map((action) => {
       var _a;
       const ControlIcon = icons[action];
-      const actionLabel = ((_a = action[0]) == null ? void 0 : _a.toUpperCase()) + action.slice(1);
+      const actionLabel = action === "drain" ? "Stop after current" : ((_a = action[0]) == null ? void 0 : _a.toUpperCase()) + action.slice(1);
       const label = labelSuffix ? `${actionLabel} ${labelSuffix}` : actionLabel;
       return /* @__PURE__ */ jsxRuntime.jsx(
         button.Button,