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
87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
"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>
|
|
);
|
|
}
|