@foresthubai/workflow-builder 0.4.3 → 0.4.4

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 -110
  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/package.json +2 -2
  11. package/src/BuilderLayout.tsx +345 -345
  12. package/src/Canvas.tsx +261 -261
  13. package/src/CanvasEditor.tsx +142 -142
  14. package/src/CanvasTabsToolbar.tsx +176 -176
  15. package/src/RightConfigPanel.tsx +266 -266
  16. package/src/WorkflowBuilder.tsx +408 -408
  17. package/src/cn.ts +6 -6
  18. package/src/components/ui/add-button.tsx +39 -39
  19. package/src/components/ui/alert-dialog.tsx +141 -141
  20. package/src/components/ui/alert.tsx +59 -59
  21. package/src/components/ui/badge.tsx +36 -36
  22. package/src/components/ui/button.tsx +85 -85
  23. package/src/components/ui/card.tsx +79 -79
  24. package/src/components/ui/checkbox.tsx +28 -28
  25. package/src/components/ui/collapsible.tsx +9 -9
  26. package/src/components/ui/command.tsx +153 -153
  27. package/src/components/ui/delete-button.tsx +23 -23
  28. package/src/components/ui/dialog.tsx +125 -125
  29. package/src/components/ui/dropdown-menu.tsx +198 -198
  30. package/src/components/ui/input.tsx +55 -55
  31. package/src/components/ui/label.tsx +24 -24
  32. package/src/components/ui/readonly-banner.tsx +15 -15
  33. package/src/components/ui/resizable.tsx +43 -43
  34. package/src/components/ui/scroll-area.tsx +102 -102
  35. package/src/components/ui/select.tsx +160 -160
  36. package/src/components/ui/separator.tsx +29 -29
  37. package/src/components/ui/switch.tsx +27 -27
  38. package/src/components/ui/textarea.tsx +51 -51
  39. package/src/components/ui/toast.tsx +127 -127
  40. package/src/components/ui/toaster.tsx +33 -33
  41. package/src/components/ui/toggle-group.tsx +59 -59
  42. package/src/components/ui/toggle.tsx +43 -43
  43. package/src/components/ui/tooltip.tsx +32 -32
  44. package/src/dialogs/NodePickerDialog.tsx +84 -84
  45. package/src/dialogs/ValidationDialog.tsx +184 -184
  46. package/src/graph/BaseNode.tsx +557 -557
  47. package/src/graph/CustomEdge.tsx +185 -185
  48. package/src/graph/CustomNode.tsx +16 -16
  49. package/src/graph/FunctionCallNode.tsx +30 -30
  50. package/src/graph/PortHandle.tsx +189 -189
  51. package/src/graph/reactFlowRegistry.ts +26 -26
  52. package/src/hooks/use-toast.ts +125 -125
  53. package/src/hooks/useAvailableVariables.ts +20 -20
  54. package/src/hooks/useCanvasHistory.ts +22 -22
  55. package/src/hooks/useCanvasTabs.ts +168 -168
  56. package/src/hooks/useFunctionDiagnosticsSync.ts +40 -40
  57. package/src/hooks/useFunctionRegistry.ts +26 -26
  58. package/src/hooks/useFunctions.ts +44 -44
  59. package/src/hooks/useGraph.ts +161 -161
  60. package/src/hooks/useNodeDefinitions.ts +82 -82
  61. package/src/hooks/useParamErrors.ts +26 -26
  62. package/src/hooks/useResolvedTheme.ts +30 -30
  63. package/src/hooks/useResourceDiagnosticsSync.ts +58 -58
  64. package/src/hooks/useSuppressThemeTransition.ts +79 -79
  65. package/src/hooks/useWorkflowSerialization.ts +141 -141
  66. package/src/i18n/index.ts +53 -53
  67. package/src/i18n/locales/de.json +501 -501
  68. package/src/i18n/locales/en.json +557 -557
  69. package/src/index.ts +27 -27
  70. package/src/inputs/ExpressionInput.tsx +297 -297
  71. package/src/inputs/ParameterEditor.tsx +515 -515
  72. package/src/inputs/PortSection.tsx +144 -144
  73. package/src/panels/BuilderSidebar.tsx +301 -301
  74. package/src/panels/ChannelConfigPanel.tsx +49 -49
  75. package/src/panels/ChannelsPanel.tsx +28 -28
  76. package/src/panels/DebugConsolePanel.tsx +73 -73
  77. package/src/panels/DebugContextPanel.tsx +77 -77
  78. package/src/panels/DebugExternalIOPanel.tsx +180 -180
  79. package/src/panels/DiagnosticsPanel.tsx +170 -170
  80. package/src/panels/EdgeConfigPanel.tsx +104 -104
  81. package/src/panels/FunctionConfigPanel.tsx +179 -179
  82. package/src/panels/FunctionListPanel.tsx +45 -45
  83. package/src/panels/MemoryConfigPanel.tsx +55 -55
  84. package/src/panels/MemoryPanel.tsx +40 -40
  85. package/src/panels/ModelConfigPanel.tsx +41 -41
  86. package/src/panels/ModelsPanel.tsx +36 -36
  87. package/src/panels/NodeConfigPanel.tsx +630 -630
  88. package/src/panels/NodeLibrary.tsx +288 -288
  89. package/src/panels/ResourceConfigPanel.tsx +132 -132
  90. package/src/panels/ResourceListPanel.tsx +113 -113
  91. package/src/panels/VariableConfigPanel.tsx +161 -161
  92. package/src/panels/VariablesPanel.tsx +145 -145
  93. package/src/stores/canvasStore.test.ts +44 -44
  94. package/src/stores/canvasStore.ts +245 -245
  95. package/src/stores/debugStore.ts +74 -74
  96. package/src/stores/diagnosticsStore.ts +130 -130
  97. package/src/stores/editorStore.ts +190 -190
  98. package/src/styles/index.css +526 -526
  99. package/src/utils/categoryConstants.ts +26 -26
  100. package/src/utils/channelOperations.ts +86 -86
  101. package/src/utils/connectionRules.ts +137 -137
  102. package/src/utils/functionOperations.ts +179 -179
  103. package/src/utils/graphOperations.ts +550 -550
  104. package/src/utils/history.ts +207 -207
  105. package/src/utils/memoryOperations.ts +57 -57
  106. package/src/utils/migrateFunctionNodes.ts +107 -107
  107. package/src/utils/modelOperations.ts +55 -55
  108. package/src/utils/paramDisplay.ts +71 -71
  109. package/src/utils/resourceHelpers.ts +32 -32
  110. package/src/utils/translation.ts +28 -28
  111. package/src/utils/variableOperations.ts +75 -75
  112. package/tailwind-preset.ts +166 -166
  113. package/dist/lib/utils.d.ts +0 -3
  114. package/dist/lib/utils.d.ts.map +0 -1
  115. package/dist/lib/utils.js +0 -6
  116. package/dist/lib/utils.js.map +0 -1
  117. package/dist/toolbars/CanvasTabsToolbar.d.ts +0 -11
  118. package/dist/toolbars/CanvasTabsToolbar.d.ts.map +0 -1
  119. package/dist/toolbars/CanvasTabsToolbar.js +0 -101
  120. package/dist/toolbars/CanvasTabsToolbar.js.map +0 -1
@@ -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
+ }));