@gadmin2n/schematics 0.0.96 → 0.0.98

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

@@ -13,14 +13,46 @@ const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
 export interface CustomNodeData {
   label: string;
   category: string;
+  type?: string;
+  outputs?: string[];
   isSelected: boolean;
   readonly?: boolean;
   [key: string]: unknown;
 }
 
+const VISIBLE_HANDLE_STYLE: React.CSSProperties = {
+  width: 14,
+  height: 14,
+  background: '#fff',
+  border: '2px solid #555',
+  cursor: 'crosshair',
+};
+
+const HIDDEN_HANDLE_STYLE: React.CSSProperties = {
+  width: 0,
+  height: 0,
+  border: 'none',
+  background: 'transparent',
+  visibility: 'hidden',
+};
+
+const BRANCH_LABEL_STYLE: React.CSSProperties = {
+  position: 'absolute',
+  bottom: -18,
+  fontSize: 11,
+  color: '#8c8c8c',
+  pointerEvents: 'none',
+  whiteSpace: 'nowrap',
+};
+
 export const CustomNode = memo(({ data }: NodeProps) => {
   const nodeData = data as CustomNodeData;
   const colors = CATEGORY_COLORS[nodeData.category] || CATEGORY_COLORS.ACTION;
+  const handleStyle = nodeData.readonly
+    ? HIDDEN_HANDLE_STYLE
+    : VISIBLE_HANDLE_STYLE;
+  const outputs = (nodeData.outputs ?? []) as string[];
+  const multiOut = outputs.length > 1;
 
   return (
     <div
@@ -37,60 +69,43 @@ export const CustomNode = memo(({ data }: NodeProps) => {
         boxShadow: nodeData.isSelected
           ? '0 0 0 2px rgba(22,119,255,0.2)'
           : undefined,
+        position: 'relative',
       }}
     >
-      {!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',
-          }}
-        />
-      )}
+      <Handle type="target" position={Position.Top} style={handleStyle} />
       <div>{nodeData.label}</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',
-          }}
-        />
+      {multiOut ? (
+        <>
+          {outputs.map((id, idx) => (
+            <Handle
+              key={id}
+              id={id}
+              type="source"
+              position={Position.Bottom}
+              style={{
+                ...handleStyle,
+                left: `${((idx + 1) / (outputs.length + 1)) * 100}%`,
+              }}
+            />
+          ))}
+          {!nodeData.readonly && (
+            <>
+              {outputs.map((id, idx) => (
+                <span
+                  key={id}
+                  style={{
+                    ...BRANCH_LABEL_STYLE,
+                    left: `${((idx + 1) / (outputs.length + 1)) * 100 - 5}%`,
+                  }}
+                >
+                  {id}
+                </span>
+              ))}
+            </>
+          )}
+        </>
+      ) : (
+        <Handle type="source" position={Position.Bottom} style={handleStyle} />
       )}
     </div>
   );

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

@@ -18,6 +18,7 @@ import '@xyflow/react/dist/style.css';
 import { CustomNode } from './CustomNode';
 import { ExecutionStatusNode } from './ExecutionStatusNode';
 import type { WorkflowDSL, WorkflowNodeType } from '../types';
+import { resolveOutputs } from '../utils/resolveOutputs';
 
 interface NodeExecution {
   id: string;
@@ -36,7 +37,10 @@ const nodeTypes = { custom: CustomNode, executionStatus: ExecutionStatusNode };
 
 interface EnhancedFlowRendererProps {
   dsl: WorkflowDSL | null;
-  nodeTypeMap?: Record<string, { category: string; icon: string }>;
+  nodeTypeMap?: Record<
+    string,
+    { category: string; icon: string; outputs?: string[] | null }
+  >;
   selectedNodeId?: string | null;
   readonly?: boolean;
   onNodeClick?: (nodeId: string) => void;
@@ -104,6 +108,8 @@ function EnhancedFlowCanvas({
       const nodeData: any = {
         label: n.label,
         category,
+        type: n.type,
+        outputs: resolveOutputs(n, nodeTypeMap?.[n.type]),
         isSelected: n.id === selectedNodeId,
         readonly: !!readonly,
       };

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

@@ -28,6 +28,8 @@ const STATUS_COLORS: Record<string, string> = {
 export interface ExecutionStatusNodeData {
   label: string;
   category: string;
+  type?: string;
+  outputs?: string[];
   isSelected: boolean;
   readonly?: boolean;
   executionStatus?:
@@ -196,32 +198,70 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
           </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',
-          }}
-        />
-      )}
+      {(() => {
+        const handleStyle: React.CSSProperties = nodeData.readonly
+          ? {
+              width: 0,
+              height: 0,
+              border: 'none',
+              background: 'transparent',
+              visibility: 'hidden',
+            }
+          : {
+              width: 14,
+              height: 14,
+              background: '#fff',
+              border: '2px solid #555',
+              cursor: 'crosshair',
+            };
+        const outputs = (nodeData.outputs ?? []) as string[];
+        const multiOut = outputs.length > 1;
+        if (multiOut) {
+          return (
+            <>
+              {outputs.map((id, idx) => (
+                <Handle
+                  key={id}
+                  id={id}
+                  type="source"
+                  position={Position.Bottom}
+                  style={{
+                    ...handleStyle,
+                    left: `${((idx + 1) / (outputs.length + 1)) * 100}%`,
+                  }}
+                />
+              ))}
+              {!nodeData.readonly && (
+                <>
+                  {outputs.map((id, idx) => (
+                    <span
+                      key={id}
+                      style={{
+                        position: 'absolute',
+                        bottom: -18,
+                        left: `${((idx + 1) / (outputs.length + 1)) * 100 - 5}%`,
+                        fontSize: 11,
+                        color: '#8c8c8c',
+                        pointerEvents: 'none',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {id}
+                    </span>
+                  ))}
+                </>
+              )}
+            </>
+          );
+        }
+        return (
+          <Handle
+            type="source"
+            position={Position.Bottom}
+            style={handleStyle}
+          />
+        );
+      })()}
     </div>
   );
 });

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

@@ -17,12 +17,16 @@ import {
 import '@xyflow/react/dist/style.css';
 import { CustomNode } from './CustomNode';
 import type { WorkflowDSL, WorkflowNodeType } from '../types';
+import { resolveOutputs } from '../utils/resolveOutputs';
 
 const nodeTypes = { custom: CustomNode };
 
 interface Props {
   dsl: WorkflowDSL | null;
-  nodeTypeMap?: Record<string, { category: string; icon: string }>;
+  nodeTypeMap?: Record<
+    string,
+    { category: string; icon: string; outputs?: string[] | null }
+  >;
   selectedNodeId?: string | null;
   readonly?: boolean;
   onNodeClick?: (nodeId: string) => void;
@@ -61,6 +65,8 @@ function FlowCanvas({
         data: {
           label: n.label,
           category,
+          type: n.type,
+          outputs: resolveOutputs(n, nodeTypeMap?.[n.type]),
           isSelected: n.id === selectedNodeId,
           readonly: !!readonly,
         },

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

@@ -79,9 +79,16 @@ export default function WorkflowEditorPage() {
   const [aiPromptText, setAiPromptText] = useState('');
 
   const nodeTypeMap = useMemo(() => {
-    const map: Record<string, { category: string; icon: string }> = {};
+    const map: Record<
+      string,
+      { category: string; icon: string; outputs?: string[] | null }
+    > = {};
     for (const nt of nodeTypes) {
-      map[nt.type] = { category: nt.category, icon: nt.icon };
+      map[nt.type] = {
+        category: nt.category,
+        icon: nt.icon,
+        outputs: nt.outputs,
+      };
     }
     return map;
   }, [nodeTypes]);

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/hooks/useWorkflowAgent.ts

@@ -118,6 +118,35 @@ export function useWorkflowAgent({ nodeTypes }: UseWorkflowAgentOptions) {
       )
       .join('\n');
 
+    const enumeratedHandleRules = nodeTypes
+      .filter((nt) => Array.isArray(nt.outputs) && nt.outputs.length > 0)
+      .map(
+        (nt) =>
+          `  - ${nt.type}: sourceHandle MUST be one of [${nt
+            .outputs!.map((o) => `'${o}'`)
+            .join(', ')}]`,
+      )
+      .join('\n');
+
+    const dynamicHandleRules = nodeTypes
+      .filter((nt) => nt.outputs === null)
+      .map(
+        (nt) =>
+          `  - ${nt.type}: sourceHandle MUST match a value listed in this node's config.cases[].value`,
+      )
+      .join('\n');
+
+    const noHandleTypes = nodeTypes
+      .filter((nt) => Array.isArray(nt.outputs) && nt.outputs.length === 0)
+      .map((nt) => nt.type)
+      .join(', ');
+
+    const handleSection = `
+Source handle rules (each edge's sourceHandle MUST match the source node's outputs):
+${enumeratedHandleRules}
+${dynamicHandleRules}
+For ALL OTHER node types (${noHandleTypes}), edges MUST NOT include the sourceHandle field — omit it entirely.`;
+
     return `You are a workflow DSL generator. Output ONLY a JSON object wrapped in \`\`\`json code block.
 
 Available node types:
@@ -131,6 +160,7 @@ DSL format:
 
 Each node: { "id": "uuid", "type": "node_type", "label": "Display Name", "position": {"x": number, "y": number}, "config": {...} }
 Each edge: { "id": "uuid", "source": "nodeId", "target": "nodeId", "sourceHandle?": "string", "label?": "string" }
+${handleSection}
 
 Position nodes using: x = vertical order (increment by 250 for each sequential step), y = horizontal lane (0 for single-path flows; use different y values spaced by 200 only for parallel branches).`;
   }, [nodeTypes]);

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

@@ -81,9 +81,16 @@ export default function WorkflowShowPage() {
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
 
   const nodeTypeMap = useMemo(() => {
-    const map: Record<string, { category: string; icon: string }> = {};
+    const map: Record<
+      string,
+      { category: string; icon: string; outputs?: string[] | null }
+    > = {};
     for (const nt of nodeTypes) {
-      map[nt.type] = { category: nt.category, icon: nt.icon };
+      map[nt.type] = {
+        category: nt.category,
+        icon: nt.icon,
+        outputs: nt.outputs,
+      };
     }
     return map;
   }, [nodeTypes]);

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

@@ -83,6 +83,7 @@ export interface WorkflowNodeType {
   configSchema: Record<string, any>;
   inputSchema: Record<string, any>;
   outputSchema: Record<string, any>;
+  outputs: string[] | null;
 }
 
 export interface NodeInstanceAgentOutput {

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/utils/resolveOutputs.ts

@@ -0,0 +1,27 @@
+import type { WorkflowNode } from '../types';
+
+/**
+ * Resolve the list of named output handles for a node at render time.
+ *
+ * - `switch` nodes derive their handles from `config.cases[].value` so the
+ *   canvas reflects user-edited cases without round-tripping through the
+ *   nodeType meta.
+ * - All other node types use the declared `outputs` from the WorkflowNodeType
+ *   API (Phase 4); a missing or empty list means "render a single anonymous
+ *   handle", which is what the canvas falls back to.
+ */
+export function resolveOutputs(
+  node: WorkflowNode,
+  nodeTypeMeta: { outputs?: string[] | null } | undefined,
+): string[] {
+  if (node.type === 'switch') {
+    const cases = (node.config as any)?.cases as
+      | Array<{ value?: string }>
+      | undefined;
+    if (!Array.isArray(cases)) return [];
+    return cases
+      .map((c) => c?.value)
+      .filter((v): v is string => typeof v === 'string' && v.length > 0);
+  }
+  return nodeTypeMeta?.outputs ?? [];
+}

package/package.json

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