From 19199164c1fc8dd3e06d52e52e32ea013559c762 Mon Sep 17 00:00:00 2001
From: samzong <samzong.lu@gmail.com>
Date: Sun, 15 Mar 2026 02:53:55 +0800
Subject: [PATCH] feat(leftnav): replace agent dropdown with gateway selector
 for new tasks

Different gateways have different agents, so selecting a gateway is the
correct abstraction level for the LeftNav split button. The selected
gateway's default agent is used automatically. Agent-level selection
remains available on the WelcomeScreen.
---
 .../src/renderer/layouts/LeftNav/index.tsx    | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/desktop/src/renderer/layouts/LeftNav/index.tsx b/packages/desktop/src/renderer/layouts/LeftNav/index.tsx
index 353c097..d3b2a6a 100644
--- a/packages/desktop/src/renderer/layouts/LeftNav/index.tsx
+++ b/packages/desktop/src/renderer/layouts/LeftNav/index.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, type MouseEvent } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
-import { Plus, Search, FolderOpen, Settings, Archive, Bot, ChevronDown } from 'lucide-react'
+import { Plus, Search, FolderOpen, Settings, Archive, Server, ChevronDown } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { useTaskStore } from '@/stores/taskStore'
 import { useUiStore } from '@/stores/uiStore'
@@ -30,9 +30,10 @@ export default function LeftNav() {
   const settingsOpen = useUiStore((s) => s.settingsOpen)
   const setSettingsOpen = useUiStore((s) => s.setSettingsOpen)
   const gwStatusMap = useUiStore((s) => s.gatewayStatusMap)
+  const gwInfoMap = useUiStore((s) => s.gatewayInfoMap)
   const hasUpdate = useUiStore((s) => s.hasUpdate)
-  const agentCatalog = useUiStore((s) => s.agentCatalog)
-  const hasMultipleAgents = agentCatalog.length > 1
+  const connectedGateways = Object.values(gwInfoMap).filter((gw) => gwStatusMap[gw.id] === 'connected')
+  const hasMultipleGateways = connectedGateways.length > 1
   const searchFocusTrigger = useUiStore((s) => s.searchFocusTrigger)
 
   // Aggregate: if any gateway connected → connected; any connecting → connecting; else disconnected
@@ -89,7 +90,7 @@ export default function LeftNav() {
   return (
     <div className="flex flex-col h-full pt-14 relative">
       <div className="px-4 pb-3 space-y-2 flex-shrink-0">
-        {hasMultipleAgents ? (
+        {hasMultipleGateways ? (
           <div className="titlebar-no-drag flex items-center gap-0.5">
             <Button variant="soft" onClick={() => createTask()} className="flex-1 gap-2 rounded-r-none">
               <Plus size={16} /> {t('common.newTask')}
@@ -101,14 +102,14 @@ export default function LeftNav() {
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end" className="min-w-[160px]">
-                {agentCatalog.map((agent) => (
-                  <DropdownMenuItem key={agent.id} onClick={() => createTask(undefined, agent.id)}>
-                    {agent.identity?.emoji ? (
-                      <span className="mr-2 text-base leading-none">{agent.identity.emoji}</span>
+                {connectedGateways.map((gw) => (
+                  <DropdownMenuItem key={gw.id} onClick={() => createTask(gw.id)}>
+                    {gw.color ? (
+                      <span className="mr-2 w-3 h-3 rounded-full flex-shrink-0" style={{ backgroundColor: gw.color }} />
                     ) : (
-                      <Bot size={12} className="mr-2 flex-shrink-0" />
+                      <Server size={12} className="mr-2 flex-shrink-0 opacity-60" />
                     )}
-                    {agent.name ?? agent.id}
+                    {gw.name}
                   </DropdownMenuItem>
                 ))}
               </DropdownMenuContent>