216fdd9589
- 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
81 lines
3 KiB
TypeScript
81 lines
3 KiB
TypeScript
"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>
|
|
);
|
|
}
|