apps/canvas/front/src/Build.tsx

import { Canvas } from "./Canvas";
import { Details } from "./Details";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable";
import { Tools } from "./Tools";
import { Agent } from "./Agent";
import { useBuildMode, useLeadAgent } from "./lib/state";
import { Overview } from "./Overview";
import { useMemo } from "react";

export function Build() {
	const leadAgent = useLeadAgent();
	const buildMode = useBuildMode();
	const mainWidth = useMemo(() => {
		let ret = 100;
		if (leadAgent) {
			ret -= 25;
		}
		if (buildMode === "canvas") {
			ret -= 20;
		}
		return ret;
	}, [leadAgent, buildMode]);
	return (
		<ResizablePanelGroup direction="horizontal" className="w-full h-full">
			{leadAgent && (
				<>
					<ResizablePanel defaultSize={25}>
						<Agent agent={leadAgent} compact={true} />
					</ResizablePanel>
					<ResizableHandle withHandle />
				</>
			)}
			<ResizablePanel defaultSize={mainWidth}>
				<ResizablePanelGroup direction="vertical">
					<ResizablePanel defaultSize={80}>
						<OverviewOrCanvas />
					</ResizablePanel>
					<ResizableHandle withHandle />
					<ResizablePanel defaultSize={20}>
						<Tools />
					</ResizablePanel>
				</ResizablePanelGroup>
			</ResizablePanel>
			{buildMode === "canvas" && (
				<>
					<ResizableHandle withHandle />
					<ResizablePanel defaultSize={20} className="!overflow-y-auto !overflow-x-hidden">
						<Details />
					</ResizablePanel>
				</>
			)}
		</ResizablePanelGroup>
	);
}

function OverviewOrCanvas() {
	const buildMode = useBuildMode();
	switch (buildMode) {
		case "overview":
			return <Overview />;
		case "canvas":
			return <Canvas />;
		default:
			throw new Error(`Unknown build mode: ${buildMode}`);
	}
}