Merge pull request #5 from Kenearos/claude/check-project-progress-4CYs7

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

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/components/ArchitectCanvas.tsx

@@ -0,0 +1,87 @@
+"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>
+  );
+}

frontend/app/components/NavTabs.tsx

@@ -0,0 +1,38 @@
+"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>
+  );
+}

frontend/app/components/edges/ConditionalEdge.tsx

@@ -0,0 +1,61 @@
+"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>
+      )}
+    </>
+  );
+});

frontend/app/components/nodes/AgentNode.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { memo } from "react";
+import { Handle, Position, NodeProps } from "@xyflow/react";
+import { Bot, Globe, FileText } from "lucide-react";
+import { AgentNodeData } from "@/app/types/council";
+import { useCouncilStore } from "@/app/store/council-store";
+
+const MODEL_LABELS: Record<string, string> = {
+  "claude-3-5-sonnet": "Claude 3.5",
+  "gpt-4o": "GPT-4o",
+  local: "Lokal",
+};
+
+const MODEL_COLORS: Record<string, string> = {
+  "claude-3-5-sonnet": "bg-orange-100 text-orange-700 border-orange-300",
+  "gpt-4o": "bg-green-100 text-green-700 border-green-300",
+  local: "bg-gray-100 text-gray-700 border-gray-300",
+};
+
+export const AgentNode = memo(function AgentNode({
+  id,
+  data,
+  selected,
+}: NodeProps) {
+  const nodeData = data as AgentNodeData;
+  const selectNode = useCouncilStore((s) => s.selectNode);
+
+  const isActive = nodeData.isActive;
+
+  return (
+    <div
+      onClick={() => selectNode(id)}
+      className={[
+        "w-52 rounded-xl border-2 bg-white shadow-md transition-all duration-300 cursor-pointer",
+        isActive
+          ? "border-indigo-500 shadow-indigo-200 shadow-lg animate-pulse"
+          : selected
+          ? "border-indigo-400 shadow-indigo-100"
+          : "border-slate-200 hover:border-slate-400",
+      ].join(" ")}
+    >
+      {/* Header */}
+      <div
+        className={[
+          "flex items-center gap-2 rounded-t-xl px-3 py-2",
+          isActive ? "bg-indigo-50" : "bg-slate-50",
+        ].join(" ")}
+      >
+        <Bot
+          size={16}
+          className={isActive ? "text-indigo-600" : "text-slate-500"}
+        />
+        <span className="font-semibold text-sm text-slate-800 truncate flex-1">
+          {nodeData.label}
+        </span>
+        {isActive && (
+          <span className="text-xs text-indigo-600 font-medium">aktiv</span>
+        )}
+      </div>
+
+      {/* Body */}
+      <div className="px-3 py-2 space-y-2">
+        {/* System prompt preview */}
+        <p className="text-xs text-slate-500 line-clamp-2 min-h-[2rem]">
+          {nodeData.systemPrompt || (
+            <span className="italic text-slate-300">Kein System-Prompt</span>
+          )}
+        </p>
+
+        {/* Model badge */}
+        <span
+          className={[
+            "inline-block text-xs px-2 py-0.5 rounded-full border font-medium",
+            MODEL_COLORS[nodeData.model] ?? MODEL_COLORS["local"],
+          ].join(" ")}
+        >
+          {MODEL_LABELS[nodeData.model] ?? nodeData.model}
+        </span>
+
+        {/* Tool toggles */}
+        {(nodeData.tools.webSearch || nodeData.tools.pdfReader) && (
+          <div className="flex gap-2">
+            {nodeData.tools.webSearch && (
+              <span className="flex items-center gap-1 text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full">
+                <Globe size={10} />
+                Web
+              </span>
+            )}
+            {nodeData.tools.pdfReader && (
+              <span className="flex items-center gap-1 text-xs text-purple-600 bg-purple-50 px-2 py-0.5 rounded-full">
+                <FileText size={10} />
+                PDF
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Handles */}
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="!w-3 !h-3 !bg-slate-400 !border-white !border-2"
+      />
+      <Handle
+        type="source"
+        position={Position.Right}
+        className="!w-3 !h-3 !bg-indigo-500 !border-white !border-2"
+      />
+    </div>
+  );
+});

frontend/app/components/panels/NodeSettingsPanel.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { X, Bot } from "lucide-react";
+import { AgentNodeData, LLMModel } from "@/app/types/council";
+import { useCouncilStore } from "@/app/store/council-store";
+
+const MODELS: { value: LLMModel; label: string }[] = [
+  { value: "claude-3-5-sonnet", label: "Claude 3.5 Sonnet" },
+  { value: "gpt-4o", label: "GPT-4o" },
+  { value: "local", label: "Lokal" },
+];
+
+// Right-side panel shown when an AgentNode is selected
+export function NodeSettingsPanel() {
+  const selectedNodeId = useCouncilStore((s) => s.selectedNodeId);
+  const nodes = useCouncilStore((s) => s.nodes);
+  const updateNodeData = useCouncilStore((s) => s.updateNodeData);
+  const selectNode = useCouncilStore((s) => s.selectNode);
+
+  const node = nodes.find((n) => n.id === selectedNodeId);
+  const data = node?.data as AgentNodeData | undefined;
+
+  // Local draft to avoid re-renders on every keystroke
+  const [draft, setDraft] = useState<AgentNodeData | null>(null);
+
+  useEffect(() => {
+    setDraft(data ?? null);
+  }, [selectedNodeId, data]);
+
+  if (!selectedNodeId || !draft) return null;
+
+  const commit = (partial: Partial<AgentNodeData>) => {
+    const updated = { ...draft, ...partial };
+    setDraft(updated);
+    updateNodeData(selectedNodeId, partial);
+  };
+
+  return (
+    <aside className="w-72 flex-shrink-0 bg-white border-l border-slate-200 p-4 flex flex-col gap-4 overflow-y-auto">
+      {/* Header */}
+      <div className="flex items-center gap-2">
+        <Bot size={16} className="text-indigo-600" />
+        <h2 className="font-semibold text-slate-800 text-sm flex-1">
+          Agent-Einstellungen
+        </h2>
+        <button
+          onClick={() => selectNode(null)}
+          className="text-slate-400 hover:text-slate-600"
+        >
+          <X size={16} />
+        </button>
+      </div>
+
+      {/* Name */}
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-slate-500">Name</label>
+        <input
+          type="text"
+          value={draft.label}
+          onChange={(e) => commit({ label: e.target.value })}
+          className="rounded-lg border border-slate-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300"
+        />
+      </div>
+
+      {/* System Prompt */}
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-slate-500">
+          System-Prompt
+        </label>
+        <textarea
+          value={draft.systemPrompt}
+          onChange={(e) => commit({ systemPrompt: e.target.value })}
+          rows={6}
+          placeholder="Beschreibe die Rolle und das Verhalten dieses Agenten..."
+          className="rounded-lg border border-slate-200 px-3 py-2 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-indigo-300"
+        />
+      </div>
+
+      {/* Model */}
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-slate-500">Modell</label>
+        <select
+          value={draft.model}
+          onChange={(e) => commit({ model: e.target.value as LLMModel })}
+          className="rounded-lg border border-slate-200 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-300"
+        >
+          {MODELS.map((m) => (
+            <option key={m.value} value={m.value}>
+              {m.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Tools */}
+      <div className="flex flex-col gap-2">
+        <label className="text-xs font-medium text-slate-500">Tools</label>
+
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={draft.tools.webSearch}
+            onChange={(e) =>
+              commit({ tools: { ...draft.tools, webSearch: e.target.checked } })
+            }
+            className="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-300"
+          />
+          <span className="text-sm text-slate-700">Web-Suche (Tavily)</span>
+        </label>
+
+        <label className="flex items-center gap-3 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={draft.tools.pdfReader}
+            onChange={(e) =>
+              commit({ tools: { ...draft.tools, pdfReader: e.target.checked } })
+            }
+            className="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-300"
+          />
+          <span className="text-sm text-slate-700">PDF-Leser</span>
+        </label>
+      </div>
+
+      {/* Edge type info */}
+      <div className="mt-auto rounded-lg bg-slate-50 p-3 text-xs text-slate-500 leading-relaxed">
+        <strong className="text-slate-600">Tipp:</strong> Verbinde zwei Agenten
+        mit einer Kante. Klicke danach auf die Kante, um sie als{" "}
+        <em>bedingt</em> zu markieren und einen Routing-Wert einzugeben (z. B.{" "}
+        <code className="bg-slate-200 px-1 rounded">rework</code> oder{" "}
+        <code className="bg-slate-200 px-1 rounded">approve</code>).
+      </div>
+    </aside>
+  );
+}

frontend/app/components/panels/NodeSidebar.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useCallback } from "react";
+import { Bot, Plus } from "lucide-react";
+import { useCouncilStore } from "@/app/store/council-store";
+
+// Sidebar panel — drag or click to add agent nodes to the canvas
+export function NodeSidebar() {
+  const addAgentNode = useCouncilStore((s) => s.addAgentNode);
+
+  const onDragStart = useCallback(
+    (event: React.DragEvent<HTMLDivElement>) => {
+      event.dataTransfer.setData("application/reactflow", "agentNode");
+      event.dataTransfer.effectAllowed = "move";
+    },
+    []
+  );
+
+  const handleAddClick = useCallback(() => {
+    // Add node at a reasonable default position near the center
+    addAgentNode({ x: 200 + Math.random() * 200, y: 100 + Math.random() * 200 });
+  }, [addAgentNode]);
+
+  return (
+    <aside className="w-52 flex-shrink-0 bg-white border-r border-slate-200 p-4 flex flex-col gap-4">
+      <h2 className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
+        Komponenten
+      </h2>
+
+      {/* Draggable node template */}
+      <div
+        draggable
+        onDragStart={onDragStart}
+        onClick={handleAddClick}
+        className="flex items-center gap-2 rounded-lg border-2 border-dashed border-indigo-300 bg-indigo-50 px-3 py-3 cursor-grab active:cursor-grabbing hover:border-indigo-500 hover:bg-indigo-100 transition-colors select-none"
+        title="Auf Canvas ziehen oder klicken"
+      >
+        <Bot size={18} className="text-indigo-600" />
+        <span className="text-sm font-medium text-indigo-700">Agent</span>
+        <Plus size={14} className="text-indigo-400 ml-auto" />
+      </div>
+
+      <p className="text-xs text-slate-400 leading-snug">
+        Ziehe einen Agent auf die Zeichenfläche oder klicke, um ihn hinzuzufügen.
+      </p>
+
+      <div className="mt-auto space-y-1">
+        <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">
+          Kanten
+        </p>
+        <div className="flex items-center gap-2 text-xs text-slate-500">
+          <span className="block w-6 border-t-2 border-slate-400" />
+          Linear
+        </div>
+        <div className="flex items-center gap-2 text-xs text-slate-500">
+          <span className="block w-6 border-t-2 border-dashed border-indigo-500" />
+          Bedingt
+        </div>
+      </div>
+    </aside>
+  );
+}

frontend/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

frontend/app/hooks/useCouncilWebSocket.ts

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useRef, useCallback } from "react";
+import { WSMessage } from "@/app/types/council";
+import { wsUrl } from "@/app/utils/api-client";
+import { useCouncilStore } from "@/app/store/council-store";
+
+interface Options {
+  run_id: string | null;
+  onComplete?: (result: string) => void;
+  onError?: (error: string) => void;
+}
+
+// WebSocket hook for live agent status updates during a council run
+export function useCouncilWebSocket({ run_id, onComplete, onError }: Options) {
+  const ws = useRef<WebSocket | null>(null);
+  const markNodeActive = useCouncilStore((s) => s.markNodeActive);
+  const clearActiveNode = useCouncilStore((s) => s.clearActiveNode);
+  const setActiveRun = useCouncilStore((s) => s.setActiveRun);
+
+  const disconnect = useCallback(() => {
+    if (ws.current) {
+      ws.current.close();
+      ws.current = null;
+    }
+    clearActiveNode();
+  }, [clearActiveNode]);
+
+  useEffect(() => {
+    if (!run_id) return;
+
+    const socket = new WebSocket(wsUrl(run_id));
+    ws.current = socket;
+
+    socket.onmessage = (event: MessageEvent<string>) => {
+      let msg: WSMessage;
+      try {
+        msg = JSON.parse(event.data) as WSMessage;
+      } catch {
+        return;
+      }
+
+      switch (msg.type) {
+        case "node_enter":
+          if (msg.node_name) markNodeActive(msg.node_name);
+          break;
+        case "node_exit":
+          clearActiveNode();
+          break;
+        case "run_complete":
+          clearActiveNode();
+          setActiveRun(null);
+          if (msg.result) onComplete?.(msg.result);
+          disconnect();
+          break;
+        case "run_error":
+          clearActiveNode();
+          setActiveRun(null);
+          if (msg.error) onError?.(msg.error);
+          disconnect();
+          break;
+      }
+    };
+
+    socket.onerror = () => {
+      onError?.("WebSocket-Verbindungsfehler");
+      disconnect();
+    };
+
+    return () => disconnect();
+  }, [run_id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return { disconnect };
+}

frontend/app/konferenzzimmer/page.tsx

@@ -0,0 +1,143 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { ReactFlowProvider } from "@xyflow/react";
+import { Play, Square, Upload } from "lucide-react";
+import { ArchitectCanvas } from "@/app/components/ArchitectCanvas";
+import { useCouncilWebSocket } from "@/app/hooks/useCouncilWebSocket";
+import { useCouncilStore } from "@/app/store/council-store";
+import { runApi } from "@/app/utils/api-client";
+
+export default function KonferenzzimmerPage() {
+  const [topic, setTopic] = useState("");
+  const [runId, setRunId] = useState<string | null>(null);
+  const [result, setResult] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isRunning, setIsRunning] = useState(false);
+
+  const setActiveRun = useCouncilStore((s) => s.setActiveRun);
+  const clearActiveNode = useCouncilStore((s) => s.clearActiveNode);
+
+  const onComplete = useCallback((res: string) => {
+    setResult(res);
+    setIsRunning(false);
+    setRunId(null);
+  }, []);
+
+  const onError = useCallback((err: string) => {
+    setError(err);
+    setIsRunning(false);
+    setRunId(null);
+  }, []);
+
+  useCouncilWebSocket({ run_id: runId, onComplete, onError });
+
+  const handleStart = async () => {
+    if (!topic.trim()) return;
+    setResult(null);
+    setError(null);
+    setIsRunning(true);
+    clearActiveNode();
+    try {
+      const run = await runApi.start(topic);
+      setActiveRun(run);
+      setRunId(run.run_id);
+    } catch (e) {
+      setError("Fehler beim Starten: " + (e as Error).message);
+      setIsRunning(false);
+    }
+  };
+
+  const handleStop = () => {
+    setRunId(null);
+    setIsRunning(false);
+    clearActiveNode();
+    setActiveRun(null);
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Control bar */}
+      <header className="flex items-center gap-3 px-4 py-2 border-b border-slate-200 bg-white flex-shrink-0">
+        <textarea
+          value={topic}
+          onChange={(e) => setTopic(e.target.value)}
+          placeholder="Thema oder Aufgabe eingeben..."
+          rows={1}
+          className="flex-1 rounded-lg border border-slate-200 px-3 py-1.5 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-indigo-300"
+        />
+        <button 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">
+          <Upload size={14} />
+          PDF
+        </button>
+        {!isRunning ? (
+          <button
+            onClick={handleStart}
+            disabled={!topic.trim()}
+            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 disabled:opacity-40 disabled:cursor-not-allowed"
+          >
+            <Play size={14} />
+            Start
+          </button>
+        ) : (
+          <button
+            onClick={handleStop}
+            className="flex items-center gap-1.5 text-sm text-white bg-red-500 px-3 py-1.5 rounded-lg hover:bg-red-600 transition-colors"
+          >
+            <Square size={14} />
+            Stopp
+          </button>
+        )}
+      </header>
+
+      {/* Canvas (read-only, agent nodes pulse when active) */}
+      <div className="flex flex-1 overflow-hidden">
+        <ReactFlowProvider>
+          <div className="flex-1 h-full relative">
+            <ArchitectCanvas />
+            {isRunning && (
+              <div className="absolute top-3 left-1/2 -translate-x-1/2 bg-indigo-600 text-white text-xs px-4 py-1.5 rounded-full shadow-lg animate-pulse pointer-events-none">
+                Rat läuft…
+              </div>
+            )}
+          </div>
+        </ReactFlowProvider>
+
+        {/* Output panel */}
+        <aside className="w-80 flex-shrink-0 border-l border-slate-200 bg-white flex flex-col">
+          <div className="px-4 py-3 border-b border-slate-100">
+            <h2 className="text-sm font-semibold text-slate-700">Ergebnis</h2>
+          </div>
+          <div className="flex-1 overflow-y-auto p-4">
+            {error && (
+              <div className="rounded-lg bg-red-50 border border-red-200 p-3 text-sm text-red-700">
+                {error}
+              </div>
+            )}
+            {result && (
+              <div className="rounded-lg bg-slate-50 border border-slate-200 p-3 text-sm text-slate-700 whitespace-pre-wrap leading-relaxed">
+                {result}
+              </div>
+            )}
+            {!result && !error && !isRunning && (
+              <p className="text-sm text-slate-400 italic">
+                Noch kein Ergebnis. Starte den Rat mit einem Thema.
+              </p>
+            )}
+            {isRunning && !result && (
+              <div className="space-y-2">
+                {[1, 2, 3].map((i) => (
+                  <div
+                    key={i}
+                    className="h-3 bg-slate-100 rounded animate-pulse"
+                    style={{ width: `${70 + i * 10}%` }}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </aside>
+      </div>
+    </div>
+  );
+}

frontend/app/layout.tsx

@@ -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>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+  redirect("/rat-architekt");
+}

frontend/app/rat-architekt/page.tsx

@@ -0,0 +1,81 @@
+"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>
+  );
+}

frontend/app/store/council-store.ts

@@ -0,0 +1,125 @@
+// Zustand store for canvas state and council run state
+import { create } from "zustand";
+import { Node, Edge, addEdge, applyNodeChanges, applyEdgeChanges, NodeChange, EdgeChange, Connection } from "@xyflow/react";
+import { AgentNodeData, CouncilRun, LLMModel } from "@/app/types/council";
+import { nanoid } from "nanoid";
+
+interface CouncilStore {
+  // Canvas
+  nodes: Node<AgentNodeData>[];
+  edges: Edge[];
+  selectedNodeId: string | null;
+  councilName: string;
+
+  // Execution
+  activeRun: CouncilRun | null;
+  activeNodeId: string | null;
+
+  // Canvas actions
+  onNodesChange: (changes: NodeChange[]) => void;
+  onEdgesChange: (changes: EdgeChange[]) => void;
+  onConnect: (connection: Connection) => void;
+  addAgentNode: (position: { x: number; y: number }) => void;
+  updateNodeData: (nodeId: string, data: Partial<AgentNodeData>) => void;
+  selectNode: (nodeId: string | null) => void;
+  setCouncilName: (name: string) => void;
+  setNodes: (nodes: Node<AgentNodeData>[]) => void;
+  setEdges: (edges: Edge[]) => void;
+
+  // Run actions
+  setActiveRun: (run: CouncilRun | null) => void;
+  setActiveNodeId: (nodeId: string | null) => void;
+  markNodeActive: (nodeName: string) => void;
+  clearActiveNode: () => void;
+}
+
+function makeDefaultNodeData(label: string): AgentNodeData {
+  return {
+    label,
+    systemPrompt: "",
+    model: "claude-3-5-sonnet",
+    tools: { webSearch: false, pdfReader: false },
+    isActive: false,
+  };
+}
+
+export const useCouncilStore = create<CouncilStore>((set, get) => ({
+  nodes: [],
+  edges: [],
+  selectedNodeId: null,
+  councilName: "Mein Rat",
+  activeRun: null,
+  activeNodeId: null,
+
+  onNodesChange: (changes) =>
+    set((state) => ({
+      nodes: applyNodeChanges(changes, state.nodes) as Node<AgentNodeData>[],
+    })),
+
+  onEdgesChange: (changes) =>
+    set((state) => ({
+      edges: applyEdgeChanges(changes, state.edges),
+    })),
+
+  onConnect: (connection) =>
+    set((state) => ({
+      edges: addEdge(
+        { ...connection, type: "default", data: { type: "linear" } },
+        state.edges
+      ),
+    })),
+
+  addAgentNode: (position) => {
+    const id = nanoid();
+    const count = get().nodes.length + 1;
+    const newNode: Node<AgentNodeData> = {
+      id,
+      type: "agentNode",
+      position,
+      data: makeDefaultNodeData(`Agent ${count}`),
+    };
+    set((state) => ({ nodes: [...state.nodes, newNode] }));
+  },
+
+  updateNodeData: (nodeId, data) =>
+    set((state) => ({
+      nodes: state.nodes.map((n) =>
+        n.id === nodeId ? { ...n, data: { ...n.data, ...data } } : n
+      ),
+    })),
+
+  selectNode: (nodeId) => set({ selectedNodeId: nodeId }),
+
+  setCouncilName: (name) => set({ councilName: name }),
+
+  setNodes: (nodes) => set({ nodes }),
+
+  setEdges: (edges) => set({ edges }),
+
+  setActiveRun: (run) => set({ activeRun: run }),
+
+  setActiveNodeId: (nodeId) => set({ activeNodeId: nodeId }),
+
+  markNodeActive: (nodeName) => {
+    const node = get().nodes.find((n) => n.data.label === nodeName);
+    if (node) {
+      set((state) => ({
+        activeNodeId: node.id,
+        nodes: state.nodes.map((n) => ({
+          ...n,
+          data: { ...n.data, isActive: n.id === node.id },
+        })),
+      }));
+    }
+  },
+
+  clearActiveNode: () =>
+    set((state) => ({
+      activeNodeId: null,
+      nodes: state.nodes.map((n) => ({
+        ...n,
+        data: { ...n.data, isActive: false },
+      })),
+    })),
+}));
+

frontend/app/types/council.ts

@@ -0,0 +1,73 @@
+// Council blueprint types — canonical exchange format between frontend and backend
+// Version field allows schema evolution
+
+export type LLMModel = "claude-3-5-sonnet" | "gpt-4o" | "local";
+
+export interface AgentTools {
+  webSearch: boolean;
+  pdfReader: boolean;
+}
+
+export interface AgentNodeData extends Record<string, unknown> {
+  label: string;
+  systemPrompt: string;
+  model: LLMModel;
+  tools: AgentTools;
+  isActive?: boolean; // set by WebSocket during execution
+}
+
+export type EdgeType = "linear" | "conditional";
+
+export interface ConditionalEdgeData {
+  condition: string; // e.g. "rework" | "approve"
+}
+
+// Blueprint JSON — versioned, stored in PostgreSQL
+export interface BlueprintNode {
+  id: string;
+  label: string;
+  systemPrompt: string;
+  model: LLMModel;
+  tools: AgentTools;
+  position: { x: number; y: number };
+}
+
+export interface BlueprintEdge {
+  id: string;
+  source: string;
+  target: string;
+  type: EdgeType;
+  condition?: string;
+}
+
+export interface CouncilBlueprint {
+  version: 1;
+  id?: string;
+  name: string;
+  nodes: BlueprintNode[];
+  edges: BlueprintEdge[];
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+// Council run (execution)
+export type RunStatus = "pending" | "running" | "completed" | "failed";
+
+export interface CouncilRun {
+  run_id: string;
+  status: RunStatus;
+  current_node?: string;
+  result?: string;
+  error?: string;
+}
+
+// WebSocket messages from backend
+export type WSMessageType = "node_enter" | "node_exit" | "run_complete" | "run_error";
+
+export interface WSMessage {
+  type: WSMessageType;
+  node_id?: string;
+  node_name?: string;
+  result?: string;
+  error?: string;
+}

frontend/app/utils/api-client.ts

@@ -0,0 +1,56 @@
+// API client for the FastAPI backend
+import { CouncilBlueprint, CouncilRun } from "@/app/types/council";
+
+const BASE_URL = process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:8000";
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE_URL}${path}`, {
+    headers: { "Content-Type": "application/json" },
+    ...options,
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    throw new Error(`API error ${res.status}: ${text}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+// Council blueprint CRUD
+export const councilApi = {
+  list: () => request<CouncilBlueprint[]>("/api/councils/"),
+
+  get: (id: string) => request<CouncilBlueprint>(`/api/councils/${id}`),
+
+  create: (blueprint: CouncilBlueprint) =>
+    request<CouncilBlueprint>("/api/councils/", {
+      method: "POST",
+      body: JSON.stringify(blueprint),
+    }),
+
+  update: (id: string, blueprint: CouncilBlueprint) =>
+    request<CouncilBlueprint>(`/api/councils/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(blueprint),
+    }),
+
+  delete: (id: string) =>
+    request<void>(`/api/councils/${id}`, { method: "DELETE" }),
+};
+
+// Council run (execution)
+export const runApi = {
+  start: (input_topic: string) =>
+    request<CouncilRun>("/api/run", {
+      method: "POST",
+      body: JSON.stringify({ input_topic }),
+    }),
+
+  status: (run_id: string) =>
+    request<CouncilRun>(`/api/run/${run_id}`),
+};
+
+// WebSocket URL helper
+export function wsUrl(run_id: string): string {
+  const wsBase = BASE_URL.replace(/^http/, "ws");
+  return `${wsBase}/ws/council/${run_id}`;
+}

frontend/app/utils/blueprint-parser.ts

@@ -0,0 +1,71 @@
+// Parser: React Flow graph state → CouncilBlueprint JSON (backend format)
+import { Node, Edge } from "@xyflow/react";
+import { AgentNodeData, BlueprintEdge, BlueprintNode, CouncilBlueprint, EdgeType } from "@/app/types/council";
+
+export function parseGraphToBlueprint(
+  nodes: Node<AgentNodeData>[],
+  edges: Edge[],
+  name: string,
+  existingId?: string
+): CouncilBlueprint {
+  const blueprintNodes: BlueprintNode[] = nodes.map((node) => ({
+    id: node.id,
+    label: node.data.label,
+    systemPrompt: node.data.systemPrompt,
+    model: node.data.model,
+    tools: node.data.tools,
+    position: { x: node.position.x, y: node.position.y },
+  }));
+
+  const blueprintEdges: BlueprintEdge[] = edges.map((edge) => {
+    const edgeType: EdgeType = (edge.data?.type as EdgeType) ?? "linear";
+    const result: BlueprintEdge = {
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      type: edgeType,
+    };
+    if (edgeType === "conditional" && edge.data?.condition) {
+      result.condition = edge.data.condition as string;
+    }
+    return result;
+  });
+
+  return {
+    version: 1,
+    id: existingId,
+    name,
+    nodes: blueprintNodes,
+    edges: blueprintEdges,
+  };
+}
+
+// Reverse: CouncilBlueprint → React Flow nodes/edges (for loading saved blueprints)
+export function parseBlueprintToGraph(blueprint: CouncilBlueprint): {
+  nodes: Node<AgentNodeData>[];
+  edges: Edge[];
+} {
+  const nodes: Node<AgentNodeData>[] = blueprint.nodes.map((n) => ({
+    id: n.id,
+    type: "agentNode",
+    position: n.position,
+    data: {
+      label: n.label,
+      systemPrompt: n.systemPrompt,
+      model: n.model,
+      tools: n.tools,
+    },
+  }));
+
+  const edges: Edge[] = blueprint.edges.map((e) => ({
+    id: e.id,
+    source: e.source,
+    target: e.target,
+    type: e.type === "conditional" ? "conditionalEdge" : "default",
+    data: { type: e.type, condition: e.condition },
+    label: e.type === "conditional" ? e.condition : undefined,
+    animated: e.type === "conditional",
+  }));
+
+  return { nodes, edges };
+}

frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

frontend/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@xyflow/react": "^12.10.1",
+    "lucide-react": "^0.575.0",
+    "nanoid": "^5.1.6",
+    "next": "16.1.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

frontend/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

frontend/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

frontend/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

frontend/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

frontend/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}