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

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

@@ -0,0 +1,323 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { ConditionBuilder } from '@open-mercato/core/modules/business_rules/components/ConditionBuilder'
+import type { GroupCondition } from '@open-mercato/core/modules/business_rules/components/utils/conditionValidation'
+import { BusinessRulesSelector } from '../BusinessRulesSelector'
+import { VariablePickerButton } from './VariablePickerButton'
+import { ledgerDropTargetProps } from './ledgerDropTarget'
+import type { LedgerEntry } from '../../lib/context-ledger'
+import {
+  collectDuplicateCaseValues,
+  ensureOtherwiseRoute,
+  type BranchingRouteDraft,
+  type SwitchRoutesValue,
+} from '../../lib/branching-routes'
+
+/**
+ * If/Else + Switch route inspectors (spec
+ * 2026-07-26-workflows-ux-redesign.md section 5.8).
+ *
+ * Both inspectors edit the branching node's OUTGOING TRANSITIONS and nothing
+ * else: a case route carries either an inline condition in the business_rules
+ * expression language (edited with the shared ConditionBuilder) or a reference
+ * to a saved Business Rule, and exactly one route stays unconditioned as the
+ * otherwise route. Compilation into edge data lives in the pure
+ * lib/branching-routes.ts.
+ */
+
+interface RouteHeaderProps {
+  route: BranchingRouteDraft
+  disabled?: boolean
+  onMakeOtherwise: () => void
+}
+
+function RouteHeader({ route, disabled, onMakeOtherwise }: RouteHeaderProps) {
+  const t = useT()
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <div className="flex items-center gap-2">
+        <Badge variant={route.kind === 'otherwise' ? 'secondary' : 'outline'}>
+          {route.kind === 'otherwise'
+            ? t('workflows.branching.otherwiseBadge', 'Otherwise')
+            : t('workflows.branching.caseBadge', 'Case')}
+        </Badge>
+        <span className="text-xs text-muted-foreground">
+          {t('workflows.branching.routeTarget', 'Routes to {stepId}', { stepId: route.toStepId })}
+        </span>
+      </div>
+      {route.kind === 'case' && (
+        <Button type="button" variant="ghost" size="sm" onClick={onMakeOtherwise} disabled={disabled}>
+          {t('workflows.branching.makeOtherwise', 'Use as otherwise')}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+function EmptyRoutesAlert() {
+  const t = useT()
+  return (
+    <Alert variant="info">
+      <AlertDescription>
+        {t(
+          'workflows.branching.noRoutes',
+          'Connect this step to its next steps on the canvas — every connection becomes a route you can condition here.',
+        )}
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+function SingleRouteAlert() {
+  const t = useT()
+  return (
+    <Alert variant="warning">
+      <AlertDescription>
+        {t(
+          'workflows.branching.singleRoute',
+          'Add a second outgoing connection so this step has both a conditioned route and an otherwise route.',
+        )}
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+function useNormalizedRoutes(routes: BranchingRouteDraft[] | undefined): BranchingRouteDraft[] {
+  return useMemo(() => ensureOtherwiseRoute(Array.isArray(routes) ? routes : []), [routes])
+}
+
+export interface IfElseRoutesFieldProps {
+  id: string
+  value?: BranchingRouteDraft[]
+  setValue: (next: BranchingRouteDraft[]) => void
+  disabled?: boolean
+}
+
+export function IfElseRoutesField({ id, value, setValue, disabled }: IfElseRoutesFieldProps) {
+  const t = useT()
+  const routes = useNormalizedRoutes(value)
+  const [ruleSelectorTransitionId, setRuleSelectorTransitionId] = useState<string | null>(null)
+
+  const updateRoute = (transitionId: string, patch: Partial<BranchingRouteDraft>) => {
+    setValue(routes.map((route) => (route.transitionId === transitionId ? { ...route, ...patch } : route)))
+  }
+
+  const makeOtherwise = (transitionId: string) => {
+    setValue(
+      ensureOtherwiseRoute(
+        routes.map((route) => ({
+          ...route,
+          kind: route.transitionId === transitionId ? 'otherwise' : 'case',
+        })),
+      ),
+    )
+  }
+
+  if (routes.length === 0) return <EmptyRoutesAlert />
+
+  return (
+    <div className="flex flex-col gap-4">
+      {routes.length === 1 && <SingleRouteAlert />}
+      {routes.map((route) => (
+        <div key={route.transitionId} className="rounded-md border border-border p-3">
+          <RouteHeader route={route} disabled={disabled} onMakeOtherwise={() => makeOtherwise(route.transitionId)} />
+
+          {route.kind === 'otherwise' ? (
+            <p className="mt-2 text-xs text-muted-foreground">
+              {t(
+                'workflows.branching.otherwiseHint',
+                'The otherwise route runs when no other route matches. It is always evaluated last.',
+              )}
+            </p>
+          ) : (
+            <div className="mt-3 flex flex-col gap-3">
+              <SwitchField
+                id={`${id}-${route.transitionId}-mode`}
+                label={t('workflows.branching.useBusinessRule', 'Use a Business Rule instead')}
+                checked={route.mode === 'rule'}
+                onCheckedChange={(checked) =>
+                  updateRoute(route.transitionId, { mode: checked ? 'rule' : 'inline' })
+                }
+                disabled={disabled}
+              />
+
+              {route.mode === 'rule' ? (
+                <div className="flex items-center gap-2">
+                  <span className="text-xs font-mono text-muted-foreground">
+                    {route.ruleId || t('workflows.branching.noRuleSelected', 'No rule selected')}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setRuleSelectorTransitionId(route.transitionId)}
+                    disabled={disabled}
+                  >
+                    {t('workflows.branching.selectRule', 'Select rule')}
+                  </Button>
+                </div>
+              ) : (
+                <ConditionBuilder
+                  value={route.condition ?? null}
+                  onChangeAction={(next: GroupCondition) => updateRoute(route.transitionId, { condition: next })}
+                  entityType="workflow:transition"
+                />
+              )}
+            </div>
+          )}
+        </div>
+      ))}
+
+      <BusinessRulesSelector
+        isOpen={ruleSelectorTransitionId !== null}
+        onClose={() => setRuleSelectorTransitionId(null)}
+        onSelect={(ruleId) => {
+          if (ruleSelectorTransitionId) updateRoute(ruleSelectorTransitionId, { ruleId, mode: 'rule' })
+          setRuleSelectorTransitionId(null)
+        }}
+        title={t('workflows.branching.selectRuleTitle', 'Select a business rule')}
+        onlyEnabled
+      />
+    </div>
+  )
+}
+
+export interface SwitchRoutesFieldProps {
+  id: string
+  value?: SwitchRoutesValue
+  setValue: (next: SwitchRoutesValue) => void
+  disabled?: boolean
+  ledgerEntries?: LedgerEntry[]
+}
+
+export function SwitchRoutesField({ id, value, setValue, disabled, ledgerEntries }: SwitchRoutesFieldProps) {
+  const t = useT()
+  const field = value?.field ?? ''
+  const routes = useNormalizedRoutes(value?.routes)
+  const duplicates = useMemo(() => collectDuplicateCaseValues(routes), [routes])
+
+  const commit = (nextField: string, nextRoutes: BranchingRouteDraft[]) => {
+    setValue({ field: nextField, routes: nextRoutes })
+  }
+
+  const updateRoute = (transitionId: string, patch: Partial<BranchingRouteDraft>) => {
+    commit(field, routes.map((route) => (route.transitionId === transitionId ? { ...route, ...patch } : route)))
+  }
+
+  const makeOtherwise = (transitionId: string) => {
+    commit(
+      field,
+      ensureOtherwiseRoute(
+        routes.map((route) => ({
+          ...route,
+          kind: route.transitionId === transitionId ? 'otherwise' : 'case',
+        })),
+      ),
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div>
+        <Label htmlFor={`${id}-field`} className="mb-1 text-xs font-medium">
+          {t('workflows.branching.switchField', 'Field')}
+        </Label>
+        <div className="flex items-center gap-1">
+          <Input
+            id={`${id}-field`}
+            type="text"
+            value={field}
+            onChange={(event) => commit(event.target.value, routes)}
+            placeholder={t('workflows.branching.switchFieldPlaceholder', 'order.status')}
+            className="flex-1 font-mono text-xs"
+            disabled={disabled}
+            {...ledgerDropTargetProps({
+              value: field,
+              onValueChange: (nextValue) => commit(nextValue, routes),
+              insertMode: 'bare',
+              disabled,
+            })}
+          />
+          <VariablePickerButton
+            targetId={`${id}-field`}
+            value={field}
+            onValueChange={(nextValue) => commit(nextValue, routes)}
+            ledgerEntries={ledgerEntries}
+            insertMode="bare"
+            disabled={disabled}
+          />
+        </div>
+        <p className="mt-0.5 text-xs text-muted-foreground">
+          {t('workflows.branching.switchFieldHint', 'The context path this step switches on. Each case compares it for equality.')}
+        </p>
+      </div>
+
+      {duplicates.length > 0 && (
+        <Alert variant="warning">
+          <AlertDescription>
+            {t(
+              'workflows.branching.duplicateCases',
+              'Duplicate case value(s): {values}. Only the highest-priority route can ever match.',
+              { values: duplicates.join(', ') },
+            )}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {routes.length === 0 && <EmptyRoutesAlert />}
+      {routes.length === 1 && <SingleRouteAlert />}
+
+      {routes.map((route) => (
+        <div key={route.transitionId} className="rounded-md border border-border p-3">
+          <RouteHeader route={route} disabled={disabled} onMakeOtherwise={() => makeOtherwise(route.transitionId)} />
+
+          {route.kind === 'otherwise' ? (
+            <p className="mt-2 text-xs text-muted-foreground">
+              {t(
+                'workflows.branching.otherwiseRequired',
+                'A Switch always keeps one otherwise route so an unmatched value cannot stall the workflow.',
+              )}
+            </p>
+          ) : (
+            <div className="mt-3 grid gap-3 sm:grid-cols-2">
+              <div>
+                <Label htmlFor={`${id}-${route.transitionId}-label`} className="mb-1 text-xs font-medium">
+                  {t('workflows.branching.caseLabelField', 'Label')}
+                </Label>
+                <Input
+                  id={`${id}-${route.transitionId}-label`}
+                  type="text"
+                  value={route.caseLabel ?? ''}
+                  onChange={(event) => updateRoute(route.transitionId, { caseLabel: event.target.value })}
+                  className="text-xs"
+                  disabled={disabled}
+                />
+              </div>
+              <div>
+                <Label htmlFor={`${id}-${route.transitionId}-value`} className="mb-1 text-xs font-medium">
+                  {t('workflows.branching.caseValueField', 'Value')}
+                </Label>
+                <Input
+                  id={`${id}-${route.transitionId}-value`}
+                  type="text"
+                  value={route.caseValue ?? ''}
+                  onChange={(event) => updateRoute(route.transitionId, { caseValue: event.target.value, mode: 'inline' })}
+                  className="font-mono text-xs"
+                  disabled={disabled}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

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

@@ -4,9 +4,11 @@ import { useState, useEffect } from 'react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
-import { Plus, Trash2, AlertCircle } from 'lucide-react'
+import { Plus, Trash2, AlertCircle, Pencil } from 'lucide-react'
 import type { CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudForm'
+import { InlineRuleEditor } from '@open-mercato/core/modules/business_rules/components/InlineRuleEditor'
 import { BusinessRulesSelector, type BusinessRule } from '../BusinessRulesSelector'
+import { BusinessRuleUsagePanel } from '../BusinessRuleUsagePanel'
 import { apiFetch } from '@open-mercato/ui/backend/utils/api'
 import { EmptyState } from '@open-mercato/ui/backend/EmptyState'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
@@ -32,6 +34,7 @@ interface ConditionWithDetails {
   required: boolean
   ruleName?: string
   ruleType?: string
+  recordId?: string
   loading?: boolean
   error?: boolean
 }
@@ -65,7 +68,9 @@ export function BusinessRuleConditionsEditor({
 }: BusinessRuleConditionsEditorProps) {
   const t = useT()
   const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingRule, setEditingRule] = useState<{ recordId: string; ruleId: string } | null>(null)
   const [conditionsWithDetails, setConditionsWithDetails] = useState<ConditionWithDetails[]>([])
+  const [detailsRefreshToken, setDetailsRefreshToken] = useState(0)
 
   const conditions = Array.isArray(value) ? value : []
 
@@ -82,7 +87,7 @@ export function BusinessRuleConditionsEditor({
     normalized.forEach((condition, index) => {
       fetchRuleDetails(condition.ruleId, index)
     })
-  }, [JSON.stringify(conditions.map(normalizeCondition))])
+  }, [JSON.stringify(conditions.map(normalizeCondition)), detailsRefreshToken])
 
   const fetchRuleDetails = async (ruleId: string, index: number) => {
     try {
@@ -100,6 +105,7 @@ export function BusinessRuleConditionsEditor({
               ...updated[index],
               ruleName: rule?.ruleName || ruleId,
               ruleType: rule?.ruleType,
+              recordId: rule?.id,
               loading: false,
               error: !rule,
             }
@@ -231,17 +237,31 @@ export function BusinessRuleConditionsEditor({
                     />
                   </div>
 
+                  {condition.recordId && !condition.loading && !condition.error ? (
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      disabled={disabled}
+                      className="ml-2 flex-shrink-0"
+                      aria-label={t('workflows.businessRules.editRule')}
+                      onClick={() => setEditingRule({ recordId: condition.recordId as string, ruleId: condition.ruleId })}
+                    >
+                      <Pencil className="size-4" />
+                    </Button>
+                  ) : null}
+
                   {/* Delete Button */}
                   <ConfirmDialog
                     trigger={
                       <Button
                         type="button"
-                        variant="ghost"
+                        variant="destructive-ghost"
                         size="sm"
                         disabled={disabled}
                         className="ml-2 flex-shrink-0"
                       >
-                        <Trash2 className="size-4 text-destructive" />
+                        <Trash2 className="size-4" />
                       </Button>
                     }
                     title={t('workflows.fieldEditors.businessRuleConditions.removeCondition')}
@@ -268,6 +288,18 @@ export function BusinessRuleConditionsEditor({
         filterRuleType={filterRuleType}
         onlyEnabled={true}
       />
+
+      {/* Inline rule editor (business_rules-owned) with the workflows usage panel */}
+      <InlineRuleEditor
+        open={editingRule !== null}
+        onOpenChange={(open) => { if (!open) setEditingRule(null) }}
+        recordId={editingRule?.recordId ?? null}
+        onSaved={() => {
+          setEditingRule(null)
+          setDetailsRefreshToken((token) => token + 1)
+        }}
+        usagePanel={<BusinessRuleUsagePanel ruleId={editingRule?.ruleId ?? null} />}
+      />
     </div>
   )
 }

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

@@ -0,0 +1,158 @@
+'use client'
+
+import * as React from 'react'
+import { AlertTriangle, Lock } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { ComboboxInput, type ComboboxOption } from '@open-mercato/ui/backend/inputs/ComboboxInput'
+
+type WorkflowSafeCommandListResponse = {
+  items?: Array<{
+    commandId?: string | null
+    labelKey?: string | null
+    enabled?: boolean | null
+  }>
+}
+
+type CommandCandidate = {
+  commandId: string
+  labelKey: string | null
+  enabled: boolean
+}
+
+export type CommandPickerProps = {
+  id?: string
+  value: string
+  onChange: (next: string) => void
+  disabled?: boolean
+}
+
+function toCandidates(items: WorkflowSafeCommandListResponse['items']): CommandCandidate[] {
+  if (!Array.isArray(items)) return []
+  const seen = new Set<string>()
+  const candidates: CommandCandidate[] = []
+  for (const item of items) {
+    const commandId = typeof item?.commandId === 'string' ? item.commandId.trim() : ''
+    if (!commandId || seen.has(commandId)) continue
+    seen.add(commandId)
+    candidates.push({
+      commandId,
+      labelKey: typeof item?.labelKey === 'string' && item.labelKey ? item.labelKey : null,
+      // Absent means an older server that predates tenant enablement; treating
+      // it as enabled keeps this picker working against one instead of
+      // declaring every command unavailable.
+      enabled: item?.enabled !== false,
+    })
+  }
+  return candidates
+}
+
+/**
+ * The UPDATE_ENTITY command field.
+ *
+ * The picker offers ONLY commands this tenant has enabled, because offering one
+ * it has not is how an author ships a workflow that fails on its first run —
+ * this module's recurring bug class. The disabled candidates are still shown,
+ * below the field, with the reason and the remedy: the field accepts free text,
+ * so silently dropping them would replace a runtime failure with an
+ * unanswerable "why is `catalog.products.update` not in the list?".
+ */
+export function CommandPicker({ id, value, onChange, disabled }: CommandPickerProps) {
+  const t = useT()
+  const [lookupFailed, setLookupFailed] = React.useState(false)
+  const [candidates, setCandidates] = React.useState<CommandCandidate[]>([])
+
+  const loadCommandSuggestions = React.useCallback(async (): Promise<ComboboxOption[]> => {
+    try {
+      const call = await apiCall<WorkflowSafeCommandListResponse>(
+        '/api/workflows/commands',
+        undefined,
+        { fallback: { items: [] } },
+      )
+      if (!call.ok || !Array.isArray(call.result?.items)) {
+        setLookupFailed(true)
+        return []
+      }
+      setLookupFailed(false)
+      const loaded = toCandidates(call.result.items)
+      setCandidates(loaded)
+      return loaded
+        .filter((candidate) => candidate.enabled)
+        .map((candidate) => {
+          const label = candidate.labelKey ? t(candidate.labelKey, candidate.commandId) : candidate.commandId
+          return {
+            value: candidate.commandId,
+            label,
+            // The id is the secondary line ONLY when the label is not already
+            // the id — repeating it would render the same string twice.
+            description: label === candidate.commandId ? null : candidate.commandId,
+          }
+        })
+    } catch {
+      setLookupFailed(true)
+      return []
+    }
+  }, [t])
+
+  const unavailable = React.useMemo(
+    () => candidates.filter((candidate) => !candidate.enabled),
+    [candidates],
+  )
+
+  const selected = React.useMemo(
+    () => candidates.find((candidate) => candidate.commandId === value.trim()) ?? null,
+    [candidates, value],
+  )
+
+  const selectedIsUnavailable = Boolean(value.trim()) && candidates.length > 0 && !selected?.enabled
+
+  return (
+    <div id={id}>
+      <ComboboxInput
+        value={value}
+        onChange={onChange}
+        placeholder={t('workflows.commandPicker.placeholder')}
+        loadSuggestions={loadCommandSuggestions}
+        allowCustomValues
+        disabled={disabled}
+      />
+      {lookupFailed ? (
+        <p className="text-xs text-muted-foreground mt-1">
+          {t('workflows.commandPicker.lookupUnavailable')}
+        </p>
+      ) : null}
+      {selectedIsUnavailable ? (
+        <p className="text-xs text-status-warning-text mt-1 flex items-start gap-1">
+          <AlertTriangle className="size-3.5 shrink-0 mt-0.5" aria-hidden="true" />
+          <span>
+            <span className="sr-only">{t('workflows.commandPicker.warningLabel')} </span>
+            {selected
+              ? t('workflows.commandPicker.selectedDisabled')
+              : t('workflows.commandPicker.selectedUnknown')}
+          </span>
+        </p>
+      ) : null}
+      {unavailable.length > 0 ? (
+        <div className="mt-2 rounded-md border border-border bg-muted/40 p-2">
+          <p className="text-xs font-medium text-muted-foreground flex items-center gap-1">
+            <Lock className="size-3.5 shrink-0" aria-hidden="true" />
+            {t('workflows.commandPicker.unavailableTitle')}
+          </p>
+          <ul className="mt-1 space-y-0.5">
+            {unavailable.map((candidate) => (
+              <li key={candidate.commandId} className="text-xs text-muted-foreground">
+                <span className="font-mono">{candidate.commandId}</span>
+                {candidate.labelKey ? (
+                  <span> — {t(candidate.labelKey, candidate.commandId)}</span>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {t('workflows.commandPicker.unavailableHint')}
+          </p>
+        </div>
+      ) : null}
+    </div>
+  )
+}