feat: switch bots from the header without losing the tab

- Add `botRoutes.ts` with shared routing constants and helpers for bot detail tabs
- Create `BotSwitcher` component in header that lets you jump between bots while preserving the current tab via `?tab=` query param
- Move tab state from component state to URL search params so switching bots keeps you on the same section (e.g., Logs stays Logs)
- Wrap `BotDetail` in `BotDetailPage` with a `key` to reset component state per bot name, preventing settings and tools from leaking across bots
- Convert tab navigation buttons to `Link` elements using `botPath()` helper
- Update `AddBot` to use `botPath()` when redirecting to the new bot, landing on Tools if Permit2 approval is needed
- Import `useSearchParams` in `BotDetail` to sync tab from URL and handle fallback to settings or tools based on creation context

Author: bnolens

.textile-monorepo-source

@@ -1 +1 @@
-a165f4c554b812b6d35482eaea0ac03f80be614c
+9f52cc0f99aee4decfd8247f2a93f3c3e59baf7b

.textile-stitch-release-version

@@ -1 +1 @@
-0.1.218
+0.1.219

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "stitch-bot"
-version = "0.1.218"
+version = "0.1.219"
 edition = "2021"
 description = "Stitch — Textile filler-network operator bot; quotes Swap via RFQ firm quotes and optionally fills resting limit orders."
 license = "AGPL-3.0-or-later"

Cargo.toml

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react'
-import { Link, Navigate, Route, Routes, useLocation } from 'react-router-dom'
+import { Link, Navigate, Route, Routes, useLocation, useParams } from 'react-router-dom'
 import { ApiError, api, setUnauthorizedHandler } from './api'
 import OverflowMenu from './components/OverflowMenu'
 import TextileIcon from './components/TextileIcon'
@@ -80,7 +80,7 @@ export default function App() {
         <Routes>
           <Route path="/" element={<Fleet />} />
           <Route path="/add" element={<AddBot rfqDefault={session.rfqDefault} />} />
-          <Route path="/bots/:name" element={<BotDetail />} />
+          <Route path="/bots/:name" element={<BotDetailPage />} />
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
       </main>
@@ -91,6 +91,12 @@ export default function App() {
   )
 }
 
+/** Fresh instance per bot so settings, tools, and banners don't leak across names. */
+function BotDetailPage() {
+  const { name } = useParams()
+  return <BotDetail key={name} />
+}
+
 function Header({
   session,
   theme,

web/src/App.tsx

@@ -0,0 +1,28 @@
+// Bot detail URL: `/bots/:name?tab=…`. Shared so the header switcher and the
+// page itself keep the same tab when jumping between bots.
+
+export const BOT_TABS = ['settings', 'dashboard', 'config', 'logs', 'tools'] as const
+export type BotTab = (typeof BOT_TABS)[number]
+
+export const TAB_LABEL: Record<BotTab, string> = {
+  settings: 'Settings',
+  dashboard: 'Dashboard',
+  config: 'Raw config',
+  logs: 'Logs',
+  tools: 'Tools',
+}
+
+export function isBotTab(value: string | null | undefined): value is BotTab {
+  return !!value && (BOT_TABS as readonly string[]).includes(value)
+}
+
+export function parseBotTab(
+  value: string | null | undefined,
+  fallback: BotTab = 'settings',
+): BotTab {
+  return isBotTab(value) ? value : fallback
+}
+
+export function botPath(name: string, tab: BotTab = 'settings'): string {
+  return `/bots/${encodeURIComponent(name)}?tab=${tab}`
+}

web/src/botRoutes.ts

@@ -0,0 +1,141 @@
+import { useEffect, useId, useRef, useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { api } from '../api'
+import { botPath, parseBotTab, type BotTab } from '../botRoutes'
+import type { Bot } from '../types'
+import { StatePill } from './ui'
+
+/**
+ * The detail-page title. When the fleet has another bot, the name is a
+ * dropdown so you can jump there without going back to Fleet. The current
+ * `?tab=` is kept so Logs stays Logs.
+ */
+export default function BotSwitcher({ name }: { name: string }) {
+  const { search } = useLocation()
+  const tab: BotTab = parseBotTab(new URLSearchParams(search).get('tab'))
+  const [bots, setBots] = useState<Bot[] | null>(null)
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const panelId = useId()
+
+  useEffect(() => {
+    let cancelled = false
+    void api
+      .fleet()
+      .then((fleet) => {
+        if (!cancelled) {
+          setBots([...fleet.bots].sort((a, b) => a.name.localeCompare(b.name)))
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setBots([])
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [name])
+
+  useEffect(() => {
+    setOpen(false)
+  }, [name])
+
+  useEffect(() => {
+    if (!open) return
+    function onPointer(e: MouseEvent | TouchEvent) {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    function onKey(e: KeyboardEvent) {
+      if (e.key !== 'Escape') return
+      setOpen(false)
+      triggerRef.current?.focus()
+    }
+    document.addEventListener('mousedown', onPointer)
+    document.addEventListener('touchstart', onPointer)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onPointer)
+      document.removeEventListener('touchstart', onPointer)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  const others = bots?.filter((b) => b.name !== name) ?? []
+  // No other bot to open: plain title, no button, no chevron.
+  // `!bots` is for the type checker — `others.length === 0` already covers null.
+  if (!bots || others.length === 0) {
+    return <h1 className="text-xl font-bold">{name}</h1>
+  }
+
+  return (
+    <div className="relative min-w-0" ref={rootRef}>
+      <h1 className="min-w-0 text-xl font-bold">
+        <button
+          ref={triggerRef}
+          type="button"
+          onClick={() => setOpen((v) => !v)}
+          className={`inline-flex max-w-full items-center gap-1.5 rounded-lg px-2 py-0.5 -mx-2 transition hover:bg-hover ${
+            open ? 'bg-hover' : ''
+          }`}
+          aria-label={`Switch bot, current: ${name}`}
+          aria-expanded={open}
+          aria-controls={panelId}
+          title="Switch bot"
+        >
+          <span className="truncate">{name}</span>
+          <Chevron open={open} />
+        </button>
+      </h1>
+      {open && (
+        <div
+          id={panelId}
+          className="absolute left-0 top-full z-50 mt-1 max-h-80 w-72 max-w-[calc(100vw-2rem)] overflow-auto rounded-xl border border-line-soft bg-surface py-1 shadow-lg"
+        >
+          {bots.map((bot) => {
+            const active = bot.name === name
+            return (
+              <Link
+                key={bot.name}
+                to={botPath(bot.name, tab)}
+                onClick={() => setOpen(false)}
+                className={`flex items-center gap-2 px-3 py-2 text-sm font-normal hover:bg-hover ${
+                  active ? 'bg-accent-tint font-bold text-accent' : 'text-ink'
+                }`}
+                aria-current={active ? 'page' : undefined}
+              >
+                <span className="min-w-0 flex-1 truncate">{bot.name}</span>
+                {bot.config?.corridorLabel && (
+                  <span className="max-w-24 truncate text-xs font-normal text-muted">
+                    {bot.config.corridorLabel}
+                  </span>
+                )}
+                <StatePill state={bot.state} status={bot.status} />
+              </Link>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function Chevron({ open }: { open: boolean }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 12 12"
+      fill="none"
+      aria-hidden
+      className={`shrink-0 text-muted transition ${open ? 'rotate-180' : ''}`}
+    >
+      <path
+        d="M2.5 4.5 6 8l3.5-3.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

web/src/components/BotSwitcher.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ApiError, api } from '../api'
+import { botPath } from '../botRoutes'
 import {
   Banner,
   Button,
@@ -174,7 +175,7 @@ export default function AddBot({ rfqDefault = false }: { rfqDefault?: boolean })
       })
       // Clear the secret from component state the moment it's no longer needed.
       setSigner(emptySigner)
-      navigate(`/bots/${encodeURIComponent(res.bot.name)}`, {
+      navigate(botPath(res.bot.name, res.needsPermit2Approval ? 'tools' : 'settings'), {
         state: {
           note: res.message,
           // From the create API — not `bot.running`. Docker can report running

web/src/pages/AddBot.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
-import { Link, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { BOT_TABS, TAB_LABEL, botPath, parseBotTab, type BotTab } from '../botRoutes'
 import { ApiError, api } from '../api'
 import {
   Banner,
@@ -11,6 +12,7 @@ import {
   Tag,
   Warnings,
 } from '../components/ui'
+import BotSwitcher from '../components/BotSwitcher'
 import ComposeExportLink from '../components/ComposeExportLink'
 import LogViewer from '../components/LogViewer'
 import OneShotRunner from '../components/OneShotRunner'
@@ -23,20 +25,10 @@ import { formatTimestamp, shortAddress, shortImage } from '../format'
 import { confirmRemovePlan } from '../removeBot'
 import type { Bot, ConfigBody, MigrationResult, UpdatesStatus } from '../types'
 
-const TABS = ['settings', 'dashboard', 'config', 'logs', 'tools'] as const
-type Tab = (typeof TABS)[number]
-
-const TAB_LABEL: Record<Tab, string> = {
-  settings: 'Settings',
-  dashboard: 'Dashboard',
-  config: 'Raw config',
-  logs: 'Logs',
-  tools: 'Tools',
-}
-
 export default function BotDetail() {
   const { name = '' } = useParams()
   const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
   const [bot, setBot] = useState<Bot | null>(null)
   const [error, setError] = useState<string | null>(null)
   // The wizard redirects here with what it just did, so its confirmation survives
@@ -54,16 +46,32 @@ export default function BotDetail() {
   )
   const [busy, setBusy] = useState<string | null>(null)
   // After create, land on Tools so Approve allowances is the next obvious step.
-  const [tab, setTab] = useState<Tab>(() =>
-    handoff?.needsPermit2 ? 'tools' : 'settings',
-  )
+  // Tab lives in `?tab=` so switching bots from the title keeps the same section.
+  const fallbackTab: BotTab = handoff?.needsPermit2 ? 'tools' : 'settings'
+  const tab = parseBotTab(searchParams.get('tab'), fallbackTab)
   const [updates, setUpdates] = useState<UpdatesStatus | null>(null)
 
-  const load = useCallback(async () => {
+  useEffect(() => {
+    const raw = searchParams.get('tab')
+    if (raw === tab) return
+    setSearchParams(
+      (prev) => {
+        const next = new URLSearchParams(prev)
+        next.set('tab', tab)
+        return next
+      },
+      { replace: true },
+    )
+  }, [searchParams, setSearchParams, tab])
+
+  const load = useCallback(async (signal?: { cancelled: boolean }) => {
     try {
-      setBot(await api.bot(name))
+      const next = await api.bot(name)
+      if (signal?.cancelled) return
+      setBot(next)
       setError(null)
     } catch (e) {
+      if (signal?.cancelled) return
       setError(e instanceof ApiError ? e.message : String(e))
     }
   }, [name])
@@ -78,8 +86,12 @@ export default function BotDetail() {
   }, [])
 
   useEffect(() => {
-    void load()
+    const signal = { cancelled: false }
+    void load(signal)
     void loadUpdates()
+    return () => {
+      signal.cancelled = true
+    }
   }, [load, loadUpdates])
 
   const botUpdate = updates?.bots.find((b) => b.name === name)
@@ -152,7 +164,7 @@ export default function BotDetail() {
         <Link to="/" className="text-sm text-muted hover:text-ink">
           ← Fleet
         </Link>
-        <h1 className="text-xl font-bold">{bot.name}</h1>
+        <BotSwitcher name={bot.name} />
         <StatePill state={bot.state} status={bot.status} />
         {bot.config?.corridorLabel && (
           <span className="text-sm text-muted">{bot.config.corridorLabel}</span>
@@ -213,13 +225,13 @@ export default function BotDetail() {
             </p>
             <p>
               Open{' '}
-              <button
-                type="button"
+              <Link
+                to={botPath(name, 'tools')}
+                replace
                 className="font-bold underline hover:no-underline"
-                onClick={() => setTab('tools')}
               >
                 Tools → Approve allowances
-              </button>
+              </Link>
               , then dry-run, then Start.
             </p>
           </div>
@@ -347,19 +359,20 @@ export default function BotDetail() {
           className="flex flex-nowrap gap-x-0.5 overflow-x-auto border-b border-line-soft [scrollbar-width:none] [-ms-overflow-style:none] sm:gap-x-1 [&::-webkit-scrollbar]:hidden"
           aria-label="Bot sections"
         >
-          {TABS.map((t) => (
-            <button
+          {BOT_TABS.map((t) => (
+            <Link
               key={t}
-              type="button"
-              onClick={() => setTab(t)}
+              to={botPath(name, t)}
+              replace
+              aria-current={tab === t ? 'page' : undefined}
               className={`-mb-px shrink-0 border-b-2 px-2.5 py-2 text-xs font-bold transition sm:px-3 sm:text-sm ${
                 tab === t
                   ? 'border-accent text-ink'
                   : 'border-transparent text-muted hover:text-ink'
               }`}
             >
               {TAB_LABEL[t]}
-            </button>
+            </Link>
           ))}
         </nav>
         <div