@gadmin2n/schematics 0.0.77 → 0.0.79

package/dist/lib/application/files/gadmin2-game-angle-demo/server/package.json

@@ -36,7 +36,7 @@
   "dependencies": {
     "@agendajs/postgres-backend": "^3.0.5",
     "@azure/identity": "^4.13.0",
-    "@gadmin2n/nest-common": "^0.0.47",
+    "@gadmin2n/nest-common": "^0.0.49",
     "@nestjs/cache-manager": "^3.0.1",
     "@nestjs/common": "^10.4.15",
     "@nestjs/config": "^3.2.0",
@@ -88,8 +88,8 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^10.4.0",
-    "@gadmin2n/prisma-nest-generator": "^0.0.40",
-    "@gadmin2n/prisma-react-generator": "^0.0.56",
+    "@gadmin2n/prisma-nest-generator": "^0.0.42",
+    "@gadmin2n/prisma-react-generator": "^0.0.58",
     "@nestjs/testing": "^10.4.15",
     "@types/cookie-parser": "^1.4.3",
     "@types/express": "^4.17.21",

package/dist/lib/application/files/gadmin2-game-angle-demo/server/src/app.module.ts

@@ -19,6 +19,7 @@ import { ServeStaticModule } from '@nestjs/serve-static';
 import { join } from 'path';
 import { LogFormat } from './lib/logger';
 import { AgendaModule } from './modules/agenda/agenda.module';
+import { HealthModule } from './modules/health/health.module';
 import { RoleModule } from './modules/role/role.module';
 import { RoleService } from './modules/role/role.service';
 import { RolesRefresherService } from './modules/role/roles-refresher.service';
@@ -85,6 +86,7 @@ import { RolesRefresherService } from './modules/role/roles-refresher.service';
 
     ...modules,
     AgendaModule,
+    HealthModule,
   ],
 
   controllers: [AppController],

package/dist/lib/application/files/gadmin2-game-angle-demo/server/src/main.ts

@@ -122,6 +122,12 @@ async function bootstrap() {
     });
   }
 
+  // 启用 NestJS 生命周期钩子，确保 SIGTERM 时触发 onApplicationShutdown / onModuleDestroy
+  app.enableShutdownHooks();
+
+  // 启用 NestJS 生命周期钩子，确保 SIGTERM 时触发 onApplicationShutdown / onModuleDestroy
+  app.enableShutdownHooks();
+
   await app.listen(configService.get('nest').port);
 
   console.log(

package/dist/lib/application/files/gadmin2-game-angle-demo/server/src/modules/health/health.controller.ts

@@ -0,0 +1,17 @@
+import { Controller, Get } from '@nestjs/common';
+import { AllowUnauthorizedRequest } from '../../lib/auth.guard';
+
+@Controller('health')
+export class HealthController {
+  @Get('live')
+  @AllowUnauthorizedRequest()
+  liveness() {
+    return { status: 'ok' };
+  }
+
+  @Get('ready')
+  @AllowUnauthorizedRequest()
+  readiness() {
+    return { status: 'ok' };
+  }
+}

package/dist/lib/application/files/gadmin2-game-angle-demo/server/src/modules/health/health.module.ts

@@ -0,0 +1,7 @@
+import { Module } from '@nestjs/common';
+import { HealthController } from './health.controller';
+
+@Module({
+  controllers: [HealthController],
+})
+export class HealthModule {}

package/dist/lib/application/files/gadmin2-game-angle-demo/server/src/modules/workflow/workflow.service.ts

@@ -422,7 +422,7 @@ export class WorkflowService {
     const instance = await this.prisma.workflowInstance.findUnique({
       where: { id: instanceId },
       include: {
-        workflow: { select: { name: true } },
+        workflow: { select: { name: true, dsl: true } },
         nodeExecutions: {
           orderBy: { createdAt: 'asc' },
         },
@@ -430,7 +430,27 @@ export class WorkflowService {
     });
 
     if (!instance) throw new NotFoundException('Instance not found');
-    return instance;
+
+    // Fetch the workflow DSL from the version
+    let dsl: any = null;
+    if (instance.versionId) {
+      const version = await this.prisma.workflowVersion.findUnique({
+        where: { id: instance.versionId },
+        select: { dsl: true },
+      });
+      dsl = version?.dsl || null;
+    }
+
+    // Fallback: use DSL from the workflow itself
+    if (!dsl && instance.workflow.dsl) {
+      dsl = instance.workflow.dsl;
+    }
+
+    return {
+      ...instance,
+      workflow: { name: instance.workflow.name },
+      dsl,
+    };
   }
 
   async cancelInstance(instanceId: bigint, temporalService: any) {

package/dist/lib/application/files/gadmin2-game-angle-demo/web/package.json

@@ -11,7 +11,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.2",
     "@gadmin2n/charts": "^0.0.7",
-    "@gadmin2n/react-common": "^0.0.66",
+    "@gadmin2n/react-common": "^0.0.68",
     "@monaco-editor/react": "^4.7.0",
     "@refinedev/antd": "^5.47.0",
     "@refinedev/cli": "^2.16.51",

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

@@ -0,0 +1,388 @@
+import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
+import {
+  ReactFlow,
+  ReactFlowProvider,
+  Background,
+  Controls,
+  MiniMap,
+  ConnectionMode,
+  useReactFlow,
+  type Node,
+  type Edge,
+  type Connection,
+  type NodeChange,
+  type EdgeChange,
+  applyNodeChanges,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { CustomNode } from './CustomNode';
+import { ExecutionStatusNode } from './ExecutionStatusNode';
+import type { WorkflowDSL, WorkflowNodeType } from '../types';
+
+interface NodeExecution {
+  id: string;
+  nodeId: string;
+  nodeType: string;
+  nodeLabel: string | null;
+  status: string;
+  input: any;
+  output: any;
+  error: any;
+  startedAt: string | null;
+  finishedAt: string | null;
+}
+
+const nodeTypes = { custom: CustomNode, executionStatus: ExecutionStatusNode };
+
+interface EnhancedFlowRendererProps {
+  dsl: WorkflowDSL | null;
+  nodeTypeMap?: Record<string, { category: string; icon: string }>;
+  selectedNodeId?: string | null;
+  readonly?: boolean;
+  onNodeClick?: (nodeId: string) => void;
+  onDslChange?: (dsl: WorkflowDSL) => void;
+  // New props for execution status
+  nodeExecutions?: NodeExecution[];
+  showExecutionStatus?: boolean;
+}
+
+function formatDuration(
+  startedAt: string | null,
+  finishedAt: string | null,
+): string {
+  if (!startedAt) return '';
+  const endTime = finishedAt ? new Date(finishedAt).getTime() : Date.now();
+  const ms = endTime - new Date(startedAt).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  return rem > 0 ? `${m}m ${rem.toFixed(0)}s` : `${m}m`;
+}
+
+function EnhancedFlowCanvas({
+  dsl,
+  nodeTypeMap,
+  selectedNodeId,
+  readonly,
+  onNodeClick,
+  onDslChange,
+  nodeExecutions,
+  showExecutionStatus,
+}: EnhancedFlowRendererProps) {
+  const reactFlowInstance = useReactFlow();
+  const dslRef = useRef(dsl);
+  dslRef.current = dsl;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const hasSetViewport = useRef(false);
+
+  // Build execution map: nodeId -> execution record
+  const executionMap = useMemo(() => {
+    if (!nodeExecutions) return {};
+    const map: Record<string, NodeExecution> = {};
+    nodeExecutions.forEach((exec) => {
+      map[exec.nodeId] = exec;
+    });
+    return map;
+  }, [nodeExecutions]);
+
+  const { nodes, edges } = useMemo(() => {
+    if (!dsl) return { nodes: [] as Node[], edges: [] as Edge[] };
+
+    const rfNodes: Node[] = dsl.nodes.map((n) => {
+      const category = nodeTypeMap?.[n.type]?.category || 'ACTION';
+      // Transpose x/y for vertical (top-to-bottom) layout
+      // Scale y down to compress vertical spacing (original x-step=250 → 120)
+      // Add y offset so top node isn't clipped
+      const position = { x: n.position.y * 1.5, y: n.position.x * 0.5 + 20 };
+
+      // Get execution status for this node
+      const execution = executionMap[n.id];
+      const nodeType = showExecutionStatus ? 'executionStatus' : 'custom';
+
+      const nodeData: any = {
+        label: n.label,
+        category,
+        isSelected: n.id === selectedNodeId,
+        readonly: !!readonly,
+      };
+
+      // Add execution status data — show NOT_EXECUTED for nodes without records
+      if (showExecutionStatus) {
+        if (execution) {
+          nodeData.executionStatus = execution.status;
+          nodeData.duration = formatDuration(
+            execution.startedAt,
+            execution.finishedAt,
+          );
+          nodeData.error = execution.error;
+        } else {
+          nodeData.executionStatus = 'NOT_EXECUTED';
+        }
+      }
+
+      return {
+        id: n.id,
+        type: nodeType,
+        position,
+        measured: { width: 140, height: 40 },
+        selected: n.id === selectedNodeId,
+        data: nodeData,
+      };
+    });
+
+    const rfEdges: Edge[] = dsl.edges.map((e) => ({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      sourceHandle: e.sourceHandle,
+      label: e.label,
+      type: 'smoothstep',
+      animated: showExecutionStatus ? false : true, // Disable animation when showing execution
+    }));
+
+    return { nodes: rfNodes, edges: rfEdges };
+  }, [dsl, nodeTypeMap, selectedNodeId, executionMap, showExecutionStatus]);
+
+  // Set viewport once before first paint: horizontal center + vertical top padding
+  useLayoutEffect(() => {
+    if (!hasSetViewport.current && containerRef.current && nodes.length > 0) {
+      const containerWidth = containerRef.current.clientWidth;
+      let minX = Infinity,
+        maxX = -Infinity;
+      nodes.forEach((n) => {
+        const w = n.measured?.width || 140;
+        minX = Math.min(minX, n.position.x);
+        maxX = Math.max(maxX, n.position.x + w);
+      });
+      const contentWidth = maxX - minX;
+      const x = (containerWidth - contentWidth) / 2 - minX;
+      reactFlowInstance.setViewport({ x, y: 0, zoom: 1 });
+      hasSetViewport.current = true;
+    }
+  }, [nodes, reactFlowInstance]);
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange) return;
+
+      // Apply changes to get new node positions
+      const updatedRfNodes = applyNodeChanges(changes, nodes);
+
+      // Check if any position actually changed
+      const positionChanged = changes.some(
+        (c) => c.type === 'position' && c.position,
+      );
+      const removeChanges = changes.filter((c) => c.type === 'remove');
+
+      if (removeChanges.length > 0) {
+        const removedIds = new Set(
+          removeChanges.map((c) => (c as any).id as string),
+        );
+        const newNodes = currentDsl.nodes.filter((n) => !removedIds.has(n.id));
+        const newEdges = currentDsl.edges.filter(
+          (e) => !removedIds.has(e.source) && !removedIds.has(e.target),
+        );
+        onDslChange({ nodes: newNodes, edges: newEdges });
+      } else if (positionChanged) {
+        const newNodes = currentDsl.nodes.map((n) => {
+          const rfNode = updatedRfNodes.find((rn) => rn.id === n.id);
+          if (rfNode && rfNode.position) {
+            // Reverse transpose: display (x,y) → stored (y,x) with scale reversal
+            return {
+              ...n,
+              position: {
+                x: (rfNode.position.y - 20) / 0.5,
+                y: rfNode.position.x / 1.5,
+              },
+            };
+          }
+          return n;
+        });
+        onDslChange({ ...currentDsl, nodes: newNodes });
+      }
+    },
+    [nodes, onDslChange],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange) return;
+
+      const removeChanges = changes.filter((c) => c.type === 'remove');
+      if (removeChanges.length > 0) {
+        const removedIds = new Set(
+          removeChanges.map((c) => (c as any).id as string),
+        );
+        const newEdges = currentDsl.edges.filter((e) => !removedIds.has(e.id));
+        onDslChange({ ...currentDsl, edges: newEdges });
+      }
+    },
+    [onDslChange],
+  );
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      const currentDsl = dslRef.current;
+      if (!currentDsl || !onDslChange) return;
+
+      const newEdge = {
+        id: `e-${connection.source}-${connection.target}-${Date.now()}`,
+        source: connection.source!,
+        target: connection.target!,
+        sourceHandle: connection.sourceHandle || undefined,
+        label: undefined,
+      };
+      onDslChange({
+        ...currentDsl,
+        edges: [...currentDsl.edges, newEdge],
+      });
+    },
+    [onDslChange],
+  );
+
+  const onDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (event: React.DragEvent) => {
+      event.preventDefault();
+      const currentDsl = dslRef.current;
+      if (!onDslChange) return;
+
+      const data = event.dataTransfer.getData('application/workflow-node-type');
+      if (!data) return;
+
+      let nodeType: WorkflowNodeType;
+      try {
+        nodeType = JSON.parse(data);
+      } catch {
+        return;
+      }
+
+      const flowPosition = reactFlowInstance.screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      // Reverse transpose: display (x,y) → stored (y,x) with scale reversal
+      const position = {
+        x: (flowPosition.y - 20) / 0.5,
+        y: flowPosition.x / 1.5,
+      };
+
+      // Initialize config with default values from configSchema
+      const initialConfig: Record<string, any> = {};
+      const schema = nodeType.configSchema as any;
+      if (schema?.properties) {
+        for (const [key, prop] of Object.entries<any>(schema.properties)) {
+          if (prop.type === 'string') initialConfig[key] = '';
+          else if (prop.type === 'number') initialConfig[key] = undefined;
+          else if (prop.type === 'boolean') initialConfig[key] = false;
+          else if (prop.type === 'array') initialConfig[key] = [];
+          else if (prop.type === 'object') initialConfig[key] = {};
+        }
+      }
+
+      const newNode = {
+        id: crypto.randomUUID(),
+        type: nodeType.type,
+        label: nodeType.label,
+        position,
+        config: initialConfig,
+      };
+
+      const newDsl: WorkflowDSL = currentDsl
+        ? { ...currentDsl, nodes: [...currentDsl.nodes, newNode] }
+        : { nodes: [newNode], edges: [] };
+
+      onDslChange(newDsl);
+    },
+    [reactFlowInstance, onDslChange],
+  );
+
+  if (!dsl || dsl.nodes.length === 0) {
+    return (
+      <div
+        style={{ width: '100%', height: '100%' }}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+      >
+        <ReactFlow
+          nodes={[]}
+          edges={[]}
+          nodeTypes={nodeTypes}
+          fitView
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+        >
+          <Background />
+          <Controls showInteractive={false} />
+        </ReactFlow>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} style={{ width: '100%', height: '100%' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        nodesDraggable={!showExecutionStatus}
+        nodesConnectable={!showExecutionStatus}
+        elementsSelectable={true}
+        connectionMode={ConnectionMode.Loose}
+        deleteKeyCode={['Backspace', 'Delete']}
+        panOnScroll={true}
+        zoomOnScroll={false}
+        zoomOnPinch={false}
+        zoomOnDoubleClick={false}
+        onNodeClick={(_event, node) => {
+          onNodeClick?.(node.id);
+        }}
+        onPaneClick={() => {
+          onNodeClick?.('');
+        }}
+      >
+        <Background />
+        <Controls showInteractive={false} />
+        <MiniMap
+          nodeColor={(node) => {
+            const category = (node.data as any)?.category || 'ACTION';
+            const colors: Record<string, string> = {
+              TRIGGER: '#91caff',
+              ACTION: '#b7eb8f',
+              CONDITION: '#ffd591',
+              LOOP: '#d3adf7',
+              APPROVAL: '#ffa39e',
+              SUB_WORKFLOW: '#adc6ff',
+            };
+            return colors[category] || '#b7eb8f';
+          }}
+          nodeStrokeWidth={3}
+          maskColor="rgba(240, 240, 240, 0.6)"
+          zoomable
+          pannable
+        />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export function EnhancedFlowRenderer(props: EnhancedFlowRendererProps) {
+  return (
+    <ReactFlowProvider>
+      <EnhancedFlowCanvas {...props} />
+    </ReactFlowProvider>
+  );
+}

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

@@ -0,0 +1,223 @@
+import React, { memo } from 'react';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+import {
+  CheckCircleOutlined,
+  ClockCircleOutlined,
+  CloseCircleOutlined,
+  LoadingOutlined,
+} from '@ant-design/icons';
+
+const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
+  TRIGGER: { bg: '#e6f7ff', border: '#91caff' },
+  ACTION: { bg: '#f6ffed', border: '#b7eb8f' },
+  CONDITION: { bg: '#fff7e6', border: '#ffd591' },
+  LOOP: { bg: '#f9f0ff', border: '#d3adf7' },
+  APPROVAL: { bg: '#fff1f0', border: '#ffa39e' },
+  SUB_WORKFLOW: { bg: '#f0f5ff', border: '#adc6ff' },
+};
+
+// Status-specific background colors (overlay on top of category colors)
+const STATUS_COLORS: Record<string, string> = {
+  COMPLETED: '#f6ffed', // light green
+  RUNNING: '#e6f7ff', // light blue
+  FAILED: '#fff1f0', // light red
+  PENDING: '#fffbe6', // light yellow
+  NOT_EXECUTED: '#fafafa', // gray
+};
+
+export interface ExecutionStatusNodeData {
+  label: string;
+  category: string;
+  isSelected: boolean;
+  readonly?: boolean;
+  executionStatus?: 'PENDING' | 'RUNNING' | 'COMPLETED' | 'FAILED' | 'NOT_EXECUTED';
+  duration?: string; // e.g., "2.5s"
+  error?: string;
+  [key: string]: unknown;
+}
+
+function formatDuration(
+  startedAt: string | null,
+  finishedAt: string | null,
+): string {
+  if (!startedAt) return '';
+  const endTime = finishedAt ? new Date(finishedAt).getTime() : Date.now();
+  const ms = endTime - new Date(startedAt).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  const m = Math.floor(s / 60);
+  const rem = s % 60;
+  return rem > 0 ? `${m}m ${rem.toFixed(0)}s` : `${m}m`;
+}
+
+function getStatusIcon(status?: string) {
+  switch (status) {
+    case 'COMPLETED':
+      return <CheckCircleOutlined style={{ color: '#52c41a', fontSize: 16 }} />;
+    case 'RUNNING':
+      return <LoadingOutlined style={{ color: '#1677ff', fontSize: 16 }} />;
+    case 'FAILED':
+      return <CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: 16 }} />;
+    case 'NOT_EXECUTED':
+      return <ClockCircleOutlined style={{ color: '#bfbfbf', fontSize: 16 }} />;
+    case 'PENDING':
+    default:
+      return <ClockCircleOutlined style={{ color: '#faad14', fontSize: 16 }} />;
+  }
+}
+
+export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
+  const nodeData = data as ExecutionStatusNodeData;
+  const colors = CATEGORY_COLORS[nodeData.category] || CATEGORY_COLORS.ACTION;
+  const isNotExecuted = nodeData.executionStatus === 'NOT_EXECUTED';
+
+  // If there's execution status, use status color as background; otherwise use category color
+  const bgColor = nodeData.executionStatus
+    ? STATUS_COLORS[nodeData.executionStatus]
+    : colors.bg;
+
+  const borderColor = nodeData.isSelected
+    ? '#1677ff'
+    : isNotExecuted
+      ? '#d9d9d9'
+      : colors.border;
+  const borderStyle = nodeData.isSelected
+    ? '2px solid'
+    : isNotExecuted
+      ? '1.5px dashed'
+      : '1px solid';
+
+  return (
+    <div
+      style={{
+        background: bgColor,
+        border: `${borderStyle} ${borderColor}`,
+        borderRadius: 8,
+        padding: '8px 12px',
+        fontSize: 13,
+        minWidth: 140,
+        textAlign: 'center',
+        opacity: isNotExecuted ? 0.6 : 1,
+        boxShadow: nodeData.isSelected
+          ? '0 0 0 2px rgba(22,119,255,0.2)'
+          : !isNotExecuted && nodeData.executionStatus
+            ? '0 2px 8px rgba(0,0,0,0.15)'
+            : undefined,
+        position: 'relative',
+        transition: 'all 0.2s ease',
+      }}
+    >
+      {!nodeData.readonly && (
+        <Handle
+          type="target"
+          position={Position.Top}
+          style={{
+            width: 14,
+            height: 14,
+            background: '#fff',
+            border: '2px solid #555',
+            cursor: 'crosshair',
+          }}
+        />
+      )}
+      {nodeData.readonly && (
+        <Handle
+          type="target"
+          position={Position.Top}
+          style={{
+            width: 0,
+            height: 0,
+            border: 'none',
+            background: 'transparent',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+
+      {/* Status icon in top-right corner */}
+      {nodeData.executionStatus && (
+        <div
+          style={{
+            position: 'absolute',
+            top: -8,
+            right: -8,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 24,
+            height: 24,
+            background: '#fff',
+            borderRadius: '50%',
+            border: '1px solid #ddd',
+          }}
+        >
+          {getStatusIcon(nodeData.executionStatus)}
+        </div>
+      )}
+
+      <div style={{ fontWeight: 500, marginBottom: nodeData.duration ? 4 : 0 }}>
+        {nodeData.label}
+      </div>
+
+      {/* Duration badge */}
+      {nodeData.duration && (
+        <div
+          style={{
+            fontSize: 11,
+            color: '#666',
+            fontFamily: 'monospace',
+            marginBottom: 4,
+          }}
+        >
+          {nodeData.duration}
+        </div>
+      )}
+
+      {/* Execution status text */}
+      {nodeData.executionStatus && nodeData.executionStatus !== 'NOT_EXECUTED' && (
+        <div
+          style={{
+            fontSize: 11,
+            color: nodeData.executionStatus === 'FAILED' ? '#ff4d4f' : '#666',
+            fontWeight: 500,
+          }}
+        >
+          {nodeData.executionStatus === 'COMPLETED' && 'Completed'}
+          {nodeData.executionStatus === 'RUNNING' && 'Running...'}
+          {nodeData.executionStatus === 'FAILED' && 'Failed'}
+          {nodeData.executionStatus === 'PENDING' && 'Pending'}
+        </div>
+      )}
+
+      {!nodeData.readonly && (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          style={{
+            width: 14,
+            height: 14,
+            background: '#fff',
+            border: '2px solid #555',
+            cursor: 'crosshair',
+          }}
+        />
+      )}
+      {nodeData.readonly && (
+        <Handle
+          type="source"
+          position={Position.Bottom}
+          style={{
+            width: 0,
+            height: 0,
+            border: 'none',
+            background: 'transparent',
+            visibility: 'hidden',
+          }}
+        />
+      )}
+    </div>
+  );
+});
+
+ExecutionStatusNode.displayName = 'ExecutionStatusNode';

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

@@ -278,6 +278,7 @@ function FlowCanvas({
         elementsSelectable={true}
         connectionMode={ConnectionMode.Loose}
         deleteKeyCode={['Backspace', 'Delete']}
+        panOnScroll={true}
         zoomOnScroll={false}
         zoomOnPinch={false}
         zoomOnDoubleClick={false}

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

@@ -9,7 +9,6 @@ import {
   Spin,
   Steps,
   Tag,
-  Tooltip,
   Typography,
 } from 'antd';
 import {
@@ -23,6 +22,8 @@ import {
 } from '@ant-design/icons';
 import { useNavigate, useParams } from 'react-router-dom';
 import { customRequest } from 'helpers/http';
+import { EnhancedFlowRenderer } from './components/EnhancedFlowRenderer';
+import type { WorkflowDSL } from './types';
 
 const { Title, Text } = Typography;
 
@@ -67,6 +68,7 @@ interface InstanceDetail {
   createdAt: string;
   workflow: { name: string };
   nodeExecutions: NodeExecution[];
+  dsl?: WorkflowDSL;
 }
 
 function formatDuration(start: string | null, end: string | null): string {
@@ -102,6 +104,8 @@ export default function WorkflowInstanceDetailPage() {
   const [data, setData] = useState<InstanceDetail | null>(null);
   const [loading, setLoading] = useState(true);
   const [actionLoading, setActionLoading] = useState(false);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [viewMode, setViewMode] = useState<'timeline' | 'canvas'>('canvas');
 
   const fetchData = useCallback(async () => {
     if (!instanceId) return;
@@ -130,6 +134,13 @@ export default function WorkflowInstanceDetailPage() {
     }
   }, [data?.status, fetchData]);
 
+  // Fallback to timeline if no DSL available
+  useEffect(() => {
+    if (data && !data.dsl && viewMode === 'canvas') {
+      setViewMode('timeline');
+    }
+  }, [data, viewMode]);
+
   const handleCancel = async () => {
     setActionLoading(true);
     try {
@@ -193,6 +204,12 @@ export default function WorkflowInstanceDetailPage() {
   if (!data) return null;
 
   const statusCfg = STATUS_TAG[data.status] || STATUS_TAG.PENDING;
+  const selectedExecution = selectedNodeId
+    ? data.nodeExecutions.find((ne) => ne.nodeId === selectedNodeId)
+    : null;
+  const selectedDslNode = selectedNodeId && data.dsl
+    ? data.dsl.nodes.find((n) => n.id === selectedNodeId)
+    : null;
 
   return (
     <div
@@ -277,65 +294,388 @@ export default function WorkflowInstanceDetailPage() {
         </Descriptions>
       </Card>
 
-      {/* Node Execution Timeline */}
-      <Card title="Node Execution Timeline">
-        {data.nodeExecutions.length === 0 ? (
-          <Text type="secondary">No node executions recorded yet.</Text>
-        ) : (
-          <Steps
-            direction="vertical"
-            size="small"
-            current={-1}
-            items={data.nodeExecutions.map((ne) => {
-              const isApprovalPending =
-                ne.nodeType === 'approval' && ne.status === 'RUNNING';
-              return {
-                title: (
-                  <Space>
-                    <span>{ne.nodeLabel || ne.nodeId}</span>
-                    <Tag style={{ fontSize: 11 }}>{ne.nodeType}</Tag>
-                    {isApprovalPending && (
-                      <Space size={4}>
-                        <Button
-                          size="small"
-                          type="primary"
-                          onClick={() => handleApprove(ne.nodeId, true)}
-                          loading={actionLoading}
+      {/* Node Execution Timeline / Canvas View */}
+      <Card
+        title={
+          viewMode === 'timeline'
+            ? 'Node Execution Timeline'
+            : 'Flow Execution Visualization'
+        }
+        extra={
+          data.dsl ? (
+            <Space>
+              <Button.Group>
+                <Button
+                  type={viewMode === 'canvas' ? 'primary' : 'default'}
+                  onClick={() => {
+                    setViewMode('canvas');
+                    setSelectedNodeId(null);
+                  }}
+                >
+                  Canvas
+                </Button>
+                <Button
+                  type={viewMode === 'timeline' ? 'primary' : 'default'}
+                  onClick={() => {
+                    setViewMode('timeline');
+                    setSelectedNodeId(null);
+                  }}
+                >
+                  Timeline
+                </Button>
+              </Button.Group>
+            </Space>
+          ) : null
+        }
+      >
+        {viewMode === 'timeline' ? (
+          // Timeline View
+          <div style={{ display: 'flex', gap: 16 }}>
+            <div style={{ flex: 1 }}>
+              {data.nodeExecutions.length === 0 ? (
+                <Text type="secondary">No node executions recorded yet.</Text>
+              ) : (
+                <Steps
+                  direction="vertical"
+                  size="small"
+                  current={-1}
+                  items={data.nodeExecutions.map((ne) => {
+                    const isApprovalPending =
+                      ne.nodeType === 'approval' && ne.status === 'RUNNING';
+                    const isSelected = selectedNodeId === ne.nodeId;
+                    return {
+                      title: (
+                        <Space
+                          style={{ cursor: 'pointer' }}
+                          onClick={() => setSelectedNodeId(isSelected ? null : ne.nodeId)}
+                        >
+                          <span style={{ fontWeight: isSelected ? 600 : 400 }}>
+                            {ne.nodeLabel || ne.nodeId}
+                          </span>
+                          <Tag style={{ fontSize: 11 }}>{ne.nodeType}</Tag>
+                          {isApprovalPending && (
+                            <Space size={4}>
+                              <Button
+                                size="small"
+                                type="primary"
+                                onClick={(e) => { e.stopPropagation(); handleApprove(ne.nodeId, true); }}
+                                loading={actionLoading}
+                              >
+                                Approve
+                              </Button>
+                              <Button
+                                size="small"
+                                danger
+                                onClick={(e) => { e.stopPropagation(); handleApprove(ne.nodeId, false); }}
+                                loading={actionLoading}
+                              >
+                                Reject
+                              </Button>
+                            </Space>
+                          )}
+                        </Space>
+                      ),
+                      description: (
+                        <div
+                          style={{ fontSize: 12, color: '#666', cursor: 'pointer' }}
+                          onClick={() => setSelectedNodeId(isSelected ? null : ne.nodeId)}
                         >
-                          Approve
-                        </Button>
-                        <Button
+                          <span>
+                            Duration:{' '}
+                            {formatDuration(ne.startedAt, ne.finishedAt)}
+                          </span>
+                          {ne.error && (
+                            <div style={{ color: '#ff4d4f', marginTop: 4 }}>
+                              Error:{' '}
+                              {typeof ne.error === 'object'
+                                ? JSON.stringify(ne.error)
+                                : String(ne.error)}
+                            </div>
+                          )}
+                        </div>
+                      ),
+                      status: getStepStatus(ne.status),
+                      icon:
+                        ne.status === 'RUNNING' ? <LoadingOutlined /> : undefined,
+                    };
+                  })}
+                />
+              )}
+            </div>
+
+            {/* Node Detail Panel (shared with canvas view) */}
+            {selectedExecution && (
+              <div
+                style={{
+                  width: 320,
+                  borderLeft: '1px solid #f0f0f0',
+                  paddingLeft: 16,
+                  overflowY: 'auto',
+                }}
+              >
+                <div style={{ marginBottom: 16 }}>
+                  <Title level={5}>
+                    {selectedExecution.nodeLabel || selectedExecution.nodeId}
+                  </Title>
+                  <Tag
+                    color={
+                      selectedExecution.status === 'COMPLETED'
+                        ? 'green'
+                        : selectedExecution.status === 'RUNNING'
+                          ? 'blue'
+                          : selectedExecution.status === 'FAILED'
+                            ? 'red'
+                            : 'gold'
+                    }
+                  >
+                    {selectedExecution.status}
+                  </Tag>
+                </div>
+
+                <Descriptions column={1} size="small" style={{ marginBottom: 16 }}>
+                  <Descriptions.Item label="Node Type">
+                    {selectedExecution.nodeType}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="Started">
+                    {selectedExecution.startedAt
+                      ? new Date(selectedExecution.startedAt).toLocaleString()
+                      : '—'}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="Finished">
+                    {selectedExecution.finishedAt
+                      ? new Date(selectedExecution.finishedAt).toLocaleString()
+                      : '—'}
+                  </Descriptions.Item>
+                  <Descriptions.Item label="Duration">
+                    {formatDuration(selectedExecution.startedAt, selectedExecution.finishedAt)}
+                  </Descriptions.Item>
+                </Descriptions>
+
+                {selectedExecution.input && (
+                  <div style={{ marginBottom: 12 }}>
+                    <Text strong style={{ fontSize: 12 }}>Input:</Text>
+                    <pre style={{ background: '#fafafa', padding: 8, borderRadius: 4, fontSize: 11, maxHeight: 150, overflow: 'auto' }}>
+                      {JSON.stringify(selectedExecution.input, null, 2)}
+                    </pre>
+                  </div>
+                )}
+
+                {selectedExecution.output && (
+                  <div style={{ marginBottom: 12 }}>
+                    <Text strong style={{ fontSize: 12 }}>Output:</Text>
+                    <pre style={{ background: '#fafafa', padding: 8, borderRadius: 4, fontSize: 11, maxHeight: 150, overflow: 'auto' }}>
+                      {JSON.stringify(selectedExecution.output, null, 2)}
+                    </pre>
+                  </div>
+                )}
+
+                {selectedExecution.error && (
+                  <div style={{ marginBottom: 12 }}>
+                    <Text strong style={{ fontSize: 12, color: '#ff4d4f' }}>Error:</Text>
+                    <pre style={{ background: '#fff1f0', padding: 8, borderRadius: 4, fontSize: 11, color: '#ff4d4f', maxHeight: 150, overflow: 'auto' }}>
+                      {typeof selectedExecution.error === 'object'
+                        ? JSON.stringify(selectedExecution.error, null, 2)
+                        : String(selectedExecution.error)}
+                    </pre>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        ) : (
+          // Canvas View
+          <>
+            {data.dsl ? (
+              <div style={{ display: 'flex', gap: 16 }}>
+                {/* Canvas */}
+                <div style={{ flex: 1, height: 500, minHeight: 500 }}>
+                  <EnhancedFlowRenderer
+                    dsl={data.dsl}
+                    nodeExecutions={data.nodeExecutions}
+                    showExecutionStatus={true}
+                    selectedNodeId={selectedNodeId}
+                    readonly={true}
+                    onNodeClick={(nodeId) => setSelectedNodeId(nodeId)}
+                  />
+                </div>
+
+                {/* Node Detail Panel */}
+                {selectedNodeId && (
+                  <div
+                    style={{
+                      width: 320,
+                      borderLeft: '1px solid #f0f0f0',
+                      paddingLeft: 16,
+                      overflowY: 'auto',
+                    }}
+                  >
+                    {selectedExecution ? (
+                      <>
+                        <div style={{ marginBottom: 16 }}>
+                          <Title level={5}>
+                            {selectedExecution.nodeLabel ||
+                              selectedExecution.nodeId}
+                          </Title>
+                          <Tag
+                            color={
+                              selectedExecution.status === 'COMPLETED'
+                                ? 'green'
+                                : selectedExecution.status === 'RUNNING'
+                                  ? 'blue'
+                                  : selectedExecution.status === 'FAILED'
+                                    ? 'red'
+                                    : 'gold'
+                            }
+                          >
+                            {selectedExecution.status}
+                          </Tag>
+                        </div>
+
+                        <Descriptions
+                          column={1}
                           size="small"
-                          danger
-                          onClick={() => handleApprove(ne.nodeId, false)}
-                          loading={actionLoading}
+                          style={{ marginBottom: 16 }}
                         >
-                          Reject
-                        </Button>
-                      </Space>
-                    )}
-                  </Space>
-                ),
-                description: (
-                  <div style={{ fontSize: 12, color: '#666' }}>
-                    <span>
-                      Duration: {formatDuration(ne.startedAt, ne.finishedAt)}
-                    </span>
-                    {ne.error && (
-                      <div style={{ color: '#ff4d4f', marginTop: 4 }}>
-                        Error:{' '}
-                        {typeof ne.error === 'object'
-                          ? JSON.stringify(ne.error)
-                          : String(ne.error)}
+                          <Descriptions.Item label="Node Type">
+                            {selectedExecution.nodeType}
+                          </Descriptions.Item>
+                          <Descriptions.Item label="Started">
+                            {selectedExecution.startedAt
+                              ? new Date(
+                                  selectedExecution.startedAt,
+                                ).toLocaleString()
+                              : '—'}
+                          </Descriptions.Item>
+                          <Descriptions.Item label="Finished">
+                            {selectedExecution.finishedAt
+                              ? new Date(
+                                  selectedExecution.finishedAt,
+                                ).toLocaleString()
+                              : '—'}
+                          </Descriptions.Item>
+                          <Descriptions.Item label="Duration">
+                            {formatDuration(
+                              selectedExecution.startedAt,
+                              selectedExecution.finishedAt,
+                            )}
+                          </Descriptions.Item>
+                        </Descriptions>
+
+                        {selectedExecution.input && (
+                          <div style={{ marginBottom: 12 }}>
+                            <Text strong style={{ fontSize: 12 }}>
+                              Input:
+                            </Text>
+                            <pre
+                              style={{
+                                background: '#fafafa',
+                                padding: 8,
+                                borderRadius: 4,
+                                fontSize: 11,
+                                maxHeight: 150,
+                                overflow: 'auto',
+                              }}
+                            >
+                              {JSON.stringify(selectedExecution.input, null, 2)}
+                            </pre>
+                          </div>
+                        )}
+
+                        {selectedExecution.output && (
+                          <div style={{ marginBottom: 12 }}>
+                            <Text strong style={{ fontSize: 12 }}>
+                              Output:
+                            </Text>
+                            <pre
+                              style={{
+                                background: '#fafafa',
+                                padding: 8,
+                                borderRadius: 4,
+                                fontSize: 11,
+                                maxHeight: 150,
+                                overflow: 'auto',
+                              }}
+                            >
+                              {JSON.stringify(selectedExecution.output, null, 2)}
+                            </pre>
+                          </div>
+                        )}
+
+                        {selectedExecution.error && (
+                          <div style={{ marginBottom: 12 }}>
+                            <Text strong style={{ fontSize: 12, color: '#ff4d4f' }}>
+                              Error:
+                            </Text>
+                            <pre
+                              style={{
+                                background: '#fff1f0',
+                                padding: 8,
+                                borderRadius: 4,
+                                fontSize: 11,
+                                color: '#ff4d4f',
+                                maxHeight: 150,
+                                overflow: 'auto',
+                              }}
+                            >
+                              {typeof selectedExecution.error === 'object'
+                                ? JSON.stringify(selectedExecution.error, null, 2)
+                                : String(selectedExecution.error)}
+                            </pre>
+                          </div>
+                        )}
+
+                        {/* Approval actions */}
+                        {selectedExecution.nodeType === 'approval' &&
+                          selectedExecution.status === 'RUNNING' && (
+                            <Space style={{ width: '100%' }}>
+                              <Button
+                                type="primary"
+                                block
+                                onClick={() =>
+                                  handleApprove(selectedExecution.nodeId, true)
+                                }
+                                loading={actionLoading}
+                              >
+                                Approve
+                              </Button>
+                              <Button
+                                danger
+                                block
+                                onClick={() =>
+                                  handleApprove(selectedExecution.nodeId, false)
+                                }
+                                loading={actionLoading}
+                              >
+                                Reject
+                              </Button>
+                            </Space>
+                          )}
+                      </>
+                    ) : selectedDslNode ? (
+                      <div>
+                        <div style={{ marginBottom: 16 }}>
+                          <Title level={5}>{selectedDslNode.label}</Title>
+                          <Tag color="default">Not Executed</Tag>
+                        </div>
+                        <Descriptions column={1} size="small">
+                          <Descriptions.Item label="Node Type">
+                            {selectedDslNode.type}
+                          </Descriptions.Item>
+                          <Descriptions.Item label="Status">
+                            <Text type="secondary">Waiting for execution</Text>
+                          </Descriptions.Item>
+                        </Descriptions>
                       </div>
-                    )}
+                    ) : null}
                   </div>
-                ),
-                status: getStepStatus(ne.status),
-                icon: ne.status === 'RUNNING' ? <LoadingOutlined /> : undefined,
-              };
-            })}
-          />
+                )}
+              </div>
+            ) : (
+              <Text type="secondary">
+                Workflow DSL not available for visualization.
+              </Text>
+            )}
+          </>
         )}
       </Card>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gadmin2n/schematics",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "description": "Gadmin - modern, fast, powerful node.js web framework (@schematics)",
   "main": "dist/index.js",
   "files": [