diff --git a/.claude/gw-plans/README.md b/.claude/gw-plans/README.md index 8057eae..91b1cd0 100644 --- a/.claude/gw-plans/README.md +++ b/.claude/gw-plans/README.md @@ -10,7 +10,7 @@ Implementation deviations are logged at the bottom of each plan file. | Track | Description | Status | |-------|-------------|--------| | [Execution](execution/) | FastAPI + LangGraph backend | Phases 1-5 merged | -| [Canvas](canvas/) | React + React Flow frontend | Phase 1 in progress | +| [Canvas](canvas/) | React + React Flow frontend | Phase 1 merged | | Deployment | Cloud Run + Vercel + CI/CD | Not started (after both tracks) | ## Status Legend diff --git a/.claude/gw-plans/canvas/README.md b/.claude/gw-plans/canvas/README.md index 7abc92d..f37d2e6 100644 --- a/.claude/gw-plans/canvas/README.md +++ b/.claude/gw-plans/canvas/README.md @@ -6,7 +6,7 @@ React 19 + React Flow frontend phases. Depends on execution phases 3-4 for API s | Phase | Plan | Status | |-------|------|--------| -| 1 | [Canvas core](phase-1-canvas-core/overview.md) -- Home view, Start/LLM/End nodes, edge wiring, config panel, save/load | In progress | +| 1 | [Canvas core](phase-1-canvas-core/overview.md) -- Home view, Start/LLM/End nodes, edge wiring, config panel, save/load | Complete | | 2 | SSE run panel -- stream display, node highlighting, reconnection | Not started | | 3 | Full node set -- Tool/Condition/HumanInput nodes, settings page | Not started | | 4 | Validation, run input modal, state panel | Not started | @@ -17,9 +17,9 @@ React 19 + React Flow frontend phases. Depends on execution phases 3-4 for API s | Part | Plan | Summary | Status | |------|------|---------|--------| -| 1.1 | [phase-1.1-test-infra-ui-base.md](phase-1-canvas-core/phase-1.1-test-infra-ui-base.md) | Test infra (Vitest), lucide-react, 9 shadcn UI components (Button, Input, Select, Textarea, Dialog, Sheet, Sidebar, Tooltip, Card), CanvasContext | In progress | -| 1.2 | [phase-1.2-node-components.md](phase-1-canvas-core/phase-1.2-node-components.md) | BaseNodeShell + Start/LLM/End node presenters | Not started | -| 1.3 | [phase-1.3-graph-canvas.md](phase-1-canvas-core/phase-1.3-graph-canvas.md) | GraphCanvas container, Toolbar with tooltips, connection validation, canvas hint, starter template | Not started | -| 1.4 | [phase-1.4-config-panel.md](phase-1-canvas-core/phase-1.4-config-panel.md) | NodeConfigPanel with slide transition + config forms | Not started | -| 1.5 | [phase-1.5-save-load.md](phase-1-canvas-core/phase-1.5-save-load.md) | HomeView, GraphCard, NewGraphDialog, editable graph name, save/load, view routing | Not started | +| 1.1 | [phase-1.1-test-infra-ui-base.md](phase-1-canvas-core/phase-1.1-test-infra-ui-base.md) | Test infra (Vitest), lucide-react, 9 shadcn UI components (Button, Input, Select, Textarea, Dialog, Sheet, Sidebar, Tooltip, Card), CanvasContext | Complete | +| 1.2 | [phase-1.2-node-components.md](phase-1-canvas-core/phase-1.2-node-components.md) | BaseNodeShell + Start/LLM/End node presenters | Complete | +| 1.3 | [phase-1.3-graph-canvas.md](phase-1-canvas-core/phase-1.3-graph-canvas.md) | GraphCanvas container, Toolbar with tooltips, connection validation, canvas hint, starter template | Complete | +| 1.4 | [phase-1.4-config-panel.md](phase-1-canvas-core/phase-1.4-config-panel.md) | NodeConfigPanel with slide transition + config forms | Complete | +| 1.5 | [phase-1.5-save-load.md](phase-1-canvas-core/phase-1.5-save-load.md) | HomeView, GraphCard, NewGraphDialog, editable graph name, save/load, view routing | Complete | | 1.6 | [phase-1.6-floating-toolbar.md](phase-1-canvas-core/phase-1.6-floating-toolbar.md) | Floating toolbar with stamp mode, replaces sidebar toolbar | Complete | diff --git a/.claude/skills/gw-frontend/SKILL.md b/.claude/skills/gw-frontend/SKILL.md index 15b0ce5..3895972 100644 --- a/.claude/skills/gw-frontend/SKILL.md +++ b/.claude/skills/gw-frontend/SKILL.md @@ -39,25 +39,45 @@ not reachable from components by design. See architecture.md for tsconfig detail Biome handles formatting and linting. No ESLint. +## Phase 1 patterns + +Patterns that emerged during Canvas Phase 1 — follow these in subsequent phases: + +- **`ApiError` class** with `status` property for structured HTTP error handling (`api/client.ts`) +- **`spliceEdge`** for atomic node-on-edge insertion — removes the old edge and creates two new edges in one store update (`graphSlice.ts`) +- **`useGraphStore.getState()`** inside callbacks to avoid stale closures from Zustand subscriptions +- **`useNodePlacement`** hook encapsulating singleton guards + edge splitting for drop/stamp operations +- **Global toast** via `useUIStore.getState().showToast()` — callable from anywhere (store, hooks, not just components) +- **`encodeURIComponent(id)`** on all API path params to handle special characters in graph IDs + ## Package structure ``` packages/canvas/src/ -├── components/ -│ ├── canvas/ # React Flow nodes, edges, canvas wrapper -│ ├── panels/ # Sidebar, run panel, settings, debug panel -│ └── ui/ # shadcn/ui base components -├── store/ -│ ├── graphSlice.ts # graph CRUD, canvas state -│ ├── runSlice.ts # SSE lifecycle, reconnection, run status -│ └── uiSlice.ts # dark mode, panel layout, last-opened graph -│ # persisted via sdk-core Storage → localStorage -│ # never stores credentials ├── api/ -│ ├── client.ts # base fetch wrapper (sdk-core Transport) +│ ├── client.ts # base fetch wrapper + ApiError class │ ├── graphs.ts # graph CRUD -│ └── runs.ts # run + SSE stream + reconnection -└── types/ # re-exports from @graphweave/shared +│ └── runs.ts # run start + SSE stream (stub — Phase 2) +├── components/ +│ ├── canvas/ # GraphCanvas, FloatingToolbar, StampGhost, CanvasHint, +│ │ │ CanvasHeader, SnapConnectionLine, CanvasRoute +│ │ └── nodes/ # BaseNodeShell, StartNode, LLMNode, EndNode, nodeTypes +│ ├── home/ # HomeView, GraphCard, NewGraphDialog +│ ├── panels/ # NodeConfigPanel +│ │ └── config/ # StartNodeConfig, LLMNodeConfig, EndNodeConfig +│ └── ui/ # Button, Card, Dialog, DropdownMenu, IconButton, +│ Input, Select, Sheet, Textarea, Toast, Tooltip +├── constants/ # toolbarItems.ts +├── contexts/ # CanvasContext (selectedNode, stampNodeType, rfInstance) +├── hooks/ # useNodePlacement, useNodeDrop, useBeforeUnload +├── store/ +│ ├── graphSlice.ts # graph CRUD, nodes/edges, spliceEdge, save/load +│ ├── runSlice.ts # SSE lifecycle (stub — Phase 2) +│ └── uiSlice.ts # darkMode, panelLayout, lastOpenedGraphId, +│ newGraphDialogOpen, toast (message + variant) +├── styles/ # tokens.ts (color/spacing design tokens) +├── types/ # canvas.ts, mappers.ts (NodeSchema ↔ RF Node) +└── utils/ # nodeDefaults.ts (NODE_DEFAULTS, SINGLETON_TYPES, findNearestEdge) ``` ## Zustand store shape @@ -83,6 +103,15 @@ interface UISlice { darkMode: boolean panelLayout: "right" | "bottom" lastOpenedGraphId: string | null + newGraphDialogOpen: boolean + toastMessage: string | null + toastVariant: "error" | "success" | "info" + toggleDarkMode: () => void + setPanelLayout: (layout: "right" | "bottom") => void + setLastOpenedGraphId: (id: string | null) => void + setNewGraphDialogOpen: (open: boolean) => void + showToast: (message: string, variant?: ToastVariant) => void + dismissToast: () => void } ``` diff --git a/README.md b/README.md index 2d2fd12..73012df 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ **Visual LangGraph builder where your graph runs exactly as drawn** — visually compose nodes, edges, and tools, then stream execution in real time. > [!NOTE] -> Graphweave is in early development. The scaffold is in place but core features are still being built. +> Graphweave is in early development. The canvas builder and execution backend are functional, but graph execution (run a graph and stream results) is not yet wired end-to-end. ## What is this? @@ -15,6 +15,14 @@ Graphweave kills that gap. The canvas **is** the execution. No translation step, **What you draw is what runs.** GraphSchema maps 1-to-1 to LangGraph primitives. No abstraction layer between the visual and the execution. +## Current status + +| Layer | What works | What's next | +|-------|-----------|-------------| +| **Canvas** | Home view, Start/LLM/End nodes, edge wiring, config panel, save/load, floating toolbar | [SSE run panel, full node set →](.claude/gw-plans/canvas/) | +| **Execution** | API key auth, graph CRUD, tool registry (8 tools), migrations | [Graph run + SSE streaming →](.claude/gw-plans/execution/) | +| **Shared** | GraphSchema contract, node types, edge types | Condition + HumanInput wiring | + ## Architecture ```