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
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Network, MessagesSquare } from "lucide-react";
|
|
|
|
const TABS = [
|
|
{ href: "/rat-architekt", label: "Rat-Architekt", icon: Network },
|
|
{ href: "/konferenzzimmer", label: "Konferenzzimmer", icon: MessagesSquare },
|
|
];
|
|
|
|
export function NavTabs() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="flex items-center gap-1 px-4 py-2 bg-white border-b border-slate-200 flex-shrink-0">
|
|
<span className="font-bold text-indigo-700 text-sm mr-4">CouncilOS</span>
|
|
{TABS.map(({ href, label, icon: Icon }) => {
|
|
const active = pathname.startsWith(href);
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={[
|
|
"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors",
|
|
active
|
|
? "bg-indigo-50 text-indigo-700"
|
|
: "text-slate-500 hover:text-slate-700 hover:bg-slate-50",
|
|
].join(" ")}
|
|
>
|
|
<Icon size={14} />
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|