its-consulting/KI-Konzil
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
- 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
This commit is contained in:
Claude 2026-02-20 17:03:32 +00:00
parent 06aec41a8a
commit 216fdd9589
No known key found for this signature in database
30 changed files with 8237 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/app/layout.tsx Normal file
View file

@ -0,0 +1,22 @@
import type { Metadata } from "next";
import { Geist } from "next/font/google";
import "./globals.css";
import { NavTabs } from "@/app/components/NavTabs";
const geist = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
export const metadata: Metadata = {
title: "CouncilOS — KI-Rat Baukasten",
description: "Visueller No-Code-Builder für Multi-Agent-KI-Pipelines",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="de">
<body className={`${geist.variable} antialiased bg-slate-50 h-screen flex flex-col`}>
<NavTabs />
<main className="flex-1 overflow-hidden">{children}</main>
</body>
</html>
);
}