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

package/src/modules/workflows/components/run/useLiveRunUpdates.ts

@@ -0,0 +1,89 @@
+'use client'
+
+import * as React from 'react'
+import { useAppEvent } from '@open-mercato/ui/backend/injection/useAppEvent'
+
+/** The DOM Event Bridge dispatches this after re-establishing a dropped SSE stream. */
+const BRIDGE_RECONNECTED_EVENT = 'om:bridge:reconnected'
+
+/**
+ * A busy tenant can advance dozens of instances a second, and every step
+ * advance re-emits `workflows.instance.started`. Collapsing the burst into one
+ * refresh is what keeps a live run list from refetching per event.
+ */
+export const LIVE_REFRESH_THROTTLE_MS = 1500
+
+export type UseLiveRunUpdatesOptions = {
+  /**
+   * When set, only events carrying this instance id refresh. Omit on the run
+   * list, which cares about every instance in scope.
+   */
+  instanceId?: string | null
+  onRefresh: () => void
+  /** Turn the subscription off entirely (e.g. before the instance has loaded). */
+  enabled?: boolean
+  throttleMs?: number
+}
+
+/**
+ * Live run updates (spec §8.3): "`workflows.instance.*` lifecycle events gain
+ * `clientBroadcast: true`; run views subscribe via the DOM Event Bridge."
+ *
+ * The bridge is best-effort by design — the stream can drop, and the platform
+ * caps an SSE payload at 4KB and replaces anything larger with a stub. So a
+ * refresh is always a REFETCH, never an attempt to patch state from the
+ * payload, and the hook also refreshes on the bridge's reconnect event to
+ * close whatever gap the disconnection left.
+ */
+export function useLiveRunUpdates({
+  instanceId,
+  onRefresh,
+  enabled = true,
+  throttleMs = LIVE_REFRESH_THROTTLE_MS,
+}: UseLiveRunUpdatesOptions): void {
+  const onRefreshRef = React.useRef(onRefresh)
+  onRefreshRef.current = onRefresh
+
+  const timerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const lastRunRef = React.useRef(0)
+
+  const scheduleRefresh = React.useCallback(() => {
+    if (timerRef.current !== null) return
+    const sinceLast = Date.now() - lastRunRef.current
+    const delay = Math.max(throttleMs - sinceLast, 0)
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null
+      lastRunRef.current = Date.now()
+      onRefreshRef.current()
+    }, delay)
+  }, [throttleMs])
+
+  React.useEffect(
+    () => () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current)
+    },
+    []
+  )
+
+  useAppEvent(
+    'workflows.instance.*',
+    (event) => {
+      if (!enabled) return
+      if (instanceId) {
+        const payloadInstanceId = event.payload?.id
+        if (typeof payloadInstanceId !== 'string' || payloadInstanceId !== instanceId) return
+      }
+      scheduleRefresh()
+    },
+    [enabled, instanceId, scheduleRefresh]
+  )
+
+  useAppEvent(
+    BRIDGE_RECONNECTED_EVENT,
+    () => {
+      if (!enabled) return
+      scheduleRefresh()
+    },
+    [enabled, scheduleRefresh]
+  )
+}

package/src/modules/workflows/components/settings/CommandSettingsPageClient.tsx

@@ -0,0 +1,228 @@
+'use client'
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@open-mercato/ui/primitives/card'
+import { ErrorMessage } from '@open-mercato/ui/backend/detail'
+
+type CommandSettingsItem = {
+  commandId: string
+  requiredFeatures: string[]
+  labelKey: string | null
+  enabled: boolean
+  defaultEnabled: boolean
+}
+
+type CommandSettingsResponse = {
+  configured?: boolean
+  items?: CommandSettingsItem[]
+  error?: string
+}
+
+const SETTINGS_CONTEXT_ID = 'workflows-command-settings'
+
+/** The module a command belongs to is the first segment of its id. */
+function moduleOf(commandId: string): string {
+  const [moduleId] = commandId.split('.')
+  return moduleId || commandId
+}
+
+function groupByModule(items: CommandSettingsItem[]): Array<[string, CommandSettingsItem[]]> {
+  const groups = new Map<string, CommandSettingsItem[]>()
+  for (const item of items) {
+    const key = moduleOf(item.commandId)
+    const bucket = groups.get(key)
+    if (bucket) bucket.push(item)
+    else groups.set(key, [item])
+  }
+  return [...groups.entries()].sort(([left], [right]) => left.localeCompare(right))
+}
+
+/**
+ * Tier 2 of the UPDATE_ENTITY model: tick which of the code-declared candidates
+ * this tenant's workflows may execute.
+ *
+ * There is deliberately no free-text field here. An administrator who could
+ * type a command id would reach commands nobody designed for unattended
+ * execution, and a command that declares no `requiredFeatures` would have no
+ * gate left at all — the tick-box list over a code-declared catalogue IS the
+ * safety model.
+ */
+export function CommandSettingsPageClient() {
+  const t = useT()
+  const [items, setItems] = React.useState<CommandSettingsItem[] | null>(null)
+  const [configured, setConfigured] = React.useState(true)
+  const [enabled, setEnabled] = React.useState<Set<string>>(new Set())
+  const [loading, setLoading] = React.useState(true)
+  const [error, setError] = React.useState<string | null>(null)
+  const [saving, setSaving] = React.useState(false)
+
+  const { runMutation, retryLastMutation } = useGuardedMutation<{
+    formId: string
+    resourceKind: string
+    retryLastMutation: () => Promise<boolean>
+  }>({
+    contextId: SETTINGS_CONTEXT_ID,
+    blockedMessage: t('ui.forms.flash.saveBlocked', 'Save blocked by validation'),
+  })
+
+  const applyResponse = React.useCallback((body: CommandSettingsResponse | null) => {
+    const loaded = Array.isArray(body?.items) ? body.items : []
+    setItems(loaded)
+    setConfigured(body?.configured !== false)
+    setEnabled(new Set(loaded.filter((item) => item.enabled).map((item) => item.commandId)))
+  }, [])
+
+  const load = React.useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const body = await readApiResultOrThrow<CommandSettingsResponse>(
+        '/api/workflows/command-settings',
+        undefined,
+        {
+          errorMessage: t('workflows.commandSettings.loadError'),
+          allowNullResult: true,
+        },
+      )
+      applyResponse(body)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t('workflows.commandSettings.loadError')
+      setError(message)
+    } finally {
+      setLoading(false)
+    }
+  }, [applyResponse, t])
+
+  React.useEffect(() => {
+    void load()
+  }, [load])
+
+  const toggle = React.useCallback((commandId: string, next: boolean) => {
+    setEnabled((prev) => {
+      const updated = new Set(prev)
+      if (next) updated.add(commandId)
+      else updated.delete(commandId)
+      return updated
+    })
+  }, [])
+
+  const handleSave = React.useCallback(async () => {
+    setSaving(true)
+    try {
+      const enabledCommandIds = [...enabled]
+      // optimistic-lock-exempt: tenant-scoped preference setting stored as a
+      // single `module_configs` row. There is no loaded record version to lock
+      // against, and the PUT replaces the whole set, so a concurrent
+      // administrator's save is last-write-wins by design rather than a
+      // field-level lost update.
+      const response = await runMutation({
+        operation: () =>
+          apiCall<CommandSettingsResponse>('/api/workflows/command-settings', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ enabledCommandIds }),
+          }),
+        context: {
+          formId: SETTINGS_CONTEXT_ID,
+          resourceKind: 'workflows.commandSettings',
+          retryLastMutation,
+        },
+        mutationPayload: { enabledCommandIds },
+      })
+      if (!response.ok) {
+        throw new Error(response.result?.error || t('workflows.commandSettings.saveError'))
+      }
+      applyResponse(response.result ?? null)
+      flash(t('workflows.commandSettings.saveSuccess'), 'success')
+    } catch (err) {
+      const message = err instanceof Error ? err.message : t('workflows.commandSettings.saveError')
+      flash(message, 'error')
+    } finally {
+      setSaving(false)
+    }
+  }, [applyResponse, enabled, retryLastMutation, runMutation, t])
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Spinner size="sm" />
+        {t('workflows.commandSettings.loading')}
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <ErrorMessage
+        label={error}
+        action={
+          <Button type="button" variant="outline" onClick={() => void load()}>
+            {t('workflows.commandSettings.retry')}
+          </Button>
+        }
+      />
+    )
+  }
+
+  const groups = groupByModule(items ?? [])
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h1 className="text-2xl font-semibold">{t('workflows.commandSettings.pageTitle')}</h1>
+        <p className="text-muted-foreground text-sm">
+          {t('workflows.commandSettings.pageDescription')}
+        </p>
+      </div>
+
+      {groups.length === 0 ? (
+        <p className="text-sm text-muted-foreground">{t('workflows.commandSettings.empty')}</p>
+      ) : null}
+
+      {groups.map(([moduleId, moduleItems]) => (
+        <Card key={moduleId}>
+          <CardHeader>
+            <CardTitle className="font-mono">{moduleId}</CardTitle>
+            <CardDescription>{t('workflows.commandSettings.groupDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-3">
+            {moduleItems.map((item) => (
+              <CheckboxField
+                key={item.commandId}
+                checked={enabled.has(item.commandId)}
+                onCheckedChange={(checked) => toggle(item.commandId, checked === true)}
+                label={item.labelKey ? t(item.labelKey, item.commandId) : item.commandId}
+                sublabel={<span className="font-mono text-xs">{item.commandId}</span>}
+                description={
+                  <span>
+                    {t('workflows.commandSettings.requires')}{' '}
+                    <span className="font-mono">{item.requiredFeatures.join(', ')}</span>
+                  </span>
+                }
+              />
+            ))}
+          </CardContent>
+        </Card>
+      ))}
+
+      {!configured && groups.length > 0 ? (
+        <p className="text-xs text-muted-foreground">
+          {t('workflows.commandSettings.notConfiguredHint')}
+        </p>
+      ) : null}
+
+      <div className="flex justify-end">
+        <Button type="button" onClick={handleSave} disabled={saving}>
+          {saving ? t('workflows.commandSettings.saving') : t('workflows.commandSettings.save')}
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/modules/workflows/components/work-inbox/EntityContextPanel.tsx

@@ -0,0 +1,179 @@
+"use client"
+
+/**
+ * The panel that ties work and records together — ONE component, two surfaces.
+ *
+ * - **Task detail, right column** (spec §6.2: *"right — bound entity card(s)
+ *   with deep links"*) renders the records a task is about.
+ * - **Record pages** (spec §6.2: *"every bound entity type gets the injected
+ *   'pending work' widget"*) render the open work about a record.
+ *
+ * Both are a titled frame around a list of linked items with an empty state, so
+ * the frame, the row, the deep-link degradation and the empty copy are written
+ * once here and the two surfaces differ only in the pure mapper that produces
+ * the items. The portal task page (Phase 4b) is the third caller by
+ * construction rather than by a third copy.
+ *
+ * Deep links DEGRADE rather than guess: a binding with no id, or one whose
+ * record type has no enumerated detail page, renders as a labelled row that
+ * says so. Sending an operator to the wrong record is worse than not offering
+ * the link.
+ */
+
+import * as React from 'react'
+import Link from 'next/link'
+import { StatusChip } from './StatusChip'
+import { buildEntityRecordHref } from '../../lib/work-inbox/entity-links'
+import { flattenTaskText } from '../../lib/task-resolution'
+import {
+  WORK_INBOX_OVERDUE_TONE,
+  describeWorkInboxPriority,
+  describeWorkInboxStatus,
+} from '../../lib/work-inbox/presentation'
+import type { WorkInboxStatusDescriptor } from '../../lib/work-inbox/presentation'
+import { normalizeWorkInboxPriority } from '../../lib/work-inbox/provider'
+import type { UserTaskEntityBinding } from '../../data/types'
+
+export type EntityContextChip = {
+  descriptor: WorkInboxStatusDescriptor
+  label: string
+}
+
+export type EntityContextItem = {
+  id: string
+  title: string
+  /** Machine-ish second line: the record type, the due date, the work kind. */
+  subtitle?: string | null
+  href?: string | null
+  /** Shown in place of the link when there is nowhere to go. */
+  noLinkLabel?: string
+  chips?: EntityContextChip[]
+}
+
+export type EntityContextPanelProps = {
+  title: string
+  items: EntityContextItem[]
+  emptyLabel: string
+  linkLabel: string
+  /** Rendered while the caller is still fetching; keeps the frame in place. */
+  loading?: boolean
+  loadingLabel?: string
+  testId?: string
+}
+
+export function EntityContextPanel({
+  title,
+  items,
+  emptyLabel,
+  linkLabel,
+  loading,
+  loadingLabel,
+  testId,
+}: EntityContextPanelProps) {
+  return (
+    <div className="rounded-lg border border-border p-4 space-y-3" data-testid={testId}>
+      <h2 className="text-sm font-semibold">{title}</h2>
+      {loading ? (
+        <p className="text-xs text-muted-foreground">{loadingLabel ?? emptyLabel}</p>
+      ) : items.length === 0 ? (
+        <p className="text-xs text-muted-foreground">{emptyLabel}</p>
+      ) : (
+        <ul className="space-y-2">
+          {items.map((item) => (
+            <li key={item.id} className="rounded-md border border-border p-2 space-y-1">
+              <div className="text-sm font-medium text-foreground">{item.title}</div>
+              {item.subtitle ? (
+                <div className="text-xs text-muted-foreground font-mono">{item.subtitle}</div>
+              ) : null}
+              {item.chips?.length ? (
+                <div className="flex flex-wrap gap-1">
+                  {item.chips.map((chip, index) => (
+                    <StatusChip key={`${item.id}-chip-${index}`} descriptor={chip.descriptor} label={chip.label} />
+                  ))}
+                </div>
+              ) : null}
+              {item.href ? (
+                <Link href={item.href} className="text-xs text-primary hover:underline">
+                  {linkLabel}
+                </Link>
+              ) : (
+                <span className="text-xs text-muted-foreground">{item.noLinkLabel ?? ''}</span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Task bindings → panel items (task detail, right column).
+ *
+ * A binding whose id never resolved at creation time is already dropped by
+ * `resolveTaskEntityBindings`; one that survives but points at a record type
+ * with no detail page still renders, without a link.
+ */
+export function bindingsToEntityContextItems(
+  bindings: UserTaskEntityBinding[] | null | undefined,
+  labels: { noLink: string },
+): EntityContextItem[] {
+  if (!bindings?.length) return []
+  return bindings.map((binding, index) => ({
+    id: `${binding.entityType}:${binding.entityId}:${index}`,
+    title: flattenTaskText(binding.label ?? null) ?? binding.entityType,
+    subtitle: binding.entityType,
+    href: buildEntityRecordHref(binding.entityType, binding.entityId),
+    noLinkLabel: labels.noLink,
+  }))
+}
+
+export type PendingWorkItem = {
+  id: string
+  title: string
+  status: string
+  priority: unknown
+  dueDate: string | null
+  overdue: boolean
+  detailHref: string | null
+}
+
+/**
+ * Work-inbox rows → panel items (record pages).
+ *
+ * Every chip pairs a design-system token with its own icon and a translated
+ * label, so status is never colour-only here either.
+ */
+export function workItemsToEntityContextItems(
+  rows: PendingWorkItem[] | null | undefined,
+  labels: {
+    status: (status: string) => string
+    priority: (priority: string) => string
+    overdue: string
+    due: (formatted: string) => string
+  },
+): EntityContextItem[] {
+  if (!rows?.length) return []
+  return rows.map((row) => {
+    const chips: EntityContextChip[] = [
+      { descriptor: describeWorkInboxStatus(row.status), label: labels.status(row.status) },
+    ]
+    const priority = normalizeWorkInboxPriority(row.priority)
+    const priorityDescriptor = describeWorkInboxPriority(priority)
+    if (priority && priorityDescriptor) {
+      chips.push({ descriptor: priorityDescriptor, label: labels.priority(priority) })
+    }
+    if (row.overdue) {
+      chips.push({ descriptor: WORK_INBOX_OVERDUE_TONE, label: labels.overdue })
+    }
+    return {
+      id: row.id,
+      title: row.title,
+      subtitle: row.dueDate ? labels.due(new Date(row.dueDate).toLocaleString()) : null,
+      href: row.detailHref,
+      chips,
+    }
+  })
+}
+
+export default EntityContextPanel

package/src/modules/workflows/components/work-inbox/ReassignTaskDialog.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+/**
+ * Move a task to another assignee or role queue (`POST /tasks/[id]/reassign`).
+ *
+ * This is the remedy §6.4 names for every act refusal an administrator can hit:
+ * administration widens seeing and never acting, so taking the row is the
+ * supported way to work on somebody else's task, and the row a definition
+ * authored with no assignee, no queue and no claim is rescuable ONLY through
+ * here.
+ *
+ * The endpoint's gate is VISIBILITY, not ownership — deliberately, or the
+ * owner-less task would be unrescuable by definition — so this dialog is offered
+ * on the strength of the server's `canReassign`, never on who owns the row.
+ *
+ * Free-text assignee and role fields mirror the Studio's own task inspector
+ * (`workflows.tasks.inspector.when.reassignTo`); the platform has no shared user
+ * picker to reuse yet.
+ *
+ * A rail rather than a modal: this is a secondary FORM filled against the task
+ * it moves, and the reviewer reads the task body to decide who should own it.
+ * Keyboard contract unchanged — Cmd/Ctrl+Enter submits, Escape cancels.
+ */
+
+import * as React from 'react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from '@open-mercato/ui/primitives/drawer'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Textarea } from '@open-mercato/ui/primitives/textarea'
+import { Kbd, KbdShortcut } from '@open-mercato/ui/primitives/kbd'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type ReassignTaskTarget = {
+  assignedTo: string | null
+  assignedToRoles: string[] | null
+  reason: string | null
+}
+
+export type ReassignTaskDialogProps = {
+  open: boolean
+  submitting: boolean
+  onOpenChange: (open: boolean) => void
+  onSubmit: (target: ReassignTaskTarget) => void
+}
+
+function splitRoles(value: string): string[] {
+  return value
+    .split(',')
+    .map((role) => role.trim())
+    .filter((role) => role.length > 0)
+}
+
+export function ReassignTaskDialog({
+  open,
+  submitting,
+  onOpenChange,
+  onSubmit,
+}: ReassignTaskDialogProps) {
+  const t = useT()
+  const [assignedTo, setAssignedTo] = React.useState('')
+  const [roles, setRoles] = React.useState('')
+  const [reason, setReason] = React.useState('')
+  const [targetMissing, setTargetMissing] = React.useState(false)
+
+  React.useEffect(() => {
+    if (open) return
+    setAssignedTo('')
+    setRoles('')
+    setReason('')
+    setTargetMissing(false)
+  }, [open])
+
+  const handleSubmit = React.useCallback(() => {
+    const assignee = assignedTo.trim()
+    const roleNames = splitRoles(roles)
+    // The server refuses a body naming neither (`reassignUserTaskSchema`), so
+    // saying so here costs the operator one fewer round trip.
+    if (!assignee && roleNames.length === 0) {
+      setTargetMissing(true)
+      return
+    }
+    setTargetMissing(false)
+    onSubmit({
+      assignedTo: assignee.length > 0 ? assignee : null,
+      assignedToRoles: roleNames.length > 0 ? roleNames : null,
+      reason: reason.trim().length > 0 ? reason.trim() : null,
+    })
+  }, [assignedTo, onSubmit, reason, roles])
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerContent
+        data-testid="task-reassign-dialog"
+        onKeyDown={(event) => {
+          if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+            event.preventDefault()
+            handleSubmit()
+          }
+        }}
+        closeAriaLabel={t('workflows.tasks.detail.reassign.close')}
+      >
+        <DrawerHeader>
+          <DrawerTitle>{t('workflows.tasks.detail.reassign.title')}</DrawerTitle>
+          <DrawerDescription>
+            {t('workflows.tasks.detail.reassign.description')}
+          </DrawerDescription>
+        </DrawerHeader>
+
+        <DrawerBody className="space-y-4 py-2">
+          <div className="space-y-1">
+            <Label htmlFor="task-reassign-assignee">
+              {t('workflows.tasks.detail.reassign.assigneeLabel')}
+            </Label>
+            <Input
+              id="task-reassign-assignee"
+              data-testid="task-reassign-assignee"
+              value={assignedTo}
+              onChange={(event) => setAssignedTo(event.target.value)}
+              placeholder={t('workflows.tasks.detail.reassign.assigneePlaceholder')}
+              autoComplete="off"
+            />
+          </div>
+
+          <div className="space-y-1">
+            <Label htmlFor="task-reassign-roles">
+              {t('workflows.tasks.detail.reassign.rolesLabel')}
+            </Label>
+            <Input
+              id="task-reassign-roles"
+              data-testid="task-reassign-roles"
+              value={roles}
+              onChange={(event) => setRoles(event.target.value)}
+              placeholder={t('workflows.tasks.detail.reassign.rolesPlaceholder')}
+              autoComplete="off"
+            />
+            <p className="text-xs text-muted-foreground">
+              {t('workflows.tasks.detail.reassign.rolesHelp')}
+            </p>
+          </div>
+
+          <div className="space-y-1">
+            <Label htmlFor="task-reassign-reason">
+              {t('workflows.tasks.detail.reassign.reasonLabel')}
+            </Label>
+            <Textarea
+              id="task-reassign-reason"
+              data-testid="task-reassign-reason"
+              value={reason}
+              onChange={(event) => setReason(event.target.value)}
+              rows={3}
+              placeholder={t('workflows.tasks.detail.reassign.reasonPlaceholder')}
+            />
+            <p className="text-xs text-muted-foreground">
+              {t('workflows.tasks.detail.reassign.reasonHelp')}
+            </p>
+          </div>
+
+          {targetMissing ? (
+            <p
+              role="alert"
+              data-testid="task-reassign-target-required"
+              className="text-sm text-status-error-text"
+            >
+              {t('workflows.tasks.detail.reassign.targetRequired')}
+            </p>
+          ) : null}
+        </DrawerBody>
+
+        <DrawerFooter
+          leading={(
+            <span className="hidden text-xs text-muted-foreground sm:inline-flex sm:items-center sm:gap-1">
+              <KbdShortcut keys={['⌘', 'Enter']} />
+              <span>{t('workflows.tasks.detail.reassign.submitHint')}</span>
+              <Kbd>Esc</Kbd>
+              <span>{t('workflows.tasks.detail.reassign.cancelHint')}</span>
+            </span>
+          )}
+        >
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            {t('common.cancel')}
+          </Button>
+          <Button
+            type="button"
+            data-testid="task-reassign-submit"
+            disabled={submitting}
+            onClick={handleSubmit}
+          >
+            {t('workflows.tasks.actions.reassign')}
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}