@open-mercato/core 0.5.1-develop.2860.07af3a6a9d → 0.5.1-develop.2874.77704bccbd

package/dist/modules/workflows/components/mobile/MobileDefinitionDetail.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/workflows/components/mobile/MobileDefinitionDetail.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { NODE_TYPE_ICONS, stepTypeToNodeType } from '../../lib/node-type-icons'\nimport { Circle, Pencil, Trash2, ArrowRight, Plus } from 'lucide-react'\nimport type { WorkflowDefinitionFormValues } from '../formConfig'\n\ninterface WorkflowStep {\n  stepId: string\n  stepName: string\n  stepType?: string\n  type?: string\n}\n\ninterface WorkflowTransition {\n  transitionId: string\n  fromStepId: string\n  toStepId: string\n  trigger?: string\n}\n\ninterface MobileDefinitionDetailProps {\n  values: WorkflowDefinitionFormValues\n  onEditStep: (index: number) => void\n  onDeleteStep: (index: number) => void\n  onAddStep: () => void\n  onEditTransition: (index: number) => void\n  onDeleteTransition: (index: number) => void\n  onAddTransition: () => void\n}\n\nexport function MobileDefinitionDetail({\n  values,\n  onEditStep,\n  onDeleteStep,\n  onAddStep,\n  onEditTransition,\n  onDeleteTransition,\n  onAddTransition,\n}: MobileDefinitionDetailProps) {\n  const t = useT()\n  const steps = values.steps || []\n  const transitions = values.transitions || []\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg border bg-card p-4\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <h2 className=\"text-sm font-semibold\">{t('workflows.form.stepsLabel', 'Steps')} ({steps.length})</h2>\n          <Button variant=\"outline\" size=\"sm\" onClick={onAddStep} className=\"h-8 text-xs\">\n            <Plus className=\"mr-1 h-3.5 w-3.5\" />\n            {t('workflows.mobile.addStep', 'Add Step')}\n          </Button>\n        </div>\n\n        {steps.length === 0 ? (\n          <p className=\"py-4 text-center text-sm text-muted-foreground\">\n            {t('workflows.mobile.noSteps', 'No steps defined yet.')}\n          </p>\n        ) : (\n          <div className=\"space-y-2\">\n            {steps.map((step: WorkflowStep, idx: number) => {\n              const nodeType = stepTypeToNodeType(step.stepType || step.type || '')\n              const Icon = NODE_TYPE_ICONS[nodeType] || Circle\n              return (\n                <div\n                  key={step.stepId || idx}\n                  className=\"flex items-center gap-3 rounded-lg border bg-background p-3\"\n                >\n                  <Icon className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"truncate text-sm font-medium\">{step.stepName || step.stepId}</div>\n                    <div className=\"text-[10px] uppercase text-muted-foreground\">\n                      {step.stepType || step.type || 'unknown'}\n                    </div>\n                  </div>\n                  <div className=\"flex shrink-0 gap-1\">\n                    <button\n                      onClick={() => onEditStep(idx)}\n                      className=\"rounded p-1.5 hover:bg-muted\"\n                      aria-label={t('workflows.mobile.editStep')}\n                    >\n                      <Pencil className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                    </button>\n                    <button\n                      onClick={() => onDeleteStep(idx)}\n                      className=\"rounded p-1.5 hover:bg-muted\"\n                      aria-label={t('workflows.mobile.deleteStep')}\n                    >\n                      <Trash2 className=\"h-3.5 w-3.5 text-destructive\" />\n                    </button>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        )}\n      </div>\n\n      <div className=\"rounded-lg border bg-card p-4\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <h2 className=\"text-sm font-semibold\">{t('workflows.form.transitionsLabel', 'Transitions')} ({transitions.length})</h2>\n          <Button variant=\"outline\" size=\"sm\" onClick={onAddTransition} className=\"h-8 text-xs\">\n            <Plus className=\"mr-1 h-3.5 w-3.5\" />\n            {t('workflows.mobile.addTransition', 'Add Transition')}\n          </Button>\n        </div>\n\n        {transitions.length === 0 ? (\n          <p className=\"py-4 text-center text-sm text-muted-foreground\">\n            {t('workflows.mobile.noTransitions', 'No transitions defined yet.')}\n          </p>\n        ) : (\n          <div className=\"space-y-2\">\n            {transitions.map((transition: WorkflowTransition, idx: number) => (\n              <div\n                key={transition.transitionId || idx}\n                className=\"flex items-center gap-3 rounded-lg border bg-background p-3\"\n              >\n                <ArrowRight className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-1.5 text-sm\">\n                    <span className=\"truncate font-mono text-xs\">{transition.fromStepId}</span>\n                    <ArrowRight className=\"h-3 w-3 shrink-0 text-muted-foreground\" />\n                    <span className=\"truncate font-mono text-xs\">{transition.toStepId}</span>\n                  </div>\n                  <div className=\"text-[10px] text-muted-foreground\">\n                    {transition.trigger || 'auto'}\n                  </div>\n                </div>\n                <div className=\"flex shrink-0 gap-1\">\n                  <button\n                    onClick={() => onEditTransition(idx)}\n                    className=\"rounded p-1.5 hover:bg-muted\"\n                    aria-label={t('workflows.mobile.editTransition')}\n                  >\n                    <Pencil className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                  </button>\n                  <button\n                    onClick={() => onDeleteTransition(idx)}\n                    className=\"rounded p-1.5 hover:bg-muted\"\n                    aria-label={t('workflows.mobile.deleteTransition')}\n                  >\n                    <Trash2 className=\"h-3.5 w-3.5 text-destructive\" />\n                  </button>\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { NODE_TYPE_ICONS, stepTypeToNodeType } from '../../lib/node-type-icons'\nimport { Circle, Pencil, Trash2, ArrowRight, Plus } from 'lucide-react'\nimport type { WorkflowDefinitionFormValues } from '../formConfig'\n\ninterface WorkflowStep {\n  stepId: string\n  stepName: string\n  stepType?: string\n  type?: string\n}\n\ninterface WorkflowTransition {\n  transitionId: string\n  fromStepId: string\n  toStepId: string\n  trigger?: string\n}\n\ninterface MobileDefinitionDetailProps {\n  values: WorkflowDefinitionFormValues\n  onEditStep: (index: number) => void\n  onDeleteStep: (index: number) => void\n  onAddStep: () => void\n  onEditTransition: (index: number) => void\n  onDeleteTransition: (index: number) => void\n  onAddTransition: () => void\n}\n\nexport function MobileDefinitionDetail({\n  values,\n  onEditStep,\n  onDeleteStep,\n  onAddStep,\n  onEditTransition,\n  onDeleteTransition,\n  onAddTransition,\n}: MobileDefinitionDetailProps) {\n  const t = useT()\n  const steps = values.steps || []\n  const transitions = values.transitions || []\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg border bg-card p-4\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <h2 className=\"text-sm font-semibold\">{t('workflows.form.stepsLabel', 'Steps')} ({steps.length})</h2>\n          <Button variant=\"outline\" size=\"sm\" onClick={onAddStep} className=\"h-8 text-xs\">\n            <Plus className=\"mr-1 h-3.5 w-3.5\" />\n            {t('workflows.mobile.addStep', 'Add Step')}\n          </Button>\n        </div>\n\n        {steps.length === 0 ? (\n          <p className=\"py-4 text-center text-sm text-muted-foreground\">\n            {t('workflows.mobile.noSteps', 'No steps defined yet.')}\n          </p>\n        ) : (\n          <div className=\"space-y-2\">\n            {steps.map((step: WorkflowStep, idx: number) => {\n              const nodeType = stepTypeToNodeType(step.stepType || step.type || '')\n              const Icon = NODE_TYPE_ICONS[nodeType] || Circle\n              return (\n                <div\n                  key={step.stepId || idx}\n                  className=\"flex items-center gap-3 rounded-lg border bg-background p-3\"\n                >\n                  <Icon className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"truncate text-sm font-medium\">{step.stepName || step.stepId}</div>\n                    <div className=\"text-overline uppercase text-muted-foreground\">\n                      {step.stepType || step.type || 'unknown'}\n                    </div>\n                  </div>\n                  <div className=\"flex shrink-0 gap-1\">\n                    <button\n                      onClick={() => onEditStep(idx)}\n                      className=\"rounded p-1.5 hover:bg-muted\"\n                      aria-label={t('workflows.mobile.editStep')}\n                    >\n                      <Pencil className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                    </button>\n                    <button\n                      onClick={() => onDeleteStep(idx)}\n                      className=\"rounded p-1.5 hover:bg-muted\"\n                      aria-label={t('workflows.mobile.deleteStep')}\n                    >\n                      <Trash2 className=\"h-3.5 w-3.5 text-destructive\" />\n                    </button>\n                  </div>\n                </div>\n              )\n            })}\n          </div>\n        )}\n      </div>\n\n      <div className=\"rounded-lg border bg-card p-4\">\n        <div className=\"mb-3 flex items-center justify-between\">\n          <h2 className=\"text-sm font-semibold\">{t('workflows.form.transitionsLabel', 'Transitions')} ({transitions.length})</h2>\n          <Button variant=\"outline\" size=\"sm\" onClick={onAddTransition} className=\"h-8 text-xs\">\n            <Plus className=\"mr-1 h-3.5 w-3.5\" />\n            {t('workflows.mobile.addTransition', 'Add Transition')}\n          </Button>\n        </div>\n\n        {transitions.length === 0 ? (\n          <p className=\"py-4 text-center text-sm text-muted-foreground\">\n            {t('workflows.mobile.noTransitions', 'No transitions defined yet.')}\n          </p>\n        ) : (\n          <div className=\"space-y-2\">\n            {transitions.map((transition: WorkflowTransition, idx: number) => (\n              <div\n                key={transition.transitionId || idx}\n                className=\"flex items-center gap-3 rounded-lg border bg-background p-3\"\n              >\n                <ArrowRight className=\"h-4 w-4 shrink-0 text-muted-foreground\" />\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-1.5 text-sm\">\n                    <span className=\"truncate font-mono text-xs\">{transition.fromStepId}</span>\n                    <ArrowRight className=\"h-3 w-3 shrink-0 text-muted-foreground\" />\n                    <span className=\"truncate font-mono text-xs\">{transition.toStepId}</span>\n                  </div>\n                  <div className=\"text-overline text-muted-foreground\">\n                    {transition.trigger || 'auto'}\n                  </div>\n                </div>\n                <div className=\"flex shrink-0 gap-1\">\n                  <button\n                    onClick={() => onEditTransition(idx)}\n                    className=\"rounded p-1.5 hover:bg-muted\"\n                    aria-label={t('workflows.mobile.editTransition')}\n                  >\n                    <Pencil className=\"h-3.5 w-3.5 text-muted-foreground\" />\n                  </button>\n                  <button\n                    onClick={() => onDeleteTransition(idx)}\n                    className=\"rounded p-1.5 hover:bg-muted\"\n                    aria-label={t('workflows.mobile.deleteTransition')}\n                  >\n                    <Trash2 className=\"h-3.5 w-3.5 text-destructive\" />\n                  </button>\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAkDU,SAEE,KAFF;AA/CV,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB,SAAS,iBAAiB,0BAA0B;AACpD,SAAS,QAAQ,QAAQ,QAAQ,YAAY,YAAY;AA2BlD,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,QAAM,IAAI,KAAK;AACf,QAAM,QAAQ,OAAO,SAAS,CAAC;AAC/B,QAAM,cAAc,OAAO,eAAe,CAAC;AAE3C,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAU,iCACb;AAAA,2BAAC,SAAI,WAAU,0CACb;AAAA,6BAAC,QAAG,WAAU,yBAAyB;AAAA,YAAE,6BAA6B,OAAO;AAAA,UAAE;AAAA,UAAG,MAAM;AAAA,UAAO;AAAA,WAAC;AAAA,QAChG,qBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,SAAS,WAAW,WAAU,eAChE;AAAA,8BAAC,QAAK,WAAU,oBAAmB;AAAA,UAClC,EAAE,4BAA4B,UAAU;AAAA,WAC3C;AAAA,SACF;AAAA,MAEC,MAAM,WAAW,IAChB,oBAAC,OAAE,WAAU,kDACV,YAAE,4BAA4B,uBAAuB,GACxD,IAEA,oBAAC,SAAI,WAAU,aACZ,gBAAM,IAAI,CAAC,MAAoB,QAAgB;AAC9C,cAAM,WAAW,mBAAmB,KAAK,YAAY,KAAK,QAAQ,EAAE;AACpE,cAAM,OAAO,gBAAgB,QAAQ,KAAK;AAC1C,eACE;AAAA,UAAC;AAAA;AAAA,YAEC,WAAU;AAAA,YAEV;AAAA,kCAAC,QAAK,WAAU,0CAAyC;AAAA,cACzD,qBAAC,SAAI,WAAU,kBACb;AAAA,oCAAC,SAAI,WAAU,gCAAgC,eAAK,YAAY,KAAK,QAAO;AAAA,gBAC5E,oBAAC,SAAI,WAAU,iDACZ,eAAK,YAAY,KAAK,QAAQ,WACjC;AAAA,iBACF;AAAA,cACA,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAS,MAAM,WAAW,GAAG;AAAA,oBAC7B,WAAU;AAAA,oBACV,cAAY,EAAE,2BAA2B;AAAA,oBAEzC,8BAAC,UAAO,WAAU,qCAAoC;AAAA;AAAA,gBACxD;AAAA,gBACA;AAAA,kBAAC;AAAA;AAAA,oBACC,SAAS,MAAM,aAAa,GAAG;AAAA,oBAC/B,WAAU;AAAA,oBACV,cAAY,EAAE,6BAA6B;AAAA,oBAE3C,8BAAC,UAAO,WAAU,gCAA+B;AAAA;AAAA,gBACnD;AAAA,iBACF;AAAA;AAAA;AAAA,UAzBK,KAAK,UAAU;AAAA,QA0BtB;AAAA,MAEJ,CAAC,GACH;AAAA,OAEJ;AAAA,IAEA,qBAAC,SAAI,WAAU,iCACb;AAAA,2BAAC,SAAI,WAAU,0CACb;AAAA,6BAAC,QAAG,WAAU,yBAAyB;AAAA,YAAE,mCAAmC,aAAa;AAAA,UAAE;AAAA,UAAG,YAAY;AAAA,UAAO;AAAA,WAAC;AAAA,QAClH,qBAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,SAAS,iBAAiB,WAAU,eACtE;AAAA,8BAAC,QAAK,WAAU,oBAAmB;AAAA,UAClC,EAAE,kCAAkC,gBAAgB;AAAA,WACvD;AAAA,SACF;AAAA,MAEC,YAAY,WAAW,IACtB,oBAAC,OAAE,WAAU,kDACV,YAAE,kCAAkC,6BAA6B,GACpE,IAEA,oBAAC,SAAI,WAAU,aACZ,sBAAY,IAAI,CAAC,YAAgC,QAChD;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,gCAAC,cAAW,WAAU,0CAAyC;AAAA,YAC/D,qBAAC,SAAI,WAAU,kBACb;AAAA,mCAAC,SAAI,WAAU,qCACb;AAAA,oCAAC,UAAK,WAAU,8BAA8B,qBAAW,YAAW;AAAA,gBACpE,oBAAC,cAAW,WAAU,0CAAyC;AAAA,gBAC/D,oBAAC,UAAK,WAAU,8BAA8B,qBAAW,UAAS;AAAA,iBACpE;AAAA,cACA,oBAAC,SAAI,WAAU,uCACZ,qBAAW,WAAW,QACzB;AAAA,eACF;AAAA,YACA,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS,MAAM,iBAAiB,GAAG;AAAA,kBACnC,WAAU;AAAA,kBACV,cAAY,EAAE,iCAAiC;AAAA,kBAE/C,8BAAC,UAAO,WAAU,qCAAoC;AAAA;AAAA,cACxD;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS,MAAM,mBAAmB,GAAG;AAAA,kBACrC,WAAU;AAAA,kBACV,cAAY,EAAE,mCAAmC;AAAA,kBAEjD,8BAAC,UAAO,WAAU,gCAA+B;AAAA;AAAA,cACnD;AAAA,eACF;AAAA;AAAA;AAAA,QA7BK,WAAW,gBAAgB;AAAA,MA8BlC,CACD,GACH;AAAA,OAEJ;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/modules/workflows/components/mobile/MobileInstanceOverview.js

@@ -66,7 +66,7 @@ function MobileInstanceOverview({
           /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground", children: t("workflows.instances.fields.workflowId") }),
           /* @__PURE__ */ jsxs("dd", { className: "text-right", children: [
             /* @__PURE__ */ jsx("div", { className: "text-sm font-mono", children: instance.workflowId }),
-            /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-overline text-muted-foreground", children: [
               "v",
               instance.version
             ] })
@@ -131,13 +131,13 @@ function MobileInstanceOverview({
     /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
       /* @__PURE__ */ jsx("h2", { className: "mb-3 text-base font-semibold", children: t("workflows.instances.sections.executionTimeline") }),
       timelineEvents.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("workflows.instances.noExecutionHistory") }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: timelineEvents.map((event, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-lg border bg-muted p-2.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border bg-background text-[10px] font-medium", children: idx + 1 }),
+        /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border bg-background text-overline font-medium", children: idx + 1 }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${getEventTypeBadgeClass(event.eventType)}`, children: t(`workflows.events.types.${event.eventType}`) || event.eventType }),
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: new Date(event.occurredAt).toLocaleTimeString() })
+            /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded px-1.5 py-0.5 text-overline font-medium ${getEventTypeBadgeClass(event.eventType)}`, children: t(`workflows.events.types.${event.eventType}`) || event.eventType }),
+            /* @__PURE__ */ jsx("span", { className: "text-overline text-muted-foreground", children: new Date(event.occurredAt).toLocaleTimeString() })
           ] }),
-          event.eventData?.toStepId && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-[10px] text-muted-foreground", children: [
+          event.eventData?.toStepId && /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-overline text-muted-foreground", children: [
             event.eventData.fromStepId ? `${event.eventData.fromStepId} -> ` : "-> ",
             event.eventData.toStepId
           ] })
@@ -151,8 +151,8 @@ function MobileInstanceOverview({
         return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-background p-3", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${getEventTypeBadgeClass(event.eventType)}`, children: t(`workflows.events.types.${event.eventType}`) || event.eventType }) }),
-              /* @__PURE__ */ jsx("div", { className: "mt-1 text-[10px] text-muted-foreground", children: new Date(event.occurredAt).toLocaleString() })
+              /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded px-1.5 py-0.5 text-overline font-medium ${getEventTypeBadgeClass(event.eventType)}`, children: t(`workflows.events.types.${event.eventType}`) || event.eventType }) }),
+              /* @__PURE__ */ jsx("div", { className: "mt-1 text-overline text-muted-foreground", children: new Date(event.occurredAt).toLocaleString() })
             ] }),
             event.eventData && /* @__PURE__ */ jsx(
               "button",

package/dist/modules/workflows/components/mobile/MobileInstanceOverview.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/workflows/components/mobile/MobileInstanceOverview.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useState } from 'react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\nimport { JsonDisplay } from '@open-mercato/ui/backend/JsonDisplay'\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { WorkflowInstance, WorkflowEvent } from '../../data/entities'\nimport { WorkflowGraphReadOnly } from '../WorkflowGraph'\nimport { MobileWorkflowTimeline, type TimelineStep } from './MobileWorkflowTimeline'\nimport { ChevronDown, ChevronUp, Maximize2 } from 'lucide-react'\nimport type { Node, Edge } from '@xyflow/react'\n\ninterface MobileInstanceOverviewProps {\n  instance: WorkflowInstance\n  events: WorkflowEvent[]\n  graphNodes: Node[]\n  graphEdges: Edge[]\n  definitionLoading: boolean\n  hasDefinition: boolean\n  getStatusBadgeClass: (status: WorkflowInstance['status']) => string\n  getEventTypeBadgeClass: (eventType: string) => string\n  calculateDuration: (startedAt: string | Date, completedAt: string | Date | null | undefined) => string\n}\n\nexport function MobileInstanceOverview({\n  instance,\n  events,\n  graphNodes,\n  graphEdges,\n  definitionLoading,\n  hasDefinition,\n  getStatusBadgeClass,\n  getEventTypeBadgeClass,\n  calculateDuration,\n}: MobileInstanceOverviewProps) {\n  const t = useT()\n  const [showFullGraph, setShowFullGraph] = useState(false)\n  const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set())\n\n  const toggleEventDetails = (eventId: string) => {\n    setExpandedEvents((prev) => {\n      const next = new Set(prev)\n      if (next.has(eventId)) {\n        next.delete(eventId)\n      } else {\n        next.add(eventId)\n      }\n      return next\n    })\n  }\n\n  // Build timeline steps from graph nodes\n  const timelineSteps: TimelineStep[] = React.useMemo(() => {\n    return graphNodes.map((node) => ({\n      id: node.id,\n      label: (node.data?.label as string) || node.id,\n      type: node.type || 'unknown',\n      status: (node.data?.status as TimelineStep['status']) || 'pending',\n      duration: (node.data?.duration as string) || null,\n    }))\n  }, [graphNodes])\n\n  // Filter execution timeline events\n  const timelineEvents = React.useMemo(() => {\n    return events\n      .filter(\n        (e) =>\n          e.eventType.includes('STEP_') ||\n          e.eventType.includes('WORKFLOW_STARTED') ||\n          e.eventType.includes('WORKFLOW_COMPLETED') ||\n          e.eventType.includes('WORKFLOW_FAILED')\n      )\n      .reverse()\n  }, [events])\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg border bg-card p-4\">\n        <h2 className=\"mb-3 text-base font-semibold\">{t('workflows.instances.sections.overview')}</h2>\n        <dl className=\"space-y-3\">\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.status')}</dt>\n            <dd>\n              <span className={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${getStatusBadgeClass(instance.status)}`}>\n                {t(`workflows.instances.status.${instance.status}`)}\n              </span>\n            </dd>\n          </div>\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.workflowId')}</dt>\n            <dd className=\"text-right\">\n              <div className=\"text-sm font-mono\">{instance.workflowId}</div>\n              <div className=\"text-[10px] text-muted-foreground\">v{instance.version}</div>\n            </dd>\n          </div>\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.currentStep')}</dt>\n            <dd className=\"text-sm font-mono text-right\">{instance.currentStepId || '-'}</dd>\n          </div>\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.duration')}</dt>\n            <dd className=\"text-sm\">{calculateDuration(instance.startedAt, instance.completedAt)}</dd>\n          </div>\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.startedAt')}</dt>\n            <dd className=\"text-xs\">{new Date(instance.startedAt).toLocaleString()}</dd>\n          </div>\n          {instance.completedAt && (\n            <div className=\"flex items-start justify-between\">\n              <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.completedAt')}</dt>\n              <dd className=\"text-xs\">{new Date(instance.completedAt).toLocaleString()}</dd>\n            </div>\n          )}\n          {instance.retryCount > 0 && (\n            <div className=\"flex items-start justify-between\">\n              <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.retryCount')}</dt>\n              <dd className=\"text-sm font-medium text-orange-600\">{instance.retryCount}</dd>\n            </div>\n          )}\n        </dl>\n      </div>\n\n      {definitionLoading && (\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"flex items-center justify-center py-6\">\n            <Spinner className=\"h-5 w-5\" />\n            <span className=\"ml-2 text-sm text-muted-foreground\">{t('common.loading')}</span>\n          </div>\n        </div>\n      )}\n      {!definitionLoading && hasDefinition && timelineSteps.length > 0 && (\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"mb-3 flex items-center justify-between\">\n            <h2 className=\"text-base font-semibold\">{t('workflows.mobile.stepTimeline', 'Step Timeline')}</h2>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => setShowFullGraph(true)}\n              className=\"h-7 text-xs\"\n            >\n              <Maximize2 className=\"mr-1 h-3 w-3\" />\n              {t('workflows.mobile.viewFullGraph', 'View Full Graph')}\n            </Button>\n          </div>\n          <MobileWorkflowTimeline steps={timelineSteps} />\n        </div>\n      )}\n\n      {instance.errorMessage && (\n        <div className=\"rounded-lg border border-destructive bg-destructive/5 p-4\">\n          <h2 className=\"mb-2 text-sm font-semibold text-destructive\">{t('workflows.instances.fields.lastError')}</h2>\n          <pre className=\"text-xs text-destructive whitespace-pre-wrap font-mono break-all\">\n            {instance.errorMessage}\n          </pre>\n        </div>\n      )}\n\n      <JsonDisplay\n        data={instance.context}\n        title={t('workflows.instances.sections.context')}\n      />\n\n      <div className=\"rounded-lg border bg-card p-4\">\n        <h2 className=\"mb-3 text-base font-semibold\">{t('workflows.instances.sections.executionTimeline')}</h2>\n        {timelineEvents.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">{t('workflows.instances.noExecutionHistory')}</p>\n        ) : (\n          <div className=\"space-y-2\">\n            {timelineEvents.map((event, idx) => (\n              <div key={event.id} className=\"flex items-start gap-2 rounded-lg border bg-muted p-2.5\">\n                <div className=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border bg-background text-[10px] font-medium\">\n                  {idx + 1}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${getEventTypeBadgeClass(event.eventType)}`}>\n                      {t(`workflows.events.types.${event.eventType}`) || event.eventType}\n                    </span>\n                    <span className=\"text-[10px] text-muted-foreground\">\n                      {new Date(event.occurredAt).toLocaleTimeString()}\n                    </span>\n                  </div>\n                  {event.eventData?.toStepId && (\n                    <p className=\"mt-0.5 text-[10px] text-muted-foreground\">\n                      {event.eventData.fromStepId ? `${event.eventData.fromStepId} -> ` : '-> '}\n                      {event.eventData.toStepId}\n                    </p>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div className=\"rounded-lg border bg-card p-4\">\n        <h2 className=\"mb-3 text-base font-semibold\">{t('workflows.mobile.eventLog', 'Event Log')}</h2>\n        {events.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">{t('workflows.instances.noExecutionHistory')}</p>\n        ) : (\n          <div className=\"space-y-2\">\n            {events.map((event) => {\n              const isExpanded = expandedEvents.has(event.id)\n              return (\n                <div key={event.id} className=\"rounded-lg border bg-background p-3\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"flex flex-wrap items-center gap-1.5\">\n                        <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${getEventTypeBadgeClass(event.eventType)}`}>\n                          {t(`workflows.events.types.${event.eventType}`) || event.eventType}\n                        </span>\n                      </div>\n                      <div className=\"mt-1 text-[10px] text-muted-foreground\">\n                        {new Date(event.occurredAt).toLocaleString()}\n                      </div>\n                    </div>\n                    {event.eventData && (\n                      <button\n                        onClick={() => toggleEventDetails(event.id)}\n                        className=\"shrink-0 rounded p-1 hover:bg-muted\"\n                        aria-label={isExpanded ? t('workflows.mobile.hideDetails') : t('workflows.mobile.showDetails')}\n                      >\n                        {isExpanded ? <ChevronUp className=\"h-4 w-4\" /> : <ChevronDown className=\"h-4 w-4\" />}\n                      </button>\n                    )}\n                  </div>\n                  {isExpanded && event.eventData && (\n                    <div className=\"mt-2 border-t pt-2\">\n                      <JsonDisplay\n                        data={event.eventData}\n                        showCopy={false}\n                        maxInitialDepth={1}\n                      />\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n        )}\n      </div>\n\n      <Dialog open={showFullGraph} onOpenChange={setShowFullGraph}>\n        <DialogContent className=\"h-[90svh] max-w-[95vw] p-0\">\n          <DialogHeader className=\"px-4 pt-4\">\n            <DialogTitle>{t('workflows.instances.sections.visualFlow')}</DialogTitle>\n          </DialogHeader>\n          <div className=\"flex-1 p-2\">\n            <WorkflowGraphReadOnly\n              nodes={graphNodes}\n              edges={graphEdges}\n              height=\"calc(90svh - 80px)\"\n            />\n          </div>\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { useState } from 'react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\nimport { JsonDisplay } from '@open-mercato/ui/backend/JsonDisplay'\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { WorkflowInstance, WorkflowEvent } from '../../data/entities'\nimport { WorkflowGraphReadOnly } from '../WorkflowGraph'\nimport { MobileWorkflowTimeline, type TimelineStep } from './MobileWorkflowTimeline'\nimport { ChevronDown, ChevronUp, Maximize2 } from 'lucide-react'\nimport type { Node, Edge } from '@xyflow/react'\n\ninterface MobileInstanceOverviewProps {\n  instance: WorkflowInstance\n  events: WorkflowEvent[]\n  graphNodes: Node[]\n  graphEdges: Edge[]\n  definitionLoading: boolean\n  hasDefinition: boolean\n  getStatusBadgeClass: (status: WorkflowInstance['status']) => string\n  getEventTypeBadgeClass: (eventType: string) => string\n  calculateDuration: (startedAt: string | Date, completedAt: string | Date | null | undefined) => string\n}\n\nexport function MobileInstanceOverview({\n  instance,\n  events,\n  graphNodes,\n  graphEdges,\n  definitionLoading,\n  hasDefinition,\n  getStatusBadgeClass,\n  getEventTypeBadgeClass,\n  calculateDuration,\n}: MobileInstanceOverviewProps) {\n  const t = useT()\n  const [showFullGraph, setShowFullGraph] = useState(false)\n  const [expandedEvents, setExpandedEvents] = useState<Set<string>>(new Set())\n\n  const toggleEventDetails = (eventId: string) => {\n    setExpandedEvents((prev) => {\n      const next = new Set(prev)\n      if (next.has(eventId)) {\n        next.delete(eventId)\n      } else {\n        next.add(eventId)\n      }\n      return next\n    })\n  }\n\n  // Build timeline steps from graph nodes\n  const timelineSteps: TimelineStep[] = React.useMemo(() => {\n    return graphNodes.map((node) => ({\n      id: node.id,\n      label: (node.data?.label as string) || node.id,\n      type: node.type || 'unknown',\n      status: (node.data?.status as TimelineStep['status']) || 'pending',\n      duration: (node.data?.duration as string) || null,\n    }))\n  }, [graphNodes])\n\n  // Filter execution timeline events\n  const timelineEvents = React.useMemo(() => {\n    return events\n      .filter(\n        (e) =>\n          e.eventType.includes('STEP_') ||\n          e.eventType.includes('WORKFLOW_STARTED') ||\n          e.eventType.includes('WORKFLOW_COMPLETED') ||\n          e.eventType.includes('WORKFLOW_FAILED')\n      )\n      .reverse()\n  }, [events])\n\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"rounded-lg border bg-card p-4\">\n        <h2 className=\"mb-3 text-base font-semibold\">{t('workflows.instances.sections.overview')}</h2>\n        <dl className=\"space-y-3\">\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.status')}</dt>\n            <dd>\n              <span className={`inline-flex items-center rounded px-2 py-0.5 text-xs font-medium ${getStatusBadgeClass(instance.status)}`}>\n                {t(`workflows.instances.status.${instance.status}`)}\n              </span>\n            </dd>\n          </div>\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.workflowId')}</dt>\n            <dd className=\"text-right\">\n              <div className=\"text-sm font-mono\">{instance.workflowId}</div>\n              <div className=\"text-overline text-muted-foreground\">v{instance.version}</div>\n            </dd>\n          </div>\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.currentStep')}</dt>\n            <dd className=\"text-sm font-mono text-right\">{instance.currentStepId || '-'}</dd>\n          </div>\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.duration')}</dt>\n            <dd className=\"text-sm\">{calculateDuration(instance.startedAt, instance.completedAt)}</dd>\n          </div>\n          <div className=\"flex items-start justify-between\">\n            <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.startedAt')}</dt>\n            <dd className=\"text-xs\">{new Date(instance.startedAt).toLocaleString()}</dd>\n          </div>\n          {instance.completedAt && (\n            <div className=\"flex items-start justify-between\">\n              <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.completedAt')}</dt>\n              <dd className=\"text-xs\">{new Date(instance.completedAt).toLocaleString()}</dd>\n            </div>\n          )}\n          {instance.retryCount > 0 && (\n            <div className=\"flex items-start justify-between\">\n              <dt className=\"text-xs font-medium text-muted-foreground\">{t('workflows.instances.fields.retryCount')}</dt>\n              <dd className=\"text-sm font-medium text-orange-600\">{instance.retryCount}</dd>\n            </div>\n          )}\n        </dl>\n      </div>\n\n      {definitionLoading && (\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"flex items-center justify-center py-6\">\n            <Spinner className=\"h-5 w-5\" />\n            <span className=\"ml-2 text-sm text-muted-foreground\">{t('common.loading')}</span>\n          </div>\n        </div>\n      )}\n      {!definitionLoading && hasDefinition && timelineSteps.length > 0 && (\n        <div className=\"rounded-lg border bg-card p-4\">\n          <div className=\"mb-3 flex items-center justify-between\">\n            <h2 className=\"text-base font-semibold\">{t('workflows.mobile.stepTimeline', 'Step Timeline')}</h2>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              onClick={() => setShowFullGraph(true)}\n              className=\"h-7 text-xs\"\n            >\n              <Maximize2 className=\"mr-1 h-3 w-3\" />\n              {t('workflows.mobile.viewFullGraph', 'View Full Graph')}\n            </Button>\n          </div>\n          <MobileWorkflowTimeline steps={timelineSteps} />\n        </div>\n      )}\n\n      {instance.errorMessage && (\n        <div className=\"rounded-lg border border-destructive bg-destructive/5 p-4\">\n          <h2 className=\"mb-2 text-sm font-semibold text-destructive\">{t('workflows.instances.fields.lastError')}</h2>\n          <pre className=\"text-xs text-destructive whitespace-pre-wrap font-mono break-all\">\n            {instance.errorMessage}\n          </pre>\n        </div>\n      )}\n\n      <JsonDisplay\n        data={instance.context}\n        title={t('workflows.instances.sections.context')}\n      />\n\n      <div className=\"rounded-lg border bg-card p-4\">\n        <h2 className=\"mb-3 text-base font-semibold\">{t('workflows.instances.sections.executionTimeline')}</h2>\n        {timelineEvents.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">{t('workflows.instances.noExecutionHistory')}</p>\n        ) : (\n          <div className=\"space-y-2\">\n            {timelineEvents.map((event, idx) => (\n              <div key={event.id} className=\"flex items-start gap-2 rounded-lg border bg-muted p-2.5\">\n                <div className=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full border bg-background text-overline font-medium\">\n                  {idx + 1}\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex flex-wrap items-center gap-1.5\">\n                    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-overline font-medium ${getEventTypeBadgeClass(event.eventType)}`}>\n                      {t(`workflows.events.types.${event.eventType}`) || event.eventType}\n                    </span>\n                    <span className=\"text-overline text-muted-foreground\">\n                      {new Date(event.occurredAt).toLocaleTimeString()}\n                    </span>\n                  </div>\n                  {event.eventData?.toStepId && (\n                    <p className=\"mt-0.5 text-overline text-muted-foreground\">\n                      {event.eventData.fromStepId ? `${event.eventData.fromStepId} -> ` : '-> '}\n                      {event.eventData.toStepId}\n                    </p>\n                  )}\n                </div>\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n\n      <div className=\"rounded-lg border bg-card p-4\">\n        <h2 className=\"mb-3 text-base font-semibold\">{t('workflows.mobile.eventLog', 'Event Log')}</h2>\n        {events.length === 0 ? (\n          <p className=\"text-sm text-muted-foreground\">{t('workflows.instances.noExecutionHistory')}</p>\n        ) : (\n          <div className=\"space-y-2\">\n            {events.map((event) => {\n              const isExpanded = expandedEvents.has(event.id)\n              return (\n                <div key={event.id} className=\"rounded-lg border bg-background p-3\">\n                  <div className=\"flex items-start justify-between gap-2\">\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"flex flex-wrap items-center gap-1.5\">\n                        <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-overline font-medium ${getEventTypeBadgeClass(event.eventType)}`}>\n                          {t(`workflows.events.types.${event.eventType}`) || event.eventType}\n                        </span>\n                      </div>\n                      <div className=\"mt-1 text-overline text-muted-foreground\">\n                        {new Date(event.occurredAt).toLocaleString()}\n                      </div>\n                    </div>\n                    {event.eventData && (\n                      <button\n                        onClick={() => toggleEventDetails(event.id)}\n                        className=\"shrink-0 rounded p-1 hover:bg-muted\"\n                        aria-label={isExpanded ? t('workflows.mobile.hideDetails') : t('workflows.mobile.showDetails')}\n                      >\n                        {isExpanded ? <ChevronUp className=\"h-4 w-4\" /> : <ChevronDown className=\"h-4 w-4\" />}\n                      </button>\n                    )}\n                  </div>\n                  {isExpanded && event.eventData && (\n                    <div className=\"mt-2 border-t pt-2\">\n                      <JsonDisplay\n                        data={event.eventData}\n                        showCopy={false}\n                        maxInitialDepth={1}\n                      />\n                    </div>\n                  )}\n                </div>\n              )\n            })}\n          </div>\n        )}\n      </div>\n\n      <Dialog open={showFullGraph} onOpenChange={setShowFullGraph}>\n        <DialogContent className=\"h-[90svh] max-w-[95vw] p-0\">\n          <DialogHeader className=\"px-4 pt-4\">\n            <DialogTitle>{t('workflows.instances.sections.visualFlow')}</DialogTitle>\n          </DialogHeader>\n          <div className=\"flex-1 p-2\">\n            <WorkflowGraphReadOnly\n              nodes={graphNodes}\n              edges={graphEdges}\n              height=\"calc(90svh - 80px)\"\n            />\n          </div>\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/workflows/components/mobile/MobileTaskForm.js

@@ -39,7 +39,7 @@ function MobileTaskForm({
       return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
           fieldTitle,
-          required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+          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(
@@ -49,7 +49,7 @@ function MobileTaskForm({
             value: fieldValue(fieldName),
             onChange: (e) => onFieldChange(fieldName, e.target.value),
             required,
-            className: "w-full h-11 px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-base",
+            className: "w-full h-11 px-3 py-2 border border-border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-base",
             children: [
               /* @__PURE__ */ jsx("option", { value: "", children: t("workflows.tasks.detail.form.selectOption") }),
               enumValues.map((value) => /* @__PURE__ */ jsx("option", { value, children: value }, value))
@@ -64,7 +64,7 @@ function MobileTaskForm({
           return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
               fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+              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(
@@ -83,7 +83,7 @@ function MobileTaskForm({
         return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
             fieldTitle,
-            required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+            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(
@@ -103,7 +103,7 @@ function MobileTaskForm({
         return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
             fieldTitle,
-            required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+            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(
@@ -132,7 +132,7 @@ function MobileTaskForm({
             ),
             /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, className: "font-medium", children: [
               fieldTitle,
-              required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+              required && /* @__PURE__ */ jsx("span", { className: "text-status-error-text ml-1", children: "*" })
             ] })
           ] }),
           fieldDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: fieldDescription })
@@ -141,7 +141,7 @@ function MobileTaskForm({
         return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxs(Label, { htmlFor: fieldName, children: [
             fieldTitle,
-            required && /* @__PURE__ */ jsx("span", { className: "text-red-600 ml-1", children: "*" })
+            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(
@@ -164,7 +164,7 @@ function MobileTaskForm({
       /* @__PURE__ */ jsx("span", { className: `shrink-0 inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getStatusBadgeClass(task.status)}`, children: t(`workflows.tasks.statuses.${task.status}`) })
     ] }),
     task.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: task.description }),
-    isOverdue && /* @__PURE__ */ jsx("div", { className: "bg-red-50 dark:bg-red-950/50 border border-red-200 dark:border-red-800 rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-red-800 dark:text-red-200 font-medium", children: t("workflows.tasks.detail.overdueWarning") }) }),
+    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__ */ jsxs("div", { className: "rounded-lg bg-muted/50 p-3 space-y-2.5", children: [
       /* @__PURE__ */ jsx("h2", { className: "text-xs font-semibold uppercase text-muted-foreground", children: t("workflows.tasks.detail.sections.taskInfo") }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-2 text-sm", children: [
@@ -180,7 +180,7 @@ function MobileTaskForm({
             t("workflows.tasks.fields.dueDate"),
             ":"
           ] }),
-          /* @__PURE__ */ jsx("span", { className: `text-right text-xs ${isOverdue ? "text-red-600 font-medium" : ""}`, children: new Date(task.dueDate).toLocaleString() })
+          /* @__PURE__ */ jsx("span", { className: `text-right text-xs ${isOverdue ? "text-status-error-text font-medium" : ""}`, children: new Date(task.dueDate).toLocaleString() })
         ] }),
         task.assignedTo && /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
           /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
@@ -208,7 +208,7 @@ function MobileTaskForm({
         ] })
       ] })
     ] }),
-    !isCompletable && /* @__PURE__ */ jsx("div", { className: "bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-800 dark:text-blue-200", children: t("workflows.tasks.detail.cannotComplete") }) }),
+    !isCompletable && /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-status-info-text", children: t("workflows.tasks.detail.cannotComplete") }) }),
     isCompletable && /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-4", children: [
       task.formSchema?.properties && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Separator, {}),
@@ -217,7 +217,7 @@ function MobileTaskForm({
           (fieldName) => renderFormField(fieldName, task.formSchema.properties[fieldName])
         ) })
       ] }),
-      !task.formSchema?.properties && /* @__PURE__ */ jsx("div", { className: "bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-3", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-800 dark:text-blue-200", children: t("workflows.tasks.detail.noFormSchema") }) }),
+      !task.formSchema?.properties && /* @__PURE__ */ jsx("div", { className: "bg-status-info-bg border border-status-info-border rounded-lg p-3", 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: "m-comments", children: [

package/dist/modules/workflows/components/mobile/MobileTaskForm.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/workflows/components/mobile/MobileTaskForm.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Textarea } from '@open-mercato/ui/primitives/textarea'\nimport { Checkbox } from '@open-mercato/ui/primitives/checkbox'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { Separator } from '@open-mercato/ui/primitives/separator'\nimport { JsonDisplay } from '@open-mercato/ui/backend/JsonDisplay'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { UserTaskResponse, UserTaskStatus, JsonSchemaField } from '../../data/types'\n\ninterface MobileTaskFormProps {\n  task: UserTaskResponse\n  formData: Record<string, string | number | boolean>\n  comments: string\n  submitting: boolean\n  isCompletable: boolean\n  isOverdue: boolean | null | undefined\n  onFieldChange: (fieldName: string, value: string | number | boolean) => void\n  onCommentsChange: (value: string) => void\n  onSubmit: (e: React.FormEvent) => void\n  onCancel: () => void\n  getStatusBadgeClass: (status: UserTaskStatus) => string\n}\n\nexport function MobileTaskForm({\n  task,\n  formData,\n  comments,\n  submitting,\n  isCompletable,\n  isOverdue,\n  onFieldChange,\n  onCommentsChange,\n  onSubmit,\n  onCancel,\n  getStatusBadgeClass,\n}: MobileTaskFormProps) {\n  const t = useT()\n\n  const fieldValue = (fieldName: string): string | number => {\n    const val = formData[fieldName]\n    if (val == null || val === false) return ''\n    if (typeof val === 'boolean') return ''\n    return val\n  }\n\n  const renderFormField = (fieldName: string, fieldSchema: JsonSchemaField) => {\n    const fieldType = fieldSchema.type || 'string'\n    const fieldTitle = fieldSchema.title || fieldName\n    const fieldDescription = fieldSchema.description\n    const required = task.formSchema?.required?.includes(fieldName) || false\n    const enumValues = fieldSchema.enum\n\n    if (enumValues && Array.isArray(enumValues)) {\n      return (\n        <div key={fieldName} className=\"space-y-2\">\n          <Label htmlFor={fieldName}>\n            {fieldTitle}\n            {required && <span className=\"text-red-600 ml-1\">*</span>}\n          </Label>\n          {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n          <select\n            id={fieldName}\n            value={fieldValue(fieldName)}\n            onChange={(e) => onFieldChange(fieldName, e.target.value)}\n            required={required}\n            className=\"w-full h-11 px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-base\"\n          >\n            <option value=\"\">{t('workflows.tasks.detail.form.selectOption')}</option>\n            {enumValues.map((value: string) => (\n              <option key={value} value={value}>{value}</option>\n            ))}\n          </select>\n        </div>\n      )\n    }\n\n    switch (fieldType) {\n      case 'string':\n        if (fieldSchema.maxLength && fieldSchema.maxLength > 200) {\n          return (\n            <div key={fieldName} className=\"space-y-2\">\n              <Label htmlFor={fieldName}>\n                {fieldTitle}\n                {required && <span className=\"text-red-600 ml-1\">*</span>}\n              </Label>\n              {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n              <Textarea\n                id={fieldName}\n                value={fieldValue(fieldName)}\n                onChange={(e) => onFieldChange(fieldName, e.target.value)}\n                required={required}\n                rows={4}\n                className=\"text-base\"\n              />\n            </div>\n          )\n        }\n        return (\n          <div key={fieldName} className=\"space-y-2\">\n            <Label htmlFor={fieldName}>\n              {fieldTitle}\n              {required && <span className=\"text-red-600 ml-1\">*</span>}\n            </Label>\n            {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n            <Input\n              type={fieldSchema.format === 'email' ? 'email' : fieldSchema.format === 'date' ? 'date' : 'text'}\n              id={fieldName}\n              value={fieldValue(fieldName)}\n              onChange={(e) => onFieldChange(fieldName, e.target.value)}\n              required={required}\n              className=\"h-11 text-base\"\n            />\n          </div>\n        )\n\n      case 'number':\n      case 'integer':\n        return (\n          <div key={fieldName} className=\"space-y-2\">\n            <Label htmlFor={fieldName}>\n              {fieldTitle}\n              {required && <span className=\"text-red-600 ml-1\">*</span>}\n            </Label>\n            {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n            <Input\n              type=\"number\"\n              id={fieldName}\n              value={fieldValue(fieldName)}\n              onChange={(e) => onFieldChange(fieldName, e.target.value ? Number(e.target.value) : '')}\n              required={required}\n              step={fieldType === 'integer' ? 1 : 'any'}\n              className=\"h-11 text-base\"\n            />\n          </div>\n        )\n\n      case 'boolean':\n        return (\n          <div key={fieldName} className=\"space-y-2\">\n            <div className=\"flex items-center gap-3 h-11\">\n              <Checkbox\n                id={fieldName}\n                checked={!!formData[fieldName]}\n                onCheckedChange={(checked) => onFieldChange(fieldName, !!checked)}\n              />\n              <Label htmlFor={fieldName} className=\"font-medium\">\n                {fieldTitle}\n                {required && <span className=\"text-red-600 ml-1\">*</span>}\n              </Label>\n            </div>\n            {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n          </div>\n        )\n\n      default:\n        return (\n          <div key={fieldName} className=\"space-y-2\">\n            <Label htmlFor={fieldName}>\n              {fieldTitle}\n              {required && <span className=\"text-red-600 ml-1\">*</span>}\n            </Label>\n            {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n            <Input\n              type=\"text\"\n              id={fieldName}\n              value={fieldValue(fieldName)}\n              onChange={(e) => onFieldChange(fieldName, e.target.value)}\n              required={required}\n              className=\"h-11 text-base\"\n            />\n          </div>\n        )\n    }\n  }\n\n  return (\n    <div className=\"space-y-4 pb-4\">\n      <div className=\"flex items-start justify-between gap-2\">\n        <h1 className=\"text-lg font-semibold\">{task.taskName}</h1>\n        <span className={`shrink-0 inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getStatusBadgeClass(task.status)}`}>\n          {t(`workflows.tasks.statuses.${task.status}`)}\n        </span>\n      </div>\n\n      {task.description && (\n        <p className=\"text-sm text-muted-foreground\">{task.description}</p>\n      )}\n\n      {isOverdue && (\n        <div className=\"bg-red-50 dark:bg-red-950/50 border border-red-200 dark:border-red-800 rounded-lg p-3\">\n          <p className=\"text-sm text-red-800 dark:text-red-200 font-medium\">{t('workflows.tasks.detail.overdueWarning')}</p>\n        </div>\n      )}\n\n      <div className=\"rounded-lg bg-muted/50 p-3 space-y-2.5\">\n        <h2 className=\"text-xs font-semibold uppercase text-muted-foreground\">{t('workflows.tasks.detail.sections.taskInfo')}</h2>\n        <div className=\"space-y-2 text-sm\">\n          <div className=\"flex justify-between\">\n            <span className=\"text-muted-foreground\">{t('workflows.tasks.fields.createdAt')}:</span>\n            <span className=\"text-right text-xs\">{new Date(task.createdAt).toLocaleString()}</span>\n          </div>\n          {task.dueDate && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">{t('workflows.tasks.fields.dueDate')}:</span>\n              <span className={`text-right text-xs ${isOverdue ? 'text-red-600 font-medium' : ''}`}>\n                {new Date(task.dueDate).toLocaleString()}\n              </span>\n            </div>\n          )}\n          {task.assignedTo && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">{t('workflows.tasks.detail.assignedTo')}:</span>\n              <span className=\"text-right\">{task.assignedTo}</span>\n            </div>\n          )}\n          <div className=\"flex justify-between\">\n            <span className=\"text-muted-foreground\">{t('workflows.tasks.detail.workflowInstance')}:</span>\n            <Link\n              href={`/backend/instances/${task.workflowInstanceId}`}\n              className=\"text-primary hover:underline text-xs font-mono\"\n            >\n              {task.workflowInstanceId.slice(0, 8)}...\n            </Link>\n          </div>\n        </div>\n      </div>\n\n      {!isCompletable && (\n        <div className=\"bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-3\">\n          <p className=\"text-sm text-blue-800 dark:text-blue-200\">{t('workflows.tasks.detail.cannotComplete')}</p>\n        </div>\n      )}\n\n      {isCompletable && (\n        <form onSubmit={onSubmit} className=\"space-y-4\">\n          {task.formSchema?.properties && (\n            <>\n              <Separator />\n              <h2 className=\"text-base font-semibold\">{t('workflows.tasks.detail.sections.form')}</h2>\n              <div className=\"space-y-4\">\n                {Object.keys(task.formSchema!.properties!).map((fieldName) =>\n                  renderFormField(fieldName, task.formSchema!.properties![fieldName])\n                )}\n              </div>\n            </>\n          )}\n\n          {!task.formSchema?.properties && (\n            <div className=\"bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-3\">\n              <p className=\"text-sm text-blue-800 dark:text-blue-200\">{t('workflows.tasks.detail.noFormSchema')}</p>\n            </div>\n          )}\n\n          <Separator />\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"m-comments\">\n              {t('workflows.tasks.detail.comments')} ({t('workflows.tasks.detail.optional')})\n            </Label>\n            <Textarea\n              id=\"m-comments\"\n              value={comments}\n              onChange={(e) => onCommentsChange(e.target.value)}\n              rows={3}\n              className=\"text-base\"\n              placeholder={t('workflows.tasks.detail.commentsPlaceholder')}\n            />\n          </div>\n\n          <div className=\"sticky bottom-0 border-t bg-background p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] z-10\">\n            <div className=\"flex gap-3\">\n              <Button\n                type=\"submit\"\n                disabled={submitting}\n                className=\"flex-1 h-11\"\n              >\n                {submitting ? t('workflows.tasks.detail.submitting') : t('workflows.tasks.detail.completeTask')}\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                onClick={onCancel}\n                disabled={submitting}\n                className=\"h-11\"\n              >\n                {t('common.cancel')}\n              </Button>\n            </div>\n          </div>\n        </form>\n      )}\n\n      {task.status === 'COMPLETED' && task.formData && (\n        <>\n          <Separator />\n          <JsonDisplay\n            data={task.formData}\n            title={t('workflows.tasks.detail.sections.submittedData')}\n            maxInitialDepth={2}\n          />\n          {task.comments && (\n            <div className=\"bg-muted/50 rounded-lg p-3\">\n              <p className=\"text-sm font-medium text-foreground mb-1\">{t('workflows.tasks.detail.comments')}:</p>\n              <p className=\"text-sm text-muted-foreground whitespace-pre-wrap\">{task.comments}</p>\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport Link from 'next/link'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Input } from '@open-mercato/ui/primitives/input'\nimport { Textarea } from '@open-mercato/ui/primitives/textarea'\nimport { Checkbox } from '@open-mercato/ui/primitives/checkbox'\nimport { Label } from '@open-mercato/ui/primitives/label'\nimport { Separator } from '@open-mercato/ui/primitives/separator'\nimport { JsonDisplay } from '@open-mercato/ui/backend/JsonDisplay'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport type { UserTaskResponse, UserTaskStatus, JsonSchemaField } from '../../data/types'\n\ninterface MobileTaskFormProps {\n  task: UserTaskResponse\n  formData: Record<string, string | number | boolean>\n  comments: string\n  submitting: boolean\n  isCompletable: boolean\n  isOverdue: boolean | null | undefined\n  onFieldChange: (fieldName: string, value: string | number | boolean) => void\n  onCommentsChange: (value: string) => void\n  onSubmit: (e: React.FormEvent) => void\n  onCancel: () => void\n  getStatusBadgeClass: (status: UserTaskStatus) => string\n}\n\nexport function MobileTaskForm({\n  task,\n  formData,\n  comments,\n  submitting,\n  isCompletable,\n  isOverdue,\n  onFieldChange,\n  onCommentsChange,\n  onSubmit,\n  onCancel,\n  getStatusBadgeClass,\n}: MobileTaskFormProps) {\n  const t = useT()\n\n  const fieldValue = (fieldName: string): string | number => {\n    const val = formData[fieldName]\n    if (val == null || val === false) return ''\n    if (typeof val === 'boolean') return ''\n    return val\n  }\n\n  const renderFormField = (fieldName: string, fieldSchema: JsonSchemaField) => {\n    const fieldType = fieldSchema.type || 'string'\n    const fieldTitle = fieldSchema.title || fieldName\n    const fieldDescription = fieldSchema.description\n    const required = task.formSchema?.required?.includes(fieldName) || false\n    const enumValues = fieldSchema.enum\n\n    if (enumValues && Array.isArray(enumValues)) {\n      return (\n        <div key={fieldName} className=\"space-y-2\">\n          <Label htmlFor={fieldName}>\n            {fieldTitle}\n            {required && <span className=\"text-status-error-text ml-1\">*</span>}\n          </Label>\n          {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n          <select\n            id={fieldName}\n            value={fieldValue(fieldName)}\n            onChange={(e) => onFieldChange(fieldName, e.target.value)}\n            required={required}\n            className=\"w-full h-11 px-3 py-2 border border-border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-base\"\n          >\n            <option value=\"\">{t('workflows.tasks.detail.form.selectOption')}</option>\n            {enumValues.map((value: string) => (\n              <option key={value} value={value}>{value}</option>\n            ))}\n          </select>\n        </div>\n      )\n    }\n\n    switch (fieldType) {\n      case 'string':\n        if (fieldSchema.maxLength && fieldSchema.maxLength > 200) {\n          return (\n            <div key={fieldName} className=\"space-y-2\">\n              <Label htmlFor={fieldName}>\n                {fieldTitle}\n                {required && <span className=\"text-status-error-text ml-1\">*</span>}\n              </Label>\n              {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n              <Textarea\n                id={fieldName}\n                value={fieldValue(fieldName)}\n                onChange={(e) => onFieldChange(fieldName, e.target.value)}\n                required={required}\n                rows={4}\n                className=\"text-base\"\n              />\n            </div>\n          )\n        }\n        return (\n          <div key={fieldName} className=\"space-y-2\">\n            <Label htmlFor={fieldName}>\n              {fieldTitle}\n              {required && <span className=\"text-status-error-text ml-1\">*</span>}\n            </Label>\n            {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n            <Input\n              type={fieldSchema.format === 'email' ? 'email' : fieldSchema.format === 'date' ? 'date' : 'text'}\n              id={fieldName}\n              value={fieldValue(fieldName)}\n              onChange={(e) => onFieldChange(fieldName, e.target.value)}\n              required={required}\n              className=\"h-11 text-base\"\n            />\n          </div>\n        )\n\n      case 'number':\n      case 'integer':\n        return (\n          <div key={fieldName} className=\"space-y-2\">\n            <Label htmlFor={fieldName}>\n              {fieldTitle}\n              {required && <span className=\"text-status-error-text ml-1\">*</span>}\n            </Label>\n            {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n            <Input\n              type=\"number\"\n              id={fieldName}\n              value={fieldValue(fieldName)}\n              onChange={(e) => onFieldChange(fieldName, e.target.value ? Number(e.target.value) : '')}\n              required={required}\n              step={fieldType === 'integer' ? 1 : 'any'}\n              className=\"h-11 text-base\"\n            />\n          </div>\n        )\n\n      case 'boolean':\n        return (\n          <div key={fieldName} className=\"space-y-2\">\n            <div className=\"flex items-center gap-3 h-11\">\n              <Checkbox\n                id={fieldName}\n                checked={!!formData[fieldName]}\n                onCheckedChange={(checked) => onFieldChange(fieldName, !!checked)}\n              />\n              <Label htmlFor={fieldName} className=\"font-medium\">\n                {fieldTitle}\n                {required && <span className=\"text-status-error-text ml-1\">*</span>}\n              </Label>\n            </div>\n            {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n          </div>\n        )\n\n      default:\n        return (\n          <div key={fieldName} className=\"space-y-2\">\n            <Label htmlFor={fieldName}>\n              {fieldTitle}\n              {required && <span className=\"text-status-error-text ml-1\">*</span>}\n            </Label>\n            {fieldDescription && <p className=\"text-xs text-muted-foreground\">{fieldDescription}</p>}\n            <Input\n              type=\"text\"\n              id={fieldName}\n              value={fieldValue(fieldName)}\n              onChange={(e) => onFieldChange(fieldName, e.target.value)}\n              required={required}\n              className=\"h-11 text-base\"\n            />\n          </div>\n        )\n    }\n  }\n\n  return (\n    <div className=\"space-y-4 pb-4\">\n      <div className=\"flex items-start justify-between gap-2\">\n        <h1 className=\"text-lg font-semibold\">{task.taskName}</h1>\n        <span className={`shrink-0 inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getStatusBadgeClass(task.status)}`}>\n          {t(`workflows.tasks.statuses.${task.status}`)}\n        </span>\n      </div>\n\n      {task.description && (\n        <p className=\"text-sm text-muted-foreground\">{task.description}</p>\n      )}\n\n      {isOverdue && (\n        <div className=\"bg-status-error-bg border border-status-error-border rounded-lg p-3\">\n          <p className=\"text-sm text-status-error-text font-medium\">{t('workflows.tasks.detail.overdueWarning')}</p>\n        </div>\n      )}\n\n      <div className=\"rounded-lg bg-muted/50 p-3 space-y-2.5\">\n        <h2 className=\"text-xs font-semibold uppercase text-muted-foreground\">{t('workflows.tasks.detail.sections.taskInfo')}</h2>\n        <div className=\"space-y-2 text-sm\">\n          <div className=\"flex justify-between\">\n            <span className=\"text-muted-foreground\">{t('workflows.tasks.fields.createdAt')}:</span>\n            <span className=\"text-right text-xs\">{new Date(task.createdAt).toLocaleString()}</span>\n          </div>\n          {task.dueDate && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">{t('workflows.tasks.fields.dueDate')}:</span>\n              <span className={`text-right text-xs ${isOverdue ? 'text-status-error-text font-medium' : ''}`}>\n                {new Date(task.dueDate).toLocaleString()}\n              </span>\n            </div>\n          )}\n          {task.assignedTo && (\n            <div className=\"flex justify-between\">\n              <span className=\"text-muted-foreground\">{t('workflows.tasks.detail.assignedTo')}:</span>\n              <span className=\"text-right\">{task.assignedTo}</span>\n            </div>\n          )}\n          <div className=\"flex justify-between\">\n            <span className=\"text-muted-foreground\">{t('workflows.tasks.detail.workflowInstance')}:</span>\n            <Link\n              href={`/backend/instances/${task.workflowInstanceId}`}\n              className=\"text-primary hover:underline text-xs font-mono\"\n            >\n              {task.workflowInstanceId.slice(0, 8)}...\n            </Link>\n          </div>\n        </div>\n      </div>\n\n      {!isCompletable && (\n        <div className=\"bg-status-info-bg border border-status-info-border rounded-lg p-3\">\n          <p className=\"text-sm text-status-info-text\">{t('workflows.tasks.detail.cannotComplete')}</p>\n        </div>\n      )}\n\n      {isCompletable && (\n        <form onSubmit={onSubmit} className=\"space-y-4\">\n          {task.formSchema?.properties && (\n            <>\n              <Separator />\n              <h2 className=\"text-base font-semibold\">{t('workflows.tasks.detail.sections.form')}</h2>\n              <div className=\"space-y-4\">\n                {Object.keys(task.formSchema!.properties!).map((fieldName) =>\n                  renderFormField(fieldName, task.formSchema!.properties![fieldName])\n                )}\n              </div>\n            </>\n          )}\n\n          {!task.formSchema?.properties && (\n            <div className=\"bg-status-info-bg border border-status-info-border rounded-lg p-3\">\n              <p className=\"text-sm text-status-info-text\">{t('workflows.tasks.detail.noFormSchema')}</p>\n            </div>\n          )}\n\n          <Separator />\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"m-comments\">\n              {t('workflows.tasks.detail.comments')} ({t('workflows.tasks.detail.optional')})\n            </Label>\n            <Textarea\n              id=\"m-comments\"\n              value={comments}\n              onChange={(e) => onCommentsChange(e.target.value)}\n              rows={3}\n              className=\"text-base\"\n              placeholder={t('workflows.tasks.detail.commentsPlaceholder')}\n            />\n          </div>\n\n          <div className=\"sticky bottom-0 border-t bg-background p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] z-10\">\n            <div className=\"flex gap-3\">\n              <Button\n                type=\"submit\"\n                disabled={submitting}\n                className=\"flex-1 h-11\"\n              >\n                {submitting ? t('workflows.tasks.detail.submitting') : t('workflows.tasks.detail.completeTask')}\n              </Button>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                onClick={onCancel}\n                disabled={submitting}\n                className=\"h-11\"\n              >\n                {t('common.cancel')}\n              </Button>\n            </div>\n          </div>\n        </form>\n      )}\n\n      {task.status === 'COMPLETED' && task.formData && (\n        <>\n          <Separator />\n          <JsonDisplay\n            data={task.formData}\n            title={t('workflows.tasks.detail.sections.submittedData')}\n            maxInitialDepth={2}\n          />\n          {task.comments && (\n            <div className=\"bg-muted/50 rounded-lg p-3\">\n              <p className=\"text-sm font-medium text-foreground mb-1\">{t('workflows.tasks.detail.comments')}:</p>\n              <p className=\"text-sm text-muted-foreground whitespace-pre-wrap\">{task.comments}</p>\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/modules/workflows/components/mobile/MobileVisualEditor.js

@@ -97,7 +97,7 @@ function MobileVisualEditor({
         "button",
         {
           onClick: () => onAddNode(nodeType),
-          className: "flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-muted active:bg-muted/80",
+          className: "flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-muted active:bg-muted/50",
           children: [
             /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5" }),
             /* @__PURE__ */ jsx("span", { children: NODE_TYPE_LABELS[nodeType].title })

package/dist/modules/workflows/components/mobile/MobileVisualEditor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/workflows/components/mobile/MobileVisualEditor.tsx"],
-  "sourcesContent": ["'use client'\n\nimport { useState } from 'react'\nimport type { Node, Edge, NodeChange, EdgeChange, Connection } from '@xyflow/react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Save, MoreVertical, FileText, Trash2, CircleQuestionMark, Play } from 'lucide-react'\nimport { NODE_TYPE_ICONS, NODE_TYPE_LABELS } from '../../lib/node-type-icons'\nimport { WorkflowGraph } from '../WorkflowGraph'\nimport { MobileMetadataSheet } from './MobileMetadataSheet'\nimport type { WorkflowMetadataState, WorkflowMetadataHandlers } from '../../data/types'\n\nexport interface MobileVisualEditorProps {\n  definitionId: string | null\n  isSaving: boolean\n  nodes: Node[]\n  edges: Edge[]\n  onNodesChange: (changes: NodeChange[]) => void\n  onEdgesChange: (changes: EdgeChange[]) => void\n  onNodeClick: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick: (event: React.MouseEvent, edge: Edge) => void\n  onConnect: (connection: Connection) => void\n  onAddNode: (nodeType: string) => void\n  onSave: () => void\n  onValidate: () => void\n  onTest: () => void\n  onLoadExample: () => void\n  onClear: () => void\n  metadata: WorkflowMetadataState\n  metadataHandlers: WorkflowMetadataHandlers\n}\n\nconst NODE_TYPES = ['start', 'userTask', 'automated', 'waitForSignal', 'subWorkflow', 'end'] as const\n\nexport function MobileVisualEditor({\n  definitionId,\n  isSaving,\n  nodes,\n  edges,\n  onNodesChange,\n  onEdgesChange,\n  onNodeClick,\n  onEdgeClick,\n  onConnect,\n  onAddNode,\n  onSave,\n  onValidate,\n  onTest,\n  onLoadExample,\n  onClear,\n  metadata,\n  metadataHandlers,\n}: MobileVisualEditorProps) {\n  const t = useT()\n  const [showMetadata, setShowMetadata] = useState(false)\n  const [showMoreActions, setShowMoreActions] = useState(false)\n\n  const { workflowName } = metadata\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"shrink-0 flex items-center justify-between gap-1 border-b border-border bg-background px-3 py-2\">\n        <h1 className=\"truncate text-sm font-semibold\">\n          {definitionId ? (workflowName || t('workflows.definitions.singular')) : t('workflows.backend.definitions.visual_editor.title')}\n        </h1>\n        <div className=\"flex shrink-0 items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setShowMetadata(true)}\n            className=\"h-8 px-2\"\n            aria-label={t('workflows.mobile.metadata', 'Metadata')}\n          >\n            <FileText className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onValidate}\n            disabled={isSaving}\n            className=\"h-8 px-2\"\n            aria-label={t('workflows.mobile.validate')}\n          >\n            <CircleQuestionMark className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            size=\"sm\"\n            onClick={onSave}\n            disabled={isSaving}\n            className=\"h-8 px-2\"\n            aria-label={isSaving ? t('workflows.mobile.saving') : t('workflows.mobile.save')}\n          >\n            <Save className=\"h-4 w-4\" />\n            <span className=\"ml-1 text-xs\">{isSaving ? '...' : definitionId ? t('workflows.common.update') : t('workflows.common.save')}</span>\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-8 w-8 p-0\"\n            onClick={() => setShowMoreActions(true)}\n            aria-label={t('workflows.mobile.moreActions', 'More')}\n          >\n            <MoreVertical className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"shrink-0 border-b border-border bg-background px-3 py-2\">\n        <div className=\"flex gap-1.5 overflow-x-auto pb-0.5\">\n          {NODE_TYPES.map((nodeType) => {\n            const Icon = NODE_TYPE_ICONS[nodeType]\n            return (\n              <button\n                key={nodeType}\n                onClick={() => onAddNode(nodeType)}\n                className=\"flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-muted active:bg-muted/80\"\n              >\n                <Icon className=\"h-3.5 w-3.5\" />\n                <span>{NODE_TYPE_LABELS[nodeType].title}</span>\n              </button>\n            )\n          })}\n        </div>\n      </div>\n\n      <div className=\"relative min-h-0 flex-1\">\n        <WorkflowGraph\n          initialNodes={nodes}\n          initialEdges={edges}\n          onNodesChange={onNodesChange}\n          onEdgesChange={onEdgesChange}\n          onNodeClick={onNodeClick}\n          onEdgeClick={onEdgeClick}\n          onConnect={onConnect}\n          editable={true}\n          height=\"100%\"\n        />\n\n        {nodes.length === 0 && (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center px-4\">\n            <div className=\"text-center\">\n              <h2 className=\"mb-2 text-lg font-semibold text-foreground\">{t('workflows.mobile.startBuilding', 'Start Building')}</h2>\n              <p className=\"mb-3 text-sm text-muted-foreground\">{t('workflows.mobile.startBuildingHint', 'Tap a step type above to add it')}</p>\n              <button\n                onClick={onLoadExample}\n                className=\"pointer-events-auto text-sm text-primary hover:underline\"\n              >\n                {t('workflows.mobile.loadExample', 'Load an example workflow')}\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n\n      <Dialog open={showMoreActions} onOpenChange={setShowMoreActions}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>{t('workflows.mobile.moreActions', 'More Actions')}</DialogTitle>\n          </DialogHeader>\n          <div className=\"space-y-2\">\n            <button\n              onClick={() => { onLoadExample(); setShowMoreActions(false) }}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted\"\n            >\n              {t('workflows.mobile.loadExample', 'Load Example')}\n            </button>\n            <button\n              onClick={() => { onTest(); setShowMoreActions(false) }}\n              disabled={isSaving}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted disabled:opacity-50\"\n            >\n              <Play className=\"h-4 w-4\" />\n              {t('workflows.mobile.runTest', 'Run Test')}\n            </button>\n            <button\n              onClick={() => { onClear(); setShowMoreActions(false) }}\n              disabled={isSaving}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm text-destructive hover:bg-muted active:bg-muted disabled:opacity-50\"\n            >\n              <Trash2 className=\"h-4 w-4\" />\n              {t('workflows.mobile.clear', 'Clear')}\n            </button>\n          </div>\n        </DialogContent>\n      </Dialog>\n\n      <MobileMetadataSheet\n        open={showMetadata}\n        onOpenChange={setShowMetadata}\n        definitionId={definitionId}\n        metadata={metadata}\n        metadataHandlers={metadataHandlers}\n      />\n    </div>\n  )\n}\n"],
+  "sourcesContent": ["'use client'\n\nimport { useState } from 'react'\nimport type { Node, Edge, NodeChange, EdgeChange, Connection } from '@xyflow/react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Save, MoreVertical, FileText, Trash2, CircleQuestionMark, Play } from 'lucide-react'\nimport { NODE_TYPE_ICONS, NODE_TYPE_LABELS } from '../../lib/node-type-icons'\nimport { WorkflowGraph } from '../WorkflowGraph'\nimport { MobileMetadataSheet } from './MobileMetadataSheet'\nimport type { WorkflowMetadataState, WorkflowMetadataHandlers } from '../../data/types'\n\nexport interface MobileVisualEditorProps {\n  definitionId: string | null\n  isSaving: boolean\n  nodes: Node[]\n  edges: Edge[]\n  onNodesChange: (changes: NodeChange[]) => void\n  onEdgesChange: (changes: EdgeChange[]) => void\n  onNodeClick: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick: (event: React.MouseEvent, edge: Edge) => void\n  onConnect: (connection: Connection) => void\n  onAddNode: (nodeType: string) => void\n  onSave: () => void\n  onValidate: () => void\n  onTest: () => void\n  onLoadExample: () => void\n  onClear: () => void\n  metadata: WorkflowMetadataState\n  metadataHandlers: WorkflowMetadataHandlers\n}\n\nconst NODE_TYPES = ['start', 'userTask', 'automated', 'waitForSignal', 'subWorkflow', 'end'] as const\n\nexport function MobileVisualEditor({\n  definitionId,\n  isSaving,\n  nodes,\n  edges,\n  onNodesChange,\n  onEdgesChange,\n  onNodeClick,\n  onEdgeClick,\n  onConnect,\n  onAddNode,\n  onSave,\n  onValidate,\n  onTest,\n  onLoadExample,\n  onClear,\n  metadata,\n  metadataHandlers,\n}: MobileVisualEditorProps) {\n  const t = useT()\n  const [showMetadata, setShowMetadata] = useState(false)\n  const [showMoreActions, setShowMoreActions] = useState(false)\n\n  const { workflowName } = metadata\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"shrink-0 flex items-center justify-between gap-1 border-b border-border bg-background px-3 py-2\">\n        <h1 className=\"truncate text-sm font-semibold\">\n          {definitionId ? (workflowName || t('workflows.definitions.singular')) : t('workflows.backend.definitions.visual_editor.title')}\n        </h1>\n        <div className=\"flex shrink-0 items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setShowMetadata(true)}\n            className=\"h-8 px-2\"\n            aria-label={t('workflows.mobile.metadata', 'Metadata')}\n          >\n            <FileText className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onValidate}\n            disabled={isSaving}\n            className=\"h-8 px-2\"\n            aria-label={t('workflows.mobile.validate')}\n          >\n            <CircleQuestionMark className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            size=\"sm\"\n            onClick={onSave}\n            disabled={isSaving}\n            className=\"h-8 px-2\"\n            aria-label={isSaving ? t('workflows.mobile.saving') : t('workflows.mobile.save')}\n          >\n            <Save className=\"h-4 w-4\" />\n            <span className=\"ml-1 text-xs\">{isSaving ? '...' : definitionId ? t('workflows.common.update') : t('workflows.common.save')}</span>\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-8 w-8 p-0\"\n            onClick={() => setShowMoreActions(true)}\n            aria-label={t('workflows.mobile.moreActions', 'More')}\n          >\n            <MoreVertical className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"shrink-0 border-b border-border bg-background px-3 py-2\">\n        <div className=\"flex gap-1.5 overflow-x-auto pb-0.5\">\n          {NODE_TYPES.map((nodeType) => {\n            const Icon = NODE_TYPE_ICONS[nodeType]\n            return (\n              <button\n                key={nodeType}\n                onClick={() => onAddNode(nodeType)}\n                className=\"flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-muted active:bg-muted/50\"\n              >\n                <Icon className=\"h-3.5 w-3.5\" />\n                <span>{NODE_TYPE_LABELS[nodeType].title}</span>\n              </button>\n            )\n          })}\n        </div>\n      </div>\n\n      <div className=\"relative min-h-0 flex-1\">\n        <WorkflowGraph\n          initialNodes={nodes}\n          initialEdges={edges}\n          onNodesChange={onNodesChange}\n          onEdgesChange={onEdgesChange}\n          onNodeClick={onNodeClick}\n          onEdgeClick={onEdgeClick}\n          onConnect={onConnect}\n          editable={true}\n          height=\"100%\"\n        />\n\n        {nodes.length === 0 && (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center px-4\">\n            <div className=\"text-center\">\n              <h2 className=\"mb-2 text-lg font-semibold text-foreground\">{t('workflows.mobile.startBuilding', 'Start Building')}</h2>\n              <p className=\"mb-3 text-sm text-muted-foreground\">{t('workflows.mobile.startBuildingHint', 'Tap a step type above to add it')}</p>\n              <button\n                onClick={onLoadExample}\n                className=\"pointer-events-auto text-sm text-primary hover:underline\"\n              >\n                {t('workflows.mobile.loadExample', 'Load an example workflow')}\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n\n      <Dialog open={showMoreActions} onOpenChange={setShowMoreActions}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>{t('workflows.mobile.moreActions', 'More Actions')}</DialogTitle>\n          </DialogHeader>\n          <div className=\"space-y-2\">\n            <button\n              onClick={() => { onLoadExample(); setShowMoreActions(false) }}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted\"\n            >\n              {t('workflows.mobile.loadExample', 'Load Example')}\n            </button>\n            <button\n              onClick={() => { onTest(); setShowMoreActions(false) }}\n              disabled={isSaving}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted disabled:opacity-50\"\n            >\n              <Play className=\"h-4 w-4\" />\n              {t('workflows.mobile.runTest', 'Run Test')}\n            </button>\n            <button\n              onClick={() => { onClear(); setShowMoreActions(false) }}\n              disabled={isSaving}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm text-destructive hover:bg-muted active:bg-muted disabled:opacity-50\"\n            >\n              <Trash2 className=\"h-4 w-4\" />\n              {t('workflows.mobile.clear', 'Clear')}\n            </button>\n          </div>\n        </DialogContent>\n      </Dialog>\n\n      <MobileMetadataSheet\n        open={showMetadata}\n        onOpenChange={setShowMetadata}\n        definitionId={definitionId}\n        metadata={metadata}\n        metadataHandlers={metadataHandlers}\n      />\n    </div>\n  )\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/modules/workflows/components/mobile/MobileWorkflowTimeline.js

@@ -5,39 +5,39 @@ import { NODE_TYPE_ICONS } from "../../lib/node-type-icons.js";
 import { CheckCircle2, Circle, AlertCircle, Loader2 } from "lucide-react";
 const STATUS_CONFIG = {
   completed: {
-    borderColor: "border-l-emerald-500",
-    bgColor: "bg-emerald-50 dark:bg-emerald-950/30",
+    borderColor: "border-l-status-success-border",
+    bgColor: "bg-status-success-bg",
     icon: CheckCircle2,
-    iconColor: "text-emerald-600",
-    dotColor: "bg-emerald-500"
+    iconColor: "text-status-success-icon",
+    dotColor: "bg-status-success-icon"
   },
   active: {
-    borderColor: "border-l-blue-500",
-    bgColor: "bg-blue-50 dark:bg-blue-950/30",
+    borderColor: "border-l-status-info-border",
+    bgColor: "bg-status-info-bg",
     icon: Loader2,
-    iconColor: "text-blue-600",
-    dotColor: "bg-blue-500"
+    iconColor: "text-status-info-icon",
+    dotColor: "bg-status-info-icon"
   },
   pending: {
-    borderColor: "border-l-gray-300 dark:border-l-gray-600",
-    bgColor: "bg-gray-50 dark:bg-gray-900/30",
+    borderColor: "border-l-status-neutral-border",
+    bgColor: "bg-status-neutral-bg",
     icon: Circle,
-    iconColor: "text-gray-400",
-    dotColor: "bg-gray-300 dark:bg-gray-600"
+    iconColor: "text-status-neutral-icon",
+    dotColor: "bg-status-neutral-icon"
   },
   failed: {
-    borderColor: "border-l-red-500",
-    bgColor: "bg-red-50 dark:bg-red-950/30",
+    borderColor: "border-l-status-error-border",
+    bgColor: "bg-status-error-bg",
     icon: AlertCircle,
-    iconColor: "text-red-600",
-    dotColor: "bg-red-500"
+    iconColor: "text-status-error-icon",
+    dotColor: "bg-status-error-icon"
   },
   skipped: {
-    borderColor: "border-l-yellow-400",
-    bgColor: "bg-yellow-50 dark:bg-yellow-950/30",
+    borderColor: "border-l-status-warning-border",
+    bgColor: "bg-status-warning-bg",
     icon: Circle,
-    iconColor: "text-yellow-500",
-    dotColor: "bg-yellow-400"
+    iconColor: "text-status-warning-icon",
+    dotColor: "bg-status-warning-icon"
   }
 };
 function MobileWorkflowTimeline({ steps }) {
@@ -53,7 +53,7 @@ function MobileWorkflowTimeline({ steps }) {
     return /* @__PURE__ */ jsxs("div", { className: "relative flex gap-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ jsx("div", { className: `h-3 w-3 shrink-0 rounded-full ${config.dotColor} mt-3 ring-2 ring-background` }),
-        !isLast && /* @__PURE__ */ jsx("div", { className: "w-0.5 flex-1 bg-gray-200 dark:bg-gray-700" })
+        !isLast && /* @__PURE__ */ jsx("div", { className: "w-0.5 flex-1 bg-border" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: `mb-2 flex-1 rounded-lg border-l-4 ${config.borderColor} ${config.bgColor} p-3`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -62,8 +62,8 @@ function MobileWorkflowTimeline({ steps }) {
             /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: step.label })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded bg-background/60 px-1.5 py-0.5 text-[10px] font-medium uppercase text-muted-foreground", children: step.type }),
-            step.duration && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: step.duration })
+            /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded bg-background/80 px-1.5 py-0.5 text-overline font-medium uppercase text-muted-foreground", children: step.type }),
+            step.duration && /* @__PURE__ */ jsx("span", { className: "text-overline text-muted-foreground", children: step.duration })
           ] })
         ] }),
         /* @__PURE__ */ jsx(StatusIcon, { className: `h-4 w-4 shrink-0 ${config.iconColor} ${step.status === "active" ? "animate-spin" : ""}` })