Canvas: Implement agent sidebar on the overview tab

Change-Id: I1f2fb874cb98247c73bebf364f4669ad5170c4a0
diff --git a/apps/canvas/front/src/lib/state.ts b/apps/canvas/front/src/lib/state.ts
index e0a858a..cd5f29c 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, Access } from "config";
+import { AppNode, Env, NodeType, VolumeNode, GatewayTCPData, envSchema, AgentAccess } from "config";
 
 export function nodeLabel(n: AppNode): string {
 	try {
@@ -270,12 +270,17 @@
 	return useStateStore(envSelector);
 }
 
-export function useAgents(): Extract<Access, { type: "https" }>[] {
+export function useAgents(): AgentAccess[] {
 	return useStateStore(envSelector).access.filter(
-		(acc): acc is Extract<Access, { type: "https" }> => acc.type === "https" && acc.agentName != null,
+		(acc): acc is AgentAccess => acc.type === "https" && acc.agentName != null,
 	);
 }
 
+export function useLeadAgent(): AgentAccess | undefined {
+	const agents = useAgents();
+	return agents.find((a) => a.agentName === "dodo") || agents[0];
+}
+
 export function useGithubService(): boolean {
 	return useStateStore(envSelector).integrations.github;
 }