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
61 lines
1.2 KiB
TypeScript
61 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import {
|
|
EdgeProps,
|
|
BaseEdge,
|
|
EdgeLabelRenderer,
|
|
getSmoothStepPath,
|
|
} from "@xyflow/react";
|
|
|
|
export const ConditionalEdge = memo(function ConditionalEdge({
|
|
id,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
data,
|
|
markerEnd,
|
|
}: EdgeProps) {
|
|
const [edgePath, labelX, labelY] = getSmoothStepPath({
|
|
sourceX,
|
|
sourceY,
|
|
sourcePosition,
|
|
targetX,
|
|
targetY,
|
|
targetPosition,
|
|
});
|
|
|
|
const condition = data?.condition as string | undefined;
|
|
|
|
return (
|
|
<>
|
|
<BaseEdge
|
|
id={id}
|
|
path={edgePath}
|
|
markerEnd={markerEnd}
|
|
style={{
|
|
strokeDasharray: "6 3",
|
|
stroke: "#6366f1",
|
|
strokeWidth: 2,
|
|
}}
|
|
/>
|
|
{condition && (
|
|
<EdgeLabelRenderer>
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
|
|
pointerEvents: "all",
|
|
}}
|
|
className="bg-indigo-600 text-white text-xs px-2 py-0.5 rounded-full font-medium shadow nodrag nopan"
|
|
>
|
|
{condition}
|
|
</div>
|
|
</EdgeLabelRenderer>
|
|
)}
|
|
</>
|
|
);
|
|
});
|