Add flow visualization for tool builder

Implements node-based flow visualization using NodeGraphQt-QuiltiX-fork:

New files:
- src/cmdforge/gui/widgets/flow_graph.py: FlowGraphWidget with custom node types
  - InputNode: Shows tool inputs ($input + argument variables)
  - PromptNode: AI prompt steps with provider display
  - CodeNode: Python code steps
  - OutputNode: Final output
- scripts/test_nodegraph.py: Standalone prototype for testing

Modified files:
- tool_builder_page.py: Added List/Flow view toggle with QStackedWidget
  - Lazy-loads flow widget on first use
  - Syncs between list and flow views
  - Double-click nodes to edit steps
- styles.py: Added viewToggle button styling
- widgets/__init__.py: Export FlowGraphWidget
- pyproject.toml: Added 'flow' optional dependency group

Features:
- Toggle between List and Flow views in Steps panel
- Nodes auto-connected based on step order
- Auto-layout and fit-to-view on load
- Double-click nodes opens step edit dialog
- Graceful fallback if NodeGraphQt not installed

Co-Authored-By: Claude Opus 4.5 <[email protected]>
This commit is contained in:
rob
2026-01-15 17:07:35 -04:00
co-authored by Claude Opus 4.5
parent a5e0948881
commit 042be8b49b
6 changed files with 499 additions and 5 deletions
+19
View File
@@ -76,6 +76,25 @@ QPushButton#danger:hover {
background-color: #c53030;
}
/* View toggle buttons */
QPushButton#viewToggle {
background-color: #e2e8f0;
color: #4a5568;
border-radius: 4px;
padding: 6px 12px;
min-height: 24px;
min-width: 60px;
}
QPushButton#viewToggle:checked {
background-color: #667eea;
color: white;
}
QPushButton#viewToggle:hover:!checked {
background-color: #cbd5e0;
}
/* Input fields */
QLineEdit, QTextEdit, QPlainTextEdit {
border: 1px solid #e2e8f0;