diff --git a/.claude/gw-plans/canvas/README.md b/.claude/gw-plans/canvas/README.md
index bf95f09..8ff0ec2 100644
--- a/.claude/gw-plans/canvas/README.md
+++ b/.claude/gw-plans/canvas/README.md
@@ -9,7 +9,7 @@ React 19 + React Flow frontend phases. Depends on execution phases 3-4 for API s
 | 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](phase-2-sse-run-panel/overview.md) -- SSE streaming, run panel, node highlighting, reconnection, resume | Complete |
 | 3 | [Full node set](phase-3-full-node-set/overview.md) -- Tool/Condition/HumanInput nodes, settings page, run input dialog, graph traversal, auto-map | Complete |
-| 4 | [State panel + LLM wiring](phase-4-state-panel/overview.md) -- LLM output_key clean break, LLM input_map/output_key config, state panel, model fetching | Not started |
+| 4 | [State panel + LLM wiring](phase-4-state-panel/overview.md) -- LLM output_key clean break, LLM input_map/output_key config, state panel, model fetching | Complete |
 | 5 | Error handling, run history, debug panel, JSON schema panel | Not started |
 | 6 | Python export, JSON read/write, dark mode, polish | Not started |
 
diff --git a/.claude/gw-plans/canvas/phase-4-state-panel/implementation-log.md b/.claude/gw-plans/canvas/phase-4-state-panel/implementation-log.md
new file mode 100644
index 0000000..006bad6
--- /dev/null
+++ b/.claude/gw-plans/canvas/phase-4-state-panel/implementation-log.md
@@ -0,0 +1,65 @@
+# Phase 4 Implementation Log
+
+## PR #14 — feat(canvas): Phase 4 — state panel, input maps, model fetching, Radix Select
+
+Merged: 2026-03-20
+
+### What shipped
+
+**4.1 — LLM output_key clean break**
+- LLM nodes default to `output_key: "llm_response"` instead of `"messages"`
+- Execution layer appends AIMessage to messages history alongside writing to output_key
+- `DEFAULT_STATE` includes `llm_response` field
+- `isAutoOutputKey` + `deduplicateOutputKey` utilities for smart output_key naming
+
+**4.2 — LLM input_map + output_key config**
+- Full input_map editor in LLMNodeConfig (collapsed summary + expanded card editor)
+- Suggestion chips for upstream tool output fields
+- output_key field (hidden when terminal node)
+- `getRelevantFields` + `isTerminalNode` graph traversal utilities
+- `autoMapParams` with user_input assignment, enum-like detection, quoted literals
+- Type-filtered presets with `buildPresetsForParam`
+- Source node name hints via `resolveSourceHint` / `resolveSourceLabel`
+
+**4.3 — State panel**
+- Left sidebar Sheet with add/edit/remove state fields
+- AddFieldForm with type and reducer selection
+- StateFieldRow with inline editing, usage tracking, delete with undo toast
+- 3 entry points: toolbar icon, config panel link, dropdown "+ New field..."
+
+**4.4 — Model fetching**
+- `GET /v1/settings/providers` endpoint returns real model lists
+- `settingsSlice.loadProviders()` with fallback to hardcoded defaults
+- Collapsible "Model Settings" section in LLMNodeConfig
+
+**Bonus: Radix Select migration**
+- Replaced all native `<select>` with Radix-based Select component
+- `description` prop for secondary text in select items
+
+### Bug fixes (post-merge, same PR)
+
+**fix(canvas): cascade output_key renames to downstream node mappings**
+- `rewriteStateExpression()` utility for rewriting root keys in state expressions
+- `renameOutputKey()` store action: atomically updates source node, downstream input_maps, condition fields, and state entries
+- Blur-based cascade in ToolNodeConfig and LLMNodeConfig for manual edits
+- Tool-switch cascade in ToolNodeConfig
+
+**fix(canvas): create unique input fields when user_input already claimed**
+- `getClaimedInputKeys()` helper scans other nodes' input_maps for claimed root keys
+- `autoMapParams` extended with optional `claimedInputKeys` param
+- When `user_input` is claimed, creates `{param_name}_input` with dedup
+
+### Key decisions during implementation
+
+| Decision | Rationale |
+|----------|-----------|
+| Cascade on blur, not keystroke | Avoids rewriting downstream on every character typed in output_key |
+| `renameOutputKey` as atomic store action | Single state update for source node + all downstream + state field rename |
+| `claimedInputKeys` as optional param | Backward compatible — existing callers unaffected |
+| Radix Select in same PR | Needed for description prop; touching all selects anyway |
+
+### Test coverage
+
+- 464 tests passing after all changes
+- New test suites: `rewriteStateExpression`, `renameOutputKey`, `getClaimedInputKeys`, `autoMapParams` with claimed keys
+- Existing suites extended: `graphTraversal.test.ts`, `graphSlice.test.ts`, `presetUtils.test.ts`
diff --git a/.claude/gw-plans/canvas/phase-4-state-panel/overview.md b/.claude/gw-plans/canvas/phase-4-state-panel/overview.md
index a9cd6bf..0365558 100644
--- a/.claude/gw-plans/canvas/phase-4-state-panel/overview.md
+++ b/.claude/gw-plans/canvas/phase-4-state-panel/overview.md
@@ -1,6 +1,6 @@
 # Canvas Phase 4 -- State Panel + LLM Wiring
 
-**Status: Not started**
+**Status: Complete**
 
 ## Goal
 
diff --git a/.claude/gw-plans/canvas/phase-5-run-history-debug/overview.md b/.claude/gw-plans/canvas/phase-5-run-history-debug/overview.md
new file mode 100644
index 0000000..4a7e803
--- /dev/null
+++ b/.claude/gw-plans/canvas/phase-5-run-history-debug/overview.md
@@ -0,0 +1,790 @@
+# Canvas Phase 5 -- Run History, Debug Panel, Error UX
+
+**Status: Planning**
+
+## Goal
+
+After this phase, users can:
+
+1. Navigate panels via a VS Code-style activity bar + side/bottom panel layout
+2. Browse past runs for the current graph, filter by status, inspect or delete them
+3. Click any node during or after a run to see its state snapshot (what changed)
+4. Validate a graph before running it, with actionable error messages
+5. View and export the current GraphSchema as JSON
+
+## Architecture: VS Code-style panel layout
+
+Replace the three independent Sheet overlays with a VS Code-inspired layout:
+activity bar (left) + side panel (right) + bottom panel (editor-scoped).
+
+Reference: [VS Code workbench layout](https://code.visualstudio.com/docs/getstarted/userinterface).
+Same pattern used by Cursor, Windsurf, and other developer tools.
+
+Two separate toolbar concerns:
+- **Activity bar** (left edge): WHAT to show — swaps side panel content
+- **Panel control toolbar** (top-right, floating): WHETHER to show — toggles panel visibility
+
+```
+ CanvasRoute
+ +-------------------------------------------------------------------------+
+ | CanvasHeader (h-12)                              [Save] [Run/Stop]      |
+ +-------------------------------------------------------------------------+
+ | main (flex-row, h-[calc(100vh-3rem)])                                   |
+ |                                                                         |
+ | +--ActBar--+--EditorArea (flex-col, flex-1)--+--<>--+--SidePanel-----+  |
+ | |          |                                 |resize|                |  |
+ | | [config] |  GraphCanvas (flex-1)    [<|][_v][|>]  | <active panel> |  |
+ | | [state]  |    ReactFlow             PanelCtrl     |                |  |
+ | | [history]|    FloatingToolbar (z-10) (top-right)   | Full height    |  |
+ | | [schema] |                                 |      | Node config    |  |
+ | |          |---- resize handle (horiz) ------|      | or State       |  |
+ | |          |  BottomPanel (collapsible)      |      | or History     |  |
+ | |          |  [Timeline] [Debug] tabs        |      | or Schema      |  |
+ | |          |  events | state inspector       |      | or Chat (v2)   |  |
+ | +----------+---------------------------------+------+----------------+  |
+ |      ^                   ^            ^                 ^               |
+ |      |                   |            |                 |               |
+ |  activity bar    bottom panel    panel ctrl       side panel            |
+ |  full height     editor-scoped   floating         full height           |
+ |  WHAT to show                    WHETHER to show                        |
+ +-------------------------------------------------------------------------+
+
+ Layout mirrors VS Code:
+   VS Code:    Activity Bar | Editor + Terminal | Sidebar
+   GraphWeave: Activity Bar | Canvas + RunPanel | Config/State/History
+```
+```
+
+### Panel control toolbar (top-right of canvas, floating)
+
+```
+  +-------+-------+-------+
+  | [PanL] | [PanB] | [PanR] |
+  +-------+-------+-------+
+     ^        ^        ^
+     |        |        |
+   Left     Bottom    Right
+   panel    panel     panel
+   toggle   toggle    toggle
+
+  Icons (lucide):
+    PanelLeft       — toggle left panel (no-op for now, wired for future)
+    PanelBottom     — toggle bottom panel open/closed
+    PanelRight      — toggle side panel open/closed
+
+  Styling:
+    position: absolute top-3 right-3 z-10 (inside canvas, above ReactFlow)
+    bg-zinc-900/80 backdrop-blur-sm rounded-md border border-zinc-800
+    h-8, ~110px wide
+    icons: 16px, zinc-500 inactive, zinc-100 active (panel open)
+    gap-0.5 between icons, p-1
+
+  Behavior:
+    PanelRight toggles side panel visibility (activity bar stays visible)
+    PanelBottom toggles bottom panel visibility
+    PanelLeft reserved for future left panel (disabled/dim for now)
+    When side panel closes, activity bar selection preserved
+    When side panel opens, it shows whatever was last active
+```
+
+### Activity bar detail (left edge, like VS Code)
+
+```
++--ActivityBar--+
+|               |
+|  [settings]   |  <- Node config (when node selected)
+|  [database]   |  <- State fields
+|  [history]    |  <- Run history
+|  [braces]     |  <- Schema viewer
+|               |
+|               |
+|               |
+|  (bottom:)    |
+|  [terminal]   |  <- Toggle bottom panel
+|               |
++---------------+
+  w-10 (40px)
+  border-r border-zinc-800
+  bg-zinc-950
+  icons: 18px, zinc-500, hover: zinc-300
+  active: zinc-100 + left-2px indigo border
+
+  Compare VS Code:
+  +----+                    +----+
+  | [] | Explorer           | >> | Node Config
+  | Q  | Search             | DB | State Fields
+  | Y  | Source Control     | CL | Run History
+  | [] | Run & Debug        | {} | Schema
+  | [] | Extensions         |    |
+  |    |                    | >_ | Bottom Panel
+  +----+                    +----+
+  VS Code                   GraphWeave
+```
+
+### Side panel swapping (right edge, full height)
+
+```
+Activity bar (left) click -> toggles side panel (right) content:
+
+  [Node Config] active:
+  +--SidePanel (w-80)----------+
+  | NODE CONFIG                |
+  | Label: [Search        ]    |
+  | Tool:  [web_search    v]   |
+  | Parameters ...             |
+  | Output key: [search_result]|
+  +----------------------------+
+
+  [State] active:
+  +--SidePanel (w-80)----------+
+  | STATE FIELDS               |
+  | messages  list   append    |
+  | user_input string replace  |
+  | + Add field                |
+  +----------------------------+
+
+  [History] active:               <-- NEW in Phase 5
+  +--SidePanel (w-80)----------+
+  | RUN HISTORY                |
+  | [All] [OK] [Err] [Paused] |
+  |                            |
+  | V #abc123  2m14s  Mar 20   |
+  | X #def456  0.8s   Mar 20   |
+  |   InputMapError: ...       |
+  | V #ghi789  5.1s   Mar 19   |
+  |                            |
+  | [Load more] (3 of 12)     |
+  +----------------------------+
+
+  [Schema] active:                <-- NEW in Phase 5
+  +--SidePanel (w-80)----------+
+  | SCHEMA                     |
+  | {                          |
+  |   "name": "My Agent",     |
+  |   "state": [...],         |
+  |   "nodes": [...],         |
+  |   ...                     |
+  | }                          |
+  | [V Valid]  [Copy] [Save]   |
+  +----------------------------+
+
+  Clicking active icon again -> hides side panel (sidePanelVisible = false)
+    Selection preserved — PanelRight toggle or next icon click restores it
+  Node click on canvas -> auto-activates Node Config panel + sidePanelVisible = true
+```
+
+### Bottom panel detail (nested inside EditorArea, not full width)
+
+```
++---BottomPanel (inside EditorArea, does NOT extend under side panel)-+
+|                                                                     |
+| [Timeline] [Debug]  tabs                      Run #abc  2m14s [_][x]|
+| --------------------------------------------------------------------+
+|                                |                                    |
+|  TIMELINE (left 60%)           |  STATE INSPECTOR (right 40%)       |
+|                                |  +-- Node: "Search" ----------+    |
+|  > Run started  14:02:01       |  |                            |    |
+|  V Search       1.2s   openai  |  |  Output:                   |    |
+|    -> LLM                      |  |  { results: [...], cnt: 3 }|    |
+|  * LLM          <- selected    |  |                            |    |
+|                                |  |  State after this node:    |    |
+|                                |  |  > messages (list)    [=]  |    |
+|                                |  |  v search_result      [NEW]|    |
+|                                |  |    results: [...]          |    |
+|                                |  |    count: 3                |    |
+|                                |  |  > user_input (str)   [=]  |    |
+|                                |  |                            |    |
+|                                |  |  [=] unchanged [NEW] added |    |
+|                                |  |  [~] modified  [-] removed |    |
+|                                |  +----------------------------+    |
++--------------------------------+------------------------------------+
+
+  [_] = minimize (collapse to tab bar only, ~32px)
+  [x] = close bottom panel entirely
+  Activity bar [terminal] icon toggles bottom panel
+  Bottom panel auto-opens on run start (existing behavior preserved)
+```
+
+### Validation error dialog
+
+```
+Hard errors (Run anyway disabled):
+
++--- Validation Errors --------------------------------+
+|                                                      |
+|  2 errors must be fixed before running:              |
+|                                                      |
+|  [X] Tool node "Search" has unmapped required param  |
+|      query -> (empty)                                |
+|      [Go to node]                                    |
+|                                                      |
+|  [X] LLM node "Summarizer" missing provider          |
+|      provider is not set                             |
+|      [Go to node]                                    |
+|                                                      |
+|                                      [Fix issues]    |
++------------------------------------------------------+
+
+Warnings only (Run anyway enabled):
+
++--- Validation Warnings ------------------------------+
+|                                                      |
+|  1 warning:                                          |
+|                                                      |
+|  [!] LLM node "Summarizer" has no system prompt      |
+|      Will use empty string                           |
+|      [Go to node]                                    |
+|                                                      |
+|                        [Run anyway]   [Fix issues]   |
++------------------------------------------------------+
+```
+
+### Data flow: Activity bar (left) + side panel (right)
+
+```
+CanvasContext manages:
+  activeSidePanel: "config" | "state" | "history" | "schema" | null  -- WHAT (activity bar)
+  sidePanelVisible: boolean          -- WHETHER (panel control toolbar)
+  bottomPanelVisible: boolean        -- WHETHER (panel control toolbar)
+  bottomPanelMinimized: boolean      -- collapse to tab bar only
+
+ActivityBar (left, full height) reads activeSidePanel, renders icon highlights
+SidePanel (right, full height) reads activeSidePanel, renders matching content
+
+  Click activity icon:
+    same as active -> toggle sidePanelVisible (preserves selection)
+    different      -> set new panel + sidePanelVisible = true
+
+  Node click on canvas:
+    setSelectedNodeId(id)
+    setActiveSidePanel("config")  -- auto-open config
+
+  Node deselect (click canvas bg):
+    setSelectedNodeId(null)
+    -- side panel stays on whatever was active (don't force-close)
+```
+
+### Data flow: Run History
+
+```
+User clicks History icon in activity bar
+  |
+  v
+SidePanel renders RunHistoryPanel
+  |
+  v
+useEffect -> historySlice.loadRuns(graphId)
+  |
+  v
+GET /graphs/{graph_id}/runs?status=X&limit=20&offset=0
+  |                                          (new API client fn)
+  v
+historySlice stores: { runs[], total, loading, error, statusFilter }
+  |
+  v
+RunHistoryPanel reads historySlice
+  - run rows: status icon, created_at, duration, error preview
+  - status filter chips: All / Completed / Error / Paused
+  - click row -> opens bottom panel, loads run summary
+  - delete button -> DELETE /runs/{run_id}
+  - auto-refreshes when runSlice.runStatus reaches terminal state
+```
+
+### Data flow: Debug Panel (State Inspector)
+
+```
+During live run:
+  node_completed SSE events carry state_snapshot
+  _handleEvent already appends these to runOutput[]
+  |
+  v
+User clicks a node on canvas (or in timeline)
+  |
+  v
+runSlice.inspectNode(nodeId)
+  reads runOutput[] for the node_completed event matching nodeId
+  extracts: state_snapshot, output, duration_ms
+  |
+  v
+StateInspector component renders:
+  - JSON tree view of state_snapshot
+  - diff: compares against previous node's state_snapshot
+    (find the node_completed event BEFORE this one in runOutput)
+  - changed keys highlighted in green/amber
+  - node output shown separately at top
+
+For historical runs:
+  DB only stores final_state, NOT per-node snapshots.
+  -> Bottom panel header shows: "Run #xyz · Mar 20 · 2m14s [Back to live run]"
+  -> Input section at top: shows run's input object
+  -> Debug panel shows final_state with message:
+     "Per-node snapshots are available for live runs. Showing final graph state."
+  -> Clicking a node does nothing (no per-node data to show)
+```
+
+### Data flow: Pre-run Validation
+
+```
+User clicks "Run" button
+  |
+  v
+saveGraph() (existing)
+  |
+  v
+Client-side validateGraph() (existing, fast pre-check)
+  |
+  +-- errors found -> show ValidationErrorDialog immediately
+  |                   (uses nodeId field from client validator)
+  |
+  +-- no errors -> continue to server validation
+        |
+        v
+      POST /graphs/{graph_id}/validate     (new API client fn)
+        |
+        +-- { valid: true }
+        |     -> brief green flash "Valid — starting run..."
+        |     -> proceed to startRun()
+        |
+        +-- { valid: false, errors: [...] }
+              |
+              v
+            ValidationErrorDialog
+              (normalizes node_ref -> nodeId for consistency)
+              - errors classified by severity (error vs warning)
+              - click error -> select node, open config panel
+              - "Fix issues" -> close dialog
+              - "Run anyway" -> ONLY enabled if all findings are warnings
+              - hard errors: "2 errors must be fixed before running"
+```
+
+## UX principles: transparency builds trust
+
+Every interaction should answer: "What just happened? What's happening now? What should I do next?"
+
+### Run lifecycle feedback (no silent gaps)
+
+```
+User clicks "Run"
+  |
+  v
+Bottom panel opens with status line:
+  "Saving..."        (during saveGraph)
+  "Validating..."    (during client + server validate)
+  "V Valid — starting run..."  (brief green flash, then SSE connects)
+  "Run started"      (first SSE event — existing)
+
+If validation fails:
+  "2 errors found"   (red, opens ValidationErrorDialog)
+```
+
+### Validation error severity
+
+```
+Errors classified as:
+
+  ERROR (hard) — will crash at runtime, must fix
+    - unmapped required param
+    - missing provider/model
+    - tool not found
+    - invalid graph topology
+    -> "Run anyway" button DISABLED or HIDDEN
+
+  WARNING (soft) — may work, user decides
+    - empty system prompt
+    - optional param unmapped
+    - output_key shadows another node
+    -> "Run anyway" button ENABLED
+
+  Dialog shows: "2 errors must be fixed" vs "1 warning — you can run anyway"
+```
+
+### Mode-aware node clicks
+
+```
+When runStatus === "idle" (editing mode):
+  Click node -> open side panel with config (existing behavior)
+
+When runStatus !== "idle" (debugging mode):
+  Click node -> update bottom panel StateInspector only
+  Side panel stays on whatever was active (don't jump to config)
+  User can still manually switch to config via activity bar
+```
+
+### Historical run visibility
+
+```
+Bottom panel header when viewing runs:
+
+  Live run:
+  +-- Run #abc123 (live) ● ----------------------------- 2m 14s --+
+
+  Historical run:
+  +-- Run #def456 · Mar 20 14:02 · 2m 14s --- [Back to live run] -+
+
+  Historical runs also show:
+  - Input section at top: "Input: { user_input: 'search for cats' }"
+  - Final state (not per-node): "Per-node snapshots are available
+    for live runs. Showing final graph state."
+```
+
+### Empty states (always show something, never blank)
+
+```
+History panel (no runs):     "No runs yet. Click Run to execute your graph."
+StateInspector (no node):    "Click a node in the timeline to inspect its state."
+Schema panel (no graph):     (should not happen — graph always exists on canvas)
+Bottom panel (no run):       "Run your graph to see execution events here."
+```
+
+### Activity bar tooltips (required on all icons)
+
+```
+[>>]  "Node Config"       Cmd+1
+[DB]  "State Fields"      Cmd+2
+[CL]  "Run History"       Cmd+3
+[{}]  "Schema"            Cmd+4
+[>_]  "Toggle Terminal"   Cmd+J
+```
+
+### Delete confirmation for runs
+
+```
+Click delete on history row ->
+  Confirmation: "Delete run #abc123? This cannot be undone."
+  [Cancel] [Delete]
+```
+
+## Scope decisions
+
+| Decision | Choice | Rationale |
+|----------|--------|-----------|
+| Panel layout | VS Code-style activity bar + side panel + bottom panel | Familiar interaction pattern, scales to more panels, cleaner than stacked sheets |
+| Activity bar position | Left edge (like VS Code) | Familiar placement. FloatingToolbar is a canvas overlay at z-10, doesn't conflict. |
+| Side panel content | Single panel, swaps content via activity bar | Avoids multiple overlapping panels competing for space |
+| Bottom panel | Run timeline + debug inspector (split) | Terminal-like area for execution output, separate from config/browsing |
+| Run history location | Side panel (activity bar icon), not bottom tab | History is a browsing activity, not part of the live run timeline |
+| Schema viewer location | Side panel (activity bar icon) | Consistent with other panels; no need for a separate dialog |
+| Per-node snapshots for historical runs | Not supported | DB stores only final_state. Event log table is out of scope. |
+| History pagination | Client-side load-more (not infinite scroll) | Simple, explicit. 20 runs per page matches API default. |
+| State diff algorithm | Shallow key comparison | State is typically flat. Deep diff adds library dep. |
+| Pre-run validation | Client-side first (fast), then server-side (deep) | Client catches obvious errors instantly; server catches build-time errors. Normalize error shapes. |
+| Validation severity | Classify errors vs warnings; gate "Run anyway" on severity | Hard errors will always crash — don't let users waste API credits. Warnings are user's choice. |
+| Run lifecycle feedback | Status line in bottom panel: Saving → Validating → Starting | Bridges the gap between Run click and first SSE event. No silent waits. |
+| Mode-aware node clicks | During runs, node click updates inspector only (not config) | Prevents jarring panel swap when user is debugging, not editing. |
+| Historical run context | Show input + "Back to live run" breadcrumb | Users need to see what input produced which output. Visual distinction prevents confusion. |
+| Empty states | Always show guidance text, never a blank panel | Reduces confusion, guides discovery for new users. |
+| Activity bar tooltips | All icons have tooltips with keyboard shortcuts | Discoverability for new users; efficiency for power users. |
+| Delete confirmation | Confirm before deleting runs (irreversible server-side) | Prevent accidental data loss. Consistent with StatePanel's undo pattern. |
+| 422 handling for validate | New `requestRaw()` in client.ts | Current `request()` throws on non-2xx. Need to parse 422 body for validation errors. |
+| History auto-refresh | Invalidate on terminal run status | User sees latest run when switching to History panel after a run completes. |
+
+## Parts
+
+| Part | Summary | Dependencies | Est. files |
+|------|---------|-------------|------------|
+| 5.1 | [Layout refactor -- activity bar, panel toolbar, resizable panels](phase-5.1-layout-refactor.md) | None | 12 src + 6 test |
+| 5.2 | [Run History -- API client + store + list UI](phase-5.2-run-history.md) | 5.1 (side panel slot) | 4 src + 3 test |
+| 5.3 | [Debug Panel -- State Inspector](phase-5.3-debug-panel.md) | 5.1 (bottom panel split) | 4 src + 3 test |
+| 5.4 | [Error UX -- Pre-run validation](phase-5.4-error-ux.md) | None (parallel with 5.2/5.3) | 4 src + 3 test |
+| 5.5 | [Schema Viewer](phase-5.5-schema-viewer.md) | 5.1 (side panel slot) | 2 src + 1 test |
+
+```
+Dependency graph:
+
+  5.1 (Layout refactor)
+    |
+    +---> 5.2 (Run History)   -- needs side panel slot
+    +---> 5.3 (Debug Panel)   -- needs bottom panel split
+    +---> 5.5 (Schema Viewer) -- needs side panel slot
+
+  5.4 (Error UX) -- independent (dialog overlay, no panel changes)
+
+Recommended order: 5.1 first, then 5.2/5.3/5.4/5.5 in any order
+```
+
+### Part 5.1: Layout refactor -- activity bar + side/bottom panel
+
+Replaces three independent Sheet overlays with a flex-based layout with resizable panels.
+
+New files:
+- `packages/canvas/src/components/canvas/ActivityBar.tsx` -- icon strip, active state highlighting
+- `packages/canvas/src/components/canvas/SidePanel.tsx` -- container that renders active panel content
+- `packages/canvas/src/components/canvas/BottomPanel.tsx` -- collapsible run output + debug split
+- `packages/canvas/src/components/canvas/PanelControlToolbar.tsx` -- floating top-right panel toggles
+- `packages/canvas/src/components/ui/ResizeHandle.tsx` -- drag handle for panel resizing
+
+Changes:
+- `CanvasRoute.tsx` -- restructure from stacked absolutes to flex layout
+- `CanvasContext.tsx` -- add `activeSidePanel`, `sidePanelVisible`, `bottomPanelVisible`, `bottomPanelMinimized`. Remove `statePanelOpen` / `setStatePanelOpen` (replaced by `activeSidePanel === "state"` + `sidePanelVisible`).
+- `NodeConfigPanel.tsx` -- remove Sheet wrapper, render as SidePanel content
+- `StatePanel.tsx` -- remove Sheet wrapper, render as SidePanel content. Replace `statePanelOpen` reads with `activeSidePanel === "state"` + `sidePanelVisible`.
+- `RunPanel.tsx` -- remove Sheet wrapper, render inside BottomPanel. Remove local `visible` useState and auto-open useEffect. Auto-open migrates to CanvasRoute: a useEffect watches `runStatus` and sets `bottomPanelVisible = true` when run starts.
+- `FloatingToolbar.tsx` -- remove state panel toggle button and `statePanelOpen` usage (moved to activity bar)
+
+```
+BEFORE (Phase 4):
++-------+----------------------------------+
+| Float |     GraphCanvas (absolute)       |
+| Tool  |                                  |
+| bar   |  +----Sheet right (absolute)--+  |
+|       |  | NodeConfig                 |  |
+|       |  +----------------------------+  |
+|       |                                  |
+| +--Sheet left (abs)--+                   |
+| | StatePanel         |                   |
+| +--------------------+                   |
+|                                          |
+| +--Sheet bottom (absolute)------------+  |
+| | RunPanel                            |  |
+| +-------------------------------------+  |
++------------------------------------------+
+
+AFTER (Phase 5.1):
++----+------+--------------------+--+----------+
+|Act |Float |                    |<>|Side Panel|
+|Bar |Tool  |   GraphCanvas      |  |          |
+|    |bar   |   (flex-1)         |  | full     |
+| >> |      |                    |  | height   |
+| DB |      +===(resize h)=======+  |          |
+| CL |      |  BottomPanel       |  |          |
+| {} |      |  timeline|inspector|  |          |
+|    |      +--------------------+  |          |
+| >_ |                              |          |
++----+------------------------------+--+-------+
+
+  Activity bar (left) and side panel (right) both run FULL HEIGHT.
+  Bottom panel is INSIDE EditorArea — does NOT extend under side panel.
+  FloatingToolbar floats inside canvas area (z-10 overlay, unaffected).
+
+  <> = vertical resize handle (drag to resize side panel width)
+  == = horizontal resize handle (drag to resize bottom panel height)
+
+  Side panel: min 240px, max 480px, default 320px
+  Bottom panel: min 120px, max 50vh, default 256px
+  Sizes persisted to localStorage
+
+  Matches VS Code layout:
+    Activity Bar (left, full h) | Editor + Terminal | Sidebar (right, full h)
+```
+```
+
+```
+Resize handle interaction:
+
+  +--GraphCanvas--+-ResizeHandle-+--SidePanel--+--ActivityBar--+
+  |               | (vertical)   |             |               |
+  |               | cursor:      |             |               |
+  |               | col-resize   |             |               |
+  |               | w-1          |             |               |
+  +---------------+--------------+-------------+---------------+
+  +--ResizeHandle (horizontal, cursor: row-resize, h-1)--------+
+  +--BottomPanel-----------------------------------------------+
+  |                                                            |
+  +------------------------------------------------------------+
+
+  ResizeHandle props:
+    direction: "horizontal" | "vertical"
+    onResize: (delta: number) => void
+
+  Implementation:
+    - onMouseDown -> start tracking
+    - onMouseMove -> call onResize with delta px
+    - onMouseUp -> stop, persist to localStorage
+    - Visual: 1px zinc-800 border, hover: 2px indigo-500, cursor change
+    - Double-click: reset to default size
+
+  Constraints:
+    Side panel:   min 240px, max 480px, default 320px
+    Bottom panel: min 120px, max 50vh, default 256px
+
+  Persistence:
+    localStorage key: "gw-panel-sizes"
+    Value: { sideWidth: number, bottomHeight: number }
+    Read on mount, write on resize end (not every frame)
+```
+
+Tests:
+- `packages/canvas/src/components/canvas/__tests__/ActivityBar.test.tsx`
+- `packages/canvas/src/components/canvas/__tests__/SidePanel.test.tsx`
+- `packages/canvas/src/components/canvas/__tests__/BottomPanel.test.tsx`
+- `packages/canvas/src/components/canvas/__tests__/PanelControlToolbar.test.tsx`
+- `packages/canvas/src/components/ui/__tests__/ResizeHandle.test.tsx`
+- Updates to `CanvasRoute.test.tsx` (if exists)
+
+### Part 5.2: Run History -- API client + store + list UI
+
+New files:
+- `packages/canvas/src/api/runs.ts` -- add `listRunsForGraph()`, `deleteRun()` functions
+- `packages/canvas/src/store/historySlice.ts` -- Zustand store for run list, filter, pagination
+- `packages/canvas/src/components/panels/RunHistoryPanel.tsx` -- run list, status filter chips, inspect/delete
+
+Changes:
+- `SidePanel.tsx` -- register "history" panel content
+
+API types:
+```typescript
+interface RunListItem {
+  id: string;
+  graph_id: string;
+  status: "running" | "paused" | "completed" | "error";
+  input: Record<string, unknown>;
+  duration_ms: number | null;
+  created_at: string;
+  error: string | null;
+}
+
+interface ListRunsOpts {
+  status?: "completed" | "error" | "paused";
+  limit?: number;
+  offset?: number;
+}
+```
+
+Key behavior:
+- Status filter chips pass `status` param to API
+- Click row -> open bottom panel, load run summary
+- Delete button -> `DELETE /runs/{run_id}` (new API fn, NOT existing)
+- Auto-refresh when `runSlice.runStatus` reaches terminal state
+
+Tests:
+- `packages/canvas/src/store/__tests__/historySlice.test.ts`
+- `packages/canvas/src/api/__tests__/runs.test.ts` (additions)
+- `packages/canvas/src/components/panels/__tests__/RunHistoryPanel.test.tsx`
+
+### Part 5.3: Debug Panel -- State Inspector
+
+New files:
+- `packages/canvas/src/components/panels/StateInspector.tsx` -- tree view + diff highlight
+- `packages/canvas/src/components/panels/JsonTree.tsx` -- recursive expandable JSON renderer
+
+Changes:
+- `BottomPanel.tsx` -- add right-side split for StateInspector when node inspected
+- `runSlice.ts` -- add `inspectedNodeId`, `inspectNode()`, `clearInspection()`
+
+```
+JsonTree rendering:
+
+  > messages (list, 3 items)          [=]
+  v user_input (string)               [~]
+    "hello"  ->  "search for cats"
+  v search_result (object)            [NEW]
+    > results (list, 5 items)
+    count: 5
+
+  [=] unchanged  [~] modified  [NEW] added  [-] removed
+```
+
+Key behavior:
+- Click node in timeline or on canvas -> show state_snapshot from node_completed event
+- Diff: shallow key comparison against previous node's snapshot
+- Historical runs: show final_state only (no per-node drill-down)
+
+Tests:
+- `packages/canvas/src/components/panels/__tests__/JsonTree.test.tsx`
+- `packages/canvas/src/components/panels/__tests__/StateInspector.test.tsx`
+- `packages/canvas/src/store/__tests__/runSlice.test.ts` (additions for inspectedNodeId)
+
+### Part 5.4: Error UX -- Pre-run validation
+
+New files:
+- `packages/canvas/src/components/dialogs/ValidationErrorDialog.tsx` -- error list, click-to-select-node
+
+Changes:
+- `packages/canvas/src/api/client.ts` -- add `requestRaw()` that returns Response for caller to handle
+- `packages/canvas/src/api/graphs.ts` -- add `validateGraph()` using `requestRaw()` to handle 422
+- `packages/canvas/src/components/canvas/CanvasHeader.tsx` -- validate-before-run flow
+- `packages/canvas/src/store/runSlice.ts` -- add `validationErrors` state
+
+API types:
+```typescript
+interface ValidationError {
+  message: string;
+  node_ref: string | null;  // backend field name
+}
+
+interface ValidateResponse {
+  valid: boolean;
+  errors: ValidationError[];
+}
+```
+
+Validation flow:
+1. User clicks Run -> save graph
+2. Client-side `validateGraph()` (existing utils, fast pre-check)
+3. If client errors -> show ValidationErrorDialog (uses `nodeId`)
+4. If client passes -> server-side `POST /graphs/{graph_id}/validate`
+5. If server errors -> normalize `node_ref` to `nodeId`, show dialog
+6. Dialog: "Fix issues" (close, select first error node) or "Run anyway" (proceed)
+
+Tests:
+- `packages/canvas/src/api/__tests__/graphs.test.ts` (additions for validateGraph + 422 handling)
+- `packages/canvas/src/components/dialogs/__tests__/ValidationErrorDialog.test.tsx`
+- `packages/canvas/src/components/canvas/__tests__/CanvasHeader.test.tsx` (updates for validate-before-run)
+
+### Part 5.5: Schema Viewer
+
+New files:
+- `packages/canvas/src/components/panels/SchemaPanel.tsx` -- JSON view + copy/download/validate
+
+Changes:
+- `SidePanel.tsx` -- register "schema" panel content
+
+Reads `graphSlice.graph` directly. Strips metadata, pretty-prints JSON with manual syntax coloring. Three actions: copy to clipboard, download `.json`, validate (calls same server endpoint, shows inline badge).
+
+Tests:
+- `packages/canvas/src/components/panels/__tests__/SchemaPanel.test.tsx`
+
+## Out of scope
+
+- Per-node event log storage in DB (would require new table + migration)
+- SSE replay for historical runs (no event log in DB)
+- Run comparison (side-by-side diff of two runs)
+- Infinite scroll pagination (explicit "Load more" is sufficient)
+- Deep JSON diff (shallow key comparison is adequate for state objects)
+- Run re-execution ("Run again with same input") -- nice-to-have, defer
+- Left panel (no left panel yet, only right side panel + activity bar)
+- Dark mode toggle (Phase 6)
+- Python export viewer (Phase 6 -- endpoint exists, UI deferred)
+
+## Architecture constraints
+
+- Components read store only -- no fetch(), no API imports (enforced by tsconfig path aliases)
+- `@api` layer handles all HTTP calls; new functions go in existing `runs.ts` and `graphs.ts`
+- Dialog component exists from Phase 1 -- reuse for ValidationErrorDialog
+- State snapshots exist in `runOutput[]` as `node_completed.data.state_snapshot` -- no new SSE events needed
+- Validate endpoint returns 422 for invalid graphs -- need `requestRaw()` in client.ts
+- List runs and delete run endpoints already exist on backend -- no execution-layer changes
+- Client-side `validateGraph()` uses `nodeId`, server uses `node_ref` -- must normalize
+
+## Decisions & risks
+
+| Decision | Risk | Mitigation |
+|----------|------|------------|
+| Layout refactor as first part | Large diff, touches many files | Extract content from panels (no logic changes), just re-parent into new containers. Existing tests catch regressions. |
+| Activity bar on left edge | FloatingToolbar also on left side of canvas | FloatingToolbar is a canvas overlay (z-10, absolute positioned), activity bar is layout chrome — no conflict. |
+| Side panel swaps content | Lose scroll position when switching | Minor UX cost; acceptable for v1. Can add scroll restoration later. |
+| History in side panel (not bottom) | Different from original plan | Browsing history is a navigation activity, not execution output. Side panel is the right home. |
+| `requestRaw()` for 422 handling | Adds complexity to API client | Isolated to one function. Only validateGraph uses it. Clean separation. |
+| Shallow diff for state inspector | Misses nested changes | Show full tree with expand; highlight top-level key changes. User can drill in. |
+| Pre-run validation adds latency | Extra round-trip before run | Client-side check is instant. Server check ~100ms. Worth it for error prevention. |
+| No per-node debug for historical runs | Users may expect it | Clear UI: "Per-node snapshots available for live runs only." |
+
+## API client functions needed
+
+| Function | File | Endpoint | Notes |
+|----------|------|----------|-------|
+| `requestRaw(method, path, body?)` | `client.ts` | -- | Returns raw Response; caller handles status codes |
+| `listRunsForGraph(graphId, opts?)` | `runs.ts` | `GET /graphs/{graph_id}/runs` | `opts: { status?, limit?, offset? }`. Vite proxy rewrites `/api` to `/v1`. |
+| `deleteRun(runId)` | `runs.ts` | `DELETE /runs/{run_id}` | Returns void (204). New function. |
+| `validateGraph(graphId)` | `graphs.ts` | `POST /graphs/{graph_id}/validate` | Uses `requestRaw()`, handles 422 as success |
+
+All backend endpoints already exist. No execution-layer changes needed.
+
+## Store changes needed
+
+| Store | Change | Part |
+|-------|--------|------|
+| `CanvasContext` | Add `activeSidePanel`, `sidePanelVisible`, `bottomPanelVisible`, `bottomPanelMinimized` | 5.1 |
+| New: `historySlice.ts` | runs[], total, loading, statusFilter, loadRuns(), deleteRun(), setFilter() | 5.2 |
+| Extend: `runSlice.ts` | Add `inspectedNodeId`, `inspectNode()`, `clearInspection()` | 5.3 |
+| Extend: `runSlice.ts` | Add `validationErrors[]` | 5.4 |
diff --git a/.claude/skills/gw-frontend/SKILL.md b/.claude/skills/gw-frontend/SKILL.md
index 78d6402..e74ccdf 100644
--- a/.claude/skills/gw-frontend/SKILL.md
+++ b/.claude/skills/gw-frontend/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: gw-frontend
-description: "React 19 patterns, Zustand store slices (graph/run/UI), React Flow v12 integration, SSE reconnection state machine, human-in-the-loop resume, client-side graph validation, debug panel, LLM router cost warning, shadcn/ui components, and Tailwind dark mode. Load when working on canvas, store slices, SSE connection, components, panels, validation, or run panel."
+description: "React 19 patterns, Zustand store slices (graph/run/UI/settings), React Flow v12 integration, SSE reconnection state machine, human-in-the-loop resume, client-side graph validation, debug panel, LLM router cost warning, shadcn/ui + Radix components, Tailwind dark mode, graph traversal utilities, auto-mapping presets, output key cascading, state panel, and settings store. Load when working on canvas, store slices, SSE connection, components, panels, validation, or run panel."
 disable-model-invocation: true
 ---
 
@@ -57,28 +57,39 @@ packages/canvas/src/
 ├── api/
 │   ├── client.ts     # base fetch wrapper + ApiError class
 │   ├── graphs.ts     # graph CRUD
-│   └── runs.ts       # run start/cancel/resume + SSE stream
+│   ├── runs.ts       # run start/cancel/resume + SSE stream
+│   └── settings.ts   # tool registry + provider status
 ├── components/
 │   ├── canvas/       # GraphCanvas, FloatingToolbar, StampGhost, CanvasHint,
 │   │   │               CanvasHeader, SnapConnectionLine, CanvasRoute,
-│   │   │               RunButton, RunInputDialog
-│   │   └── nodes/    # BaseNodeShell, StartNode, LLMNode, EndNode, nodeTypes
+│   │   │               RunButton, RunInputDialog, RunFormFields
+│   │   ├── nodes/    # BaseNodeShell, StartNode, LLMNode, EndNode,
+│   │   │               ConditionNode, HumanInputNode, ToolNode, nodeTypes
+│   │   └── runInputUtils.ts
 │   ├── home/         # HomeView, GraphCard, NewGraphDialog
-│   ├── panels/       # NodeConfigPanel, RunPanel, RunEventItem, ResumeForm
-│   │   └── config/   # StartNodeConfig, LLMNodeConfig, EndNodeConfig
-│   └── ui/           # Button, Card, Dialog, DropdownMenu, IconButton,
-│                       Input, Select, Sheet, Textarea, Toast, Tooltip
+│   ├── panels/       # NodeConfigPanel, RunPanel, RunEventItem, ResumeForm,
+│   │   │               AddFieldForm, StateFieldRow, StatePanel
+│   │   └── config/   # StartNodeConfig, LLMNodeConfig, EndNodeConfig,
+│   │                   ConditionBranchEditor, ConditionNodeConfig,
+│   │                   HumanInputNodeConfig, ToolNodeConfig, presetUtils
+│   ├── settings/     # SettingsPage
+│   └── ui/           # Button, Card, Combobox, Command, Dialog, DropdownMenu,
+│                       IconButton, Input, Popover, Select (Radix), 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
+│   ├── graphSlice.ts # graph CRUD, nodes/edges, spliceEdge, save/load, renameOutputKey
 │   ├── runSlice.ts   # SSE lifecycle, reconnection, start/cancel/resume
+│   ├── settingsSlice.ts # tool registry, provider status (fetch-once cache)
 │   └── 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)
+└── utils/            # nodeDefaults.ts (NODE_DEFAULTS, SINGLETON_TYPES, findNearestEdge,
+                        isAutoOutputKey, deduplicateOutputKey),
+                        graphTraversal.ts, validateGraph.ts
 ```
 
 ## Zustand store shape
@@ -103,6 +114,22 @@ interface RunSlice {
   resetRun: () => void
 }
 
+// graphSlice.ts — Phase 4 additions
+renameOutputKey: (nodeId: string, oldKey: string, newKey: string) => void;
+// Atomic: updates source node + rewrites downstream input_maps + condition fields + state entries
+
+// settingsSlice.ts — NEW in Phase 4
+interface SettingsSlice {
+  tools: ToolInfo[];              // from @api/settings
+  toolsLoaded: boolean;
+  toolsError: string | null;
+  providers: Record<string, ProviderStatus> | null;  // from @api/settings
+  providersLoaded: boolean;
+  providersError: string | null;
+  loadTools: () => Promise<void>;
+  loadProviders: () => Promise<void>;
+}
+
 // uiSlice.ts — UI preferences only, no credentials
 interface UISlice {
   darkMode: boolean
@@ -165,6 +192,50 @@ Patterns from Canvas Phase 2 — follow these in subsequent phases:
 - **Output truncation** — `RunEventItem` caps output display at 2000 chars to prevent DOM bloat from large LLM responses
 - **Dialog state reset** — `RunInputDialog` resets form state via `useEffect` when `open` transitions to `true`
 
+## Phase 3-4 patterns
+
+Patterns from Canvas Phases 3-4 — follow these in subsequent phases:
+
+### Graph traversal utilities (`utils/graphTraversal.ts`)
+- **`getUpstreamNodeIds(nodeId, edges)`** — BFS backward walk returning ancestor node IDs
+- **`getRelevantFields(nodeId, stateFields, nodes, edges)`** — state fields visible to a node: input fields + upstream outputs only (excludes own output, downstream, siblings)
+- **`isTerminalNode(nodeId, edges, nodes)`** — true if node's only outgoing edges go to End (or has none). Controls whether output_key field is shown.
+- **`rewriteStateExpression(expr, oldKey, newKey)`** — rewrites root key in expressions like `old[-1].content` → `new[-1].content`
+
+### Auto-mapping (`components/panels/config/presetUtils.ts`)
+- **`autoMapParams(toolParams, stateFields, claimedInputKeys?)`** — auto-maps tool params to state fields with precedence: exact match → user_input → enum literal → auto-create → __default__
+- **`getClaimedInputKeys(graphNodes, excludeNodeId)`** — collects root state keys already consumed by other nodes, prevents user_input sharing
+- **`buildPresetsForParam(stateFields, paramType?, sourceLabels?)`** — type-filtered dropdown presets with source node hints
+- **`isEnumLike(param)`** — detects params with 2-5 short example values (mapped to quoted literals)
+
+### Output key management (`utils/nodeDefaults.ts` + `store/graphSlice.ts`)
+- **`isAutoOutputKey(key, toolName?)`** — detects auto-generated keys like `tool_result`, `{tool}_result`
+- **`deduplicateOutputKey(desired, existingKeys)`** — appends `_2`, `_3` etc. to avoid collisions
+- **`renameOutputKey(nodeId, oldKey, newKey)`** — atomic store action: updates source node + rewrites all downstream input_maps + condition fields + state entries
+- **Cascade on blur, not keystroke** — output_key edits fire onChange per keystroke but cascade only on blur via `committedOutputKeyRef`
+
+### State panel (`components/panels/StatePanel.tsx`)
+- **3 entry points**: toolbar icon, config panel "Manage fields →" link, dropdown "+ New field..."
+- **StateFieldRow**: inline editing, usage tracking (which nodes read/write each field), delete with undo toast (5s)
+- **AddFieldForm**: type and reducer selection, dedup against existing keys
+- **`DEFAULT_FIELD_KEYS`** — `Set<string>` of `messages`, `user_input`, `llm_response` (cannot be removed)
+
+### Settings store (`store/settingsSlice.ts`)
+- **`loadTools()`** — fetches tool registry from `/settings/tools`, cached
+- **`loadProviders()`** — fetches provider status + model lists from `/settings/providers`, falls back to hardcoded defaults
+- **Fetch-once pattern**: tools/providers loaded once, cached in store
+
+### Radix Select (`components/ui/Select.tsx`)
+- All selects use Radix-based compound component (SelectTrigger, SelectContent, SelectItem)
+- `description` prop on SelectItem for secondary text (e.g., source node hints)
+- Dark theme matching existing zinc-900 palette
+
+### Input map editor pattern (ToolNodeConfig + LLMNodeConfig)
+- **Collapsed view**: summary rows with check/warning icons, param ← source labels
+- **Expanded view**: card editor with type-filtered dropdowns, custom expression input, mapping warnings
+- **Suggestion chips** (LLM only): clickable presets for upstream output fields
+- **`toRecord(rows)`** — filters __default__ sentinel before persisting to input_map
+
 ## Settings panel — read-only, no key input
 
 The settings panel shows provider status only. It never has key input fields.
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index fa9892a..e300184 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -6,8 +6,8 @@ services:
       - ./packages/execution:/app
       - ./data:/data
     ports:
-      - "8000:8000"
+      - "8001:8001"
     command: >
-      sh -c "pip install uv && uv sync && uv run uvicorn app.main:app --reload --host 0.0.0.0 --port 8000"
+      sh -c "pip install uv && uv sync && uv run uvicorn app.main:app --reload --host 0.0.0.0 --port 8001"
     env_file:
       - ./packages/execution/.env
diff --git a/docker-compose.yml b/docker-compose.yml
index e6ab4e1..96384ab 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,7 +2,7 @@ services:
   execution:
     build: ./packages/execution
     ports:
-      - "8000:8000"
+      - "8001:8001"
     volumes:
       - ./data:/data
     env_file:
diff --git a/packages/canvas/src/api/client.ts b/packages/canvas/src/api/client.ts
index 92209f7..a29e872 100644
--- a/packages/canvas/src/api/client.ts
+++ b/packages/canvas/src/api/client.ts
@@ -21,10 +21,12 @@ function friendlyMessage(status: number, detail: string | null): string {
 
 export class ApiError extends Error {
   status: number;
-  constructor(message: string, status: number) {
+  body: unknown;
+  constructor(message: string, status: number, body?: unknown) {
     super(message);
     this.name = "ApiError";
     this.status = status;
+    this.body = body ?? null;
   }
 }
 
@@ -54,6 +56,7 @@ export async function request<T>(
     throw new ApiError(
       friendlyMessage(response.status, detail),
       response.status,
+      body,
     );
   }
   if (response.status === 204) return undefined as T;
diff --git a/packages/canvas/src/api/graphs.ts b/packages/canvas/src/api/graphs.ts
index c91328e..e65eddd 100644
--- a/packages/canvas/src/api/graphs.ts
+++ b/packages/canvas/src/api/graphs.ts
@@ -1,7 +1,7 @@
 /** Graph CRUD service layer. */
 
 import type { GraphSchema } from "@shared/schema";
-import { request } from "./client";
+import { ApiError, request } from "./client";
 
 interface PaginatedResponse<T> {
   items: T[];
@@ -81,3 +81,36 @@ export async function deleteGraph(id: string): Promise<void> {
     method: "DELETE",
   });
 }
+
+// ---------------------------------------------------------------------------
+// Validation
+// ---------------------------------------------------------------------------
+
+export interface ValidationError {
+  message: string;
+  node_ref: string | null;
+}
+
+export interface ValidateResponse {
+  valid: boolean;
+  errors: ValidationError[];
+}
+
+/** Server-side graph validation — POST /graphs/{graph_id}/validate */
+export async function validateGraphServer(
+  graphId: string,
+): Promise<ValidateResponse> {
+  try {
+    // Server returns 200 with { valid: true } on success
+    return await request<ValidateResponse>(
+      `/graphs/${encodeURIComponent(graphId)}/validate`,
+      { method: "POST" },
+    );
+  } catch (e) {
+    // Server returns 422 with validation errors — extract from ApiError.body
+    if (e instanceof ApiError && e.status === 422 && e.body) {
+      return e.body as ValidateResponse;
+    }
+    throw e;
+  }
+}
diff --git a/packages/canvas/src/api/runs.ts b/packages/canvas/src/api/runs.ts
index 92457f7..5574e36 100644
--- a/packages/canvas/src/api/runs.ts
+++ b/packages/canvas/src/api/runs.ts
@@ -62,6 +62,50 @@ export async function cancelRun(runId: string): Promise<void> {
   });
 }
 
+// ---------------------------------------------------------------------------
+// Run history
+// ---------------------------------------------------------------------------
+
+export type RunStatus = "running" | "paused" | "completed" | "error";
+
+export interface RunListItem {
+  id: string;
+  graph_id: string;
+  status: RunStatus;
+  input: Record<string, unknown>;
+  duration_ms: number | null;
+  created_at: string;
+  error: string | null;
+}
+
+export interface PaginatedRuns {
+  items: RunListItem[];
+  total: number;
+  limit: number;
+  offset: number;
+  has_more: boolean;
+}
+
+/** List runs for a graph — GET /graphs/{graph_id}/runs */
+export async function listRunsForGraph(
+  graphId: string,
+  opts?: { status?: RunStatus; limit?: number; offset?: number },
+): Promise<PaginatedRuns> {
+  const params = new URLSearchParams();
+  if (opts?.status) params.set("status", opts.status);
+  if (opts?.limit != null) params.set("limit", String(opts.limit));
+  if (opts?.offset != null) params.set("offset", String(opts.offset));
+  const qs = params.toString();
+  return request<PaginatedRuns>(
+    `/graphs/${encodeURIComponent(graphId)}/runs${qs ? `?${qs}` : ""}`,
+  );
+}
+
+/** Delete a completed/error run — DELETE /runs/{run_id} */
+export async function deleteRun(runId: string): Promise<void> {
+  await request(`/runs/${encodeURIComponent(runId)}`, { method: "DELETE" });
+}
+
 /** Get current run status — GET /runs/{run_id}/status */
 export async function getRunStatus(runId: string): Promise<RunStatusResponse> {
   return request<RunStatusResponse>(
diff --git a/packages/canvas/src/components/canvas/ActivityBar.tsx b/packages/canvas/src/components/canvas/ActivityBar.tsx
new file mode 100644
index 0000000..e031046
--- /dev/null
+++ b/packages/canvas/src/components/canvas/ActivityBar.tsx
@@ -0,0 +1,76 @@
+import type { SidePanelId } from "@store/panelSlice";
+import { usePanelStore } from "@store/panelSlice";
+import { Tooltip } from "@ui/Tooltip";
+import { Braces, Clock, Database, Settings, Terminal } from "lucide-react";
+
+const SIDE_ITEMS: {
+  id: SidePanelId;
+  icon: typeof Settings;
+  label: string;
+  shortcut: string;
+}[] = [
+  { id: "config", icon: Settings, label: "Node Config", shortcut: "⌘1" },
+  { id: "state", icon: Database, label: "State Fields", shortcut: "⌘2" },
+  { id: "history", icon: Clock, label: "Run History", shortcut: "⌘3" },
+  { id: "schema", icon: Braces, label: "Schema", shortcut: "⌘4" },
+];
+
+export function ActivityBar() {
+  const activeSidePanel = usePanelStore((s) => s.activeSidePanel);
+  const sidePanelVisible = usePanelStore((s) => s.sidePanelVisible);
+  const toggleSidePanel = usePanelStore((s) => s.toggleSidePanel);
+  const bottomPanelVisible = usePanelStore((s) => s.bottomPanelVisible);
+  const toggleBottomPanel = usePanelStore((s) => s.toggleBottomPanel);
+
+  return (
+    <div className="flex w-10 shrink-0 flex-col items-center justify-between border-r border-zinc-800 bg-zinc-950 py-2">
+      <div className="flex flex-col items-center gap-1">
+        {SIDE_ITEMS.map((item) => {
+          const isActive = sidePanelVisible && activeSidePanel === item.id;
+          return (
+            <Tooltip
+              key={item.id}
+              content={`${item.label} ${item.shortcut}`}
+              side="right"
+            >
+              <button
+                type="button"
+                onClick={() => toggleSidePanel(item.id)}
+                className={`relative flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg transition-colors ${
+                  isActive
+                    ? "bg-zinc-800/50 text-zinc-100"
+                    : "text-zinc-500 hover:text-zinc-300"
+                }`}
+                aria-label={item.label}
+                aria-pressed={isActive}
+              >
+                {isActive && (
+                  <span className="absolute left-0 h-5 w-0.5 rounded-r bg-indigo-500" />
+                )}
+                <item.icon size={18} />
+              </button>
+            </Tooltip>
+          );
+        })}
+      </div>
+
+      <div className="flex flex-col items-center">
+        <Tooltip content="Toggle Terminal ⌘J" side="right">
+          <button
+            type="button"
+            onClick={toggleBottomPanel}
+            className={`flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg transition-colors ${
+              bottomPanelVisible
+                ? "text-zinc-100"
+                : "text-zinc-500 hover:text-zinc-300"
+            }`}
+            aria-label="Toggle Terminal"
+            aria-pressed={bottomPanelVisible}
+          >
+            <Terminal size={18} />
+          </button>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/canvas/src/components/canvas/BottomPanel.tsx b/packages/canvas/src/components/canvas/BottomPanel.tsx
new file mode 100644
index 0000000..e2b7dc8
--- /dev/null
+++ b/packages/canvas/src/components/canvas/BottomPanel.tsx
@@ -0,0 +1,111 @@
+import type { BottomTab } from "@store/panelSlice";
+import { usePanelStore } from "@store/panelSlice";
+import { useRunStore } from "@store/runSlice";
+import { IconButton } from "@ui/IconButton";
+import { Minus, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { formatDuration } from "../../utils/format";
+
+const TABS: { id: BottomTab; label: string }[] = [
+  { id: "timeline", label: "Timeline" },
+  { id: "debug", label: "Debug" },
+];
+
+const TAB_BAR_HEIGHT = 33;
+
+interface BottomPanelProps {
+  height: number;
+  children: ReactNode;
+}
+
+export function BottomPanel({ height, children }: BottomPanelProps) {
+  const bottomPanelMinimized = usePanelStore((s) => s.bottomPanelMinimized);
+  const activeBottomTab = usePanelStore((s) => s.activeBottomTab);
+  const setActiveBottomTab = usePanelStore((s) => s.setActiveBottomTab);
+  const setBottomPanelMinimized = usePanelStore(
+    (s) => s.setBottomPanelMinimized,
+  );
+  const setBottomPanelVisible = usePanelStore((s) => s.setBottomPanelVisible);
+
+  const runStatus = useRunStore((s) => s.runStatus);
+  const durationMs = useRunStore((s) => s.durationMs);
+  const activeRunId = useRunStore((s) => s.activeRunId);
+
+  const statusLabel =
+    runStatus === "running"
+      ? "Running..."
+      : runStatus === "completed"
+        ? `Completed ${formatDuration(durationMs)}`
+        : runStatus === "error"
+          ? "Failed"
+          : runStatus === "paused"
+            ? "Paused"
+            : runStatus === "reconnecting"
+              ? "Reconnecting..."
+              : runStatus === "connection_lost"
+                ? "Connection lost"
+                : null;
+
+  return (
+    <div
+      className="flex shrink-0 flex-col border-t border-zinc-800 bg-zinc-900"
+      style={{ height: bottomPanelMinimized ? TAB_BAR_HEIGHT : height }}
+    >
+      {/* Tab bar */}
+      <div className="flex h-[33px] shrink-0 items-center justify-between border-b border-zinc-800 px-2">
+        <div className="flex items-center">
+          {TABS.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => {
+                setActiveBottomTab(tab.id);
+                if (bottomPanelMinimized) setBottomPanelMinimized(false);
+              }}
+              className={`cursor-pointer px-3 py-1.5 text-xs transition-colors ${
+                activeBottomTab === tab.id
+                  ? "border-b-2 border-indigo-500 text-zinc-100"
+                  : "text-zinc-500 hover:text-zinc-300"
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-2">
+          {statusLabel && (
+            <span className="text-[11px] text-zinc-500">
+              {activeRunId && (
+                <span className="mr-1.5 font-mono">
+                  #{activeRunId.slice(0, 6)}
+                </span>
+              )}
+              {statusLabel}
+            </span>
+          )}
+          <div className="flex items-center gap-0.5">
+            <IconButton
+              onClick={() => setBottomPanelMinimized(!bottomPanelMinimized)}
+              aria-label={
+                bottomPanelMinimized ? "Expand panel" : "Minimize panel"
+              }
+            >
+              <Minus size={12} />
+            </IconButton>
+            <IconButton
+              onClick={() => setBottomPanelVisible(false)}
+              aria-label="Close panel"
+            >
+              <X size={12} />
+            </IconButton>
+          </div>
+        </div>
+      </div>
+
+      {/* Content */}
+      {!bottomPanelMinimized && (
+        <div className="flex-1 overflow-y-auto">{children}</div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/canvas/src/components/canvas/CanvasHeader.tsx b/packages/canvas/src/components/canvas/CanvasHeader.tsx
index 2118394..56769e6 100644
--- a/packages/canvas/src/components/canvas/CanvasHeader.tsx
+++ b/packages/canvas/src/components/canvas/CanvasHeader.tsx
@@ -13,6 +13,12 @@ import {
 } from "react";
 import { useNavigate } from "react-router";
 import { validateGraph } from "../../utils/validateGraph";
+import {
+  ValidationErrorDialog,
+  type ValidationItem,
+  fromClientErrors,
+  fromServerErrors,
+} from "../dialogs/ValidationErrorDialog";
 import { RunInputDialog } from "./RunInputDialog";
 import { getConsumedInputFields } from "./runInputUtils";
 
@@ -28,6 +34,8 @@ function CanvasHeaderComponent() {
 
   const [editing, setEditing] = useState(false);
   const [inputDialogOpen, setInputDialogOpen] = useState(false);
+  const [validationItems, setValidationItems] = useState<ValidationItem[]>([]);
+  const [validationDialogOpen, setValidationDialogOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Show toast when saveError appears
@@ -74,18 +82,34 @@ function CanvasHeaderComponent() {
     saveGraph();
   }, [saveGraph]);
 
+  /** Proceed to either show input dialog or start run directly */
+  const proceedToRun = useCallback(() => {
+    const g = useGraphStore.getState().graph;
+    const { consumedFields } = getConsumedInputFields(
+      g?.state ?? [],
+      g?.nodes ?? [],
+    );
+    if (consumedFields.length === 0) {
+      if (g) useRunStore.getState().startRun(g.id, {});
+    } else {
+      setInputDialogOpen(true);
+    }
+  }, []);
+
   const handleRun = useCallback(async () => {
     const { nodes, edges, dirty: isDirty } = useGraphStore.getState();
 
-    const errors = validateGraph(nodes, edges);
-    if (errors.length > 0) {
-      useUIStore
-        .getState()
-        .showToast(errors[0]?.message ?? "Validation failed", "error");
+    // 1. Client-side validation (instant)
+    const clientErrors = validateGraph(nodes, edges);
+    if (clientErrors.length > 0) {
+      setValidationItems(fromClientErrors(clientErrors));
+      setValidationDialogOpen(true);
       return;
     }
 
+    // 2. Save if dirty
     if (isDirty) {
+      useUIStore.getState().showToast("Saving...", "info");
       await useGraphStore.getState().saveGraph();
       if (useGraphStore.getState().saveError) {
         useUIStore
@@ -98,21 +122,38 @@ function CanvasHeaderComponent() {
       }
     }
 
-    const graph = useGraphStore.getState().graph;
-    const { consumedFields } = getConsumedInputFields(
-      graph?.state ?? [],
-      graph?.nodes ?? [],
-    );
+    // 3. Server-side validation
+    const g = useGraphStore.getState().graph;
+    if (!g) return;
 
-    if (consumedFields.length === 0) {
-      // No user input needed — run immediately
-      if (graph) {
-        useRunStore.getState().startRun(graph.id, {});
+    try {
+      useUIStore.getState().showToast("Validating...", "info");
+      const result = await useGraphStore.getState().validateServer();
+      useUIStore.getState().dismissToast();
+
+      if (!result.valid && result.errors.length > 0) {
+        setValidationItems(fromServerErrors(result.errors));
+        setValidationDialogOpen(true);
+        return;
       }
-    } else {
-      setInputDialogOpen(true);
+    } catch {
+      // Server validation unavailable — warn user but proceed (client check passed)
+      useUIStore
+        .getState()
+        .showToast(
+          "Server validation unavailable — proceeding with client checks only",
+          "info",
+        );
     }
-  }, []);
+
+    // 4. Proceed to run
+    proceedToRun();
+  }, [proceedToRun]);
+
+  const handleRunAnyway = useCallback(() => {
+    setValidationDialogOpen(false);
+    proceedToRun();
+  }, [proceedToRun]);
 
   const handleRunSubmit = useCallback(
     (input: Record<string, unknown>) => {
@@ -212,6 +253,13 @@ function CanvasHeaderComponent() {
         onClose={() => setInputDialogOpen(false)}
         onSubmit={handleRunSubmit}
       />
+
+      <ValidationErrorDialog
+        open={validationDialogOpen}
+        onClose={() => setValidationDialogOpen(false)}
+        items={validationItems}
+        onRunAnyway={handleRunAnyway}
+      />
     </>
   );
 }
diff --git a/packages/canvas/src/components/canvas/CanvasRoute.tsx b/packages/canvas/src/components/canvas/CanvasRoute.tsx
index 969bb07..a3134e7 100644
--- a/packages/canvas/src/components/canvas/CanvasRoute.tsx
+++ b/packages/canvas/src/components/canvas/CanvasRoute.tsx
@@ -2,15 +2,69 @@ import { ReactFlowProvider } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 import { CanvasProvider } from "@contexts/CanvasContext";
 import { useGraphStore } from "@store/graphSlice";
+import { useHistoryStore } from "@store/historySlice";
+import { usePanelStore } from "@store/panelSlice";
 import { useRunStore } from "@store/runSlice";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router";
 import { useBeforeUnload } from "../../hooks/useBeforeUnload";
 import { NodeConfigPanel } from "../panels/NodeConfigPanel";
+import { RunHistoryPanel } from "../panels/RunHistoryPanel";
 import { RunPanel } from "../panels/RunPanel";
+import { SchemaPanel } from "../panels/SchemaPanel";
+import { StateInspector } from "../panels/StateInspector";
 import { StatePanel } from "../panels/StatePanel";
+import { ResizeHandle } from "../ui/ResizeHandle";
+import { ActivityBar } from "./ActivityBar";
+import { BottomPanel } from "./BottomPanel";
 import { CanvasHeader } from "./CanvasHeader";
 import { GraphCanvas } from "./GraphCanvas";
+import { SidePanel } from "./SidePanel";
+
+// ── Panel size persistence ──────────────────────────────────────────
+
+const STORAGE_KEY = "gw-panel-sizes";
+const DEFAULT_SIDE_WIDTH = 320;
+const DEFAULT_BOTTOM_HEIGHT = 256;
+const MIN_SIDE_WIDTH = 240;
+const MAX_SIDE_WIDTH = 480;
+const MIN_BOTTOM_HEIGHT = 120;
+const MAX_BOTTOM_HEIGHT = 600;
+
+function loadPanelSizes(): { sideWidth: number; bottomHeight: number } {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      return {
+        sideWidth: Math.max(
+          MIN_SIDE_WIDTH,
+          Math.min(MAX_SIDE_WIDTH, parsed.sideWidth ?? DEFAULT_SIDE_WIDTH),
+        ),
+        bottomHeight: Math.max(
+          MIN_BOTTOM_HEIGHT,
+          Math.min(
+            MAX_BOTTOM_HEIGHT,
+            parsed.bottomHeight ?? DEFAULT_BOTTOM_HEIGHT,
+          ),
+        ),
+      };
+    }
+  } catch {
+    // ignore parse errors
+  }
+  return { sideWidth: DEFAULT_SIDE_WIDTH, bottomHeight: DEFAULT_BOTTOM_HEIGHT };
+}
+
+function savePanelSizes(sizes: { sideWidth: number; bottomHeight: number }) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(sizes));
+  } catch {
+    // ignore quota errors
+  }
+}
+
+// ── CanvasRoute (outer) ─────────────────────────────────────────────
 
 export function CanvasRoute() {
   const { id } = useParams<{ id: string }>();
@@ -26,6 +80,7 @@ export function CanvasRoute() {
   useEffect(() => {
     if (prevIdRef.current !== id) {
       resetRun();
+      useHistoryStore.getState().reset();
     }
     prevIdRef.current = id;
   }, [id, resetRun]);
@@ -64,16 +119,146 @@ export function CanvasRoute() {
   return (
     <ReactFlowProvider>
       <CanvasProvider>
-        <div className="h-screen w-screen bg-zinc-950 text-zinc-100">
-          <CanvasHeader />
-          <main className="relative h-[calc(100vh-3rem)]">
-            <GraphCanvas />
-            <StatePanel />
-            <NodeConfigPanel />
-            <RunPanel />
-          </main>
-        </div>
+        <CanvasWorkspace />
       </CanvasProvider>
     </ReactFlowProvider>
   );
 }
+
+// ── CanvasWorkspace (inner, uses CanvasContext) ──────────────────────
+
+function CanvasWorkspace() {
+  const activeSidePanel = usePanelStore((s) => s.activeSidePanel);
+  const sidePanelVisible = usePanelStore((s) => s.sidePanelVisible);
+  const bottomPanelVisible = usePanelStore((s) => s.bottomPanelVisible);
+  const bottomPanelMinimized = usePanelStore((s) => s.bottomPanelMinimized);
+  const activeBottomTab = usePanelStore((s) => s.activeBottomTab);
+  const toggleSidePanel = usePanelStore((s) => s.toggleSidePanel);
+  const toggleBottomPanel = usePanelStore((s) => s.toggleBottomPanel);
+  const setBottomPanelVisible = usePanelStore((s) => s.setBottomPanelVisible);
+  const setBottomPanelMinimized = usePanelStore(
+    (s) => s.setBottomPanelMinimized,
+  );
+
+  const runStatus = useRunStore((s) => s.runStatus);
+
+  // Panel sizes with localStorage persistence (parse once)
+  const [sizes] = useState(loadPanelSizes);
+  const [sideWidth, setSideWidth] = useState(sizes.sideWidth);
+  const [bottomHeight, setBottomHeight] = useState(sizes.bottomHeight);
+  const sideWidthRef = useRef(sideWidth);
+  const bottomHeightRef = useRef(bottomHeight);
+  useEffect(() => {
+    sideWidthRef.current = sideWidth;
+  }, [sideWidth]);
+  useEffect(() => {
+    bottomHeightRef.current = bottomHeight;
+  }, [bottomHeight]);
+
+  // Auto-open bottom panel on run start + clear historical inspection
+  const prevRunStatus = useRef(runStatus);
+  useEffect(() => {
+    if (prevRunStatus.current === "idle" && runStatus !== "idle") {
+      setBottomPanelVisible(true);
+      setBottomPanelMinimized(false);
+      useHistoryStore.getState().clearInspectedRun();
+    }
+    prevRunStatus.current = runStatus;
+  }, [runStatus, setBottomPanelVisible, setBottomPanelMinimized]);
+
+  // Keyboard shortcuts: Cmd+1-4 for side panels, Cmd+J for bottom
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      if (!e.metaKey && !e.ctrlKey) return;
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      const panels = ["config", "state", "history", "schema"] as const;
+      const idx = Number(e.key) - 1;
+      if (idx >= 0 && idx < panels.length) {
+        e.preventDefault();
+        const panel = panels[idx];
+        if (panel) toggleSidePanel(panel);
+        return;
+      }
+      if (e.key === "j" || e.key === "J") {
+        e.preventDefault();
+        toggleBottomPanel();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidePanel, toggleBottomPanel]);
+
+  // Resize handlers
+  const handleSideResize = useCallback((delta: number) => {
+    setSideWidth((w) =>
+      Math.max(MIN_SIDE_WIDTH, Math.min(MAX_SIDE_WIDTH, w - delta)),
+    );
+  }, []);
+
+  const handleBottomResize = useCallback((delta: number) => {
+    setBottomHeight((h) => {
+      const maxH = window.innerHeight * 0.5;
+      return Math.max(MIN_BOTTOM_HEIGHT, Math.min(maxH, h - delta));
+    });
+  }, []);
+
+  const handleResizeEnd = useCallback(() => {
+    savePanelSizes({
+      sideWidth: sideWidthRef.current,
+      bottomHeight: bottomHeightRef.current,
+    });
+  }, []);
+
+  const showSidePanel = sidePanelVisible && activeSidePanel !== null;
+  const showBottomPanel = bottomPanelVisible;
+
+  return (
+    <div className="h-screen w-screen bg-zinc-950 text-zinc-100">
+      <CanvasHeader />
+      <main className="flex h-[calc(100vh-3rem)]">
+        <ActivityBar />
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="relative min-h-0 flex-1">
+            <GraphCanvas />
+          </div>
+          {showBottomPanel && !bottomPanelMinimized && (
+            <ResizeHandle
+              direction="horizontal"
+              onResize={handleBottomResize}
+              onResizeEnd={handleResizeEnd}
+            />
+          )}
+          {showBottomPanel && (
+            <BottomPanel height={bottomHeight}>
+              {activeBottomTab === "timeline" && <RunPanel />}
+              {activeBottomTab === "debug" && <StateInspector />}
+            </BottomPanel>
+          )}
+        </div>
+        {showSidePanel && (
+          <>
+            <ResizeHandle
+              direction="vertical"
+              onResize={handleSideResize}
+              onResizeEnd={handleResizeEnd}
+            />
+            <SidePanel width={sideWidth}>
+              {activeSidePanel === "config" && <NodeConfigPanel />}
+              {activeSidePanel === "state" && <StatePanel />}
+              {activeSidePanel === "history" && <RunHistoryPanel />}
+              {activeSidePanel === "schema" && <SchemaPanel />}
+            </SidePanel>
+          </>
+        )}
+      </main>
+    </div>
+  );
+}
diff --git a/packages/canvas/src/components/canvas/FloatingToolbar.tsx b/packages/canvas/src/components/canvas/FloatingToolbar.tsx
index e5701c1..2fbd290 100644
--- a/packages/canvas/src/components/canvas/FloatingToolbar.tsx
+++ b/packages/canvas/src/components/canvas/FloatingToolbar.tsx
@@ -1,7 +1,7 @@
 import { useCanvasContext } from "@contexts/CanvasContext";
 import { useGraphStore } from "@store/graphSlice";
 import { Tooltip } from "@ui/Tooltip";
-import { CircuitBoard, Database, MousePointer2, X } from "lucide-react";
+import { CircuitBoard, MousePointer2, X } from "lucide-react";
 import {
   type DragEvent,
   useCallback,
@@ -13,8 +13,7 @@ import { TOOLBAR_ITEMS } from "../../constants/toolbarItems";
 import { SINGLETON_TYPES } from "../../utils/nodeDefaults";
 
 function FloatingToolbarComponent() {
-  const { stampNodeType, setStampNodeType, statePanelOpen, setStatePanelOpen } =
-    useCanvasContext();
+  const { stampNodeType, setStampNodeType } = useCanvasContext();
   const nodes = useGraphStore((s) => s.nodes);
   const [expanded, setExpanded] = useState(stampNodeType !== null);
 
@@ -162,7 +161,7 @@ function FloatingToolbarComponent() {
           </div>
         </>
       ) : (
-        /* Collapsed: Pointer + Nodes + State */
+        /* Collapsed: Pointer + Nodes */
         <div className="flex flex-col gap-1 p-1.5">
           <Tooltip content="Pointer" side="right">
             <button
@@ -189,22 +188,6 @@ function FloatingToolbarComponent() {
               <CircuitBoard size={16} />
             </button>
           </Tooltip>
-
-          <Tooltip content="State fields" side="right">
-            <button
-              type="button"
-              onClick={() => setStatePanelOpen(!statePanelOpen)}
-              className={`flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg transition-colors ${
-                statePanelOpen
-                  ? "bg-zinc-700/50 text-zinc-100"
-                  : "text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200"
-              }`}
-              aria-label="State fields"
-              aria-pressed={statePanelOpen}
-            >
-              <Database size={16} />
-            </button>
-          </Tooltip>
         </div>
       )}
     </div>
diff --git a/packages/canvas/src/components/canvas/GraphCanvas.tsx b/packages/canvas/src/components/canvas/GraphCanvas.tsx
index 2c87352..f17a186 100644
--- a/packages/canvas/src/components/canvas/GraphCanvas.tsx
+++ b/packages/canvas/src/components/canvas/GraphCanvas.tsx
@@ -1,5 +1,7 @@
 import { useCanvasContext } from "@contexts/CanvasContext";
 import { useGraphStore } from "@store/graphSlice";
+import { usePanelStore } from "@store/panelSlice";
+import { useRunStore } from "@store/runSlice";
 import { useUIStore } from "@store/uiSlice";
 import {
   Background,
@@ -27,6 +29,7 @@ import { useNodePlacement } from "../../hooks/useNodePlacement";
 import { toRFEdge, toRFNode } from "../../types/mappers";
 import { CanvasHint } from "./CanvasHint";
 import { FloatingToolbar } from "./FloatingToolbar";
+import { PanelControlToolbar } from "./PanelControlToolbar";
 import { SnapConnectionLine } from "./SnapConnectionLine";
 import { StampGhost } from "./StampGhost";
 import { nodeTypes } from "./nodes/nodeTypes";
@@ -93,6 +96,12 @@ export function GraphCanvas() {
     reactFlowInstance,
     stampNodeType,
   } = useCanvasContext();
+  const openSidePanel = usePanelStore((s) => s.openSidePanel);
+  const setActiveBottomTab = usePanelStore((s) => s.setActiveBottomTab);
+  const setBottomPanelVisible = usePanelStore((s) => s.setBottomPanelVisible);
+  const setBottomPanelMinimized = usePanelStore(
+    (s) => s.setBottomPanelMinimized,
+  );
   const toastMessage = useUIStore((s) => s.toastMessage);
   const toastVariant = useUIStore((s) => s.toastVariant);
   const dismissToast = useUIStore((s) => s.dismissToast);
@@ -280,8 +289,23 @@ export function GraphCanvas() {
   const onNodeClick: NodeMouseHandler = useCallback(
     (_event, node) => {
       setSelectedNodeId(node.id);
+      const status = useRunStore.getState().runStatus;
+      if (status === "idle") {
+        openSidePanel("config");
+      } else {
+        // Debug mode: show state inspector in bottom panel
+        setActiveBottomTab("debug");
+        setBottomPanelVisible(true);
+        setBottomPanelMinimized(false);
+      }
     },
-    [setSelectedNodeId],
+    [
+      setSelectedNodeId,
+      openSidePanel,
+      setActiveBottomTab,
+      setBottomPanelVisible,
+      setBottomPanelMinimized,
+    ],
   );
 
   const onPaneClick = useCallback(
@@ -349,6 +373,7 @@ export function GraphCanvas() {
         />
       </ReactFlow>
       <FloatingToolbar />
+      <PanelControlToolbar />
       <StampGhost />
       <CanvasHint nodeCount={storeNodes.length} />
       {toastMessage && (
diff --git a/packages/canvas/src/components/canvas/PanelControlToolbar.tsx b/packages/canvas/src/components/canvas/PanelControlToolbar.tsx
new file mode 100644
index 0000000..bddfb51
--- /dev/null
+++ b/packages/canvas/src/components/canvas/PanelControlToolbar.tsx
@@ -0,0 +1,57 @@
+import { usePanelStore } from "@store/panelSlice";
+import { Tooltip } from "@ui/Tooltip";
+import { PanelBottom, PanelLeft, PanelRight } from "lucide-react";
+
+export function PanelControlToolbar() {
+  const sidePanelVisible = usePanelStore((s) => s.sidePanelVisible);
+  const setSidePanelVisible = usePanelStore((s) => s.setSidePanelVisible);
+  const bottomPanelVisible = usePanelStore((s) => s.bottomPanelVisible);
+  const setBottomPanelVisible = usePanelStore((s) => s.setBottomPanelVisible);
+
+  return (
+    <div className="absolute top-3 right-3 z-10 flex items-center gap-0.5 rounded-md border border-zinc-800 bg-zinc-900/80 p-1 backdrop-blur-sm">
+      <Tooltip content="Left Panel" side="bottom">
+        <button
+          type="button"
+          disabled
+          className="flex h-6 w-6 cursor-not-allowed items-center justify-center rounded text-zinc-600"
+          aria-label="Toggle left panel"
+        >
+          <PanelLeft size={16} />
+        </button>
+      </Tooltip>
+
+      <Tooltip content="Bottom Panel" side="bottom">
+        <button
+          type="button"
+          onClick={() => setBottomPanelVisible(!bottomPanelVisible)}
+          className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded transition-colors ${
+            bottomPanelVisible
+              ? "text-zinc-100"
+              : "text-zinc-500 hover:text-zinc-300"
+          }`}
+          aria-label="Toggle bottom panel"
+          aria-pressed={bottomPanelVisible}
+        >
+          <PanelBottom size={16} />
+        </button>
+      </Tooltip>
+
+      <Tooltip content="Right Panel" side="bottom">
+        <button
+          type="button"
+          onClick={() => setSidePanelVisible(!sidePanelVisible)}
+          className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded transition-colors ${
+            sidePanelVisible
+              ? "text-zinc-100"
+              : "text-zinc-500 hover:text-zinc-300"
+          }`}
+          aria-label="Toggle right panel"
+          aria-pressed={sidePanelVisible}
+        >
+          <PanelRight size={16} />
+        </button>
+      </Tooltip>
+    </div>
+  );
+}
diff --git a/packages/canvas/src/components/canvas/SidePanel.tsx b/packages/canvas/src/components/canvas/SidePanel.tsx
new file mode 100644
index 0000000..0f5cd30
--- /dev/null
+++ b/packages/canvas/src/components/canvas/SidePanel.tsx
@@ -0,0 +1,43 @@
+import type { SidePanelId } from "@store/panelSlice";
+import { usePanelStore } from "@store/panelSlice";
+import { IconButton } from "@ui/IconButton";
+import { X } from "lucide-react";
+import type { ReactNode } from "react";
+
+const PANEL_TITLES: Record<SidePanelId, string> = {
+  config: "Node Config",
+  state: "State Fields",
+  history: "Run History",
+  schema: "Schema",
+};
+
+interface SidePanelProps {
+  width: number;
+  children: ReactNode;
+}
+
+export function SidePanel({ width, children }: SidePanelProps) {
+  const activeSidePanel = usePanelStore((s) => s.activeSidePanel);
+  const closeSidePanel = usePanelStore((s) => s.closeSidePanel);
+
+  if (!activeSidePanel) return null;
+
+  return (
+    <div
+      className="flex flex-col border-l border-zinc-800 bg-zinc-900"
+      style={{ width, minWidth: width }}
+      role="complementary"
+      aria-label={PANEL_TITLES[activeSidePanel]}
+    >
+      <div className="flex h-[49px] shrink-0 items-center justify-between border-b border-zinc-800 px-4">
+        <h2 className="text-sm font-semibold text-zinc-100">
+          {PANEL_TITLES[activeSidePanel]}
+        </h2>
+        <IconButton onClick={closeSidePanel} aria-label="Close panel">
+          <X size={14} />
+        </IconButton>
+      </div>
+      <div className="flex-1 overflow-y-auto p-4">{children}</div>
+    </div>
+  );
+}
diff --git a/packages/canvas/src/components/canvas/__tests__/CanvasHeader.test.tsx b/packages/canvas/src/components/canvas/__tests__/CanvasHeader.test.tsx
index 317a2b3..8815436 100644
--- a/packages/canvas/src/components/canvas/__tests__/CanvasHeader.test.tsx
+++ b/packages/canvas/src/components/canvas/__tests__/CanvasHeader.test.tsx
@@ -34,6 +34,20 @@ vi.mock("react-router", () => ({
   useNavigate: () => mockNavigate,
 }));
 
+vi.mock("@contexts/CanvasContext", () => ({
+  useCanvasContext: () => ({
+    selectedNodeId: null,
+    setSelectedNodeId: vi.fn(),
+  }),
+}));
+
+vi.mock("@store/panelSlice", () => ({
+  usePanelStore: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({
+      openSidePanel: vi.fn(),
+    }),
+}));
+
 beforeEach(() => {
   mockGraph = { name: "Test Graph" };
   mockDirty = false;
diff --git a/packages/canvas/src/components/canvas/__tests__/CanvasRoute.test.tsx b/packages/canvas/src/components/canvas/__tests__/CanvasRoute.test.tsx
index 6e9d26f..62312ea 100644
--- a/packages/canvas/src/components/canvas/__tests__/CanvasRoute.test.tsx
+++ b/packages/canvas/src/components/canvas/__tests__/CanvasRoute.test.tsx
@@ -45,8 +45,24 @@ vi.mock("@store/graphSlice", () => ({
 }));
 
 vi.mock("@store/runSlice", () => ({
-  useRunStore: (selector: (s: Record<string, unknown>) => unknown) =>
-    selector({ resetRun: mockResetRun }),
+  useRunStore: Object.assign(
+    (selector: (s: Record<string, unknown>) => unknown) =>
+      selector({
+        resetRun: mockResetRun,
+        runStatus: "idle",
+        runOutput: [],
+        durationMs: null,
+        activeRunId: null,
+        errorMessage: null,
+        errorTitle: null,
+        pausedPrompt: null,
+      }),
+    {
+      getState: () => ({
+        runStatus: "idle",
+      }),
+    },
+  ),
 }));
 
 vi.mock("@xyflow/react", () => ({
@@ -59,6 +75,32 @@ vi.mock("@contexts/CanvasContext", () => ({
   CanvasProvider: ({ children }: { children: React.ReactNode }) => (
     <div>{children}</div>
   ),
+  useCanvasContext: () => ({
+    selectedNodeId: null,
+    setSelectedNodeId: vi.fn(),
+    reactFlowInstance: null,
+    stampNodeType: null,
+    setStampNodeType: vi.fn(),
+  }),
+}));
+
+vi.mock("@store/panelSlice", () => ({
+  usePanelStore: (selector: (s: Record<string, unknown>) => unknown) =>
+    selector({
+      activeSidePanel: "config",
+      sidePanelVisible: true,
+      bottomPanelVisible: false,
+      bottomPanelMinimized: false,
+      activeBottomTab: "timeline",
+      toggleSidePanel: vi.fn(),
+      toggleBottomPanel: vi.fn(),
+      openSidePanel: vi.fn(),
+      closeSidePanel: vi.fn(),
+      setSidePanelVisible: vi.fn(),
+      setBottomPanelVisible: vi.fn(),
+      setBottomPanelMinimized: vi.fn(),
+      setActiveBottomTab: vi.fn(),
+    }),
 }));
 
 vi.mock("../CanvasHeader", () => ({
diff --git a/packages/canvas/src/components/dialogs/ValidationErrorDialog.tsx b/packages/canvas/src/components/dialogs/ValidationErrorDialog.tsx
new file mode 100644
index 0000000..12c97da
--- /dev/null
+++ b/packages/canvas/src/components/dialogs/ValidationErrorDialog.tsx
@@ -0,0 +1,145 @@
+import { useCanvasContext } from "@contexts/CanvasContext";
+import { usePanelStore } from "@store/panelSlice";
+import { Button } from "@ui/Button";
+import { Dialog } from "@ui/Dialog";
+import { AlertCircle, XCircle } from "lucide-react";
+import { useCallback } from "react";
+
+export interface ValidationItem {
+  message: string;
+  nodeId: string | null;
+  severity: "error" | "warning";
+}
+
+interface ValidationErrorDialogProps {
+  open: boolean;
+  onClose: () => void;
+  items: ValidationItem[];
+  onRunAnyway?: () => void;
+}
+
+export function ValidationErrorDialog({
+  open,
+  onClose,
+  items,
+  onRunAnyway,
+}: ValidationErrorDialogProps) {
+  const { setSelectedNodeId } = useCanvasContext();
+  const openSidePanel = usePanelStore((s) => s.openSidePanel);
+
+  const errors = items.filter((i) => i.severity === "error");
+  const warnings = items.filter((i) => i.severity === "warning");
+  const hasErrors = errors.length > 0;
+
+  const handleGoToNode = useCallback(
+    (nodeId: string) => {
+      setSelectedNodeId(nodeId);
+      openSidePanel("config");
+      onClose();
+    },
+    [setSelectedNodeId, openSidePanel, onClose],
+  );
+
+  const title = hasErrors ? "Validation Errors" : "Validation Warnings";
+
+  return (
+    <Dialog open={open} onClose={onClose} title={title}>
+      {hasErrors && (
+        <p className="mb-3 text-xs text-zinc-400">
+          {errors.length} error{errors.length > 1 ? "s" : ""} must be fixed
+          before running:
+        </p>
+      )}
+
+      <div className="space-y-2">
+        {errors.map((item, i) => (
+          <ValidationRow
+            // biome-ignore lint/suspicious/noArrayIndexKey: validation items are static per render
+            key={`e-${i}`}
+            item={item}
+            onGoToNode={handleGoToNode}
+          />
+        ))}
+        {warnings.length > 0 && errors.length > 0 && (
+          <div className="border-t border-zinc-800 pt-2" />
+        )}
+        {warnings.length > 0 && !hasErrors && (
+          <p className="mb-3 text-xs text-zinc-400">
+            {warnings.length} warning{warnings.length > 1 ? "s" : ""}:
+          </p>
+        )}
+        {warnings.map((item, i) => (
+          <ValidationRow
+            // biome-ignore lint/suspicious/noArrayIndexKey: validation items are static per render
+            key={`w-${i}`}
+            item={item}
+            onGoToNode={handleGoToNode}
+          />
+        ))}
+      </div>
+
+      <div className="mt-4 flex justify-end gap-2">
+        {!hasErrors && onRunAnyway && (
+          <Button variant="ghost" onClick={onRunAnyway}>
+            Run anyway
+          </Button>
+        )}
+        <Button variant="primary" onClick={onClose}>
+          Fix issues
+        </Button>
+      </div>
+    </Dialog>
+  );
+}
+
+function ValidationRow({
+  item,
+  onGoToNode,
+}: {
+  item: ValidationItem;
+  onGoToNode: (nodeId: string) => void;
+}) {
+  const isError = item.severity === "error";
+  const Icon = isError ? XCircle : AlertCircle;
+  const color = isError ? "text-red-400" : "text-amber-400";
+
+  return (
+    <div className="flex items-start gap-2 rounded border border-zinc-800 bg-zinc-800/30 px-3 py-2">
+      <Icon size={14} className={`mt-0.5 shrink-0 ${color}`} />
+      <div className="min-w-0 flex-1">
+        <p className="text-xs text-zinc-300">{item.message}</p>
+        {item.nodeId && (
+          <button
+            type="button"
+            onClick={() => onGoToNode(item.nodeId as string)}
+            className="mt-1 cursor-pointer text-[11px] text-indigo-400 hover:text-indigo-300"
+          >
+            Go to node
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Convert server validation errors to ValidationItems */
+export function fromServerErrors(
+  errors: { message: string; node_ref: string | null }[],
+): ValidationItem[] {
+  return errors.map((e) => ({
+    message: e.message,
+    nodeId: e.node_ref,
+    severity: "error" as const,
+  }));
+}
+
+/** Convert client validation errors to ValidationItems */
+export function fromClientErrors(
+  errors: { message: string; nodeId?: string }[],
+): ValidationItem[] {
+  return errors.map((e) => ({
+    message: e.message,
+    nodeId: e.nodeId ?? null,
+    severity: "error" as const,
+  }));
+}
diff --git a/packages/canvas/src/components/panels/JsonTree.tsx b/packages/canvas/src/components/panels/JsonTree.tsx
new file mode 100644
index 0000000..b3f2989
--- /dev/null
+++ b/packages/canvas/src/components/panels/JsonTree.tsx
@@ -0,0 +1,177 @@
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { memo, useCallback, useState } from "react";
+
+interface JsonTreeProps {
+  data: unknown;
+  label?: string;
+  badge?: "new" | "modified" | "removed" | "unchanged" | null;
+  defaultExpanded?: boolean;
+}
+
+const BADGE_STYLES: Record<string, string> = {
+  new: "bg-emerald-500/20 text-emerald-400",
+  modified: "bg-amber-500/20 text-amber-400",
+  removed: "bg-red-500/20 text-red-400",
+  unchanged: "bg-zinc-700/30 text-zinc-500",
+};
+
+const BADGE_LABEL: Record<string, string> = {
+  new: "NEW",
+  modified: "~",
+  removed: "-",
+  unchanged: "=",
+};
+
+function JsonTreeNode({
+  data,
+  label,
+  badge,
+  defaultExpanded = false,
+}: JsonTreeProps) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const toggle = useCallback(() => setExpanded((e) => !e), []);
+
+  if (data === null || data === undefined) {
+    return (
+      <Row label={label} badge={badge}>
+        <span className="text-zinc-500">null</span>
+      </Row>
+    );
+  }
+
+  if (typeof data === "string") {
+    const truncated = data.length > 120 ? `${data.slice(0, 120)}...` : data;
+    return (
+      <Row label={label} badge={badge}>
+        <span className="text-emerald-300">&quot;{truncated}&quot;</span>
+      </Row>
+    );
+  }
+
+  if (typeof data === "number" || typeof data === "boolean") {
+    return (
+      <Row label={label} badge={badge}>
+        <span className="text-amber-300">{String(data)}</span>
+      </Row>
+    );
+  }
+
+  if (Array.isArray(data)) {
+    if (data.length === 0) {
+      return (
+        <Row label={label} badge={badge}>
+          <span className="text-zinc-500">[]</span>
+        </Row>
+      );
+    }
+    return (
+      <Expandable
+        label={label}
+        badge={badge}
+        summary={`Array(${data.length})`}
+        expanded={expanded}
+        onToggle={toggle}
+      >
+        {data.map((item, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: JSON tree indices are stable
+          <JsonTreeNode key={i} data={item} label={String(i)} />
+        ))}
+      </Expandable>
+    );
+  }
+
+  if (typeof data === "object") {
+    const entries = Object.entries(data as Record<string, unknown>);
+    if (entries.length === 0) {
+      return (
+        <Row label={label} badge={badge}>
+          <span className="text-zinc-500">{"{}"}</span>
+        </Row>
+      );
+    }
+    return (
+      <Expandable
+        label={label}
+        badge={badge}
+        summary={`{${entries.length} keys}`}
+        expanded={expanded}
+        onToggle={toggle}
+      >
+        {entries.map(([key, val]) => (
+          <JsonTreeNode key={key} data={val} label={key} />
+        ))}
+      </Expandable>
+    );
+  }
+
+  return (
+    <Row label={label} badge={badge}>
+      <span className="text-zinc-400">{String(data)}</span>
+    </Row>
+  );
+}
+
+function Row({
+  label,
+  badge,
+  children,
+}: {
+  label?: string;
+  badge?: string | null;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-baseline gap-1.5 py-0.5 pl-4 font-mono text-[11px]">
+      {label != null && <span className="text-zinc-400">{label}:</span>}
+      {children}
+      {badge && (
+        <span
+          className={`ml-1 rounded px-1 text-[9px] font-semibold ${BADGE_STYLES[badge] ?? ""}`}
+        >
+          {BADGE_LABEL[badge] ?? badge}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function Expandable({
+  label,
+  badge,
+  summary,
+  expanded,
+  onToggle,
+  children,
+}: {
+  label?: string;
+  badge?: string | null;
+  summary: string;
+  expanded: boolean;
+  onToggle: () => void;
+  children: React.ReactNode;
+}) {
+  const Icon = expanded ? ChevronDown : ChevronRight;
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={onToggle}
+        className="flex w-full cursor-pointer items-baseline gap-1 py-0.5 pl-1 font-mono text-[11px] hover:bg-zinc-800/50"
+      >
+        <Icon size={10} className="shrink-0 text-zinc-500" />
+        {label != null && <span className="text-zinc-400">{label}:</span>}
+        <span className="text-zinc-500">{summary}</span>
+        {badge && (
+          <span
+            className={`ml-1 rounded px-1 text-[9px] font-semibold ${BADGE_STYLES[badge] ?? ""}`}
+          >
+            {BADGE_LABEL[badge] ?? badge}
+          </span>
+        )}
+      </button>
+      {expanded && <div className="pl-3">{children}</div>}
+    </div>
+  );
+}
+
+export const JsonTree = memo(JsonTreeNode);
diff --git a/packages/canvas/src/components/panels/NodeConfigPanel.tsx b/packages/canvas/src/components/panels/NodeConfigPanel.tsx
index 59f44fa..b282b1e 100644
--- a/packages/canvas/src/components/panels/NodeConfigPanel.tsx
+++ b/packages/canvas/src/components/panels/NodeConfigPanel.tsx
@@ -8,7 +8,6 @@ import type {
 } from "@shared/schema";
 import { useGraphStore } from "@store/graphSlice";
 import { Button } from "@ui/Button";
-import { Sheet } from "@ui/Sheet";
 import { Trash2 } from "lucide-react";
 import { useCallback, useMemo } from "react";
 import { ConditionNodeConfig } from "./config/ConditionNodeConfig";
@@ -45,34 +44,31 @@ export function NodeConfigPanel() {
     }
   }, [selectedNodeId, removeNode, setSelectedNodeId]);
 
-  const handleClose = useCallback(() => {
-    setSelectedNodeId(null);
-  }, [setSelectedNodeId]);
+  if (!selectedNode) {
+    return (
+      <p className="mt-8 text-center text-sm text-zinc-500">
+        Click a node to edit its configuration.
+      </p>
+    );
+  }
 
   return (
-    <Sheet
-      open={!!selectedNode}
-      onClose={handleClose}
-      title={selectedNode ? `${selectedNode.type.toUpperCase()} Node` : ""}
-      side="right"
-    >
-      {selectedNode && (
-        <>
-          {renderConfigForm(selectedNode, handleChange)}
-
-          <div className="mt-6 border-t border-zinc-800 pt-4">
-            <Button
-              variant="ghost"
-              onClick={handleDelete}
-              className="text-red-400 hover:text-red-300"
-            >
-              <Trash2 size={14} className="mr-1" />
-              Delete Node
-            </Button>
-          </div>
-        </>
-      )}
-    </Sheet>
+    <>
+      <h3 className="mb-3 text-xs font-semibold tracking-wide text-zinc-400">
+        {selectedNode.type.toUpperCase()} Node
+      </h3>
+      {renderConfigForm(selectedNode, handleChange)}
+      <div className="mt-6 border-t border-zinc-800 pt-4">
+        <Button
+          variant="ghost"
+          onClick={handleDelete}
+          className="text-red-400 hover:text-red-300"
+        >
+          <Trash2 size={14} className="mr-1" />
+          Delete Node
+        </Button>
+      </div>
+    </>
   );
 }
 
diff --git a/packages/canvas/src/components/panels/RunHistoryPanel.tsx b/packages/canvas/src/components/panels/RunHistoryPanel.tsx
new file mode 100644
index 0000000..a18feb8
--- /dev/null
+++ b/packages/canvas/src/components/panels/RunHistoryPanel.tsx
@@ -0,0 +1,234 @@
+import { useGraphStore } from "@store/graphSlice";
+import type { RunStatus } from "@store/historySlice";
+import { useHistoryStore } from "@store/historySlice";
+import { usePanelStore } from "@store/panelSlice";
+import { useRunStore } from "@store/runSlice";
+import {
+  AlertCircle,
+  CheckCircle2,
+  Loader2,
+  Pause,
+  Trash2,
+} from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
+import { formatDuration } from "../../utils/format";
+
+const STATUS_FILTERS: { label: string; value: RunStatus | null }[] = [
+  { label: "All", value: null },
+  { label: "Completed", value: "completed" },
+  { label: "Error", value: "error" },
+  { label: "Paused", value: "paused" },
+];
+
+const STATUS_ICON: Record<
+  RunStatus,
+  { icon: typeof CheckCircle2; color: string }
+> = {
+  completed: { icon: CheckCircle2, color: "text-emerald-400" },
+  error: { icon: AlertCircle, color: "text-red-400" },
+  paused: { icon: Pause, color: "text-amber-400" },
+  running: { icon: Loader2, color: "text-indigo-400" },
+};
+
+function formatTimestamp(iso: string): string {
+  const d = new Date(iso);
+  return d.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export function RunHistoryPanel() {
+  const graphId = useGraphStore((s) => s.graph?.id);
+  const runs = useHistoryStore((s) => s.runs);
+  const total = useHistoryStore((s) => s.total);
+  const loading = useHistoryStore((s) => s.loading);
+  const error = useHistoryStore((s) => s.error);
+  const statusFilter = useHistoryStore((s) => s.statusFilter);
+  const loadRuns = useHistoryStore((s) => s.loadRuns);
+  const setStatusFilter = useHistoryStore((s) => s.setStatusFilter);
+  const deleteRun = useHistoryStore((s) => s.deleteRun);
+  const inspectRun = useHistoryStore((s) => s.inspectRun);
+  const clearInspectedRun = useHistoryStore((s) => s.clearInspectedRun);
+  const liveRunStatus = useRunStore((s) => s.runStatus);
+  const activeRunId = useRunStore((s) => s.activeRunId);
+
+  const setBottomPanelVisible = usePanelStore((s) => s.setBottomPanelVisible);
+  const setBottomPanelMinimized = usePanelStore(
+    (s) => s.setBottomPanelMinimized,
+  );
+  const setActiveBottomTab = usePanelStore((s) => s.setActiveBottomTab);
+
+  // Load runs on mount and when filter changes
+  // statusFilter is read by loadRuns() via get(), but listed as dep to trigger reload
+  useEffect(() => {
+    void statusFilter; // trigger re-fetch when filter changes
+    if (graphId) loadRuns(graphId);
+  }, [graphId, loadRuns, statusFilter]);
+
+  // Refresh when a live run reaches a terminal state
+  const prevLiveStatus = useRef(liveRunStatus);
+  useEffect(() => {
+    const prev = prevLiveStatus.current;
+    prevLiveStatus.current = liveRunStatus;
+    const wasActive =
+      prev === "running" || prev === "paused" || prev === "reconnecting";
+    const isTerminal =
+      liveRunStatus === "completed" || liveRunStatus === "error";
+    if (wasActive && isTerminal && graphId) {
+      loadRuns(graphId);
+    }
+  }, [liveRunStatus, graphId, loadRuns]);
+
+  const handleRowClick = useCallback(
+    (runId: string) => {
+      const isLive = runId === activeRunId;
+      if (isLive) {
+        // Live run: show timeline with real-time events
+        clearInspectedRun();
+        setActiveBottomTab("timeline");
+      } else {
+        // Historical run: fetch status + show final state in debug tab
+        inspectRun(runId);
+        setActiveBottomTab("debug");
+      }
+      setBottomPanelVisible(true);
+      setBottomPanelMinimized(false);
+    },
+    [
+      activeRunId,
+      inspectRun,
+      clearInspectedRun,
+      setActiveBottomTab,
+      setBottomPanelVisible,
+      setBottomPanelMinimized,
+    ],
+  );
+
+  const handleDelete = useCallback(
+    (e: React.MouseEvent, runId: string) => {
+      e.stopPropagation();
+      const confirmed = window.confirm(
+        `Delete run #${runId.slice(0, 6)}? This cannot be undone.`,
+      );
+      if (confirmed) deleteRun(runId);
+    },
+    [deleteRun],
+  );
+
+  const handleFilterClick = useCallback(
+    (value: RunStatus | null) => {
+      setStatusFilter(value);
+    },
+    [setStatusFilter],
+  );
+
+  if (loading && runs.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-8 text-sm text-zinc-500">
+        <Loader2 size={16} className="mr-2 animate-spin" />
+        Loading runs...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded border border-red-800 bg-red-950/50 p-3 text-xs text-red-300">
+        {error}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Status filter chips */}
+      <div className="mb-3 flex gap-1.5">
+        {STATUS_FILTERS.map((f) => (
+          <button
+            key={f.label}
+            type="button"
+            onClick={() => handleFilterClick(f.value)}
+            className={`cursor-pointer rounded-full px-2.5 py-0.5 text-[11px] transition-colors ${
+              statusFilter === f.value
+                ? "bg-indigo-500/20 text-indigo-300"
+                : "bg-zinc-800 text-zinc-500 hover:text-zinc-300"
+            }`}
+          >
+            {f.label}
+          </button>
+        ))}
+      </div>
+
+      {runs.length === 0 ? (
+        <p className="mt-6 text-center text-sm text-zinc-500">
+          {statusFilter
+            ? `No ${statusFilter} runs found.`
+            : "No runs yet. Click Run to execute your graph."}
+        </p>
+      ) : (
+        <div className="space-y-1">
+          {runs.map((run) => {
+            const { icon: Icon, color } = STATUS_ICON[run.status];
+            const isActive =
+              run.status === "running" || run.status === "paused";
+            return (
+              <button
+                key={run.id}
+                type="button"
+                onClick={() => handleRowClick(run.id)}
+                className="flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-zinc-800"
+              >
+                <Icon
+                  size={14}
+                  className={`shrink-0 ${color} ${run.status === "running" ? "animate-spin" : ""}`}
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-1.5 text-xs text-zinc-300">
+                    <span className="font-mono text-zinc-500">
+                      #{run.id.slice(0, 6)}
+                    </span>
+                    <span className="text-zinc-600">&middot;</span>
+                    <span className="text-zinc-500">
+                      {formatTimestamp(run.created_at)}
+                    </span>
+                    {run.duration_ms != null && (
+                      <>
+                        <span className="text-zinc-600">&middot;</span>
+                        <span className="text-zinc-500">
+                          {formatDuration(run.duration_ms)}
+                        </span>
+                      </>
+                    )}
+                  </div>
+                  {run.error && (
+                    <p className="mt-0.5 truncate text-[11px] text-red-400/80">
+                      {run.error}
+                    </p>
+                  )}
+                </div>
+                {!isActive && (
+                  <button
+                    type="button"
+                    onClick={(e) => handleDelete(e, run.id)}
+                    className="shrink-0 rounded p-1 text-zinc-600 hover:text-red-400"
+                    aria-label={`Delete run ${run.id.slice(0, 6)}`}
+                  >
+                    <Trash2 size={12} />
+                  </button>
+                )}
+              </button>
+            );
+          })}
+          {total > runs.length && (
+            <p className="pt-2 text-center text-[11px] text-zinc-600">
+              Showing {runs.length} of {total} runs
+            </p>
+          )}
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/packages/canvas/src/components/panels/RunPanel.tsx b/packages/canvas/src/components/panels/RunPanel.tsx
index 97e315b..e9cd258 100644
--- a/packages/canvas/src/components/panels/RunPanel.tsx
+++ b/packages/canvas/src/components/panels/RunPanel.tsx
@@ -1,9 +1,7 @@
 import { useGraphStore } from "@store/graphSlice";
 import { useRunStore } from "@store/runSlice";
-import { Sheet } from "@ui/Sheet";
 import { Copy } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { formatDuration } from "../../utils/format";
+import { useEffect, useMemo, useRef } from "react";
 import { ResumeForm } from "./ResumeForm";
 import type { NodeMapEntry } from "./RunEventItem";
 import { RunEventItem } from "./RunEventItem";
@@ -11,22 +9,13 @@ import { RunEventItem } from "./RunEventItem";
 export function RunPanel() {
   const runStatus = useRunStore((s) => s.runStatus);
   const runOutput = useRunStore((s) => s.runOutput);
-  const durationMs = useRunStore((s) => s.durationMs);
   const errorMessage = useRunStore((s) => s.errorMessage);
   const errorTitle = useRunStore((s) => s.errorTitle);
   const pausedPrompt = useRunStore((s) => s.pausedPrompt);
   const nodes = useGraphStore((s) => s.nodes);
-  const [visible, setVisible] = useState(false);
 
   const endRef = useRef<HTMLDivElement>(null);
 
-  // Auto-open when run starts, keep open until dismissed
-  useEffect(() => {
-    if (runStatus !== "idle") {
-      setVisible(true);
-    }
-  }, [runStatus]);
-
   // Auto-scroll to bottom on new events
   const eventCount = runOutput.length;
   useEffect(() => {
@@ -54,69 +43,57 @@ export function RunPanel() {
     return m;
   }, [nodes]);
 
-  if (runStatus === "idle" && !visible) return null;
-
-  const title =
-    runStatus === "completed"
-      ? `Run completed ${formatDuration(durationMs)}`
-      : runStatus === "error"
-        ? "Run failed"
-        : runStatus === "paused"
-          ? "Run paused"
-          : runStatus === "connection_lost"
-            ? "Connection lost"
-            : "Running...";
+  if (runStatus === "idle" && runOutput.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-zinc-500">
+        Run your graph to see execution events here.
+      </div>
+    );
+  }
 
   return (
-    <Sheet
-      open={visible}
-      onClose={() => setVisible(false)}
-      title={title}
-      side="bottom"
-    >
-      <div className="flex flex-col gap-1.5">
-        {runOutput.map((event, i) => (
-          <RunEventItem
-            // biome-ignore lint/suspicious/noArrayIndexKey: events are append-only, index is stable
-            key={i}
-            event={event}
-            completedNodeIds={completedNodeIds}
-            nodeMap={nodeMap}
-          />
-        ))}
-        {runStatus === "error" && errorMessage && (
-          <div className="mt-2 rounded border border-red-800 bg-red-950/50 p-3">
-            <div className="mb-1.5 flex items-center justify-between">
-              <span className="text-xs font-semibold text-red-300">
-                {errorTitle ?? "Run failed"}
-              </span>
-              <button
-                type="button"
-                onClick={() => navigator.clipboard.writeText(errorMessage)}
-                className="rounded p-0.5 text-red-500 hover:text-red-300"
-                aria-label="Copy error message"
-              >
-                <Copy size={11} />
-              </button>
-            </div>
-            <p className="border-l-2 border-red-700 pl-2 font-mono text-[11px] text-red-400">
-              {errorMessage}
-            </p>
-          </div>
-        )}
-        {runStatus === "connection_lost" && (
-          <div className="mt-2 rounded border border-amber-800 bg-amber-950/50 px-3 py-2 text-xs text-amber-400">
-            Connection lost — the run may still be executing on the server.
+    <div className="flex flex-col gap-1.5 p-4">
+      {runOutput.map((event, i) => (
+        <RunEventItem
+          // biome-ignore lint/suspicious/noArrayIndexKey: events are append-only, index is stable
+          key={i}
+          event={event}
+          completedNodeIds={completedNodeIds}
+          nodeMap={nodeMap}
+        />
+      ))}
+      {runStatus === "error" && errorMessage && (
+        <div className="mt-2 rounded border border-red-800 bg-red-950/50 p-3">
+          <div className="mb-1.5 flex items-center justify-between">
+            <span className="text-xs font-semibold text-red-300">
+              {errorTitle ?? "Run failed"}
+            </span>
+            <button
+              type="button"
+              onClick={() => navigator.clipboard.writeText(errorMessage)}
+              className="rounded p-0.5 text-red-500 hover:text-red-300"
+              aria-label="Copy error message"
+            >
+              <Copy size={11} />
+            </button>
           </div>
-        )}
-        {runStatus === "paused" && pausedPrompt && (
-          <ResumeForm
-            prompt={pausedPrompt}
-            onSubmit={(input) => useRunStore.getState().resumeRun(input)}
-          />
-        )}
-        <div ref={endRef} />
-      </div>
-    </Sheet>
+          <p className="border-l-2 border-red-700 pl-2 font-mono text-[11px] text-red-400">
+            {errorMessage}
+          </p>
+        </div>
+      )}
+      {runStatus === "connection_lost" && (
+        <div className="mt-2 rounded border border-amber-800 bg-amber-950/50 px-3 py-2 text-xs text-amber-400">
+          Connection lost — the run may still be executing on the server.
+        </div>
+      )}
+      {runStatus === "paused" && pausedPrompt && (
+        <ResumeForm
+          prompt={pausedPrompt}
+          onSubmit={(input) => useRunStore.getState().resumeRun(input)}
+        />
+      )}
+      <div ref={endRef} />
+    </div>
   );
 }
diff --git a/packages/canvas/src/components/panels/SchemaPanel.tsx b/packages/canvas/src/components/panels/SchemaPanel.tsx
new file mode 100644
index 0000000..ae92be5
--- /dev/null
+++ b/packages/canvas/src/components/panels/SchemaPanel.tsx
@@ -0,0 +1,89 @@
+import { useGraphStore } from "@store/graphSlice";
+import { useUIStore } from "@store/uiSlice";
+import { Button } from "@ui/Button";
+import { CheckCircle2, Copy, Download, XCircle } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
+import { validateGraph } from "../../utils/validateGraph";
+
+export function SchemaPanel() {
+  const graph = useGraphStore((s) => s.graph);
+  const nodes = useGraphStore((s) => s.nodes);
+  const edges = useGraphStore((s) => s.edges);
+  const [copied, setCopied] = useState(false);
+
+  const schemaJson = useMemo(() => {
+    if (!graph) return "";
+    return JSON.stringify(graph, null, 2);
+  }, [graph]);
+
+  const validationErrors = useMemo(
+    () => validateGraph(nodes, edges),
+    [nodes, edges],
+  );
+
+  const isValid = validationErrors.length === 0;
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(schemaJson);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      useUIStore.getState().showToast("Failed to copy to clipboard", "error");
+    }
+  }, [schemaJson]);
+
+  const handleDownload = useCallback(() => {
+    if (!graph) return;
+    const blob = new Blob([schemaJson], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${graph.name.replace(/\s+/g, "-").toLowerCase()}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [graph, schemaJson]);
+
+  if (!graph) {
+    return (
+      <p className="mt-8 text-center text-sm text-zinc-500">No graph loaded.</p>
+    );
+  }
+
+  return (
+    <>
+      {/* Validation badge */}
+      <div className="mb-3 flex items-center gap-2">
+        {isValid ? (
+          <span className="flex items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] text-emerald-400">
+            <CheckCircle2 size={12} />
+            Valid
+          </span>
+        ) : (
+          <span className="flex items-center gap-1 rounded-full bg-red-500/10 px-2 py-0.5 text-[11px] text-red-400">
+            <XCircle size={12} />
+            {validationErrors.length} error
+            {validationErrors.length > 1 ? "s" : ""}
+          </span>
+        )}
+      </div>
+
+      {/* Action buttons */}
+      <div className="mb-3 flex gap-2">
+        <Button variant="ghost" onClick={handleCopy}>
+          <Copy size={12} className="mr-1" />
+          {copied ? "Copied!" : "Copy"}
+        </Button>
+        <Button variant="ghost" onClick={handleDownload}>
+          <Download size={12} className="mr-1" />
+          Download .json
+        </Button>
+      </div>
+
+      {/* Schema JSON */}
+      <pre className="overflow-auto rounded-md border border-zinc-800 bg-zinc-950 p-3 font-mono text-[11px] text-zinc-300">
+        {schemaJson}
+      </pre>
+    </>
+  );
+}
diff --git a/packages/canvas/src/components/panels/StateInspector.tsx b/packages/canvas/src/components/panels/StateInspector.tsx
new file mode 100644
index 0000000..0c7b6d8
--- /dev/null
+++ b/packages/canvas/src/components/panels/StateInspector.tsx
@@ -0,0 +1,241 @@
+import { useCanvasContext } from "@contexts/CanvasContext";
+import { useGraphStore } from "@store/graphSlice";
+import { useHistoryStore } from "@store/historySlice";
+import { useRunStore } from "@store/runSlice";
+import { useMemo } from "react";
+import { JsonTree } from "./JsonTree";
+
+type DiffBadge = "new" | "modified" | "removed" | "unchanged";
+
+function computeDiff(
+  prev: Record<string, unknown> | null,
+  current: Record<string, unknown>,
+): Map<string, DiffBadge> {
+  const badges = new Map<string, DiffBadge>();
+  if (!prev) {
+    for (const key of Object.keys(current)) {
+      badges.set(key, "new");
+    }
+    return badges;
+  }
+  const allKeys = new Set([...Object.keys(prev), ...Object.keys(current)]);
+  for (const key of allKeys) {
+    if (!(key in prev)) {
+      badges.set(key, "new");
+    } else if (!(key in current)) {
+      badges.set(key, "removed");
+    } else if (JSON.stringify(prev[key]) !== JSON.stringify(current[key])) {
+      badges.set(key, "modified");
+    } else {
+      badges.set(key, "unchanged");
+    }
+  }
+  return badges;
+}
+
+export function StateInspector() {
+  const { selectedNodeId } = useCanvasContext();
+  const runOutput = useRunStore((s) => s.runOutput);
+  const runStatus = useRunStore((s) => s.runStatus);
+  const activeNodeId = useRunStore((s) => s.activeNodeId);
+  const finalState = useRunStore((s) => s.finalState);
+  const nodes = useGraphStore((s) => s.nodes);
+  const inspectedRun = useHistoryStore((s) => s.inspectedRun);
+
+  // Find node label
+  const nodeLabel = useMemo(() => {
+    if (!selectedNodeId) return null;
+    return nodes.find((n) => n.id === selectedNodeId)?.label ?? selectedNodeId;
+  }, [selectedNodeId, nodes]);
+
+  // Extract state snapshot for the selected node from live run events
+  const { snapshot, prevSnapshot } = useMemo(() => {
+    if (!selectedNodeId) return { snapshot: null, prevSnapshot: null };
+
+    let targetIdx = -1;
+    for (let i = runOutput.length - 1; i >= 0; i--) {
+      const ev = runOutput[i];
+      if (
+        ev?.event === "node_completed" &&
+        ev.data.node_id === selectedNodeId
+      ) {
+        targetIdx = i;
+        break;
+      }
+    }
+
+    if (targetIdx === -1) return { snapshot: null, prevSnapshot: null };
+
+    const snap = runOutput[targetIdx];
+    if (snap?.event !== "node_completed")
+      return { snapshot: null, prevSnapshot: null };
+
+    let prev: unknown = null;
+    for (let i = targetIdx - 1; i >= 0; i--) {
+      const ev = runOutput[i];
+      if (ev?.event === "node_completed") {
+        prev = ev.data.state_snapshot;
+        break;
+      }
+    }
+
+    return {
+      snapshot: snap.data.state_snapshot as Record<string, unknown> | null,
+      prevSnapshot: prev as Record<string, unknown> | null,
+    };
+  }, [selectedNodeId, runOutput]);
+
+  // Historical run: show inspected run's final_state
+  if (inspectedRun) {
+    const status = inspectedRun.status;
+    const statusLabel =
+      status === "completed"
+        ? "Completed"
+        : status === "error"
+          ? "Failed"
+          : status === "paused"
+            ? "Paused"
+            : "Running";
+
+    return (
+      <div className="p-4">
+        <div className="mb-2 flex items-center gap-2">
+          <h3 className="text-xs font-semibold text-zinc-300">
+            Run #{inspectedRun.run_id.slice(0, 6)}
+          </h3>
+          <span
+            className={`rounded-full px-2 py-0.5 text-[10px] ${
+              status === "completed"
+                ? "bg-emerald-500/10 text-emerald-400"
+                : status === "error"
+                  ? "bg-red-500/10 text-red-400"
+                  : "bg-zinc-700/30 text-zinc-400"
+            }`}
+          >
+            {statusLabel}
+          </span>
+        </div>
+
+        {inspectedRun.error && (
+          <div className="mb-3 rounded border border-red-800 bg-red-950/50 p-2 text-[11px] text-red-400">
+            {inspectedRun.error}
+          </div>
+        )}
+
+        {inspectedRun.final_state ? (
+          <>
+            <p className="mb-2 text-[10px] text-zinc-500">
+              Final graph state. Per-node snapshots are only available during
+              live runs.
+            </p>
+            <JsonTree
+              data={inspectedRun.final_state}
+              label="state"
+              defaultExpanded
+            />
+          </>
+        ) : (
+          <p className="text-sm text-zinc-500">
+            No state data available for this run.
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  // No node selected
+  if (!selectedNodeId) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-zinc-500">
+        Click a node in the timeline to inspect its state.
+      </div>
+    );
+  }
+
+  // Node is still executing (Fix: better message for in-progress nodes)
+  const isNodeExecuting =
+    runStatus === "running" && selectedNodeId === activeNodeId;
+  if (!snapshot && isNodeExecuting) {
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-zinc-500">
+        Node is still executing. Snapshot will appear when it completes.
+      </div>
+    );
+  }
+
+  // No snapshot available (completed run without per-node data)
+  if (!snapshot) {
+    if ((runStatus === "completed" || runStatus === "error") && finalState) {
+      return (
+        <div className="p-4">
+          <div className="mb-2 flex items-center gap-2">
+            <h3 className="text-xs font-semibold text-zinc-300">Final State</h3>
+          </div>
+          <p className="mb-3 text-[10px] text-zinc-500">
+            Per-node snapshots are available for live runs. Showing final graph
+            state.
+          </p>
+          <JsonTree data={finalState} label="state" defaultExpanded />
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex h-full items-center justify-center p-4 text-sm text-zinc-500">
+        No state snapshot for this node.
+      </div>
+    );
+  }
+
+  // Compute diff badges (memoized to avoid re-stringify on every render)
+  const badges = useMemo(
+    () => computeDiff(prevSnapshot, snapshot),
+    [prevSnapshot, snapshot],
+  );
+
+  return (
+    <div className="p-4">
+      <div className="mb-2 flex items-center gap-2">
+        <h3 className="text-xs font-semibold text-zinc-300">
+          Node: {nodeLabel}
+        </h3>
+      </div>
+
+      <div className="mb-3 flex gap-3 text-[10px] text-zinc-500">
+        <span>
+          <span className="mr-0.5 inline-block h-2 w-2 rounded-sm bg-zinc-700/50" />{" "}
+          unchanged
+        </span>
+        <span>
+          <span className="mr-0.5 inline-block h-2 w-2 rounded-sm bg-emerald-500/30" />{" "}
+          added
+        </span>
+        <span>
+          <span className="mr-0.5 inline-block h-2 w-2 rounded-sm bg-amber-500/30" />{" "}
+          modified
+        </span>
+        <span>
+          <span className="mr-0.5 inline-block h-2 w-2 rounded-sm bg-red-500/30" />{" "}
+          removed
+        </span>
+      </div>
+
+      <h4 className="mb-1 text-[11px] font-medium text-zinc-400">
+        State after this node:
+      </h4>
+      <div className="space-y-0">
+        {Object.entries(snapshot).map(([key, value]) => (
+          <JsonTree
+            key={key}
+            data={value}
+            label={key}
+            badge={badges.get(key) ?? null}
+            defaultExpanded={
+              badges.get(key) === "new" || badges.get(key) === "modified"
+            }
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/canvas/src/components/panels/StatePanel.tsx b/packages/canvas/src/components/panels/StatePanel.tsx
index b101c56..fd54778 100644
--- a/packages/canvas/src/components/panels/StatePanel.tsx
+++ b/packages/canvas/src/components/panels/StatePanel.tsx
@@ -1,7 +1,6 @@
 import { useCanvasContext } from "@contexts/CanvasContext";
 import type { NodeSchema, StateField } from "@shared/schema";
 import { useGraphStore } from "@store/graphSlice";
-import { Sheet } from "@ui/Sheet";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { extractRootKey } from "../canvas/runInputUtils";
 import { AddFieldForm } from "./AddFieldForm";
@@ -56,8 +55,7 @@ function computeFieldUsage(fieldKey: string, nodes: NodeSchema[]): FieldUsage {
 }
 
 export function StatePanel() {
-  const { statePanelOpen, setStatePanelOpen, setSelectedNodeId } =
-    useCanvasContext();
+  const { setSelectedNodeId } = useCanvasContext();
   const stateFields = useGraphStore((s) => s.graph?.state ?? []);
   const nodes = useGraphStore((s) => s.nodes);
   const addStateFields = useGraphStore((s) => s.addStateFields);
@@ -127,50 +125,43 @@ export function StatePanel() {
 
   return (
     <>
-      <Sheet
-        open={statePanelOpen}
-        onClose={() => setStatePanelOpen(false)}
-        title="State Fields"
-        side="left"
-      >
-        <p className="mb-3 text-[10px] text-zinc-500">
-          State fields carry data between nodes. Each field is available as an
-          input source when configuring Tool and LLM nodes.
-          {stateFields.length > 0 && (
-            <>
-              <br />
-              Click a node name to jump to its config.
-            </>
-          )}
-        </p>
-
-        {stateFields.length === 0 ? (
-          <p className="mb-3 text-xs text-zinc-500">
-            No state fields yet. Add one below.
-          </p>
-        ) : (
-          <div className="space-y-2">
-            {stateFields.map((field) => (
-              <StateFieldRow
-                key={field.key}
-                field={field}
-                usage={usageMap.get(field.key) ?? { readers: [], writers: [] }}
-                onDelete={() => handleDelete(field)}
-                onNodeClick={handleNodeClick}
-              />
-            ))}
-          </div>
+      <p className="mb-3 text-[10px] text-zinc-500">
+        State fields carry data between nodes. Each field is available as an
+        input source when configuring Tool and LLM nodes.
+        {stateFields.length > 0 && (
+          <>
+            <br />
+            Click a node name to jump to its config.
+          </>
         )}
+      </p>
 
-        <div className="mt-4 border-t border-zinc-800 pt-3">
-          <p className="mb-1 text-xs font-medium text-zinc-300">Add a field</p>
-          <p className="mb-2 text-[10px] text-zinc-500">
-            Default fields and tool parameters are added automatically. Add a
-            custom field here for data not tied to a specific tool.
-          </p>
-          <AddFieldForm existingKeys={existingKeys} onAdd={handleAdd} />
+      {stateFields.length === 0 ? (
+        <p className="mb-3 text-xs text-zinc-500">
+          No state fields yet. Add one below.
+        </p>
+      ) : (
+        <div className="space-y-2">
+          {stateFields.map((field) => (
+            <StateFieldRow
+              key={field.key}
+              field={field}
+              usage={usageMap.get(field.key) ?? { readers: [], writers: [] }}
+              onDelete={() => handleDelete(field)}
+              onNodeClick={handleNodeClick}
+            />
+          ))}
         </div>
-      </Sheet>
+      )}
+
+      <div className="mt-4 border-t border-zinc-800 pt-3">
+        <p className="mb-1 text-xs font-medium text-zinc-300">Add a field</p>
+        <p className="mb-2 text-[10px] text-zinc-500">
+          Default fields and tool parameters are added automatically. Add a
+          custom field here for data not tied to a specific tool.
+        </p>
+        <AddFieldForm existingKeys={existingKeys} onAdd={handleAdd} />
+      </div>
 
       {/* Undo toast */}
       {deletedField && (
diff --git a/packages/canvas/src/components/panels/__tests__/NodeConfigPanel.test.tsx b/packages/canvas/src/components/panels/__tests__/NodeConfigPanel.test.tsx
index 9f69295..43204d0 100644
--- a/packages/canvas/src/components/panels/__tests__/NodeConfigPanel.test.tsx
+++ b/packages/canvas/src/components/panels/__tests__/NodeConfigPanel.test.tsx
@@ -86,11 +86,12 @@ beforeEach(() => {
 });
 
 describe("NodeConfigPanel", () => {
-  it("renders nothing (closed sheet) when no node is selected", () => {
+  it("renders empty state when no node is selected", () => {
     mockSelectedNodeId = null;
-    const { container } = render(<NodeConfigPanel />);
-    const sheet = container.querySelector("[role='dialog']");
-    expect(sheet).toHaveAttribute("aria-hidden", "true");
+    render(<NodeConfigPanel />);
+    expect(
+      screen.getByText("Click a node to edit its configuration."),
+    ).toBeInTheDocument();
   });
 
   it('renders StartNodeConfig when selected node is type "start"', () => {
@@ -115,13 +116,6 @@ describe("NodeConfigPanel", () => {
     expect(screen.getByText(/exit point/i)).toBeInTheDocument();
   });
 
-  it("clicking close button calls setSelectedNodeId(null)", async () => {
-    mockSelectedNodeId = "s1";
-    render(<NodeConfigPanel />);
-    await userEvent.click(screen.getByLabelText("Close panel"));
-    expect(mockSetSelectedNodeId).toHaveBeenCalledWith(null);
-  });
-
   it("clicking delete button calls removeNode and clears selection", async () => {
     mockSelectedNodeId = "s1";
     render(<NodeConfigPanel />);
diff --git a/packages/canvas/src/components/panels/__tests__/StatePanel.test.tsx b/packages/canvas/src/components/panels/__tests__/StatePanel.test.tsx
index 39eef14..7298afb 100644
--- a/packages/canvas/src/components/panels/__tests__/StatePanel.test.tsx
+++ b/packages/canvas/src/components/panels/__tests__/StatePanel.test.tsx
@@ -5,11 +5,8 @@ import { StatePanel } from "../StatePanel";
 
 // Mock CanvasContext
 const mockSetSelectedNodeId = vi.fn();
-const mockSetStatePanelOpen = vi.fn();
 vi.mock("@contexts/CanvasContext", () => ({
   useCanvasContext: () => ({
-    statePanelOpen: true,
-    setStatePanelOpen: mockSetStatePanelOpen,
     setSelectedNodeId: mockSetSelectedNodeId,
   }),
 }));
diff --git a/packages/canvas/src/components/ui/ResizeHandle.tsx b/packages/canvas/src/components/ui/ResizeHandle.tsx
new file mode 100644
index 0000000..cb12bd9
--- /dev/null
+++ b/packages/canvas/src/components/ui/ResizeHandle.tsx
@@ -0,0 +1,77 @@
+import { useCallback, useEffect, useRef } from "react";
+
+interface ResizeHandleProps {
+  direction: "horizontal" | "vertical";
+  onResize: (delta: number) => void;
+  onResizeEnd?: () => void;
+}
+
+export function ResizeHandle({
+  direction,
+  onResize,
+  onResizeEnd,
+}: ResizeHandleProps) {
+  const dragging = useRef(false);
+  const lastPos = useRef(0);
+  const onResizeRef = useRef(onResize);
+  const onResizeEndRef = useRef(onResizeEnd);
+  onResizeRef.current = onResize;
+  onResizeEndRef.current = onResizeEnd;
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      dragging.current = true;
+      lastPos.current = direction === "horizontal" ? e.clientY : e.clientX;
+      document.body.style.cursor =
+        direction === "horizontal" ? "row-resize" : "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [direction],
+  );
+
+  useEffect(() => {
+    function handleMouseMove(e: MouseEvent) {
+      if (!dragging.current) return;
+      const pos = direction === "horizontal" ? e.clientY : e.clientX;
+      const delta = pos - lastPos.current;
+      lastPos.current = pos;
+      onResizeRef.current(delta);
+    }
+
+    function handleMouseUp() {
+      if (!dragging.current) return;
+      dragging.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      onResizeEndRef.current?.();
+    }
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [direction]);
+
+  const isHorizontal = direction === "horizontal";
+
+  return (
+    <div
+      onMouseDown={handleMouseDown}
+      className={`${
+        isHorizontal
+          ? "h-1 w-full cursor-row-resize"
+          : "h-full w-1 cursor-col-resize"
+      } group flex shrink-0 items-center justify-center bg-zinc-900 transition-colors hover:bg-indigo-500/30`}
+      aria-label={isHorizontal ? "Resize height" : "Resize width"}
+    >
+      <div
+        className={`${
+          isHorizontal ? "h-0.5 w-8" : "h-8 w-0.5"
+        } rounded-full bg-zinc-700 transition-colors group-hover:bg-indigo-400`}
+      />
+    </div>
+  );
+}
diff --git a/packages/canvas/src/contexts/CanvasContext.tsx b/packages/canvas/src/contexts/CanvasContext.tsx
index c24a84b..b9384ae 100644
--- a/packages/canvas/src/contexts/CanvasContext.tsx
+++ b/packages/canvas/src/contexts/CanvasContext.tsx
@@ -7,8 +7,6 @@ interface CanvasContextValue {
   reactFlowInstance: ReactFlowInstance | null;
   stampNodeType: string | null;
   setStampNodeType: (type: string | null) => void;
-  statePanelOpen: boolean;
-  setStatePanelOpen: (open: boolean) => void;
 }
 
 const CanvasContext = createContext<CanvasContextValue | null>(null);
@@ -16,7 +14,6 @@ const CanvasContext = createContext<CanvasContextValue | null>(null);
 export function CanvasProvider({ children }: { children: ReactNode }) {
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [stampNodeType, setStampNodeType] = useState<string | null>(null);
-  const [statePanelOpen, setStatePanelOpen] = useState(false);
   const reactFlowInstance = useReactFlow();
 
   return (
@@ -27,8 +24,6 @@ export function CanvasProvider({ children }: { children: ReactNode }) {
         reactFlowInstance,
         stampNodeType,
         setStampNodeType,
-        statePanelOpen,
-        setStatePanelOpen,
       }}
     >
       {children}
diff --git a/packages/canvas/src/store/graphSlice.ts b/packages/canvas/src/store/graphSlice.ts
index 87ca8ed..11fe2c9 100644
--- a/packages/canvas/src/store/graphSlice.ts
+++ b/packages/canvas/src/store/graphSlice.ts
@@ -1,9 +1,11 @@
 import {
+  type ValidateResponse,
   createGraph,
   deleteGraph,
   getGraph,
   listGraphs,
   updateGraph,
+  validateGraphServer,
 } from "@api/graphs";
 import type {
   ConditionConfig,
@@ -89,6 +91,7 @@ export interface GraphSlice {
   deleteGraphById: (id: string) => Promise<void>;
   renameGraphById: (id: string, name: string) => Promise<GraphSchema>;
   renameOutputKey: (nodeId: string, oldKey: string, newKey: string) => void;
+  validateServer: () => Promise<ValidateResponse>;
 }
 
 export const useGraphStore = create<GraphSlice>((set, get) => ({
@@ -378,4 +381,10 @@ export const useGraphStore = create<GraphSlice>((set, get) => ({
       return { nodes, graph, dirty: true };
     });
   },
+
+  validateServer: async () => {
+    const { graph } = get();
+    if (!graph) return { valid: true, errors: [] };
+    return validateGraphServer(graph.id);
+  },
 }));
diff --git a/packages/canvas/src/store/historySlice.ts b/packages/canvas/src/store/historySlice.ts
new file mode 100644
index 0000000..28f5688
--- /dev/null
+++ b/packages/canvas/src/store/historySlice.ts
@@ -0,0 +1,108 @@
+import {
+  type PaginatedRuns,
+  type RunListItem,
+  type RunStatus,
+  type RunStatusResponse,
+  deleteRun as apiDeleteRun,
+  getRunStatus,
+  listRunsForGraph,
+} from "@api/runs";
+import { create } from "zustand";
+
+export type { RunStatus } from "@api/runs";
+
+export interface HistorySlice {
+  runs: RunListItem[];
+  total: number;
+  loading: boolean;
+  error: string | null;
+  statusFilter: RunStatus | null;
+
+  /** The historical run currently being inspected (null = showing live run) */
+  inspectedRun: RunStatusResponse | null;
+
+  loadRuns: (graphId: string) => Promise<void>;
+  setStatusFilter: (status: RunStatus | null) => void;
+  deleteRun: (runId: string) => Promise<void>;
+  inspectRun: (runId: string) => Promise<void>;
+  clearInspectedRun: () => void;
+  reset: () => void;
+}
+
+const PAGE_SIZE = 20;
+
+export const useHistoryStore = create<HistorySlice>((set, get) => ({
+  runs: [],
+  total: 0,
+  loading: false,
+  error: null,
+  statusFilter: null,
+  inspectedRun: null,
+
+  loadRuns: async (graphId: string) => {
+    set({ loading: true, error: null });
+    try {
+      const { statusFilter } = get();
+      const result: PaginatedRuns = await listRunsForGraph(graphId, {
+        status: statusFilter ?? undefined,
+        limit: PAGE_SIZE,
+        offset: 0,
+      });
+      set({ runs: result.items, total: result.total, loading: false });
+    } catch (e) {
+      set({
+        error: e instanceof Error ? e.message : "Failed to load runs",
+        loading: false,
+      });
+    }
+  },
+
+  setStatusFilter: (status: RunStatus | null) => {
+    set({ statusFilter: status });
+  },
+
+  deleteRun: async (runId: string) => {
+    try {
+      await apiDeleteRun(runId);
+      set((s) => ({
+        runs: s.runs.filter((r) => r.id !== runId),
+        total: s.total - 1,
+        // Clear inspected run if it was the deleted one
+        inspectedRun: s.inspectedRun?.run_id === runId ? null : s.inspectedRun,
+      }));
+    } catch (e) {
+      set({
+        error: e instanceof Error ? e.message : "Failed to delete run",
+      });
+    }
+  },
+
+  inspectRun: async (runId: string) => {
+    // If already inspecting this run, skip
+    if (get().inspectedRun?.run_id === runId) return;
+    set({ error: null });
+    try {
+      const status = await getRunStatus(runId);
+      set({ inspectedRun: status });
+    } catch (e) {
+      set({
+        error: e instanceof Error ? e.message : "Failed to load run details",
+      });
+    }
+  },
+
+  clearInspectedRun: () => {
+    set({ inspectedRun: null });
+  },
+
+  reset: () => {
+    set({
+      runs: [],
+      total: 0,
+      loading: false,
+      error: null,
+      statusFilter: null,
+      inspectedRun: null,
+    });
+  },
+}));
diff --git a/packages/canvas/src/store/panelSlice.ts b/packages/canvas/src/store/panelSlice.ts
new file mode 100644
index 0000000..d0e80fe
--- /dev/null
+++ b/packages/canvas/src/store/panelSlice.ts
@@ -0,0 +1,66 @@
+import { create } from "zustand";
+
+export type SidePanelId = "config" | "state" | "history" | "schema";
+export type BottomTab = "timeline" | "debug";
+
+export interface PanelSlice {
+  activeSidePanel: SidePanelId | null;
+  sidePanelVisible: boolean;
+  bottomPanelVisible: boolean;
+  bottomPanelMinimized: boolean;
+  activeBottomTab: BottomTab;
+
+  toggleSidePanel: (panel: SidePanelId) => void;
+  openSidePanel: (panel: SidePanelId) => void;
+  closeSidePanel: () => void;
+  setSidePanelVisible: (visible: boolean) => void;
+  toggleBottomPanel: () => void;
+  setBottomPanelVisible: (visible: boolean) => void;
+  setBottomPanelMinimized: (minimized: boolean) => void;
+  setActiveBottomTab: (tab: BottomTab) => void;
+}
+
+export const usePanelStore = create<PanelSlice>((set, get) => ({
+  activeSidePanel: null,
+  sidePanelVisible: false,
+  bottomPanelVisible: false,
+  bottomPanelMinimized: false,
+  activeBottomTab: "timeline",
+
+  toggleSidePanel: (panel: SidePanelId) => {
+    const { activeSidePanel, sidePanelVisible } = get();
+    if (activeSidePanel === panel && sidePanelVisible) {
+      set({ sidePanelVisible: false });
+    } else {
+      set({ activeSidePanel: panel, sidePanelVisible: true });
+    }
+  },
+
+  openSidePanel: (panel: SidePanelId) => {
+    set({ activeSidePanel: panel, sidePanelVisible: true });
+  },
+
+  closeSidePanel: () => {
+    set({ sidePanelVisible: false });
+  },
+
+  setSidePanelVisible: (visible: boolean) => {
+    set({ sidePanelVisible: visible });
+  },
+
+  toggleBottomPanel: () => {
+    set((s) => ({ bottomPanelVisible: !s.bottomPanelVisible }));
+  },
+
+  setBottomPanelVisible: (visible: boolean) => {
+    set({ bottomPanelVisible: visible });
+  },
+
+  setBottomPanelMinimized: (minimized: boolean) => {
+    set({ bottomPanelMinimized: minimized });
+  },
+
+  setActiveBottomTab: (tab: BottomTab) => {
+    set({ activeBottomTab: tab });
+  },
+}));
diff --git a/packages/canvas/vite.config.ts b/packages/canvas/vite.config.ts
index 20b5c0a..0978351 100644
--- a/packages/canvas/vite.config.ts
+++ b/packages/canvas/vite.config.ts
@@ -22,7 +22,7 @@ export default defineConfig(({ mode }) => {
       port: 3000,
       proxy: {
         "/api": {
-          target: "http://localhost:8000",
+          target: "http://localhost:8001",
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/api/, "/v1"),
           configure: (proxy) => {
diff --git a/packages/execution/Dockerfile b/packages/execution/Dockerfile
index b599a76..8ba97e9 100644
--- a/packages/execution/Dockerfile
+++ b/packages/execution/Dockerfile
@@ -5,4 +5,4 @@ WORKDIR /app
 COPY pyproject.toml uv.lock ./
 RUN uv sync --frozen --no-dev
 COPY app/ ./app/
-CMD ["uv", "run", "uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]
+CMD ["uv", "run", "uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8001"]