(CODUX-186) Integrate the /nodes page

[numnx]

🧩 Task: Integrate the /nodes page

Automated task PR opened by Code UX for T05.

📋 Summary

Sprint: Sprint 186 · n8n Nodes /nodes Canvas Refactor · Task: T05

Redesign /nodes as a premium @xyflow/react-powered node canvas with a polished UI/UX refresh, advanced editable node controls, clear selection and inspector workflows, strong validation and state handling, and an autonomous-agent-friendly surface for creating, wiring, and iterating on nodes.

🤖 Model & Provider

Provider	Codex CLI
Model	gpt-5.5

⏱️ Timing

Started	2026-07-07 16:24:39 UTC
Finished	2026-07-07 16:30:47 UTC
Duration	6m 8s

📊 Token Usage

Metric	Value
Input tokens	340,241
Cached input tokens	10,666,112
Output tokens	26,941
Total tokens	11,033,294
Invocations	5
Tool calls	118
Active time	35m 14s

Included usage estimate (subscription/local login): $7.84

✅ QA Review

⏳ QA review runs after this PR is opened. Check the task card in the dashboard for the outcome once it lands.

📝 Full Task Prompt

## Objective
Ship the complete `/nodes` dashboard page by composing the canvas, palette, inspector, validation panel, agent exchange helpers, route registration, navigation entries, local persistence, and user-facing documentation.

## Scope
- Create `dashboard/src/v2/NodesPage.tsx`
- Edit `dashboard/src/main.tsx`
- Edit `dashboard/src/v2/router/route-prefetch.ts`
- Edit `dashboard/src/v2/components/layout/Sidebar.tsx`
- Edit `dashboard/src/v2/components/KineticDock.tsx`
- Create `tests/dashboard/v2/nodes-page.test.tsx`
- Update or create `docs/dashboard/nodes-canvas.md`
- Edit `docs/index.md`
- Edit `docs/SUMMARY.md`
- Create or update `docs-web/user/dashboard/nodes-canvas.md`
- Consume components from T02, inspector/palette components from T03, and agent helpers from T04

## Implementation Requirements
1. Register a lazy-loaded `/nodes` route in `dashboard/src/main.tsx`, add it to `route-prefetch.ts`, and add consistent navigation entries in both sidebar and kinetic dock with an appropriate `lucide-preact` icon.
2. Implement `NodesPage` as a full operational workspace with a compact header, canvas region, palette, inspector, validation/status strip, import/export JSON actions, and localStorage persistence scoped to `codeux:nodes-canvas:v1`.
3. Wire reducer actions from T01 through T02/T03 components, run validation after state changes, and use T04 helpers for JSON import/export summaries and command-friendly graph metadata.
4. Add robust empty, invalid import, reset, and no-selection states with accessible live feedback and no overlapping controls at mobile widths.
5. Document the `/nodes` surface in canonical dashboard docs and mirror it to docs-web, including node types, validation behavior, local persistence, import/export format, and the agent command surface.
6. Add page tests that render the composed page, exercise node selection/editing, validate localStorage save/load, handle bad import JSON, and confirm navigation/route prefetch entries exist.

## Constraints
- Do not add new frontend dependencies; compose the in-house React Flow-style primitives created in this sprint.
- Do not modify backend APIs or database schema; this `/nodes` version persists locally in the browser until a backend contract is explicitly added later.
- Preserve browser visibility gating for `/browser`; adding `/nodes` must not change existing nav item conditions.
- Keep docs factual and do not claim cloud synchronization, backend persistence, or real n8n execution unless implemented.

## Verification
- Run `pnpm exec vitest run tests/dashboard/v2/nodes-page.test.tsx tests/dashboard/v2/nodes-canvas.test.tsx tests/dashboard/v2/nodes-inspector.test.tsx tests/dashboard/lib/nodes-canvas-state.test.ts tests/dashboard/lib/nodes-agent-surface.test.ts`.
- Run `pnpm run test:dashboard`.
- Run `pnpm run build`.
- Start `pnpm run dev` and verify `http://localhost:4444/nodes` loads, navigation highlights `/nodes`, import/export works, and the page remains usable at desktop and mobile widths.

🌿 Branch Info

Base: feature/CODUX-186-n8n-nodes-nodes-canvas-refactor
Head: task/feature-codux-186-n8n-nodes-nodes-canvas-refacto-t05-codex-mratshrh

---

🤖 Generated by Code UX