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

package/dist/modules/workflows/backend/tasks/[id]/page.js

@@ -1,40 +1,70 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Page, PageBody } from "@open-mercato/ui/backend/Page";
 import { Button } from "@open-mercato/ui/primitives/button";
-import { Input } from "@open-mercato/ui/primitives/input";
-import { EmailInput } from "@open-mercato/ui/primitives/email-input";
 import { FormHeader } from "@open-mercato/ui/backend/forms";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from "@open-mercato/ui/primitives/select";
 import { Spinner } from "@open-mercato/ui/primitives/spinner";
 import { Separator } from "@open-mercato/ui/primitives/separator";
 import { JsonDisplay } from "@open-mercato/ui/backend/JsonDisplay";
-import { apiCall } from "@open-mercato/ui/backend/utils/apiCall";
+import { apiCall, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
+import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
 import { flash } from "@open-mercato/ui/backend/FlashMessages";
-import { useQuery } from "@tanstack/react-query";
+import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
+import { InjectionSpot } from "@open-mercato/ui/backend/injection/InjectionSpot";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
 import { MobileTaskForm } from "../../../components/mobile/MobileTaskForm.js";
+import { StatusChip } from "../../../components/work-inbox/StatusChip.js";
+import { TaskActionNotice } from "../../../components/work-inbox/TaskActionNotice.js";
+import {
+  ReassignTaskDialog
+} from "../../../components/work-inbox/ReassignTaskDialog.js";
+import { TaskFormFields } from "../../../components/work-inbox/TaskFormFields.js";
 import { useIsMobile } from "@open-mercato/ui/hooks/useIsMobile";
 import { RecordNotFoundState, ErrorMessage } from "@open-mercato/ui/backend/detail";
 import { createLogger } from "@open-mercato/shared/lib/logger";
+import {
+  TASK_DETAIL_INJECTION_SPOT_ID,
+  WORK_INBOX_HREF,
+  buildWorkInboxItemHref
+} from "../../../lib/work-inbox/navigation.js";
+import {
+  EntityContextPanel,
+  bindingsToEntityContextItems
+} from "../../../components/work-inbox/EntityContextPanel.js";
+import {
+  WORK_INBOX_OVERDUE_TONE,
+  describeTaskActionBlock,
+  describeWorkInboxPriority,
+  describeWorkInboxStatus
+} from "../../../lib/work-inbox/presentation.js";
+import { normalizeWorkInboxPriority } from "../../../lib/work-inbox/provider.js";
+import { flattenTaskText } from "../../../lib/task-resolution.js";
+import { readRecordedDecision } from "../../../lib/task-decisions.js";
+import { normalizeTaskFormSchema } from "../../../lib/task-form-schema.js";
 const logger = createLogger("workflows");
+function decisionButtonVariant(style) {
+  if (style === "destructive") return "destructive";
+  if (style === "secondary") return "outline";
+  return "default";
+}
 function UserTaskDetailPage({ params }) {
   const router = useRouter();
   const t = useT();
+  const queryClient = useQueryClient();
   const isMobile = useIsMobile();
   const [formData, setFormData] = React.useState({});
   const [comments, setComments] = React.useState("");
   const [submitting, setSubmitting] = React.useState(false);
+  const [reassignOpen, setReassignOpen] = React.useState(false);
   const [invalidField, setInvalidField] = React.useState(null);
+  const { runMutation, retryLastMutation } = useGuardedMutation({
+    contextId: `workflows-task:${params.id}`,
+    blockedMessage: t("ui.forms.flash.saveBlocked", "Save blocked by validation")
+  });
   const { data: task, isLoading, error } = useQuery({
     queryKey: ["workflow-task", params.id],
     queryFn: async () => {
@@ -51,6 +81,30 @@ function UserTaskDetailPage({ params }) {
       return result.result?.data ?? null;
     }
   });
+  const mutationContext = React.useMemo(
+    () => ({
+      formId: `workflows-task:${params.id}`,
+      taskId: params.id,
+      resourceKind: "workflows.user_task",
+      resourceId: params.id,
+      retryLastMutation
+    }),
+    [params.id, retryLastMutation]
+  );
+  const taskInjectionContext = React.useMemo(
+    () => ({
+      taskId: params.id,
+      workflowInstanceId: task?.workflowInstanceId ?? null,
+      status: task?.status ?? null,
+      formSchema: task?.formSchema ?? null,
+      formData: task?.formData ?? null,
+      retryLastMutation
+    }),
+    [params.id, retryLastMutation, task?.formData, task?.formSchema, task?.status, task?.workflowInstanceId]
+  );
+  const refreshTask = React.useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: ["workflow-task", params.id] });
+  }, [params.id, queryClient]);
   const handleFieldChange = (fieldName, value) => {
     setFormData((prev) => ({
       ...prev,
@@ -58,246 +112,176 @@ function UserTaskDetailPage({ params }) {
     }));
     if (invalidField === fieldName) setInvalidField(null);
   };
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (!task) return;
-    if (task.formSchema?.required) {
-      for (const requiredField of task.formSchema.required) {
-        if (!formData[requiredField] || formData[requiredField] === "") {
-          const fieldSchema = task.formSchema.properties?.[requiredField];
-          const fieldLabel = fieldSchema?.title ?? requiredField;
-          flash(t("workflows.tasks.detail.validation.requiredField", { field: fieldLabel }), "error");
-          setInvalidField(requiredField);
-          if (typeof document !== "undefined") {
-            const trigger = document.getElementById(requiredField);
-            trigger?.scrollIntoView({ behavior: "smooth", block: "center" });
-            trigger?.focus();
-          }
-          return;
+  const validateRequiredFields = React.useCallback(() => {
+    const normalizedSchema = normalizeTaskFormSchema(task?.formSchema);
+    if (!normalizedSchema?.required) return true;
+    for (const requiredField of normalizedSchema.required) {
+      if (!formData[requiredField] || formData[requiredField] === "") {
+        const fieldSchema = normalizedSchema.properties?.[requiredField];
+        const fieldLabel = fieldSchema?.title ?? requiredField;
+        flash(t("workflows.tasks.detail.validation.requiredField", { field: fieldLabel }), "error");
+        setInvalidField(requiredField);
+        if (typeof document !== "undefined") {
+          const trigger = document.getElementById(requiredField);
+          trigger?.scrollIntoView({ behavior: "smooth", block: "center" });
+          trigger?.focus();
         }
+        return false;
       }
     }
     setInvalidField(null);
+    return true;
+  }, [formData, task, t]);
+  const completeTask = React.useCallback(
+    async (decisionId) => {
+      if (!task) return;
+      if (!validateRequiredFields()) return;
+      setSubmitting(true);
+      try {
+        const result = await runMutation({
+          operation: () => apiCall(`/api/workflows/tasks/${params.id}/complete`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              formData,
+              comments: comments || void 0,
+              ...decisionId ? { decisionId } : {}
+            })
+          }),
+          context: mutationContext,
+          mutationPayload: { formData, comments, decisionId }
+        });
+        if (result.ok) {
+          flash(t("workflows.tasks.messages.completed"), "success");
+          refreshTask();
+        } else {
+          const failure = result.result;
+          flash(failure?.error || t("workflows.tasks.messages.completeFailed"), "error");
+        }
+      } catch (err) {
+        logger.error("Error completing task", { err });
+        flash(t("workflows.tasks.messages.completeFailed"), "error");
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [comments, formData, mutationContext, params.id, refreshTask, runMutation, t, task, validateRequiredFields]
+  );
+  const handleSubmit = React.useCallback(
+    (event) => {
+      event.preventDefault();
+      void completeTask();
+    },
+    [completeTask]
+  );
+  const handleClaim = React.useCallback(async () => {
     setSubmitting(true);
     try {
-      const result = await apiCall(`/api/workflows/tasks/${params.id}/complete`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          formData,
-          comments: comments || void 0
-        })
+      const result = await runMutation({
+        operation: () => apiCall(`/api/workflows/tasks/${params.id}/claim`, { method: "POST" }),
+        context: mutationContext,
+        mutationPayload: { action: "claim" }
       });
       if (result.ok) {
-        flash(t("workflows.tasks.messages.completed"), "success");
-        router.push("/backend/tasks");
+        flash(t("workflows.tasks.messages.claimed"), "success");
+        refreshTask();
       } else {
-        const error2 = result.result;
-        flash(error2?.error || t("workflows.tasks.messages.completeFailed"), "error");
+        flash(t("workflows.tasks.messages.claimFailed"), "error");
       }
     } catch (err) {
-      logger.error("Error completing task", { err });
-      flash(t("workflows.tasks.messages.completeFailed"), "error");
+      logger.error("Error claiming task", { err });
+      flash(t("workflows.tasks.messages.claimFailed"), "error");
     } finally {
       setSubmitting(false);
     }
-  };
-  const fieldValue = (fieldName) => {
-    const val = formData[fieldName];
-    if (val == null || val === false) return "";
-    if (typeof val === "boolean") return "";
-    return val;
-  };
-  const renderFormField = (fieldName, fieldSchema) => {
-    const fieldType = fieldSchema.type || "string";
-    const fieldTitle = fieldSchema.title || fieldName;
-    const fieldDescription = fieldSchema.description;
-    const required = task?.formSchema?.required?.includes(fieldName) || false;
-    const enumValues = fieldSchema.enum;
-    const inputClasses = "w-full px-3 py-2 border border-border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
-    const labelClasses = "block text-sm font-medium text-foreground mb-1";
-    if (enumValues && Array.isArray(enumValues)) {
-      return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
-          fieldTitle,
-          required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
-        ] }),
-        fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
-        /* @__PURE__ */ jsxs(
-          Select,
-          {
-            value: fieldValue(fieldName) ? String(fieldValue(fieldName)) : void 0,
-            onValueChange: (value) => handleFieldChange(fieldName, value ?? ""),
-            children: [
-              /* @__PURE__ */ jsx(
-                SelectTrigger,
-                {
-                  id: fieldName,
-                  className: `${inputClasses} ${invalidField === fieldName ? "ring-2 ring-status-error-border border-status-error-border" : ""}`,
-                  "aria-required": required,
-                  "aria-invalid": invalidField === fieldName ? true : void 0,
-                  children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("workflows.tasks.detail.form.selectOption") })
-                }
-              ),
-              /* @__PURE__ */ jsx(SelectContent, { children: enumValues.map((value) => /* @__PURE__ */ jsx(SelectItem, { value, children: value }, value)) })
-            ]
-          }
-        )
-      ] }, fieldName);
+  }, [mutationContext, params.id, refreshTask, runMutation, t]);
+  const handleRelease = React.useCallback(async () => {
+    setSubmitting(true);
+    try {
+      const result = await runMutation({
+        operation: () => apiCall(`/api/workflows/tasks/${params.id}/unclaim`, { method: "POST" }),
+        context: mutationContext,
+        mutationPayload: { action: "unclaim" }
+      });
+      if (result.ok) {
+        flash(t("workflows.workInbox.messages.released"), "success");
+        refreshTask();
+      } else {
+        flash(t("workflows.workInbox.messages.releaseFailed"), "error");
+      }
+    } catch (err) {
+      logger.error("Error releasing task", { err });
+      flash(t("workflows.workInbox.messages.releaseFailed"), "error");
+    } finally {
+      setSubmitting(false);
     }
-    switch (fieldType) {
-      case "string":
-        if (fieldSchema.format === "email") {
-          return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
-              fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
-            ] }),
-            fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
-            /* @__PURE__ */ jsx(
-              EmailInput,
-              {
-                id: fieldName,
-                value: fieldValue(fieldName),
-                onChange: (e) => handleFieldChange(fieldName, e.target.value),
-                required
-              }
-            )
-          ] }, fieldName);
-        }
-        if (fieldSchema.format === "date") {
-          return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
-              fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
-            ] }),
-            fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "date",
-                id: fieldName,
-                value: fieldValue(fieldName),
-                onChange: (e) => handleFieldChange(fieldName, e.target.value),
-                required,
-                className: inputClasses
-              }
-            )
-          ] }, fieldName);
-        }
-        if (fieldSchema.maxLength && fieldSchema.maxLength > 200) {
-          return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
-              fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
-            ] }),
-            fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
-            /* @__PURE__ */ jsx(
-              "textarea",
-              {
-                id: fieldName,
-                value: fieldValue(fieldName),
-                onChange: (e) => handleFieldChange(fieldName, e.target.value),
-                required,
-                rows: 4,
-                className: inputClasses
-              }
-            )
-          ] }, fieldName);
+  }, [mutationContext, params.id, refreshTask, runMutation, t]);
+  const handleReassign = React.useCallback(
+    async (target) => {
+      if (!task) return;
+      setSubmitting(true);
+      try {
+        const result = await runMutation({
+          operation: () => withScopedApiRequestHeaders(
+            buildOptimisticLockHeader(task.updatedAt),
+            () => apiCall(`/api/workflows/tasks/${params.id}/reassign`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify(target)
+            })
+          ),
+          context: mutationContext,
+          mutationPayload: { action: "reassign", ...target }
+        });
+        if (result.ok) {
+          setReassignOpen(false);
+          flash(t("workflows.tasks.messages.reassigned"), "success");
+          refreshTask();
+        } else {
+          const failure = result.result;
+          flash(failure?.error || t("workflows.tasks.messages.reassignFailed"), "error");
         }
-        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
-            fieldTitle,
-            required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
-          ] }),
-          fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "text",
-              id: fieldName,
-              value: fieldValue(fieldName),
-              onChange: (e) => handleFieldChange(fieldName, e.target.value),
-              required
-            }
-          )
-        ] }, fieldName);
-      case "number":
-      case "integer":
-        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
-            fieldTitle,
-            required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
-          ] }),
-          fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "number",
-              id: fieldName,
-              value: fieldValue(fieldName),
-              onChange: (e) => handleFieldChange(fieldName, e.target.value ? Number(e.target.value) : ""),
-              required,
-              step: fieldType === "integer" ? 1 : "any"
-            }
-          )
-        ] }, fieldName);
-      case "boolean":
-        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                id: fieldName,
-                checked: !!formData[fieldName],
-                onChange: (e) => handleFieldChange(fieldName, e.target.checked),
-                className: "w-4 h-4 text-primary border-border rounded focus-visible:ring-ring"
-              }
-            ),
-            /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: "text-sm font-medium text-foreground", children: [
-              fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
-            ] })
-          ] }),
-          fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground ml-6", children: fieldDescription })
-        ] }, fieldName);
-      default:
-        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs("label", { htmlFor: fieldName, className: labelClasses, children: [
-            fieldTitle,
-            required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
-          ] }),
-          fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription }),
-          /* @__PURE__ */ jsx(
-            Input,
-            {
-              type: "text",
-              id: fieldName,
-              value: fieldValue(fieldName),
-              onChange: (e) => handleFieldChange(fieldName, e.target.value),
-              required
-            }
-          )
-        ] }, fieldName);
-    }
-  };
-  const getStatusBadgeClass = (status) => {
-    switch (status) {
-      case "PENDING":
-        return "bg-status-warning-bg text-status-warning-text";
-      case "IN_PROGRESS":
-        return "bg-status-info-bg text-status-info-text";
-      case "COMPLETED":
-        return "bg-status-success-bg text-status-success-text";
-      case "CANCELLED":
-        return "bg-muted text-foreground";
-      default:
-        return "bg-muted text-muted-foreground";
+      } catch (err) {
+        logger.error("Error reassigning task", { err });
+        flash(t("workflows.tasks.messages.reassignFailed"), "error");
+      } finally {
+        setSubmitting(false);
+      }
+    },
+    [mutationContext, params.id, refreshTask, runMutation, t, task]
+  );
+  const handleNextTask = React.useCallback(async () => {
+    setSubmitting(true);
+    try {
+      const result = await runMutation({
+        operation: () => apiCall("/api/workflows/work-inbox/next", {
+          method: "POST"
+        }),
+        context: mutationContext,
+        mutationPayload: { action: "claim-next" }
+      });
+      if (!result.ok) {
+        flash(t("workflows.tasks.messages.claimFailed"), "error");
+        return;
+      }
+      const claimed = result.result?.data ?? null;
+      if (!claimed) {
+        flash(t("workflows.workInbox.messages.nothingClaimable"), "info");
+        return;
+      }
+      flash(t("workflows.tasks.messages.claimed"), "success");
+      router.push(buildWorkInboxItemHref(claimed.id));
+    } catch (err) {
+      logger.error("Error claiming the next task", { err });
+      flash(t("workflows.tasks.messages.claimFailed"), "error");
+    } finally {
+      setSubmitting(false);
     }
-  };
+  }, [mutationContext, router, runMutation, t]);
+  const getStatusBadgeClass = React.useCallback(
+    (status) => describeWorkInboxStatus(status).badge,
+    []
+  );
   if (isLoading) {
     return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-12", children: [
       /* @__PURE__ */ jsx(Spinner, {}),
@@ -310,7 +294,7 @@ function UserTaskDetailPage({ params }) {
       RecordNotFoundState,
       {
         label: t("workflows.tasks.detail.notFound", "Task not found"),
-        backHref: "/backend/tasks",
+        backHref: WORK_INBOX_HREF,
         backLabel: t("workflows.tasks.detail.backToList", "Back to Tasks")
       }
     ) }) });
@@ -320,185 +304,362 @@ function UserTaskDetailPage({ params }) {
       ErrorMessage,
       {
         label: error?.message ?? t("workflows.tasks.detail.loadFailed", "Failed to load task"),
-        action: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(Link, { href: "/backend/tasks", children: t("workflows.tasks.detail.backToList", "Back to Tasks") }) })
+        action: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(Link, { href: WORK_INBOX_HREF, children: t("workflows.tasks.detail.backToList", "Back to Tasks") }) })
       }
     ) }) });
   }
   const isCompletable = task.status === "PENDING" || task.status === "IN_PROGRESS";
-  const isOverdue = task.dueDate && new Date(task.dueDate) < /* @__PURE__ */ new Date() && isCompletable;
+  const isOverdue = Boolean(task.dueDate) && new Date(task.dueDate) < /* @__PURE__ */ new Date() && isCompletable;
+  const statusDescriptor = describeWorkInboxStatus(task.status);
+  const priority = normalizeWorkInboxPriority(task.priority);
+  const priorityDescriptor = describeWorkInboxPriority(priority);
+  const decisions = task.decisions ?? [];
+  const contextItems = bindingsToEntityContextItems(task.entityBindings, {
+    noLink: t("workflows.tasks.detail.records.noLink")
+  });
+  const recordedDecisionId = readRecordedDecision(task.formData);
+  const recordedDecision = recordedDecisionId ? decisions.find((decision) => decision.id === recordedDecisionId) ?? null : null;
+  const legacyClaimable = task.status === "PENDING" && !task.assignedTo && !task.claimedBy && (task.assignedToRoles?.length ?? 0) > 0;
+  const canComplete = task.canComplete ?? isCompletable;
+  const canClaim = task.canClaim ?? legacyClaimable;
+  const canRelease = task.canRelease ?? false;
+  const canReassign = task.canReassign ?? false;
+  const blockDescriptor = canComplete ? null : describeTaskActionBlock(task.actBlockedReason ?? "not-workable");
   if (isMobile) {
-    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx(
-        FormHeader,
-        {
-          mode: "detail",
-          backHref: "/backend/tasks",
-          backLabel: t("workflows.tasks.backToList", "Back to tasks")
-        }
-      ),
+    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsxs(PageBody, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(
+          FormHeader,
+          {
+            mode: "detail",
+            backHref: WORK_INBOX_HREF,
+            backLabel: t("workflows.tasks.backToList", "Back to tasks")
+          }
+        ),
+        blockDescriptor ? /* @__PURE__ */ jsx(
+          TaskActionNotice,
+          {
+            descriptor: blockDescriptor,
+            canReassign,
+            disabled: submitting,
+            onReassign: () => setReassignOpen(true)
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          MobileTaskForm,
+          {
+            task,
+            formData,
+            comments,
+            submitting,
+            isCompletable: canComplete,
+            isOverdue,
+            onFieldChange: handleFieldChange,
+            onCommentsChange: setComments,
+            onSubmit: handleSubmit,
+            onCancel: () => router.push(WORK_INBOX_HREF),
+            getStatusBadgeClass,
+            decisions,
+            onDecision: (decisionId) => void completeTask(decisionId)
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsx(
-        MobileTaskForm,
+        ReassignTaskDialog,
         {
-          task,
-          formData,
-          comments,
+          open: reassignOpen,
           submitting,
-          isCompletable,
-          isOverdue: !!isOverdue,
-          onFieldChange: handleFieldChange,
-          onCommentsChange: setComments,
-          onSubmit: handleSubmit,
-          onCancel: () => router.push("/backend/tasks"),
-          getStatusBadgeClass
+          onOpenChange: setReassignOpen,
+          onSubmit: (target) => void handleReassign(target)
         }
       )
-    ] }) }) });
+    ] }) });
   }
-  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto space-y-6", children: [
-    /* @__PURE__ */ jsx(
-      FormHeader,
-      {
-        mode: "detail",
-        backHref: "/backend/tasks",
-        backLabel: t("workflows.tasks.backToList", "Back to tasks"),
-        entityTypeLabel: t("workflows.tasks.detail.type", "User task"),
-        title: task.taskName,
-        subtitle: task.description || void 0,
-        statusBadge: /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `inline-flex items-center px-3 py-1 rounded text-sm font-medium ${getStatusBadgeClass(task.status)}`,
-            children: t(`workflows.tasks.statuses.${task.status}`)
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: isOverdue && /* @__PURE__ */ jsx("div", { className: "bg-status-error-bg border border-status-error-border rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text font-medium", children: t("workflows.tasks.detail.overdueWarning") }) }) }),
-    /* @__PURE__ */ jsx(Separator, {}),
-    /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 rounded-lg p-4 space-y-3", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: t("workflows.tasks.detail.sections.taskInfo") }),
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-            t("workflows.tasks.fields.createdAt"),
-            ":"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "ml-2 text-foreground", children: new Date(task.createdAt).toLocaleString() })
-        ] }),
-        task.dueDate && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-            t("workflows.tasks.fields.dueDate"),
-            ":"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: `ml-2 ${isOverdue ? "text-status-error-text font-medium" : "text-foreground"}`, children: new Date(task.dueDate).toLocaleString() })
-        ] }),
-        task.assignedTo && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-            t("workflows.tasks.detail.assignedTo"),
-            ":"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "ml-2 text-foreground", children: task.assignedTo })
-        ] }),
-        task.claimedBy && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-            t("workflows.tasks.claimedBy"),
-            ":"
-          ] }),
-          /* @__PURE__ */ jsx("span", { className: "ml-2 text-foreground", children: task.claimedBy })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
-            t("workflows.tasks.detail.workflowInstance"),
-            ":"
-          ] }),
-          /* @__PURE__ */ jsxs(
-            Link,
-            {
-              href: `/backend/instances/${task.workflowInstanceId}`,
-              className: "ml-2 text-primary hover:underline text-xs font-mono",
-              children: [
-                task.workflowInstanceId.slice(0, 8),
-                "..."
-              ]
-            }
-          )
-        ] })
-      ] })
-    ] }),
-    !isCompletable && /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-info-text", children: t("workflows.tasks.detail.cannotComplete") }) }),
-    isCompletable && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
-        task.formSchema?.properties && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: t("workflows.tasks.detail.sections.form") }),
-          Object.keys(task.formSchema.properties).map(
-            (fieldName) => renderFormField(fieldName, task.formSchema.properties[fieldName])
-          )
-        ] }),
-        !task.formSchema?.properties && /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-info-text", children: t("workflows.tasks.detail.noFormSchema") }) }),
-        /* @__PURE__ */ jsx(Separator, {}),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxs("label", { htmlFor: "comments", className: "block text-sm font-medium text-foreground", children: [
-            t("workflows.tasks.detail.comments"),
-            " (",
-            t("workflows.tasks.detail.optional"),
-            ")"
-          ] }),
-          /* @__PURE__ */ jsx(
-            "textarea",
-            {
-              id: "comments",
-              value: comments,
-              onChange: (e) => setComments(e.target.value),
-              rows: 3,
-              className: "w-full px-3 py-2 border border-border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              placeholder: t("workflows.tasks.detail.commentsPlaceholder")
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 pt-4 sm:flex-row sm:items-center", children: [
-          /* @__PURE__ */ jsx(
-            Button,
+  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsxs(PageBody, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx(
+        FormHeader,
+        {
+          mode: "detail",
+          backHref: WORK_INBOX_HREF,
+          backLabel: t("workflows.tasks.backToList", "Back to tasks"),
+          entityTypeLabel: t("workflows.tasks.detail.type", "User task"),
+          title: task.taskName,
+          subtitle: task.description || void 0,
+          statusBadge: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              StatusChip,
+              {
+                descriptor: statusDescriptor,
+                label: t(`workflows.tasks.statuses.${task.status}`, task.status)
+              }
+            ),
+            priorityDescriptor && priority ? /* @__PURE__ */ jsx(
+              StatusChip,
+              {
+                descriptor: priorityDescriptor,
+                label: t(`workflows.workInbox.priorities.${priority}`, priority)
+              }
+            ) : null,
+            isOverdue ? /* @__PURE__ */ jsx(
+              StatusChip,
+              {
+                descriptor: WORK_INBOX_OVERDUE_TONE,
+                label: t("workflows.tasks.overdue")
+              }
+            ) : null
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-6 lg:grid-cols-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-6 lg:col-span-2", children: [
+          isOverdue ? /* @__PURE__ */ jsx("div", { className: "bg-status-error-bg border border-status-error-border rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text font-medium", children: t("workflows.tasks.detail.overdueWarning") }) }) : null,
+          task.description ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold mb-2", children: t("workflows.tasks.detail.sections.instructions") }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground whitespace-pre-wrap", children: task.description })
+          ] }) : null,
+          /* @__PURE__ */ jsx(InjectionSpot, { spotId: TASK_DETAIL_INJECTION_SPOT_ID, context: taskInjectionContext }),
+          canClaim ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-muted/50 p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("workflows.tasks.detail.claimPrompt") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                "data-testid": "task-claim",
+                disabled: submitting,
+                onClick: () => void handleClaim(),
+                children: t("workflows.tasks.actions.claim")
+              }
+            )
+          ] }) : null,
+          canRelease ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-muted/50 p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("workflows.tasks.detail.releasePrompt") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                "data-testid": "task-release",
+                disabled: submitting,
+                onClick: () => void handleRelease(),
+                children: t("workflows.tasks.actions.unclaim")
+              }
+            )
+          ] }) : null,
+          blockDescriptor ? /* @__PURE__ */ jsx(
+            TaskActionNotice,
             {
-              type: "submit",
+              descriptor: blockDescriptor,
+              canReassign,
               disabled: submitting,
-              className: "w-full sm:w-auto bg-primary text-primary-foreground hover:bg-primary/90",
-              children: submitting ? t("workflows.tasks.detail.submitting") : t("workflows.tasks.detail.completeTask")
+              onReassign: () => setReassignOpen(true)
             }
-          ),
-          /* @__PURE__ */ jsx(
+          ) : null,
+          canComplete && canReassign ? /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
             Button,
             {
               type: "button",
               variant: "outline",
-              onClick: () => router.push("/backend/tasks"),
+              "data-testid": "task-reassign",
               disabled: submitting,
-              className: "w-full sm:w-auto",
-              children: t("common.cancel")
+              onClick: () => setReassignOpen(true),
+              children: t("workflows.tasks.actions.reassign")
             }
-          )
+          ) }) : null,
+          canComplete ? /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
+            /* @__PURE__ */ jsx(
+              TaskFormFields,
+              {
+                formSchema: task.formSchema,
+                values: formData,
+                invalidField,
+                disabled: submitting,
+                onFieldChange: handleFieldChange,
+                formKey: task.formKey,
+                taskId: task.id,
+                taskName: task.taskName,
+                entityBindings: task.entityBindings,
+                decisions,
+                onValuesChange: setFormData
+              }
+            ),
+            /* @__PURE__ */ jsx(Separator, {}),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("label", { htmlFor: "comments", className: "block text-sm font-medium text-foreground", children: [
+                t("workflows.tasks.detail.comments"),
+                " (",
+                t("workflows.tasks.detail.optional"),
+                ")"
+              ] }),
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  id: "comments",
+                  value: comments,
+                  onChange: (e) => setComments(e.target.value),
+                  rows: 3,
+                  className: "w-full px-3 py-2 border border-border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  placeholder: t("workflows.tasks.detail.commentsPlaceholder")
+                }
+              )
+            ] }),
+            decisions.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", "data-testid": "task-decisions", children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: t("workflows.tasks.detail.sections.decisions") }),
+              /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 sm:flex-row sm:flex-wrap", children: decisions.map((decision) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  "data-testid": `task-decision-${decision.id}`,
+                  variant: decisionButtonVariant(decision.style),
+                  disabled: submitting,
+                  onClick: () => void completeTask(decision.id),
+                  className: "w-full sm:w-auto",
+                  children: flattenTaskText(decision.label) ?? decision.id
+                },
+                decision.id
+              )) })
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 pt-4 sm:flex-row sm:items-center", children: [
+              /* @__PURE__ */ jsx(Button, { type: "submit", "data-testid": "task-complete", disabled: submitting, className: "w-full sm:w-auto", children: submitting ? t("workflows.tasks.detail.submitting") : t("workflows.tasks.detail.completeTask") }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  onClick: () => router.push(WORK_INBOX_HREF),
+                  disabled: submitting,
+                  className: "w-full sm:w-auto",
+                  children: t("common.cancel")
+                }
+              )
+            ] })
+          ] }) : null,
+          task.status === "COMPLETED" ? /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            recordedDecisionId ? /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border p-4", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+              t("workflows.tasks.detail.decisionTaken"),
+              ":",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: recordedDecision ? flattenTaskText(recordedDecision.label) ?? recordedDecisionId : recordedDecisionId })
+            ] }) }) : null,
+            task.formData ? /* @__PURE__ */ jsx(
+              JsonDisplay,
+              {
+                data: task.formData,
+                title: t("workflows.tasks.detail.sections.submittedData"),
+                maxInitialDepth: 2
+              }
+            ) : null,
+            task.comments ? /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 rounded-lg p-4", children: [
+              /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-foreground mb-2", children: [
+                t("workflows.tasks.detail.comments"),
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground whitespace-pre-wrap", children: task.comments })
+            ] }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border bg-muted/50 p-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("workflows.tasks.detail.nextTaskPrompt") }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    "data-testid": "task-next",
+                    disabled: submitting,
+                    onClick: () => void handleNextTask(),
+                    children: t("workflows.workInbox.actions.claimNext")
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", children: /* @__PURE__ */ jsx(Link, { href: WORK_INBOX_HREF, children: t("workflows.tasks.detail.backToList") }) })
+              ] })
+            ] })
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx(
+            EntityContextPanel,
+            {
+              testId: "task-context-records",
+              title: t("workflows.tasks.detail.sections.records"),
+              items: contextItems,
+              emptyLabel: t("workflows.tasks.detail.records.empty"),
+              linkLabel: t("workflows.tasks.detail.records.open")
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-4 space-y-2", children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: t("workflows.tasks.detail.sections.taskInfo") }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-sm", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  t("workflows.tasks.fields.createdAt"),
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ml-2 text-foreground", children: new Date(task.createdAt).toLocaleString() })
+              ] }),
+              task.dueDate ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  t("workflows.tasks.fields.dueDate"),
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `ml-2 ${isOverdue ? `${WORK_INBOX_OVERDUE_TONE.text} font-medium` : "text-foreground"}`,
+                    children: new Date(task.dueDate).toLocaleString()
+                  }
+                )
+              ] }) : null,
+              task.assignedTo ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  t("workflows.tasks.detail.assignedTo"),
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ml-2 text-foreground", children: task.assignedTo })
+              ] }) : null,
+              task.assignedToRoles?.length ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  t("workflows.tasks.roles"),
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ml-2 text-foreground", children: task.assignedToRoles.join(", ") })
+              ] }) : null,
+              task.claimedBy ? /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  t("workflows.tasks.claimedBy"),
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "ml-2 text-foreground", children: task.claimedBy })
+              ] }) : null,
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  t("workflows.tasks.detail.workflowInstance"),
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    href: `/backend/instances/${task.workflowInstanceId}`,
+                    className: "ml-2 text-primary hover:underline text-xs font-mono",
+                    children: [
+                      task.workflowInstanceId.slice(0, 8),
+                      "..."
+                    ]
+                  }
+                )
+              ] })
+            ] })
+          ] })
         ] })
       ] })
     ] }),
-    task.status === "COMPLETED" && task.formData && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsx(
-        JsonDisplay,
-        {
-          data: task.formData,
-          title: t("workflows.tasks.detail.sections.submittedData"),
-          maxInitialDepth: 2
-        }
-      ),
-      task.comments && /* @__PURE__ */ jsxs("div", { className: "bg-muted/50 rounded-lg p-4", children: [
-        /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-foreground mb-2", children: [
-          t("workflows.tasks.detail.comments"),
-          ":"
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground whitespace-pre-wrap", children: task.comments })
-      ] })
-    ] })
-  ] }) }) });
+    /* @__PURE__ */ jsx(
+      ReassignTaskDialog,
+      {
+        open: reassignOpen,
+        submitting,
+        onOpenChange: setReassignOpen,
+        onSubmit: (target) => void handleReassign(target)
+      }
+    )
+  ] }) });
 }
 export {
   UserTaskDetailPage as default