Implement Phase 2: Next.js + React Flow frontend MVP
- 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
parent
06aec41a8a
commit
216fdd9589
30 changed files with 8237 additions and 0 deletions
143
frontend/app/konferenzzimmer/page.tsx
Normal file
143
frontend/app/konferenzzimmer/page.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue