@open-mercato/core 0.7.1-develop.7193.1.910a5b0a1e → 0.7.1-develop.7195.1.b5efd1d51a

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

@@ -0,0 +1,278 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CircleAlert, Sparkles, TriangleAlert } from "lucide-react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle
+} from "@open-mercato/ui/primitives/drawer";
+import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
+import { Spinner } from "@open-mercato/ui/primitives/spinner";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { WORKFLOW_DRAFT_PROMPT_MAX_LENGTH } from "../lib/ai-authoring.js";
+function WorkflowAiDraftDialog({
+  open,
+  onOpenChange,
+  onApply,
+  canvasHasContent
+}) {
+  const t = useT();
+  const [prompt, setPrompt] = React.useState("");
+  const [state, setState] = React.useState({ kind: "idle" });
+  React.useEffect(() => {
+    if (open) return;
+    setState({ kind: "idle" });
+  }, [open]);
+  const refuse = React.useCallback((title, messages) => {
+    setState({ kind: "refused", title, messages });
+  }, []);
+  const handleGenerate = React.useCallback(async () => {
+    const trimmed = prompt.trim();
+    if (!trimmed) return;
+    setState({ kind: "generating" });
+    let response;
+    try {
+      response = await apiCall("/api/workflows/definitions/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt: trimmed })
+      });
+    } catch {
+      refuse(t("workflows.aiDraft.failedTitle", "The workflow could not be generated"), [
+        t(
+          "workflows.aiDraft.networkError",
+          "The request did not reach the server. Nothing on the canvas was changed."
+        )
+      ]);
+      return;
+    }
+    if (response.status === 403) {
+      refuse(t("workflows.aiDraft.notAllowedTitle", "Not allowed"), [
+        t(
+          "workflows.aiDraft.notAllowed",
+          "You need permission to create workflow definitions to use AI authoring."
+        )
+      ]);
+      return;
+    }
+    const result = response.result;
+    if (!response.ok || !result) {
+      refuse(t("workflows.aiDraft.failedTitle", "The workflow could not be generated"), [
+        result?.error ?? t("workflows.aiDraft.serverError", "The server could not generate a draft. Nothing on the canvas was changed.")
+      ]);
+      return;
+    }
+    if (result.ok !== true) {
+      if (result.reason === "unavailable") {
+        refuse(t("workflows.aiDraft.unavailableTitle", "AI authoring is not available"), [
+          t(
+            "workflows.aiDraft.unavailable",
+            "No AI provider is configured for this installation, so nothing was generated and the canvas is unchanged. Ask an administrator to configure an AI provider."
+          )
+        ]);
+        return;
+      }
+      if (result.reason === "failed") {
+        refuse(t("workflows.aiDraft.failedTitle", "The workflow could not be generated"), [
+          result.message ?? t("workflows.aiDraft.modelError", "The AI provider returned an error. Nothing on the canvas was changed.")
+        ]);
+        return;
+      }
+      refuse(t("workflows.aiDraft.notAWorkflowTitle", "The generated result is not a workflow"), [
+        t(
+          "workflows.aiDraft.notAWorkflow",
+          "The model produced something that does not describe a workflow, so nothing was applied. Try rephrasing the request."
+        ),
+        // Saying the errors were fed back distinguishes "the model never got a
+        // chance" from "it got the errors twice and still could not fix them" —
+        // which is the difference between rephrasing and giving up.
+        ...result.repairAttempts ? [
+          t("workflows.aiDraft.repairAttempted", void 0, {
+            count: result.repairAttempts
+          })
+        ] : [],
+        ...result.messages ?? []
+      ]);
+      return;
+    }
+    if (!result.definition) {
+      refuse(t("workflows.aiDraft.failedTitle", "The workflow could not be generated"), [
+        t("workflows.aiDraft.serverError", "The server could not generate a draft. Nothing on the canvas was changed.")
+      ]);
+      return;
+    }
+    setState({
+      kind: "ready",
+      prompt: trimmed,
+      summary: result.summary ?? "",
+      definition: result.definition,
+      problems: result.problems ?? [],
+      errorCount: result.errorCount ?? 0,
+      warningCount: result.warningCount ?? 0
+    });
+  }, [prompt, refuse, t]);
+  const handleApply = React.useCallback(() => {
+    if (state.kind !== "ready") return;
+    const refusal = onApply({ definition: state.definition, prompt: state.prompt });
+    if (refusal) {
+      refuse(t("workflows.aiDraft.cannotApplyTitle", "This draft cannot be applied"), refusal.messages);
+      return;
+    }
+    onOpenChange(false);
+  }, [state, onApply, onOpenChange, refuse, t]);
+  const isGenerating = state.kind === "generating";
+  return /* @__PURE__ */ jsx(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs(
+    DrawerContent,
+    {
+      "data-testid": "workflow-ai-draft-drawer",
+      className: "w-full max-w-none sm:w-3/5",
+      closeAriaLabel: t("workflows.aiDraft.close", "Close AI draft panel"),
+      onKeyDown: (event) => {
+        if (!(event.metaKey || event.ctrlKey) || event.key !== "Enter") return;
+        event.preventDefault();
+        if (state.kind === "ready") handleApply();
+        else if (!isGenerating) void handleGenerate();
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+          /* @__PURE__ */ jsx(DrawerTitle, { children: t("workflows.aiDraft.title", "Draft a workflow with AI") }),
+          /* @__PURE__ */ jsx(DrawerDescription, { children: t(
+            "workflows.aiDraft.description",
+            "Describe the process in plain language. The draft is authored against this installation's real activities, commands and events, lands on the canvas as a single undoable step, and is never saved or enabled for you."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(DrawerBody, { className: "flex flex-col gap-4 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "label",
+              {
+                htmlFor: "workflow-ai-draft-prompt",
+                className: "mb-1.5 block text-xs font-semibold uppercase text-muted-foreground",
+                children: t("workflows.aiDraft.promptLabel", "What should this workflow do?")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                id: "workflow-ai-draft-prompt",
+                "data-testid": "workflow-ai-draft-prompt",
+                value: prompt,
+                maxLength: WORKFLOW_DRAFT_PROMPT_MAX_LENGTH,
+                disabled: isGenerating,
+                onChange: (event) => setPrompt(event.target.value),
+                placeholder: t(
+                  "workflows.aiDraft.promptPlaceholder",
+                  "When a refund is requested above 500, ask a manager to approve it, then notify the customer."
+                ),
+                className: "min-h-32 w-full resize-y rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              }
+            )
+          ] }),
+          canvasHasContent && /* @__PURE__ */ jsxs(Alert, { variant: "warning", children: [
+            /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.aiDraft.replaceTitle", "Applying replaces the current canvas") }),
+            /* @__PURE__ */ jsx(AlertDescription, { children: t(
+              "workflows.aiDraft.replaceBody",
+              "Every step and route on the canvas is replaced. It is one undo away."
+            ) })
+          ] }),
+          state.kind === "refused" && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", "data-testid": "workflow-ai-draft-refusal", children: [
+            /* @__PURE__ */ jsx(AlertTitle, { children: state.title }),
+            /* @__PURE__ */ jsx(AlertDescription, { children: state.messages.map((message) => /* @__PURE__ */ jsx("span", { className: "block", children: message }, message)) })
+          ] }),
+          state.kind === "ready" && /* @__PURE__ */ jsxs(
+            "section",
+            {
+              "aria-labelledby": "workflow-ai-draft-review",
+              "data-testid": "workflow-ai-draft-review",
+              className: "rounded-lg border border-border p-3",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    id: "workflow-ai-draft-review",
+                    className: "mb-2 text-xs font-semibold uppercase text-muted-foreground",
+                    children: t("workflows.aiDraft.reviewTitle", "Review before applying")
+                  }
+                ),
+                state.summary && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm text-foreground", children: state.summary }),
+                /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", "data-testid": "workflow-ai-draft-counts", children: [
+                  t("workflows.aiDraft.counts", "{steps} step(s), {routes} route(s)", {
+                    steps: Array.isArray(state.definition.steps) ? state.definition.steps.length : 0,
+                    routes: Array.isArray(state.definition.transitions) ? state.definition.transitions.length : 0
+                  }),
+                  " \xB7 ",
+                  t("workflows.aiDraft.problemCounts", "{errors} error(s), {warnings} warning(s)", {
+                    errors: state.errorCount,
+                    warnings: state.warningCount
+                  })
+                ] }),
+                state.problems.length > 0 && /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    "data-testid": "workflow-ai-draft-problems",
+                    className: "mt-2 max-h-40 space-y-1 overflow-auto text-sm",
+                    children: state.problems.map((issue) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", children: [
+                      issue.severity === "error" ? /* @__PURE__ */ jsx(
+                        CircleAlert,
+                        {
+                          className: "mt-0.5 h-4 w-4 shrink-0 text-status-error-text",
+                          "aria-hidden": "true"
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        TriangleAlert,
+                        {
+                          className: "mt-0.5 h-4 w-4 shrink-0 text-status-warning-text",
+                          "aria-hidden": "true"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: issue.severity === "error" ? t("workflows.visualEditor.problems.severityError", "Error") : t("workflows.visualEditor.problems.severityWarning", "Warning") }),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-foreground", children: issue.message })
+                    ] }, issue.id))
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(DrawerFooter, { children: [
+          /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: t("common.cancel", "Cancel") }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              onClick: () => {
+                void handleGenerate();
+              },
+              disabled: isGenerating || prompt.trim().length === 0,
+              "data-testid": "workflow-ai-draft-generate",
+              children: [
+                isGenerating ? /* @__PURE__ */ jsx(Spinner, { className: "mr-1.5 h-4 w-4" }) : /* @__PURE__ */ jsx(Sparkles, { className: "mr-1.5 h-4 w-4", "aria-hidden": "true" }),
+                state.kind === "ready" ? t("workflows.aiDraft.regenerate", "Generate again") : t("workflows.aiDraft.generate", "Generate draft")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              onClick: handleApply,
+              disabled: state.kind !== "ready",
+              "data-testid": "workflow-ai-draft-apply",
+              children: t("workflows.aiDraft.apply", "Apply to canvas")
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  WorkflowAiDraftDialog
+};
+//# sourceMappingURL=WorkflowAiDraftDialog.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/WorkflowAiDraftDialog.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { CircleAlert, Sparkles, TriangleAlert } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n} from '@open-mercato/ui/primitives/drawer'\nimport { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { apiCall } from '@open-mercato/ui/backend/utils/apiCall'\nimport type { WorkflowValidationIssue } from '../lib/collect-validation-issues'\nimport { WORKFLOW_DRAFT_PROMPT_MAX_LENGTH } from '../lib/ai-authoring'\n\n/**\n * Prompt-to-draft (spec section 9).\n *\n * *\"natural language \u2192 draft definition generated against the real catalogs,\n * opened in the Studio with a Problems pass already run. Never auto-published.\"*\n *\n * The dialog owns the PROMPT and the REVIEW; the page owns the apply, the undo\n * checkpoint and the Problems pass, because those are document operations and\n * the document lives there. `onApply` returns a refusal when the draft cannot\n * be applied, so the same four escalating refusals a pasted definition faces\n * (`lib/code-view-apply.ts`) are what an AI-authored one faces, and a refused\n * draft leaves the canvas byte-identical.\n *\n * Every failure mode is STATED. A missing AI provider, a failed call and a\n * model that produced something that is not a workflow each render their own\n * message \u2014 a surface that quietly does nothing is this module's recurring bug,\n * so there is no path here that ends in silence.\n */\n\nexport type WorkflowAiDraftApplyRefusal = {\n  reason: 'parseError' | 'schemaError' | 'graphError'\n  messages: string[]\n}\n\nexport interface WorkflowAiDraftDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /**\n   * Apply the generated definition to the canvas. Returns `null` when it\n   * landed, or the refusal to render when the shared gate rejected it.\n   */\n  onApply: (input: {\n    definition: Record<string, unknown>\n    prompt: string\n  }) => WorkflowAiDraftApplyRefusal | null\n  /** True when the canvas already holds steps \u2014 applying replaces all of them. */\n  canvasHasContent: boolean\n}\n\ntype GenerateResponse = {\n  ok?: boolean\n  reason?: 'unavailable' | 'failed' | 'malformedResponse' | 'schemaError'\n  message?: string\n  messages?: string[]\n  summary?: string\n  definition?: Record<string, unknown>\n  problems?: WorkflowValidationIssue[]\n  errorCount?: number\n  warningCount?: number\n  /** How many times the server re-prompted the model with the validator errors. */\n  repairAttempts?: number\n  error?: string\n}\n\ntype DraftState =\n  | { kind: 'idle' }\n  | { kind: 'generating' }\n  | {\n      kind: 'ready'\n      prompt: string\n      summary: string\n      definition: Record<string, unknown>\n      problems: WorkflowValidationIssue[]\n      errorCount: number\n      warningCount: number\n    }\n  | { kind: 'refused'; title: string; messages: string[] }\n\nexport function WorkflowAiDraftDialog({\n  open,\n  onOpenChange,\n  onApply,\n  canvasHasContent,\n}: WorkflowAiDraftDialogProps) {\n  const t = useT()\n  const [prompt, setPrompt] = React.useState('')\n  const [state, setState] = React.useState<DraftState>({ kind: 'idle' })\n\n  // A dialog reopened onto the previous run's draft would offer an author a\n  // definition they cannot see the prompt for. Reset on close.\n  React.useEffect(() => {\n    if (open) return\n    setState({ kind: 'idle' })\n  }, [open])\n\n  const refuse = React.useCallback((title: string, messages: string[]) => {\n    setState({ kind: 'refused', title, messages })\n  }, [])\n\n  const handleGenerate = React.useCallback(async () => {\n    const trimmed = prompt.trim()\n    if (!trimmed) return\n    setState({ kind: 'generating' })\n    let response\n    try {\n      response = await apiCall<GenerateResponse>('/api/workflows/definitions/generate', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ prompt: trimmed }),\n      })\n    } catch {\n      refuse(t('workflows.aiDraft.failedTitle', 'The workflow could not be generated'), [\n        t(\n          'workflows.aiDraft.networkError',\n          'The request did not reach the server. Nothing on the canvas was changed.',\n        ),\n      ])\n      return\n    }\n\n    if (response.status === 403) {\n      refuse(t('workflows.aiDraft.notAllowedTitle', 'Not allowed'), [\n        t(\n          'workflows.aiDraft.notAllowed',\n          'You need permission to create workflow definitions to use AI authoring.',\n        ),\n      ])\n      return\n    }\n\n    const result = response.result\n    if (!response.ok || !result) {\n      refuse(t('workflows.aiDraft.failedTitle', 'The workflow could not be generated'), [\n        result?.error ??\n          t('workflows.aiDraft.serverError', 'The server could not generate a draft. Nothing on the canvas was changed.'),\n      ])\n      return\n    }\n\n    if (result.ok !== true) {\n      if (result.reason === 'unavailable') {\n        refuse(t('workflows.aiDraft.unavailableTitle', 'AI authoring is not available'), [\n          t(\n            'workflows.aiDraft.unavailable',\n            'No AI provider is configured for this installation, so nothing was generated and the canvas is unchanged. Ask an administrator to configure an AI provider.',\n          ),\n        ])\n        return\n      }\n      if (result.reason === 'failed') {\n        refuse(t('workflows.aiDraft.failedTitle', 'The workflow could not be generated'), [\n          result.message ??\n            t('workflows.aiDraft.modelError', 'The AI provider returned an error. Nothing on the canvas was changed.'),\n        ])\n        return\n      }\n      refuse(t('workflows.aiDraft.notAWorkflowTitle', 'The generated result is not a workflow'), [\n        t(\n          'workflows.aiDraft.notAWorkflow',\n          'The model produced something that does not describe a workflow, so nothing was applied. Try rephrasing the request.',\n        ),\n        // Saying the errors were fed back distinguishes \"the model never got a\n        // chance\" from \"it got the errors twice and still could not fix them\" \u2014\n        // which is the difference between rephrasing and giving up.\n        ...(result.repairAttempts\n          ? [\n              t('workflows.aiDraft.repairAttempted', undefined, {\n                count: result.repairAttempts,\n              }),\n            ]\n          : []),\n        ...(result.messages ?? []),\n      ])\n      return\n    }\n\n    if (!result.definition) {\n      refuse(t('workflows.aiDraft.failedTitle', 'The workflow could not be generated'), [\n        t('workflows.aiDraft.serverError', 'The server could not generate a draft. Nothing on the canvas was changed.'),\n      ])\n      return\n    }\n\n    setState({\n      kind: 'ready',\n      prompt: trimmed,\n      summary: result.summary ?? '',\n      definition: result.definition,\n      problems: result.problems ?? [],\n      errorCount: result.errorCount ?? 0,\n      warningCount: result.warningCount ?? 0,\n    })\n  }, [prompt, refuse, t])\n\n  const handleApply = React.useCallback(() => {\n    if (state.kind !== 'ready') return\n    const refusal = onApply({ definition: state.definition, prompt: state.prompt })\n    if (refusal) {\n      refuse(t('workflows.aiDraft.cannotApplyTitle', 'This draft cannot be applied'), refusal.messages)\n      return\n    }\n    onOpenChange(false)\n  }, [state, onApply, onOpenChange, refuse, t])\n\n  const isGenerating = state.kind === 'generating'\n\n  return (\n    <Drawer open={open} onOpenChange={onOpenChange}>\n      <DrawerContent\n        data-testid=\"workflow-ai-draft-drawer\"\n        className=\"w-full max-w-none sm:w-3/5\"\n        closeAriaLabel={t('workflows.aiDraft.close', 'Close AI draft panel')}\n        onKeyDown={(event) => {\n          if (!(event.metaKey || event.ctrlKey) || event.key !== 'Enter') return\n          event.preventDefault()\n          if (state.kind === 'ready') handleApply()\n          else if (!isGenerating) void handleGenerate()\n        }}\n      >\n        <DrawerHeader>\n          <DrawerTitle>{t('workflows.aiDraft.title', 'Draft a workflow with AI')}</DrawerTitle>\n          <DrawerDescription>\n            {t(\n              'workflows.aiDraft.description',\n              'Describe the process in plain language. The draft is authored against this installation\\'s real activities, commands and events, lands on the canvas as a single undoable step, and is never saved or enabled for you.',\n            )}\n          </DrawerDescription>\n        </DrawerHeader>\n\n        <DrawerBody className=\"flex flex-col gap-4 py-2\">\n          <div>\n            <label\n              htmlFor=\"workflow-ai-draft-prompt\"\n              className=\"mb-1.5 block text-xs font-semibold uppercase text-muted-foreground\"\n            >\n              {t('workflows.aiDraft.promptLabel', 'What should this workflow do?')}\n            </label>\n            <textarea\n              id=\"workflow-ai-draft-prompt\"\n              data-testid=\"workflow-ai-draft-prompt\"\n              value={prompt}\n              maxLength={WORKFLOW_DRAFT_PROMPT_MAX_LENGTH}\n              disabled={isGenerating}\n              onChange={(event) => setPrompt(event.target.value)}\n              placeholder={t(\n                'workflows.aiDraft.promptPlaceholder',\n                'When a refund is requested above 500, ask a manager to approve it, then notify the customer.',\n              )}\n              className=\"min-h-32 w-full resize-y rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n            />\n          </div>\n\n          {/* The Alerts below pass no icon child: `Alert` renders its own\n              status icon, and supplying one would draw it twice. */}\n          {canvasHasContent && (\n            <Alert variant=\"warning\">\n              <AlertTitle>\n                {t('workflows.aiDraft.replaceTitle', 'Applying replaces the current canvas')}\n              </AlertTitle>\n              <AlertDescription>\n                {t(\n                  'workflows.aiDraft.replaceBody',\n                  'Every step and route on the canvas is replaced. It is one undo away.',\n                )}\n              </AlertDescription>\n            </Alert>\n          )}\n\n          {state.kind === 'refused' && (\n            <Alert variant=\"destructive\" data-testid=\"workflow-ai-draft-refusal\">\n              <AlertTitle>{state.title}</AlertTitle>\n              <AlertDescription>\n                {/* Rendered as blocks rather than a list: `AlertDescription`\n                    is a `<p>`, and a nested `<ul>` is invalid HTML. */}\n                {state.messages.map((message) => (\n                  <span key={message} className=\"block\">\n                    {message}\n                  </span>\n                ))}\n              </AlertDescription>\n            </Alert>\n          )}\n\n          {state.kind === 'ready' && (\n            <section\n              aria-labelledby=\"workflow-ai-draft-review\"\n              data-testid=\"workflow-ai-draft-review\"\n              className=\"rounded-lg border border-border p-3\"\n            >\n              <h3\n                id=\"workflow-ai-draft-review\"\n                className=\"mb-2 text-xs font-semibold uppercase text-muted-foreground\"\n              >\n                {t('workflows.aiDraft.reviewTitle', 'Review before applying')}\n              </h3>\n              {state.summary && <p className=\"mb-2 text-sm text-foreground\">{state.summary}</p>}\n              <p className=\"text-sm text-muted-foreground\" data-testid=\"workflow-ai-draft-counts\">\n                {t('workflows.aiDraft.counts', '{steps} step(s), {routes} route(s)', {\n                  steps: Array.isArray(state.definition.steps) ? state.definition.steps.length : 0,\n                  routes: Array.isArray(state.definition.transitions)\n                    ? state.definition.transitions.length\n                    : 0,\n                })}\n                {' \u00B7 '}\n                {t('workflows.aiDraft.problemCounts', '{errors} error(s), {warnings} warning(s)', {\n                  errors: state.errorCount,\n                  warnings: state.warningCount,\n                })}\n              </p>\n              {state.problems.length > 0 && (\n                <ul\n                  data-testid=\"workflow-ai-draft-problems\"\n                  className=\"mt-2 max-h-40 space-y-1 overflow-auto text-sm\"\n                >\n                  {state.problems.map((issue) => (\n                    <li key={issue.id} className=\"flex items-start gap-2\">\n                      {issue.severity === 'error' ? (\n                        <CircleAlert\n                          className=\"mt-0.5 h-4 w-4 shrink-0 text-status-error-text\"\n                          aria-hidden=\"true\"\n                        />\n                      ) : (\n                        <TriangleAlert\n                          className=\"mt-0.5 h-4 w-4 shrink-0 text-status-warning-text\"\n                          aria-hidden=\"true\"\n                        />\n                      )}\n                      <span className=\"sr-only\">\n                        {issue.severity === 'error'\n                          ? t('workflows.visualEditor.problems.severityError', 'Error')\n                          : t('workflows.visualEditor.problems.severityWarning', 'Warning')}\n                      </span>\n                      <span className=\"min-w-0 flex-1 text-foreground\">{issue.message}</span>\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </section>\n          )}\n        </DrawerBody>\n\n        <DrawerFooter>\n          <Button variant=\"outline\" onClick={() => onOpenChange(false)}>\n            {t('common.cancel', 'Cancel')}\n          </Button>\n          <Button\n            variant=\"outline\"\n            onClick={() => { void handleGenerate() }}\n            disabled={isGenerating || prompt.trim().length === 0}\n            data-testid=\"workflow-ai-draft-generate\"\n          >\n            {isGenerating ? (\n              <Spinner className=\"mr-1.5 h-4 w-4\" />\n            ) : (\n              <Sparkles className=\"mr-1.5 h-4 w-4\" aria-hidden=\"true\" />\n            )}\n            {state.kind === 'ready'\n              ? t('workflows.aiDraft.regenerate', 'Generate again')\n              : t('workflows.aiDraft.generate', 'Generate draft')}\n          </Button>\n          <Button\n            onClick={handleApply}\n            disabled={state.kind !== 'ready'}\n            data-testid=\"workflow-ai-draft-apply\"\n          >\n            {t('workflows.aiDraft.apply', 'Apply to canvas')}\n          </Button>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,173 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CircleAlert, ClipboardPaste, Copy, RotateCcw, TriangleAlert } from "lucide-react";
+import { Button } from "@open-mercato/ui/primitives/button";
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle
+} from "@open-mercato/ui/primitives/drawer";
+import { Alert, AlertDescription, AlertTitle } from "@open-mercato/ui/primitives/alert";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+function WorkflowCodeView({
+  isOpen,
+  onClose,
+  definitionJson,
+  issues,
+  onCopy,
+  onPasteSubgraph,
+  canPaste,
+  onIssueClick,
+  draftText,
+  onDraftChange,
+  onApply,
+  onRevert,
+  draftStatus,
+  severityByLine,
+  lineByIssueId
+}) {
+  const t = useT();
+  const textareaRef = React.useRef(null);
+  const lineCount = React.useMemo(() => draftText.split("\n").length, [draftText]);
+  const focusLine = React.useCallback((line) => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const lines = textarea.value.split("\n");
+    const clamped = Math.max(1, Math.min(line, lines.length));
+    let offset = 0;
+    for (let index = 0; index < clamped - 1; index += 1) offset += lines[index].length + 1;
+    textarea.focus();
+    textarea.setSelectionRange(offset, offset + lines[clamped - 1].length);
+  }, []);
+  const handleIssueRow = React.useCallback((issue) => {
+    const line = lineByIssueId.get(issue.id);
+    if (line) focusLine(line);
+    onIssueClick?.(issue);
+  }, [lineByIssueId, focusLine, onIssueClick]);
+  return /* @__PURE__ */ jsx(Drawer, { open: isOpen, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs(
+    DrawerContent,
+    {
+      side: "right",
+      className: "max-w-3xl",
+      closeAriaLabel: t("common.close", "Close"),
+      "aria-label": t("workflows.visualEditor.codeView.title", "Code"),
+      children: [
+        /* @__PURE__ */ jsxs(DrawerHeader, { children: [
+          /* @__PURE__ */ jsx(DrawerTitle, { children: t("workflows.visualEditor.codeView.title", "Code") }),
+          /* @__PURE__ */ jsx(DrawerDescription, { children: t("workflows.visualEditor.codeView.descriptionEditable", "The definition JSON this workflow would be saved as. Edit it and press Apply (or Cmd/Ctrl+Enter) to replace the canvas \u2014 the canvas keeps updating this text until you start typing.") })
+        ] }),
+        /* @__PURE__ */ jsxs(DrawerBody, { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("section", { "aria-labelledby": "workflow-code-view-json", children: [
+            /* @__PURE__ */ jsx("h3", { id: "workflow-code-view-json", className: "mb-2 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.codeView.jsonTitle", "Definition JSON") }),
+            /* @__PURE__ */ jsxs("div", { className: "flex max-h-[50vh] overflow-auto rounded-lg border border-border bg-muted/40", children: [
+              /* @__PURE__ */ jsx(
+                "ol",
+                {
+                  "aria-hidden": "true",
+                  "data-testid": "workflow-code-view-gutter",
+                  className: "shrink-0 select-none border-r border-border px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground",
+                  children: Array.from({ length: lineCount }, (unused, index) => {
+                    const line = index + 1;
+                    const severity = severityByLine.get(line);
+                    const isParseError = draftStatus.parseErrorLine === line;
+                    const marker = isParseError ? "error" : severity;
+                    return /* @__PURE__ */ jsxs(
+                      "li",
+                      {
+                        "data-line": line,
+                        "data-marker": marker ?? void 0,
+                        className: marker === "error" ? "text-status-error-text" : marker === "warning" ? "text-status-warning-text" : void 0,
+                        children: [
+                          marker ? marker === "error" ? "\u25CF" : "\u25B2" : "",
+                          " ",
+                          line
+                        ]
+                      },
+                      line
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  "data-testid": "workflow-code-view-json",
+                  value: draftText,
+                  spellCheck: false,
+                  "aria-label": t("workflows.visualEditor.codeView.jsonTitle", "Definition JSON"),
+                  "aria-invalid": draftStatus.blockingMessages.length > 0 || void 0,
+                  onChange: (event) => onDraftChange(event.target.value),
+                  onKeyDown: (event) => {
+                    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+                      event.preventDefault();
+                      if (draftStatus.canApply) onApply();
+                    }
+                  },
+                  className: "min-h-[40vh] flex-1 resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 text-foreground outline-none"
+                }
+              )
+            ] }),
+            draftStatus.blockingMessages.length > 0 && /* @__PURE__ */ jsxs(Alert, { status: "error", className: "mt-2", icon: /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" }), children: [
+              /* @__PURE__ */ jsx(AlertTitle, { children: t("workflows.visualEditor.codeView.cannotApply", "This JSON cannot be applied yet") }),
+              /* @__PURE__ */ jsx(AlertDescription, { children: /* @__PURE__ */ jsx("ul", { "data-testid": "workflow-code-view-blocking", className: "list-disc space-y-0.5 pl-4", children: draftStatus.blockingMessages.map((message) => /* @__PURE__ */ jsx("li", { children: message }, message)) }) })
+            ] }),
+            draftStatus.dirty && draftStatus.canApply && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: t("workflows.visualEditor.codeView.readyToApply", "Ready to apply.") }),
+            !draftStatus.dirty && draftText !== definitionJson && /* @__PURE__ */ jsx("p", { className: "mt-2 text-xs text-muted-foreground", children: t("workflows.visualEditor.codeView.canvasChanged", "The canvas changed; this text has been refreshed from it.") })
+          ] }),
+          /* @__PURE__ */ jsxs("section", { "aria-labelledby": "workflow-code-view-issues", children: [
+            /* @__PURE__ */ jsx("h3", { id: "workflow-code-view-issues", className: "mb-2 text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.visualEditor.codeView.validationTitle", "Schema validation") }),
+            issues.length === 0 ? /* @__PURE__ */ jsx("p", { "data-testid": "workflow-code-view-clean", className: "text-sm text-muted-foreground", children: t("workflows.visualEditor.codeView.validationClean", "No problems found in this definition.") }) : /* @__PURE__ */ jsx("ul", { "data-testid": "workflow-code-view-issues", className: "divide-y divide-border rounded-lg border border-border", children: issues.map((issue) => {
+              const line = lineByIssueId.get(issue.id);
+              const isNavigable = Boolean(issue.nodeId || issue.edgeId) && Boolean(onIssueClick);
+              const severityLabel = issue.severity === "error" ? t("workflows.visualEditor.problems.severityError", "Error") : t("workflows.visualEditor.problems.severityWarning", "Warning");
+              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  onClick: () => handleIssueRow(issue),
+                  disabled: !isNavigable,
+                  "data-issue-line": line ?? void 0,
+                  className: `flex h-auto w-full items-start justify-start gap-2 rounded-none px-3 py-1.5 text-left text-sm font-normal ${isNavigable ? "hover:bg-muted" : "cursor-default hover:bg-transparent"}`,
+                  children: [
+                    issue.severity === "error" ? /* @__PURE__ */ jsx(CircleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-status-error-text", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(TriangleAlert, { className: "mt-0.5 h-4 w-4 shrink-0 text-status-warning-text", "aria-hidden": "true" }),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: severityLabel }),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-foreground", children: issue.message }),
+                    line ? /* @__PURE__ */ jsx("span", { className: "shrink-0 font-mono text-xs text-muted-foreground", children: t("workflows.visualEditor.codeView.lineNumber", "line {line}", { line }) }) : null,
+                    issue.nodeLabel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: issue.nodeLabel })
+                  ]
+                }
+              ) }, issue.id);
+            }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(DrawerFooter, { children: [
+          /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onCopy, children: [
+            /* @__PURE__ */ jsx(Copy, { className: "mr-1.5 h-4 w-4", "aria-hidden": "true" }),
+            t("workflows.visualEditor.codeView.copy", "Copy JSON")
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onPasteSubgraph, disabled: !canPaste, children: [
+            /* @__PURE__ */ jsx(ClipboardPaste, { className: "mr-1.5 h-4 w-4", "aria-hidden": "true" }),
+            t("workflows.visualEditor.codeView.pasteSubgraph", "Paste steps")
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: onRevert, disabled: !draftStatus.dirty, children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "mr-1.5 h-4 w-4", "aria-hidden": "true" }),
+            t("workflows.visualEditor.codeView.revert", "Discard edits")
+          ] }),
+          /* @__PURE__ */ jsx(Button, { onClick: onApply, disabled: !draftStatus.canApply, "data-testid": "workflow-code-view-apply", children: t("workflows.visualEditor.codeView.apply", "Apply to canvas") })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  WorkflowCodeView
+};
+//# sourceMappingURL=WorkflowCodeView.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/WorkflowCodeView.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { CircleAlert, ClipboardPaste, Copy, RotateCcw, TriangleAlert } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport {\n  Drawer,\n  DrawerBody,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n} from '@open-mercato/ui/primitives/drawer'\nimport { Alert, AlertDescription, AlertTitle } from '@open-mercato/ui/primitives/alert'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { WorkflowValidationIssue } from '../lib/collect-validation-issues'\nimport type { CodeViewDraftStatus } from '../lib/code-view-apply'\n\nexport interface WorkflowCodeViewProps {\n  isOpen: boolean\n  onClose: () => void\n  /** Assembled definition JSON, already serialized by the page. */\n  definitionJson: string\n  issues: WorkflowValidationIssue[]\n  onCopy: () => void\n  onPasteSubgraph: () => void\n  canPaste: boolean\n  onIssueClick?: (issue: WorkflowValidationIssue) => void\n  /** Stage 2 \u2014 the current editor text, owned by the page. */\n  draftText: string\n  onDraftChange: (text: string) => void\n  onApply: () => void\n  onRevert: () => void\n  draftStatus: CodeViewDraftStatus\n  /** Highest severity per 1-based line, for the gutter markers. */\n  severityByLine: Map<number, 'error' | 'warning'>\n  /** Line an issue row points at, keyed by issue id. */\n  lineByIssueId: Map<string, number>\n}\n\n/**\n * Code view, stage 2 (spec section 2.2) \u2014 two-way sync with issue markers.\n *\n * **Safety model** (`lib/code-view-apply.ts` owns the rule):\n * canvas \u2192 code is LIVE; code \u2192 canvas needs an explicit Apply. Parsing,\n * validation and the markers stay live as you type, so the loop is immediate\n * even though the commit is not. Applying JSON that does not parse, does not\n * match the definition schema, or whose GRAPH is broken is refused with the\n * reason \u2014 a canvas holding a graph the engine rejects is worse than no apply,\n * because the author has lost the text they typed.\n *\n * The markers are GUTTER markers rather than underlines: a plain textarea\n * cannot decorate a substring, and a second overlaid highlight layer would\n * drift out of alignment with the textarea's own text metrics. Each marked line\n * carries its severity glyph and an `sr-only` name, so status is never\n * colour-only (section 4.6).\n *\n * The page still owns clipboard access, the splice, the undo entry and the\n * apply itself \u2014 this component is presentational.\n */\nexport function WorkflowCodeView({\n  isOpen,\n  onClose,\n  definitionJson,\n  issues,\n  onCopy,\n  onPasteSubgraph,\n  canPaste,\n  onIssueClick,\n  draftText,\n  onDraftChange,\n  onApply,\n  onRevert,\n  draftStatus,\n  severityByLine,\n  lineByIssueId,\n}: WorkflowCodeViewProps) {\n  const t = useT()\n  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)\n\n  const lineCount = React.useMemo(() => draftText.split('\\n').length, [draftText])\n\n  const focusLine = React.useCallback((line: number) => {\n    const textarea = textareaRef.current\n    if (!textarea) return\n    const lines = textarea.value.split('\\n')\n    const clamped = Math.max(1, Math.min(line, lines.length))\n    let offset = 0\n    for (let index = 0; index < clamped - 1; index += 1) offset += lines[index].length + 1\n    textarea.focus()\n    textarea.setSelectionRange(offset, offset + lines[clamped - 1].length)\n  }, [])\n\n  const handleIssueRow = React.useCallback((issue: WorkflowValidationIssue) => {\n    const line = lineByIssueId.get(issue.id)\n    if (line) focusLine(line)\n    onIssueClick?.(issue)\n  }, [lineByIssueId, focusLine, onIssueClick])\n\n  return (\n    <Drawer open={isOpen} onOpenChange={(open) => { if (!open) onClose() }}>\n      <DrawerContent\n        side=\"right\"\n        className=\"max-w-3xl\"\n        closeAriaLabel={t('common.close', 'Close')}\n        aria-label={t('workflows.visualEditor.codeView.title', 'Code')}\n      >\n        <DrawerHeader>\n          <DrawerTitle>{t('workflows.visualEditor.codeView.title', 'Code')}</DrawerTitle>\n          <DrawerDescription>\n            {t('workflows.visualEditor.codeView.descriptionEditable', 'The definition JSON this workflow would be saved as. Edit it and press Apply (or Cmd/Ctrl+Enter) to replace the canvas \u2014 the canvas keeps updating this text until you start typing.')}\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerBody className=\"flex flex-col gap-4\">\n          <section aria-labelledby=\"workflow-code-view-json\">\n            <h3 id=\"workflow-code-view-json\" className=\"mb-2 text-xs font-semibold uppercase text-muted-foreground\">\n              {t('workflows.visualEditor.codeView.jsonTitle', 'Definition JSON')}\n            </h3>\n            <div className=\"flex max-h-[50vh] overflow-auto rounded-lg border border-border bg-muted/40\">\n              <ol\n                aria-hidden=\"true\"\n                data-testid=\"workflow-code-view-gutter\"\n                className=\"shrink-0 select-none border-r border-border px-2 py-3 text-right font-mono text-xs leading-5 text-muted-foreground\"\n              >\n                {Array.from({ length: lineCount }, (unused, index) => {\n                  const line = index + 1\n                  const severity = severityByLine.get(line)\n                  const isParseError = draftStatus.parseErrorLine === line\n                  const marker = isParseError ? 'error' : severity\n                  return (\n                    <li\n                      key={line}\n                      data-line={line}\n                      data-marker={marker ?? undefined}\n                      className={\n                        marker === 'error'\n                          ? 'text-status-error-text'\n                          : marker === 'warning'\n                            ? 'text-status-warning-text'\n                            : undefined\n                      }\n                    >\n                      {marker ? (marker === 'error' ? '\u25CF' : '\u25B2') : ''} {line}\n                    </li>\n                  )\n                })}\n              </ol>\n              <textarea\n                ref={textareaRef}\n                data-testid=\"workflow-code-view-json\"\n                value={draftText}\n                spellCheck={false}\n                aria-label={t('workflows.visualEditor.codeView.jsonTitle', 'Definition JSON')}\n                aria-invalid={draftStatus.blockingMessages.length > 0 || undefined}\n                onChange={(event) => onDraftChange(event.target.value)}\n                onKeyDown={(event) => {\n                  if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {\n                    event.preventDefault()\n                    if (draftStatus.canApply) onApply()\n                  }\n                }}\n                className=\"min-h-[40vh] flex-1 resize-none bg-transparent px-3 py-3 font-mono text-xs leading-5 text-foreground outline-none\"\n              />\n            </div>\n            {draftStatus.blockingMessages.length > 0 && (\n              <Alert status=\"error\" className=\"mt-2\" icon={<CircleAlert aria-hidden=\"true\" />}>\n                <AlertTitle>{t('workflows.visualEditor.codeView.cannotApply', 'This JSON cannot be applied yet')}</AlertTitle>\n                <AlertDescription>\n                  <ul data-testid=\"workflow-code-view-blocking\" className=\"list-disc space-y-0.5 pl-4\">\n                    {draftStatus.blockingMessages.map((message) => (\n                      <li key={message}>{message}</li>\n                    ))}\n                  </ul>\n                </AlertDescription>\n              </Alert>\n            )}\n            {draftStatus.dirty && draftStatus.canApply && (\n              <p className=\"mt-2 text-xs text-muted-foreground\">\n                {t('workflows.visualEditor.codeView.readyToApply', 'Ready to apply.')}\n              </p>\n            )}\n            {!draftStatus.dirty && draftText !== definitionJson && (\n              <p className=\"mt-2 text-xs text-muted-foreground\">\n                {t('workflows.visualEditor.codeView.canvasChanged', 'The canvas changed; this text has been refreshed from it.')}\n              </p>\n            )}\n          </section>\n          <section aria-labelledby=\"workflow-code-view-issues\">\n            <h3 id=\"workflow-code-view-issues\" className=\"mb-2 text-xs font-semibold uppercase text-muted-foreground\">\n              {t('workflows.visualEditor.codeView.validationTitle', 'Schema validation')}\n            </h3>\n            {issues.length === 0 ? (\n              <p data-testid=\"workflow-code-view-clean\" className=\"text-sm text-muted-foreground\">\n                {t('workflows.visualEditor.codeView.validationClean', 'No problems found in this definition.')}\n              </p>\n            ) : (\n              <ul data-testid=\"workflow-code-view-issues\" className=\"divide-y divide-border rounded-lg border border-border\">\n                {issues.map((issue) => {\n                  const line = lineByIssueId.get(issue.id)\n                  const isNavigable = Boolean(issue.nodeId || issue.edgeId) && Boolean(onIssueClick)\n                  const severityLabel = issue.severity === 'error'\n                    ? t('workflows.visualEditor.problems.severityError', 'Error')\n                    : t('workflows.visualEditor.problems.severityWarning', 'Warning')\n                  return (\n                    <li key={issue.id}>\n                      <Button\n                        variant=\"ghost\"\n                        onClick={() => handleIssueRow(issue)}\n                        disabled={!isNavigable}\n                        data-issue-line={line ?? undefined}\n                        className={`flex h-auto w-full items-start justify-start gap-2 rounded-none px-3 py-1.5 text-left text-sm font-normal ${isNavigable ? 'hover:bg-muted' : 'cursor-default hover:bg-transparent'}`}\n                      >\n                        {issue.severity === 'error' ? (\n                          <CircleAlert className=\"mt-0.5 h-4 w-4 shrink-0 text-status-error-text\" aria-hidden=\"true\" />\n                        ) : (\n                          <TriangleAlert className=\"mt-0.5 h-4 w-4 shrink-0 text-status-warning-text\" aria-hidden=\"true\" />\n                        )}\n                        <span className=\"sr-only\">{severityLabel}</span>\n                        <span className=\"min-w-0 flex-1 text-foreground\">{issue.message}</span>\n                        {line ? (\n                          <span className=\"shrink-0 font-mono text-xs text-muted-foreground\">\n                            {t('workflows.visualEditor.codeView.lineNumber', 'line {line}', { line })}\n                          </span>\n                        ) : null}\n                        {issue.nodeLabel && (\n                          <span className=\"shrink-0 text-xs text-muted-foreground\">{issue.nodeLabel}</span>\n                        )}\n                      </Button>\n                    </li>\n                  )\n                })}\n              </ul>\n            )}\n          </section>\n        </DrawerBody>\n        <DrawerFooter>\n          <Button variant=\"outline\" onClick={onCopy}>\n            <Copy className=\"mr-1.5 h-4 w-4\" aria-hidden=\"true\" />\n            {t('workflows.visualEditor.codeView.copy', 'Copy JSON')}\n          </Button>\n          <Button variant=\"outline\" onClick={onPasteSubgraph} disabled={!canPaste}>\n            <ClipboardPaste className=\"mr-1.5 h-4 w-4\" aria-hidden=\"true\" />\n            {t('workflows.visualEditor.codeView.pasteSubgraph', 'Paste steps')}\n          </Button>\n          <Button variant=\"outline\" onClick={onRevert} disabled={!draftStatus.dirty}>\n            <RotateCcw className=\"mr-1.5 h-4 w-4\" aria-hidden=\"true\" />\n            {t('workflows.visualEditor.codeView.revert', 'Discard edits')}\n          </Button>\n          <Button onClick={onApply} disabled={!draftStatus.canApply} data-testid=\"workflow-code-view-apply\">\n            {t('workflows.visualEditor.codeView.apply', 'Apply to canvas')}\n          </Button>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,62 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  CommandMenu,
+  CommandMenuContent,
+  CommandMenuEmpty,
+  CommandMenuFooter,
+  CommandMenuGroup,
+  CommandMenuInput,
+  CommandMenuItem,
+  CommandMenuList
+} from "@open-mercato/ui/primitives/command-menu";
+import { Kbd } from "@open-mercato/ui/primitives/kbd";
+import { useT } from "@open-mercato/shared/lib/i18n/context";
+import {
+  groupWorkflowEditorCommands
+} from "../lib/editor-commands.js";
+function WorkflowCommandPalette({ open, onOpenChange, commands }) {
+  const t = useT();
+  const sections = React.useMemo(() => groupWorkflowEditorCommands(commands), [commands]);
+  const groupHeadings = {
+    edit: t("workflows.commandPalette.groups.edit", "Edit"),
+    add: t("workflows.commandPalette.groups.add", "Add"),
+    navigate: t("workflows.commandPalette.groups.navigate", "Go to"),
+    view: t("workflows.commandPalette.groups.view", "View"),
+    run: t("workflows.commandPalette.groups.run", "Run")
+  };
+  return /* @__PURE__ */ jsx(CommandMenu, { open, onOpenChange, children: /* @__PURE__ */ jsxs(CommandMenuContent, { title: t("workflows.commandPalette.title", "Workflow commands"), children: [
+    /* @__PURE__ */ jsx(
+      CommandMenuInput,
+      {
+        placeholder: t("workflows.commandPalette.placeholder", "Search commands\u2026"),
+        clearAriaLabel: t("workflows.commandPalette.clear", "Clear search")
+      }
+    ),
+    /* @__PURE__ */ jsxs(CommandMenuList, { children: [
+      /* @__PURE__ */ jsx(CommandMenuEmpty, { children: t("workflows.commandPalette.empty", "No matching command") }),
+      sections.map((section) => /* @__PURE__ */ jsx(CommandMenuGroup, { heading: groupHeadings[section.group], children: section.commands.map((command) => /* @__PURE__ */ jsx(
+        CommandMenuItem,
+        {
+          value: `${command.label} ${command.description ?? ""}`,
+          disabled: command.disabled,
+          description: command.description,
+          shortcut: command.shortcut ? /* @__PURE__ */ jsx(Kbd, { children: command.shortcut }) : void 0,
+          onSelect: () => {
+            if (command.disabled) return;
+            onOpenChange(false);
+            command.run();
+          },
+          children: command.label
+        },
+        command.id
+      )) }, section.group))
+    ] }),
+    /* @__PURE__ */ jsx(CommandMenuFooter, {})
+  ] }) });
+}
+export {
+  WorkflowCommandPalette
+};
+//# sourceMappingURL=WorkflowCommandPalette.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/modules/workflows/components/WorkflowCommandPalette.tsx"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport {\n  CommandMenu,\n  CommandMenuContent,\n  CommandMenuEmpty,\n  CommandMenuFooter,\n  CommandMenuGroup,\n  CommandMenuInput,\n  CommandMenuItem,\n  CommandMenuList,\n} from '@open-mercato/ui/primitives/command-menu'\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport {\n  groupWorkflowEditorCommands,\n  type WorkflowCommandGroupId,\n  type WorkflowEditorCommand,\n} from '../lib/editor-commands'\n\nexport interface WorkflowCommandPaletteProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  commands: WorkflowEditorCommand[]\n}\n\n/**\n * Cmd+K palette for the Studio (spec section 4.6).\n *\n * It reuses the platform's `CommandMenu` primitive rather than introducing a\n * second palette: `cmdk` already provides the search filtering, arrow-key\n * navigation and Enter-to-select this needs, and Radix's dialog gives it the\n * focus trap and Escape contract every other dialog in the product has.\n */\nexport function WorkflowCommandPalette({ open, onOpenChange, commands }: WorkflowCommandPaletteProps) {\n  const t = useT()\n  const sections = React.useMemo(() => groupWorkflowEditorCommands(commands), [commands])\n\n  const groupHeadings: Record<WorkflowCommandGroupId, string> = {\n    edit: t('workflows.commandPalette.groups.edit', 'Edit'),\n    add: t('workflows.commandPalette.groups.add', 'Add'),\n    navigate: t('workflows.commandPalette.groups.navigate', 'Go to'),\n    view: t('workflows.commandPalette.groups.view', 'View'),\n    run: t('workflows.commandPalette.groups.run', 'Run'),\n  }\n\n  return (\n    <CommandMenu open={open} onOpenChange={onOpenChange}>\n      <CommandMenuContent title={t('workflows.commandPalette.title', 'Workflow commands')}>\n        <CommandMenuInput\n          placeholder={t('workflows.commandPalette.placeholder', 'Search commands\u2026')}\n          clearAriaLabel={t('workflows.commandPalette.clear', 'Clear search')}\n        />\n        <CommandMenuList>\n          <CommandMenuEmpty>{t('workflows.commandPalette.empty', 'No matching command')}</CommandMenuEmpty>\n          {sections.map((section) => (\n            <CommandMenuGroup key={section.group} heading={groupHeadings[section.group]}>\n              {section.commands.map((command) => (\n                <CommandMenuItem\n                  key={command.id}\n                  value={`${command.label} ${command.description ?? ''}`}\n                  disabled={command.disabled}\n                  description={command.description}\n                  shortcut={command.shortcut ? <Kbd>{command.shortcut}</Kbd> : undefined}\n                  onSelect={() => {\n                    if (command.disabled) return\n                    onOpenChange(false)\n                    command.run()\n                  }}\n                >\n                  {command.label}\n                </CommandMenuItem>\n              ))}\n            </CommandMenuGroup>\n          ))}\n        </CommandMenuList>\n        <CommandMenuFooter />\n      </CommandMenuContent>\n    </CommandMenu>\n  )\n}\n"],
+  "mappings": ";AAkDQ,cAIA,YAJA;AAhDR,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW;AACpB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,OAGK;AAgBA,SAAS,uBAAuB,EAAE,MAAM,cAAc,SAAS,GAAgC;AACpG,QAAM,IAAI,KAAK;AACf,QAAM,WAAW,MAAM,QAAQ,MAAM,4BAA4B,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAEtF,QAAM,gBAAwD;AAAA,IAC5D,MAAM,EAAE,wCAAwC,MAAM;AAAA,IACtD,KAAK,EAAE,uCAAuC,KAAK;AAAA,IACnD,UAAU,EAAE,4CAA4C,OAAO;AAAA,IAC/D,MAAM,EAAE,wCAAwC,MAAM;AAAA,IACtD,KAAK,EAAE,uCAAuC,KAAK;AAAA,EACrD;AAEA,SACE,oBAAC,eAAY,MAAY,cACvB,+BAAC,sBAAmB,OAAO,EAAE,kCAAkC,mBAAmB,GAChF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAa,EAAE,wCAAwC,uBAAkB;AAAA,QACzE,gBAAgB,EAAE,kCAAkC,cAAc;AAAA;AAAA,IACpE;AAAA,IACA,qBAAC,mBACC;AAAA,0BAAC,oBAAkB,YAAE,kCAAkC,qBAAqB,GAAE;AAAA,MAC7E,SAAS,IAAI,CAAC,YACb,oBAAC,oBAAqC,SAAS,cAAc,QAAQ,KAAK,GACvE,kBAAQ,SAAS,IAAI,CAAC,YACrB;AAAA,QAAC;AAAA;AAAA,UAEC,OAAO,GAAG,QAAQ,KAAK,IAAI,QAAQ,eAAe,EAAE;AAAA,UACpD,UAAU,QAAQ;AAAA,UAClB,aAAa,QAAQ;AAAA,UACrB,UAAU,QAAQ,WAAW,oBAAC,OAAK,kBAAQ,UAAS,IAAS;AAAA,UAC7D,UAAU,MAAM;AACd,gBAAI,QAAQ,SAAU;AACtB,yBAAa,KAAK;AAClB,oBAAQ,IAAI;AAAA,UACd;AAAA,UAEC,kBAAQ;AAAA;AAAA,QAXJ,QAAQ;AAAA,MAYf,CACD,KAhBoB,QAAQ,KAiB/B,CACD;AAAA,OACH;AAAA,IACA,oBAAC,qBAAkB;AAAA,KACrB,GACF;AAEJ;",
+  "names": []
+}