Workflows & Templates Library with Workspace Autosave - #14
Conversation
- Create workflows.ts containing default agent templates (ReAct Loop, HTTP Router, Translation HITL) and persistence storage helpers. - Create WorkflowsManager.tsx component for searching, loading, duplicating, importing/exporting, and deleting workflows. - Integrate the Workflows Library and seamless layout/config autosaving into pages/Index.tsx. - Add comprehensive test coverage in workflows.test.tsx with passing results.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
📝 WalkthroughWalkthroughAdds a workflows library with built-in templates, saved custom workflows, localStorage persistence, import/export, editing, duplication, deletion, and canvas loading/autosave integration. ChangesWorkflow library
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
frontend/src/test/workflows.test.tsx (1)
65-202: 📐 Maintainability & Code Quality | 🔵 TrivialSolid coverage of create/duplicate/load/search; delete and import paths are untested.
Given
handleDeleteSelectedandhandleImportSubmitinWorkflowsManager.tsxcarry the riskiest logic (deleting the active workflow, import id collisions), consider adding tests for: deleting the currently-active custom workflow, and importing a workflow whoseidcollides with an existing template/custom id.Want me to draft these test cases?
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/test/workflows.test.tsx` around lines 65 - 202, Extend the “WorkflowsManager Component UI & User Actions” tests to cover handleDeleteSelected and handleImportSubmit: add a test that deletes the active custom workflow and verifies the updated workflows and selection behavior, plus a test importing a workflow whose id collides with an existing template or custom workflow and verifies the collision is resolved without overwriting the existing entry.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/flow/workflows.ts`:
- Around line 315-326: Update loadWorkflows to validate each parsed array entry
before returning it, requiring the expected workflow shape including a valid id
and nodes and edges collections. Return only validated SavedWorkflow entries,
and fall back to an empty array when the stored value is not an array or
contains invalid items.
In `@frontend/src/flow/WorkflowsManager.tsx`:
- Around line 135-143: Throttle or debounce updates from handleUpdateField so
name and description edits are consolidated before calling onWorkflowsChange,
instead of persisting on every keystroke. Preserve immediate in-memory field
updates while ensuring the parent saveWorkflows flow receives batched changes at
the established autosave interval.
- Around line 154-223: Update handleImportSubmit so imported workflows always
receive a newly generated id via cryptoId(), ignoring any supplied w.id or
parsed.id to prevent template namespace and existing-id collisions. Apply this
in both the parsed.workflows loop and single-workflow branch; leave name
conflict handling unchanged.
- Around line 118-127: Update handleDeleteSelected so deleting the selected
custom workflow also handles the active canvas workflow: when selectedItem.id
equals activeWorkflowId, clear or replace the active workflow through the
existing parent callback/state mechanism and reset the canvas to the newly
selected remaining workflow or template. Preserve the current list filtering and
selection behavior for non-active deletions.
In `@frontend/src/pages/Index.tsx`:
- Around line 186-208: Update the autosave effect associated with nodes, edges,
and activeWorkflowId so continuous drag updates do not synchronously persist
workflows to localStorage on every change. Consolidate or debounce these updates
while preserving autosave for the active non-template workflow, and ensure
saveWorkflows is not triggered for each intermediate nodes/edges change.
- Around line 71-117: Resolve the effective workflow ID once before initializing
workflow state, falling back to template-react-loop when the persisted ID is
missing, deleted, or invalid. Initialize activeWorkflowId with that resolved ID
so it matches the workflow loaded into the canvas, and update the nodes and
edges initializers to use the same resolved workflow rather than duplicating
lookups. Remove the setActiveWorkflowId side effect from the nodes initializer
and persist the resolved ID through the appropriate post-initialization flow.
---
Nitpick comments:
In `@frontend/src/test/workflows.test.tsx`:
- Around line 65-202: Extend the “WorkflowsManager Component UI & User Actions”
tests to cover handleDeleteSelected and handleImportSubmit: add a test that
deletes the active custom workflow and verifies the updated workflows and
selection behavior, plus a test importing a workflow whose id collides with an
existing template or custom workflow and verifies the collision is resolved
without overwriting the existing entry.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: d908da53-6bcc-4c95-b595-71ff37fbb506
⛔ Files ignored due to path filters (1)
dev_server.logis excluded by!**/*.log
📒 Files selected for processing (4)
frontend/src/flow/WorkflowsManager.tsxfrontend/src/flow/workflows.tsfrontend/src/pages/Index.tsxfrontend/src/test/workflows.test.tsx
| export function loadWorkflows(): SavedWorkflow[] { | ||
| try { | ||
| const raw = localStorage.getItem(WORKFLOWS_STORAGE_KEY); | ||
| if (raw) { | ||
| const parsed = JSON.parse(raw); | ||
| if (Array.isArray(parsed)) return parsed; | ||
| } | ||
| } catch { | ||
| /* ignore */ | ||
| } | ||
| return []; | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
Validate item shape, not just array-ness.
loadWorkflows only checks Array.isArray(parsed); individual entries aren't checked for id/nodes/edges. Corrupted or hand-edited localStorage would flow straight into Node<AgentNodeData>[] state and likely crash React Flow rendering downstream.
🛡️ Proposed guard
export function loadWorkflows(): SavedWorkflow[] {
try {
const raw = localStorage.getItem(WORKFLOWS_STORAGE_KEY);
if (raw) {
const parsed = JSON.parse(raw);
- if (Array.isArray(parsed)) return parsed;
+ if (Array.isArray(parsed)) {
+ return parsed.filter(
+ (w) => w && typeof w.id === "string" && Array.isArray(w.nodes) && Array.isArray(w.edges)
+ );
+ }
}
} catch {
/* ignore */
}
return [];
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export function loadWorkflows(): SavedWorkflow[] { | |
| try { | |
| const raw = localStorage.getItem(WORKFLOWS_STORAGE_KEY); | |
| if (raw) { | |
| const parsed = JSON.parse(raw); | |
| if (Array.isArray(parsed)) return parsed; | |
| } | |
| } catch { | |
| /* ignore */ | |
| } | |
| return []; | |
| } | |
| export function loadWorkflows(): SavedWorkflow[] { | |
| try { | |
| const raw = localStorage.getItem(WORKFLOWS_STORAGE_KEY); | |
| if (raw) { | |
| const parsed = JSON.parse(raw); | |
| if (Array.isArray(parsed)) { | |
| return parsed.filter( | |
| (w) => w && typeof w.id === "string" && Array.isArray(w.nodes) && Array.isArray(w.edges) | |
| ); | |
| } | |
| } | |
| } catch { | |
| /* ignore */ | |
| } | |
| return []; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/flow/workflows.ts` around lines 315 - 326, Update loadWorkflows
to validate each parsed array entry before returning it, requiring the expected
workflow shape including a valid id and nodes and edges collections. Return only
validated SavedWorkflow entries, and fall back to an empty array when the stored
value is not an array or contains invalid items.
| const handleDeleteSelected = () => { | ||
| if (!selectedItem || selectedItem.type !== "custom") return; | ||
| if (!confirm(`Are you sure you want to delete custom workflow "${selectedItem.name}"?`)) return; | ||
|
|
||
| const next = workflows.filter((w) => w.id !== selectedItem.id); | ||
| onWorkflowsChange(next); | ||
|
|
||
| const remaining = [...next.map((w) => w.id), ...TEMPLATES.map((t) => t.id)]; | ||
| setSelectedId(remaining[0] ?? null); | ||
| }; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Deleting the active workflow leaves the canvas on stale, now-orphaned content.
If selectedItem.id === activeWorkflowId (deleting the workflow currently loaded in the canvas), this only updates workflows; the canvas keeps rendering the deleted workflow's nodes/edges and activeWorkflowId in the parent is never cleared. Any further edits then get silently dropped, since Index.tsx's autosave effect maps over workflows looking for w.id === activeWorkflowId, which no longer exists.
🐛 Proposed fix
const handleDeleteSelected = () => {
if (!selectedItem || selectedItem.type !== "custom") return;
if (!confirm(`Are you sure you want to delete custom workflow "${selectedItem.name}"?`)) return;
const next = workflows.filter((w) => w.id !== selectedItem.id);
onWorkflowsChange(next);
const remaining = [...next.map((w) => w.id), ...TEMPLATES.map((t) => t.id)];
- setSelectedId(remaining[0] ?? null);
+ setSelectedId(remaining[0] ?? null);
+
+ if (selectedItem.id === activeWorkflowId) {
+ const fallback =
+ next[0] ?? TEMPLATES.find((t) => t.id === "template-react-loop") ?? TEMPLATES[0];
+ if (fallback) onSelectWorkflow(fallback.id, fallback.nodes, fallback.edges);
+ }
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleDeleteSelected = () => { | |
| if (!selectedItem || selectedItem.type !== "custom") return; | |
| if (!confirm(`Are you sure you want to delete custom workflow "${selectedItem.name}"?`)) return; | |
| const next = workflows.filter((w) => w.id !== selectedItem.id); | |
| onWorkflowsChange(next); | |
| const remaining = [...next.map((w) => w.id), ...TEMPLATES.map((t) => t.id)]; | |
| setSelectedId(remaining[0] ?? null); | |
| }; | |
| const handleDeleteSelected = () => { | |
| if (!selectedItem || selectedItem.type !== "custom") return; | |
| if (!confirm(`Are you sure you want to delete custom workflow "${selectedItem.name}"?`)) return; | |
| const next = workflows.filter((w) => w.id !== selectedItem.id); | |
| onWorkflowsChange(next); | |
| const remaining = [...next.map((w) => w.id), ...TEMPLATES.map((t) => t.id)]; | |
| setSelectedId(remaining[0] ?? null); | |
| if (selectedItem.id === activeWorkflowId) { | |
| const fallback = | |
| next[0] ?? TEMPLATES.find((t) => t.id === "template-react-loop") ?? TEMPLATES[0]; | |
| if (fallback) onSelectWorkflow(fallback.id, fallback.nodes, fallback.edges); | |
| } | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/flow/WorkflowsManager.tsx` around lines 118 - 127, Update
handleDeleteSelected so deleting the selected custom workflow also handles the
active canvas workflow: when selectedItem.id equals activeWorkflowId, clear or
replace the active workflow through the existing parent callback/state mechanism
and reset the canvas to the newly selected remaining workflow or template.
Preserve the current list filtering and selection behavior for non-active
deletions.
| const handleUpdateField = (patch: Partial<SavedWorkflow>) => { | ||
| if (!selectedItem || selectedItem.type !== "custom") return; | ||
| const next = workflows.map((w) => | ||
| w.id === selectedItem.id | ||
| ? { ...w, ...patch, updatedAt: new Date().toISOString() } | ||
| : w | ||
| ); | ||
| onWorkflowsChange(next); | ||
| }; |
There was a problem hiding this comment.
🚀 Performance & Scalability | 🟡 Minor | ⚡ Quick win
Every keystroke in name/description triggers a localStorage write.
handleUpdateField calls onWorkflowsChange on each onChange, which the parent persists immediately via its saveWorkflows effect. Noted for consolidation with the canvas autosave frequency issue in Index.tsx.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/flow/WorkflowsManager.tsx` around lines 135 - 143, Throttle or
debounce updates from handleUpdateField so name and description edits are
consolidated before calling onWorkflowsChange, instead of persisting on every
keystroke. Preserve immediate in-memory field updates while ensuring the parent
saveWorkflows flow receives batched changes at the established autosave
interval.
| const handleImportSubmit = () => { | ||
| setImportError(null); | ||
| try { | ||
| const parsed = JSON.parse(importText.trim()); | ||
| let importedWorkflows: SavedWorkflow[] = []; | ||
|
|
||
| if (parsed && typeof parsed === "object") { | ||
| if (Array.isArray(parsed.workflows)) { | ||
| parsed.workflows.forEach((w: any) => { | ||
| if ( | ||
| w && | ||
| typeof w === "object" && | ||
| typeof w.name === "string" && | ||
| Array.isArray(w.nodes) && | ||
| Array.isArray(w.edges) | ||
| ) { | ||
| importedWorkflows.push({ | ||
| id: w.id || cryptoId(), | ||
| name: w.name, | ||
| description: w.description || "Imported custom workflow.", | ||
| nodes: w.nodes, | ||
| edges: w.edges, | ||
| updatedAt: w.updatedAt || new Date().toISOString(), | ||
| }); | ||
| } | ||
| }); | ||
| } else if ( | ||
| typeof parsed.name === "string" && | ||
| Array.isArray(parsed.nodes) && | ||
| Array.isArray(parsed.edges) | ||
| ) { | ||
| // Import a single workflow | ||
| importedWorkflows.push({ | ||
| id: parsed.id || cryptoId(), | ||
| name: parsed.name, | ||
| description: parsed.description || "Imported custom workflow.", | ||
| nodes: parsed.nodes, | ||
| edges: parsed.edges, | ||
| updatedAt: parsed.updatedAt || new Date().toISOString(), | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| if (importedWorkflows.length === 0) { | ||
| throw new Error("No valid workflows found in the JSON."); | ||
| } | ||
|
|
||
| // Merge and update names if conflict | ||
| const nextWorkflows = [...workflows]; | ||
| importedWorkflows.forEach((iw) => { | ||
| let uniqueName = iw.name; | ||
| let index = 1; | ||
| while (nextWorkflows.some((w) => w.name === uniqueName)) { | ||
| uniqueName = `${iw.name} (Imported ${index++})`; | ||
| } | ||
| nextWorkflows.push({ | ||
| ...iw, | ||
| name: uniqueName, | ||
| }); | ||
| }); | ||
|
|
||
| onWorkflowsChange(nextWorkflows); | ||
| setShowImportModal(false); | ||
| setImportText(""); | ||
| setSelectedId(importedWorkflows[0].id); | ||
| alert(`Successfully imported ${importedWorkflows.length} custom workflow(s).`); | ||
| } catch (e) { | ||
| setImportError(e instanceof Error ? e.message : "Invalid JSON syntax"); | ||
| } | ||
| }; |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Imported workflow id is trusted without collision/namespace checks.
w.id || cryptoId() / parsed.id || cryptoId() accept an attacker- or user-supplied id verbatim. Index.tsx relies on the invariant that any id starting with "template-" is a read-only built-in template (activeId.startsWith("template-") → TEMPLATES.find(...), e.g. lines 80-84 and 102-104 in frontend/src/pages/Index.tsx). If an imported workflow's id happens to equal or start with "template-" (e.g. "template-react-loop"), it collides with a real template: Index.tsx will silently load the built-in template's nodes/edges instead of the imported custom workflow whenever that id becomes active, and the autosave effect will never persist edits to it (since it's treated as a template). Only name uniqueness is checked here — id uniqueness/namespace is not.
Additionally, only name/nodes/edges presence is validated; individual node/edge shape (id, position, data) isn't, so malformed imports can still reach React Flow.
🛡️ Proposed fix: always mint a fresh id on import
- importedWorkflows.push({
- id: w.id || cryptoId(),
+ importedWorkflows.push({
+ id: cryptoId(),
name: w.name,
description: w.description || "Imported custom workflow.",
nodes: w.nodes,
edges: w.edges,
updatedAt: w.updatedAt || new Date().toISOString(),
});Apply the same change to the single-workflow branch (parsed.id || cryptoId()).
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const handleImportSubmit = () => { | |
| setImportError(null); | |
| try { | |
| const parsed = JSON.parse(importText.trim()); | |
| let importedWorkflows: SavedWorkflow[] = []; | |
| if (parsed && typeof parsed === "object") { | |
| if (Array.isArray(parsed.workflows)) { | |
| parsed.workflows.forEach((w: any) => { | |
| if ( | |
| w && | |
| typeof w === "object" && | |
| typeof w.name === "string" && | |
| Array.isArray(w.nodes) && | |
| Array.isArray(w.edges) | |
| ) { | |
| importedWorkflows.push({ | |
| id: w.id || cryptoId(), | |
| name: w.name, | |
| description: w.description || "Imported custom workflow.", | |
| nodes: w.nodes, | |
| edges: w.edges, | |
| updatedAt: w.updatedAt || new Date().toISOString(), | |
| }); | |
| } | |
| }); | |
| } else if ( | |
| typeof parsed.name === "string" && | |
| Array.isArray(parsed.nodes) && | |
| Array.isArray(parsed.edges) | |
| ) { | |
| // Import a single workflow | |
| importedWorkflows.push({ | |
| id: parsed.id || cryptoId(), | |
| name: parsed.name, | |
| description: parsed.description || "Imported custom workflow.", | |
| nodes: parsed.nodes, | |
| edges: parsed.edges, | |
| updatedAt: parsed.updatedAt || new Date().toISOString(), | |
| }); | |
| } | |
| } | |
| if (importedWorkflows.length === 0) { | |
| throw new Error("No valid workflows found in the JSON."); | |
| } | |
| // Merge and update names if conflict | |
| const nextWorkflows = [...workflows]; | |
| importedWorkflows.forEach((iw) => { | |
| let uniqueName = iw.name; | |
| let index = 1; | |
| while (nextWorkflows.some((w) => w.name === uniqueName)) { | |
| uniqueName = `${iw.name} (Imported ${index++})`; | |
| } | |
| nextWorkflows.push({ | |
| ...iw, | |
| name: uniqueName, | |
| }); | |
| }); | |
| onWorkflowsChange(nextWorkflows); | |
| setShowImportModal(false); | |
| setImportText(""); | |
| setSelectedId(importedWorkflows[0].id); | |
| alert(`Successfully imported ${importedWorkflows.length} custom workflow(s).`); | |
| } catch (e) { | |
| setImportError(e instanceof Error ? e.message : "Invalid JSON syntax"); | |
| } | |
| }; | |
| const handleImportSubmit = () => { | |
| setImportError(null); | |
| try { | |
| const parsed = JSON.parse(importText.trim()); | |
| let importedWorkflows: SavedWorkflow[] = []; | |
| if (parsed && typeof parsed === "object") { | |
| if (Array.isArray(parsed.workflows)) { | |
| parsed.workflows.forEach((w: any) => { | |
| if ( | |
| w && | |
| typeof w === "object" && | |
| typeof w.name === "string" && | |
| Array.isArray(w.nodes) && | |
| Array.isArray(w.edges) | |
| ) { | |
| importedWorkflows.push({ | |
| id: cryptoId(), | |
| name: w.name, | |
| description: w.description || "Imported custom workflow.", | |
| nodes: w.nodes, | |
| edges: w.edges, | |
| updatedAt: w.updatedAt || new Date().toISOString(), | |
| }); | |
| } | |
| }); | |
| } else if ( | |
| typeof parsed.name === "string" && | |
| Array.isArray(parsed.nodes) && | |
| Array.isArray(parsed.edges) | |
| ) { | |
| // Import a single workflow | |
| importedWorkflows.push({ | |
| id: cryptoId(), | |
| name: parsed.name, | |
| description: parsed.description || "Imported custom workflow.", | |
| nodes: parsed.nodes, | |
| edges: parsed.edges, | |
| updatedAt: parsed.updatedAt || new Date().toISOString(), | |
| }); | |
| } | |
| } | |
| if (importedWorkflows.length === 0) { | |
| throw new Error("No valid workflows found in the JSON."); | |
| } | |
| // Merge and update names if conflict | |
| const nextWorkflows = [...workflows]; | |
| importedWorkflows.forEach((iw) => { | |
| let uniqueName = iw.name; | |
| let index = 1; | |
| while (nextWorkflows.some((w) => w.name === uniqueName)) { | |
| uniqueName = `${iw.name} (Imported ${index++})`; | |
| } | |
| nextWorkflows.push({ | |
| ...iw, | |
| name: uniqueName, | |
| }); | |
| }); | |
| onWorkflowsChange(nextWorkflows); | |
| setShowImportModal(false); | |
| setImportText(""); | |
| setSelectedId(importedWorkflows[0].id); | |
| alert(`Successfully imported ${importedWorkflows.length} custom workflow(s).`); | |
| } catch (e) { | |
| setImportError(e instanceof Error ? e.message : "Invalid JSON syntax"); | |
| } | |
| }; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/flow/WorkflowsManager.tsx` around lines 154 - 223, Update
handleImportSubmit so imported workflows always receive a newly generated id via
cryptoId(), ignoring any supplied w.id or parsed.id to prevent template
namespace and existing-id collisions. Apply this in both the parsed.workflows
loop and single-workflow branch; leave name conflict handling unchanged.
| // Workflows state | ||
| const [workflows, setWorkflows] = useState<SavedWorkflow[]>(() => loadWorkflows()); | ||
| const [activeWorkflowId, setActiveWorkflowIdState] = useState<string | null>(() => getActiveWorkflowId()); | ||
| const [showWorkflows, setShowWorkflows] = useState(false); | ||
|
|
||
| // Initialize nodes and edges with either the active workflow, the first custom workflow, the ReAct template, or fallback to exampleNodes | ||
| const [nodes, setNodes] = useState<Node<AgentNodeData>[]>(() => { | ||
| const activeId = getActiveWorkflowId(); | ||
| if (activeId) { | ||
| if (activeId.startsWith("template-")) { | ||
| const foundTpl = TEMPLATES.find((t) => t.id === activeId); | ||
| if (foundTpl) return JSON.parse(JSON.stringify(foundTpl.nodes)); | ||
| } else { | ||
| const list = loadWorkflows(); | ||
| const found = list.find((w) => w.id === activeId); | ||
| if (found) return found.nodes; | ||
| } | ||
| } | ||
| // If no active workflow, default to ReAct Loop template | ||
| const defaultTpl = TEMPLATES.find((t) => t.id === "template-react-loop"); | ||
| if (defaultTpl) { | ||
| // Set active workflow ID to default template | ||
| setActiveWorkflowId("template-react-loop"); | ||
| return JSON.parse(JSON.stringify(defaultTpl.nodes)); | ||
| } | ||
| return exampleNodes; | ||
| }); | ||
|
|
||
| const [edges, setEdges] = useState<Edge[]>(() => { | ||
| const activeId = getActiveWorkflowId(); | ||
| if (activeId) { | ||
| if (activeId.startsWith("template-")) { | ||
| const foundTpl = TEMPLATES.find((t) => t.id === activeId); | ||
| if (foundTpl) return JSON.parse(JSON.stringify(foundTpl.edges)); | ||
| } else { | ||
| const list = loadWorkflows(); | ||
| const found = list.find((w) => w.id === activeId); | ||
| if (found) return found.edges; | ||
| } | ||
| } | ||
| const defaultTpl = TEMPLATES.find((t) => t.id === "template-react-loop"); | ||
| if (defaultTpl) { | ||
| return JSON.parse(JSON.stringify(defaultTpl.edges)); | ||
| } | ||
| return exampleEdges; | ||
| }); | ||
|
|
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
activeWorkflowId state can diverge from the workflow actually loaded into the canvas.
activeWorkflowId (line 73) is initialized from getActiveWorkflowId() before the nodes initializer (lines 77-97) runs. When there's no persisted active id (or it points to a deleted workflow), the nodes default branch calls setActiveWorkflowId("template-react-loop") — this only persists to localStorage; it never updates the already-committed activeWorkflowId React state, which stays null. So the canvas loads the ReAct Loop template while activeWorkflowId remains null. Downstream, WorkflowsManager receives activeWorkflowId={null}, so its active-indicator never marks the loaded template, and (once any custom workflows exist) its initial selection falls back to the first custom workflow instead of matching what's actually on the canvas. The nodes/edges initializers also duplicate the same lookup logic, and persisting via setActiveWorkflowId from inside a lazy state initializer is a side effect that doesn't belong in render.
🐛 Proposed fix: resolve the active id once, keep all state in sync
+ function resolveInitialActiveId(): string {
+ return getActiveWorkflowId() ?? "template-react-loop";
+ }
+
const [workflows, setWorkflows] = useState<SavedWorkflow[]>(() => loadWorkflows());
- const [activeWorkflowId, setActiveWorkflowIdState] = useState<string | null>(() => getActiveWorkflowId());
+ const [activeWorkflowId, setActiveWorkflowIdState] = useState<string | null>(() => resolveInitialActiveId());
const [showWorkflows, setShowWorkflows] = useState(false);
const [nodes, setNodes] = useState<Node<AgentNodeData>[]>(() => {
- const activeId = getActiveWorkflowId();
+ const activeId = resolveInitialActiveId();
if (activeId.startsWith("template-")) {
const foundTpl = TEMPLATES.find((t) => t.id === activeId);
if (foundTpl) return JSON.parse(JSON.stringify(foundTpl.nodes));
} else {
const list = loadWorkflows();
const found = list.find((w) => w.id === activeId);
if (found) return found.nodes;
}
return exampleNodes;
});
+
+ // Persist the resolved default once, outside of render.
+ useEffect(() => {
+ if (!getActiveWorkflowId()) setActiveWorkflowId(activeWorkflowId);
+ }, []);(apply the equivalent simplification to the edges initializer)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/Index.tsx` around lines 71 - 117, Resolve the effective
workflow ID once before initializing workflow state, falling back to
template-react-loop when the persisted ID is missing, deleted, or invalid.
Initialize activeWorkflowId with that resolved ID so it matches the workflow
loaded into the canvas, and update the nodes and edges initializers to use the
same resolved workflow rather than duplicating lookups. Remove the
setActiveWorkflowId side effect from the nodes initializer and persist the
resolved ID through the appropriate post-initialization flow.
| // Persist workflows when updated | ||
| useEffect(() => { | ||
| saveWorkflows(workflows); | ||
| }, [workflows]); | ||
|
|
||
| // Handle autosave: whenever nodes or edges change, update the active workflow if it's custom (non-template) | ||
| useEffect(() => { | ||
| if (activeWorkflowId && !activeWorkflowId.startsWith("template-")) { | ||
| setWorkflows((prev) => | ||
| prev.map((w) => | ||
| w.id === activeWorkflowId | ||
| ? { | ||
| ...w, | ||
| nodes, | ||
| edges, | ||
| updatedAt: new Date().toISOString(), | ||
| } | ||
| : w | ||
| ) | ||
| ); | ||
| } | ||
| }, [nodes, edges, activeWorkflowId]); | ||
|
|
There was a problem hiding this comment.
🚀 Performance & Scalability | 🟠 Major | ⚡ Quick win
Autosave writes to localStorage on every nodes/edges change, including per-frame drag updates.
This effect fires on every [nodes, edges, activeWorkflowId] change — onNodesChange/applyNodeChanges dispatches continuously while dragging a node — and each firing calls setWorkflows, which is a new array reference every time, which in turn re-triggers the saveWorkflows effect (JSON.stringify + synchronous localStorage.setItem) on line 186-189. Noted for consolidation with the equivalent per-keystroke issue in WorkflowsManager.tsx's handleUpdateField.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/src/pages/Index.tsx` around lines 186 - 208, Update the autosave
effect associated with nodes, edges, and activeWorkflowId so continuous drag
updates do not synchronously persist workflows to localStorage on every change.
Consolidate or debounce these updates while preserving autosave for the active
non-template workflow, and ensure saveWorkflows is not triggered for each
intermediate nodes/edges change.
1 participant
Introduces a highly requested feature enabling users to work with pre-built system templates (ReAct Loop, HTTP Router, Translation HITL) as well as save, duplicate, and manage custom agent flows directly within the visual builder workspace. Changes are complete, thoroughly verified with Playwright screenshots, and tested with unit tests.
PR created automatically by Jules for task 13620561092125557832 started by @Jacobcdsmith
Summary by CodeRabbit
New Features
Bug Fixes