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

package/src/modules/workflows/components/fields/VariablePickerButton.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import * as React from 'react'
+import { Braces } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { LedgerEntry } from '../../lib/context-ledger'
+import { insertAtElementCursor } from '../../lib/insert-at-cursor'
+import {
+  formatLedgerSample,
+  groupLedgerEntries,
+  insertableLedgerEntries,
+} from '../../lib/ledger-entry-display'
+
+/**
+ * Ledger-fed variable picker (spec 2026-07-26-workflows-ux-redesign.md
+ * section 3.5, step 3.2, mockup Screen 2).
+ *
+ * An icon button beside template-capable config inputs that opens a popover
+ * listing the context available at the edited step — the step's incoming
+ * ledger entries grouped by producer kind, each with its type badge, a
+ * `maybe` marker for path-dependent presence, and a sample snippet when one
+ * is known. Clicking a row splices the picked path into the target control at
+ * the cursor position (via the target element's id — works for Input and
+ * Textarea alike) and closes the popover. `insertMode` controls the spliced
+ * text: `'template'` (default) wraps the path as `{{path}}` for interpolated
+ * config values; `'bare'` inserts the dot path as-is for consumers that treat
+ * the whole value as a context path (sub-workflow `inputMapping` values read
+ * by `mapInputData` via `getNestedValue`, no `{{}}` interpolation).
+ *
+ * The button renders even when no ledger entries are available so the
+ * feature stays discoverable; the popover then shows an empty state. Grouping,
+ * sample formatting, and the `'*'` wildcard filter are shared with the docked
+ * Input data panel (lib/ledger-entry-display.ts), so both listings always show
+ * the same ledger the same way.
+ */
+
+export type VariablePickerInsertMode = 'template' | 'bare'
+
+export interface VariablePickerButtonProps {
+  targetId: string
+  value: string
+  onValueChange: (nextValue: string) => void
+  ledgerEntries?: LedgerEntry[]
+  insertMode?: VariablePickerInsertMode
+  disabled?: boolean
+}
+
+export function VariablePickerButton({
+  targetId,
+  value,
+  onValueChange,
+  ledgerEntries,
+  insertMode = 'template',
+  disabled,
+}: VariablePickerButtonProps) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState('')
+
+  const entries = React.useMemo(() => insertableLedgerEntries(ledgerEntries), [ledgerEntries])
+  const query = search.trim().toLowerCase()
+  const visibleEntries = query
+    ? entries.filter((entry) => entry.path.toLowerCase().includes(query))
+    : entries
+  const groups = groupLedgerEntries(visibleEntries)
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen)
+    if (!nextOpen) setSearch('')
+  }
+
+  const handleInsert = (path: string) => {
+    const element = document.getElementById(targetId)
+    const target =
+      element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement ? element : null
+    const insertion = insertMode === 'bare' ? path : `{{${path}}}`
+    const result = insertAtElementCursor(target, value, insertion)
+    onValueChange(result.value)
+    handleOpenChange(false)
+    if (target) {
+      window.requestAnimationFrame(() => {
+        target.focus()
+        if (typeof target.setSelectionRange === 'function') {
+          target.setSelectionRange(result.cursor, result.cursor)
+        }
+      })
+    }
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <IconButton
+          variant="ghost"
+          size="sm"
+          aria-label={t('workflows.variablePicker.buttonLabel')}
+          disabled={disabled}
+        >
+          <Braces className="size-3.5" />
+        </IconButton>
+      </PopoverTrigger>
+      <PopoverContent className="w-96" align="end">
+        <div className="border-b border-border p-2">
+          <Input
+            type="text"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={t('workflows.variablePicker.searchPlaceholder')}
+            aria-label={t('workflows.variablePicker.searchPlaceholder')}
+            className="text-xs"
+          />
+        </div>
+        <div className="max-h-80 overflow-y-auto p-1">
+          {entries.length === 0 ? (
+            <p className="p-3 text-xs text-muted-foreground">
+              {t('workflows.variablePicker.emptyState')}
+            </p>
+          ) : groups.length === 0 ? (
+            <p className="p-3 text-xs text-muted-foreground">
+              {t('workflows.variablePicker.noMatches')}
+            </p>
+          ) : (
+            groups.map((group) => (
+              <div key={group.kind}>
+                <p className="px-2 pb-1 pt-2 text-xs font-semibold text-muted-foreground">
+                  {t(`workflows.variablePicker.groups.${group.kind}`)}
+                </p>
+                {group.entries.map((entry) => {
+                  const sample = formatLedgerSample(entry.sample)
+                  return (
+                    <Button
+                      key={entry.path}
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleInsert(entry.path)}
+                      className="h-auto w-full justify-start gap-2 px-2 py-1.5"
+                    >
+                      <span className="min-w-0 truncate font-mono text-xs">{entry.path}</span>
+                      <Badge
+                        variant={entry.type === 'unknown' ? 'muted' : 'secondary'}
+                        className="shrink-0 text-xs"
+                      >
+                        {entry.type}
+                      </Badge>
+                      {entry.presence === 'maybe' && (
+                        <Badge variant="outline" className="shrink-0 text-xs">
+                          {t('workflows.variablePicker.maybeBadge')}
+                        </Badge>
+                      )}
+                      {sample && (
+                        <span
+                          className={cn(
+                            'ml-auto min-w-0 truncate text-xs text-muted-foreground',
+                            sample.numeric && 'tabular-nums',
+                          )}
+                        >
+                          {sample.text}
+                        </span>
+                      )}
+                    </Button>
+                  )
+                })}
+              </div>
+            ))
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/modules/workflows/components/fields/ledgerDropTarget.ts

@@ -0,0 +1,55 @@
+'use client'
+
+import type * as React from 'react'
+import { LEDGER_PATH_MIME, resolveLedgerDrop, type LedgerInsertMode } from '../../lib/ledger-drag'
+
+type TextControl = HTMLInputElement | HTMLTextAreaElement
+
+export interface LedgerDropTargetOptions {
+  value: string
+  onValueChange: (nextValue: string) => void
+  insertMode?: LedgerInsertMode
+  disabled?: boolean
+}
+
+export interface LedgerDropTargetProps {
+  onDragOver: (event: React.DragEvent<TextControl>) => void
+  onDrop: (event: React.DragEvent<TextControl>) => void
+}
+
+/**
+ * Makes a text control a drop target for Input-data-panel rows: a dragged
+ * ledger path is inserted at the caret in the control's own insert mode, while
+ * any other payload falls through to the browser's native text drop. A plain
+ * factory, not a hook — config fields render a variable number of controls per
+ * activity type.
+ */
+export function ledgerDropTargetProps({
+  value,
+  onValueChange,
+  insertMode = 'template',
+  disabled,
+}: LedgerDropTargetOptions): LedgerDropTargetProps {
+  return {
+    onDragOver: (event) => {
+      if (disabled) return
+      if (!event.dataTransfer?.types?.includes(LEDGER_PATH_MIME)) return
+      event.preventDefault()
+      event.dataTransfer.dropEffect = 'copy'
+    },
+    onDrop: (event) => {
+      if (disabled) return
+      const target = event.currentTarget
+      const result = resolveLedgerDrop(event.dataTransfer, target, value, insertMode)
+      if (!result) return
+      event.preventDefault()
+      onValueChange(result.value)
+      window.requestAnimationFrame(() => {
+        target.focus()
+        if (typeof target.setSelectionRange === 'function') {
+          target.setSelectionRange(result.cursor, result.cursor)
+        }
+      })
+    },
+  }
+}

package/src/modules/workflows/components/fields/useActivityTypeOptions.ts

@@ -0,0 +1,19 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import '../../lib/activity-registry-bootstrap'
+import { listActivityTypes } from '../../lib/activity-registry'
+
+export interface ActivityTypeOption {
+  value: string
+  label: string
+}
+
+export function useActivityTypeOptions(): ActivityTypeOption[] {
+  const t = useT()
+  return useMemo(
+    () => listActivityTypes().map((entry) => ({ value: entry.id, label: t(entry.i18nKey) })),
+    [t]
+  )
+}

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

@@ -1,13 +1,29 @@
 "use client"
 
+/**
+ * Form-editor configuration — DEPRECATED (spec section 10).
+ *
+ * The form editor is retired: `/backend/definitions/create` and
+ * `/backend/definitions/[id]` now forward to the Studio, and nothing in this
+ * module builds a workflow `CrudForm` any more. Every export below stays for at
+ * least one minor release so third-party pages that embed the definition form
+ * keep compiling (BACKWARD_COMPATIBILITY.md deprecation protocol); they are
+ * scheduled for removal one minor after the UPGRADE_NOTES entry.
+ *
+ * @deprecated Author workflows in `/backend/definitions/visual-editor`.
+ */
+
 import * as React from 'react'
 import { z } from 'zod'
 import type { CrudField, CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
+import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
 import type { WorkflowDefinitionTrigger } from '../data/entities'
 
 /**
  * Form Values Type
  * Represents the structure of form data for creating/editing workflow definitions
+ *
+ * @deprecated Retired with the form editor (spec section 10) — author workflows in the Studio.
  */
 export type WorkflowDefinitionFormValues = {
   workflowId: string
@@ -28,6 +44,8 @@ export type WorkflowDefinitionFormValues = {
   steps: any[]
   transitions: any[]
   triggers: WorkflowDefinitionTrigger[]
+  loadedDefinition?: Record<string, unknown> | null
+  loadedMetadata?: Record<string, unknown> | null
   id?: string
   updatedAt?: string | null
 }
@@ -35,6 +53,8 @@ export type WorkflowDefinitionFormValues = {
 /**
  * Form Validation Schema
  * Extends the API schema with additional client-side validation
+ *
+ * @deprecated Retired with the form editor (spec section 10) — author workflows in the Studio.
  */
 export const workflowDefinitionFormSchema = z.object({
   workflowId: z.string()
@@ -64,6 +84,8 @@ export const workflowDefinitionFormSchema = z.object({
 
 /**
  * Default Form Values
+ *
+ * @deprecated Retired with the form editor (spec section 10) — author workflows in the Studio.
  */
 export const defaultFormValues: WorkflowDefinitionFormValues = {
   workflowId: '',
@@ -84,6 +106,8 @@ export const defaultFormValues: WorkflowDefinitionFormValues = {
 /**
  * Create Field Definitions
  * Returns field configurations for the CrudForm
+ *
+ * @deprecated Retired with the form editor (spec section 10) — author workflows in the Studio.
  */
 export function createFieldDefinitions(t: (key: string) => string): CrudField[] {
   return [
@@ -159,12 +183,17 @@ export function createFieldDefinitions(t: (key: string) => string): CrudField[]
 /**
  * Create Form Groups
  * Returns grouped layout configuration for the CrudForm
+ *
+ * @deprecated Retired with the form editor (spec section 10) — author workflows in the Studio.
  */
 export function createFormGroups(
   t: (key: string) => string,
   StepsEditorComponent: React.ComponentType<any>,
-  TransitionsEditorComponent: React.ComponentType<any>
+  TransitionsEditorComponent: React.ComponentType<any>,
+  options?: { onInvalidActivityConfigsChange?: (activityLabels: string[]) => void }
 ): CrudFormGroup[] {
+  const onInvalidActivityConfigsChange = options?.onInvalidActivityConfigsChange
+
   // Wrapper components to adapt CrudForm props
   const StepsEditorWrapper = (props: { value: any; setValue: (v: any) => void; error?: string; values?: any }) => {
     return <StepsEditorComponent value={props.value} onChange={props.setValue} error={props.error} />
@@ -172,7 +201,15 @@ export function createFormGroups(
 
   const TransitionsEditorWrapper = (props: { value: any; setValue: (v: any) => void; error?: string; values?: any }) => {
     // Pass the steps from values (all form values) so transitions can reference them
-    return <TransitionsEditorComponent value={props.value} onChange={props.setValue} steps={props.values?.steps || []} error={props.error} />
+    return (
+      <TransitionsEditorComponent
+        value={props.value}
+        onChange={props.setValue}
+        steps={props.values?.steps || []}
+        error={props.error}
+        onInvalidActivityConfigsChange={onInvalidActivityConfigsChange}
+      />
+    )
   }
 
   return [
@@ -231,10 +268,33 @@ export function createFormGroups(
   ]
 }
 
+/**
+ * Save gate for invalid activity configuration JSON.
+ *
+ * The activity config textareas keep invalid text local (so keystrokes are not
+ * lost), which means the form values still hold the last VALID config. Without
+ * this gate, saving while a textarea holds invalid JSON silently persists the
+ * stale config. Pages wire `createFormGroups`'s `onInvalidActivityConfigsChange`
+ * into state and call this at the top of their submit handler.
+ *
+ * @deprecated Retired with the form editor (spec section 10) — author workflows in the Studio.
+ */
+export function assertNoInvalidActivityConfigs(
+  invalidActivityLabels: string[],
+  t: (key: string, params?: Record<string, string | number>) => string,
+): void {
+  if (invalidActivityLabels.length === 0) return
+  throw createCrudFormError(
+    t('workflows.validation.invalidActivityConfigJson', { activity: invalidActivityLabels.join(', ') }),
+  )
+}
+
 import { toDateInputValue } from '@open-mercato/shared/lib/date/format'
 
 /**
  * Parse workflow definition to form values
+ *
+ * @deprecated Retired with the form editor (spec section 10) — author workflows in the Studio.
  */
 export function parseWorkflowToFormValues(workflow: any): WorkflowDefinitionFormValues {
   const updatedAt = workflow.updatedAt ?? workflow.updated_at ?? null
@@ -254,6 +314,8 @@ export function parseWorkflowToFormValues(workflow: any): WorkflowDefinitionForm
     steps: workflow.definition?.steps || [],
     transitions: workflow.definition?.transitions || [],
     triggers: workflow.definition?.triggers || [],
+    loadedDefinition: workflow.definition || null,
+    loadedMetadata: workflow.metadata || null,
     id: workflow.id,
     updatedAt: typeof updatedAt === 'string' ? updatedAt : updatedAt ? String(updatedAt) : null,
   }
@@ -261,6 +323,8 @@ export function parseWorkflowToFormValues(workflow: any): WorkflowDefinitionForm
 
 /**
  * Build API payload from form values
+ *
+ * @deprecated Retired with the form editor (spec section 10) — author workflows in the Studio.
  */
 export function buildWorkflowPayload(values: WorkflowDefinitionFormValues) {
   const triggers = values.triggers ?? []
@@ -269,11 +333,14 @@ export function buildWorkflowPayload(values: WorkflowDefinitionFormValues) {
   const category = (values['metadata.category'] || '').trim()
   const icon = (values['metadata.icon'] || '').trim()
   const tags = Array.isArray(values['metadata.tags']) ? values['metadata.tags'] : []
-  const metadata = {
+  const metadata: Record<string, unknown> = {
+    ...(values.loadedMetadata ?? {}),
     tags,
-    ...(category ? { category } : {}),
-    ...(icon ? { icon } : {}),
   }
+  if (category) metadata.category = category
+  else delete metadata.category
+  if (icon) metadata.icon = icon
+  else delete metadata.icon
   return {
     workflowId: values.workflowId,
     workflowName: values.workflowName,
@@ -283,10 +350,17 @@ export function buildWorkflowPayload(values: WorkflowDefinitionFormValues) {
     effectiveFrom: values.effectiveFrom || null,
     effectiveTo: values.effectiveTo || null,
     metadata,
-    definition: {
-      steps: values.steps,
-      transitions: values.transitions,
-      ...(triggers.length > 0 ? { triggers } : {}),
-    },
+    definition: buildLegacyDefinition(values, triggers),
+  }
+}
+
+function buildLegacyDefinition(values: WorkflowDefinitionFormValues, triggers: WorkflowDefinitionTrigger[]) {
+  const definition: Record<string, unknown> = {
+    ...(values.loadedDefinition ?? {}),
+    steps: values.steps,
+    transitions: values.transitions,
   }
+  if (triggers.length > 0) definition.triggers = triggers
+  else delete definition.triggers
+  return definition
 }

package/src/modules/workflows/components/mobile/MobileDefinitionDetail.tsx

@@ -31,6 +31,11 @@ interface MobileDefinitionDetailProps {
   onAddTransition: () => void
 }
 
+/**
+ * @deprecated The form editor is retired (spec section 10) — the mobile Studio
+ * (`components/mobile/MobileVisualEditor`) is the mobile authoring surface. Kept
+ * exported for at least one minor release; it has no call site in this module.
+ */
 export function MobileDefinitionDetail({
   values,
   onEditStep,

package/src/modules/workflows/components/mobile/MobileMetadataSheet.tsx

@@ -24,6 +24,16 @@ export interface MobileMetadataSheetProps {
   metadataHandlers: WorkflowMetadataHandlers
 }
 
+/**
+ * @deprecated Use `DefinitionMetadataDrawer` (`components/DefinitionMetadataDrawer.tsx`).
+ *
+ * This sheet was a second, divergent copy of the definition-metadata form and
+ * it never grew the fields the desktop one gained — `contextSchema`, the
+ * interpolation mode and the definition-level error handler were simply not
+ * editable on mobile. Both surfaces now render the shared drawer. Kept
+ * exported for one minor per the deprecation protocol; it has no call site
+ * left in this module.
+ */
 export function MobileMetadataSheet({
   open,
   onOpenChange,

package/src/modules/workflows/components/mobile/MobileTaskForm.tsx

@@ -17,7 +17,8 @@ import {
 import { Separator } from '@open-mercato/ui/primitives/separator'
 import { JsonDisplay } from '@open-mercato/ui/backend/JsonDisplay'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import type { UserTaskResponse, UserTaskStatus, JsonSchemaField } from '../../data/types'
+import type { UserTaskDecision, UserTaskResponse, UserTaskStatus, JsonSchemaField } from '../../data/types'
+import { flattenTaskText } from '../../lib/task-resolution'
 
 interface MobileTaskFormProps {
   task: UserTaskResponse
@@ -31,6 +32,13 @@ interface MobileTaskFormProps {
   onSubmit: (e: React.FormEvent) => void
   onCancel: () => void
   getStatusBadgeClass: (status: UserTaskStatus) => string
+  /**
+   * Decision buttons authored on the step (spec §6.2). When present they REPLACE
+   * the generic "Complete" button: a step that offers named outcomes must not
+   * also offer an unnamed one, or the recorded decision becomes optional.
+   */
+  decisions?: UserTaskDecision[]
+  onDecision?: (decisionId: string) => void
 }
 
 export function MobileTaskForm({
@@ -45,6 +53,8 @@ export function MobileTaskForm({
   onSubmit,
   onCancel,
   getStatusBadgeClass,
+  decisions,
+  onDecision,
 }: MobileTaskFormProps) {
   const t = useT()
 
@@ -281,24 +291,50 @@ export function MobileTaskForm({
           </div>
 
           <div className="sticky bottom-0 border-t bg-background p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] z-10">
-            <div className="flex gap-3">
-              <Button
-                type="submit"
-                disabled={submitting}
-                className="flex-1 h-11"
-              >
-                {submitting ? t('workflows.tasks.detail.submitting') : t('workflows.tasks.detail.completeTask')}
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                onClick={onCancel}
-                disabled={submitting}
-                className="h-11"
-              >
-                {t('common.cancel')}
-              </Button>
-            </div>
+            {decisions && decisions.length > 0 ? (
+              <div className="flex flex-col gap-2" data-testid="mobile-task-decisions">
+                {decisions.map((decision) => (
+                  <Button
+                    key={decision.id}
+                    type="button"
+                    variant={decision.style === 'destructive' ? 'destructive' : decision.style === 'secondary' ? 'outline' : 'default'}
+                    disabled={submitting}
+                    onClick={() => onDecision?.(decision.id)}
+                    className="h-11"
+                  >
+                    {flattenTaskText(decision.label) ?? decision.id}
+                  </Button>
+                ))}
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onCancel}
+                  disabled={submitting}
+                  className="h-11"
+                >
+                  {t('common.cancel')}
+                </Button>
+              </div>
+            ) : (
+              <div className="flex gap-3">
+                <Button
+                  type="submit"
+                  disabled={submitting}
+                  className="flex-1 h-11"
+                >
+                  {submitting ? t('workflows.tasks.detail.submitting') : t('workflows.tasks.detail.completeTask')}
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onCancel}
+                  disabled={submitting}
+                  className="h-11"
+                >
+                  {t('common.cancel')}
+                </Button>
+              </div>
+            )}
           </div>
         </form>
       )}