diff --git a/apps/canvas/back/package-lock.json b/apps/canvas/back/package-lock.json
index 03f0e80..25d7214 100644
--- a/apps/canvas/back/package-lock.json
+++ b/apps/canvas/back/package-lock.json
@@ -50,8 +50,11 @@
         "zod": "^3.24.4"
       },
       "devDependencies": {
+        "@types/jest": "^30.0.0",
         "eslint": "^9.13.0",
+        "jest": "^29.7.0",
         "prettier": "3.5.3",
+        "ts-jest": "^29.4.0",
         "typescript": "^5.8.3",
         "typescript-eslint": "^8.11.0"
       }
diff --git a/apps/canvas/back/src/app_manager.ts b/apps/canvas/back/src/app_manager.ts
index faf64e2..34bdd5e 100644
--- a/apps/canvas/back/src/app_manager.ts
+++ b/apps/canvas/back/src/app_manager.ts
@@ -1,11 +1,12 @@
 import axios from "axios";
 import { z } from "zod";
 
-const accessSchema = z.discriminatedUnion("type", [
+export const accessSchema = z.discriminatedUnion("type", [
 	z.object({
 		type: z.literal("https"),
 		name: z.string(),
 		address: z.string(),
+		agentName: z.string().optional(),
 	}),
 	z.object({
 		type: z.literal("ssh"),
diff --git a/apps/canvas/config/src/graph.ts b/apps/canvas/config/src/graph.ts
index c259d8f..94708b4 100644
--- a/apps/canvas/config/src/graph.ts
+++ b/apps/canvas/config/src/graph.ts
@@ -241,6 +241,7 @@
 		type: z.literal("https"),
 		name: z.string(),
 		address: z.string(),
+		agentName: z.string().optional(),
 	}),
 	z.object({
 		type: z.literal("ssh"),
@@ -321,3 +322,4 @@
 
 export type ServiceInfo = z.infer<typeof serviceInfoSchema>;
 export type Env = z.infer<typeof envSchema>;
+export type Access = z.infer<typeof accessSchema>;
diff --git a/apps/canvas/config/src/index.ts b/apps/canvas/config/src/index.ts
index a8f21de..05b3291 100644
--- a/apps/canvas/config/src/index.ts
+++ b/apps/canvas/config/src/index.ts
@@ -47,6 +47,7 @@
 	GithubData,
 	envSchema,
 	accessSchema,
+	Access,
 } from "./graph.js";
 
 export { generateDodoConfig, configToGraph } from "./config.js";
diff --git a/apps/canvas/front/package-lock.json b/apps/canvas/front/package-lock.json
index 0855cc5..1913878 100644
--- a/apps/canvas/front/package-lock.json
+++ b/apps/canvas/front/package-lock.json
@@ -67,11 +67,15 @@
 			"license": "ISC",
 			"dependencies": {
 				"@xyflow/react": "^12.3.3",
+				"uuid": "^11.0.2",
 				"zod": "^3.24.4"
 			},
 			"devDependencies": {
+				"@types/jest": "^30.0.0",
 				"eslint": "^9.13.0",
+				"jest": "^29.7.0",
 				"prettier": "3.5.3",
+				"ts-jest": "^29.4.0",
 				"typescript": "^5.8.3",
 				"typescript-eslint": "^8.11.0"
 			}
diff --git a/apps/canvas/front/src/App.tsx b/apps/canvas/front/src/App.tsx
index 794b433..a9fd3a6 100644
--- a/apps/canvas/front/src/App.tsx
+++ b/apps/canvas/front/src/App.tsx
@@ -8,12 +8,16 @@
 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>
@@ -21,6 +25,7 @@
 }
 
 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">
@@ -30,6 +35,18 @@
 					<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>
@@ -48,6 +65,11 @@
 			<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>
 	);
 }
diff --git a/apps/canvas/front/src/Gateways.tsx b/apps/canvas/front/src/Gateways.tsx
index 626c433..dd4c482 100644
--- a/apps/canvas/front/src/Gateways.tsx
+++ b/apps/canvas/front/src/Gateways.tsx
@@ -1,10 +1,10 @@
-import { z } from "zod";
-import { accessSchema, useEnv } from "./lib/state";
+import { useEnv } from "./lib/state";
 import { Copy, Check } from "lucide-react";
 import { Button } from "./components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/ui/tooltip";
 import { useCallback, useState } from "react";
 import { AccessType } from "./components/icon";
+import { Access } from "config";
 
 export function Gateways() {
 	const env = useEnv();
@@ -30,8 +30,8 @@
 	);
 }
 
-function Gateway({ g }: { g: z.infer<typeof accessSchema> }) {
-	const [hidden, content] = (() => {
+function Gateway({ g }: { g: Access }) {
+	const [hidden, content] = ((): [string, string] => {
 		switch (g.type) {
 			case "https":
 				return [g.address, g.address];
@@ -49,6 +49,8 @@
 					`mongodb://${g.username}:*****@${g.host}:${g.port}/${g.database}`,
 					`mongodb://${g.username}:${g.password}@${g.host}:${g.port}/${g.database}`,
 				];
+			default:
+				throw new Error(`Unknown gateway type: ${g.type}`);
 		}
 	})();
 	const [clicked, setClicked] = useState(false);
@@ -71,7 +73,7 @@
 						onClick={g.type === "https" ? () => window.open(content, "_blank") : copy}
 						className="!gap-1 !p-0 !h-fit"
 					>
-						<AccessType type={g.type} className="w-4 h-4" />
+						<AccessType access={g} className="w-4 h-4" />
 						<div className="hover:bg-gray-200 p-x-1">{hidden}</div>
 					</Button>
 				</TooltipTrigger>
diff --git a/apps/canvas/front/src/components/ChatBubble.tsx b/apps/canvas/front/src/components/ChatBubble.tsx
new file mode 100644
index 0000000..74e3605
--- /dev/null
+++ b/apps/canvas/front/src/components/ChatBubble.tsx
@@ -0,0 +1,191 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+
+interface ChatBubbleProps {
+	agentName: string;
+	agentUrl: string;
+	initialPosition?: { bottom?: number; right?: number; top?: number; left?: number };
+}
+
+const MIN_WIDTH = 200;
+const MIN_HEIGHT = 150;
+const DEFAULT_WIDTH = 350;
+const DEFAULT_HEIGHT = 500;
+
+export function ChatBubble({ agentName, agentUrl, initialPosition = { bottom: 20, right: 20 } }: ChatBubbleProps) {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const [position, setPosition] = useState(initialPosition);
+	const [size, setSize] = useState({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
+	const [isDragging, setIsDragging] = useState(false);
+	const [isResizing, setIsResizing] = useState(false);
+	const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+	const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });
+
+	const bubbleRef = useRef<HTMLDivElement>(null);
+
+	const toggleExpansion = useCallback(
+		(e: React.MouseEvent) => {
+			if (isResizing) {
+				return;
+			}
+			if (
+				isExpanded &&
+				(e.target === e.currentTarget || (e.target as HTMLElement).closest("button") === e.currentTarget)
+			) {
+				e.stopPropagation();
+			}
+			setIsExpanded((prev) => !prev);
+			if (!isExpanded) {
+				setSize({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
+			}
+		},
+		[isExpanded, isResizing],
+	);
+
+	const handleDragMouseDown = useCallback((e: React.MouseEvent) => {
+		if (!bubbleRef.current || (e.target as HTMLElement).closest("button")) {
+			return;
+		}
+		setIsDragging(true);
+		const rect = bubbleRef.current.getBoundingClientRect();
+		setDragOffset({
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top,
+		});
+		e.preventDefault();
+	}, []);
+
+	const handleDragMouseMove = useCallback(
+		(e: MouseEvent) => {
+			if (!isDragging) return;
+			setPosition({
+				top: e.clientY - dragOffset.y,
+				left: e.clientX - dragOffset.x,
+				bottom: undefined,
+				right: undefined,
+			});
+		},
+		[isDragging, dragOffset],
+	);
+
+	const handleDragMouseUp = useCallback(() => {
+		setIsDragging(false);
+	}, []);
+
+	const handleResizeMouseDown = useCallback(
+		(e: React.MouseEvent) => {
+			e.stopPropagation();
+			setIsResizing(true);
+			setResizeStart({
+				x: e.clientX,
+				y: e.clientY,
+				width: size.width,
+				height: size.height,
+			});
+			e.preventDefault();
+		},
+		[size],
+	);
+
+	const handleResizeMouseMove = useCallback(
+		(e: MouseEvent) => {
+			if (!isResizing) return;
+			const newWidth = Math.max(MIN_WIDTH, resizeStart.width + (e.clientX - resizeStart.x));
+			const newHeight = Math.max(MIN_HEIGHT, resizeStart.height + (e.clientY - resizeStart.y));
+			setSize({ width: newWidth, height: newHeight });
+		},
+		[isResizing, resizeStart],
+	);
+
+	const handleResizeMouseUp = useCallback(() => {
+		setIsResizing(false);
+	}, []);
+
+	useEffect(() => {
+		const activeDragging = isDragging;
+		const activeResizing = isResizing;
+
+		const globalMouseMove = (e: MouseEvent) => {
+			if (activeDragging) handleDragMouseMove(e);
+			if (activeResizing) handleResizeMouseMove(e);
+		};
+		const globalMouseUp = () => {
+			if (activeDragging) handleDragMouseUp();
+			if (activeResizing) handleResizeMouseUp();
+		};
+
+		if (activeDragging || activeResizing) {
+			window.addEventListener("mousemove", globalMouseMove);
+			window.addEventListener("mouseup", globalMouseUp);
+		} else {
+			window.removeEventListener("mousemove", globalMouseMove);
+			window.removeEventListener("mouseup", globalMouseUp);
+		}
+		return () => {
+			window.removeEventListener("mousemove", globalMouseMove);
+			window.removeEventListener("mouseup", globalMouseUp);
+		};
+	}, [isDragging, isResizing, handleDragMouseMove, handleDragMouseUp, handleResizeMouseMove, handleResizeMouseUp]);
+
+	const baseBubbleClasses = `fixed border shadow-lg z-[1000] flex flex-col bg-card text-card-foreground p-3`;
+	const collapsedClasses = `min-w-[150px] h-auto rounded-lg items-start`;
+	const expandedDynamicClasses = `rounded-lg items-center`;
+
+	const bubbleDynamicClasses = `${baseBubbleClasses} ${isExpanded ? expandedDynamicClasses : collapsedClasses}`;
+
+	const headerClasses = "w-full flex justify-between items-center cursor-grab select-none";
+	const iframeContainerClasses = "w-full flex-grow mt-2.5 relative";
+	const iframeClasses = "w-full h-full border-none rounded-b-md";
+	const buttonClasses = "bg-transparent border-none text-card-foreground p-1 leading-none cursor-pointer";
+	const resizeHandleClasses =
+		"absolute bottom-0 right-0 w-4 h-4 cursor-se-resize bg-gray-400 opacity-50 hover:opacity-100";
+
+	const bubbleStyle: React.CSSProperties = {
+		top: position.top !== undefined ? `${position.top}px` : undefined,
+		left: position.left !== undefined ? `${position.left}px` : undefined,
+		bottom: position.bottom !== undefined && position.top === undefined ? `${position.bottom}px` : undefined,
+		right: position.right !== undefined && position.left === undefined ? `${position.right}px` : undefined,
+		width: isExpanded ? `${size.width}px` : undefined,
+		height: isExpanded ? `${size.height}px` : undefined,
+	};
+
+	return (
+		<div
+			ref={bubbleRef}
+			className={bubbleDynamicClasses}
+			style={bubbleStyle}
+			onClick={!isExpanded && !isDragging && !isResizing ? toggleExpansion : undefined}
+		>
+			<div
+				className={headerClasses}
+				onMouseDown={handleDragMouseDown}
+				onDoubleClick={(e) => {
+					e.stopPropagation();
+					toggleExpansion(e);
+				}}
+			>
+				<span className="font-semibold truncate pr-2">{agentName}</span>
+				<button
+					onClick={(e) => {
+						e.stopPropagation();
+						toggleExpansion(e);
+					}}
+					className={buttonClasses}
+					aria-label={isExpanded ? "Collapse chat" : "Expand chat"}
+				>
+					{isExpanded ? "▼" : "▲"}
+				</button>
+			</div>
+			{isExpanded && (
+				<div className={iframeContainerClasses}>
+					<iframe
+						src={agentUrl}
+						title={agentName}
+						className={iframeClasses}
+						style={{ pointerEvents: isDragging || isResizing ? "none" : "auto" }}
+					/>
+					<div className={resizeHandleClasses} onMouseDown={handleResizeMouseDown} />
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/apps/canvas/front/src/components/ChatManager.tsx b/apps/canvas/front/src/components/ChatManager.tsx
new file mode 100644
index 0000000..d5db0f3
--- /dev/null
+++ b/apps/canvas/front/src/components/ChatManager.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { ChatBubble } from "./ChatBubble";
+import { useAgents } from "@/lib/state";
+
+// Approximate height of a collapsed bubble + gap for cascading
+const BUBBLE_CASCADE_OFFSET = 70; // e.g., 50px height + 10px padding + 10px gap
+const INITIAL_BOTTOM_OFFSET = 20;
+const INITIAL_RIGHT_OFFSET = 20;
+
+export function ChatManager(): React.ReactNode {
+	// TODO(gio): reconsider
+	return null;
+	const agents = useAgents();
+	if (agents.length === 0) {
+		return null;
+	}
+	return (
+		<>
+			{agents.map((agent, index) => {
+				const initialPosition = {
+					bottom: INITIAL_BOTTOM_OFFSET + index * BUBBLE_CASCADE_OFFSET,
+					right: INITIAL_RIGHT_OFFSET,
+					top: undefined, // Ensure top/left are not set if bottom/right are
+					left: undefined,
+				};
+				return (
+					<ChatBubble
+						key={agent.name}
+						agentName={agent.name}
+						agentUrl={agent.address}
+						initialPosition={initialPosition}
+					/>
+				);
+			})}
+		</>
+	);
+}
diff --git a/apps/canvas/front/src/components/icon.tsx b/apps/canvas/front/src/components/icon.tsx
index 6bded3a..9a7c564 100644
--- a/apps/canvas/front/src/components/icon.tsx
+++ b/apps/canvas/front/src/components/icon.tsx
@@ -4,11 +4,10 @@
 import { GoFileDirectoryFill } from "react-icons/go";
 import { TbWorldWww } from "react-icons/tb";
 import { PiNetwork } from "react-icons/pi";
-import { AiOutlineGlobal } from "react-icons/ai"; // Corrected import source
-import { Bot } from "lucide-react"; // Bot import
+import { AiOutlineGlobal } from "react-icons/ai";
+import { Bot } from "lucide-react";
 import { Terminal } from "lucide-react";
-import { z } from "zod";
-import { AppNode, accessSchema } from "config";
+import { AppNode, Access } from "config";
 
 type Props = {
 	node: AppNode | undefined;
@@ -45,10 +44,14 @@
 	}
 }
 
-export function AccessType({ type, className }: { type: z.infer<typeof accessSchema>["type"]; className?: string }) {
-	switch (type) {
+export function AccessType({ access, className }: { access: Access; className?: string }) {
+	switch (access.type) {
 		case "https":
-			return <TbWorldWww className={className} />;
+			if (access.agentName) {
+				return <Bot className={className} />;
+			} else {
+				return <TbWorldWww className={className} />;
+			}
 		case "ssh":
 			return <Terminal className={className} />;
 		case "tcp":
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index 3733e56..b5eac42 100644
--- a/apps/canvas/front/src/lib/state.ts
+++ b/apps/canvas/front/src/lib/state.ts
@@ -14,7 +14,7 @@
 import type { DeepPartial } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 import { create } from "zustand";
-import { AppNode, Env, NodeType, VolumeNode, GatewayTCPData, envSchema } from "config";
+import { AppNode, Env, NodeType, VolumeNode, GatewayTCPData, envSchema, Access } from "config";
 
 export function nodeLabel(n: AppNode): string {
 	try {
@@ -269,6 +269,12 @@
 	return useStateStore(envSelector);
 }
 
+export function useAgents(): Extract<Access, { type: "https" }>[] {
+	return useStateStore(envSelector).access.filter(
+		(acc): acc is Extract<Access, { type: "https" }> => acc.type === "https" && acc.agentName != null,
+	);
+}
+
 export function useGithubService(): boolean {
 	return useStateStore(envSelector).integrations.github;
 }