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

package/src/modules/workflows/components/WorkflowAiDraftDialog.tsx

@@ -0,0 +1,383 @@
+'use client'
+
+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 type { WorkflowValidationIssue } from '../lib/collect-validation-issues'
+import { WORKFLOW_DRAFT_PROMPT_MAX_LENGTH } from '../lib/ai-authoring'
+
+/**
+ * Prompt-to-draft (spec section 9).
+ *
+ * *"natural language → draft definition generated against the real catalogs,
+ * opened in the Studio with a Problems pass already run. Never auto-published."*
+ *
+ * The dialog owns the PROMPT and the REVIEW; the page owns the apply, the undo
+ * checkpoint and the Problems pass, because those are document operations and
+ * the document lives there. `onApply` returns a refusal when the draft cannot
+ * be applied, so the same four escalating refusals a pasted definition faces
+ * (`lib/code-view-apply.ts`) are what an AI-authored one faces, and a refused
+ * draft leaves the canvas byte-identical.
+ *
+ * Every failure mode is STATED. A missing AI provider, a failed call and a
+ * model that produced something that is not a workflow each render their own
+ * message — a surface that quietly does nothing is this module's recurring bug,
+ * so there is no path here that ends in silence.
+ */
+
+export type WorkflowAiDraftApplyRefusal = {
+  reason: 'parseError' | 'schemaError' | 'graphError'
+  messages: string[]
+}
+
+export interface WorkflowAiDraftDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /**
+   * Apply the generated definition to the canvas. Returns `null` when it
+   * landed, or the refusal to render when the shared gate rejected it.
+   */
+  onApply: (input: {
+    definition: Record<string, unknown>
+    prompt: string
+  }) => WorkflowAiDraftApplyRefusal | null
+  /** True when the canvas already holds steps — applying replaces all of them. */
+  canvasHasContent: boolean
+}
+
+type GenerateResponse = {
+  ok?: boolean
+  reason?: 'unavailable' | 'failed' | 'malformedResponse' | 'schemaError'
+  message?: string
+  messages?: string[]
+  summary?: string
+  definition?: Record<string, unknown>
+  problems?: WorkflowValidationIssue[]
+  errorCount?: number
+  warningCount?: number
+  /** How many times the server re-prompted the model with the validator errors. */
+  repairAttempts?: number
+  error?: string
+}
+
+type DraftState =
+  | { kind: 'idle' }
+  | { kind: 'generating' }
+  | {
+      kind: 'ready'
+      prompt: string
+      summary: string
+      definition: Record<string, unknown>
+      problems: WorkflowValidationIssue[]
+      errorCount: number
+      warningCount: number
+    }
+  | { kind: 'refused'; title: string; messages: string[] }
+
+export function WorkflowAiDraftDialog({
+  open,
+  onOpenChange,
+  onApply,
+  canvasHasContent,
+}: WorkflowAiDraftDialogProps) {
+  const t = useT()
+  const [prompt, setPrompt] = React.useState('')
+  const [state, setState] = React.useState<DraftState>({ kind: 'idle' })
+
+  // A dialog reopened onto the previous run's draft would offer an author a
+  // definition they cannot see the prompt for. Reset on close.
+  React.useEffect(() => {
+    if (open) return
+    setState({ kind: 'idle' })
+  }, [open])
+
+  const refuse = React.useCallback((title: string, messages: string[]) => {
+    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<GenerateResponse>('/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', undefined, {
+                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 (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <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()
+        }}
+      >
+        <DrawerHeader>
+          <DrawerTitle>{t('workflows.aiDraft.title', 'Draft a workflow with AI')}</DrawerTitle>
+          <DrawerDescription>
+            {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.',
+            )}
+          </DrawerDescription>
+        </DrawerHeader>
+
+        <DrawerBody className="flex flex-col gap-4 py-2">
+          <div>
+            <label
+              htmlFor="workflow-ai-draft-prompt"
+              className="mb-1.5 block text-xs font-semibold uppercase text-muted-foreground"
+            >
+              {t('workflows.aiDraft.promptLabel', 'What should this workflow do?')}
+            </label>
+            <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"
+            />
+          </div>
+
+          {/* The Alerts below pass no icon child: `Alert` renders its own
+              status icon, and supplying one would draw it twice. */}
+          {canvasHasContent && (
+            <Alert variant="warning">
+              <AlertTitle>
+                {t('workflows.aiDraft.replaceTitle', 'Applying replaces the current canvas')}
+              </AlertTitle>
+              <AlertDescription>
+                {t(
+                  'workflows.aiDraft.replaceBody',
+                  'Every step and route on the canvas is replaced. It is one undo away.',
+                )}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {state.kind === 'refused' && (
+            <Alert variant="destructive" data-testid="workflow-ai-draft-refusal">
+              <AlertTitle>{state.title}</AlertTitle>
+              <AlertDescription>
+                {/* Rendered as blocks rather than a list: `AlertDescription`
+                    is a `<p>`, and a nested `<ul>` is invalid HTML. */}
+                {state.messages.map((message) => (
+                  <span key={message} className="block">
+                    {message}
+                  </span>
+                ))}
+              </AlertDescription>
+            </Alert>
+          )}
+
+          {state.kind === 'ready' && (
+            <section
+              aria-labelledby="workflow-ai-draft-review"
+              data-testid="workflow-ai-draft-review"
+              className="rounded-lg border border-border p-3"
+            >
+              <h3
+                id="workflow-ai-draft-review"
+                className="mb-2 text-xs font-semibold uppercase text-muted-foreground"
+              >
+                {t('workflows.aiDraft.reviewTitle', 'Review before applying')}
+              </h3>
+              {state.summary && <p className="mb-2 text-sm text-foreground">{state.summary}</p>}
+              <p className="text-sm text-muted-foreground" data-testid="workflow-ai-draft-counts">
+                {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,
+                })}
+                {' · '}
+                {t('workflows.aiDraft.problemCounts', '{errors} error(s), {warnings} warning(s)', {
+                  errors: state.errorCount,
+                  warnings: state.warningCount,
+                })}
+              </p>
+              {state.problems.length > 0 && (
+                <ul
+                  data-testid="workflow-ai-draft-problems"
+                  className="mt-2 max-h-40 space-y-1 overflow-auto text-sm"
+                >
+                  {state.problems.map((issue) => (
+                    <li key={issue.id} className="flex items-start gap-2">
+                      {issue.severity === 'error' ? (
+                        <CircleAlert
+                          className="mt-0.5 h-4 w-4 shrink-0 text-status-error-text"
+                          aria-hidden="true"
+                        />
+                      ) : (
+                        <TriangleAlert
+                          className="mt-0.5 h-4 w-4 shrink-0 text-status-warning-text"
+                          aria-hidden="true"
+                        />
+                      )}
+                      <span className="sr-only">
+                        {issue.severity === 'error'
+                          ? t('workflows.visualEditor.problems.severityError', 'Error')
+                          : t('workflows.visualEditor.problems.severityWarning', 'Warning')}
+                      </span>
+                      <span className="min-w-0 flex-1 text-foreground">{issue.message}</span>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </section>
+          )}
+        </DrawerBody>
+
+        <DrawerFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t('common.cancel', 'Cancel')}
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => { void handleGenerate() }}
+            disabled={isGenerating || prompt.trim().length === 0}
+            data-testid="workflow-ai-draft-generate"
+          >
+            {isGenerating ? (
+              <Spinner className="mr-1.5 h-4 w-4" />
+            ) : (
+              <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')}
+          </Button>
+          <Button
+            onClick={handleApply}
+            disabled={state.kind !== 'ready'}
+            data-testid="workflow-ai-draft-apply"
+          >
+            {t('workflows.aiDraft.apply', 'Apply to canvas')}
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}

package/src/modules/workflows/components/WorkflowCodeView.tsx

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