Implement Phase 2: Next.js + React Flow frontend MVP

- Scaffold Next.js 15 app with TypeScript, Tailwind, App Router
- Install @xyflow/react, Zustand, Lucide icons, nanoid
- Define council types (AgentNodeData, CouncilBlueprint, WSMessage, etc.)
- Implement Zustand store for canvas and run state
- Build custom AgentNode component (label, system prompt, model badge, tool chips, active pulse)
- Build ConditionalEdge component (dashed indigo line with condition label)
- Build NodeSidebar (drag-and-drop + click to add agents)
- Build NodeSettingsPanel (name, system prompt, model selector, tool toggles)
- Build ArchitectCanvas (React Flow canvas with drop zone, minimap, controls)
- Build blueprint parser (React Flow JSON ↔ CouncilBlueprint JSON)
- Build API client for FastAPI backend (CRUD + run endpoints)
- Build useCouncilWebSocket hook for live agent status via WebSocket
- Build Tab A: Rat-Architekt (canvas builder with save/export toolbar)
- Build Tab B: Konferenzzimmer (execution view with live diagram + result panel)
- Add NavTabs navigation with CouncilOS branding
- All TypeScript checks passing

https://claude.ai/code/session_01EkbecUVn7esdxLCXxVVRDX

frontend/app/components/ArchitectCanvas.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useCallback } from "react";
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  BackgroundVariant,
+  useReactFlow,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+import { AgentNode } from "@/app/components/nodes/AgentNode";
+import { ConditionalEdge } from "@/app/components/edges/ConditionalEdge";
+import { useCouncilStore } from "@/app/store/council-store";
+import { AgentNodeData } from "@/app/types/council";
+
+const NODE_TYPES = { agentNode: AgentNode };
+const EDGE_TYPES = { conditionalEdge: ConditionalEdge };
+
+// Main React Flow canvas — lives inside a ReactFlowProvider
+export function ArchitectCanvas() {
+  const nodes = useCouncilStore((s) => s.nodes);
+  const edges = useCouncilStore((s) => s.edges);
+  const onNodesChange = useCouncilStore((s) => s.onNodesChange);
+  const onEdgesChange = useCouncilStore((s) => s.onEdgesChange);
+  const onConnect = useCouncilStore((s) => s.onConnect);
+  const addAgentNode = useCouncilStore((s) => s.addAgentNode);
+  const selectNode = useCouncilStore((s) => s.selectNode);
+
+  const { screenToFlowPosition } = useReactFlow();
+
+  const onDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }, []);
+
+  const onDrop = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      const type = event.dataTransfer.getData("application/reactflow");
+      if (type !== "agentNode") return;
+
+      const position = screenToFlowPosition({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      addAgentNode(position);
+    },
+    [screenToFlowPosition, addAgentNode]
+  );
+
+  const onPaneClick = useCallback(() => {
+    selectNode(null);
+  }, [selectNode]);
+
+  return (
+    <div className="flex-1 h-full">
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onDrop={onDrop}
+        onDragOver={onDragOver}
+        onPaneClick={onPaneClick}
+        nodeTypes={NODE_TYPES}
+        edgeTypes={EDGE_TYPES}
+        fitView
+        deleteKeyCode="Delete"
+        className="bg-slate-50"
+      >
+        <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#cbd5e1" />
+        <Controls />
+        <MiniMap
+          nodeColor={(n) => {
+            const d = n.data as AgentNodeData;
+            return d?.isActive ? "#6366f1" : "#94a3b8";
+          }}
+          className="!bg-white !border-slate-200"
+        />
+      </ReactFlow>
+    </div>
+  );
+}