@foresthubai/workflow-builder 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/LICENSE +661 -661
  2. package/NOTICE +16 -16
  3. package/README.md +110 -93
  4. package/dist/components/ui/command.d.ts +2 -2
  5. package/dist/components/ui/input.d.ts +1 -1
  6. package/dist/components/ui/resizable.d.ts +1 -1
  7. package/dist/components/ui/textarea.d.ts +1 -1
  8. package/dist/graph/BaseNode.js +10 -10
  9. package/dist/graph/reactFlowRegistry.d.ts.map +1 -1
  10. package/dist/lib/utils.d.ts +3 -0
  11. package/dist/lib/utils.d.ts.map +1 -0
  12. package/dist/lib/utils.js +6 -0
  13. package/dist/lib/utils.js.map +1 -0
  14. package/dist/toolbars/CanvasTabsToolbar.d.ts +11 -0
  15. package/dist/toolbars/CanvasTabsToolbar.d.ts.map +1 -0
  16. package/dist/toolbars/CanvasTabsToolbar.js +101 -0
  17. package/dist/toolbars/CanvasTabsToolbar.js.map +1 -0
  18. package/package.json +2 -2
  19. package/src/BuilderLayout.tsx +345 -345
  20. package/src/Canvas.tsx +261 -261
  21. package/src/CanvasEditor.tsx +142 -142
  22. package/src/CanvasTabsToolbar.tsx +176 -176
  23. package/src/RightConfigPanel.tsx +266 -266
  24. package/src/WorkflowBuilder.tsx +412 -412
  25. package/src/cn.ts +6 -6
  26. package/src/components/ui/add-button.tsx +39 -39
  27. package/src/components/ui/alert-dialog.tsx +141 -141
  28. package/src/components/ui/alert.tsx +59 -59
  29. package/src/components/ui/badge.tsx +36 -36
  30. package/src/components/ui/button.tsx +85 -85
  31. package/src/components/ui/card.tsx +79 -79
  32. package/src/components/ui/checkbox.tsx +28 -28
  33. package/src/components/ui/collapsible.tsx +9 -9
  34. package/src/components/ui/command.tsx +153 -153
  35. package/src/components/ui/delete-button.tsx +23 -23
  36. package/src/components/ui/dialog.tsx +125 -125
  37. package/src/components/ui/dropdown-menu.tsx +198 -198
  38. package/src/components/ui/input.tsx +55 -55
  39. package/src/components/ui/label.tsx +24 -24
  40. package/src/components/ui/readonly-banner.tsx +15 -15
  41. package/src/components/ui/resizable.tsx +43 -43
  42. package/src/components/ui/scroll-area.tsx +102 -102
  43. package/src/components/ui/select.tsx +160 -160
  44. package/src/components/ui/separator.tsx +29 -29
  45. package/src/components/ui/switch.tsx +27 -27
  46. package/src/components/ui/textarea.tsx +51 -51
  47. package/src/components/ui/toast.tsx +127 -127
  48. package/src/components/ui/toaster.tsx +33 -33
  49. package/src/components/ui/toggle-group.tsx +59 -59
  50. package/src/components/ui/toggle.tsx +43 -43
  51. package/src/components/ui/tooltip.tsx +32 -32
  52. package/src/dialogs/NodePickerDialog.tsx +84 -84
  53. package/src/dialogs/ValidationDialog.tsx +184 -184
  54. package/src/graph/BaseNode.tsx +557 -557
  55. package/src/graph/CustomEdge.tsx +185 -185
  56. package/src/graph/CustomNode.tsx +16 -16
  57. package/src/graph/FunctionCallNode.tsx +30 -30
  58. package/src/graph/PortHandle.tsx +189 -189
  59. package/src/graph/reactFlowRegistry.ts +26 -26
  60. package/src/hooks/use-toast.ts +125 -125
  61. package/src/hooks/useAvailableVariables.ts +20 -20
  62. package/src/hooks/useCanvasHistory.ts +22 -22
  63. package/src/hooks/useCanvasTabs.ts +168 -168
  64. package/src/hooks/useFunctionDiagnosticsSync.ts +40 -40
  65. package/src/hooks/useFunctionRegistry.ts +26 -26
  66. package/src/hooks/useFunctions.ts +44 -44
  67. package/src/hooks/useGraph.ts +161 -161
  68. package/src/hooks/useNodeDefinitions.ts +82 -82
  69. package/src/hooks/useParamErrors.ts +26 -26
  70. package/src/hooks/useResolvedTheme.ts +30 -30
  71. package/src/hooks/useResourceDiagnosticsSync.ts +58 -58
  72. package/src/hooks/useSuppressThemeTransition.ts +79 -79
  73. package/src/hooks/useWorkflowSerialization.ts +127 -127
  74. package/src/i18n/index.ts +53 -53
  75. package/src/i18n/locales/de.json +501 -501
  76. package/src/i18n/locales/en.json +557 -557
  77. package/src/index.ts +27 -27
  78. package/src/inputs/ExpressionInput.tsx +297 -297
  79. package/src/inputs/ParameterEditor.tsx +515 -515
  80. package/src/inputs/PortSection.tsx +144 -144
  81. package/src/panels/BuilderSidebar.tsx +301 -301
  82. package/src/panels/ChannelConfigPanel.tsx +49 -49
  83. package/src/panels/ChannelsPanel.tsx +28 -28
  84. package/src/panels/DebugConsolePanel.tsx +73 -73
  85. package/src/panels/DebugContextPanel.tsx +77 -77
  86. package/src/panels/DebugExternalIOPanel.tsx +180 -180
  87. package/src/panels/DiagnosticsPanel.tsx +170 -170
  88. package/src/panels/EdgeConfigPanel.tsx +104 -104
  89. package/src/panels/FunctionConfigPanel.tsx +179 -179
  90. package/src/panels/FunctionListPanel.tsx +45 -45
  91. package/src/panels/MemoryConfigPanel.tsx +55 -55
  92. package/src/panels/MemoryPanel.tsx +40 -40
  93. package/src/panels/ModelConfigPanel.tsx +41 -41
  94. package/src/panels/ModelsPanel.tsx +36 -36
  95. package/src/panels/NodeConfigPanel.tsx +630 -630
  96. package/src/panels/NodeLibrary.tsx +288 -288
  97. package/src/panels/ResourceConfigPanel.tsx +132 -132
  98. package/src/panels/ResourceListPanel.tsx +113 -113
  99. package/src/panels/VariableConfigPanel.tsx +161 -161
  100. package/src/panels/VariablesPanel.tsx +145 -145
  101. package/src/stores/canvasStore.test.ts +44 -44
  102. package/src/stores/canvasStore.ts +245 -245
  103. package/src/stores/debugStore.ts +74 -74
  104. package/src/stores/diagnosticsStore.ts +130 -130
  105. package/src/stores/editorStore.ts +202 -202
  106. package/src/styles/index.css +526 -526
  107. package/src/utils/categoryConstants.ts +26 -26
  108. package/src/utils/channelOperations.ts +86 -86
  109. package/src/utils/connectionRules.ts +137 -137
  110. package/src/utils/functionOperations.ts +179 -179
  111. package/src/utils/graphOperations.ts +550 -550
  112. package/src/utils/history.ts +207 -207
  113. package/src/utils/memoryOperations.ts +57 -57
  114. package/src/utils/migrateFunctionNodes.ts +107 -107
  115. package/src/utils/modelOperations.ts +55 -55
  116. package/src/utils/paramDisplay.ts +71 -71
  117. package/src/utils/resourceHelpers.ts +32 -32
  118. package/src/utils/translation.ts +28 -28
  119. package/src/utils/variableOperations.ts +75 -75
  120. package/tailwind-preset.ts +166 -166
@@ -1,74 +1,74 @@
1
- import { create } from "zustand";
2
-
3
- // ---------------------------------------------------------------------------
4
- // Session Phase State Machine
5
- // ---------------------------------------------------------------------------
6
-
7
- export type DebugSessionPhase =
8
- | { status: "inactive" }
9
- | { status: "building"; abortController: AbortController }
10
- | { status: "idle"; sessionId: string }
11
- | { status: "paused"; sessionId: string; cursorNodeId: string }
12
- | { status: "stepping"; sessionId: string; cursorNodeId: string }
13
- | { status: "error"; message: string };
14
-
15
- // ---------------------------------------------------------------------------
16
- // Console
17
- // ---------------------------------------------------------------------------
18
-
19
- export interface ConsoleEntry {
20
- id: number;
21
- timestamp: number;
22
- type: "message" | "error" | "system";
23
- text: string;
24
- }
25
-
26
- // ---------------------------------------------------------------------------
27
- // Store
28
- // ---------------------------------------------------------------------------
29
-
30
- interface DebugState {
31
- phase: DebugSessionPhase;
32
- /** Workflow variable values — client-owned, sent with each step request */
33
- context: Record<string, unknown>;
34
- console: ConsoleEntry[];
35
- nextConsoleId: number;
36
-
37
- // Actions
38
- setPhase: (phase: DebugSessionPhase) => void;
39
- setContext: (ctx: Record<string, unknown>) => void;
40
- updateContextVar: (key: string, value: unknown) => void;
41
- appendConsole: (type: ConsoleEntry["type"], text: string) => void;
42
- clearConsole: () => void;
43
- reset: () => void;
44
- }
45
-
46
- export const useDebugStore = create<DebugState>((set) => ({
47
- phase: { status: "inactive" },
48
- context: {},
49
- console: [],
50
- nextConsoleId: 0,
51
-
52
- setPhase: (phase) => set({ phase }),
53
-
54
- setContext: (ctx) => set({ context: ctx }),
55
-
56
- updateContextVar: (key, value) =>
57
- set((s) => ({ context: { ...s.context, [key]: value } })),
58
-
59
- appendConsole: (type, text) =>
60
- set((s) => ({
61
- console: [...s.console, { id: s.nextConsoleId, timestamp: Date.now(), type, text }],
62
- nextConsoleId: s.nextConsoleId + 1,
63
- })),
64
-
65
- clearConsole: () => set({ console: [], nextConsoleId: 0 }),
66
-
67
- reset: () =>
68
- set({
69
- phase: { status: "inactive" },
70
- context: {},
71
- console: [],
72
- nextConsoleId: 0,
73
- }),
74
- }));
1
+ import { create } from "zustand";
2
+
3
+ // ---------------------------------------------------------------------------
4
+ // Session Phase State Machine
5
+ // ---------------------------------------------------------------------------
6
+
7
+ export type DebugSessionPhase =
8
+ | { status: "inactive" }
9
+ | { status: "building"; abortController: AbortController }
10
+ | { status: "idle"; sessionId: string }
11
+ | { status: "paused"; sessionId: string; cursorNodeId: string }
12
+ | { status: "stepping"; sessionId: string; cursorNodeId: string }
13
+ | { status: "error"; message: string };
14
+
15
+ // ---------------------------------------------------------------------------
16
+ // Console
17
+ // ---------------------------------------------------------------------------
18
+
19
+ export interface ConsoleEntry {
20
+ id: number;
21
+ timestamp: number;
22
+ type: "message" | "error" | "system";
23
+ text: string;
24
+ }
25
+
26
+ // ---------------------------------------------------------------------------
27
+ // Store
28
+ // ---------------------------------------------------------------------------
29
+
30
+ interface DebugState {
31
+ phase: DebugSessionPhase;
32
+ /** Workflow variable values — client-owned, sent with each step request */
33
+ context: Record<string, unknown>;
34
+ console: ConsoleEntry[];
35
+ nextConsoleId: number;
36
+
37
+ // Actions
38
+ setPhase: (phase: DebugSessionPhase) => void;
39
+ setContext: (ctx: Record<string, unknown>) => void;
40
+ updateContextVar: (key: string, value: unknown) => void;
41
+ appendConsole: (type: ConsoleEntry["type"], text: string) => void;
42
+ clearConsole: () => void;
43
+ reset: () => void;
44
+ }
45
+
46
+ export const useDebugStore = create<DebugState>((set) => ({
47
+ phase: { status: "inactive" },
48
+ context: {},
49
+ console: [],
50
+ nextConsoleId: 0,
51
+
52
+ setPhase: (phase) => set({ phase }),
53
+
54
+ setContext: (ctx) => set({ context: ctx }),
55
+
56
+ updateContextVar: (key, value) =>
57
+ set((s) => ({ context: { ...s.context, [key]: value } })),
58
+
59
+ appendConsole: (type, text) =>
60
+ set((s) => ({
61
+ console: [...s.console, { id: s.nextConsoleId, timestamp: Date.now(), type, text }],
62
+ nextConsoleId: s.nextConsoleId + 1,
63
+ })),
64
+
65
+ clearConsole: () => set({ console: [], nextConsoleId: 0 }),
66
+
67
+ reset: () =>
68
+ set({
69
+ phase: { status: "inactive" },
70
+ context: {},
71
+ console: [],
72
+ nextConsoleId: 0,
73
+ }),
74
+ }));
@@ -1,130 +1,130 @@
1
- /**
2
- * diagnosticsStore.ts
3
- *
4
- * This Zustand store manages diagnostics (errors and warnings) for the currently active canvas
5
- * in the workflow builder. It holds diagnostics for nodes and edges, keyed by their IDs.
6
- *
7
- * Key design points:
8
- * - Only diagnostics for the active canvas are stored (flat, not per-canvas).
9
- * - Diagnostics are written by node/edge components via useEffect, and cleared on unmount.
10
- * - On canvas switch, the store is cleared and repopulated for the new canvas.
11
- * - Used for real-time UI feedback (badges, warnings) in the workflow builder.
12
- * - For full-project validation (e.g., before code generation), use validateAllCanvases() in utils/diagnostics.ts.
13
- *
14
- * See docs/diagnostics.md for full architecture and lifecycle details.
15
- */
16
- import { create } from "zustand";
17
- import type { Diagnostic } from "@foresthubai/workflow-core/diagnostics";
18
-
19
- interface DiagnosticsState {
20
- byNodeId: Record<string, Diagnostic[]>;
21
- byEdgeId: Record<string, Diagnostic[]>;
22
- /**
23
- * Channels are project-scoped, not canvas-scoped, so this slot lives
24
- * here regardless of the active canvas. Written by ChannelDiagnosticsSync,
25
- * which is mounted once at the workflow builder root.
26
- */
27
- byChannelId: Record<string, Diagnostic[]>;
28
- /**
29
- * Memory primitives are project-scoped like channels. Written by
30
- * MemoryDiagnosticsSync, mounted once at the workflow builder root.
31
- */
32
- byMemoryId: Record<string, Diagnostic[]>;
33
- /**
34
- * Declared models are project-scoped like channels/memory. Written by
35
- * ModelDiagnosticsSync, mounted once at the workflow builder root.
36
- */
37
- byModelId: Record<string, Diagnostic[]>;
38
- /**
39
- * Functions are project-scoped declarations. Keyed by function id. Written by
40
- * the resource diagnostics sync, mounted once at the workflow builder root.
41
- */
42
- byFunctionId: Record<string, Diagnostic[]>;
43
- setNodeDiagnostics: (nodeId: string, diags: Diagnostic[]) => void;
44
- clearNodeDiagnostics: (nodeId: string) => void;
45
- setEdgeDiagnostics: (edgeId: string, diags: Diagnostic[]) => void;
46
- clearEdgeDiagnostics: (edgeId: string) => void;
47
- setChannelDiagnostics: (channelId: string, diags: Diagnostic[]) => void;
48
- clearChannelDiagnostics: (channelId: string) => void;
49
- setMemoryDiagnostics: (memoryId: string, diags: Diagnostic[]) => void;
50
- clearMemoryDiagnostics: (memoryId: string) => void;
51
- setModelDiagnostics: (modelId: string, diags: Diagnostic[]) => void;
52
- clearModelDiagnostics: (modelId: string) => void;
53
- setFunctionDiagnostics: (functionId: string, diags: Diagnostic[]) => void;
54
- clearFunctionDiagnostics: (functionId: string) => void;
55
- }
56
-
57
- export const useDiagnosticsStore = create<DiagnosticsState>((set) => ({
58
- byNodeId: {},
59
- byEdgeId: {},
60
- byChannelId: {},
61
- byMemoryId: {},
62
- byModelId: {},
63
- byFunctionId: {},
64
-
65
- setNodeDiagnostics: (nodeId, diags) =>
66
- set((state) => ({
67
- byNodeId: { ...state.byNodeId, [nodeId]: diags },
68
- })),
69
-
70
- clearNodeDiagnostics: (nodeId) =>
71
- set((state) => {
72
- const { [nodeId]: _, ...rest } = state.byNodeId;
73
- return { byNodeId: rest };
74
- }),
75
-
76
- setEdgeDiagnostics: (edgeId, diags) =>
77
- set((state) => ({
78
- byEdgeId: { ...state.byEdgeId, [edgeId]: diags },
79
- })),
80
-
81
- clearEdgeDiagnostics: (edgeId) =>
82
- set((state) => {
83
- const { [edgeId]: _, ...rest } = state.byEdgeId;
84
- return { byEdgeId: rest };
85
- }),
86
-
87
- setChannelDiagnostics: (channelId, diags) =>
88
- set((state) => ({
89
- byChannelId: { ...state.byChannelId, [channelId]: diags },
90
- })),
91
-
92
- clearChannelDiagnostics: (channelId) =>
93
- set((state) => {
94
- const { [channelId]: _, ...rest } = state.byChannelId;
95
- return { byChannelId: rest };
96
- }),
97
-
98
- setMemoryDiagnostics: (memoryId, diags) =>
99
- set((state) => ({
100
- byMemoryId: { ...state.byMemoryId, [memoryId]: diags },
101
- })),
102
-
103
- clearMemoryDiagnostics: (memoryId) =>
104
- set((state) => {
105
- const { [memoryId]: _, ...rest } = state.byMemoryId;
106
- return { byMemoryId: rest };
107
- }),
108
-
109
- setModelDiagnostics: (modelId, diags) =>
110
- set((state) => ({
111
- byModelId: { ...state.byModelId, [modelId]: diags },
112
- })),
113
-
114
- clearModelDiagnostics: (modelId) =>
115
- set((state) => {
116
- const { [modelId]: _, ...rest } = state.byModelId;
117
- return { byModelId: rest };
118
- }),
119
-
120
- setFunctionDiagnostics: (functionId, diags) =>
121
- set((state) => ({
122
- byFunctionId: { ...state.byFunctionId, [functionId]: diags },
123
- })),
124
-
125
- clearFunctionDiagnostics: (functionId) =>
126
- set((state) => {
127
- const { [functionId]: _, ...rest } = state.byFunctionId;
128
- return { byFunctionId: rest };
129
- }),
130
- }));
1
+ /**
2
+ * diagnosticsStore.ts
3
+ *
4
+ * This Zustand store manages diagnostics (errors and warnings) for the currently active canvas
5
+ * in the workflow builder. It holds diagnostics for nodes and edges, keyed by their IDs.
6
+ *
7
+ * Key design points:
8
+ * - Only diagnostics for the active canvas are stored (flat, not per-canvas).
9
+ * - Diagnostics are written by node/edge components via useEffect, and cleared on unmount.
10
+ * - On canvas switch, the store is cleared and repopulated for the new canvas.
11
+ * - Used for real-time UI feedback (badges, warnings) in the workflow builder.
12
+ * - For full-project validation (e.g., before code generation), use validateAllCanvases() in utils/diagnostics.ts.
13
+ *
14
+ * See docs/diagnostics.md for full architecture and lifecycle details.
15
+ */
16
+ import { create } from "zustand";
17
+ import type { Diagnostic } from "@foresthubai/workflow-core/diagnostics";
18
+
19
+ interface DiagnosticsState {
20
+ byNodeId: Record<string, Diagnostic[]>;
21
+ byEdgeId: Record<string, Diagnostic[]>;
22
+ /**
23
+ * Channels are project-scoped, not canvas-scoped, so this slot lives
24
+ * here regardless of the active canvas. Written by ChannelDiagnosticsSync,
25
+ * which is mounted once at the workflow builder root.
26
+ */
27
+ byChannelId: Record<string, Diagnostic[]>;
28
+ /**
29
+ * Memory primitives are project-scoped like channels. Written by
30
+ * MemoryDiagnosticsSync, mounted once at the workflow builder root.
31
+ */
32
+ byMemoryId: Record<string, Diagnostic[]>;
33
+ /**
34
+ * Declared models are project-scoped like channels/memory. Written by
35
+ * ModelDiagnosticsSync, mounted once at the workflow builder root.
36
+ */
37
+ byModelId: Record<string, Diagnostic[]>;
38
+ /**
39
+ * Functions are project-scoped declarations. Keyed by function id. Written by
40
+ * the resource diagnostics sync, mounted once at the workflow builder root.
41
+ */
42
+ byFunctionId: Record<string, Diagnostic[]>;
43
+ setNodeDiagnostics: (nodeId: string, diags: Diagnostic[]) => void;
44
+ clearNodeDiagnostics: (nodeId: string) => void;
45
+ setEdgeDiagnostics: (edgeId: string, diags: Diagnostic[]) => void;
46
+ clearEdgeDiagnostics: (edgeId: string) => void;
47
+ setChannelDiagnostics: (channelId: string, diags: Diagnostic[]) => void;
48
+ clearChannelDiagnostics: (channelId: string) => void;
49
+ setMemoryDiagnostics: (memoryId: string, diags: Diagnostic[]) => void;
50
+ clearMemoryDiagnostics: (memoryId: string) => void;
51
+ setModelDiagnostics: (modelId: string, diags: Diagnostic[]) => void;
52
+ clearModelDiagnostics: (modelId: string) => void;
53
+ setFunctionDiagnostics: (functionId: string, diags: Diagnostic[]) => void;
54
+ clearFunctionDiagnostics: (functionId: string) => void;
55
+ }
56
+
57
+ export const useDiagnosticsStore = create<DiagnosticsState>((set) => ({
58
+ byNodeId: {},
59
+ byEdgeId: {},
60
+ byChannelId: {},
61
+ byMemoryId: {},
62
+ byModelId: {},
63
+ byFunctionId: {},
64
+
65
+ setNodeDiagnostics: (nodeId, diags) =>
66
+ set((state) => ({
67
+ byNodeId: { ...state.byNodeId, [nodeId]: diags },
68
+ })),
69
+
70
+ clearNodeDiagnostics: (nodeId) =>
71
+ set((state) => {
72
+ const { [nodeId]: _, ...rest } = state.byNodeId;
73
+ return { byNodeId: rest };
74
+ }),
75
+
76
+ setEdgeDiagnostics: (edgeId, diags) =>
77
+ set((state) => ({
78
+ byEdgeId: { ...state.byEdgeId, [edgeId]: diags },
79
+ })),
80
+
81
+ clearEdgeDiagnostics: (edgeId) =>
82
+ set((state) => {
83
+ const { [edgeId]: _, ...rest } = state.byEdgeId;
84
+ return { byEdgeId: rest };
85
+ }),
86
+
87
+ setChannelDiagnostics: (channelId, diags) =>
88
+ set((state) => ({
89
+ byChannelId: { ...state.byChannelId, [channelId]: diags },
90
+ })),
91
+
92
+ clearChannelDiagnostics: (channelId) =>
93
+ set((state) => {
94
+ const { [channelId]: _, ...rest } = state.byChannelId;
95
+ return { byChannelId: rest };
96
+ }),
97
+
98
+ setMemoryDiagnostics: (memoryId, diags) =>
99
+ set((state) => ({
100
+ byMemoryId: { ...state.byMemoryId, [memoryId]: diags },
101
+ })),
102
+
103
+ clearMemoryDiagnostics: (memoryId) =>
104
+ set((state) => {
105
+ const { [memoryId]: _, ...rest } = state.byMemoryId;
106
+ return { byMemoryId: rest };
107
+ }),
108
+
109
+ setModelDiagnostics: (modelId, diags) =>
110
+ set((state) => ({
111
+ byModelId: { ...state.byModelId, [modelId]: diags },
112
+ })),
113
+
114
+ clearModelDiagnostics: (modelId) =>
115
+ set((state) => {
116
+ const { [modelId]: _, ...rest } = state.byModelId;
117
+ return { byModelId: rest };
118
+ }),
119
+
120
+ setFunctionDiagnostics: (functionId, diags) =>
121
+ set((state) => ({
122
+ byFunctionId: { ...state.byFunctionId, [functionId]: diags },
123
+ })),
124
+
125
+ clearFunctionDiagnostics: (functionId) =>
126
+ set((state) => {
127
+ const { [functionId]: _, ...rest } = state.byFunctionId;
128
+ return { byFunctionId: rest };
129
+ }),
130
+ }));