@gadmin2n/schematics 0.0.144 → 0.0.145

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/instances.tsx

@@ -1,20 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import {
-  Button,
-  Card,
-  Select,
-  Space,
-  Table,
-  Tag,
-  Tooltip,
-  Typography,
-} from 'antd';
-import { ArrowLeftOutlined } from '@ant-design/icons';
+import { Button, Card, Select, Table, Tag, Tooltip, message } from 'antd';
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { customRequest } from 'helpers/http';
-import { HEADER_CARD_PROPS, PAGE_WRAPPER_STYLE } from 'constants/layout';
+import { PAGE_WRAPPER_STYLE } from 'constants/layout';
+import { PageHeader } from 'components';
+import { useTranslation } from 'react-i18next';
+import { formatWorkflowUtcDateTime } from './utils/workflowDateTime';
+import './workflow-ui.css';
 
-const { Title } = Typography;
 const PAGE_SIZE = 20;
 
 const STATUS_TAG: Record<string, { color: string; label: string }> = {
@@ -28,6 +21,7 @@ const STATUS_TAG: Record<string, { color: string; label: string }> = {
 interface WorkflowInstanceItem {
   id: string;
   status: string;
+  retryOfInstanceId: string | null;
   startedAt: string | null;
   finishedAt: string | null;
   creator: string;
@@ -46,6 +40,7 @@ function formatDuration(start: string | null, end: string | null): string {
 }
 
 export default function WorkflowInstancesPage() {
+  const { t } = useTranslation('workflow');
   const { workflowId } = useParams<{ workflowId: string }>();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -57,6 +52,7 @@ export default function WorkflowInstancesPage() {
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
   const [workflowName, setWorkflowName] = useState('');
+  const [workflowNameError, setWorkflowNameError] = useState(false);
 
   const updateParams = useCallback(
     (updates: Record<string, string | undefined>) => {
@@ -78,8 +74,11 @@ export default function WorkflowInstancesPage() {
   useEffect(() => {
     if (!workflowId) return;
     customRequest<{ name: string }>(`workflow/${workflowId}`, 'GET')
-      .then((wf) => setWorkflowName(wf.name))
-      .catch(() => {});
+      .then((wf) => {
+        setWorkflowName(wf.name);
+        setWorkflowNameError(false);
+      })
+      .catch(() => setWorkflowNameError(true));
   }, [workflowId]);
 
   const fetchData = useCallback(async () => {
@@ -98,12 +97,12 @@ export default function WorkflowInstancesPage() {
       }>(`workflow/${workflowId}/instances`, 'GET', params);
       setItems(res.items);
       setTotal(res.total);
-    } catch {
-      // handled silently
+    } catch (error: any) {
+      message.error(error?.message ?? t('instances.loadFailed'));
     } finally {
       setLoading(false);
     }
-  }, [workflowId, page, filterStatus]);
+  }, [workflowId, page, filterStatus, t]);
 
   useEffect(() => {
     fetchData();
@@ -117,58 +116,88 @@ export default function WorkflowInstancesPage() {
       width: 80,
     },
     {
-      title: 'Status',
+      title: t('instances.status'),
       dataIndex: 'status',
       key: 'status',
       width: 110,
       render: (status: string) => {
         const cfg = STATUS_TAG[status] || { color: 'default', label: status };
-        return <Tag color={cfg.color}>{cfg.label}</Tag>;
+        return (
+          <Tag color={cfg.color}>
+            {t(`instances.statuses.${status.toLowerCase()}`, {
+              defaultValue: cfg.label,
+            })}
+          </Tag>
+        );
       },
     },
     {
-      title: 'Started',
+      title: t('instances.executionSource'),
+      key: 'executionSource',
+      width: 150,
+      render: (_: unknown, record: WorkflowInstanceItem) =>
+        record.retryOfInstanceId ? (
+          <Button
+            type="link"
+            size="small"
+            style={{ padding: 0 }}
+            onClick={() =>
+              navigate(
+                `/admin/workflow/instance/show/${record.retryOfInstanceId}`,
+              )
+            }
+          >
+            {t('instances.resumedFrom', { id: record.retryOfInstanceId })}
+          </Button>
+        ) : (
+          <span style={{ color: 'var(--ant-color-text-secondary)' }}>
+            {t('instances.initialRun')}
+          </span>
+        ),
+    },
+    {
+      title: t('instances.startedAt'),
       dataIndex: 'startedAt',
       key: 'startedAt',
       width: 160,
       render: (v: string | null) =>
         v ? (
-          <Tooltip title={new Date(v).toLocaleString()}>
-            <span>{new Date(v).toLocaleString()}</span>
+          <Tooltip title={formatWorkflowUtcDateTime(v)}>
+            <span>{formatWorkflowUtcDateTime(v)}</span>
           </Tooltip>
         ) : (
           <span style={{ color: '#d9d9d9' }}>—</span>
         ),
     },
     {
-      title: 'Finished',
+      title: t('instances.finishedAt'),
       dataIndex: 'finishedAt',
       key: 'finishedAt',
       width: 160,
       render: (v: string | null) =>
         v ? (
-          <Tooltip title={new Date(v).toLocaleString()}>
-            <span>{new Date(v).toLocaleString()}</span>
+          <Tooltip title={formatWorkflowUtcDateTime(v)}>
+            <span>{formatWorkflowUtcDateTime(v)}</span>
           </Tooltip>
         ) : (
           <span style={{ color: '#d9d9d9' }}>—</span>
         ),
     },
     {
-      title: 'Duration',
+      title: t('instances.duration'),
       key: 'duration',
       width: 100,
       render: (_: any, record: WorkflowInstanceItem) =>
         formatDuration(record.startedAt, record.finishedAt),
     },
     {
-      title: 'Creator',
+      title: t('instances.creator'),
       dataIndex: 'creator',
       key: 'creator',
       width: 150,
     },
     {
-      title: 'Actions',
+      title: t('list.actions'),
       key: 'actions',
       width: 100,
       render: (_: any, record: WorkflowInstanceItem) => (
@@ -177,48 +206,40 @@ export default function WorkflowInstancesPage() {
           size="small"
           onClick={() => navigate(`/admin/workflow/instance/show/${record.id}`)}
         >
-          Detail
+          {t('instances.detail')}
         </Button>
       ),
     },
   ];
 
   return (
-    <div style={PAGE_WRAPPER_STYLE}>
-      <Card {...HEADER_CARD_PROPS}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-          }}
-        >
-          <Space>
-            <Button
-              type="text"
-              icon={<ArrowLeftOutlined />}
-              onClick={() => navigate('/admin/workflow')}
-            ></Button>
-            <Title level={4} style={{ margin: 0 }}>
-              {workflowName || 'Workflow'} — Execution History
-            </Title>
-          </Space>
+    <div className="workflow-page-stack" style={PAGE_WRAPPER_STYLE}>
+      <PageHeader
+        title={t('instances.title', {
+          name: workflowName || t('list.title'),
+        })}
+        subtitle={
+          workflowNameError
+            ? t('instances.workflowLoadFailed')
+            : t('instances.subtitle')
+        }
+        extra={
           <Select
-            placeholder="All Statuses"
+            placeholder={t('instances.allStatuses')}
             allowClear
             value={filterStatus}
             onChange={(v) => updateParams({ status: v, page: undefined })}
             style={{ width: 140 }}
             options={[
-              { value: 'PENDING', label: 'Pending' },
-              { value: 'RUNNING', label: 'Running' },
-              { value: 'COMPLETED', label: 'Completed' },
-              { value: 'FAILED', label: 'Failed' },
-              { value: 'CANCELLED', label: 'Cancelled' },
+              { value: 'PENDING', label: t('instances.statuses.pending') },
+              { value: 'RUNNING', label: t('instances.statuses.running') },
+              { value: 'COMPLETED', label: t('instances.statuses.completed') },
+              { value: 'FAILED', label: t('instances.statuses.failed') },
+              { value: 'CANCELLED', label: t('instances.statuses.cancelled') },
             ]}
           />
-        </div>
-      </Card>
+        }
+      />
 
       <Card className="card-table">
         <Table
@@ -232,7 +253,7 @@ export default function WorkflowInstancesPage() {
             total,
             onChange: (p) =>
               updateParams({ page: p > 1 ? String(p) : undefined }),
-            showTotal: (t) => `Total ${t}`,
+            showTotal: (count) => t('list.total', { count }),
           }}
           size="small"
         />

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/node-instances/components/CreateNodeInstanceModal.tsx

@@ -11,62 +11,37 @@ import {
   message,
 } from 'antd';
 import { CheckCircleOutlined, LoadingOutlined } from '@ant-design/icons';
+import { useTranslation } from 'react-i18next';
 import { useWorkflowAgent } from '../../hooks/useWorkflowAgent';
 import type { WorkflowNodeType, NodeInstanceAgentOutput } from '../../types';
+import { WorkflowCodeEditor } from '../../components/WorkflowCodeEditor';
 
 const { Text } = Typography;
 const { TextArea } = Input;
 
 /**
- * Front-end hardcoded mapping: nodeType category → prompt placeholder & scenario hint.
+ * Front-end hardcoded mapping: nodeType category → scenario hint sent to the Agent.
+ * (User-facing placeholders live in i18n: nodeInstance.promptPlaceholders)
  */
-const CATEGORY_PROMPT_CONFIG: Record<
-  string,
-  { placeholder: string; scenarioHint: string }
-> = {
-  TRIGGER: {
-    placeholder: 'e.g. Trigger every weekday at 9am Shanghai time',
-    scenarioHint:
-      'This is a trigger node. Generate config for defining when/how the workflow starts.',
-  },
-  ACTION: {
-    placeholder:
-      'e.g. Send a POST request to https://api.example.com/notify with the order data',
-    scenarioHint:
-      'This is an action node. Generate config for performing an operation (HTTP call, DB query, notification, etc.).',
-  },
-  CONDITION: {
-    placeholder:
-      'e.g. Check if order.amount > 1000 AND order.status is "pending"',
-    scenarioHint:
-      'This is a condition/branching node. Generate config for evaluating conditions to decide the flow path.',
-  },
-  FLOW_CONTROL: {
-    placeholder:
-      'e.g. Wait 30 seconds, iterate over items, or run branches in parallel',
-    scenarioHint:
-      'This is a flow control node. Generate config for waiting, iteration, or parallel execution.',
-  },
-  APPROVAL: {
-    placeholder:
-      'e.g. Wait for manager@company.com to approve, timeout after 24 hours',
-    scenarioHint:
-      'This is an approval node. Generate config for human approval gates with escalation rules.',
-  },
-  SUB_WORKFLOW: {
-    placeholder:
-      'e.g. Call the "order-processing" Workflow and wait for its return value',
-    scenarioHint: 'This node defines or performs an internal Workflow call.',
-  },
+const CATEGORY_SCENARIO_HINTS: Record<string, string> = {
+  TRIGGER:
+    'This is a trigger node. Generate config for defining when/how the workflow starts.',
+  ACTION:
+    'This is an action node. Generate config for performing an operation (HTTP call, DB query, notification, etc.).',
+  CONDITION:
+    'This is a condition/branching node. Generate config for evaluating conditions to decide the flow path.',
+  FLOW_CONTROL:
+    'This is a flow control node. Generate config for waiting, iteration, or parallel execution.',
+  APPROVAL:
+    'This is an approval node. Generate config for human approval gates with escalation rules.',
+  SUB_WORKFLOW: 'This node defines or performs an internal Workflow call.',
 };
 
-const DEFAULT_PROMPT_CONFIG = {
-  placeholder: 'Describe what this node instance should do...',
-  scenarioHint: 'Generate appropriate configuration for this node type.',
-};
+const DEFAULT_SCENARIO_HINT =
+  'Generate appropriate configuration for this node type.';
 
-function getPromptConfig(category: string) {
-  return CATEGORY_PROMPT_CONFIG[category] || DEFAULT_PROMPT_CONFIG;
+function getScenarioHint(category: string) {
+  return CATEGORY_SCENARIO_HINTS[category] || DEFAULT_SCENARIO_HINT;
 }
 
 function tryParseNodeInstanceOutput(
@@ -105,6 +80,7 @@ export function CreateNodeInstanceModal({
   onClose,
   onApply,
 }: Props) {
+  const { t } = useTranslation('workflow');
   const [selectedNodeTypeId, setSelectedNodeTypeId] = useState<
     string | undefined
   >();
@@ -128,17 +104,20 @@ export function CreateNodeInstanceModal({
     [selectedNodeTypeId, nodeTypes],
   );
 
-  const promptConfig = useMemo(
+  const promptPlaceholder = useMemo(
     () =>
       selectedNodeType
-        ? getPromptConfig(selectedNodeType.category)
-        : DEFAULT_PROMPT_CONFIG,
-    [selectedNodeType],
+        ? t(
+            `nodeInstance.promptPlaceholders.${selectedNodeType.category}`,
+            t('nodeInstance.promptPlaceholderDefault'),
+          )
+        : t('nodeInstance.promptPlaceholderDefault'),
+    [selectedNodeType, t],
   );
 
   async function handleGenerate() {
     if (!prompt.trim()) {
-      message.warning('Please describe what this node instance should do');
+      message.warning(t('nodeInstance.promptRequired'));
       return;
     }
     if (!selectedNodeType) return;
@@ -148,7 +127,7 @@ export function CreateNodeInstanceModal({
       action: 'create_node_instance',
       prompt: prompt.trim(),
       nodeType: selectedNodeType,
-      scenarioHint: promptConfig.scenarioHint,
+      scenarioHint: getScenarioHint(selectedNodeType.category),
     });
 
     if (result && 'config' in result) {
@@ -165,9 +144,7 @@ export function CreateNodeInstanceModal({
   function handleApplyManualJson() {
     const parsed = tryParseNodeInstanceOutput(resultInput);
     if (!parsed) {
-      message.error(
-        'Invalid JSON format. Expected: { "name": "...", "description": "...", "config": {...} }',
-      );
+      message.error(t('nodeInstance.invalidJson'));
       return;
     }
     setGeneratedResult(parsed);
@@ -199,19 +176,72 @@ export function CreateNodeInstanceModal({
 
   return (
     <Modal
-      title="AI Create Node Instance"
+      title={t('nodeInstance.aiCreate')}
       open={open}
       onCancel={handleClose}
-      footer={null}
       destroyOnClose
       width={560}
+      styles={{ header: { borderBottom: 'none' } }}
+      footer={
+        <div style={{ textAlign: 'right' }}>
+          <Space>
+            <Button onClick={handleClose}>{t('common.cancel')}</Button>
+            {step === 'selectType' && (
+              <Button
+                type="primary"
+                disabled={!selectedNodeTypeId || !prompt.trim()}
+                loading={agentLoading}
+                onClick={handleGenerate}
+              >
+                {t('nodeInstance.generate')}
+              </Button>
+            )}
+            {step === 'generating' && (
+              <Button
+                type="primary"
+                disabled={!resultInput.trim()}
+                onClick={handleApplyManualJson}
+              >
+                {t('nodeInstance.applyJson')}
+              </Button>
+            )}
+            {step === 'done' && (
+              <>
+                <Button
+                  onClick={() => {
+                    setStep('selectType');
+                    setGeneratedResult(null);
+                    setResultInput('');
+                  }}
+                >
+                  {t('nodeInstance.regenerate')}
+                </Button>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    const parsed = tryParseNodeInstanceOutput(resultInput);
+                    if (parsed) {
+                      setGeneratedResult(parsed);
+                      handleConfirm();
+                    } else {
+                      message.error(t('nodeInstance.invalidJson'));
+                    }
+                  }}
+                >
+                  {t('nodeInstance.confirmCreate')}
+                </Button>
+              </>
+            )}
+          </Space>
+        </div>
+      }
     >
       <Space direction="vertical" style={{ width: '100%' }} size="middle">
         {/* Node Type Select — always visible */}
         <div>
-          <Text strong>Node Type</Text>
+          <Text strong>{t('nodeInstance.nodeType')}</Text>
           <Select
-            placeholder="Select a node type"
+            placeholder={t('nodeInstance.selectNodeType')}
             value={selectedNodeTypeId}
             onChange={setSelectedNodeTypeId}
             disabled={step === 'generating'}
@@ -225,20 +255,20 @@ export function CreateNodeInstanceModal({
           />
         </div>
 
-        {/* Prompt Input — visible once type is selected */}
-        {selectedNodeTypeId && (
-          <div>
-            <Text strong>Describe your node instance</Text>
-            <TextArea
-              rows={4}
-              placeholder={promptConfig.placeholder}
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              disabled={step === 'generating' || step === 'done'}
-              style={{ marginTop: 4 }}
-            />
-          </div>
-        )}
+        {/* Prompt Input — always visible, enabled once type is selected */}
+        <div>
+          <Text strong>{t('nodeInstance.describe')}</Text>
+          <TextArea
+            rows={4}
+            placeholder={promptPlaceholder}
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            disabled={
+              !selectedNodeTypeId || step === 'generating' || step === 'done'
+            }
+            style={{ marginTop: 4 }}
+          />
+        </div>
 
         {/* Generating state */}
         {step === 'generating' && (
@@ -247,22 +277,20 @@ export function CreateNodeInstanceModal({
               type="info"
               icon={<Spin indicator={<LoadingOutlined />} size="small" />}
               showIcon
-              message="Waiting for Agent..."
-              description="Continue your conversation with the Agent in the chat panel. Once it outputs valid JSON, it will be captured automatically. Or paste JSON below manually."
+              message={t('nodeInstance.waitingAgent')}
+              description={t('nodeInstance.agentHint')}
             />
             <div>
-              <Text strong>JSON Result</Text>
+              <Text strong>{t('nodeInstance.jsonResult')}</Text>
               <Text type="secondary" style={{ marginLeft: 8, fontSize: 12 }}>
-                Auto-filled by Agent or paste manually
+                {t('nodeInstance.jsonPlaceholder')}
               </Text>
-              <TextArea
-                rows={6}
-                placeholder={
-                  '{"name": "...", "description": "...", "config": {...}}'
-                }
+              <WorkflowCodeEditor
+                language="json"
                 value={resultInput}
-                onChange={(e) => setResultInput(e.target.value)}
-                style={{ marginTop: 4, fontFamily: 'monospace', fontSize: 12 }}
+                onChange={setResultInput}
+                height={220}
+                ariaLabel="JSON Result"
               />
             </div>
           </>
@@ -275,16 +303,20 @@ export function CreateNodeInstanceModal({
               type="success"
               icon={<CheckCircleOutlined />}
               showIcon
-              message="Node instance config generated!"
-              description={`Name: ${generatedResult.name}. Config has ${Object.keys(generatedResult.config).length} fields.`}
+              message={t('nodeInstance.generated')}
+              description={t('nodeInstance.generatedDetail', {
+                name: generatedResult.name,
+                count: Object.keys(generatedResult.config).length,
+              })}
             />
             <div>
-              <Text strong>JSON Result</Text>
-              <TextArea
-                rows={6}
+              <Text strong>{t('nodeInstance.jsonResult')}</Text>
+              <WorkflowCodeEditor
+                language="json"
                 value={resultInput}
-                onChange={(e) => setResultInput(e.target.value)}
-                style={{ marginTop: 4, fontFamily: 'monospace', fontSize: 12 }}
+                onChange={setResultInput}
+                height={220}
+                ariaLabel="JSON Result"
               />
             </div>
           </>
@@ -294,64 +326,11 @@ export function CreateNodeInstanceModal({
         {agentError && (
           <Alert
             type="error"
-            message="Generation failed"
+            message={t('nodeInstance.generationFailed')}
             description={agentError}
             showIcon
           />
         )}
-
-        {/* Action buttons */}
-        <div style={{ textAlign: 'right' }}>
-          <Space>
-            <Button onClick={handleClose}>Cancel</Button>
-            {step === 'selectType' && (
-              <Button
-                type="primary"
-                disabled={!selectedNodeTypeId || !prompt.trim()}
-                loading={agentLoading}
-                onClick={handleGenerate}
-              >
-                Generate
-              </Button>
-            )}
-            {step === 'generating' && (
-              <Button
-                type="primary"
-                disabled={!resultInput.trim()}
-                onClick={handleApplyManualJson}
-              >
-                Apply JSON
-              </Button>
-            )}
-            {step === 'done' && (
-              <>
-                <Button
-                  onClick={() => {
-                    setStep('selectType');
-                    setGeneratedResult(null);
-                    setResultInput('');
-                  }}
-                >
-                  Re-generate
-                </Button>
-                <Button
-                  type="primary"
-                  onClick={() => {
-                    const parsed = tryParseNodeInstanceOutput(resultInput);
-                    if (parsed) {
-                      setGeneratedResult(parsed);
-                      handleConfirm();
-                    } else {
-                      message.error('Invalid JSON format');
-                    }
-                  }}
-                >
-                  Confirm &amp; Create
-                </Button>
-              </>
-            )}
-          </Space>
-        </div>
       </Space>
     </Modal>
   );