apps/canvas/front/src/App.tsx

import { ReactFlowProvider } from "@xyflow/react";
import "./App.css";
import { CanvasBuilder } from "./Canvas";
import { Tabs, TabsTrigger, TabsContent, TabsList } from "./components/ui/tabs";
import { Config } from "./Config";
import { Integrations } from "./Integrations";
import { Toaster } from "./components/ui/toaster";
import { ProjectSelect } from "./ProjectSelect";
import { Logs } from "./Monitoring";
import { Overview } from "./Overview";
import { ChatManager } from "./components/ChatManager";
import { useAgents } from "./lib/state";
import { Bot } from "lucide-react";

export default function App() {
	return (
		<ReactFlowProvider>
			<div className="h-screen flex flex-col p-1">
				<AppImpl />
				<ChatManager />
				<Toaster />
			</div>
		</ReactFlowProvider>
	);
}

function AppImpl() {
	const agents = useAgents();
	return (
		<Tabs defaultValue="overview" className="flex-1 flex flex-col min-h-0">
			<div className="flex justify-between border-b">
				<TabsList className="!rounded-none">
					<TabsTrigger value="overview">Overview</TabsTrigger>
					<TabsTrigger value="canvas">Canvas</TabsTrigger>
					<TabsTrigger value="monitoring">Monitoring</TabsTrigger>
					<TabsTrigger value="config">Config</TabsTrigger>
					<TabsTrigger value="integrations">Integrations</TabsTrigger>
					{agents.map((a) => {
						return (
							<TabsTrigger
								key={a.agentName}
								value={`agent-${a.agentName}`}
								className="flex flex-row items-center gap-1"
							>
								<Bot className="w-4 h-4" />
								{a.agentName}
							</TabsTrigger>
						);
					})}
				</TabsList>
				<ProjectSelect className="w-fit min-w-[150px]" />
			</div>
			<TabsContent value="overview" className="!mt-0 flex-1 min-h-0">
				<Overview />
			</TabsContent>
			<TabsContent value="canvas" className="!mt-0 flex-1 min-h-0">
				<CanvasBuilder />
			</TabsContent>
			<TabsContent value="config" className="!mt-0 flex-1 min-h-0">
				<Config />
			</TabsContent>
			<TabsContent value="integrations" className="!mt-0 flex-1 min-h-0">
				<Integrations />
			</TabsContent>
			<TabsContent value="monitoring" className="!mt-0 flex-1 min-h-0">
				<Logs />
			</TabsContent>
			{agents.map((a) => (
				<TabsContent value={`agent-${a.agentName}`} className="!mt-0 flex-1 min-h-0">
					<iframe key={a.name} src={a.address} title={a.agentName} className="w-full h-full" />
				</TabsContent>
			))}
		</Tabs>
	);
}