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/rat-architekt/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ReactFlowProvider } from "@xyflow/react";
+import { Save, Download } from "lucide-react";
+import { ArchitectCanvas } from "@/app/components/ArchitectCanvas";
+import { NodeSidebar } from "@/app/components/panels/NodeSidebar";
+import { NodeSettingsPanel } from "@/app/components/panels/NodeSettingsPanel";
+import { useCouncilStore } from "@/app/store/council-store";
+import { parseGraphToBlueprint } from "@/app/utils/blueprint-parser";
+import { councilApi } from "@/app/utils/api-client";
+
+export default function RatArchitektPage() {
+  const nodes = useCouncilStore((s) => s.nodes);
+  const edges = useCouncilStore((s) => s.edges);
+  const councilName = useCouncilStore((s) => s.councilName);
+  const setCouncilName = useCouncilStore((s) => s.setCouncilName);
+
+  const handleSave = async () => {
+    const blueprint = parseGraphToBlueprint(nodes, edges, councilName);
+    try {
+      await councilApi.create(blueprint);
+      alert("Rat gespeichert!");
+    } catch (e) {
+      alert("Fehler beim Speichern: " + (e as Error).message);
+    }
+  };
+
+  const handleExport = () => {
+    const blueprint = parseGraphToBlueprint(nodes, edges, councilName);
+    const blob = new Blob([JSON.stringify(blueprint, null, 2)], {
+      type: "application/json",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${councilName.replace(/\s+/g, "-")}-blueprint.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Toolbar */}
+      <header className="flex items-center gap-3 px-4 py-2 border-b border-slate-200 bg-white flex-shrink-0">
+        <input
+          type="text"
+          value={councilName}
+          onChange={(e) => setCouncilName(e.target.value)}
+          className="font-semibold text-slate-800 bg-transparent border-none focus:outline-none focus:ring-2 focus:ring-indigo-300 rounded px-1"
+        />
+        <span className="text-slate-300">|</span>
+        <span className="text-xs text-slate-400">{nodes.length} Agenten · {edges.length} Kanten</span>
+        <div className="ml-auto flex gap-2">
+          <button
+            onClick={handleExport}
+            className="flex items-center gap-1.5 text-sm text-slate-600 border border-slate-200 px-3 py-1.5 rounded-lg hover:bg-slate-50 transition-colors"
+          >
+            <Download size={14} />
+            Export
+          </button>
+          <button
+            onClick={handleSave}
+            className="flex items-center gap-1.5 text-sm text-white bg-indigo-600 px-3 py-1.5 rounded-lg hover:bg-indigo-700 transition-colors"
+          >
+            <Save size={14} />
+            Speichern
+          </button>
+        </div>
+      </header>
+
+      {/* Main area */}
+      <div className="flex flex-1 overflow-hidden">
+        <ReactFlowProvider>
+          <NodeSidebar />
+          <ArchitectCanvas />
+          <NodeSettingsPanel />
+        </ReactFlowProvider>
+      </div>
+    </div>
+  );
+}