@flanksource/clicky-ui 0.3.47 → 0.3.49

package/dist/data/SymbolBadge.cjs

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const badgeVariants = require("./badge-variants.cjs");
+const CodeLine = require("./CodeLine.cjs");
+const Icon = require("./Icon.cjs");
+const COLORS = /* @__PURE__ */ new Map([
+  ["neutral", "text-foreground"],
+  ["primary", "text-primary"],
+  ["blue", "text-blue-700 [[data-theme=dark]_&]:text-blue-300"],
+  ["cyan", "text-cyan-700 [[data-theme=dark]_&]:text-cyan-300"],
+  ["indigo", "text-indigo-700 [[data-theme=dark]_&]:text-indigo-300"],
+  ["sky", "text-sky-700 [[data-theme=dark]_&]:text-sky-300"],
+  ["slate", "text-slate-700 [[data-theme=dark]_&]:text-slate-300"],
+  ["violet", "text-violet-700 [[data-theme=dark]_&]:text-violet-300"]
+]);
+function SymbolBadge({
+  style = "badge",
+  color = "indigo",
+  icon,
+  iconClassName,
+  language,
+  children,
+  className,
+  title,
+  ...props
+}) {
+  if (typeof children === "string" ? !children.trim() || /[\r\n]/.test(children) : !react.isValidElement(children)) {
+    throw new Error("SymbolBadge requires a nonempty, single-line symbol; use CodeBlock for multiline source.");
+  }
+  const colorClass = COLORS.get(color);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ...props,
+      "data-symbol-style": style,
+      title: title ?? (typeof children === "string" ? children : void 0),
+      className: utils.cn(
+        badgeVariants.badgeVariants({ variant: "outline", size: "md" }),
+        "max-w-full items-baseline gap-1.5 rounded-md align-baseline text-[12px] leading-4",
+        style === "badge" && "border-transparent",
+        style === "badge-outline" && "border-current",
+        style === "inline" && "rounded-none border-0 p-0",
+        colorClass,
+        className
+      ),
+      style: {
+        ...colorClass === void 0 ? { color } : {},
+        ...style === "badge" ? { backgroundColor: `color-mix(in srgb, ${colorClass === void 0 ? color : "currentColor"} 16%, transparent)` } : {}
+      },
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-symbol-icon": true, "aria-hidden": true, className: "relative w-[1.25em] shrink-0 before:invisible before:content-['.']", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon, width: "1.25em", className: utils.cn("absolute top-1/2 -translate-y-1/2", iconClassName) }) }),
+        typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(CodeLine.CodeLine, { code: children, ...language !== void 0 ? { language } : {}, className: "min-w-0 truncate" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 whitespace-normal", children })
+      ]
+    }
+  );
+}
+exports.SymbolBadge = SymbolBadge;
+//# sourceMappingURL=SymbolBadge.cjs.map

package/dist/data/SymbolBadge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SymbolBadge.cjs","sources":["../../src/data/SymbolBadge.tsx"],"sourcesContent":["import { isValidElement, type HTMLAttributes, type ReactElement } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { badgeVariants } from \"./badge-variants\";\nimport { CodeLine } from \"./CodeLine\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nconst COLORS = new Map([\n  [\"neutral\", \"text-foreground\"],\n  [\"primary\", \"text-primary\"],\n  [\"blue\", \"text-blue-700 [[data-theme=dark]_&]:text-blue-300\"],\n  [\"cyan\", \"text-cyan-700 [[data-theme=dark]_&]:text-cyan-300\"],\n  [\"indigo\", \"text-indigo-700 [[data-theme=dark]_&]:text-indigo-300\"],\n  [\"sky\", \"text-sky-700 [[data-theme=dark]_&]:text-sky-300\"],\n  [\"slate\", \"text-slate-700 [[data-theme=dark]_&]:text-slate-300\"],\n  [\"violet\", \"text-violet-700 [[data-theme=dark]_&]:text-violet-300\"],\n]);\n\nexport type SymbolBadgeStyle = \"badge\" | \"badge-outline\" | \"inline\";\n\nexport type SymbolBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, \"style\" | \"color\" | \"children\"> & {\n  /** Filled badge, colored outline, or an unframed inline symbol. */\n  style?: SymbolBadgeStyle;\n  /** Named palette hue or CSS color, including CSS custom properties. */\n  color?: string;\n  /** Imported icon component placed before the symbol. */\n  icon?: StaticIconComponent;\n  /** Additional glyph classes, including adjustments for fixed-color SVGs. */\n  iconClassName?: string;\n} & (\n  | { /** Literal, nonempty, single-line symbol or expression. */ children: string; language?: string }\n  | { /** Content already formatted by the caller, such as MathML. */ children: ReactElement; language?: never }\n);\n\nexport function SymbolBadge({\n  style = \"badge\",\n  color = \"indigo\",\n  icon,\n  iconClassName,\n  language,\n  children,\n  className,\n  title,\n  ...props\n}: SymbolBadgeProps) {\n  if (typeof children === \"string\" ? !children.trim() || /[\\r\\n]/.test(children) : !isValidElement(children)) {\n    throw new Error(\"SymbolBadge requires a nonempty, single-line symbol; use CodeBlock for multiline source.\");\n  }\n  const colorClass = COLORS.get(color);\n  return (\n    <span\n      {...props}\n      data-symbol-style={style}\n      title={title ?? (typeof children === \"string\" ? children : undefined)}\n      className={cn(\n        badgeVariants({ variant: \"outline\", size: \"md\" }),\n        \"max-w-full items-baseline gap-1.5 rounded-md align-baseline text-[12px] leading-4\",\n        style === \"badge\" && \"border-transparent\",\n        style === \"badge-outline\" && \"border-current\",\n        style === \"inline\" && \"rounded-none border-0 p-0\",\n        colorClass,\n        className,\n      )}\n      style={{\n        ...(colorClass === undefined ? { color } : {}),\n        ...(style === \"badge\" ? { backgroundColor: `color-mix(in srgb, ${colorClass === undefined ? color : \"currentColor\"} 16%, transparent)` } : {}),\n      }}\n    >\n      {icon !== undefined && <span data-symbol-icon aria-hidden className=\"relative w-[1.25em] shrink-0 before:invisible before:content-['.']\">\n        <Icon icon={icon} width=\"1.25em\" className={cn(\"absolute top-1/2 -translate-y-1/2\", iconClassName)} />\n      </span>}\n      {typeof children === \"string\"\n        ? <CodeLine code={children} {...(language !== undefined ? { language } : {})} className=\"min-w-0 truncate\" />\n        : <span className=\"min-w-0 whitespace-normal\">{children}</span>}\n    </span>\n  );\n}\n"],"names":["isValidElement","jsxs","cn","badgeVariants","jsx","Icon","CodeLine"],"mappings":";;;;;;;;AAMA,MAAM,6BAAa,IAAI;AAAA,EACrB,CAAC,WAAW,iBAAiB;AAAA,EAC7B,CAAC,WAAW,cAAc;AAAA,EAC1B,CAAC,QAAQ,mDAAmD;AAAA,EAC5D,CAAC,QAAQ,mDAAmD;AAAA,EAC5D,CAAC,UAAU,uDAAuD;AAAA,EAClE,CAAC,OAAO,iDAAiD;AAAA,EACzD,CAAC,SAAS,qDAAqD;AAAA,EAC/D,CAAC,UAAU,uDAAuD;AACpE,CAAC;AAkBM,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,MAAI,OAAO,aAAa,WAAW,CAAC,SAAS,KAAA,KAAU,SAAS,KAAK,QAAQ,IAAI,CAACA,MAAAA,eAAe,QAAQ,GAAG;AAC1G,UAAM,IAAI,MAAM,0FAA0F;AAAA,EAC5G;AACA,QAAM,aAAa,OAAO,IAAI,KAAK;AACnC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAmB;AAAA,MACnB,OAAO,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,MAC3D,WAAWC,MAAAA;AAAAA,QACTC,cAAAA,cAAc,EAAE,SAAS,WAAW,MAAM,MAAM;AAAA,QAChD;AAAA,QACA,UAAU,WAAW;AAAA,QACrB,UAAU,mBAAmB;AAAA,QAC7B,UAAU,YAAY;AAAA,QACtB;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,GAAI,eAAe,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,QAC3C,GAAI,UAAU,UAAU,EAAE,iBAAiB,sBAAsB,eAAe,SAAY,QAAQ,cAAc,qBAAA,IAAyB,CAAA;AAAA,MAAC;AAAA,MAG7I,UAAA;AAAA,QAAA,SAAS,UAAaC,+BAAC,QAAA,EAAK,oBAAgB,MAAC,eAAW,MAAC,WAAU,sEAClE,yCAACC,WAAA,EAAK,MAAY,OAAM,UAAS,WAAWH,MAAAA,GAAG,qCAAqC,aAAa,GAAG,EAAA,CACtG;AAAA,QACC,OAAO,aAAa,WACjBE,2BAAAA,IAACE,SAAAA,YAAS,MAAM,UAAW,GAAI,aAAa,SAAY,EAAE,aAAa,CAAA,GAAK,WAAU,oBAAmB,IACzGF,+BAAC,QAAA,EAAK,WAAU,6BAA6B,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhE;;"}

package/dist/data/SymbolBadge.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactElement } from 'react';
+import { StaticIconComponent } from './Icon.js';
+export type SymbolBadgeStyle = "badge" | "badge-outline" | "inline";
+export type SymbolBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "style" | "color" | "children"> & {
+    /** Filled badge, colored outline, or an unframed inline symbol. */
+    style?: SymbolBadgeStyle;
+    /** Named palette hue or CSS color, including CSS custom properties. */
+    color?: string;
+    /** Imported icon component placed before the symbol. */
+    icon?: StaticIconComponent;
+    /** Additional glyph classes, including adjustments for fixed-color SVGs. */
+    iconClassName?: string;
+} & ({
+    children: string;
+    language?: string;
+} | {
+    children: ReactElement;
+    language?: never;
+});
+export declare function SymbolBadge({ style, color, icon, iconClassName, language, children, className, title, ...props }: SymbolBadgeProps): import("react").JSX.Element;
+//# sourceMappingURL=SymbolBadge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SymbolBadge.d.ts","sourceRoot":"","sources":["../../src/data/SymbolBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAI/E,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAaxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,eAAe,GAAG,QAAQ,CAAC;AAEpE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACrG,mEAAmE;IACnE,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,CACA;IAA8D,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,GACnG;IAAkE,QAAQ,EAAE,YAAY,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,CAC/G,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,KAAe,EACf,KAAgB,EAChB,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAgClB"}

package/dist/data/SymbolBadge.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import { cn } from "../lib/utils.js";
+import { badgeVariants } from "./badge-variants.js";
+import { CodeLine } from "./CodeLine.js";
+import { Icon } from "./Icon.js";
+const COLORS = /* @__PURE__ */ new Map([
+  ["neutral", "text-foreground"],
+  ["primary", "text-primary"],
+  ["blue", "text-blue-700 [[data-theme=dark]_&]:text-blue-300"],
+  ["cyan", "text-cyan-700 [[data-theme=dark]_&]:text-cyan-300"],
+  ["indigo", "text-indigo-700 [[data-theme=dark]_&]:text-indigo-300"],
+  ["sky", "text-sky-700 [[data-theme=dark]_&]:text-sky-300"],
+  ["slate", "text-slate-700 [[data-theme=dark]_&]:text-slate-300"],
+  ["violet", "text-violet-700 [[data-theme=dark]_&]:text-violet-300"]
+]);
+function SymbolBadge({
+  style = "badge",
+  color = "indigo",
+  icon,
+  iconClassName,
+  language,
+  children,
+  className,
+  title,
+  ...props
+}) {
+  if (typeof children === "string" ? !children.trim() || /[\r\n]/.test(children) : !isValidElement(children)) {
+    throw new Error("SymbolBadge requires a nonempty, single-line symbol; use CodeBlock for multiline source.");
+  }
+  const colorClass = COLORS.get(color);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      "data-symbol-style": style,
+      title: title ?? (typeof children === "string" ? children : void 0),
+      className: cn(
+        badgeVariants({ variant: "outline", size: "md" }),
+        "max-w-full items-baseline gap-1.5 rounded-md align-baseline text-[12px] leading-4",
+        style === "badge" && "border-transparent",
+        style === "badge-outline" && "border-current",
+        style === "inline" && "rounded-none border-0 p-0",
+        colorClass,
+        className
+      ),
+      style: {
+        ...colorClass === void 0 ? { color } : {},
+        ...style === "badge" ? { backgroundColor: `color-mix(in srgb, ${colorClass === void 0 ? color : "currentColor"} 16%, transparent)` } : {}
+      },
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsx("span", { "data-symbol-icon": true, "aria-hidden": true, className: "relative w-[1.25em] shrink-0 before:invisible before:content-['.']", children: /* @__PURE__ */ jsx(Icon, { icon, width: "1.25em", className: cn("absolute top-1/2 -translate-y-1/2", iconClassName) }) }),
+        typeof children === "string" ? /* @__PURE__ */ jsx(CodeLine, { code: children, ...language !== void 0 ? { language } : {}, className: "min-w-0 truncate" }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 whitespace-normal", children })
+      ]
+    }
+  );
+}
+export {
+  SymbolBadge
+};
+//# sourceMappingURL=SymbolBadge.js.map

package/dist/data/SymbolBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SymbolBadge.js","sources":["../../src/data/SymbolBadge.tsx"],"sourcesContent":["import { isValidElement, type HTMLAttributes, type ReactElement } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { badgeVariants } from \"./badge-variants\";\nimport { CodeLine } from \"./CodeLine\";\nimport { Icon, type StaticIconComponent } from \"./Icon\";\n\nconst COLORS = new Map([\n  [\"neutral\", \"text-foreground\"],\n  [\"primary\", \"text-primary\"],\n  [\"blue\", \"text-blue-700 [[data-theme=dark]_&]:text-blue-300\"],\n  [\"cyan\", \"text-cyan-700 [[data-theme=dark]_&]:text-cyan-300\"],\n  [\"indigo\", \"text-indigo-700 [[data-theme=dark]_&]:text-indigo-300\"],\n  [\"sky\", \"text-sky-700 [[data-theme=dark]_&]:text-sky-300\"],\n  [\"slate\", \"text-slate-700 [[data-theme=dark]_&]:text-slate-300\"],\n  [\"violet\", \"text-violet-700 [[data-theme=dark]_&]:text-violet-300\"],\n]);\n\nexport type SymbolBadgeStyle = \"badge\" | \"badge-outline\" | \"inline\";\n\nexport type SymbolBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, \"style\" | \"color\" | \"children\"> & {\n  /** Filled badge, colored outline, or an unframed inline symbol. */\n  style?: SymbolBadgeStyle;\n  /** Named palette hue or CSS color, including CSS custom properties. */\n  color?: string;\n  /** Imported icon component placed before the symbol. */\n  icon?: StaticIconComponent;\n  /** Additional glyph classes, including adjustments for fixed-color SVGs. */\n  iconClassName?: string;\n} & (\n  | { /** Literal, nonempty, single-line symbol or expression. */ children: string; language?: string }\n  | { /** Content already formatted by the caller, such as MathML. */ children: ReactElement; language?: never }\n);\n\nexport function SymbolBadge({\n  style = \"badge\",\n  color = \"indigo\",\n  icon,\n  iconClassName,\n  language,\n  children,\n  className,\n  title,\n  ...props\n}: SymbolBadgeProps) {\n  if (typeof children === \"string\" ? !children.trim() || /[\\r\\n]/.test(children) : !isValidElement(children)) {\n    throw new Error(\"SymbolBadge requires a nonempty, single-line symbol; use CodeBlock for multiline source.\");\n  }\n  const colorClass = COLORS.get(color);\n  return (\n    <span\n      {...props}\n      data-symbol-style={style}\n      title={title ?? (typeof children === \"string\" ? children : undefined)}\n      className={cn(\n        badgeVariants({ variant: \"outline\", size: \"md\" }),\n        \"max-w-full items-baseline gap-1.5 rounded-md align-baseline text-[12px] leading-4\",\n        style === \"badge\" && \"border-transparent\",\n        style === \"badge-outline\" && \"border-current\",\n        style === \"inline\" && \"rounded-none border-0 p-0\",\n        colorClass,\n        className,\n      )}\n      style={{\n        ...(colorClass === undefined ? { color } : {}),\n        ...(style === \"badge\" ? { backgroundColor: `color-mix(in srgb, ${colorClass === undefined ? color : \"currentColor\"} 16%, transparent)` } : {}),\n      }}\n    >\n      {icon !== undefined && <span data-symbol-icon aria-hidden className=\"relative w-[1.25em] shrink-0 before:invisible before:content-['.']\">\n        <Icon icon={icon} width=\"1.25em\" className={cn(\"absolute top-1/2 -translate-y-1/2\", iconClassName)} />\n      </span>}\n      {typeof children === \"string\"\n        ? <CodeLine code={children} {...(language !== undefined ? { language } : {})} className=\"min-w-0 truncate\" />\n        : <span className=\"min-w-0 whitespace-normal\">{children}</span>}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,6BAAa,IAAI;AAAA,EACrB,CAAC,WAAW,iBAAiB;AAAA,EAC7B,CAAC,WAAW,cAAc;AAAA,EAC1B,CAAC,QAAQ,mDAAmD;AAAA,EAC5D,CAAC,QAAQ,mDAAmD;AAAA,EAC5D,CAAC,UAAU,uDAAuD;AAAA,EAClE,CAAC,OAAO,iDAAiD;AAAA,EACzD,CAAC,SAAS,qDAAqD;AAAA,EAC/D,CAAC,UAAU,uDAAuD;AACpE,CAAC;AAkBM,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,MAAI,OAAO,aAAa,WAAW,CAAC,SAAS,KAAA,KAAU,SAAS,KAAK,QAAQ,IAAI,CAAC,eAAe,QAAQ,GAAG;AAC1G,UAAM,IAAI,MAAM,0FAA0F;AAAA,EAC5G;AACA,QAAM,aAAa,OAAO,IAAI,KAAK;AACnC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,qBAAmB;AAAA,MACnB,OAAO,UAAU,OAAO,aAAa,WAAW,WAAW;AAAA,MAC3D,WAAW;AAAA,QACT,cAAc,EAAE,SAAS,WAAW,MAAM,MAAM;AAAA,QAChD;AAAA,QACA,UAAU,WAAW;AAAA,QACrB,UAAU,mBAAmB;AAAA,QAC7B,UAAU,YAAY;AAAA,QACtB;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,GAAI,eAAe,SAAY,EAAE,MAAA,IAAU,CAAA;AAAA,QAC3C,GAAI,UAAU,UAAU,EAAE,iBAAiB,sBAAsB,eAAe,SAAY,QAAQ,cAAc,qBAAA,IAAyB,CAAA;AAAA,MAAC;AAAA,MAG7I,UAAA;AAAA,QAAA,SAAS,UAAa,oBAAC,QAAA,EAAK,oBAAgB,MAAC,eAAW,MAAC,WAAU,sEAClE,8BAAC,MAAA,EAAK,MAAY,OAAM,UAAS,WAAW,GAAG,qCAAqC,aAAa,GAAG,EAAA,CACtG;AAAA,QACC,OAAO,aAAa,WACjB,oBAAC,YAAS,MAAM,UAAW,GAAI,aAAa,SAAY,EAAE,aAAa,CAAA,GAAK,WAAU,oBAAmB,IACzG,oBAAC,QAAA,EAAK,WAAU,6BAA6B,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhE;"}

package/dist/data/TaskManager.cjs

@@ -4,20 +4,83 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const reactQuery = require("@tanstack/react-query");
 const utils = require("../lib/utils.cjs");
+const format = require("../lib/format.cjs");
+const useResourceClock = require("../hooks/use-resource-clock.cjs");
 const useTaskRun = require("../hooks/use-task-run.cjs");
 const Icon = require("./Icon.cjs");
+const DataTable = require("./DataTable.cjs");
+const tagUtils = require("./cells/tag-utils.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");
+const progressColumn = {
+  key: "progress",
+  label: "Progress",
+  minWidth: 180,
+  accessor: (row) => taskWorkProgress.taskWorkProgress(row.run).done,
+  render: (_, row) => {
+    const progress = taskWorkProgress.taskWorkProgress(row.run);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-36 space-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: progress.label }),
+      progress.total > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar.ProgressBar, { segments: taskStatus.taskSegments(progress.counts), total: progress.total, height: "h-1.5" })
+    ] });
+  }
+};
+const startedColumn = { key: "startedAt", label: "Started", kind: "timestamp", sortable: true };
+const durationColumn = {
+  key: "duration",
+  label: "Duration",
+  sortable: true,
+  accessor: (row) => row.startedAt ? Date.parse(row.finishedAt ?? (/* @__PURE__ */ new Date()).toISOString()) - Date.parse(row.startedAt) : null,
+  render: (_, row) => /* @__PURE__ */ jsxRuntime.jsx(RunDuration, { startedAt: row.startedAt, finishedAt: row.finishedAt })
+};
+const runColumns = [
+  { key: "name", label: "Run", sortable: true, grow: true, minWidth: 220 },
+  {
+    key: "status",
+    label: "Status",
+    sortable: true,
+    render: (_, row) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("inline-flex items-center gap-1.5 capitalize", taskStatus.taskStatusColor(row.status)), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: taskStatus.taskStatusIcon(row.status), ...row.status === "running" ? { className: "animate-spin" } : {} }),
+      row.status
+    ] })
+  },
+  durationColumn,
+  progressColumn,
+  { key: "labels", label: "Labels", kind: "tags", tags: { maxVisible: 2 }, minWidth: 160 },
+  startedColumn,
+  { key: "finishedAt", label: "Finished", kind: "timestamp", sortable: true }
+];
+const compactRunColumns = [
+  {
+    key: "name",
+    label: "Run",
+    sortable: true,
+    grow: true,
+    minWidth: 220,
+    render: (_, row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: row.name }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: applicationLabel(row.kind) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: utils.cn("inline-flex items-center gap-1 capitalize", taskStatus.taskStatusColor(row.status)), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: taskStatus.taskStatusIcon(row.status) }),
+          row.status
+        ] })
+      ] })
+    ] })
+  },
+  progressColumn,
+  startedColumn
+];
 function TaskManager({
   basePath,
   kind,
   labels,
   pollMs,
   className,
+  compact,
   selectedId,
   onSelectRun,
   extraTabs,
@@ -25,13 +88,21 @@ function TaskManager({
 }) {
   const [kindFilter, setKindFilter] = react.useState(kind ?? "");
   const [statusFilter, setStatusFilter] = react.useState("");
+  const [labelFilter, setLabelFilter] = react.useState("");
+  const [filterOptions, setFilterOptions] = react.useState({ kinds: [], labels: [] });
+  const [localSelectedId, setLocalSelectedId] = react.useState(null);
   const queryClient = reactQuery.useQueryClient();
   const apiBase = basePath ?? "/api/v1";
   const activeKind = kind ?? (kindFilter || void 0);
+  const activeLabels = react.useMemo(() => {
+    if (!labelFilter) return labels;
+    const selected = tagUtils.splitTagToken(labelFilter);
+    return { ...labels, [selected.key]: selected.value };
+  }, [labels, labelFilter]);
   const { runs, runsKey, status } = useTaskRun.useTaskRuns({
     basePath: apiBase,
     kind: activeKind,
-    labels,
+    labels: activeLabels,
     status: statusFilter || void 0,
     pollMs
   });
@@ -40,79 +111,88 @@ function TaskManager({
       basePath: apiBase,
       kind: activeKind,
       status: statusFilter || void 0,
-      labels
+      labels: activeLabels
     }),
-    [activeKind, apiBase, labels, statusFilter]
+    [activeKind, apiBase, activeLabels, statusFilter]
   );
   react.useEffect(() => {
     if (!runsKey || reactQuery.hashKey(runsKey) !== reactQuery.hashKey(runsQueryKey)) return;
     queryClient.setQueryData(runsQueryKey, runs);
   }, [queryClient, runs, runsKey, runsQueryKey]);
-  const kinds = react.useMemo(() => {
-    const set = /* @__PURE__ */ new Set();
-    for (const r of runs) if (r.kind) set.add(r.kind);
-    return [...set].sort();
+  react.useEffect(() => {
+    setFilterOptions((previous) => {
+      const kinds = [.../* @__PURE__ */ new Set([...previous.kinds, ...runs.flatMap((run) => run.kind ? [run.kind] : [])])].sort();
+      const labels2 = [.../* @__PURE__ */ new Set([...previous.labels, ...runs.flatMap((run) => Object.entries(run.labels ?? {}).map(([key, value]) => `${key}=${value}`))])].sort();
+      if (kinds.length === previous.kinds.length && labels2.length === previous.labels.length) return previous;
+      return { kinds, labels: labels2 };
+    });
   }, [runs]);
-  const applications = react.useMemo(() => groupRunsByApplication(runs), [runs]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("space-y-3", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-      !kind && /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          className: "rounded-md border bg-background px-2 py-1 text-xs",
-          value: kindFilter,
-          onChange: (e) => setKindFilter(e.target.value),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All kinds" }),
-            kinds.map((k) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: k, children: k }, k))
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "select",
-        {
-          className: "rounded-md border bg-background px-2 py-1 text-xs",
-          value: statusFilter,
-          onChange: (e) => setStatusFilter(e.target.value),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Any status" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "running", children: "Running" }),
-            /* @__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: "canceled", children: "Canceled" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: status })
-    ] }),
-    runs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground", children: "No background tasks." }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: applications.map((application) => /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-1 px-1 text-xs font-semibold text-muted-foreground", children: applicationLabel(application.kind) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border bg-card", children: application.runs.map((run) => /* @__PURE__ */ jsxRuntime.jsx(
-        RunRow,
+  const filters = [
+    ...!kind ? [{ key: "kind", kind: "enum", label: "Kind", placeholder: "All kinds", value: kindFilter, options: filterOptions.kinds.map((value) => ({ value, label: applicationLabel(value) })), onChange: setKindFilter }] : [],
+    { key: "status", kind: "enum", label: "Status", placeholder: "Any status", value: statusFilter, options: [
+      { value: "running", label: "Running" },
+      { value: "pending", label: "Pending" },
+      { value: "success", label: "Success" },
+      { value: "failed", label: "Failed" },
+      { value: "warning", label: "Warning" },
+      { value: "canceled", label: "Canceled" }
+    ], onChange: setStatusFilter },
+    {
+      key: "labels",
+      kind: "enum",
+      label: "Labels",
+      placeholder: "Any label",
+      value: labelFilter,
+      options: filterOptions.labels.filter((token) => !(tagUtils.splitTagToken(token).key in (labels ?? {}))).map((value) => ({ value })),
+      onChange: setLabelFilter
+    }
+  ];
+  const rows = react.useMemo(() => runs.map((run) => ({
+    id: run.id,
+    name: run.name,
+    kind: run.kind || "other",
+    status: run.status,
+    ...run.startedAt ? { startedAt: run.startedAt } : {},
+    ...run.finishedAt ? { finishedAt: run.finishedAt } : {},
+    ...run.labels ? { labels: run.labels } : {},
+    run
+  })), [runs]);
+  const openId = onSelectRun ? selectedId : localSelectedId;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DataTable.DataTable,
+    {
+      ...className ? { className } : {},
+      data: rows,
+      columns: compact ? compactRunColumns : runColumns,
+      emptyMessage: "No background tasks.",
+      externalFilters: filters,
+      filterBarProps: { trailing: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: status }) },
+      getRowId: (row) => row.id,
+      defaultSort: { key: "startedAt", dir: "desc" },
+      expandedRowIds: openId ? [openId] : [],
+      onExpandedRowIdsChange: (ids) => {
+        const next = ids.find((id) => id !== openId) ?? null;
+        if (onSelectRun) onSelectRun(next);
+        else setLocalSelectedId(next);
+      },
+      renderExpandedRow: (row) => /* @__PURE__ */ jsxRuntime.jsx(
+        ExpandedRun,
         {
-          run,
+          run: row.run,
           basePath,
           pollMs,
-          selectedId,
-          onSelectRun,
           runsQueryKey,
           extraTabs,
           headerExtra
-        },
-        run.id
-      )) })
-    ] }, application.kind)) })
-  ] });
+        }
+      )
+    }
+  );
 }
-function groupRunsByApplication(runs) {
-  const grouped = /* @__PURE__ */ new Map();
-  for (const run of runs) {
-    const application = run.kind || "other";
-    grouped.set(application, [...grouped.get(application) ?? [], run]);
-  }
-  return [...grouped].map(([kind, applicationRuns]) => ({ kind, runs: applicationRuns }));
+function RunDuration({ startedAt, finishedAt }) {
+  const now = useResourceClock.useResourceClock(!!startedAt && !finishedAt);
+  if (!startedAt) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "—" });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: format.formatDuration(Math.max(0, (finishedAt ? Date.parse(finishedAt) : now) - Date.parse(startedAt))) });
 }
 function applicationLabel(kind) {
   const names = {
@@ -124,98 +204,15 @@ function applicationLabel(kind) {
   };
   return names[kind] ?? kind;
 }
-function RunRow({
-  run,
-  basePath,
-  pollMs,
-  selectedId,
-  onSelectRun,
-  runsQueryKey,
-  extraTabs,
-  headerExtra
-}) {
-  const [localOpen, setLocalOpen] = react.useState(false);
-  const controlled = onSelectRun !== void 0;
-  const open = controlled ? selectedId === run.id : localOpen;
-  const toggle = () => {
-    if (controlled) onSelectRun(open ? null : run.id);
-    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",
-      {
-        type: "button",
-        className: "flex w-full items-center justify-between gap-4 px-4 py-3 text-left hover:bg-muted/50",
-        onClick: toggle,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Icon.Icon,
-                {
-                  icon: taskStatus.taskStatusIcon(run.status),
-                  className: utils.cn(taskStatus.taskStatusColor(run.status), run.status === "running" && "animate-spin")
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: run.name }),
-              run.kind && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full bg-muted px-1.5 py-0 text-[10px] text-muted-foreground", children: run.kind }),
-              isTerminal && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: utils.cn(
-                    "rounded-full px-2 py-0.5 text-xs",
-                    taskStatus.taskStatusColor(run.status),
-                    taskStatus.taskStatusBg(run.status)
-                  ),
-                  children: run.status
-                }
-              )
-            ] }),
-            /* @__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.jsx("span", { children: progress.label }),
-              Object.entries(run.labels ?? {}).map(([k, v]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
-                k,
-                "=",
-                v
-              ] }, k))
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-            ProgressBar.ProgressBar,
-            {
-              segments: taskStatus.taskSegments(progress.counts),
-              total: progress.total || 1,
-              height: "h-1.5"
-            }
-          ) })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(
-      ExpandedRun,
-      {
-        runId: run.id,
-        basePath,
-        pollMs,
-        runsQueryKey,
-        extraTabs,
-        headerExtra
-      }
-    )
-  ] });
-}
 function ExpandedRun({
-  runId,
+  run,
   basePath,
   pollMs,
   runsQueryKey,
   extraTabs,
   headerExtra
 }) {
+  const runId = run.id;
   const { snapshots, status } = useTaskRun.useTaskRun({ id: runId, basePath, pollMs });
   const apiBase = basePath ?? "/api/v1";
   const queryClient = reactQuery.useQueryClient();
@@ -264,19 +261,46 @@ function ExpandedRun({
     action,
     target: task
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t bg-muted/30 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-    TaskProgress.TaskProgress,
-    {
-      snapshots,
-      connectionStatus: status,
-      compact: true,
-      onControl: control,
-      onTaskControl: controlTask,
-      metricsBaseUrl: `${apiBase}/tasks/metrics/`,
-      ...extraTabs ? { extraTabs } : {},
-      ...headerExtra ? { headerExtra } : {}
-    }
-  ) });
+  const progress = taskWorkProgress.taskWorkProgress(run);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 bg-muted/20 px-4 py-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-x-5 gap-y-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        progress.completed,
+        " completed"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        progress.running,
+        " running"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        progress.failed,
+        " failed"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        progress.counts.pending + progress.unstarted,
+        " waiting"
+      ] }),
+      Object.entries(run.labels ?? {}).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+        key,
+        "=",
+        value
+      ] }, key))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TaskProgress.TaskProgress,
+      {
+        snapshots,
+        compact: true,
+        connectionStatus: status,
+        initialShowAllTasks: true,
+        onControl: control,
+        onTaskControl: controlTask,
+        metricsBaseUrl: `${apiBase}/tasks/metrics/`,
+        ...extraTabs ? { extraTabs } : {},
+        ...headerExtra ? { headerExtra } : {}
+      }
+    )
+  ] });
 }
 async function postTaskControl({ url, action, target }) {
   const context = `Failed to ${action} ${target.type} "${target.name}"`;