@flanksource/clicky-ui 0.3.33 → 0.3.35

package/dist/data/Properties.js.map

@@ -1 +1 @@
-{"version":3,"file":"Properties.js","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport {\n  UiCheck,\n  UiDotsVertical,\n  UiListDashes,\n  UiListFlat,\n  UiRows,\n} from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables an expandable child area below the row value. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\" | \"spacious\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?: string | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** CSS grid columns applied to each row. Defaults to the selected density preset. */\n  gridTemplateColumns?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Stable reference used to persist this instance's density preference. */\n  keyRef?: string;\n  /** Show the display-options menu. */\n  showDensityMenu?: boolean;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst PROPERTIES_DENSITY_STORAGE_PREFIX = \"clicky-ui-properties\";\n\nconst PROPERTIES_DENSITY_OPTIONS: Array<{\n  value: PropertiesDensity;\n  label: string;\n  icon: StaticIconComponent;\n}> = [\n  { value: \"compact\", label: \"Compact\", icon: UiRows },\n  { value: \"comfortable\", label: \"Comfortable\", icon: UiListFlat },\n  { value: \"spacious\", label: \"Spacious\", icon: UiListDashes },\n];\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridTemplateColumns: string }\n> = {\n  spacious: {\n    row: \"px-density-4 py-density-3\",\n    label: \"text-sm font-medium text-muted-foreground\",\n    value: \"text-base text-foreground\",\n    gridTemplateColumns: \"minmax(12rem, 20rem) minmax(0, 1fr)\",\n  },\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridTemplateColumns: \"minmax(7rem, 12rem) minmax(0, 1fr)\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridTemplateColumns: \"minmax(8rem, 14rem) minmax(0, 1fr)\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  gridTemplateColumns,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  keyRef,\n  showDensityMenu = true,\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const [densityOverride, setDensityOverride] = useState<PropertiesDensity>();\n  useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);\n\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const activeDensity = densityOverride ?? density;\n  const styles = DENSITY_CLASSES[activeDensity];\n\n  const updateDensity = (next: PropertiesDensity) => {\n    setDensityOverride(next);\n    writeStoredDensity(keyRef, next);\n  };\n\n  return (\n    <dl\n      className={cn(\n        \"divide-y divide-border rounded-md border border-border bg-muted/20\",\n        className,\n      )}\n    >\n      {showDensityMenu ? (\n        <div className=\"flex items-center justify-end px-density-2 py-density-1\">\n          <dt className=\"sr-only\">Properties display options</dt>\n          <dd>\n            <PropertiesDensityMenu density={activeDensity} onChange={updateDensity} />\n          </dd>\n        </div>\n      ) : null}\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\" ? labelIcon(item.key, item.value, item) : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel = typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <div\n            key={item.key}\n            className={cn(\"grid min-w-0 gap-density-3\", styles.row, rowClassName)}\n            style={{ gridTemplateColumns: gridTemplateColumns ?? styles.gridTemplateColumns }}\n          >\n            <dt\n              aria-label={ariaLabel}\n              className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n            >\n              <div className=\"flex min-w-0 items-center gap-density-1\">\n                {iconName ? <Icon name={iconName} className=\"text-xs shrink-0\" /> : null}\n                <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n              </div>\n              {item.subtitle ? (\n                <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                  {item.subtitle}\n                </div>\n              ) : null}\n            </dt>\n            <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n              <div className=\"flex min-w-0 items-start gap-density-1\">\n                <ActionList actions={prefixActions} item={item} className=\"shrink-0 pt-0.5\" />\n                <div className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}>\n                  {renderValue\n                    ? renderValue(item.key, item.value, item)\n                    : defaultRenderValue(item.value)}\n                </div>\n                <ActionList actions={suffixActions} item={item} className=\"shrink-0 pt-0.5\" />\n              </div>\n              {item.expandable && item.expanded && item.renderChildren\n                ? item.renderChildren()\n                : null}\n            </dd>\n          </div>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction PropertiesDensityMenu({\n  density,\n  onChange,\n}: {\n  density: PropertiesDensity;\n  onChange: (density: PropertiesDensity) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Properties options\"\n      trigger={\n        <IconButton\n          icon={UiDotsVertical}\n          label=\"Properties options\"\n          className=\"h-6 w-6\"\n        />\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"min-w-44 py-1 text-popover-foreground\">\n          <div className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n            Density\n          </div>\n          {PROPERTIES_DENSITY_OPTIONS.map((option) => {\n            const active = density === option.value;\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                className={densityMenuItemClassName(active)}\n                onClick={() => {\n                  onChange(option.value);\n                  closeMenu();\n                }}\n              >\n                <Icon\n                  icon={option.icon}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                {active ? (\n                  <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n                ) : (\n                  <span className=\"inline-block h-4 w-4\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean): string {\n  return cn(\n    \"flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm\",\n    \"hover:bg-accent focus:bg-accent focus:outline-none\",\n    active && \"bg-accent/60\",\n  );\n}\n\nfunction readStoredDensity(\n  keyRef: string | undefined,\n): PropertiesDensity | undefined {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return undefined;\n\n  try {\n    const value = window.localStorage.getItem(storageKey);\n    return isPropertiesDensity(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredDensity(\n  keyRef: string | undefined,\n  density: PropertiesDensity,\n): void {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return;\n\n  try {\n    window.localStorage.setItem(storageKey, density);\n  } catch {\n    // Display preferences are best-effort when browser storage is unavailable.\n  }\n}\n\nfunction propertiesDensityStorageKey(\n  keyRef: string | undefined,\n): string | undefined {\n  const normalized = keyRef?.trim();\n  return normalized\n    ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density`\n    : undefined;\n}\n\nfunction isPropertiesDensity(value: unknown): value is PropertiesDensity {\n  return value === \"compact\" || value === \"comfortable\" || value === \"spacious\";\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\" ? { name: action.icon } : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n  if (value === null || value === undefined) {\n    return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n  }\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"boolean\") {\n    return <span className=\"font-mono\">{String(value)}</span>;\n  }\n  try {\n    return (\n      <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n        {JSON.stringify(value, null, 2)}\n      </pre>\n    );\n  } catch {\n    return String(value);\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Properties.js","sources":["../../src/data/Properties.tsx"],"sourcesContent":["import {\n  Fragment,\n  useContext,\n  useEffect,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport {\n  UiCheck,\n  UiDotsVertical,\n  UiListDashes,\n  UiListFlat,\n  UiRows,\n} from \"../icons\";\nimport { cn } from \"../lib/utils\";\nimport { DropdownMenu } from \"../overlay/DropdownMenu\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\nimport { formatPropertyLabel } from \"./properties-utils\";\nimport { PropertiesContext } from \"./properties-context\";\n\nexport type PropertiesAction<V = unknown> = {\n  /** Stable action id. */\n  id: string;\n  /** Iconify name or imported icon component. */\n  icon: string | StaticIconComponent;\n  /** Accessible label and tooltip for this row action. */\n  label: (key: string, value: V, item: PropertiesItem<V>) => string;\n  /** Return false to hide the action for a specific row. */\n  visible?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Return true to disable the action for a specific row. */\n  disabled?: (key: string, value: V, item: PropertiesItem<V>) => boolean;\n  /** Called when the row action is clicked. */\n  onClick: (key: string, value: V, item: PropertiesItem<V>) => void;\n};\n\nexport type PropertiesItem<V = unknown> = {\n  /** Stable property key. Also used as the default label. */\n  key: string;\n  /** Property value passed to renderers and actions. */\n  value: V;\n  /** Secondary text shown below the label. */\n  subtitle?: ReactNode;\n  /** Hide this row without removing it from the item array. */\n  hidden?: boolean;\n  /** Enables a child area spanning both columns, with nested labels indented. */\n  expandable?: boolean;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Called when an expandable row is toggled. */\n  onToggle?: (next: boolean) => void;\n  /** Child content rendered when the row is expanded. */\n  renderChildren?: () => ReactNode;\n};\n\nexport type PropertiesDensity = \"comfortable\" | \"compact\" | \"spacious\";\n\nexport type PropertiesProps<V = unknown> = {\n  /** Property rows to render. Hidden items are filtered out. */\n  items: PropertiesItem<V>[];\n  /** Custom label renderer. */\n  renderLabel?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Custom value renderer. */\n  renderValue?: (key: string, value: V, item: PropertiesItem<V>) => ReactNode;\n  /** Static icon name or function that returns an icon name per row. */\n  labelIcon?:\n    | string\n    | ((key: string, value: V, item: PropertiesItem<V>) => string | undefined);\n  /** Actions rendered before the value. */\n  prefixActions?: PropertiesAction<V>[];\n  /** Actions rendered after the value. */\n  suffixActions?: PropertiesAction<V>[];\n  /** Classes applied to the list root. */\n  className?: string;\n  /** Classes applied to each row. */\n  rowClassName?: string;\n  /** CSS grid columns applied to each row. Defaults to the selected density preset. */\n  gridTemplateColumns?: string;\n  /** Classes applied to each label cell. */\n  labelClassName?: string;\n  /** Classes applied to each value cell. */\n  valueClassName?: string;\n  /** Row density preset. */\n  density?: PropertiesDensity;\n  /** Stable reference used to persist this instance's density preference. */\n  keyRef?: string;\n  /** Show the display-options menu. */\n  showDensityMenu?: boolean;\n  /** Empty-state content when no rows are visible. */\n  emptyMessage?: ReactNode;\n};\n\nconst PROPERTIES_DENSITY_STORAGE_PREFIX = \"clicky-ui-properties\";\n\nconst PROPERTIES_DENSITY_OPTIONS: Array<{\n  value: PropertiesDensity;\n  label: string;\n  icon: StaticIconComponent;\n}> = [\n  { value: \"compact\", label: \"Compact\", icon: UiRows },\n  { value: \"comfortable\", label: \"Comfortable\", icon: UiListFlat },\n  { value: \"spacious\", label: \"Spacious\", icon: UiListDashes },\n];\n\nconst DENSITY_CLASSES: Record<\n  PropertiesDensity,\n  { row: string; label: string; value: string; gridTemplateColumns: string }\n> = {\n  spacious: {\n    row: \"px-density-4 py-density-3\",\n    label: \"text-sm font-medium text-muted-foreground\",\n    value: \"text-base text-foreground\",\n    gridTemplateColumns: \"minmax(12rem, 20rem) minmax(0, 1fr)\",\n  },\n  comfortable: {\n    row: \"px-density-3 py-density-2\",\n    label: \"text-xs font-medium text-muted-foreground\",\n    value: \"text-sm text-foreground\",\n    gridTemplateColumns: \"minmax(7rem, 12rem) minmax(0, 1fr)\",\n  },\n  compact: {\n    row: \"px-density-2 py-density-1.5\",\n    label: \"font-mono text-[11px] text-muted-foreground\",\n    value: \"text-xs text-foreground\",\n    gridTemplateColumns: \"minmax(8rem, 14rem) minmax(0, 1fr)\",\n  },\n};\n\nexport function Properties<V = unknown>({\n  items,\n  renderLabel,\n  renderValue,\n  labelIcon,\n  prefixActions,\n  suffixActions,\n  className,\n  rowClassName,\n  gridTemplateColumns,\n  labelClassName,\n  valueClassName,\n  density = \"comfortable\",\n  keyRef,\n  showDensityMenu = true,\n  emptyMessage = \"No properties\",\n}: PropertiesProps<V>) {\n  const parent = useContext(PropertiesContext);\n  const [densityOverride, setDensityOverride] = useState<PropertiesDensity>();\n  useEffect(() => setDensityOverride(readStoredDensity(keyRef)), [keyRef]);\n\n  const visible = items.filter((item) => !item.hidden);\n\n  if (visible.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{emptyMessage}</div>;\n  }\n\n  const activeDensity = parent?.density ?? densityOverride ?? density;\n  const styles = DENSITY_CLASSES[activeDensity];\n  const columns =\n    parent?.columns ?? gridTemplateColumns ?? styles.gridTemplateColumns;\n  const depth = parent?.depth ?? 0;\n\n  const updateDensity = (next: PropertiesDensity) => {\n    setDensityOverride(next);\n    writeStoredDensity(keyRef, next);\n  };\n\n  return (\n    <dl\n      className={cn(\n        \"grid gap-x-density-3 divide-y divide-border rounded-md border border-border bg-muted/20\",\n        parent && \"col-span-full rounded-none border-0 bg-transparent\",\n        className,\n      )}\n      style={{ gridTemplateColumns: parent ? \"subgrid\" : columns }}\n    >\n      {showDensityMenu && !parent ? (\n        <div className=\"col-span-full flex items-center justify-end px-density-2 py-density-1\">\n          <dt className=\"sr-only\">Properties display options</dt>\n          <dd>\n            <PropertiesDensityMenu\n              density={activeDensity}\n              onChange={updateDensity}\n            />\n          </dd>\n        </div>\n      ) : null}\n      {visible.map((item) => {\n        const iconName =\n          typeof labelIcon === \"function\"\n            ? labelIcon(item.key, item.value, item)\n            : labelIcon;\n        const renderedLabel = renderLabel\n          ? renderLabel(item.key, item.value, item)\n          : formatPropertyLabel(item.key);\n        const ariaLabel =\n          typeof renderedLabel === \"string\" ? renderedLabel : item.key;\n\n        return (\n          <Fragment key={item.key}>\n            <div\n              className={cn(\n                \"col-span-full grid min-w-0 grid-cols-subgrid gap-density-3\",\n                styles.row,\n                rowClassName,\n              )}\n            >\n              <dt\n                aria-label={ariaLabel}\n                className={cn(\"min-w-0 truncate\", styles.label, labelClassName)}\n                style={{ paddingInlineStart: depth * 16 }}\n              >\n                <div className=\"flex min-w-0 items-center gap-density-1\">\n                  {iconName ? (\n                    <Icon name={iconName} className=\"text-xs shrink-0\" />\n                  ) : null}\n                  <span className=\"min-w-0 truncate\">{renderedLabel}</span>\n                </div>\n                {item.subtitle ? (\n                  <div className=\"mt-0.5 text-[10px] font-normal text-muted-foreground/80\">\n                    {item.subtitle}\n                  </div>\n                ) : null}\n              </dt>\n              <dd className={cn(\"min-w-0 space-y-density-1\", valueClassName)}>\n                <div className=\"flex min-w-0 items-start gap-density-1\">\n                  <ActionList\n                    actions={prefixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                  <div\n                    className={cn(\"min-w-0 max-w-full flex-1\", styles.value)}\n                  >\n                    {renderValue\n                      ? renderValue(item.key, item.value, item)\n                      : defaultRenderValue(item.value)}\n                  </div>\n                  <ActionList\n                    actions={suffixActions}\n                    item={item}\n                    className=\"shrink-0 pt-0.5\"\n                  />\n                </div>\n              </dd>\n            </div>\n            {item.expandable && item.expanded && item.renderChildren ? (\n              <div className=\"col-span-full grid grid-cols-subgrid\">\n                <dt className=\"sr-only\">{ariaLabel} properties</dt>\n                <dd className=\"col-span-full grid min-w-0 grid-cols-subgrid\">\n                  <PropertiesContext.Provider\n                    value={{\n                      depth: depth + 1,\n                      columns,\n                      density: activeDensity,\n                    }}\n                  >\n                    {item.renderChildren()}\n                  </PropertiesContext.Provider>\n                </dd>\n              </div>\n            ) : null}\n          </Fragment>\n        );\n      })}\n    </dl>\n  );\n}\n\nfunction PropertiesDensityMenu({\n  density,\n  onChange,\n}: {\n  density: PropertiesDensity;\n  onChange: (density: PropertiesDensity) => void;\n}) {\n  return (\n    <DropdownMenu\n      align=\"right\"\n      menuLabel=\"Properties options\"\n      trigger={\n        <IconButton\n          icon={UiDotsVertical}\n          label=\"Properties options\"\n          className=\"h-6 w-6\"\n        />\n      }\n    >\n      {(closeMenu) => (\n        <div className=\"min-w-44 py-1 text-popover-foreground\">\n          <div className=\"px-2 py-1 text-xs font-medium text-muted-foreground\">\n            Density\n          </div>\n          {PROPERTIES_DENSITY_OPTIONS.map((option) => {\n            const active = density === option.value;\n            return (\n              <button\n                key={option.value}\n                type=\"button\"\n                role=\"menuitemradio\"\n                aria-checked={active}\n                className={densityMenuItemClassName(active)}\n                onClick={() => {\n                  onChange(option.value);\n                  closeMenu();\n                }}\n              >\n                <Icon\n                  icon={option.icon}\n                  className=\"text-sm text-muted-foreground\"\n                />\n                <span className=\"min-w-0 flex-1 truncate\">{option.label}</span>\n                {active ? (\n                  <Icon icon={UiCheck} className=\"text-sm text-foreground\" />\n                ) : (\n                  <span className=\"inline-block h-4 w-4\" aria-hidden />\n                )}\n              </button>\n            );\n          })}\n        </div>\n      )}\n    </DropdownMenu>\n  );\n}\n\nfunction densityMenuItemClassName(active: boolean): string {\n  return cn(\n    \"flex w-full items-center gap-2 px-2 py-1.5 text-left text-sm\",\n    \"hover:bg-accent focus:bg-accent focus:outline-none\",\n    active && \"bg-accent/60\",\n  );\n}\n\nfunction readStoredDensity(\n  keyRef: string | undefined,\n): PropertiesDensity | undefined {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return undefined;\n\n  try {\n    const value = window.localStorage.getItem(storageKey);\n    return isPropertiesDensity(value) ? value : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredDensity(\n  keyRef: string | undefined,\n  density: PropertiesDensity,\n): void {\n  const storageKey = propertiesDensityStorageKey(keyRef);\n  if (!storageKey || typeof window === \"undefined\") return;\n\n  try {\n    window.localStorage.setItem(storageKey, density);\n  } catch {\n    // Display preferences are best-effort when browser storage is unavailable.\n  }\n}\n\nfunction propertiesDensityStorageKey(\n  keyRef: string | undefined,\n): string | undefined {\n  const normalized = keyRef?.trim();\n  return normalized\n    ? `${PROPERTIES_DENSITY_STORAGE_PREFIX}:${normalized}:density`\n    : undefined;\n}\n\nfunction isPropertiesDensity(value: unknown): value is PropertiesDensity {\n  return value === \"compact\" || value === \"comfortable\" || value === \"spacious\";\n}\n\nfunction ActionList<V>({\n  actions,\n  item,\n  className,\n}: {\n  actions: PropertiesAction<V>[] | undefined;\n  item: PropertiesItem<V>;\n  className?: string;\n}) {\n  if (!actions || actions.length === 0) return null;\n  const rendered = actions.filter(\n    (action) => !action.visible || action.visible(item.key, item.value, item),\n  );\n  if (rendered.length === 0) return null;\n  return (\n    <span className={cn(\"inline-flex items-center\", className)}>\n      {rendered.map((action) => (\n        <PropertiesActionButton key={action.id} action={action} item={item} />\n      ))}\n    </span>\n  );\n}\n\nfunction PropertiesActionButton<V>({\n  action,\n  item,\n}: {\n  action: PropertiesAction<V>;\n  item: PropertiesItem<V>;\n}) {\n  const label = action.label(item.key, item.value, item);\n  const disabled = action.disabled?.(item.key, item.value, item) ?? false;\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      disabled={disabled}\n      className={cn(\n        \"inline-flex h-5 w-5 items-center justify-center rounded text-muted-foreground\",\n        \"hover:bg-accent hover:text-foreground\",\n        \"disabled:opacity-35 disabled:hover:bg-transparent disabled:hover:text-muted-foreground\",\n      )}\n      onClick={(event) => {\n        event.stopPropagation();\n        action.onClick(item.key, item.value, item);\n      }}\n    >\n      <Icon\n        {...(typeof action.icon === \"string\"\n          ? { name: action.icon }\n          : { icon: action.icon })}\n        className=\"text-xs\"\n      />\n    </button>\n  );\n}\n\nfunction defaultRenderValue(value: unknown): ReactNode {\n  if (value === null || value === undefined) {\n    return <span className=\"font-mono italic text-muted-foreground\">null</span>;\n  }\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"boolean\") {\n    return <span className=\"font-mono\">{String(value)}</span>;\n  }\n  try {\n    return (\n      <pre className=\"max-h-48 overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] leading-relaxed\">\n        {JSON.stringify(value, null, 2)}\n      </pre>\n    );\n  } catch {\n    return String(value);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/data/RadialGauge.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { GaugeTone } from './Gauge';
 export type RadialGaugeProps = {
     /** Current value. Clamped to [0, max]. */

package/dist/data/SchemaViewer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { JsonSchemaObject } from '../components/json-schema-form-types';
 import { SchemaViewerFieldMeta, SchemaViewerNode } from './schema-viewer-model';
 export interface SchemaViewerProps {

package/dist/data/SortableHeader.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { SortDir } from '../hooks/use-sort';
 export type SortableHeaderProps = {
     /** Whether this header currently owns the sort state. */

package/dist/data/StatStrip.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { StaticIconComponent } from './Icon';
 import { BadgeTone } from './Badge';
 export type StatStripItem = {

package/dist/data/StatusBreakdown.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactElement, ReactNode } from 'react';
 export interface StatusSegment {
     key: string;
     label: string;

package/dist/data/TabButton.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from '../../../../node_modules/@types/react/index.d.ts';
+import { ReactNode } from 'react';
 import { StaticIconComponent } from './Icon';
 /** Visual style: a filled `pill` (default) or an `underline` tab. */
 export type TabButtonVariant = "pill" | "underline";

package/dist/data/TaskManager.cjs

@@ -9,6 +9,7 @@ const Icon = require("./Icon.cjs");
 const ProgressBar = require("./ProgressBar.cjs");
 const Timestamp = require("./cells/Timestamp.cjs");
 const TaskProgress = require("./TaskProgress.cjs");
+const taskWorkProgress = require("./task-work-progress.cjs");
 const taskQueryKeys = require("./task-query-keys.cjs");
 const taskStatus = require("./task-status.cjs");
 function TaskManager({
@@ -77,7 +78,8 @@ function TaskManager({
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "pending", children: "Pending" }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "success", children: "Success" }),
             /* @__PURE__ */ jsxRuntime.jsx("option", { value: "failed", children: "Failed" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "warning", children: "Warning" })
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "warning", children: "Warning" }),
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "canceled", children: "Canceled" })
           ]
         }
       ),
@@ -134,6 +136,7 @@ function RunRow({
     else setLocalOpen((v) => !v);
   };
   const isTerminal = run.status !== "running" && run.status !== "pending";
+  const progress = taskWorkProgress.taskWorkProgress(run);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b last:border-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -167,13 +170,7 @@ function RunRow({
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground", children: [
               run.startedAt && /* @__PURE__ */ jsxRuntime.jsx(Timestamp.Timestamp, { value: run.startedAt, format: "relative" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                run.completed + run.failed,
-                "/",
-                run.total,
-                " done",
-                run.failed > 0 ? `, ${run.failed} failed` : ""
-              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: progress.label }),
               Object.entries(run.labels ?? {}).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
                 k,
                 "=",
@@ -184,14 +181,8 @@ function RunRow({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
             ProgressBar.ProgressBar,
             {
-              segments: taskStatus.taskSegments({
-                ok: run.completed,
-                warn: 0,
-                fail: run.failed,
-                run: run.running,
-                pending: Math.max(0, run.total - run.completed - run.failed - run.running)
-              }),
-              total: run.total || 1,
+              segments: taskStatus.taskSegments(progress.counts),
+              total: progress.total || 1,
               height: "h-1.5"
             }
           ) })
@@ -215,7 +206,7 @@ function ExpandedRun({
   pollMs,
   runsQueryKey
 }) {
-  const { snapshots } = useTaskRun.useTaskRun({ id: runId, basePath, pollMs });
+  const { snapshots, status } = useTaskRun.useTaskRun({ id: runId, basePath, pollMs });
   const apiBase = basePath ?? "/api/v1";
   const queryClient = reactQuery.useQueryClient();
   const pendingControls = react.useRef(/* @__PURE__ */ new Map());
@@ -267,6 +258,7 @@ function ExpandedRun({
     TaskProgress.TaskProgress,
     {
       snapshots,
+      connectionStatus: status,
       compact: true,
       onControl: control,
       onTaskControl: controlTask,

package/dist/data/TaskManager.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.cjs","sources":["../../src/data/TaskManager.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { hashKey, useMutation, useQueryClient } from \"@tanstack/react-query\";\nimport type { QueryKey } from \"@tanstack/react-query\";\nimport { cn } from \"../lib/utils\";\nimport { useTaskRun, useTaskRuns } from \"../hooks/use-task-run\";\nimport { Icon } from \"./Icon\";\nimport { ProgressBar } from \"./ProgressBar\";\nimport { Timestamp } from \"./cells/Timestamp\";\nimport { TaskProgress } from \"./TaskProgress\";\nimport type { TaskControlAction, TaskRunMeta, TaskSnapshot } from \"./TaskSnapshot\";\nimport { taskQueryKeys } from \"./task-query-keys\";\nimport { taskSegments, taskStatusBg, taskStatusColor, taskStatusIcon } from \"./task-status\";\n\n// TaskManager is the generic clicky-ui task-manager view: it lists every run\n// (TaskRunMeta) from GET {basePath}/tasks with kind/status filters, and expands\n// each row into a live <TaskProgress> for that run id. Runs are grouped by kind,\n// which applications use as their stable task identity.\n//\n// Requires a react-query QueryClientProvider in the host app (like\n// TimeseriesPanel and CacheBrowser): control actions run through useMutation,\n// and the listing is mirrored into the query cache so sibling views can read it.\n\nexport interface TaskManagerProps {\n  /** Base path of the clicky task API, e.g. \"/api/v1\". */\n  basePath?: string;\n  /** Restrict the listing to a single kind (also hides the kind filter). */\n  kind?: string;\n  /** Restrict the listing to runs whose labels contain every key/value pair. */\n  labels?: Record<string, string>;\n  pollMs?: number;\n  className?: string;\n  /**\n   * Currently-selected (expanded) run id, e.g. driven from the URL. When set,\n   * the matching run renders expanded and selection is controlled — otherwise\n   * each row manages its own expand/collapse state.\n   */\n  selectedId?: string;\n  /**\n   * Called when a run row is toggled: the new selection id, or null when the\n   * open row is collapsed. Pair with selectedId for URL-driven deep links.\n   */\n  onSelectRun?: (id: string | null) => void;\n}\n\nexport function TaskManager({\n  basePath,\n  kind,\n  labels,\n  pollMs,\n  className,\n  selectedId,\n  onSelectRun,\n}: TaskManagerProps) {\n  const [kindFilter, setKindFilter] = useState<string>(kind ?? \"\");\n  const [statusFilter, setStatusFilter] = useState<string>(\"\");\n  const queryClient = useQueryClient();\n  const apiBase = basePath ?? \"/api/v1\";\n  const activeKind = kind ?? (kindFilter || undefined);\n  const { runs, runsKey, status } = useTaskRuns({\n    basePath: apiBase,\n    kind: activeKind,\n    labels,\n    status: statusFilter || undefined,\n    pollMs,\n  });\n  const runsQueryKey = useMemo(\n    () => taskQueryKeys.runs({\n      basePath: apiBase,\n      kind: activeKind,\n      status: statusFilter || undefined,\n      labels,\n    }),\n    [activeKind, apiBase, labels, statusFilter],\n  );\n\n  // Changing a filter re-subscribes the transport but leaves the previous\n  // listing on screen until the next SSE/poll frame. Publishing that listing\n  // under the new key would hand cache consumers rows that do not match their\n  // filters, so mirror only once the delivered listing's own key agrees.\n  useEffect(() => {\n    if (!runsKey || hashKey(runsKey) !== hashKey(runsQueryKey)) return;\n    queryClient.setQueryData(runsQueryKey, runs);\n  }, [queryClient, runs, runsKey, runsQueryKey]);\n\n  const kinds = useMemo(() => {\n    const set = new Set<string>();\n    for (const r of runs) if (r.kind) set.add(r.kind);\n    return [...set].sort();\n  }, [runs]);\n  const applications = useMemo(() => groupRunsByApplication(runs), [runs]);\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {!kind && (\n          <select\n            className=\"rounded-md border bg-background px-2 py-1 text-xs\"\n            value={kindFilter}\n            onChange={(e) => setKindFilter(e.target.value)}\n          >\n            <option value=\"\">All kinds</option>\n            {kinds.map((k) => (\n              <option key={k} value={k}>\n                {k}\n              </option>\n            ))}\n          </select>\n        )}\n        <select\n          className=\"rounded-md border bg-background px-2 py-1 text-xs\"\n          value={statusFilter}\n          onChange={(e) => setStatusFilter(e.target.value)}\n        >\n          <option value=\"\">Any status</option>\n          <option value=\"running\">Running</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"success\">Success</option>\n          <option value=\"failed\">Failed</option>\n          <option value=\"warning\">Warning</option>\n        </select>\n        <span className=\"text-xs text-muted-foreground\">{status}</span>\n      </div>\n\n      {runs.length === 0 ? (\n        <div className=\"rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground\">\n          No background tasks.\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {applications.map((application) => (\n            <section key={application.kind}>\n              <h3 className=\"mb-1 px-1 text-xs font-semibold text-muted-foreground\">\n                {applicationLabel(application.kind)}\n              </h3>\n              <div className=\"overflow-hidden rounded-lg border bg-card\">\n                {application.runs.map((run) => (\n                  <RunRow\n                    key={run.id}\n                    run={run}\n                    basePath={basePath}\n                    pollMs={pollMs}\n                    selectedId={selectedId}\n                    onSelectRun={onSelectRun}\n                    runsQueryKey={runsQueryKey}\n                  />\n                ))}\n              </div>\n            </section>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction groupRunsByApplication(runs: TaskRunMeta[]) {\n  const grouped = new Map<string, TaskRunMeta[]>();\n  for (const run of runs) {\n    const application = run.kind || \"other\";\n    grouped.set(application, [...(grouped.get(application) ?? []), run]);\n  }\n  return [...grouped].map(([kind, applicationRuns]) => ({ kind, runs: applicationRuns }));\n}\n\nfunction applicationLabel(kind: string): string {\n  const names: Record<string, string> = {\n    makerprint: \"MakerPrint\",\n    openscad: \"OpenSCAD\",\n    orca: \"Orca\",\n    snapmaker: \"Snapmaker\",\n    other: \"Other\",\n  };\n  return names[kind] ?? kind;\n}\n\nfunction RunRow({\n  run,\n  basePath,\n  pollMs,\n  selectedId,\n  onSelectRun,\n  runsQueryKey,\n}: {\n  run: TaskRunMeta;\n  basePath: string | undefined;\n  pollMs: number | undefined;\n  selectedId: string | undefined;\n  onSelectRun: ((id: string | null) => void) | undefined;\n  runsQueryKey: QueryKey;\n}) {\n  const [localOpen, setLocalOpen] = useState(false);\n  // Controlled by selectedId when a selection handler is wired; otherwise the\n  // row owns its expand state (backward compatible for router-less consumers).\n  const controlled = onSelectRun !== undefined;\n  const open = controlled ? selectedId === run.id : localOpen;\n  const toggle = () => {\n    if (controlled) onSelectRun(open ? null : run.id);\n    else setLocalOpen((v) => !v);\n  };\n  const isTerminal = run.status !== \"running\" && run.status !== \"pending\";\n\n  return (\n    <div className=\"border-b last:border-0\">\n      <button\n        type=\"button\"\n        className=\"flex w-full items-center justify-between gap-4 px-4 py-3 text-left hover:bg-muted/50\"\n        onClick={toggle}\n      >\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2\">\n            <Icon\n              icon={taskStatusIcon(run.status)}\n              className={cn(taskStatusColor(run.status), run.status === \"running\" && \"animate-spin\")}\n            />\n            <span className=\"truncate font-medium\">{run.name}</span>\n            {run.kind && (\n              <span className=\"rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground\">\n                {run.kind}\n              </span>\n            )}\n            {isTerminal && (\n              <span\n                className={cn(\n                  \"rounded-full px-2 py-0.5 text-xs\",\n                  taskStatusColor(run.status),\n                  taskStatusBg(run.status),\n                )}\n              >\n                {run.status}\n              </span>\n            )}\n          </div>\n          <div className=\"mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground\">\n            {run.startedAt && <Timestamp value={run.startedAt} format=\"relative\" />}\n            <span>\n              {run.completed + run.failed}/{run.total} done\n              {run.failed > 0 ? `, ${run.failed} failed` : \"\"}\n            </span>\n            {Object.entries(run.labels ?? {}).map(([k, v]) => (\n              <span key={k} className=\"font-mono\">\n                {k}={v}\n              </span>\n            ))}\n          </div>\n        </div>\n        <div className=\"w-40 shrink-0\">\n          <ProgressBar\n            segments={taskSegments({\n              ok: run.completed,\n              warn: 0,\n              fail: run.failed,\n              run: run.running,\n              pending: Math.max(0, run.total - run.completed - run.failed - run.running),\n            })}\n            total={run.total || 1}\n            height=\"h-1.5\"\n          />\n        </div>\n      </button>\n      {open && (\n        <ExpandedRun\n          runId={run.id}\n          basePath={basePath}\n          pollMs={pollMs}\n          runsQueryKey={runsQueryKey}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction ExpandedRun({\n  runId,\n  basePath,\n  pollMs,\n  runsQueryKey,\n}: {\n  runId: string;\n  basePath: string | undefined;\n  pollMs: number | undefined;\n  runsQueryKey: QueryKey;\n}) {\n  const { snapshots } = useTaskRun({ id: runId, basePath, pollMs });\n  const apiBase = basePath ?? \"/api/v1\";\n  const queryClient = useQueryClient();\n  const pendingControls = useRef(new Map<string, Promise<void>>());\n  const cachedSnapshots = useRef<TaskSnapshot[] | undefined>(undefined);\n  const runQueryKey = useMemo(\n    () => taskQueryKeys.run({ basePath: apiBase, runId }),\n    [apiBase, runId],\n  );\n  const controlMutation = useMutation({\n    mutationKey: taskQueryKeys.control({ basePath: apiBase, runId }),\n    mutationFn: postTaskControl,\n    onSuccess: async () => {\n      await Promise.all([\n        queryClient.invalidateQueries({ queryKey: runsQueryKey, exact: true, refetchType: \"none\" }),\n        queryClient.invalidateQueries({ queryKey: runQueryKey, exact: true, refetchType: \"none\" }),\n      ]);\n    },\n  });\n\n  useEffect(() => {\n    const previous = cachedSnapshots.current;\n    if (previous?.length === snapshots.length && previous.every((snapshot, index) => snapshot === snapshots[index])) {\n      return;\n    }\n    cachedSnapshots.current = snapshots;\n    queryClient.setQueryData(runQueryKey, snapshots);\n  }, [queryClient, runQueryKey, snapshots]);\n\n  const mutateControl = useCallback((request: TaskControlRequest) => {\n    const key = `${request.url}:${request.action}`;\n    const pending = pendingControls.current.get(key);\n    if (pending) return pending;\n    controlMutation.reset();\n    const mutation = controlMutation.mutateAsync(request).finally(() => {\n      if (pendingControls.current.get(key) === mutation) pendingControls.current.delete(key);\n    });\n    pendingControls.current.set(key, mutation);\n    return mutation;\n  }, [controlMutation.mutateAsync, controlMutation.reset]);\n  const control = (action: TaskControlAction, group: TaskSnapshot) =>\n    mutateControl({\n      url: `${apiBase}/tasks/${encodeURIComponent(runId)}/control`,\n      action,\n      target: group,\n    });\n  const controlTask = (action: TaskControlAction, task: TaskSnapshot) =>\n    mutateControl({\n      url: `${apiBase}/tasks/${encodeURIComponent(runId)}/tasks/${encodeURIComponent(task.id)}/control`,\n      action,\n      target: task,\n    });\n  return (\n    <div className=\"border-t bg-muted/30 px-4 py-3\">\n      <TaskProgress\n        snapshots={snapshots}\n        compact\n        onControl={control}\n        onTaskControl={controlTask}\n        metricsBaseUrl={`${apiBase}/tasks/metrics/`}\n      />\n    </div>\n  );\n}\n\ninterface TaskControlRequest {\n  url: string;\n  action: TaskControlAction;\n  target: TaskSnapshot;\n}\n\nasync function postTaskControl({ url, action, target }: TaskControlRequest) {\n  const context = `Failed to ${action} ${target.type} \"${target.name}\"`;\n  let response: Response;\n  try {\n    response = await fetch(url, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ action }),\n    });\n  } catch (cause) {\n    throw new Error(`${context}: ${cause instanceof Error ? cause.message : \"request failed\"}`, { cause });\n  }\n  if (!response.ok) {\n    const detail = (await response.text()).trim() || `HTTP ${response.status}`;\n    throw new Error(`${context}: ${detail}`);\n  }\n}\n"],"names":["useState","useQueryClient","useTaskRuns","useMemo","taskQueryKeys","useEffect","hashKey","cn","jsxs","jsx","Icon","taskStatusIcon","taskStatusColor","taskStatusBg","Timestamp","ProgressBar","taskSegments","useTaskRun","useRef","useMutation","useCallback","TaskProgress"],"mappings":"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"}
+{"version":3,"file":"TaskManager.cjs","sources":["../../src/data/TaskManager.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { hashKey, useMutation, useQueryClient } from \"@tanstack/react-query\";\nimport type { QueryKey } from \"@tanstack/react-query\";\nimport { cn } from \"../lib/utils\";\nimport { useTaskRun, useTaskRuns } from \"../hooks/use-task-run\";\nimport { Icon } from \"./Icon\";\nimport { ProgressBar } from \"./ProgressBar\";\nimport { Timestamp } from \"./cells/Timestamp\";\nimport { TaskProgress } from \"./TaskProgress\";\nimport { taskWorkProgress } from \"./task-work-progress\";\nimport type { TaskControlAction, TaskRunMeta, TaskSnapshot } from \"./TaskSnapshot\";\nimport { taskQueryKeys } from \"./task-query-keys\";\nimport { taskSegments, taskStatusBg, taskStatusColor, taskStatusIcon } from \"./task-status\";\n\n// TaskManager is the generic clicky-ui task-manager view: it lists every run\n// (TaskRunMeta) from GET {basePath}/tasks with kind/status filters, and expands\n// each row into a live <TaskProgress> for that run id. Runs are grouped by kind,\n// which applications use as their stable task identity.\n//\n// Requires a react-query QueryClientProvider in the host app (like\n// TimeseriesPanel and CacheBrowser): control actions run through useMutation,\n// and the listing is mirrored into the query cache so sibling views can read it.\n\nexport interface TaskManagerProps {\n  /** Base path of the clicky task API, e.g. \"/api/v1\". */\n  basePath?: string;\n  /** Restrict the listing to a single kind (also hides the kind filter). */\n  kind?: string;\n  /** Restrict the listing to runs whose labels contain every key/value pair. */\n  labels?: Record<string, string>;\n  pollMs?: number;\n  className?: string;\n  /**\n   * Currently-selected (expanded) run id, e.g. driven from the URL. When set,\n   * the matching run renders expanded and selection is controlled — otherwise\n   * each row manages its own expand/collapse state.\n   */\n  selectedId?: string;\n  /**\n   * Called when a run row is toggled: the new selection id, or null when the\n   * open row is collapsed. Pair with selectedId for URL-driven deep links.\n   */\n  onSelectRun?: (id: string | null) => void;\n}\n\nexport function TaskManager({\n  basePath,\n  kind,\n  labels,\n  pollMs,\n  className,\n  selectedId,\n  onSelectRun,\n}: TaskManagerProps) {\n  const [kindFilter, setKindFilter] = useState<string>(kind ?? \"\");\n  const [statusFilter, setStatusFilter] = useState<string>(\"\");\n  const queryClient = useQueryClient();\n  const apiBase = basePath ?? \"/api/v1\";\n  const activeKind = kind ?? (kindFilter || undefined);\n  const { runs, runsKey, status } = useTaskRuns({\n    basePath: apiBase,\n    kind: activeKind,\n    labels,\n    status: statusFilter || undefined,\n    pollMs,\n  });\n  const runsQueryKey = useMemo(\n    () => taskQueryKeys.runs({\n      basePath: apiBase,\n      kind: activeKind,\n      status: statusFilter || undefined,\n      labels,\n    }),\n    [activeKind, apiBase, labels, statusFilter],\n  );\n\n  // Changing a filter re-subscribes the transport but leaves the previous\n  // listing on screen until the next SSE/poll frame. Publishing that listing\n  // under the new key would hand cache consumers rows that do not match their\n  // filters, so mirror only once the delivered listing's own key agrees.\n  useEffect(() => {\n    if (!runsKey || hashKey(runsKey) !== hashKey(runsQueryKey)) return;\n    queryClient.setQueryData(runsQueryKey, runs);\n  }, [queryClient, runs, runsKey, runsQueryKey]);\n\n  const kinds = useMemo(() => {\n    const set = new Set<string>();\n    for (const r of runs) if (r.kind) set.add(r.kind);\n    return [...set].sort();\n  }, [runs]);\n  const applications = useMemo(() => groupRunsByApplication(runs), [runs]);\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {!kind && (\n          <select\n            className=\"rounded-md border bg-background px-2 py-1 text-xs\"\n            value={kindFilter}\n            onChange={(e) => setKindFilter(e.target.value)}\n          >\n            <option value=\"\">All kinds</option>\n            {kinds.map((k) => (\n              <option key={k} value={k}>\n                {k}\n              </option>\n            ))}\n          </select>\n        )}\n        <select\n          className=\"rounded-md border bg-background px-2 py-1 text-xs\"\n          value={statusFilter}\n          onChange={(e) => setStatusFilter(e.target.value)}\n        >\n          <option value=\"\">Any status</option>\n          <option value=\"running\">Running</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"success\">Success</option>\n          <option value=\"failed\">Failed</option>\n          <option value=\"warning\">Warning</option>\n          <option value=\"canceled\">Canceled</option>\n        </select>\n        <span className=\"text-xs text-muted-foreground\">{status}</span>\n      </div>\n\n      {runs.length === 0 ? (\n        <div className=\"rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground\">\n          No background tasks.\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {applications.map((application) => (\n            <section key={application.kind}>\n              <h3 className=\"mb-1 px-1 text-xs font-semibold text-muted-foreground\">\n                {applicationLabel(application.kind)}\n              </h3>\n              <div className=\"overflow-hidden rounded-lg border bg-card\">\n                {application.runs.map((run) => (\n                  <RunRow\n                    key={run.id}\n                    run={run}\n                    basePath={basePath}\n                    pollMs={pollMs}\n                    selectedId={selectedId}\n                    onSelectRun={onSelectRun}\n                    runsQueryKey={runsQueryKey}\n                  />\n                ))}\n              </div>\n            </section>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction groupRunsByApplication(runs: TaskRunMeta[]) {\n  const grouped = new Map<string, TaskRunMeta[]>();\n  for (const run of runs) {\n    const application = run.kind || \"other\";\n    grouped.set(application, [...(grouped.get(application) ?? []), run]);\n  }\n  return [...grouped].map(([kind, applicationRuns]) => ({ kind, runs: applicationRuns }));\n}\n\nfunction applicationLabel(kind: string): string {\n  const names: Record<string, string> = {\n    makerprint: \"MakerPrint\",\n    openscad: \"OpenSCAD\",\n    orca: \"Orca\",\n    snapmaker: \"Snapmaker\",\n    other: \"Other\",\n  };\n  return names[kind] ?? kind;\n}\n\nfunction RunRow({\n  run,\n  basePath,\n  pollMs,\n  selectedId,\n  onSelectRun,\n  runsQueryKey,\n}: {\n  run: TaskRunMeta;\n  basePath: string | undefined;\n  pollMs: number | undefined;\n  selectedId: string | undefined;\n  onSelectRun: ((id: string | null) => void) | undefined;\n  runsQueryKey: QueryKey;\n}) {\n  const [localOpen, setLocalOpen] = useState(false);\n  // Controlled by selectedId when a selection handler is wired; otherwise the\n  // row owns its expand state (backward compatible for router-less consumers).\n  const controlled = onSelectRun !== undefined;\n  const open = controlled ? selectedId === run.id : localOpen;\n  const toggle = () => {\n    if (controlled) onSelectRun(open ? null : run.id);\n    else setLocalOpen((v) => !v);\n  };\n  const isTerminal = run.status !== \"running\" && run.status !== \"pending\";\n  const progress = taskWorkProgress(run);\n\n  return (\n    <div className=\"border-b last:border-0\">\n      <button\n        type=\"button\"\n        className=\"flex w-full items-center justify-between gap-4 px-4 py-3 text-left hover:bg-muted/50\"\n        onClick={toggle}\n      >\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2\">\n            <Icon\n              icon={taskStatusIcon(run.status)}\n              className={cn(taskStatusColor(run.status), run.status === \"running\" && \"animate-spin\")}\n            />\n            <span className=\"truncate font-medium\">{run.name}</span>\n            {run.kind && (\n              <span className=\"rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground\">\n                {run.kind}\n              </span>\n            )}\n            {isTerminal && (\n              <span\n                className={cn(\n                  \"rounded-full px-2 py-0.5 text-xs\",\n                  taskStatusColor(run.status),\n                  taskStatusBg(run.status),\n                )}\n              >\n                {run.status}\n              </span>\n            )}\n          </div>\n          <div className=\"mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground\">\n            {run.startedAt && <Timestamp value={run.startedAt} format=\"relative\" />}\n            <span>\n              {progress.label}\n            </span>\n            {Object.entries(run.labels ?? {}).map(([k, v]) => (\n              <span key={k} className=\"font-mono\">\n                {k}={v}\n              </span>\n            ))}\n          </div>\n        </div>\n        <div className=\"w-40 shrink-0\">\n          <ProgressBar\n            segments={taskSegments(progress.counts)}\n            total={progress.total || 1}\n            height=\"h-1.5\"\n          />\n        </div>\n      </button>\n      {open && (\n        <ExpandedRun\n          runId={run.id}\n          basePath={basePath}\n          pollMs={pollMs}\n          runsQueryKey={runsQueryKey}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction ExpandedRun({\n  runId,\n  basePath,\n  pollMs,\n  runsQueryKey,\n}: {\n  runId: string;\n  basePath: string | undefined;\n  pollMs: number | undefined;\n  runsQueryKey: QueryKey;\n}) {\n  const { snapshots, status } = useTaskRun({ id: runId, basePath, pollMs });\n  const apiBase = basePath ?? \"/api/v1\";\n  const queryClient = useQueryClient();\n  const pendingControls = useRef(new Map<string, Promise<void>>());\n  const cachedSnapshots = useRef<TaskSnapshot[] | undefined>(undefined);\n  const runQueryKey = useMemo(\n    () => taskQueryKeys.run({ basePath: apiBase, runId }),\n    [apiBase, runId],\n  );\n  const controlMutation = useMutation({\n    mutationKey: taskQueryKeys.control({ basePath: apiBase, runId }),\n    mutationFn: postTaskControl,\n    onSuccess: async () => {\n      await Promise.all([\n        queryClient.invalidateQueries({ queryKey: runsQueryKey, exact: true, refetchType: \"none\" }),\n        queryClient.invalidateQueries({ queryKey: runQueryKey, exact: true, refetchType: \"none\" }),\n      ]);\n    },\n  });\n\n  useEffect(() => {\n    const previous = cachedSnapshots.current;\n    if (previous?.length === snapshots.length && previous.every((snapshot, index) => snapshot === snapshots[index])) {\n      return;\n    }\n    cachedSnapshots.current = snapshots;\n    queryClient.setQueryData(runQueryKey, snapshots);\n  }, [queryClient, runQueryKey, snapshots]);\n\n  const mutateControl = useCallback((request: TaskControlRequest) => {\n    const key = `${request.url}:${request.action}`;\n    const pending = pendingControls.current.get(key);\n    if (pending) return pending;\n    controlMutation.reset();\n    const mutation = controlMutation.mutateAsync(request).finally(() => {\n      if (pendingControls.current.get(key) === mutation) pendingControls.current.delete(key);\n    });\n    pendingControls.current.set(key, mutation);\n    return mutation;\n  }, [controlMutation.mutateAsync, controlMutation.reset]);\n  const control = (action: TaskControlAction, group: TaskSnapshot) =>\n    mutateControl({\n      url: `${apiBase}/tasks/${encodeURIComponent(runId)}/control`,\n      action,\n      target: group,\n    });\n  const controlTask = (action: TaskControlAction, task: TaskSnapshot) =>\n    mutateControl({\n      url: `${apiBase}/tasks/${encodeURIComponent(runId)}/tasks/${encodeURIComponent(task.id)}/control`,\n      action,\n      target: task,\n    });\n  return (\n    <div className=\"border-t bg-muted/30 px-4 py-3\">\n      <TaskProgress\n        snapshots={snapshots}\n        connectionStatus={status}\n        compact\n        onControl={control}\n        onTaskControl={controlTask}\n        metricsBaseUrl={`${apiBase}/tasks/metrics/`}\n      />\n    </div>\n  );\n}\n\ninterface TaskControlRequest {\n  url: string;\n  action: TaskControlAction;\n  target: TaskSnapshot;\n}\n\nasync function postTaskControl({ url, action, target }: TaskControlRequest) {\n  const context = `Failed to ${action} ${target.type} \"${target.name}\"`;\n  let response: Response;\n  try {\n    response = await fetch(url, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ action }),\n    });\n  } catch (cause) {\n    throw new Error(`${context}: ${cause instanceof Error ? cause.message : \"request failed\"}`, { cause });\n  }\n  if (!response.ok) {\n    const detail = (await response.text()).trim() || `HTTP ${response.status}`;\n    throw new Error(`${context}: ${detail}`);\n  }\n}\n"],"names":["useState","useQueryClient","useTaskRuns","useMemo","taskQueryKeys","useEffect","hashKey","cn","jsxs","jsx","taskWorkProgress","Icon","taskStatusIcon","taskStatusColor","taskStatusBg","Timestamp","ProgressBar","taskSegments","useTaskRun","useRef","useMutation","useCallback","TaskProgress"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../src/data/TaskManager.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAAW,GACZ,EAAE,gBAAgB,+BAqGlB"}
+{"version":3,"file":"TaskManager.d.ts","sourceRoot":"","sources":["../../src/data/TaskManager.tsx"],"names":[],"mappings":"AAuBA,MAAM,WAAW,gBAAgB;IAC/B,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAAW,GACZ,EAAE,gBAAgB,+BAsGlB"}

package/dist/data/TaskManager.js

@@ -7,6 +7,7 @@ import { Icon } from "./Icon.js";
 import { ProgressBar } from "./ProgressBar.js";
 import { Timestamp } from "./cells/Timestamp.js";
 import { TaskProgress } from "./TaskProgress.js";
+import { taskWorkProgress } from "./task-work-progress.js";
 import { taskQueryKeys } from "./task-query-keys.js";
 import { taskStatusColor, taskStatusIcon, taskStatusBg, taskSegments } from "./task-status.js";
 function TaskManager({
@@ -75,7 +76,8 @@ function TaskManager({
             /* @__PURE__ */ jsx("option", { value: "pending", children: "Pending" }),
             /* @__PURE__ */ jsx("option", { value: "success", children: "Success" }),
             /* @__PURE__ */ jsx("option", { value: "failed", children: "Failed" }),
-            /* @__PURE__ */ jsx("option", { value: "warning", children: "Warning" })
+            /* @__PURE__ */ jsx("option", { value: "warning", children: "Warning" }),
+            /* @__PURE__ */ jsx("option", { value: "canceled", children: "Canceled" })
           ]
         }
       ),
@@ -132,6 +134,7 @@ function RunRow({
     else setLocalOpen((v) => !v);
   };
   const isTerminal = run.status !== "running" && run.status !== "pending";
+  const progress = taskWorkProgress(run);
   return /* @__PURE__ */ jsxs("div", { className: "border-b last:border-0", children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -165,13 +168,7 @@ function RunRow({
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground", children: [
               run.startedAt && /* @__PURE__ */ jsx(Timestamp, { value: run.startedAt, format: "relative" }),
-              /* @__PURE__ */ jsxs("span", { children: [
-                run.completed + run.failed,
-                "/",
-                run.total,
-                " done",
-                run.failed > 0 ? `, ${run.failed} failed` : ""
-              ] }),
+              /* @__PURE__ */ jsx("span", { children: progress.label }),
               Object.entries(run.labels ?? {}).map(([k, v]) => /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
                 k,
                 "=",
@@ -182,14 +179,8 @@ function RunRow({
           /* @__PURE__ */ jsx("div", { className: "w-40 shrink-0", children: /* @__PURE__ */ jsx(
             ProgressBar,
             {
-              segments: taskSegments({
-                ok: run.completed,
-                warn: 0,
-                fail: run.failed,
-                run: run.running,
-                pending: Math.max(0, run.total - run.completed - run.failed - run.running)
-              }),
-              total: run.total || 1,
+              segments: taskSegments(progress.counts),
+              total: progress.total || 1,
               height: "h-1.5"
             }
           ) })
@@ -213,7 +204,7 @@ function ExpandedRun({
   pollMs,
   runsQueryKey
 }) {
-  const { snapshots } = useTaskRun({ id: runId, basePath, pollMs });
+  const { snapshots, status } = useTaskRun({ id: runId, basePath, pollMs });
   const apiBase = basePath ?? "/api/v1";
   const queryClient = useQueryClient();
   const pendingControls = useRef(/* @__PURE__ */ new Map());
@@ -265,6 +256,7 @@ function ExpandedRun({
     TaskProgress,
     {
       snapshots,
+      connectionStatus: status,
       compact: true,
       onControl: control,
       onTaskControl: controlTask,

package/dist/data/TaskManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskManager.js","sources":["../../src/data/TaskManager.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { hashKey, useMutation, useQueryClient } from \"@tanstack/react-query\";\nimport type { QueryKey } from \"@tanstack/react-query\";\nimport { cn } from \"../lib/utils\";\nimport { useTaskRun, useTaskRuns } from \"../hooks/use-task-run\";\nimport { Icon } from \"./Icon\";\nimport { ProgressBar } from \"./ProgressBar\";\nimport { Timestamp } from \"./cells/Timestamp\";\nimport { TaskProgress } from \"./TaskProgress\";\nimport type { TaskControlAction, TaskRunMeta, TaskSnapshot } from \"./TaskSnapshot\";\nimport { taskQueryKeys } from \"./task-query-keys\";\nimport { taskSegments, taskStatusBg, taskStatusColor, taskStatusIcon } from \"./task-status\";\n\n// TaskManager is the generic clicky-ui task-manager view: it lists every run\n// (TaskRunMeta) from GET {basePath}/tasks with kind/status filters, and expands\n// each row into a live <TaskProgress> for that run id. Runs are grouped by kind,\n// which applications use as their stable task identity.\n//\n// Requires a react-query QueryClientProvider in the host app (like\n// TimeseriesPanel and CacheBrowser): control actions run through useMutation,\n// and the listing is mirrored into the query cache so sibling views can read it.\n\nexport interface TaskManagerProps {\n  /** Base path of the clicky task API, e.g. \"/api/v1\". */\n  basePath?: string;\n  /** Restrict the listing to a single kind (also hides the kind filter). */\n  kind?: string;\n  /** Restrict the listing to runs whose labels contain every key/value pair. */\n  labels?: Record<string, string>;\n  pollMs?: number;\n  className?: string;\n  /**\n   * Currently-selected (expanded) run id, e.g. driven from the URL. When set,\n   * the matching run renders expanded and selection is controlled — otherwise\n   * each row manages its own expand/collapse state.\n   */\n  selectedId?: string;\n  /**\n   * Called when a run row is toggled: the new selection id, or null when the\n   * open row is collapsed. Pair with selectedId for URL-driven deep links.\n   */\n  onSelectRun?: (id: string | null) => void;\n}\n\nexport function TaskManager({\n  basePath,\n  kind,\n  labels,\n  pollMs,\n  className,\n  selectedId,\n  onSelectRun,\n}: TaskManagerProps) {\n  const [kindFilter, setKindFilter] = useState<string>(kind ?? \"\");\n  const [statusFilter, setStatusFilter] = useState<string>(\"\");\n  const queryClient = useQueryClient();\n  const apiBase = basePath ?? \"/api/v1\";\n  const activeKind = kind ?? (kindFilter || undefined);\n  const { runs, runsKey, status } = useTaskRuns({\n    basePath: apiBase,\n    kind: activeKind,\n    labels,\n    status: statusFilter || undefined,\n    pollMs,\n  });\n  const runsQueryKey = useMemo(\n    () => taskQueryKeys.runs({\n      basePath: apiBase,\n      kind: activeKind,\n      status: statusFilter || undefined,\n      labels,\n    }),\n    [activeKind, apiBase, labels, statusFilter],\n  );\n\n  // Changing a filter re-subscribes the transport but leaves the previous\n  // listing on screen until the next SSE/poll frame. Publishing that listing\n  // under the new key would hand cache consumers rows that do not match their\n  // filters, so mirror only once the delivered listing's own key agrees.\n  useEffect(() => {\n    if (!runsKey || hashKey(runsKey) !== hashKey(runsQueryKey)) return;\n    queryClient.setQueryData(runsQueryKey, runs);\n  }, [queryClient, runs, runsKey, runsQueryKey]);\n\n  const kinds = useMemo(() => {\n    const set = new Set<string>();\n    for (const r of runs) if (r.kind) set.add(r.kind);\n    return [...set].sort();\n  }, [runs]);\n  const applications = useMemo(() => groupRunsByApplication(runs), [runs]);\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {!kind && (\n          <select\n            className=\"rounded-md border bg-background px-2 py-1 text-xs\"\n            value={kindFilter}\n            onChange={(e) => setKindFilter(e.target.value)}\n          >\n            <option value=\"\">All kinds</option>\n            {kinds.map((k) => (\n              <option key={k} value={k}>\n                {k}\n              </option>\n            ))}\n          </select>\n        )}\n        <select\n          className=\"rounded-md border bg-background px-2 py-1 text-xs\"\n          value={statusFilter}\n          onChange={(e) => setStatusFilter(e.target.value)}\n        >\n          <option value=\"\">Any status</option>\n          <option value=\"running\">Running</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"success\">Success</option>\n          <option value=\"failed\">Failed</option>\n          <option value=\"warning\">Warning</option>\n        </select>\n        <span className=\"text-xs text-muted-foreground\">{status}</span>\n      </div>\n\n      {runs.length === 0 ? (\n        <div className=\"rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground\">\n          No background tasks.\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {applications.map((application) => (\n            <section key={application.kind}>\n              <h3 className=\"mb-1 px-1 text-xs font-semibold text-muted-foreground\">\n                {applicationLabel(application.kind)}\n              </h3>\n              <div className=\"overflow-hidden rounded-lg border bg-card\">\n                {application.runs.map((run) => (\n                  <RunRow\n                    key={run.id}\n                    run={run}\n                    basePath={basePath}\n                    pollMs={pollMs}\n                    selectedId={selectedId}\n                    onSelectRun={onSelectRun}\n                    runsQueryKey={runsQueryKey}\n                  />\n                ))}\n              </div>\n            </section>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction groupRunsByApplication(runs: TaskRunMeta[]) {\n  const grouped = new Map<string, TaskRunMeta[]>();\n  for (const run of runs) {\n    const application = run.kind || \"other\";\n    grouped.set(application, [...(grouped.get(application) ?? []), run]);\n  }\n  return [...grouped].map(([kind, applicationRuns]) => ({ kind, runs: applicationRuns }));\n}\n\nfunction applicationLabel(kind: string): string {\n  const names: Record<string, string> = {\n    makerprint: \"MakerPrint\",\n    openscad: \"OpenSCAD\",\n    orca: \"Orca\",\n    snapmaker: \"Snapmaker\",\n    other: \"Other\",\n  };\n  return names[kind] ?? kind;\n}\n\nfunction RunRow({\n  run,\n  basePath,\n  pollMs,\n  selectedId,\n  onSelectRun,\n  runsQueryKey,\n}: {\n  run: TaskRunMeta;\n  basePath: string | undefined;\n  pollMs: number | undefined;\n  selectedId: string | undefined;\n  onSelectRun: ((id: string | null) => void) | undefined;\n  runsQueryKey: QueryKey;\n}) {\n  const [localOpen, setLocalOpen] = useState(false);\n  // Controlled by selectedId when a selection handler is wired; otherwise the\n  // row owns its expand state (backward compatible for router-less consumers).\n  const controlled = onSelectRun !== undefined;\n  const open = controlled ? selectedId === run.id : localOpen;\n  const toggle = () => {\n    if (controlled) onSelectRun(open ? null : run.id);\n    else setLocalOpen((v) => !v);\n  };\n  const isTerminal = run.status !== \"running\" && run.status !== \"pending\";\n\n  return (\n    <div className=\"border-b last:border-0\">\n      <button\n        type=\"button\"\n        className=\"flex w-full items-center justify-between gap-4 px-4 py-3 text-left hover:bg-muted/50\"\n        onClick={toggle}\n      >\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2\">\n            <Icon\n              icon={taskStatusIcon(run.status)}\n              className={cn(taskStatusColor(run.status), run.status === \"running\" && \"animate-spin\")}\n            />\n            <span className=\"truncate font-medium\">{run.name}</span>\n            {run.kind && (\n              <span className=\"rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground\">\n                {run.kind}\n              </span>\n            )}\n            {isTerminal && (\n              <span\n                className={cn(\n                  \"rounded-full px-2 py-0.5 text-xs\",\n                  taskStatusColor(run.status),\n                  taskStatusBg(run.status),\n                )}\n              >\n                {run.status}\n              </span>\n            )}\n          </div>\n          <div className=\"mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground\">\n            {run.startedAt && <Timestamp value={run.startedAt} format=\"relative\" />}\n            <span>\n              {run.completed + run.failed}/{run.total} done\n              {run.failed > 0 ? `, ${run.failed} failed` : \"\"}\n            </span>\n            {Object.entries(run.labels ?? {}).map(([k, v]) => (\n              <span key={k} className=\"font-mono\">\n                {k}={v}\n              </span>\n            ))}\n          </div>\n        </div>\n        <div className=\"w-40 shrink-0\">\n          <ProgressBar\n            segments={taskSegments({\n              ok: run.completed,\n              warn: 0,\n              fail: run.failed,\n              run: run.running,\n              pending: Math.max(0, run.total - run.completed - run.failed - run.running),\n            })}\n            total={run.total || 1}\n            height=\"h-1.5\"\n          />\n        </div>\n      </button>\n      {open && (\n        <ExpandedRun\n          runId={run.id}\n          basePath={basePath}\n          pollMs={pollMs}\n          runsQueryKey={runsQueryKey}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction ExpandedRun({\n  runId,\n  basePath,\n  pollMs,\n  runsQueryKey,\n}: {\n  runId: string;\n  basePath: string | undefined;\n  pollMs: number | undefined;\n  runsQueryKey: QueryKey;\n}) {\n  const { snapshots } = useTaskRun({ id: runId, basePath, pollMs });\n  const apiBase = basePath ?? \"/api/v1\";\n  const queryClient = useQueryClient();\n  const pendingControls = useRef(new Map<string, Promise<void>>());\n  const cachedSnapshots = useRef<TaskSnapshot[] | undefined>(undefined);\n  const runQueryKey = useMemo(\n    () => taskQueryKeys.run({ basePath: apiBase, runId }),\n    [apiBase, runId],\n  );\n  const controlMutation = useMutation({\n    mutationKey: taskQueryKeys.control({ basePath: apiBase, runId }),\n    mutationFn: postTaskControl,\n    onSuccess: async () => {\n      await Promise.all([\n        queryClient.invalidateQueries({ queryKey: runsQueryKey, exact: true, refetchType: \"none\" }),\n        queryClient.invalidateQueries({ queryKey: runQueryKey, exact: true, refetchType: \"none\" }),\n      ]);\n    },\n  });\n\n  useEffect(() => {\n    const previous = cachedSnapshots.current;\n    if (previous?.length === snapshots.length && previous.every((snapshot, index) => snapshot === snapshots[index])) {\n      return;\n    }\n    cachedSnapshots.current = snapshots;\n    queryClient.setQueryData(runQueryKey, snapshots);\n  }, [queryClient, runQueryKey, snapshots]);\n\n  const mutateControl = useCallback((request: TaskControlRequest) => {\n    const key = `${request.url}:${request.action}`;\n    const pending = pendingControls.current.get(key);\n    if (pending) return pending;\n    controlMutation.reset();\n    const mutation = controlMutation.mutateAsync(request).finally(() => {\n      if (pendingControls.current.get(key) === mutation) pendingControls.current.delete(key);\n    });\n    pendingControls.current.set(key, mutation);\n    return mutation;\n  }, [controlMutation.mutateAsync, controlMutation.reset]);\n  const control = (action: TaskControlAction, group: TaskSnapshot) =>\n    mutateControl({\n      url: `${apiBase}/tasks/${encodeURIComponent(runId)}/control`,\n      action,\n      target: group,\n    });\n  const controlTask = (action: TaskControlAction, task: TaskSnapshot) =>\n    mutateControl({\n      url: `${apiBase}/tasks/${encodeURIComponent(runId)}/tasks/${encodeURIComponent(task.id)}/control`,\n      action,\n      target: task,\n    });\n  return (\n    <div className=\"border-t bg-muted/30 px-4 py-3\">\n      <TaskProgress\n        snapshots={snapshots}\n        compact\n        onControl={control}\n        onTaskControl={controlTask}\n        metricsBaseUrl={`${apiBase}/tasks/metrics/`}\n      />\n    </div>\n  );\n}\n\ninterface TaskControlRequest {\n  url: string;\n  action: TaskControlAction;\n  target: TaskSnapshot;\n}\n\nasync function postTaskControl({ url, action, target }: TaskControlRequest) {\n  const context = `Failed to ${action} ${target.type} \"${target.name}\"`;\n  let response: Response;\n  try {\n    response = await fetch(url, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ action }),\n    });\n  } catch (cause) {\n    throw new Error(`${context}: ${cause instanceof Error ? cause.message : \"request failed\"}`, { cause });\n  }\n  if (!response.ok) {\n    const detail = (await response.text()).trim() || `HTTP ${response.status}`;\n    throw new Error(`${context}: ${detail}`);\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"TaskManager.js","sources":["../../src/data/TaskManager.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { hashKey, useMutation, useQueryClient } from \"@tanstack/react-query\";\nimport type { QueryKey } from \"@tanstack/react-query\";\nimport { cn } from \"../lib/utils\";\nimport { useTaskRun, useTaskRuns } from \"../hooks/use-task-run\";\nimport { Icon } from \"./Icon\";\nimport { ProgressBar } from \"./ProgressBar\";\nimport { Timestamp } from \"./cells/Timestamp\";\nimport { TaskProgress } from \"./TaskProgress\";\nimport { taskWorkProgress } from \"./task-work-progress\";\nimport type { TaskControlAction, TaskRunMeta, TaskSnapshot } from \"./TaskSnapshot\";\nimport { taskQueryKeys } from \"./task-query-keys\";\nimport { taskSegments, taskStatusBg, taskStatusColor, taskStatusIcon } from \"./task-status\";\n\n// TaskManager is the generic clicky-ui task-manager view: it lists every run\n// (TaskRunMeta) from GET {basePath}/tasks with kind/status filters, and expands\n// each row into a live <TaskProgress> for that run id. Runs are grouped by kind,\n// which applications use as their stable task identity.\n//\n// Requires a react-query QueryClientProvider in the host app (like\n// TimeseriesPanel and CacheBrowser): control actions run through useMutation,\n// and the listing is mirrored into the query cache so sibling views can read it.\n\nexport interface TaskManagerProps {\n  /** Base path of the clicky task API, e.g. \"/api/v1\". */\n  basePath?: string;\n  /** Restrict the listing to a single kind (also hides the kind filter). */\n  kind?: string;\n  /** Restrict the listing to runs whose labels contain every key/value pair. */\n  labels?: Record<string, string>;\n  pollMs?: number;\n  className?: string;\n  /**\n   * Currently-selected (expanded) run id, e.g. driven from the URL. When set,\n   * the matching run renders expanded and selection is controlled — otherwise\n   * each row manages its own expand/collapse state.\n   */\n  selectedId?: string;\n  /**\n   * Called when a run row is toggled: the new selection id, or null when the\n   * open row is collapsed. Pair with selectedId for URL-driven deep links.\n   */\n  onSelectRun?: (id: string | null) => void;\n}\n\nexport function TaskManager({\n  basePath,\n  kind,\n  labels,\n  pollMs,\n  className,\n  selectedId,\n  onSelectRun,\n}: TaskManagerProps) {\n  const [kindFilter, setKindFilter] = useState<string>(kind ?? \"\");\n  const [statusFilter, setStatusFilter] = useState<string>(\"\");\n  const queryClient = useQueryClient();\n  const apiBase = basePath ?? \"/api/v1\";\n  const activeKind = kind ?? (kindFilter || undefined);\n  const { runs, runsKey, status } = useTaskRuns({\n    basePath: apiBase,\n    kind: activeKind,\n    labels,\n    status: statusFilter || undefined,\n    pollMs,\n  });\n  const runsQueryKey = useMemo(\n    () => taskQueryKeys.runs({\n      basePath: apiBase,\n      kind: activeKind,\n      status: statusFilter || undefined,\n      labels,\n    }),\n    [activeKind, apiBase, labels, statusFilter],\n  );\n\n  // Changing a filter re-subscribes the transport but leaves the previous\n  // listing on screen until the next SSE/poll frame. Publishing that listing\n  // under the new key would hand cache consumers rows that do not match their\n  // filters, so mirror only once the delivered listing's own key agrees.\n  useEffect(() => {\n    if (!runsKey || hashKey(runsKey) !== hashKey(runsQueryKey)) return;\n    queryClient.setQueryData(runsQueryKey, runs);\n  }, [queryClient, runs, runsKey, runsQueryKey]);\n\n  const kinds = useMemo(() => {\n    const set = new Set<string>();\n    for (const r of runs) if (r.kind) set.add(r.kind);\n    return [...set].sort();\n  }, [runs]);\n  const applications = useMemo(() => groupRunsByApplication(runs), [runs]);\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {!kind && (\n          <select\n            className=\"rounded-md border bg-background px-2 py-1 text-xs\"\n            value={kindFilter}\n            onChange={(e) => setKindFilter(e.target.value)}\n          >\n            <option value=\"\">All kinds</option>\n            {kinds.map((k) => (\n              <option key={k} value={k}>\n                {k}\n              </option>\n            ))}\n          </select>\n        )}\n        <select\n          className=\"rounded-md border bg-background px-2 py-1 text-xs\"\n          value={statusFilter}\n          onChange={(e) => setStatusFilter(e.target.value)}\n        >\n          <option value=\"\">Any status</option>\n          <option value=\"running\">Running</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"success\">Success</option>\n          <option value=\"failed\">Failed</option>\n          <option value=\"warning\">Warning</option>\n          <option value=\"canceled\">Canceled</option>\n        </select>\n        <span className=\"text-xs text-muted-foreground\">{status}</span>\n      </div>\n\n      {runs.length === 0 ? (\n        <div className=\"rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground\">\n          No background tasks.\n        </div>\n      ) : (\n        <div className=\"space-y-3\">\n          {applications.map((application) => (\n            <section key={application.kind}>\n              <h3 className=\"mb-1 px-1 text-xs font-semibold text-muted-foreground\">\n                {applicationLabel(application.kind)}\n              </h3>\n              <div className=\"overflow-hidden rounded-lg border bg-card\">\n                {application.runs.map((run) => (\n                  <RunRow\n                    key={run.id}\n                    run={run}\n                    basePath={basePath}\n                    pollMs={pollMs}\n                    selectedId={selectedId}\n                    onSelectRun={onSelectRun}\n                    runsQueryKey={runsQueryKey}\n                  />\n                ))}\n              </div>\n            </section>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction groupRunsByApplication(runs: TaskRunMeta[]) {\n  const grouped = new Map<string, TaskRunMeta[]>();\n  for (const run of runs) {\n    const application = run.kind || \"other\";\n    grouped.set(application, [...(grouped.get(application) ?? []), run]);\n  }\n  return [...grouped].map(([kind, applicationRuns]) => ({ kind, runs: applicationRuns }));\n}\n\nfunction applicationLabel(kind: string): string {\n  const names: Record<string, string> = {\n    makerprint: \"MakerPrint\",\n    openscad: \"OpenSCAD\",\n    orca: \"Orca\",\n    snapmaker: \"Snapmaker\",\n    other: \"Other\",\n  };\n  return names[kind] ?? kind;\n}\n\nfunction RunRow({\n  run,\n  basePath,\n  pollMs,\n  selectedId,\n  onSelectRun,\n  runsQueryKey,\n}: {\n  run: TaskRunMeta;\n  basePath: string | undefined;\n  pollMs: number | undefined;\n  selectedId: string | undefined;\n  onSelectRun: ((id: string | null) => void) | undefined;\n  runsQueryKey: QueryKey;\n}) {\n  const [localOpen, setLocalOpen] = useState(false);\n  // Controlled by selectedId when a selection handler is wired; otherwise the\n  // row owns its expand state (backward compatible for router-less consumers).\n  const controlled = onSelectRun !== undefined;\n  const open = controlled ? selectedId === run.id : localOpen;\n  const toggle = () => {\n    if (controlled) onSelectRun(open ? null : run.id);\n    else setLocalOpen((v) => !v);\n  };\n  const isTerminal = run.status !== \"running\" && run.status !== \"pending\";\n  const progress = taskWorkProgress(run);\n\n  return (\n    <div className=\"border-b last:border-0\">\n      <button\n        type=\"button\"\n        className=\"flex w-full items-center justify-between gap-4 px-4 py-3 text-left hover:bg-muted/50\"\n        onClick={toggle}\n      >\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"flex items-center gap-2\">\n            <Icon\n              icon={taskStatusIcon(run.status)}\n              className={cn(taskStatusColor(run.status), run.status === \"running\" && \"animate-spin\")}\n            />\n            <span className=\"truncate font-medium\">{run.name}</span>\n            {run.kind && (\n              <span className=\"rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground\">\n                {run.kind}\n              </span>\n            )}\n            {isTerminal && (\n              <span\n                className={cn(\n                  \"rounded-full px-2 py-0.5 text-xs\",\n                  taskStatusColor(run.status),\n                  taskStatusBg(run.status),\n                )}\n              >\n                {run.status}\n              </span>\n            )}\n          </div>\n          <div className=\"mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-muted-foreground\">\n            {run.startedAt && <Timestamp value={run.startedAt} format=\"relative\" />}\n            <span>\n              {progress.label}\n            </span>\n            {Object.entries(run.labels ?? {}).map(([k, v]) => (\n              <span key={k} className=\"font-mono\">\n                {k}={v}\n              </span>\n            ))}\n          </div>\n        </div>\n        <div className=\"w-40 shrink-0\">\n          <ProgressBar\n            segments={taskSegments(progress.counts)}\n            total={progress.total || 1}\n            height=\"h-1.5\"\n          />\n        </div>\n      </button>\n      {open && (\n        <ExpandedRun\n          runId={run.id}\n          basePath={basePath}\n          pollMs={pollMs}\n          runsQueryKey={runsQueryKey}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction ExpandedRun({\n  runId,\n  basePath,\n  pollMs,\n  runsQueryKey,\n}: {\n  runId: string;\n  basePath: string | undefined;\n  pollMs: number | undefined;\n  runsQueryKey: QueryKey;\n}) {\n  const { snapshots, status } = useTaskRun({ id: runId, basePath, pollMs });\n  const apiBase = basePath ?? \"/api/v1\";\n  const queryClient = useQueryClient();\n  const pendingControls = useRef(new Map<string, Promise<void>>());\n  const cachedSnapshots = useRef<TaskSnapshot[] | undefined>(undefined);\n  const runQueryKey = useMemo(\n    () => taskQueryKeys.run({ basePath: apiBase, runId }),\n    [apiBase, runId],\n  );\n  const controlMutation = useMutation({\n    mutationKey: taskQueryKeys.control({ basePath: apiBase, runId }),\n    mutationFn: postTaskControl,\n    onSuccess: async () => {\n      await Promise.all([\n        queryClient.invalidateQueries({ queryKey: runsQueryKey, exact: true, refetchType: \"none\" }),\n        queryClient.invalidateQueries({ queryKey: runQueryKey, exact: true, refetchType: \"none\" }),\n      ]);\n    },\n  });\n\n  useEffect(() => {\n    const previous = cachedSnapshots.current;\n    if (previous?.length === snapshots.length && previous.every((snapshot, index) => snapshot === snapshots[index])) {\n      return;\n    }\n    cachedSnapshots.current = snapshots;\n    queryClient.setQueryData(runQueryKey, snapshots);\n  }, [queryClient, runQueryKey, snapshots]);\n\n  const mutateControl = useCallback((request: TaskControlRequest) => {\n    const key = `${request.url}:${request.action}`;\n    const pending = pendingControls.current.get(key);\n    if (pending) return pending;\n    controlMutation.reset();\n    const mutation = controlMutation.mutateAsync(request).finally(() => {\n      if (pendingControls.current.get(key) === mutation) pendingControls.current.delete(key);\n    });\n    pendingControls.current.set(key, mutation);\n    return mutation;\n  }, [controlMutation.mutateAsync, controlMutation.reset]);\n  const control = (action: TaskControlAction, group: TaskSnapshot) =>\n    mutateControl({\n      url: `${apiBase}/tasks/${encodeURIComponent(runId)}/control`,\n      action,\n      target: group,\n    });\n  const controlTask = (action: TaskControlAction, task: TaskSnapshot) =>\n    mutateControl({\n      url: `${apiBase}/tasks/${encodeURIComponent(runId)}/tasks/${encodeURIComponent(task.id)}/control`,\n      action,\n      target: task,\n    });\n  return (\n    <div className=\"border-t bg-muted/30 px-4 py-3\">\n      <TaskProgress\n        snapshots={snapshots}\n        connectionStatus={status}\n        compact\n        onControl={control}\n        onTaskControl={controlTask}\n        metricsBaseUrl={`${apiBase}/tasks/metrics/`}\n      />\n    </div>\n  );\n}\n\ninterface TaskControlRequest {\n  url: string;\n  action: TaskControlAction;\n  target: TaskSnapshot;\n}\n\nasync function postTaskControl({ url, action, target }: TaskControlRequest) {\n  const context = `Failed to ${action} ${target.type} \"${target.name}\"`;\n  let response: Response;\n  try {\n    response = await fetch(url, {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({ action }),\n    });\n  } catch (cause) {\n    throw new Error(`${context}: ${cause instanceof Error ? cause.message : \"request failed\"}`, { cause });\n  }\n  if (!response.ok) {\n    const detail = (await response.text()).trim() || `HTTP ${response.status}`;\n    throw new Error(`${context}: ${detail}`);\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/data/TaskManagerButton.cjs

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const taskResourceSummary = require("./task-resource-summary.cjs");
+const useResourceClock = require("../hooks/use-resource-clock.cjs");
 const button = require("../components/button.cjs");
 const useTaskRun = require("../hooks/use-task-run.cjs");
 const DropdownMenu = require("../overlay/DropdownMenu.cjs");
 const format = require("../lib/format.cjs");
 const TaskManager = require("./TaskManager.cjs");
-const taskProcessDetails = require("./task-process-details.cjs");
 const taskStatus = require("./task-status.cjs");
 const UiListChecks = require("../icons/components/UiListChecks.cjs");
 const UiActivity = require("../icons/components/UiActivity.cjs");
@@ -22,15 +23,16 @@ function TaskManagerButton({
   selectedId,
   onSelectRun
 }) {
-  const { runs } = useTaskRun.useTaskRuns({ basePath, kind, labels });
+  const { runs, status: runsStatus } = useTaskRun.useTaskRuns({ basePath, kind, labels });
   const activeRuns = runs.filter((run) => run.status === "running" || run.status === "pending");
-  const { snapshots } = useTaskRun.useTaskRun({
+  const { snapshots, status: snapshotStatus } = useTaskRun.useTaskRun({
     ...basePath ? { basePath } : {},
     ids: activeRuns.map((run) => run.id),
     enabled: activeRuns.length > 0
   });
-  const resources = resourceSummary(snapshots);
-  const trigger = /* @__PURE__ */ jsxRuntime.jsx(TaskTrigger, { active: activeRuns.length, ...resources ? { resources } : {} });
+  const now = useResourceClock.useResourceClock(activeRuns.length > 0);
+  const resources = taskResourceSummary.resourceSummary(snapshots, { now, connected: taskResourceSummary.taskTransportConnected(runsStatus) && taskResourceSummary.taskTransportConnected(snapshotStatus) });
+  const trigger = /* @__PURE__ */ jsxRuntime.jsx(TaskTrigger, { active: activeRuns.length, ...activeRuns.length ? { resources } : {} });
   return panel ? /* @__PURE__ */ jsxRuntime.jsx(
     TaskPanelDropdown,
     {
@@ -112,36 +114,17 @@ function TaskTrigger({ active, resources }) {
   const label = `Tasks (${active} active)`;
   return /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { type: "button", variant: "ghost", size: resources ? "sm" : "icon", "aria-label": label, title: label, className: "relative gap-1.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(UiListChecks.UiListChecks, { className: active > 0 ? "animate-pulse" : void 0 }),
-    resources ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ResourceGauge, { icon: /* @__PURE__ */ jsxRuntime.jsx(UiActivity.UiActivity, {}), label: "CPU", percent: resources.cpu, value: `${resources.cpu.toFixed(1)}%` }),
-      /* @__PURE__ */ jsxRuntime.jsx(ResourceGauge, { icon: /* @__PURE__ */ jsxRuntime.jsx(UiMemoryStick.UiMemoryStick, {}), label: "Memory", percent: resources.peakRss ? resources.rss / resources.peakRss * 100 : 0, value: format.formatBytes(resources.rss) })
-    ] }) : active > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Resources unavailable" }) : resources ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(UiActivity.UiActivity, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        resources.cpu.toFixed(1),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(UiMemoryStick.UiMemoryStick, {}),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: format.formatBytes(resources.rss) }),
+      resources.state === "stale" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Stale" })
+    ] }) : null
   ] });
 }
-function ResourceGauge({ icon, label, percent, value }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "h-1 w-5 overflow-hidden rounded bg-border", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block h-full rounded bg-primary", style: { width: `${Math.max(0, Math.min(100, percent))}%` } }) }),
-    /* @__PURE__ */ jsxRuntime.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" && taskProcessDetails.isTaskProcessDetails(snapshot.details)
-  );
-  const processes = tasks.length ? tasks : activeSnapshots.filter((snapshot) => taskProcessDetails.isTaskProcessDetails(snapshot.details));
-  if (!processes.length) return void 0;
-  return processes.reduce((total, snapshot) => {
-    if (!taskProcessDetails.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 });
-}
 exports.TaskManagerButton = TaskManagerButton;
 //# sourceMappingURL=TaskManagerButton.cjs.map