feat: replace React Flow with @fbp/graph-editor + unified node palette#56
Merged
Conversation
- Copy @FBP packages (types, spec, evaluator, graph-editor) into packages/ as workspace dependencies consumed as source TypeScript by Vite - Rewrite FlowsPanel to use <GraphEditor> with full feature set: subnets, collapse-to-subnet (Shift+C), selections, hotkeys, properties panel, node palette, status bar, edge creation, box select - Wire @fbp/evaluator for local flow execution (evaluate button in sidebar) - Load built-in node definitions (math, core, ui, net, graphql) + platform functions from API as NodeDefinitions - Add onGraphChange callback to GraphProvider/GraphEditor for localStorage persistence - Add Vite aliases for @fbp/* workspace packages - Add Tailwind @source directive to scan graph-editor components - Remove @xyflow/react dependency - Add docs/spec/fbp-deep-plan.md (comprehensive feature audit + migration plan)
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
- Rich function cards (320px) with ⚡ icon, description, task ID, secrets/configs counts, scope badge, blue/green ports - Compact nodes (180px) for built-in types (math, json, flow, etc) - Zinc-950 dark theme across all editor components (was slate) - Variable-width box-select hit testing in GraphContext - External graph sync in GraphProvider (fixes sidebar add-to-canvas) - FlowsPanel sidebar: FLOWS + FUNCTIONS sections with mock data fallback - Top bar: flow name input + Save + Evaluate buttons
devin-ai-integration
Bot
changed the title
…ystem - Hide GraphEditor's built-in NodePalette (showNodePalette=false) - Hide GraphEditor's header bar (showHeader=false) — FlowsPanel has its own - Merge all node types into outer sidebar: Functions (3), Graph I/O (3), Constants (1), Math (2), JSON (2), Flow Control (1), String (2), Layout (1), Form (3), Content (1), GraphQL (1) - Functions use rich card styling (⚡ icon, description, monospace name) - Built-in nodes use compact styling with category icons - All items are both clickable (click-to-add) and draggable (drag-to-canvas) - Collapsible category sections with chevron toggles and item counts - Remove duplicate PALETTE_DEFINITIONS (graph/input etc) — evaluator already provides them - Add useMemo for definitions and groupedDefinitions for performance
devin-ai-integration
Bot
changed the title
- Compact nodes: 180px → 240px wide, header 28px → 32px - Icon + title left-aligned as a group (icon then title, not icon at edge + centered title) - Add shadow to compact nodes (consistent with rich function cards) - Rounded corners rx=8 → rx=10 for compact nodes - Auto-layout spacing increased (250 → 300) for wider nodes - GraphContext node dimensions synced with GraphNode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces
@xyflow/reactwith the full@fbp/graph-editorpackage — SVG-based visual graph editor with native support for subnets (Shift+C collapse, Enter dive, U go-up), selections (click/shift/box/cmd+a), hotkeys (duplicate, copy/paste, delete, auto-layout), and the@fbp/evaluatorfor local execution.Unified node system: Both rich function nodes and compact built-in nodes now render at 240px wide with consistent header/port/shadow styling — functions just add a description line + metadata row below the header, making them only slightly taller instead of 320px vs 180px. Port positions, border-radius, shadows, and header height are identical between types.
Unified sidebar: The outer HTML sidebar merges all node types (platform functions + 11 built-in categories) into a single categorized palette with collapsible sections. Items are both clickable (click-to-add) and draggable (drag-to-canvas using the same
application/fbp-nodedataTransfer format). The innerNodePaletteand redundant "FBP Graph Editor" header are hidden viashowNodePalette={false}+showHeader={false}.Key files:
GraphNode.tsx:RICH_NODE_WIDTH = NODE_WIDTH(both 240px), rich nodes useRICH_DESC_HEIGHT + RICH_META_HEIGHTfor extra rows, ports start after metadataGraphContext.tsx:getNodeHeight()computes dynamic height for both types,getNodeWidthForDef()returns 240 for allFlowsPanel.tsx:groupedDefinitions+orderedCategoriesmemos,handleDragStart/handleAddNodecallbacks,CATEGORY_ORDERconstantLink to Devin session: https://app.devin.ai/sessions/633efc205f0c445dbbb61c40679c2f78
Requested by: @pyramation