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

package/src/modules/workflows/components/portal/PortalTaskForm.tsx

@@ -0,0 +1,280 @@
+'use client'
+
+/**
+ * The portal's task form.
+ *
+ * `components/mobile/MobileTaskForm.tsx` is the LAYOUT reference — it is a
+ * backoffice component, it takes a backoffice `UserTaskResponse` and renders
+ * backoffice chrome, so it is read and not imported. What is shared is the part
+ * that must not diverge: the schema normalizer (`lib/task-form-schema.ts`) and
+ * the external renderer registry (`lib/task-form-registry.ts`), so a form
+ * authored once renders the same fields on both surfaces.
+ *
+ * Mobile-first: one column, full-width controls, stacked actions; the two-column
+ * arrangement is the `sm:` enhancement, not the base.
+ */
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Label } from '@open-mercato/ui/primitives/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { normalizeTaskFormSchema, readRequiredFormFields } from '../../lib/task-form-schema'
+import { resolveTaskForm } from '../../lib/task-form-registry'
+import type { JsonSchemaField } from '../../data/types'
+
+export type PortalTaskFormValue = string | number | boolean
+
+export type PortalTaskDecision = { id: string; label: string }
+
+export type PortalTaskFormProps = {
+  taskId: string
+  taskName: string
+  formSchema: unknown
+  formKey: string | null
+  entityBindings: unknown[] | null
+  decisions: PortalTaskDecision[]
+  values: Record<string, PortalTaskFormValue>
+  comments: string
+  submitting: boolean
+  onFieldChange: (name: string, value: PortalTaskFormValue) => void
+  onValuesChange: (values: Record<string, PortalTaskFormValue>) => void
+  onCommentsChange: (value: string) => void
+  onSubmit: (decisionId?: string) => void
+}
+
+function RequiredMark({ required }: { required: boolean }) {
+  const t = useT()
+  if (!required) return null
+  return (
+    <span className="ml-1 text-status-error-text" aria-label={t('workflows.portal.tasks.form.required', 'Required')}>
+      *
+    </span>
+  )
+}
+
+export function PortalTaskForm(props: PortalTaskFormProps) {
+  const t = useT()
+  const {
+    taskId,
+    taskName,
+    formSchema,
+    formKey,
+    entityBindings,
+    decisions,
+    values,
+    comments,
+    submitting,
+    onFieldChange,
+    onValuesChange,
+    onCommentsChange,
+    onSubmit,
+  } = props
+
+  const schema = React.useMemo(() => normalizeTaskFormSchema(formSchema), [formSchema])
+  const required = React.useMemo(() => readRequiredFormFields(formSchema), [formSchema])
+  const resolution = React.useMemo(() => resolveTaskForm(formKey), [formKey])
+
+  const handleSubmit = React.useCallback(
+    (event: React.FormEvent) => {
+      event.preventDefault()
+      // A step that offers named outcomes must not also offer an unnamed one, or
+      // the recorded decision becomes optional.
+      if (decisions.length === 0) onSubmit()
+    },
+    [decisions.length, onSubmit],
+  )
+
+  const renderField = (name: string, field: JsonSchemaField) => {
+    const label = field.title || name
+    const isRequired = required.includes(name)
+    const raw = values[name]
+    const options = Array.isArray(field.enum) ? field.enum : null
+
+    if (options?.length) {
+      return (
+        <div key={name} className="flex flex-col gap-2">
+          <Label htmlFor={name}>
+            {label}
+            <RequiredMark required={isRequired} />
+          </Label>
+          <Select
+            value={typeof raw === 'string' ? raw : ''}
+            onValueChange={(value) => onFieldChange(name, value)}
+            disabled={submitting}
+          >
+            <SelectTrigger id={name} className="w-full">
+              <SelectValue placeholder={t('workflows.portal.tasks.form.select', 'Select…')} />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((option) => (
+                <SelectItem key={String(option)} value={String(option)}>
+                  {String(option)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {field.description ? (
+            <p className="text-sm text-muted-foreground">{field.description}</p>
+          ) : null}
+        </div>
+      )
+    }
+
+    if (field.type === 'boolean') {
+      return (
+        <div key={name} className="flex items-start gap-3">
+          <Checkbox
+            id={name}
+            checked={raw === true}
+            onCheckedChange={(checked) => onFieldChange(name, checked === true)}
+            disabled={submitting}
+            className="mt-0.5"
+          />
+          <Label htmlFor={name} className="font-normal">
+            {label}
+            <RequiredMark required={isRequired} />
+            {field.description ? (
+              <span className="mt-0.5 block text-sm text-muted-foreground">{field.description}</span>
+            ) : null}
+          </Label>
+        </div>
+      )
+    }
+
+    const isLongText = field.type === 'string' && (field.description ?? '').length > 0 && !field.format
+
+    return (
+      <div key={name} className="flex flex-col gap-2">
+        <Label htmlFor={name}>
+          {label}
+          <RequiredMark required={isRequired} />
+        </Label>
+        {isLongText ? (
+          <Textarea
+            id={name}
+            value={typeof raw === 'boolean' ? '' : (raw ?? '')}
+            onChange={(event) => onFieldChange(name, event.target.value)}
+            disabled={submitting}
+            rows={4}
+          />
+        ) : (
+          <Input
+            id={name}
+            type={field.type === 'number' || field.type === 'integer' ? 'number' : 'text'}
+            value={typeof raw === 'boolean' ? '' : (raw ?? '')}
+            onChange={(event) =>
+              onFieldChange(
+                name,
+                field.type === 'number' || field.type === 'integer'
+                  ? Number(event.target.value)
+                  : event.target.value,
+              )
+            }
+            disabled={submitting}
+          />
+        )}
+        {field.description && !isLongText ? (
+          <p className="text-sm text-muted-foreground">{field.description}</p>
+        ) : null}
+      </div>
+    )
+  }
+
+  const properties = schema?.properties ?? {}
+  const fieldNames = Object.keys(properties)
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+      {resolution.kind === 'missing' ? (
+        // The author asked for a renderer nobody loaded. Falling back silently
+        // would render a form that is not the one they designed, and the person
+        // who can notice is the one looking at the screen — so say it out loud.
+        <div
+          role="status"
+          className="rounded-lg border border-status-warning-border bg-status-warning-bg p-4 text-sm text-status-warning-text"
+        >
+          {t(
+            'workflows.portal.tasks.form.rendererMissing',
+            'This task asks for the "{formKey}" form, which is not available here. The standard form is shown instead.',
+            { formKey: resolution.formKey },
+          )}
+        </div>
+      ) : null}
+
+      {resolution.kind === 'registered' ? (
+        <resolution.entry.Renderer
+          context={{
+            taskId,
+            taskName,
+            formKey: resolution.entry.formKey,
+            formSchema,
+            entityBindings,
+            decisions: decisions.map((decision) => ({ id: decision.id })),
+            values,
+            disabled: submitting,
+          }}
+          onChange={(next) => onValuesChange(next as Record<string, PortalTaskFormValue>)}
+        />
+      ) : (
+        <div className="flex flex-col gap-5">
+          {fieldNames.length > 0 ? (
+            fieldNames.map((name) => renderField(name, properties[name] as JsonSchemaField))
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t(
+                'workflows.portal.tasks.form.noFields',
+                'This task has nothing to fill in — confirm it below when you are done.',
+              )}
+            </p>
+          )}
+        </div>
+      )}
+
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="portal-task-comments">
+          {t('workflows.portal.tasks.form.comments', 'Comments')}
+        </Label>
+        <Textarea
+          id="portal-task-comments"
+          value={comments}
+          onChange={(event) => onCommentsChange(event.target.value)}
+          disabled={submitting}
+          rows={3}
+          placeholder={t('workflows.portal.tasks.form.commentsPlaceholder', 'Anything to add? (optional)')}
+        />
+      </div>
+
+      <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
+        {decisions.length > 0 ? (
+          decisions.map((decision) => (
+            <Button
+              key={decision.id}
+              type="button"
+              disabled={submitting}
+              onClick={() => onSubmit(decision.id)}
+              className="w-full sm:w-auto"
+            >
+              {decision.label}
+            </Button>
+          ))
+        ) : (
+          <Button type="submit" disabled={submitting} className="w-full sm:w-auto">
+            {submitting
+              ? t('workflows.portal.tasks.form.submitting', 'Submitting…')
+              : t('workflows.portal.tasks.form.submit', 'Complete task')}
+          </Button>
+        )}
+      </div>
+    </form>
+  )
+}

package/src/modules/workflows/components/run/AgentActivityPanel.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { useLiveAgentActions } from './useLiveAgentActions'
+
+/**
+ * Live "Agent activity" section for the run detail (workflows spec Phase 2).
+ *
+ * Renders the append-only stream of agent actions (steps + tool calls) from
+ * `useLiveAgentActions` while an INVOKE_AGENT step runs. Ephemeral by design:
+ * it shows nothing until the first action arrives and keeps nothing after the
+ * run — so it renders `null` when idle and is safe to always mount. No token
+ * text (the tool loop uses `generateText`, which does not stream tokens).
+ */
+export type AgentActivityPanelProps = {
+  instanceId?: string | null
+  enabled?: boolean
+}
+
+export function AgentActivityPanel({ instanceId, enabled = true }: AgentActivityPanelProps) {
+  const t = useT()
+  const actions = useLiveAgentActions({ instanceId, enabled })
+
+  if (actions.length === 0) return null
+
+  return (
+    <section className="rounded-md border border-border p-3" aria-live="polite">
+      <h3 className="text-sm font-medium text-foreground">{t('run.agentActivity.title')}</h3>
+      <p className="mt-0.5 text-xs text-muted-foreground">{t('run.agentActivity.subtitle')}</p>
+      <ul className="mt-2 space-y-1">
+        {actions.map((action) => (
+          <li key={action.key} className="flex items-center gap-2 text-sm">
+            <Badge size="sm">
+              {action.kind === 'tool_call'
+                ? t('run.agentActivity.toolCall')
+                : t('run.agentActivity.step')}
+            </Badge>
+            <span className="text-muted-foreground">
+              {action.name ?? `${t('run.agentActivity.step')} ${action.stepIndex + 1}`}
+            </span>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

package/src/modules/workflows/components/run/RerunStepDialog.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import * as React from 'react'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type RerunStepDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  stepId: string | null
+  stepLabel?: string | null
+  isSubmitting?: boolean
+  /** Resolves once the rerun has been requested; the host closes the dialog. */
+  onConfirm: (contextPatch: Record<string, unknown> | undefined) => void
+}
+
+/**
+ * Rerun-from-step confirmation (spec §8.4: "optionally with edited context").
+ *
+ * The patch is authored as JSON and MERGED over the run context — only the keys
+ * present are changed, and the `STEP_RERUN` event records exactly which ones
+ * moved. Parsing happens here so an unparseable patch never reaches the API as
+ * a silently-dropped edit.
+ */
+export function RerunStepDialog({
+  open,
+  onOpenChange,
+  stepId,
+  stepLabel,
+  isSubmitting = false,
+  onConfirm,
+}: RerunStepDialogProps) {
+  const t = useT()
+  const [patchText, setPatchText] = React.useState('')
+  const [parseError, setParseError] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (!open) {
+      setPatchText('')
+      setParseError(null)
+    }
+  }, [open])
+
+  const submit = React.useCallback(() => {
+    const trimmed = patchText.trim()
+    if (!trimmed) {
+      setParseError(null)
+      onConfirm(undefined)
+      return
+    }
+    try {
+      const parsed = JSON.parse(trimmed)
+      if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+        setParseError(
+          t('workflows.rerunStep.patchNotAnObject', 'The context patch must be a JSON object.')
+        )
+        return
+      }
+      setParseError(null)
+      onConfirm(parsed as Record<string, unknown>)
+    } catch {
+      setParseError(t('workflows.rerunStep.patchInvalid', 'The context patch is not valid JSON.'))
+    }
+  }, [patchText, onConfirm, t])
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerContent
+        data-testid="workflow-rerun-step-drawer"
+        onKeyDown={(event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+            event.preventDefault()
+            submit()
+          }
+        }}
+        closeAriaLabel={t('workflows.rerunStep.close', 'Close rerun panel')}
+      >
+        <DrawerHeader>
+          <DrawerTitle>{t('workflows.rerunStep.title', 'Rerun from this step')}</DrawerTitle>
+          <DrawerDescription>
+            {t(
+              'workflows.rerunStep.description',
+              'The run continues from {step}. The previous attempt is kept in the history, and the rerun is recorded in the audit log.',
+              { step: stepLabel || stepId || '' }
+            )}
+          </DrawerDescription>
+        </DrawerHeader>
+
+        <DrawerBody className="space-y-2">
+          <label className="text-sm font-medium text-foreground" htmlFor="workflow-rerun-context-patch">
+            {t('workflows.rerunStep.patchLabel', 'Context patch (optional JSON)')}
+          </label>
+          <Textarea
+            id="workflow-rerun-context-patch"
+            value={patchText}
+            onChange={(event) => setPatchText(event.target.value)}
+            rows={6}
+            className="font-mono text-xs"
+            placeholder={'{\n  "amount": 250\n}'}
+          />
+          <p className="text-xs text-muted-foreground">
+            {t(
+              'workflows.rerunStep.patchHint',
+              'Merged over the run context. Only the keys you provide change.'
+            )}
+          </p>
+          {parseError ? <p className="text-xs text-status-error-text">{parseError}</p> : null}
+        </DrawerBody>
+
+        <DrawerFooter>
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
+            {t('common.cancel')}
+          </Button>
+          <Button type="button" onClick={submit} disabled={isSubmitting || !stepId}>
+            {t('workflows.rerunStep.confirm', 'Rerun step')}
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default RerunStepDialog

package/src/modules/workflows/components/run/RunEventBadge.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { classifyRunEventType, type RunEventTone } from '../../lib/run-event-tone'
+
+const TONE_CLASSES: Record<RunEventTone, string> = {
+  success: 'bg-status-success-bg text-status-success-text',
+  error: 'bg-status-error-bg text-status-error-text',
+  warning: 'bg-status-warning-bg text-status-warning-text',
+  info: 'bg-status-info-bg text-status-info-text',
+  neutral: 'bg-status-neutral-bg text-status-neutral-text',
+}
+
+/**
+ * Class-only form, for the mobile overview which takes a class callback rather
+ * than a component. Same classification, so the two never disagree.
+ */
+export function runEventBadgeClass(eventType: string): string {
+  return TONE_CLASSES[classifyRunEventType(eventType)]
+}
+
+/**
+ * The event type IS the label, so this badge is never colour-only by
+ * construction — the tone only reinforces text the reader can already see.
+ */
+export function RunEventBadge({ eventType, className = '' }: { eventType: string; className?: string }) {
+  const t = useT()
+  const tone = classifyRunEventType(eventType)
+  return (
+    <span
+      className={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${TONE_CLASSES[tone]} ${className}`}
+    >
+      {t(`workflows.events.types.${eventType}`, eventType)}
+    </span>
+  )
+}

package/src/modules/workflows/components/run/RunGantt.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { STATUS_COLORS, type WorkflowStatus, type StepRunStatus } from '../../lib/status-colors'
+import { formatDurationMs } from '../../lib/run-duration'
+import { buildRunGantt, type GanttBar } from '../../lib/run-gantt'
+import { stepStatusLabelKey } from './RunStatusBadge'
+import type { RunStepInstanceInput } from '../../lib/run-execution'
+
+const BAR_TONES: Record<StepRunStatus, WorkflowStatus> = {
+  completed: 'completed',
+  active: 'in_progress',
+  failed: 'failed',
+  skipped: 'pending',
+  paused: 'paused',
+  pending: 'not_started',
+}
+
+const LANE_HEIGHT_CLASS = 'h-8'
+
+export type RunGanttProps = {
+  stepInstances: readonly RunStepInstanceInput[]
+  instanceStartedAt?: string | Date | null
+  instanceCompletedAt?: string | Date | null
+  /** Injected by tests for determinism; production reads the clock. */
+  now?: number
+  onSelectStep?: (stepId: string) => void
+  selectedStepId?: string | null
+}
+
+function BarRow({
+  bar,
+  label,
+  selected,
+  onSelect,
+}: {
+  bar: GanttBar
+  label: string
+  selected: boolean
+  onSelect?: () => void
+}) {
+  const colors = STATUS_COLORS[BAR_TONES[bar.status]]
+  // A zero-width bar is a real measurement (a step that took under a
+  // millisecond), not missing data — give it a visible minimum so it does not
+  // disappear from the chart it is meant to explain.
+  const widthPercent = Math.max(bar.widthRatio * 100, 0.6)
+  const offsetPercent = Math.min(bar.offsetRatio * 100, 100 - widthPercent)
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      title={label}
+      aria-label={label}
+      className={`relative block w-full ${LANE_HEIGHT_CLASS} rounded ${
+        selected ? 'ring-2 ring-primary' : ''
+      } focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary`}
+    >
+      <span
+        className={`absolute top-1/2 flex -translate-y-1/2 items-center justify-start overflow-hidden rounded border px-1 ${colors.bg} ${colors.border} h-5`}
+        style={{ left: `${offsetPercent}%`, width: `${widthPercent}%` }}
+      >
+        {bar.spansCollapsedWait ? (
+          // Never colour-only: a collapsed bar carries its own hatch pattern.
+          <span
+            aria-hidden="true"
+            className="absolute inset-0 opacity-40"
+            style={{
+              backgroundImage:
+                'repeating-linear-gradient(45deg, currentColor 0, currentColor 2px, transparent 2px, transparent 6px)',
+            }}
+          />
+        ) : null}
+      </span>
+    </button>
+  )
+}
+
+/**
+ * Clock-time Gantt for one run (spec §8.3). The axis is piecewise-linear —
+ * see `lib/run-gantt.ts` for why — and every bar keeps its TRUE duration in
+ * its label, so the compression never becomes a reported number.
+ */
+export function RunGantt({
+  stepInstances,
+  instanceStartedAt,
+  instanceCompletedAt,
+  now,
+  onSelectStep,
+  selectedStepId,
+}: RunGanttProps) {
+  const t = useT()
+  const model = React.useMemo(
+    () => buildRunGantt({ stepInstances, instanceStartedAt, instanceCompletedAt, now }),
+    [stepInstances, instanceStartedAt, instanceCompletedAt, now]
+  )
+
+  if (model.bars.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {t('workflows.instances.run.gantt.empty', 'No step executions have been recorded for this run yet.')}
+      </p>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1 text-xs text-muted-foreground">
+        <span>
+          {t('workflows.instances.run.gantt.span', 'Wall-clock span')}: {formatDurationMs(model.totalDurationMs)}
+        </span>
+        <span>
+          {t('workflows.instances.run.gantt.steps', 'Step executions')}: {model.bars.length}
+        </span>
+        {model.collapsedDurationMs > 0 ? (
+          <span className="text-status-warning-text">
+            {t('workflows.instances.run.gantt.collapsed', 'Waiting time collapsed: {duration}', {
+              duration: formatDurationMs(model.collapsedDurationMs),
+            })}
+          </span>
+        ) : null}
+      </div>
+
+      <div className="overflow-x-auto">
+        <div style={{ minWidth: '40rem' }}>
+          {model.bars.map((bar) => {
+            const durationLabel = formatDurationMs(bar.durationMs)
+            const statusKey = stepStatusLabelKey(bar.status)
+            const statusLabel = t(statusKey.key, statusKey.fallback)
+            const label = t(
+              'workflows.instances.run.gantt.barLabel',
+              '{step} — {status}, {duration}',
+              { step: bar.stepName, status: statusLabel, duration: durationLabel }
+            )
+            return (
+              <div key={bar.key} className="flex items-center gap-3 border-b border-border/60 py-0.5 last:border-b-0">
+                <div className="w-48 shrink-0 truncate text-xs" title={bar.stepName}>
+                  <span className="text-foreground">{bar.stepName}</span>
+                  {bar.branchInstanceId ? (
+                    <span className="ml-1 text-muted-foreground">
+                      {t('workflows.instances.run.gantt.lane', 'lane {lane}', { lane: String(bar.lane + 1) })}
+                    </span>
+                  ) : null}
+                </div>
+                <div className="min-w-0 flex-1">
+                  <BarRow
+                    bar={bar}
+                    label={label}
+                    selected={selectedStepId === bar.stepId}
+                    onSelect={onSelectStep ? () => onSelectStep(bar.stepId) : undefined}
+                  />
+                </div>
+                <div className="w-24 shrink-0 text-right text-xs tabular-nums text-muted-foreground">
+                  {durationLabel}
+                  {bar.running ? (
+                    <span className="ml-1 text-status-info-text">
+                      {t('workflows.instances.run.gantt.running', '(running)')}
+                    </span>
+                  ) : null}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {model.collapsedSegments.length > 0 ? (
+        <p className="text-xs text-muted-foreground">
+          {t(
+            'workflows.instances.run.gantt.collapsedHint',
+            'Hatched bars span a collapsed waiting period. Durations shown are always the real elapsed time.'
+          )}
+        </p>
+      ) : null}
+    </div>
+  )
+}
+
+export default RunGantt