Canvas: Implement agent sidebar on the overview tab
Change-Id: I1f2fb874cb98247c73bebf364f4669ad5170c4a0
diff --git a/apps/canvas/front/src/Overview.tsx b/apps/canvas/front/src/Overview.tsx
index 8ed2c0c..1c86aae 100644
--- a/apps/canvas/front/src/Overview.tsx
+++ b/apps/canvas/front/src/Overview.tsx
@@ -1,9 +1,11 @@
import React, { useMemo } from "react";
-import { useStateStore, AppNode, NodeType } from "@/lib/state";
+import { useStateStore, useLeadAgent } from "@/lib/state";
import { NodeDetails } from "./components/node-details";
import { Actions } from "./components/actions";
import { Canvas } from "./components/canvas";
import { Separator } from "./components/ui/separator";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "./components/ui/resizable";
+import { AppNode, NodeType } from "config";
const sections: { title: string; nodes: NodeType[] }[] = [
{
@@ -21,6 +23,30 @@
];
export function Overview(): React.ReactNode {
+ const leadAgent = useLeadAgent();
+ if (leadAgent) {
+ return (
+ <ResizablePanelGroup direction="horizontal" className="w-full h-full">
+ <ResizablePanel defaultSize={25}>
+ <iframe
+ key={leadAgent.name}
+ src={`${leadAgent.address}?m`}
+ title={leadAgent.agentName}
+ className="w-full h-full"
+ />
+ </ResizablePanel>
+ <ResizableHandle withHandle />
+ <ResizablePanel defaultSize={75} className="!overflow-y-auto !overflow-x-hidden">
+ <OverviewImpl />
+ </ResizablePanel>
+ </ResizablePanelGroup>
+ );
+ } else {
+ return <OverviewImpl />;
+ }
+}
+
+function OverviewImpl(): React.ReactNode {
const store = useStateStore();
const nodes = useMemo(() => {
return store.nodes.filter((n) => n.type !== "network" && n.type !== "github" && n.type !== undefined);