@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7194.1.ab4fc81f82

package/dist/modules/workflows/components/DefinitionMetadataDrawer.js

@@ -0,0 +1,377 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle
+} from "@open-mercato/ui/primitives/drawer";
+import { Button } from "@open-mercato/ui/primitives/button";
+import { Input } from "@open-mercato/ui/primitives/input";
+import { Label } from "@open-mercato/ui/primitives/label";
+import { Textarea } from "@open-mercato/ui/primitives/textarea";
+import { Switch } from "@open-mercato/ui/primitives/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@open-mercato/ui/primitives/select";
+import { TagsInput } from "@open-mercato/ui/backend/inputs/TagsInput";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { cn } from "@open-mercato/shared/lib/utils";
+import { Lock } from "lucide-react";
+import { ContextSchemaEditor } from "./ContextSchemaEditor.js";
+import { DefinitionErrorHandlerField } from "./DefinitionErrorHandlerField.js";
+import { WorkflowIconPicker } from "./WorkflowIconPicker.js";
+function MetadataSection({ id, title, hint, focused = false, children }) {
+  const sectionRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!focused) return;
+    const element = sectionRef.current;
+    if (!element) return;
+    const frame = requestAnimationFrame(() => {
+      element.scrollIntoView({ block: "start" });
+      element.focus({ preventScroll: true });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [focused]);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: sectionRef,
+      id: `workflow-metadata-section-${id}`,
+      "data-metadata-section": id,
+      tabIndex: -1,
+      "aria-labelledby": `workflow-metadata-section-${id}-title`,
+      className: "border-b border-border py-5 outline-none first:pt-2 last:border-b-0 last:pb-2",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx("h3", { id: `workflow-metadata-section-${id}-title`, className: "text-sm font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: hint })
+        ] }),
+        children
+      ]
+    }
+  );
+}
+function MetadataField({ htmlFor, label, required, hint, className, children }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 space-y-1.5", className), children: [
+    /* @__PURE__ */ jsxs(Label, { htmlFor, className: "text-xs", children: [
+      label,
+      required ? " *" : ""
+    ] }),
+    children,
+    hint ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: hint }) : null
+  ] });
+}
+function DefinitionMetadataDrawer({
+  open,
+  onOpenChange,
+  focusSection = null,
+  definitionId,
+  readOnly = false,
+  metadata,
+  handlers,
+  errorHandlerStepOptions,
+  onSave,
+  isSaving = false
+}) {
+  const t = useT();
+  const {
+    workflowId,
+    workflowName,
+    description,
+    version,
+    enabled,
+    category,
+    tags,
+    icon,
+    effectiveFrom,
+    effectiveTo,
+    contextSchema,
+    interpolation,
+    errorHandler
+  } = metadata;
+  const {
+    setWorkflowId,
+    setWorkflowName,
+    setDescription,
+    setVersion,
+    setEnabled,
+    setCategory,
+    setTags,
+    setIcon,
+    setEffectiveFrom,
+    setEffectiveTo,
+    setContextSchema,
+    setInterpolation,
+    setErrorHandler
+  } = handlers;
+  const isExisting = !!definitionId;
+  const lockedHint = isExisting ? t("workflows.visualEditor.metadata.lockedAfterCreate") : void 0;
+  const contentRef = React.useRef(null);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (!(event.metaKey || event.ctrlKey) || event.key !== "Enter") return;
+      if (!onSave || readOnly || isSaving) return;
+      const target = event.target;
+      if (!(target instanceof Node) || !contentRef.current?.contains(target)) return;
+      event.preventDefault();
+      onSave();
+    },
+    [onSave, readOnly, isSaving]
+  );
+  return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DrawerContent,
+    {
+      ref: contentRef,
+      className: "w-full max-w-none sm:w-4/5",
+      onKeyDown: handleKeyDown,
+      closeAriaLabel: t("workflows.visualEditor.metadata.close"),
+      children: [
+        /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+          /* @__PURE__ */ jsx(DrawerTitle, { children: t("workflows.visualEditor.metadata.title") }),
+          /* @__PURE__ */ jsx(DrawerDescription, { children: t("workflows.visualEditor.metadata.description") })
+        ] }),
+        /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsxs("fieldset", { disabled: readOnly, className: "disabled:opacity-70", children: [
+          /* @__PURE__ */ jsx(
+            MetadataSection,
+            {
+              id: "identity",
+              focused: focusSection === "identity",
+              title: t("workflows.visualEditor.metadata.sections.identity"),
+              hint: t("workflows.visualEditor.metadata.sections.identityHint"),
+              children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+                /* @__PURE__ */ jsx(
+                  MetadataField,
+                  {
+                    htmlFor: "workflowId",
+                    label: t("workflows.form.workflowId"),
+                    required: true,
+                    hint: lockedHint,
+                    children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: "workflowId",
+                        value: workflowId,
+                        onChange: (event) => setWorkflowId(event.target.value),
+                        placeholder: t("workflows.form.placeholders.workflowId"),
+                        disabled: isExisting
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MetadataField,
+                  {
+                    htmlFor: "version",
+                    label: t("workflows.form.version"),
+                    required: true,
+                    hint: lockedHint,
+                    children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: "version",
+                        type: "number",
+                        value: version,
+                        onChange: (event) => setVersion(parseInt(event.target.value, 10) || 1),
+                        min: 1,
+                        disabled: isExisting
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MetadataField,
+                  {
+                    htmlFor: "workflowName",
+                    label: t("workflows.form.workflowName"),
+                    required: true,
+                    className: "sm:col-span-2",
+                    children: /* @__PURE__ */ jsx(
+                      Input,
+                      {
+                        id: "workflowName",
+                        value: workflowName,
+                        onChange: (event) => setWorkflowName(event.target.value),
+                        placeholder: t("workflows.form.placeholders.workflowName")
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  MetadataField,
+                  {
+                    htmlFor: "description",
+                    label: t("workflows.form.description"),
+                    className: "sm:col-span-2",
+                    children: /* @__PURE__ */ jsx(
+                      Textarea,
+                      {
+                        id: "description",
+                        value: description,
+                        onChange: (event) => setDescription(event.target.value),
+                        placeholder: t("workflows.form.placeholders.description"),
+                        autoResize: true,
+                        maxRows: 12,
+                        rows: 3
+                      }
+                    )
+                  }
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetadataSection,
+            {
+              id: "presentation",
+              focused: focusSection === "presentation",
+              title: t("workflows.visualEditor.metadata.sections.presentation"),
+              hint: t("workflows.visualEditor.metadata.sections.presentationHint"),
+              children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+                /* @__PURE__ */ jsx(MetadataField, { htmlFor: "icon", label: t("workflows.form.icon"), children: /* @__PURE__ */ jsx(WorkflowIconPicker, { id: "icon", value: icon, onChange: setIcon, disabled: readOnly }) }),
+                /* @__PURE__ */ jsx(MetadataField, { htmlFor: "category", label: t("workflows.form.category"), children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "category",
+                    value: category,
+                    onChange: (event) => setCategory(event.target.value),
+                    placeholder: t("workflows.form.placeholders.category")
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(MetadataField, { label: t("workflows.form.tags"), className: "sm:col-span-2", children: /* @__PURE__ */ jsx(
+                  TagsInput,
+                  {
+                    value: tags,
+                    onChange: setTags,
+                    placeholder: t("workflows.form.placeholders.tags")
+                  }
+                ) })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetadataSection,
+            {
+              id: "availability",
+              focused: focusSection === "availability",
+              title: t("workflows.visualEditor.metadata.sections.availability"),
+              hint: t("workflows.visualEditor.metadata.sections.availabilityHint"),
+              children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [
+                /* @__PURE__ */ jsx(MetadataField, { label: t("common.enabled", "Enabled"), children: /* @__PURE__ */ jsxs("div", { className: "flex h-9 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(Switch, { id: "enabled", checked: enabled, onCheckedChange: setEnabled }),
+                  /* @__PURE__ */ jsx(Label, { htmlFor: "enabled", className: "cursor-pointer text-xs font-normal", children: enabled ? t("common.on", "On") : t("common.off", "Off") })
+                ] }) }),
+                /* @__PURE__ */ jsx(MetadataField, { htmlFor: "effectiveFrom", label: t("workflows.form.effectiveFrom"), children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "effectiveFrom",
+                    type: "date",
+                    value: effectiveFrom,
+                    onChange: (event) => setEffectiveFrom(event.target.value)
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(MetadataField, { htmlFor: "effectiveTo", label: t("workflows.form.effectiveTo"), children: /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "effectiveTo",
+                    type: "date",
+                    value: effectiveTo,
+                    onChange: (event) => setEffectiveTo(event.target.value)
+                  }
+                ) })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MetadataSection,
+            {
+              id: "inputs",
+              focused: focusSection === "inputs",
+              title: t("workflows.visualEditor.metadata.sections.inputs"),
+              hint: t("workflows.visualEditor.metadata.sections.inputsHint"),
+              children: /* @__PURE__ */ jsx("div", { className: "space-y-4", children: setContextSchema ? /* @__PURE__ */ jsx(ContextSchemaEditor, { value: contextSchema, onChange: setContextSchema }) : null })
+            }
+          ),
+          setInterpolation || setErrorHandler ? /* @__PURE__ */ jsx(
+            MetadataSection,
+            {
+              id: "runtime",
+              focused: focusSection === "runtime",
+              title: t("workflows.visualEditor.metadata.sections.runtime"),
+              hint: t("workflows.visualEditor.metadata.sections.runtimeHint"),
+              children: /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+                setInterpolation ? /* @__PURE__ */ jsx(
+                  MetadataField,
+                  {
+                    htmlFor: "interpolation-mode",
+                    label: t("workflows.visualEditor.interpolation.label", "Missing variables"),
+                    hint: t(
+                      "workflows.visualEditor.interpolation.help",
+                      "Controls what happens when a variable placeholder cannot be resolved at run time: strict fails the step so problems surface immediately; lenient keeps the unresolved text unchanged. New workflows start strict."
+                    ),
+                    children: /* @__PURE__ */ jsxs(
+                      Select,
+                      {
+                        value: interpolation ?? "lenient",
+                        onValueChange: (mode) => setInterpolation(mode),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            SelectTrigger,
+                            {
+                              id: "interpolation-mode",
+                              "aria-label": t("workflows.visualEditor.interpolation.label", "Missing variables"),
+                              children: /* @__PURE__ */ jsx(SelectValue, {})
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(SelectContent, { children: [
+                            /* @__PURE__ */ jsx(SelectItem, { value: "strict", children: t("workflows.visualEditor.interpolation.strict", "Strict \u2014 fail the step") }),
+                            /* @__PURE__ */ jsx(SelectItem, { value: "lenient", children: t("workflows.visualEditor.interpolation.lenient", "Lenient \u2014 keep the text as written") })
+                          ] })
+                        ]
+                      }
+                    )
+                  }
+                ) : null,
+                setErrorHandler ? /* @__PURE__ */ jsx(
+                  DefinitionErrorHandlerField,
+                  {
+                    value: errorHandler ?? null,
+                    onChange: (next) => setErrorHandler(next ?? void 0),
+                    stepOptions: errorHandlerStepOptions
+                  }
+                ) : null
+              ] })
+            }
+          ) : null
+        ] }) }),
+        /* @__PURE__ */ jsxs(
+          DrawerFooter,
+          {
+            leading: readOnly ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(Lock, { className: "size-3.5", "aria-hidden": "true" }),
+              t("workflows.visualEditor.metadata.readOnlyNotice")
+            ] }) : onSave ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: t("workflows.visualEditor.metadata.saveHint") }) : void 0,
+            children: [
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: t("workflows.visualEditor.metadata.close") }),
+              onSave && !readOnly ? /* @__PURE__ */ jsx(Button, { type: "button", onClick: onSave, disabled: isSaving, children: isSaving ? t("workflows.mobile.saving") : isExisting ? t("workflows.common.update") : t("workflows.common.save") }) : null
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+var DefinitionMetadataDrawer_default = DefinitionMetadataDrawer;
+export {
+  DefinitionMetadataDrawer,
+  DefinitionMetadataDrawer_default as default
+};
+//# sourceMappingURL=DefinitionMetadataDrawer.js.map

package/dist/modules/workflows/components/DefinitionMetadataDrawer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/DefinitionMetadataDrawer.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n} from '@open-mercato/ui/primitives/drawer'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { Textarea } from '@open-mercato/ui/primitives/textarea'\nimport { Switch } from '@open-mercato/ui/primitives/switch'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@open-mercato/ui/primitives/select'\nimport { TagsInput } from '@open-mercato/ui/backend/inputs/TagsInput'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { Lock } from 'lucide-react'\nimport { ContextSchemaEditor } from './ContextSchemaEditor'\nimport { DefinitionErrorHandlerField } from './DefinitionErrorHandlerField'\nimport { WorkflowIconPicker } from './WorkflowIconPicker'\nimport type { WorkflowMetadataHandlers, WorkflowMetadataState } from '../data/types'\nimport type { WorkflowInterpolationMode } from '../lib/interpolation-pipeline'\n\n/**\n * The drawer's five sections, addressable so another surface can open it AT one\n * of them. The canvas trigger pill (fidelity gap #5) is the first caller: a node\n * that says \"here is how this workflow starts\" has to lead to the place that\n * edits it, and dropping the author at the top of a twelve-field form to hunt\n * for it would be half-wiring the affordance.\n */\nexport type DefinitionMetadataSection =\n  | 'identity'\n  | 'presentation'\n  | 'availability'\n  | 'inputs'\n  | 'runtime'\n\nexport type DefinitionMetadataDrawerProps = {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /**\n   * Scroll to and focus this section when the drawer opens. Focus, not just a\n   * scroll: the keyboard path has to land there too, so the section heading is\n   * programmatically focusable and takes focus, which also makes a screen reader\n   * announce where it just arrived.\n   */\n  focusSection?: DefinitionMetadataSection | null\n  /** Null while creating \u2014 drives the \"fixed after create\" locks on id + version. */\n  definitionId: string | null\n  /** Code-defined workflows are read-only; mirrors the editor's `isCodeOnly`. */\n  readOnly?: boolean\n  metadata: WorkflowMetadataState\n  handlers: WorkflowMetadataHandlers\n  /** Steps the definition-level error handler may jump to. */\n  errorHandlerStepOptions: Array<{ stepId: string; label: string }>\n  /** Primary action \u2014 bound to Cmd/Ctrl+Enter, per the project-wide dialog rule. */\n  onSave?: () => void\n  isSaving?: boolean\n}\n\ntype SectionProps = {\n  id: DefinitionMetadataSection\n  title: string\n  hint: string\n  focused?: boolean\n  children: React.ReactNode\n}\n\n/**\n * One coherent group of definition metadata. Sections rather than tabs: the\n * required identity fields have to stay visible while the author fills the rest\n * in top-to-bottom before the first save, and tabs would hide \"Workflow ID is\n * empty\" behind a navigation step, split the Tab order, and break Ctrl+F.\n */\nfunction MetadataSection({ id, title, hint, focused = false, children }: SectionProps) {\n  const sectionRef = React.useRef<HTMLElement | null>(null)\n\n  React.useEffect(() => {\n    if (!focused) return\n    const element = sectionRef.current\n    if (!element) return\n    // One frame later: the drawer animates in, and scrolling a panel that has\n    // not settled lands somewhere else.\n    const frame = requestAnimationFrame(() => {\n      element.scrollIntoView({ block: 'start' })\n      element.focus({ preventScroll: true })\n    })\n    return () => cancelAnimationFrame(frame)\n  }, [focused])\n\n  return (\n    <section\n      ref={sectionRef}\n      id={`workflow-metadata-section-${id}`}\n      data-metadata-section={id}\n      tabIndex={-1}\n      aria-labelledby={`workflow-metadata-section-${id}-title`}\n      className=\"border-b border-border py-5 outline-none first:pt-2 last:border-b-0 last:pb-2\"\n    >\n      <div className=\"mb-4\">\n        <h3 id={`workflow-metadata-section-${id}-title`} className=\"text-sm font-semibold text-foreground\">\n          {title}\n        </h3>\n        <p className=\"mt-1 text-xs text-muted-foreground\">{hint}</p>\n      </div>\n      {children}\n    </section>\n  )\n}\n\ntype FieldProps = {\n  htmlFor?: string\n  label: string\n  required?: boolean\n  hint?: string\n  className?: string\n  children: React.ReactNode\n}\n\n/** Uniform label \u2192 control \u2192 hint rhythm, so no two fields sit at different heights. */\nfunction MetadataField({ htmlFor, label, required, hint, className, children }: FieldProps) {\n  return (\n    <div className={cn('min-w-0 space-y-1.5', className)}>\n      <Label htmlFor={htmlFor} className=\"text-xs\">\n        {label}\n        {required ? ' *' : ''}\n      </Label>\n      {children}\n      {hint ? <p className=\"text-xs text-muted-foreground\">{hint}</p> : null}\n    </div>\n  )\n}\n\n/**\n * Definition metadata for the Studio, in a wide right-side Drawer.\n *\n * It used to render inline above the canvas inside a `max-h-[45svh]` band\n * (`60svh` on compact viewports), so on the page whose entire purpose is the\n * canvas the form was designed to eat up to half the viewport and everything\n * past the second row of fields was reachable only by scrolling inside the\n * band. A Drawer costs the canvas nothing and can take the width these fields\n * actually need.\n */\nexport function DefinitionMetadataDrawer({\n  open,\n  onOpenChange,\n  focusSection = null,\n  definitionId,\n  readOnly = false,\n  metadata,\n  handlers,\n  errorHandlerStepOptions,\n  onSave,\n  isSaving = false,\n}: DefinitionMetadataDrawerProps) {\n  const t = useT()\n\n  const {\n    workflowId, workflowName, description, version,\n    enabled, category, tags, icon,\n    effectiveFrom, effectiveTo,\n    contextSchema, interpolation, errorHandler,\n  } = metadata\n\n  const {\n    setWorkflowId, setWorkflowName, setDescription, setVersion,\n    setEnabled, setCategory, setTags, setIcon,\n    setEffectiveFrom, setEffectiveTo,\n    setContextSchema, setInterpolation, setErrorHandler,\n  } = handlers\n\n  const isExisting = !!definitionId\n  const lockedHint = isExisting ? t('workflows.visualEditor.metadata.lockedAfterCreate') : undefined\n\n  const contentRef = React.useRef<HTMLDivElement | null>(null)\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!(event.metaKey || event.ctrlKey) || event.key !== 'Enter') return\n      if (!onSave || readOnly || isSaving) return\n      // Radix portals a nested dialog (the trigger editor) outside this DOM\n      // subtree but INSIDE the React tree, so its keystrokes bubble here.\n      // Saving the workflow from a half-filled trigger form would be exactly\n      // the wrong thing, so only keystrokes that really happened in the drawer\n      // count.\n      const target = event.target\n      if (!(target instanceof Node) || !contentRef.current?.contains(target)) return\n      event.preventDefault()\n      onSave()\n    },\n    [onSave, readOnly, isSaving],\n  )\n\n  return (\n    <Drawer open={open} onOpenChange={onOpenChange}>\n      <DrawerContent\n        ref={contentRef}\n        // The maintainer sanctioned the width explicitly: these are twelve\n        // fields plus three sub-editors, and the DS default 400px panel would\n        // reproduce the cramped three-column grid this replaces.\n        className=\"w-full max-w-none sm:w-4/5\"\n        onKeyDown={handleKeyDown}\n        closeAriaLabel={t('workflows.visualEditor.metadata.close')}\n      >\n        <DrawerHeader>\n          <DrawerTitle>{t('workflows.visualEditor.metadata.title')}</DrawerTitle>\n          <DrawerDescription>{t('workflows.visualEditor.metadata.description')}</DrawerDescription>\n        </DrawerHeader>\n\n        <DrawerBody>\n          <fieldset disabled={readOnly} className=\"disabled:opacity-70\">\n            <MetadataSection\n              id=\"identity\"\n              focused={focusSection === 'identity'}\n              title={t('workflows.visualEditor.metadata.sections.identity')}\n              hint={t('workflows.visualEditor.metadata.sections.identityHint')}\n            >\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                <MetadataField\n                  htmlFor=\"workflowId\"\n                  label={t('workflows.form.workflowId')}\n                  required\n                  hint={lockedHint}\n                >\n                  <Input\n                    id=\"workflowId\"\n                    value={workflowId}\n                    onChange={(event) => setWorkflowId(event.target.value)}\n                    placeholder={t('workflows.form.placeholders.workflowId')}\n                    disabled={isExisting}\n                  />\n                </MetadataField>\n\n                <MetadataField\n                  htmlFor=\"version\"\n                  label={t('workflows.form.version')}\n                  required\n                  hint={lockedHint}\n                >\n                  <Input\n                    id=\"version\"\n                    type=\"number\"\n                    value={version}\n                    onChange={(event) => setVersion(parseInt(event.target.value, 10) || 1)}\n                    min={1}\n                    disabled={isExisting}\n                  />\n                </MetadataField>\n\n                <MetadataField\n                  htmlFor=\"workflowName\"\n                  label={t('workflows.form.workflowName')}\n                  required\n                  className=\"sm:col-span-2\"\n                >\n                  <Input\n                    id=\"workflowName\"\n                    value={workflowName}\n                    onChange={(event) => setWorkflowName(event.target.value)}\n                    placeholder={t('workflows.form.placeholders.workflowName')}\n                  />\n                </MetadataField>\n\n                <MetadataField\n                  htmlFor=\"description\"\n                  label={t('workflows.form.description')}\n                  className=\"sm:col-span-2\"\n                >\n                  <Textarea\n                    id=\"description\"\n                    value={description}\n                    onChange={(event) => setDescription(event.target.value)}\n                    placeholder={t('workflows.form.placeholders.description')}\n                    autoResize\n                    maxRows={12}\n                    rows={3}\n                  />\n                </MetadataField>\n              </div>\n            </MetadataSection>\n\n            <MetadataSection\n              id=\"presentation\"\n              focused={focusSection === 'presentation'}\n              title={t('workflows.visualEditor.metadata.sections.presentation')}\n              hint={t('workflows.visualEditor.metadata.sections.presentationHint')}\n            >\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n                <MetadataField htmlFor=\"icon\" label={t('workflows.form.icon')}>\n                  <WorkflowIconPicker id=\"icon\" value={icon} onChange={setIcon} disabled={readOnly} />\n                </MetadataField>\n\n                <MetadataField htmlFor=\"category\" label={t('workflows.form.category')}>\n                  <Input\n                    id=\"category\"\n                    value={category}\n                    onChange={(event) => setCategory(event.target.value)}\n                    placeholder={t('workflows.form.placeholders.category')}\n                  />\n                </MetadataField>\n\n                <MetadataField label={t('workflows.form.tags')} className=\"sm:col-span-2\">\n                  <TagsInput\n                    value={tags}\n                    onChange={setTags}\n                    placeholder={t('workflows.form.placeholders.tags')}\n                  />\n                </MetadataField>\n              </div>\n            </MetadataSection>\n\n            <MetadataSection\n              id=\"availability\"\n              focused={focusSection === 'availability'}\n              title={t('workflows.visualEditor.metadata.sections.availability')}\n              hint={t('workflows.visualEditor.metadata.sections.availabilityHint')}\n            >\n              <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-3\">\n                <MetadataField label={t('common.enabled', 'Enabled')}>\n                  <div className=\"flex h-9 items-center gap-2\">\n                    <Switch id=\"enabled\" checked={enabled} onCheckedChange={setEnabled} />\n                    <Label htmlFor=\"enabled\" className=\"cursor-pointer text-xs font-normal\">\n                      {enabled ? t('common.on', 'On') : t('common.off', 'Off')}\n                    </Label>\n                  </div>\n                </MetadataField>\n\n                <MetadataField htmlFor=\"effectiveFrom\" label={t('workflows.form.effectiveFrom')}>\n                  <Input\n                    id=\"effectiveFrom\"\n                    type=\"date\"\n                    value={effectiveFrom}\n                    onChange={(event) => setEffectiveFrom(event.target.value)}\n                  />\n                </MetadataField>\n\n                <MetadataField htmlFor=\"effectiveTo\" label={t('workflows.form.effectiveTo')}>\n                  <Input\n                    id=\"effectiveTo\"\n                    type=\"date\"\n                    value={effectiveTo}\n                    onChange={(event) => setEffectiveTo(event.target.value)}\n                  />\n                </MetadataField>\n              </div>\n            </MetadataSection>\n\n            <MetadataSection\n              id=\"inputs\"\n              focused={focusSection === 'inputs'}\n              title={t('workflows.visualEditor.metadata.sections.inputs')}\n              hint={t('workflows.visualEditor.metadata.sections.inputsHint')}\n            >\n              <div className=\"space-y-4\">\n                {setContextSchema ? (\n                  <ContextSchemaEditor value={contextSchema} onChange={setContextSchema} />\n                ) : null}\n              </div>\n            </MetadataSection>\n\n            {setInterpolation || setErrorHandler ? (\n              <MetadataSection\n                id=\"runtime\"\n                focused={focusSection === 'runtime'}\n                title={t('workflows.visualEditor.metadata.sections.runtime')}\n                hint={t('workflows.visualEditor.metadata.sections.runtimeHint')}\n              >\n                <div className=\"space-y-5\">\n                  {setInterpolation ? (\n                    <MetadataField\n                      htmlFor=\"interpolation-mode\"\n                      label={t('workflows.visualEditor.interpolation.label', 'Missing variables')}\n                      hint={t(\n                        'workflows.visualEditor.interpolation.help',\n                        'Controls what happens when a variable placeholder cannot be resolved at run time: strict fails the step so problems surface immediately; lenient keeps the unresolved text unchanged. New workflows start strict.',\n                      )}\n                    >\n                      <Select\n                        value={interpolation ?? 'lenient'}\n                        onValueChange={(mode) => setInterpolation(mode as WorkflowInterpolationMode)}\n                      >\n                        <SelectTrigger\n                          id=\"interpolation-mode\"\n                          aria-label={t('workflows.visualEditor.interpolation.label', 'Missing variables')}\n                        >\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"strict\">\n                            {t('workflows.visualEditor.interpolation.strict', 'Strict \u2014 fail the step')}\n                          </SelectItem>\n                          <SelectItem value=\"lenient\">\n                            {t('workflows.visualEditor.interpolation.lenient', 'Lenient \u2014 keep the text as written')}\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </MetadataField>\n                  ) : null}\n\n                  {setErrorHandler ? (\n                    <DefinitionErrorHandlerField\n                      value={errorHandler ?? null}\n                      onChange={(next) => setErrorHandler(next ?? undefined)}\n                      stepOptions={errorHandlerStepOptions}\n                    />\n                  ) : null}\n                </div>\n              </MetadataSection>\n            ) : null}\n          </fieldset>\n        </DrawerBody>\n\n        <DrawerFooter\n          leading={\n            readOnly ? (\n              <span className=\"inline-flex items-center gap-1.5 text-xs text-muted-foreground\">\n                <Lock className=\"size-3.5\" aria-hidden=\"true\" />\n                {t('workflows.visualEditor.metadata.readOnlyNotice')}\n              </span>\n            ) : onSave ? (\n              <span className=\"text-xs text-muted-foreground\">\n                {t('workflows.visualEditor.metadata.saveHint')}\n              </span>\n            ) : undefined\n          }\n        >\n          <Button type=\"button\" variant=\"outline\" onClick={() => onOpenChange(false)}>\n            {t('workflows.visualEditor.metadata.close')}\n          </Button>\n          {onSave && !readOnly ? (\n            <Button type=\"button\" onClick={onSave} disabled={isSaving}>\n              {isSaving\n                ? t('workflows.mobile.saving')\n                : isExisting\n                  ? t('workflows.common.update')\n                  : t('workflows.common.save')}\n            </Button>\n          ) : null}\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nexport default DefinitionMetadataDrawer\n"],
+  "mappings": ";AA8GM,SACE,KADF;AA5GN,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,UAAU;AACnB,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,0BAA0B;AAuDnC,SAAS,gBAAgB,EAAE,IAAI,OAAO,MAAM,UAAU,OAAO,SAAS,GAAiB;AACrF,QAAM,aAAa,MAAM,OAA2B,IAAI;AAExD,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,QAAS;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS;AAGd,UAAM,QAAQ,sBAAsB,MAAM;AACxC,cAAQ,eAAe,EAAE,OAAO,QAAQ,CAAC;AACzC,cAAQ,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,IACvC,CAAC;AACD,WAAO,MAAM,qBAAqB,KAAK;AAAA,EACzC,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,IAAI,6BAA6B,EAAE;AAAA,MACnC,yBAAuB;AAAA,MACvB,UAAU;AAAA,MACV,mBAAiB,6BAA6B,EAAE;AAAA,MAChD,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,QACb;AAAA,8BAAC,QAAG,IAAI,6BAA6B,EAAE,UAAU,WAAU,yCACxD,iBACH;AAAA,UACA,oBAAC,OAAE,WAAU,sCAAsC,gBAAK;AAAA,WAC1D;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;AAYA,SAAS,cAAc,EAAE,SAAS,OAAO,UAAU,MAAM,WAAW,SAAS,GAAe;AAC1F,SACE,qBAAC,SAAI,WAAW,GAAG,uBAAuB,SAAS,GACjD;AAAA,yBAAC,SAAM,SAAkB,WAAU,WAChC;AAAA;AAAA,MACA,WAAW,OAAO;AAAA,OACrB;AAAA,IACC;AAAA,IACA,OAAO,oBAAC,OAAE,WAAU,iCAAiC,gBAAK,IAAO;AAAA,KACpE;AAEJ;AAYO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAkC;AAChC,QAAM,IAAI,KAAK;AAEf,QAAM;AAAA,IACJ;AAAA,IAAY;AAAA,IAAc;AAAA,IAAa;AAAA,IACvC;AAAA,IAAS;AAAA,IAAU;AAAA,IAAM;AAAA,IACzB;AAAA,IAAe;AAAA,IACf;AAAA,IAAe;AAAA,IAAe;AAAA,EAChC,IAAI;AAEJ,QAAM;AAAA,IACJ;AAAA,IAAe;AAAA,IAAiB;AAAA,IAAgB;AAAA,IAChD;AAAA,IAAY;AAAA,IAAa;AAAA,IAAS;AAAA,IAClC;AAAA,IAAkB;AAAA,IAClB;AAAA,IAAkB;AAAA,IAAkB;AAAA,EACtC,IAAI;AAEJ,QAAM,aAAa,CAAC,CAAC;AACrB,QAAM,aAAa,aAAa,EAAE,mDAAmD,IAAI;AAEzF,QAAM,aAAa,MAAM,OAA8B,IAAI;AAE3D,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,UAA+C;AAC9C,UAAI,EAAE,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ,QAAS;AAChE,UAAI,CAAC,UAAU,YAAY,SAAU;AAMrC,YAAM,SAAS,MAAM;AACrB,UAAI,EAAE,kBAAkB,SAAS,CAAC,WAAW,SAAS,SAAS,MAAM,EAAG;AACxE,YAAM,eAAe;AACrB,aAAO;AAAA,IACT;AAAA,IACA,CAAC,QAAQ,UAAU,QAAQ;AAAA,EAC7B;AAEA,SACE,oBAAC,UAAO,MAAY,cAClB;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MAIL,WAAU;AAAA,MACV,WAAW;AAAA,MACX,gBAAgB,EAAE,uCAAuC;AAAA,MAEzD;AAAA,6BAAC,gBACC;AAAA,8BAAC,eAAa,YAAE,uCAAuC,GAAE;AAAA,UACzD,oBAAC,qBAAmB,YAAE,6CAA6C,GAAE;AAAA,WACvE;AAAA,QAEA,oBAAC,cACC,+BAAC,cAAS,UAAU,UAAU,WAAU,uBACtC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,SAAS,iBAAiB;AAAA,cAC1B,OAAO,EAAE,mDAAmD;AAAA,cAC5D,MAAM,EAAE,uDAAuD;AAAA,cAE/D,+BAAC,SAAI,WAAU,yCACb;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,EAAE,2BAA2B;AAAA,oBACpC,UAAQ;AAAA,oBACR,MAAM;AAAA,oBAEN;AAAA,sBAAC;AAAA;AAAA,wBACC,IAAG;AAAA,wBACH,OAAO;AAAA,wBACP,UAAU,CAAC,UAAU,cAAc,MAAM,OAAO,KAAK;AAAA,wBACrD,aAAa,EAAE,wCAAwC;AAAA,wBACvD,UAAU;AAAA;AAAA,oBACZ;AAAA;AAAA,gBACF;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,EAAE,wBAAwB;AAAA,oBACjC,UAAQ;AAAA,oBACR,MAAM;AAAA,oBAEN;AAAA,sBAAC;AAAA;AAAA,wBACC,IAAG;AAAA,wBACH,MAAK;AAAA,wBACL,OAAO;AAAA,wBACP,UAAU,CAAC,UAAU,WAAW,SAAS,MAAM,OAAO,OAAO,EAAE,KAAK,CAAC;AAAA,wBACrE,KAAK;AAAA,wBACL,UAAU;AAAA;AAAA,oBACZ;AAAA;AAAA,gBACF;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,EAAE,6BAA6B;AAAA,oBACtC,UAAQ;AAAA,oBACR,WAAU;AAAA,oBAEV;AAAA,sBAAC;AAAA;AAAA,wBACC,IAAG;AAAA,wBACH,OAAO;AAAA,wBACP,UAAU,CAAC,UAAU,gBAAgB,MAAM,OAAO,KAAK;AAAA,wBACvD,aAAa,EAAE,0CAA0C;AAAA;AAAA,oBAC3D;AAAA;AAAA,gBACF;AAAA,gBAEA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,EAAE,4BAA4B;AAAA,oBACrC,WAAU;AAAA,oBAEV;AAAA,sBAAC;AAAA;AAAA,wBACC,IAAG;AAAA,wBACH,OAAO;AAAA,wBACP,UAAU,CAAC,UAAU,eAAe,MAAM,OAAO,KAAK;AAAA,wBACtD,aAAa,EAAE,yCAAyC;AAAA,wBACxD,YAAU;AAAA,wBACV,SAAS;AAAA,wBACT,MAAM;AAAA;AAAA,oBACR;AAAA;AAAA,gBACF;AAAA,iBACF;AAAA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,SAAS,iBAAiB;AAAA,cAC1B,OAAO,EAAE,uDAAuD;AAAA,cAChE,MAAM,EAAE,2DAA2D;AAAA,cAEnE,+BAAC,SAAI,WAAU,yCACb;AAAA,oCAAC,iBAAc,SAAQ,QAAO,OAAO,EAAE,qBAAqB,GAC1D,8BAAC,sBAAmB,IAAG,QAAO,OAAO,MAAM,UAAU,SAAS,UAAU,UAAU,GACpF;AAAA,gBAEA,oBAAC,iBAAc,SAAQ,YAAW,OAAO,EAAE,yBAAyB,GAClE;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAG;AAAA,oBACH,OAAO;AAAA,oBACP,UAAU,CAAC,UAAU,YAAY,MAAM,OAAO,KAAK;AAAA,oBACnD,aAAa,EAAE,sCAAsC;AAAA;AAAA,gBACvD,GACF;AAAA,gBAEA,oBAAC,iBAAc,OAAO,EAAE,qBAAqB,GAAG,WAAU,iBACxD;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP,UAAU;AAAA,oBACV,aAAa,EAAE,kCAAkC;AAAA;AAAA,gBACnD,GACF;AAAA,iBACF;AAAA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,SAAS,iBAAiB;AAAA,cAC1B,OAAO,EAAE,uDAAuD;AAAA,cAChE,MAAM,EAAE,2DAA2D;AAAA,cAEnE,+BAAC,SAAI,WAAU,yCACb;AAAA,oCAAC,iBAAc,OAAO,EAAE,kBAAkB,SAAS,GACjD,+BAAC,SAAI,WAAU,+BACb;AAAA,sCAAC,UAAO,IAAG,WAAU,SAAS,SAAS,iBAAiB,YAAY;AAAA,kBACpE,oBAAC,SAAM,SAAQ,WAAU,WAAU,sCAChC,oBAAU,EAAE,aAAa,IAAI,IAAI,EAAE,cAAc,KAAK,GACzD;AAAA,mBACF,GACF;AAAA,gBAEA,oBAAC,iBAAc,SAAQ,iBAAgB,OAAO,EAAE,8BAA8B,GAC5E;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAG;AAAA,oBACH,MAAK;AAAA,oBACL,OAAO;AAAA,oBACP,UAAU,CAAC,UAAU,iBAAiB,MAAM,OAAO,KAAK;AAAA;AAAA,gBAC1D,GACF;AAAA,gBAEA,oBAAC,iBAAc,SAAQ,eAAc,OAAO,EAAE,4BAA4B,GACxE;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAG;AAAA,oBACH,MAAK;AAAA,oBACL,OAAO;AAAA,oBACP,UAAU,CAAC,UAAU,eAAe,MAAM,OAAO,KAAK;AAAA;AAAA,gBACxD,GACF;AAAA,iBACF;AAAA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,SAAS,iBAAiB;AAAA,cAC1B,OAAO,EAAE,iDAAiD;AAAA,cAC1D,MAAM,EAAE,qDAAqD;AAAA,cAE7D,8BAAC,SAAI,WAAU,aACZ,6BACC,oBAAC,uBAAoB,OAAO,eAAe,UAAU,kBAAkB,IACrE,MACN;AAAA;AAAA,UACF;AAAA,UAEC,oBAAoB,kBACnB;AAAA,YAAC;AAAA;AAAA,cACC,IAAG;AAAA,cACH,SAAS,iBAAiB;AAAA,cAC1B,OAAO,EAAE,kDAAkD;AAAA,cAC3D,MAAM,EAAE,sDAAsD;AAAA,cAE9D,+BAAC,SAAI,WAAU,aACZ;AAAA,mCACC;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,OAAO,EAAE,8CAA8C,mBAAmB;AAAA,oBAC1E,MAAM;AAAA,sBACJ;AAAA,sBACA;AAAA,oBACF;AAAA,oBAEA;AAAA,sBAAC;AAAA;AAAA,wBACC,OAAO,iBAAiB;AAAA,wBACxB,eAAe,CAAC,SAAS,iBAAiB,IAAiC;AAAA,wBAE3E;AAAA;AAAA,4BAAC;AAAA;AAAA,8BACC,IAAG;AAAA,8BACH,cAAY,EAAE,8CAA8C,mBAAmB;AAAA,8BAE/E,8BAAC,eAAY;AAAA;AAAA,0BACf;AAAA,0BACA,qBAAC,iBACC;AAAA,gDAAC,cAAW,OAAM,UACf,YAAE,+CAA+C,6BAAwB,GAC5E;AAAA,4BACA,oBAAC,cAAW,OAAM,WACf,YAAE,gDAAgD,yCAAoC,GACzF;AAAA,6BACF;AAAA;AAAA;AAAA,oBACF;AAAA;AAAA,gBACF,IACE;AAAA,gBAEH,kBACC;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,gBAAgB;AAAA,oBACvB,UAAU,CAAC,SAAS,gBAAgB,QAAQ,MAAS;AAAA,oBACrD,aAAa;AAAA;AAAA,gBACf,IACE;AAAA,iBACN;AAAA;AAAA,UACF,IACE;AAAA,WACN,GACF;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,SACE,WACE,qBAAC,UAAK,WAAU,kEACd;AAAA,kCAAC,QAAK,WAAU,YAAW,eAAY,QAAO;AAAA,cAC7C,EAAE,gDAAgD;AAAA,eACrD,IACE,SACF,oBAAC,UAAK,WAAU,iCACb,YAAE,0CAA0C,GAC/C,IACE;AAAA,YAGN;AAAA,kCAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,SAAS,MAAM,aAAa,KAAK,GACtE,YAAE,uCAAuC,GAC5C;AAAA,cACC,UAAU,CAAC,WACV,oBAAC,UAAO,MAAK,UAAS,SAAS,QAAQ,UAAU,UAC9C,qBACG,EAAE,yBAAyB,IAC3B,aACE,EAAE,yBAAyB,IAC3B,EAAE,uBAAuB,GACjC,IACE;AAAA;AAAA;AAAA,QACN;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,mCAAQ;",
+  "names": []
+}

package/dist/modules/workflows/components/DefinitionMetricsCells.js

@@ -0,0 +1,132 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import { formatDurationMs } from "../lib/run-duration.js";
+import {
+  METRIC_TONE_CLASS,
+  formatRate,
+  rateTone
+} from "../lib/metrics/metrics-display.js";
+const METRICS_BATCH_MAX = 50;
+function useDefinitionMetrics(workflowIds, window) {
+  const ids = React.useMemo(
+    () => Array.from(new Set(workflowIds)).sort((left, right) => left.localeCompare(right)).slice(0, METRICS_BATCH_MAX),
+    [workflowIds]
+  );
+  const query = useQuery({
+    queryKey: ["workflow-definition-metrics", window, ids],
+    enabled: ids.length > 0,
+    queryFn: async () => {
+      const params = new URLSearchParams({ window, workflowIds: ids.join(",") });
+      const result = await apiCall(`/api/workflows/metrics/definitions?${params.toString()}`);
+      if (!result.ok || !result.result || !Array.isArray(result.result.data)) {
+        throw new Error("[internal] workflow definition metrics request failed");
+      }
+      return result.result;
+    }
+  });
+  const byWorkflowId = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const item of query.data?.data ?? []) map.set(item.workflowId, item);
+    return map;
+  }, [query.data]);
+  return { byWorkflowId, isLoading: query.isLoading && ids.length > 0, failed: query.isError };
+}
+function MetricPlaceholder({ loading }) {
+  const t = useT();
+  if (loading) return /* @__PURE__ */ jsx(Spinner, { className: "h-3 w-3", "aria-label": t("common.loading") });
+  return /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", "aria-label": t("workflows.metrics.noData"), children: "\u2014" });
+}
+function TonedValue({
+  value,
+  tone,
+  toneLabel,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: `text-sm font-medium ${METRIC_TONE_CLASS[tone]}`, title, children: [
+    value,
+    /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+      " \u2014 ",
+      toneLabel
+    ] })
+  ] });
+}
+function RunsCell({ item, loading }) {
+  const t = useT();
+  if (!item) return /* @__PURE__ */ jsx(MetricPlaceholder, { loading });
+  const { runsStarted, runsTerminal } = item.metrics;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "text-sm",
+      title: t("workflows.metrics.runsHint", { started: runsStarted, terminal: runsTerminal }),
+      children: runsStarted
+    }
+  );
+}
+function SuccessRateCell({ item, loading }) {
+  const t = useT();
+  if (!item) return /* @__PURE__ */ jsx(MetricPlaceholder, { loading });
+  const { successRate, runsTerminal, runsFailed } = item.metrics;
+  const label = formatRate(successRate);
+  if (label === null) {
+    return /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", title: t("workflows.metrics.noTerminalRuns"), children: "\u2014" });
+  }
+  const tone = rateTone(successRate);
+  return /* @__PURE__ */ jsx(
+    TonedValue,
+    {
+      value: label,
+      tone,
+      toneLabel: t(`workflows.metrics.tone.${tone}`),
+      title: t("workflows.metrics.successHint", { terminal: runsTerminal, failed: runsFailed })
+    }
+  );
+}
+function P95DurationCell({ item, loading }) {
+  const t = useT();
+  if (!item) return /* @__PURE__ */ jsx(MetricPlaceholder, { loading });
+  const { p95DurationMs, durationSampleCount } = item.metrics;
+  if (p95DurationMs === null) {
+    return /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", title: t("workflows.metrics.noDurationSample"), children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "text-sm tabular-nums",
+      title: t("workflows.metrics.p95Hint", { samples: durationSampleCount }),
+      children: formatDurationMs(p95DurationMs)
+    }
+  );
+}
+function TaskSlaCell({ item, loading }) {
+  const t = useT();
+  if (!item) return /* @__PURE__ */ jsx(MetricPlaceholder, { loading });
+  const { taskSlaHitRate, tasksWithDeadline, tasksMetDeadline } = item.metrics;
+  const label = formatRate(taskSlaHitRate);
+  if (label === null) {
+    return /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", title: t("workflows.metrics.noTaskDeadlines"), children: "\u2014" });
+  }
+  const tone = rateTone(taskSlaHitRate);
+  return /* @__PURE__ */ jsx(
+    TonedValue,
+    {
+      value: label,
+      tone,
+      toneLabel: t(`workflows.metrics.tone.${tone}`),
+      title: t("workflows.metrics.slaHint", { met: tasksMetDeadline, total: tasksWithDeadline })
+    }
+  );
+}
+export {
+  P95DurationCell,
+  RunsCell,
+  SuccessRateCell,
+  TaskSlaCell,
+  useDefinitionMetrics
+};
+//# sourceMappingURL=DefinitionMetricsCells.js.map

package/dist/modules/workflows/components/DefinitionMetricsCells.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/DefinitionMetricsCells.tsx"],
+  "sourcesContent": ["\"use client\"\n\n/**\n * Per-definition KPI cells for the definitions list (spec \u00A78.5).\n *\n * The list already has one row per definition, so the KPIs belong in columns\n * rather than on a separate dashboard: an operator asking \"which of my\n * processes is unhealthy\" is scanning this list, and sending them to a second\n * page to answer it is the split \u00A78.5 exists to avoid.\n *\n * A cell renders nothing but the value, its unit and a tone. Colour is never\n * the only carrier \u2014 the number IS the label, and each toned cell also names\n * its state to a screen reader.\n */\n\nimport * as React from 'react'\nimport { useQuery } from '@tanstack/react-query'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\nimport { formatDurationMs } from '../lib/run-duration'\nimport {\n  METRIC_TONE_CLASS,\n  formatRate,\n  rateTone,\n  type MetricTone,\n} from '../lib/metrics/metrics-display'\nimport type { WorkflowRollupWindowKey } from '../lib/metrics/definition-metrics'\n\nexport type DefinitionMetricsPayload = {\n  runsStarted: number\n  runsTerminal: number\n  runsCompleted: number\n  runsFailed: number\n  runsCancelled: number\n  successRate: number | null\n  durationSampleCount: number\n  avgDurationMs: number | null\n  p50DurationMs: number | null\n  p95DurationMs: number | null\n  tasksWithDeadline: number\n  tasksMetDeadline: number\n  taskSlaHitRate: number | null\n}\n\nexport type DefinitionMetricsItem = {\n  workflowId: string\n  window: WorkflowRollupWindowKey\n  windowStart: string\n  windowEnd: string\n  computedAt: string\n  source: 'rollup' | 'live'\n  metrics: DefinitionMetricsPayload\n}\n\ntype MetricsResponse = { data: DefinitionMetricsItem[] }\n\n/** Matches the read route's own cap, so a page never sends a request it refuses. */\nconst METRICS_BATCH_MAX = 50\n\n/**\n * Fetch KPIs for the workflow ids currently on screen, in ONE request.\n *\n * Keyed on the sorted id list so paging refetches and re-rendering does not.\n * Failures are swallowed into `undefined`: a KPI column that cannot load must\n * degrade to a dash, never take the definitions list down with it.\n */\nexport function useDefinitionMetrics(\n  workflowIds: string[],\n  window: WorkflowRollupWindowKey,\n): { byWorkflowId: Map<string, DefinitionMetricsItem>; isLoading: boolean; failed: boolean } {\n  const ids = React.useMemo(\n    () =>\n      Array.from(new Set(workflowIds))\n        .sort((left, right) => left.localeCompare(right))\n        .slice(0, METRICS_BATCH_MAX),\n    [workflowIds],\n  )\n\n  const query = useQuery({\n    queryKey: ['workflow-definition-metrics', window, ids],\n    enabled: ids.length > 0,\n    queryFn: async (): Promise<MetricsResponse> => {\n      const params = new URLSearchParams({ window, workflowIds: ids.join(',') })\n      const result = await apiCall<MetricsResponse>(`/api/workflows/metrics/definitions?${params.toString()}`)\n      if (!result.ok || !result.result || !Array.isArray(result.result.data)) {\n        throw new Error('[internal] workflow definition metrics request failed')\n      }\n      return result.result\n    },\n  })\n\n  const byWorkflowId = React.useMemo(() => {\n    const map = new Map<string, DefinitionMetricsItem>()\n    for (const item of query.data?.data ?? []) map.set(item.workflowId, item)\n    return map\n  }, [query.data])\n\n  return { byWorkflowId, isLoading: query.isLoading && ids.length > 0, failed: query.isError }\n}\n\nfunction MetricPlaceholder({ loading }: { loading: boolean }) {\n  const t = useT()\n  if (loading) return <Spinner className=\"h-3 w-3\" aria-label={t('common.loading')} />\n  return (\n    <span className=\"text-sm text-muted-foreground\" aria-label={t('workflows.metrics.noData')}>\n      \u2014\n    </span>\n  )\n}\n\nfunction TonedValue({\n  value,\n  tone,\n  toneLabel,\n  title,\n}: {\n  value: string\n  tone: MetricTone\n  toneLabel: string\n  title?: string\n}) {\n  return (\n    <span className={`text-sm font-medium ${METRIC_TONE_CLASS[tone]}`} title={title}>\n      {value}\n      <span className=\"sr-only\"> \u2014 {toneLabel}</span>\n    </span>\n  )\n}\n\nexport function RunsCell({ item, loading }: { item?: DefinitionMetricsItem; loading: boolean }) {\n  const t = useT()\n  if (!item) return <MetricPlaceholder loading={loading} />\n  const { runsStarted, runsTerminal } = item.metrics\n  return (\n    <span\n      className=\"text-sm\"\n      title={t('workflows.metrics.runsHint', { started: runsStarted, terminal: runsTerminal })}\n    >\n      {runsStarted}\n    </span>\n  )\n}\n\nexport function SuccessRateCell({ item, loading }: { item?: DefinitionMetricsItem; loading: boolean }) {\n  const t = useT()\n  if (!item) return <MetricPlaceholder loading={loading} />\n  const { successRate, runsTerminal, runsFailed } = item.metrics\n  const label = formatRate(successRate)\n  if (label === null) {\n    return (\n      <span className=\"text-sm text-muted-foreground\" title={t('workflows.metrics.noTerminalRuns')}>\n        \u2014\n      </span>\n    )\n  }\n  const tone = rateTone(successRate)\n  return (\n    <TonedValue\n      value={label}\n      tone={tone}\n      toneLabel={t(`workflows.metrics.tone.${tone}`)}\n      title={t('workflows.metrics.successHint', { terminal: runsTerminal, failed: runsFailed })}\n    />\n  )\n}\n\nexport function P95DurationCell({ item, loading }: { item?: DefinitionMetricsItem; loading: boolean }) {\n  const t = useT()\n  if (!item) return <MetricPlaceholder loading={loading} />\n  const { p95DurationMs, durationSampleCount } = item.metrics\n  if (p95DurationMs === null) {\n    return (\n      <span className=\"text-sm text-muted-foreground\" title={t('workflows.metrics.noDurationSample')}>\n        \u2014\n      </span>\n    )\n  }\n  return (\n    <span\n      className=\"text-sm tabular-nums\"\n      title={t('workflows.metrics.p95Hint', { samples: durationSampleCount })}\n    >\n      {formatDurationMs(p95DurationMs)}\n    </span>\n  )\n}\n\nexport function TaskSlaCell({ item, loading }: { item?: DefinitionMetricsItem; loading: boolean }) {\n  const t = useT()\n  if (!item) return <MetricPlaceholder loading={loading} />\n  const { taskSlaHitRate, tasksWithDeadline, tasksMetDeadline } = item.metrics\n  const label = formatRate(taskSlaHitRate)\n  if (label === null) {\n    // \"No task in this window carried a deadline\" is not a 0% hit rate, and a\n    // red 0% would send an operator looking for an SLA that was never authored.\n    return (\n      <span className=\"text-sm text-muted-foreground\" title={t('workflows.metrics.noTaskDeadlines')}>\n        \u2014\n      </span>\n    )\n  }\n  const tone = rateTone(taskSlaHitRate)\n  return (\n    <TonedValue\n      value={label}\n      tone={tone}\n      toneLabel={t(`workflows.metrics.tone.${tone}`)}\n      title={t('workflows.metrics.slaHint', { met: tasksMetDeadline, total: tasksWithDeadline })}\n    />\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}