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

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

@@ -0,0 +1,145 @@
+'use client'
+
+import { Bot, Clock, CornerDownLeft, Database, Filter, FunctionSquare, Globe, Mail, Radio, Variable, Webhook, Workflow, type LucideIcon } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import '../lib/activity-registry-bootstrap'
+import { getActivityType } from '../lib/activity-registry'
+import type { RouteChipModel, RouteChipSection } from '../lib/route-chips'
+import { ROUTE_CHIP_CLASS, ROUTE_CHIP_ICON_CLASS, ROUTE_CHIP_LABEL_ICON_CLASS } from '../lib/node-geometry'
+
+/**
+ * Icon names the activity registry declares (`ActivityTypeEntry.icon`) mapped to
+ * their lucide components. Kept as an explicit map — a dynamic `lucide[name]`
+ * lookup would pull the whole icon set into the editor chunk (#3169).
+ */
+const ACTIVITY_ICONS: Record<string, LucideIcon> = {
+  Mail,
+  Radio,
+  Database,
+  Webhook,
+  FunctionSquare,
+  Clock,
+  Globe,
+  Variable,
+  Bot,
+}
+
+export function resolveActivityIcon(activityType: string): LucideIcon {
+  const entry = getActivityType(activityType)
+  return (entry && ACTIVITY_ICONS[entry.icon]) || Workflow
+}
+
+export type WorkflowRouteChipsProps = {
+  model: RouteChipModel
+  /** Canvas zoom; below the semantic-zoom threshold the caller passes `collapsed`. */
+  collapsed?: boolean
+  onOpenSection?: (section: RouteChipSection) => void
+  /**
+   * Open the focused single-activity modal for one activity chip. When omitted,
+   * an activity chip falls back to `onOpenSection('activities')` (the full
+   * transition inspector), preserving the pre-existing behavior.
+   */
+  onOpenActivity?: (activityId: string) => void
+}
+
+/**
+ * WorkflowRouteChips — the condition / activity / otherwise chip row a
+ * transition renders along its edge (spec section 4.4, issue #4244).
+ *
+ * Density management: activity chips cap at `ROUTE_CHIP_LIMIT` with a `+N`
+ * overflow badge, and below the semantic-zoom threshold the whole row collapses
+ * to dots so a 60-node flow stays navigable. Every chip is a button with an
+ * accessible label and an icon, never colour alone.
+ */
+export function WorkflowRouteChips({ model, collapsed = false, onOpenSection, onOpenActivity }: WorkflowRouteChipsProps) {
+  const t = useT()
+
+  if (model.isEmpty) return null
+
+  const dotCount = (model.conditionSummary ? 1 : 0) + model.activities.length + model.overflowCount + (model.isOtherwise ? 1 : 0)
+
+  if (collapsed) {
+    return (
+      <div
+        className="flex items-center gap-0.5"
+        role="img"
+        aria-label={t('workflows.routeChips.collapsed', { count: dotCount })}
+        data-testid="route-chips-collapsed"
+      >
+        {Array.from({ length: Math.min(dotCount, 5) }).map((_, index) => (
+          <span key={index} className="size-1.5 rounded-full bg-muted-foreground" />
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-1" data-testid="route-chips">
+      {model.conditionSummary ? (
+        <button
+          type="button"
+          className={`${ROUTE_CHIP_CLASS} border-border text-foreground hover:border-primary`}
+          aria-label={t('workflows.routeChips.conditionLabel', { summary: model.conditionSummary })}
+          onClick={(event) => {
+            // The chip lives in ReactFlow's EdgeLabelRenderer portal; a synthetic
+            // click bubbles through the React tree to the edge wrapper and would
+            // also fire onEdgeClick (opening the full transition editor). Stop it
+            // so a chip opens only its own surface.
+            event.stopPropagation()
+            onOpenSection?.('condition')
+          }}
+        >
+          <Filter className={`${ROUTE_CHIP_LABEL_ICON_CLASS} shrink-0`} aria-hidden="true" />
+          <span className="font-mono">{model.conditionSummary}</span>
+        </button>
+      ) : null}
+
+      {model.isOtherwise ? (
+        <span
+          className={`${ROUTE_CHIP_CLASS} border-dashed border-border text-muted-foreground`}
+          data-testid="route-chip-otherwise"
+        >
+          <CornerDownLeft className={`${ROUTE_CHIP_LABEL_ICON_CLASS} shrink-0`} aria-hidden="true" />
+          {t('workflows.routeChips.otherwise')}
+        </span>
+      ) : null}
+
+      {model.activities.map((activity) => {
+        const Icon = resolveActivityIcon(activity.activityType)
+        const entry = getActivityType(activity.activityType)
+        const label = entry ? t(entry.i18nKey) : activity.activityType
+        return (
+          <button
+            key={activity.activityId}
+            type="button"
+            className={`${ROUTE_CHIP_CLASS} border-border text-muted-foreground hover:border-primary hover:text-foreground`}
+            aria-label={t('workflows.routeChips.activityLabel', { activity: label })}
+            title={label}
+            onClick={(event) => {
+              event.stopPropagation()
+              if (onOpenActivity) onOpenActivity(activity.activityId)
+              else onOpenSection?.('activities')
+            }}
+          >
+            <Icon className={`${ROUTE_CHIP_ICON_CLASS} shrink-0`} aria-hidden="true" />
+          </button>
+        )
+      })}
+
+      {model.overflowCount > 0 ? (
+        <button
+          type="button"
+          className={`${ROUTE_CHIP_CLASS} border-border text-muted-foreground hover:border-primary`}
+          aria-label={t('workflows.routeChips.overflowLabel', { count: model.overflowCount })}
+          onClick={(event) => {
+            event.stopPropagation()
+            onOpenSection?.('activities')
+          }}
+          data-testid="route-chip-overflow"
+        >
+          +{model.overflowCount}
+        </button>
+      ) : null}
+    </div>
+  )
+}

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

@@ -1,8 +1,17 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { apiFetch } from '@open-mercato/ui/backend/utils/api'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@open-mercato/ui/primitives/dialog'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Badge } from '@open-mercato/ui/primitives/badge'
@@ -60,6 +69,11 @@ export interface WorkflowSelectorProps {
  * - Exclude already-selected workflows
  * - Loading and error states
  * - Responsive grid layout
+ *
+ * A wide Drawer rather than a modal: this is a searchable record BROWSER, not a
+ * tiny picker — each row carries a version chip, an enabled state and a
+ * description, which a Popover cannot hold and a CommandMenu would flatten
+ * away. Escape cancels; there is no submit, selection IS the primary action.
  */
 export function WorkflowSelector({
   isOpen,
@@ -72,6 +86,7 @@ export function WorkflowSelector({
   emptyMessage,
   searchPlaceholder = 'Search by workflow ID, name, or description...',
 }: WorkflowSelectorProps) {
+  const t = useT()
   const [workflows, setWorkflows] = useState<WorkflowDefinition[]>([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -156,12 +171,16 @@ export function WorkflowSelector({
   const filteredWorkflows = getFilteredWorkflows()
 
   return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-4xl max-h-[85vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
+    <Drawer open={isOpen} onOpenChange={(next) => { if (!next) handleClose() }}>
+      <DrawerContent
+        data-testid="workflow-selector-drawer"
+        className="w-full max-w-none sm:w-3/5"
+        closeAriaLabel={t('workflows.selectors.workflow.close', 'Close workflow picker')}
+      >
+        <DrawerHeader>
+          <DrawerTitle>{title}</DrawerTitle>
+          <DrawerDescription>{description}</DrawerDescription>
+        </DrawerHeader>
 
         {/* Search Input */}
         <div className="px-6">
@@ -176,7 +195,7 @@ export function WorkflowSelector({
         </div>
 
         {/* Workflows List */}
-        <div className="flex-1 overflow-y-auto px-6 py-4 min-h-[400px]">
+        <DrawerBody className="py-4">
           {loading ? (
             <div className="flex flex-col items-center justify-center py-12">
               <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
@@ -273,18 +292,18 @@ export function WorkflowSelector({
               </div>
             </>
           )}
-        </div>
+        </DrawerBody>
 
-        <DialogFooter>
+        <DrawerFooter>
           <Button
             type="button"
             variant="outline"
             onClick={handleClose}
           >
-            Cancel
+            {t('common.cancel', 'Cancel')}
           </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   )
 }

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

@@ -1,9 +1,15 @@
-import { BaseEdge, EdgeProps, EdgeLabelRenderer, getStraightPath } from '@xyflow/react'
+import { useState } from 'react'
+import { BaseEdge, EdgeProps, EdgeLabelRenderer, getBezierPath, useStore } from '@xyflow/react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { WorkflowTransitionLabel } from './WorkflowTransitionLabel'
+import { WorkflowRouteChips } from './WorkflowRouteChips'
 import { EDGE_COLORS, EdgeState } from '../lib/status-colors'
+import { buildRouteChipModel, routeCarriesCondition, ROUTE_CHIP_ZOOM_THRESHOLD, type RouteChipSection } from '../lib/route-chips'
+import { requestRouteActivityEdit, requestRouteChipSection } from '../lib/route-chip-events'
 
 export function WorkflowTransitionEdge({
   id,
+  source,
   sourceX,
   sourceY,
   targetX,
@@ -13,40 +19,107 @@ export function WorkflowTransitionEdge({
   data,
   markerEnd,
 }: EdgeProps) {
-  const state = (data?.state || 'pending') as EdgeState
-  const label = (data?.label as string) || ''
+  const t = useT()
+  const [hovered, setHovered] = useState(false)
+  // An error route (spec 5.9) always renders in its own state: the persisted
+  // `state` field tracks run progress, the route kind is structural.
+  const isErrorRoute = data?.kind === 'error'
+  const state = (isErrorRoute ? 'error' : data?.state || 'pending') as EdgeState
+  const errorRouteLabel = t('workflows.transitions.errorRoute', 'On error')
+  const label = (data?.label as string) || (isErrorRoute ? errorRouteLabel : '')
   const colors = EDGE_COLORS[state]
+  // Status is never color-only: the error route pairs its red dashed stroke with
+  // a permanently visible icon+label chip, not just a hover affordance.
+  const showLabel = Boolean(label) && (hovered || isErrorRoute)
 
-  const [edgePath, labelX, labelY] = getStraightPath({
+  // Semantic zoom (spec 4.4): the chip row collapses to dots when the canvas is
+  // zoomed out, so a 60-node flow reads as structure instead of a wall of text.
+  const isZoomedOut = useStore((store) => store.transform[2] < ROUTE_CHIP_ZOOM_THRESHOLD)
+  // `otherwise` is relative to the siblings leaving the same step. The selector
+  // returns a boolean so this edge only re-renders when the answer flips.
+  const hasConditionedSibling = useStore((store) =>
+    store.edges.some(
+      (edge) =>
+        edge.source === source
+        && edge.id !== id
+        && edge.data?.kind !== 'error'
+        && routeCarriesCondition(edge.data ?? {}),
+    ),
+  )
+
+  const chipModel = buildRouteChipModel({
+    condition: data?.condition,
+    preConditions: data?.preConditions,
+    activities: data?.activities,
+    hasConditionedSibling,
+  })
+  const showChips = !isErrorRoute && !chipModel.isEmpty
+
+  const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
+    sourcePosition,
     targetX,
     targetY,
+    targetPosition,
   })
 
+  const openSection = (section: RouteChipSection) => requestRouteChipSection(id, section)
+  const openActivity = (activityId: string) => requestRouteActivityEdit(id, activityId)
+
+  // Spec section 4.6: a route is a graph element a screen reader must be able to
+  // name. An error route says so, a labelled route reads its label, and an
+  // unlabelled one still announces that it is a route rather than a bare path.
+  const routeAriaLabel = isErrorRoute
+    ? errorRouteLabel
+    : label
+      ? t('workflows.visualEditor.routeLabelled', 'Route: {label}', { label })
+      : t('workflows.visualEditor.routeUnlabelled', 'Route')
+
   return (
     <>
       <BaseEdge
         id={id}
         path={edgePath}
         markerEnd={markerEnd}
+        role="img"
+        aria-label={routeAriaLabel}
         style={{
           stroke: colors.stroke,
-          strokeWidth: 2,
-          strokeDasharray: colors.dashed ? '5,5' : undefined,
+          strokeWidth: colors.strokeWidth,
+          strokeDasharray: colors.dashed ? colors.dashArray : undefined,
         }}
       />
-      {label && (
+      {/* Invisible hit path. Deliberately independent of the visible stroke
+          width: thinning the wire must not make a route harder to grab for
+          selection or endpoint reattachment. */}
+      <path
+        d={edgePath}
+        fill="none"
+        stroke="transparent"
+        strokeWidth={20}
+        className="react-flow__edge-interaction"
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      />
+      {(showLabel || showChips) && (
         <EdgeLabelRenderer>
           <div
             style={{
               position: 'absolute',
               transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-              pointerEvents: 'all',
+              pointerEvents: showChips ? 'all' : 'none',
+              // Overlay the label above node cards when the tight layout makes the
+              // midpoint pill overlap a neighbour. The viewport is the stacking
+              // context and selected nodes elevate to ~1000, so sit clearly above.
+              zIndex: 1500,
             }}
-            className="nodrag nopan"
+            className="nodrag nopan flex flex-col items-center gap-1"
           >
-            <WorkflowTransitionLabel label={label} state={state} />
+            {showLabel ? <WorkflowTransitionLabel label={label} state={state} /> : null}
+            {showChips ? (
+              <WorkflowRouteChips model={chipModel} collapsed={isZoomedOut} onOpenSection={openSection} onOpenActivity={openActivity} />
+            ) : null}
           </div>
         </EdgeLabelRenderer>
       )}

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

@@ -1,3 +1,4 @@
+import { AlertTriangle, Check } from 'lucide-react'
 import { EdgeState } from '../lib/status-colors'
 
 interface WorkflowTransitionLabelProps {
@@ -5,6 +6,12 @@ interface WorkflowTransitionLabelProps {
   state?: EdgeState
 }
 
+const STATE_CLASSES: Record<EdgeState, string> = {
+  completed: 'border-status-success-border text-status-success-text',
+  pending: 'border-border text-muted-foreground',
+  error: 'border-status-error-border text-status-error-text',
+}
+
 export function WorkflowTransitionLabel({
   label,
   state = 'pending',
@@ -14,11 +21,15 @@ export function WorkflowTransitionLabel({
   return (
     <div
       className={`
-        px-2 py-1 text-xs font-medium
+        inline-flex items-center gap-1 px-2 py-1 text-xs font-medium
         bg-card border rounded
-        ${state === 'completed' ? 'border-emerald-300 text-emerald-700' : 'border-border text-muted-foreground'}
+        ${STATE_CLASSES[state] ?? STATE_CLASSES.pending}
       `}
     >
+      {/* Spec section 4.6: status is never colour-only — each non-neutral state
+          pairs its token colour with its own icon shape. */}
+      {state === 'error' ? <AlertTriangle className="h-3 w-3 shrink-0" aria-hidden="true" /> : null}
+      {state === 'completed' ? <Check className="h-3 w-3 shrink-0" aria-hidden="true" /> : null}
       {label}
     </div>
   )

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

@@ -15,8 +15,14 @@ import {
 } from '@open-mercato/ui/primitives/select'
 import { ChevronDown, Plus, Trash2 } from 'lucide-react'
 import { JsonBuilder } from '@open-mercato/ui/backend/JsonBuilder'
+import { DurationInput } from '@open-mercato/ui/backend/inputs/DurationInput'
 import type { CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudForm'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { LedgerEntry } from '../../lib/context-ledger'
+import type { PinnedSampleEnvelope } from '../../lib/sample-resolver'
+import { useActivityTypeOptions } from './useActivityTypeOptions'
+import { ActivityConfigFields, hasActivityConfigForm } from './ActivityConfigFields'
+import { ActivityTestPanel } from './ActivityTestPanel'
 import { durationTimeoutInputValue, durationTimeoutPatch } from '../../lib/activityTimeoutFields'
 
 /**
@@ -25,7 +31,7 @@ import { durationTimeoutInputValue, durationTimeoutPatch } from '../../lib/activ
 export interface Activity {
   activityId: string
   activityName: string
-  activityType: 'SEND_EMAIL' | 'CALL_API' | 'UPDATE_ENTITY' | 'EMIT_EVENT' | 'CALL_WEBHOOK' | 'EXECUTE_FUNCTION' | 'WAIT'
+  activityType: string
   config: Record<string, any>
   timeout?: string
   timeoutMs?: number
@@ -39,8 +45,18 @@ export interface Activity {
   }
 }
 
+export interface ActivityTestContext {
+  definitionId: string | null
+  stepId: string
+  pinnedSample?: PinnedSampleEnvelope
+  onPinSample: (data: unknown) => void
+  onUnpinSample: () => void
+}
+
 interface ActivityArrayEditorProps extends CrudCustomFieldRenderProps {
   value: Activity[]
+  ledgerEntries?: LedgerEntry[]
+  testContext?: ActivityTestContext
 }
 
 /**
@@ -55,10 +71,24 @@ interface ActivityArrayEditorProps extends CrudCustomFieldRenderProps {
  *
  * Used by both EdgeEditDialog and NodeEditDialog (automated type)
  */
-export function ActivityArrayEditor({ id, value = [], error, setValue, disabled }: ActivityArrayEditorProps) {
+export function ActivityArrayEditor({ id, value = [], error, setValue, disabled, ledgerEntries, testContext }: ActivityArrayEditorProps) {
   const t = useT()
+  const activityTypeOptions = useActivityTypeOptions()
   const { confirm, ConfirmDialogElement } = useConfirmDialog()
   const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set())
+  const [advancedIndices, setAdvancedIndices] = useState<Set<number>>(new Set())
+
+  const toggleAdvanced = (index: number) => {
+    setAdvancedIndices((current) => {
+      const next = new Set(current)
+      if (next.has(index)) {
+        next.delete(index)
+      } else {
+        next.add(index)
+      }
+      return next
+    })
+  }
 
   const activities = Array.isArray(value) ? value : []
 
@@ -237,15 +267,18 @@ export function ActivityArrayEditor({ id, value = [], error, setValue, disabled
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="SEND_EMAIL">{t('workflows.activities.types.SEND_EMAIL')}</SelectItem>
-                          <SelectItem value="CALL_API">{t('workflows.activities.types.CALL_API')}</SelectItem>
-                          <SelectItem value="UPDATE_ENTITY">{t('workflows.activities.types.UPDATE_ENTITY')}</SelectItem>
-                          <SelectItem value="EMIT_EVENT">{t('workflows.activities.types.EMIT_EVENT')}</SelectItem>
-                          <SelectItem value="CALL_WEBHOOK">{t('workflows.activities.types.CALL_WEBHOOK')}</SelectItem>
-                          <SelectItem value="EXECUTE_FUNCTION">{t('workflows.activities.types.EXECUTE_FUNCTION')}</SelectItem>
-                          <SelectItem value="WAIT">{t('workflows.activities.types.WAIT')}</SelectItem>
+                          {activityTypeOptions.map((type) => (
+                            <SelectItem key={type.value} value={type.value}>
+                              {type.label}
+                            </SelectItem>
+                          ))}
                         </SelectContent>
                       </Select>
+                      {activity.activityType === 'SEND_EMAIL' && (
+                        <p className="text-xs text-muted-foreground mt-1">
+                          {t('workflows.activities.sendEmailSimulatedHint')}
+                        </p>
+                      )}
                     </div>
 
                     {/* Timeout */}
@@ -253,12 +286,11 @@ export function ActivityArrayEditor({ id, value = [], error, setValue, disabled
                       <Label htmlFor={`${id}-${index}-timeout`} className="text-xs font-medium mb-1">
                         {t('workflows.fieldEditors.activities.timeout')}
                       </Label>
-                      <Input
+                      <DurationInput
                         id={`${id}-${index}-timeout`}
-                        type="text"
                         value={durationTimeoutInputValue(activity)}
-                        onChange={(e) => patchActivity(index, durationTimeoutPatch(e.target.value))}
-                        placeholder={t('workflows.fieldEditors.activities.timeoutPlaceholder')}
+                        onChange={(value) => patchActivity(index, durationTimeoutPatch(value))}
+                        aria-label={t('workflows.fieldEditors.activities.timeout')}
                         className="text-xs"
                         disabled={disabled}
                       />
@@ -268,7 +300,7 @@ export function ActivityArrayEditor({ id, value = [], error, setValue, disabled
                     </div>
 
                     {/* Retry Policy */}
-                    <div className="border-t border-gray-200 pt-3">
+                    <div className="border-t border-border pt-3">
                       <Label className="text-xs font-semibold mb-2 block">{t('workflows.fieldEditors.activities.retryPolicy')}</Label>
                       <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
                         <div>
@@ -338,7 +370,7 @@ export function ActivityArrayEditor({ id, value = [], error, setValue, disabled
                     </div>
 
                     {/* Activity Options */}
-                    <div className="border-t border-gray-200 pt-3">
+                    <div className="border-t border-border pt-3">
                       <Label className="text-xs font-semibold mb-2 block">{t('workflows.fieldEditors.activities.activityOptions')}</Label>
                       <div className="space-y-2">
                         <div className="flex items-center space-x-2">
@@ -370,26 +402,84 @@ export function ActivityArrayEditor({ id, value = [], error, setValue, disabled
                       </div>
                     </div>
 
-                    {/* Configuration JSON */}
-                    <div className="border-t border-gray-200 pt-3">
-                      <Label className="text-xs font-medium mb-1">
-                        {t('workflows.fieldEditors.activities.configurationJson')}
-                      </Label>
-                      <JsonBuilder
-                        value={activity.config || {}}
-                        onChange={(config) => updateActivity(index, 'config', config)}
-                        disabled={disabled}
-                      />
-                      <p className="text-xs text-muted-foreground mt-1">
-                        {t('workflows.fieldEditors.activities.configurationHint')}
-                      </p>
+                    {/* Configuration */}
+                    <div className="border-t border-border pt-3">
+                      {hasActivityConfigForm(activity.activityType) ? (
+                        <div className="space-y-3">
+                          <ActivityConfigFields
+                            activityType={activity.activityType}
+                            idPrefix={`${id}-${index}-config`}
+                            config={activity.config || {}}
+                            onChange={(config) => updateActivity(index, 'config', config)}
+                            ledgerEntries={ledgerEntries}
+                            disabled={disabled}
+                          />
+                          <div>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => toggleAdvanced(index)}
+                              aria-expanded={advancedIndices.has(index)}
+                            >
+                              <ChevronDown
+                                className={`size-4 mr-1 transition-transform ${advancedIndices.has(index) ? 'rotate-180' : ''}`}
+                              />
+                              {t('workflows.fieldEditors.activities.advancedJson')}
+                            </Button>
+                            {advancedIndices.has(index) && (
+                              <div className="mt-2">
+                                <JsonBuilder
+                                  value={activity.config || {}}
+                                  onChange={(config) => updateActivity(index, 'config', config)}
+                                  disabled={disabled}
+                                />
+                                <p className="text-xs text-muted-foreground mt-1">
+                                  {t('workflows.fieldEditors.activities.configurationHint')}
+                                </p>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      ) : (
+                        <div>
+                          <Label className="text-xs font-medium mb-1">
+                            {t('workflows.fieldEditors.activities.configurationJson')}
+                          </Label>
+                          <JsonBuilder
+                            value={activity.config || {}}
+                            onChange={(config) => updateActivity(index, 'config', config)}
+                            disabled={disabled}
+                          />
+                          <p className="text-xs text-muted-foreground mt-1">
+                            {t('workflows.fieldEditors.activities.configurationHint')}
+                          </p>
+                        </div>
+                      )}
                     </div>
 
+                    {/* Test step */}
+                    {testContext && (
+                      <div className="border-t border-border pt-3">
+                        <ActivityTestPanel
+                          definitionId={testContext.definitionId}
+                          stepId={testContext.stepId}
+                          activityType={activity.activityType}
+                          config={activity.config || {}}
+                          ledgerEntries={ledgerEntries}
+                          pinnedSample={testContext.pinnedSample}
+                          onPinSample={testContext.onPinSample}
+                          onUnpinSample={testContext.onUnpinSample}
+                          disabled={disabled}
+                        />
+                      </div>
+                    )}
+
                     {/* Delete Button */}
-                    <div className="border-t border-gray-200 pt-3">
+                    <div className="border-t border-border pt-3">
                       <Button
                         type="button"
-                        variant="destructive"
+                        variant="destructive-outline"
                         size="sm"
                         onClick={() => removeActivity(index)}
                         disabled={disabled}