diff --git a/server/index.test.ts b/server/index.test.ts
index 7c8b2b282..d73d52936 100644
--- a/server/index.test.ts
+++ b/server/index.test.ts
@@ -294,6 +294,31 @@ describe("harness HTTP API", () => {
 
       const invalid = await api("POST", "/api/teams/import", { ...exported.body, version: 3 });
       expect(invalid.status).toBe(400);
+      expect((await api("POST", "/api/teams/import?mode=erase", exported.body)).status).toBe(400);
+
+      const beforeReplace = (await api("GET", "/api/bots")).body.bots.filter(
+        (bot: { hidden?: boolean }) => !bot.hidden,
+      );
+      const replaced = await api("POST", "/api/teams/import?mode=replace", exported.body);
+      expect(replaced.status).toBe(201);
+      expect(replaced.body.archived.map((bot: { id: string }) => bot.id).sort()).toEqual(
+        beforeReplace.map((bot: { id: string }) => bot.id).sort(),
+      );
+      expect(replaced.body.archivedBots.every((bot: { hidden?: boolean }) => bot.hidden)).toBe(true);
+      const afterReplace = (await api("GET", "/api/bots")).body.bots;
+      expect(afterReplace.filter((bot: { hidden?: boolean }) => !bot.hidden).map((bot: { id: string }) => bot.id).sort()).toEqual(
+        replaced.body.bots.map((bot: { id: string }) => bot.id).sort(),
+      );
+      expect((await api("GET", "/api/bots")).body.groups).toHaveLength(roomsBefore);
+
+      // Put the shared test harness back exactly as it was before exercising
+      // replace. This mirrors the UI's Undo action and preserves the seeded bot.
+      for (const bot of replaced.body.bots) await api("DELETE", `/api/bots/${bot.id}`);
+      for (const bot of replaced.body.archived.filter((item: { chiefOfStaff: boolean }) => !item.chiefOfStaff)) {
+        await api("PATCH", `/api/bots/${bot.id}`, { hidden: false });
+      }
+      const previousChief = replaced.body.archived.find((bot: { chiefOfStaff: boolean }) => bot.chiefOfStaff);
+      if (previousChief) await api("PATCH", `/api/bots/${previousChief.id}`, { hidden: false, chiefOfStaff: true });
 
       for (const bot of [first, second, hidden, ...imported.body.bots]) {
         expect((await api("DELETE", `/api/bots/${bot.id}`)).status).toBe(200);
diff --git a/server/index.ts b/server/index.ts
index bf9de4e3f..a4f6c5e23 100644
--- a/server/index.ts
+++ b/server/index.ts
@@ -1911,6 +1911,10 @@ const server = createServer(async (req, res) => {
       }
     }
     if (method === "POST" && path === "/api/teams/import") {
+      const importMode = url.searchParams.get("mode") ?? "add";
+      if (importMode !== "add" && importMode !== "replace") {
+        return json(res, 400, { error: "Team import mode must be add or replace" });
+      }
       const body = await readBody(req);
       let manifest;
       try {
@@ -1919,6 +1923,14 @@ const server = createServer(async (req, res) => {
         return json(res, 400, { error: error instanceof Error ? error.message : "Invalid team file" });
       }
 
+      // Snapshot before creating anything so replace never archives the new
+      // team. Old bots are hidden only after every new bot was created; a
+      // failed import therefore leaves the current workspace untouched.
+      const archived = importMode === "replace"
+        ? store.bots
+            .filter((bot) => !bot.hidden)
+            .map((bot) => ({ id: bot.id, chiefOfStaff: Boolean(bot.chiefOfStaff) }))
+        : [];
       const importedBots: ReturnType<typeof store.createBot>[] = [];
       try {
         const selection = await defaultSelection();
@@ -1934,9 +1946,14 @@ const server = createServer(async (req, res) => {
             }),
           );
         }
+        const archivedBots = archived.flatMap(({ id }) => {
+          const bot = store.patchBot(id, { hidden: true, chiefOfStaff: false });
+          return bot ? [publicBot(bot)] : [];
+        });
         const publicBots = importedBots.map(publicBot);
+        for (const bot of archivedBots) broadcast({ kind: "bot", bot });
         for (const bot of publicBots) broadcast({ kind: "bot", bot });
-        return json(res, 201, { bots: publicBots });
+        return json(res, 201, { bots: publicBots, archivedBots, archived });
       } catch (error) {
         for (const bot of importedBots) store.deleteBot(bot.id);
         throw error;
diff --git a/src/components/PluginsPanel.tsx b/src/components/PluginsPanel.tsx
index 3565ab102..08492566c 100644
--- a/src/components/PluginsPanel.tsx
+++ b/src/components/PluginsPanel.tsx
@@ -3,7 +3,7 @@
 // Composio API key is configured, a curated set otherwise. Icons resolve
 // logo → favicon → monogram.
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Loader2, RefreshCw, X } from "lucide-react";
+import { Check, Loader2, RefreshCw, Search, X } from "lucide-react";
 import { api, useStore } from "@/state/store";
 import { cn } from "@/lib/cn";
 
@@ -39,20 +39,20 @@ function ServiceIcon({ card }: { card: ToolkitCard }) {
   // 0 = official logo, 1 = favicon by domain, 2 = monogram
   const [stage, setStage] = useState(card.logo ? 0 : card.domain ? 1 : 2);
   if (stage === 0 && card.logo) {
-    return <img src={card.logo} alt="" className="size-8 rounded-md" onError={() => setStage(1)} />;
+    return <img src={card.logo} alt="" className="size-11 rounded-xl object-contain" onError={() => setStage(1)} />;
   }
   if (stage === 1 && card.domain) {
     return (
       <img
         src={`https://www.google.com/s2/favicons?domain=${card.domain}&sz=64`}
         alt=""
-        className="size-8 rounded-md"
+        className="size-11 rounded-xl object-contain"
         onError={() => setStage(2)}
       />
     );
   }
   return (
-    <div className="flex size-8 items-center justify-center rounded-md bg-raised text-[13px] font-semibold text-ink-secondary">
+    <div className="flex size-11 items-center justify-center rounded-xl bg-raised text-[15px] font-semibold text-ink-secondary">
       {card.label.slice(0, 1).toUpperCase()}
     </div>
   );
@@ -70,6 +70,7 @@ export function PluginsPanel() {
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [search, setSearch] = useState("");
+  const [tab, setTab] = useState<"marketplace" | "connected">("marketplace");
 
   const pollTimers = useRef(new Map<string, ReturnType<typeof setInterval>>());
   const statusGenerations = useRef(new Map<string, number>());
@@ -225,14 +226,17 @@ export function PluginsPanel() {
       .finally(() => setBusySlug(null));
   };
 
-  const visible = (cards ?? []).filter(
+  const matching = (cards ?? []).filter(
     (c) => !search || `${c.label} ${c.slug} ${c.blurb}`.toLowerCase().includes(search.toLowerCase()),
   );
+  const visible = matching.filter((card) => tab === "marketplace" || status[card.slug]?.connected);
+  const connectedCount = Object.values(status).filter((service) => service.connected).length;
+  const close = () => dispatch({ type: "togglePlugins", open: false });
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-5 backdrop-blur-sm"
-      onClick={() => dispatch({ type: "togglePlugins", open: false })}
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4 backdrop-blur-[2px] sm:p-6"
+      onMouseDown={(event) => event.target === event.currentTarget && close()}
     >
       <div
         ref={dialogRef}
@@ -240,78 +244,111 @@ export function PluginsPanel() {
         aria-modal="true"
         aria-labelledby="connected-apps-title"
         tabIndex={-1}
-        className="animate-pop-in flex max-h-[calc(100dvh-2.5rem)] w-full max-w-[560px] flex-col overflow-hidden rounded-2xl border border-hairline/50 bg-panel p-5 shadow-2xl"
-        onClick={(e) => e.stopPropagation()}
+        className="animate-pop-in flex h-[min(780px,calc(100dvh-2rem))] w-full max-w-[1040px] flex-col overflow-hidden rounded-[24px] border border-hairline/50 bg-panel shadow-2xl shadow-black/50"
       >
-        <div className="flex items-center justify-between">
-          <div id="connected-apps-title" className="text-[17px] font-semibold text-ink">Connected apps</div>
+        <header className="flex items-start justify-between gap-4 px-6 pb-3 pt-6 sm:px-8 sm:pt-7">
+          <div>
+            <h2 id="connected-apps-title" className="text-[22px] font-semibold tracking-[-0.01em] text-ink">Plugins</h2>
+            <p className="mt-1 text-[13px] text-ink-secondary">Connect the apps your bots can use.</p>
+          </div>
           <div className="flex items-center gap-1">
             <button
-              onClick={() => refreshStatus(visible.map((c) => c.slug).slice(0, 40))}
-              className="rounded-md p-1 text-ink-secondary hover:bg-raised hover:text-ink"
+              onClick={() => refreshStatus(matching.map((c) => c.slug).slice(0, 40))}
+              className="rounded-lg p-2 text-ink-secondary hover:bg-raised hover:text-ink"
               title="Refresh connection status"
             >
-              <RefreshCw size={15} className={cn(refreshing && "animate-spin")} />
+              <RefreshCw size={17} className={cn(refreshing && "animate-spin")} />
             </button>
             <button
-              onClick={() => dispatch({ type: "togglePlugins", open: false })}
-              aria-label="Close connected apps"
-              className="rounded-md p-1 text-ink-secondary hover:bg-raised hover:text-ink"
+              onClick={close}
+              aria-label="Close plugins"
+              className="rounded-lg p-2 text-ink-secondary hover:bg-raised hover:text-ink"
             >
-              <X size={18} />
+              <X size={21} />
             </button>
           </div>
-        </div>
-        <div className="mt-1 text-[13px] text-ink-secondary">
-          Apps your bots can use through Composio.
+        </header>
+
+        <div className="flex flex-col gap-3 px-6 pb-4 pt-5 sm:flex-row sm:items-center sm:justify-between sm:px-8">
+          <div className="flex w-fit rounded-xl bg-raised/70 p-1" role="tablist" aria-label="Plugin view">
+            <button
+              role="tab"
+              aria-selected={tab === "marketplace"}
+              onClick={() => setTab("marketplace")}
+              className={cn(
+                "rounded-lg px-4 py-2 text-[13.5px] transition-colors",
+                tab === "marketplace" ? "bg-card text-ink shadow-sm" : "text-ink-secondary hover:text-ink",
+              )}
+            >
+              Marketplace
+            </button>
+            <button
+              role="tab"
+              aria-selected={tab === "connected"}
+              onClick={() => setTab("connected")}
+              className={cn(
+                "rounded-lg px-4 py-2 text-[13.5px] transition-colors",
+                tab === "connected" ? "bg-card text-ink shadow-sm" : "text-ink-secondary hover:text-ink",
+              )}
+            >
+              Connected{connectedCount > 0 ? ` ${connectedCount}` : ""}
+            </button>
+          </div>
+          <label className="flex h-11 w-full items-center gap-2.5 rounded-xl bg-raised/70 px-3.5 sm:w-[320px]">
+            <Search size={17} className="shrink-0 text-ink-secondary" />
+            <input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder="Search plugins"
+              aria-label="Search plugins"
+              className="min-w-0 flex-1 bg-transparent text-[14px] text-ink placeholder:text-ink-secondary focus:outline-none"
+            />
+          </label>
         </div>
 
         {!configured && (
-          <div className="mt-3 rounded-lg border border-warning/30 bg-warning/10 px-3 py-2 text-[13px] text-warning">
-            Connect your own Composio project first —{" "}
+          <div className="mx-6 mb-1 rounded-xl bg-warning/10 px-4 py-3 text-[13px] text-warning sm:mx-8">
+            Add your Composio project key to connect apps.{" "}
             <button
-              className="underline"
+              className="font-medium underline underline-offset-2"
               onClick={() => {
-                dispatch({ type: "togglePlugins", open: false });
+                close();
                 dispatch({ type: "toggleAppSettings", open: true });
               }}
             >
-              add a project key in App Settings
-            </button>{" "}
-            to connect apps.
+              Open settings
+            </button>
           </div>
         )}
         {configured && source === "curated" && (
-          <div className="mt-3 text-[12px] text-ink-secondary">
-            Showing a curated set.{" "}
+          <div className="mx-6 mb-1 text-[12px] text-ink-secondary sm:mx-8">
+            Showing featured apps.{" "}
             <button
-              className="underline hover:text-ink"
+              className="underline underline-offset-2 hover:text-ink"
               onClick={() => {
-                dispatch({ type: "togglePlugins", open: false });
+                close();
                 dispatch({ type: "toggleAppSettings", open: true });
               }}
             >
-              Add a Composio API key
+              Use your Composio key
             </button>{" "}
-            to browse the full catalog.
+            for the full catalog.
           </div>
         )}
-        {error && <div className="mt-2 text-[12px] text-danger">{error}</div>}
+        {error && <div role="alert" className="mx-6 mt-2 rounded-lg bg-danger/10 px-3 py-2 text-[12px] text-danger sm:mx-8">{error}</div>}
 
-        <input
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          placeholder="Search apps"
-          className="mt-3 w-full rounded-lg border border-hairline/40 bg-inset px-3 py-2 text-[13px] text-ink placeholder:text-ink-secondary focus:border-hairline focus:outline-none"
-        />
-
-        <div className="mt-3 min-h-0 flex-1 overflow-y-auto rounded-xl border border-hairline/40">
+        <div className="min-h-0 flex-1 overflow-y-auto px-6 pb-7 pt-5 sm:px-8">
           {cards === null ? (
-            <div className="flex items-center justify-center gap-2 py-8 text-[13px] text-ink-secondary">
+            <div className="flex items-center justify-center gap-2 py-24 text-[13px] text-ink-secondary">
               <Loader2 size={14} className="animate-spin" /> Loading catalog…
             </div>
           ) : (
-            visible.map((card, i) => {
+            <div>
+              <div className="mb-3 text-[12px] font-medium text-ink-secondary">
+                {tab === "connected" ? "Your connections" : search ? "Search results" : "Available apps"}
+              </div>
+              <div className="grid grid-cols-1 gap-x-10 md:grid-cols-2">
+              {visible.map((card) => {
               const serviceStatus = status[card.slug];
               const connected = serviceStatus?.connected;
               const pending = serviceStatus?.pending;
@@ -320,18 +357,12 @@ export function PluginsPanel() {
               return (
                 <div
                   key={card.slug}
-                  className={cn(
-                    "flex items-center gap-3 bg-card px-4 py-3",
-                    i > 0 && "border-t border-hairline/40",
-                  )}
+                  className="flex min-h-[88px] items-center gap-3 border-b border-hairline/35 px-1 py-4"
                 >
                   <ServiceIcon card={card} />
                   <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2 text-[14px] font-medium text-ink">
-                      {card.label}
-                      {connected && <span className="size-1.5 rounded-full bg-success" />}
-                    </div>
-                    <div className="truncate text-[12px] text-ink-secondary">
+                    <div className="truncate text-[14px] font-medium text-ink">{card.label}</div>
+                    <div className="mt-0.5 truncate text-[12.5px] text-ink-secondary">
                       {pending ? "Finish setup in your browser" : failed ? "Authorization expired — try again" : card.blurb}
                     </div>
                   </div>
@@ -345,16 +376,17 @@ export function PluginsPanel() {
                       } else void connect(card.slug);
                     }}
                     className={cn(
-                      "w-[92px] rounded-lg py-1.5 text-[13px] disabled:opacity-50",
+                      "flex min-w-[88px] items-center justify-center gap-1.5 rounded-full px-3 py-2 text-[12.5px] transition-colors disabled:opacity-40",
                       connected
-                        ? "bg-raised text-ink-secondary hover:text-danger"
+                        ? "bg-transparent text-success hover:bg-danger/10 hover:text-danger"
                         : "bg-raised text-ink hover:bg-raised-hover",
                     )}
+                    title={connected ? `Disconnect ${card.label}` : undefined}
                   >
                     {busy ? (
                       <Loader2 size={13} className="mx-auto animate-spin" />
                     ) : connected ? (
-                      "Disconnect"
+                      <><Check size={14} /> Connected</>
                     ) : pending ? (
                       "Continue"
                     ) : failed ? (
@@ -365,10 +397,19 @@ export function PluginsPanel() {
                   </button>
                 </div>
               );
-            })
+              })}
+              </div>
+            </div>
           )}
           {cards !== null && visible.length === 0 && (
-            <div className="py-8 text-center text-[13px] text-ink-secondary">No apps match.</div>
+            <div className="flex min-h-56 flex-col items-center justify-center text-center">
+              <div className="text-[14px] font-medium text-ink">
+                {tab === "connected" ? "No connected plugins yet" : "No plugins found"}
+              </div>
+              <div className="mt-1 text-[12.5px] text-ink-secondary">
+                {tab === "connected" ? "Connect an app from Marketplace and it will appear here." : "Try a different search."}
+              </div>
+            </div>
           )}
         </div>
       </div>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 6811b1696..70905ded1 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -2,6 +2,7 @@ import { track } from "@/lib/analytics";
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
+  Archive,
   ArrowDownToLine,
   BellDot,
   Bot as BotIcon,
@@ -10,7 +11,6 @@ import {
   ClipboardCopy,
   Copy,
   Crown,
-  EyeOff,
   FolderPlus,
   Library,
   Loader2,
@@ -24,15 +24,16 @@ import {
   Puzzle,
   Trash2,
   Users,
+  X,
 } from "lucide-react";
-import { useStore, formatTime, visibleMessages, type Bot, type Group } from "@/state/store";
+import { api, useStore, formatTime, visibleMessages, type Bot, type Group } from "@/state/store";
 import { MausAvatar, InitialsAvatar } from "./Avatar";
 import { stateForBot } from "@/lib/mascot";
 import { useUpdaterState } from "@/lib/updater";
 import { cn } from "@/lib/cn";
 import { downloadAllBots } from "@/lib/team-files";
 import { useDesktopCapabilities } from "./DesktopCapabilities";
-import { TeamLibraryPanel } from "./TeamLibraryPanel";
+import { TeamLibraryPanel, type TeamImportResult } from "./TeamLibraryPanel";
 import { RenameTitle } from "./RenameTitle";
 
 /** "Milind Soni" → "MS", "milind" → "M", "you@x.dev" → "Y", unset → "?" */
@@ -347,7 +348,15 @@ function NewRoomPanel({ onClose }: { onClose: () => void }) {
   );
 }
 
-function BotContextMenu({ menu, onClose }: { menu: MenuState; onClose: () => void }) {
+function BotContextMenu({
+  menu,
+  onClose,
+  onArchive,
+}: {
+  menu: MenuState;
+  onClose: () => void;
+  onArchive: (bot: Bot) => void;
+}) {
   const { state, dispatch } = useStore();
   const bot = state.bots.find((b) => b.id === menu.botId);
 
@@ -369,6 +378,13 @@ function BotContextMenu({ menu, onClose }: { menu: MenuState; onClose: () => voi
   if (!bot) return null;
   const engine = state.instances.find((instance) => instance.instanceId === bot.modelSelection.instanceId);
   const canCoordinate = engine?.capabilities?.agentsMcp === true;
+  const visibleBotCount = state.bots.filter((candidate) => !candidate.hidden).length;
+  const archiveBlocked = Boolean(bot.chiefOfStaff) || visibleBotCount <= 1;
+  const archiveHint = bot.chiefOfStaff
+    ? "Choose another Chief of Staff first"
+    : visibleBotCount <= 1
+      ? "Keep at least one active bot"
+      : undefined;
   // keep the menu on-screen near the click
   const top = Math.max(8, Math.min(menu.y, window.innerHeight - 380));
   const left = Math.min(menu.x, window.innerWidth - 240);
@@ -441,12 +457,12 @@ function BotContextMenu({ menu, onClose }: { menu: MenuState; onClose: () => voi
         }),
         divider("d3"),
         item(
-          <EyeOff size={16} className="text-ink-secondary" />,
-          "Hide from sidebar",
-          () => dispatch({ type: "updateBot", botId: bot.id, patch: { hidden: true } }),
+          <Archive size={16} className="text-ink-secondary" />,
+          "Archive",
+          () => onArchive(bot),
           {
-            disabled: Boolean(bot.chiefOfStaff),
-            hint: bot.chiefOfStaff ? "Choose another Chief of Staff first" : undefined,
+            disabled: archiveBlocked,
+            hint: archiveHint,
           },
         ),
         item(<Trash2 size={16} />, "Delete", () => dispatch({ type: "deleteBot", botId: bot.id }), {
@@ -457,7 +473,17 @@ function BotContextMenu({ menu, onClose }: { menu: MenuState; onClose: () => voi
   );
 }
 
-function BotListItem({ bot, onMenu }: { bot: Bot; onMenu: (menu: MenuState) => void }) {
+function BotListItem({
+  bot,
+  onMenu,
+  onArchive,
+  archiveDisabled,
+}: {
+  bot: Bot;
+  onMenu: (menu: MenuState) => void;
+  onArchive: (bot: Bot) => void;
+  archiveDisabled: boolean;
+}) {
   const { state, dispatch } = useStore();
   const [renaming, setRenaming] = useState(false);
   const selected = state.activeView === "chat" && state.selectedId === bot.id;
@@ -466,7 +492,7 @@ function BotListItem({ bot, onMenu }: { bot: Bot; onMenu: (menu: MenuState) => v
   const visible = visibleMessages(bot);
   const last = visible.at(-1);
   const rowClass = cn(
-    "flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left",
+    "flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 pr-10 text-left",
     bot.chiefOfStaff
       ? selected
         ? "border-accent/40 bg-accent/15"
@@ -497,7 +523,7 @@ function BotListItem({ bot, onMenu }: { bot: Bot; onMenu: (menu: MenuState) => v
             />
           </span>
           {selected && last && !renaming && (
-            <span className="shrink-0 text-xs text-ink-secondary">
+            <span className="shrink-0 text-xs text-ink-secondary transition-opacity group-hover:opacity-0 group-focus-within:opacity-0">
               {formatTime(last.at)}
             </span>
           )}
@@ -535,24 +561,177 @@ function BotListItem({ bot, onMenu }: { bot: Bot; onMenu: (menu: MenuState) => v
   }
 
   return (
-    <div
-      role="button"
-      tabIndex={0}
-      onClick={() => dispatch({ type: "select", id: bot.id })}
-      onKeyDown={(event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          dispatch({ type: "select", id: bot.id });
+    <div className="group relative">
+      <div
+        role="button"
+        tabIndex={0}
+        onClick={() => dispatch({ type: "select", id: bot.id })}
+        onKeyDown={(event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            dispatch({ type: "select", id: bot.id });
+          }
+        }}
+        onContextMenu={onContextMenu}
+        className={rowClass}
+      >
+        {body}
+      </div>
+      <button
+        type="button"
+        disabled={archiveDisabled}
+        onClick={() => onArchive(bot)}
+        aria-label={`Archive ${bot.name}`}
+        title={
+          bot.chiefOfStaff
+            ? "Choose another Chief of Staff first"
+            : archiveDisabled
+              ? "Keep at least one active bot"
+              : `Archive ${bot.name}`
         }
-      }}
-      onContextMenu={onContextMenu}
-      className={rowClass}
-    >
-      {body}
+        className="absolute right-2 top-2.5 flex size-7 items-center justify-center rounded-lg bg-card/90 text-ink-secondary opacity-0 shadow-sm transition hover:bg-raised hover:text-ink focus:opacity-100 disabled:cursor-default disabled:opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 max-md:opacity-100"
+      >
+        <Archive size={14} />
+      </button>
     </div>
   );
 }
 
+function ArchivedBotsPanel({
+  bots,
+  onClose,
+  onRestored,
+}: {
+  bots: Bot[];
+  onClose: () => void;
+  onRestored: (message: string) => void;
+}) {
+  const { dispatch } = useStore();
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [restoringAll, setRestoringAll] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    dialogRef.current?.focus();
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && !busyId && !restoringAll) onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [busyId, onClose, restoringAll]);
+
+  const restore = async (bot: Bot) => {
+    setBusyId(bot.id);
+    setError("");
+    try {
+      const response = await api(`/api/bots/${bot.id}`, {
+        method: "PATCH",
+        body: JSON.stringify({ hidden: false }),
+      });
+      dispatch({ type: "botPatched", bot: response.bot });
+      dispatch({ type: "select", id: bot.id });
+      onRestored(`${bot.name} restored`);
+      if (bots.length === 1) onClose();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  const restoreAll = async () => {
+    setRestoringAll(true);
+    setError("");
+    try {
+      const responses = await Promise.all(
+        bots.map((bot) =>
+          api(`/api/bots/${bot.id}`, {
+            method: "PATCH",
+            body: JSON.stringify({ hidden: false }),
+          }),
+        ),
+      );
+      for (const response of responses) dispatch({ type: "botPatched", bot: response.bot });
+      const first = bots[0];
+      if (first) dispatch({ type: "select", id: first.id });
+      onRestored(`${bots.length} ${bots.length === 1 ? "bot" : "bots"} restored`);
+      onClose();
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      setRestoringAll(false);
+    }
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4 backdrop-blur-[2px] sm:p-6"
+      onMouseDown={(event) => event.target === event.currentTarget && !busyId && !restoringAll && onClose()}
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="archived-bots-title"
+        tabIndex={-1}
+        className="animate-pop-in flex max-h-[min(680px,calc(100dvh-2rem))] w-full max-w-[760px] flex-col overflow-hidden rounded-[24px] border border-hairline/50 bg-panel shadow-2xl shadow-black/50 outline-none"
+      >
+        <header className="flex items-start justify-between gap-4 px-6 pb-4 pt-6 sm:px-8 sm:pt-7">
+          <div>
+            <h2 id="archived-bots-title" className="text-[22px] font-semibold tracking-[-0.01em] text-ink">Archived bots</h2>
+            <p className="mt-1 text-[13px] text-ink-secondary">Conversations are kept until you choose to delete a bot.</p>
+          </div>
+          <div className="flex items-center gap-1">
+            {bots.length > 1 && (
+              <button
+                onClick={() => void restoreAll()}
+                disabled={restoringAll || Boolean(busyId)}
+                className="flex items-center gap-1.5 rounded-full bg-raised px-3.5 py-2 text-[12.5px] text-ink hover:bg-raised-hover disabled:opacity-40"
+              >
+                {restoringAll && <Loader2 size={13} className="animate-spin" />}
+                Restore all
+              </button>
+            )}
+            <button
+              onClick={onClose}
+              disabled={restoringAll || Boolean(busyId)}
+              className="rounded-lg p-2 text-ink-secondary hover:bg-raised hover:text-ink disabled:opacity-40"
+              aria-label="Close archived bots"
+            >
+              <X size={21} />
+            </button>
+          </div>
+        </header>
+        <div className="min-h-0 flex-1 overflow-y-auto px-6 pb-7 pt-3 sm:px-8">
+          <div className="mb-3 text-[12px] font-medium text-ink-secondary">{bots.length} archived</div>
+          <div className="grid grid-cols-1 gap-x-8 md:grid-cols-2">
+            {bots.map((bot) => (
+              <div key={bot.id} className="flex min-h-[82px] items-center gap-3 border-b border-hairline/35 px-1 py-3">
+                <MausAvatar color={bot.color} state="happy" size={42} />
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-[14px] font-medium text-ink">{bot.name}</div>
+                  <div className="mt-0.5 truncate text-[12.5px] text-ink-secondary">{bot.title || "Bot"}</div>
+                </div>
+                <button
+                  onClick={() => void restore(bot)}
+                  disabled={restoringAll || Boolean(busyId)}
+                  className="flex min-w-[78px] items-center justify-center gap-1.5 rounded-full bg-raised px-3.5 py-2 text-[12.5px] text-ink hover:bg-raised-hover disabled:opacity-40"
+                >
+                  {busyId === bot.id && <Loader2 size={13} className="animate-spin" />}
+                  Restore
+                </button>
+              </div>
+            ))}
+          </div>
+          {error && <div role="alert" className="mt-4 rounded-lg bg-danger/10 px-3 py-2 text-[12.5px] text-danger">{error}</div>}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
 export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void }) {
   const { state, dispatch } = useStore();
   const { capabilities } = useDesktopCapabilities();
@@ -562,8 +741,14 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
   const [plusOpen, setPlusOpen] = useState(false);
   const [newRoom, setNewRoom] = useState(false);
   const [teamLibraryOpen, setTeamLibraryOpen] = useState(false);
+  const [archivedBotsOpen, setArchivedBotsOpen] = useState(false);
   const [exportingTeam, setExportingTeam] = useState(false);
-  const [teamFeedback, setTeamFeedback] = useState<{ error: boolean; text: string } | null>(null);
+  const [teamFeedback, setTeamFeedback] = useState<{
+    error: boolean;
+    text: string;
+    undo?: TeamImportResult;
+    restoreBot?: { id: string; name: string };
+  } | null>(null);
   const [query, setQuery] = useState("");
 
   // Esc closes the drawer, mirroring ApiKeys.tsx:75-85. Bound only while the
@@ -602,6 +787,85 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
     }
   };
 
+  const undoTeamLoad = async (result: TeamImportResult) => {
+    setTeamFeedback(null);
+    try {
+      const archiveNew = await Promise.all(
+        result.importedBotIds.map((botId) =>
+          api(`/api/bots/${botId}`, {
+            method: "PATCH",
+            body: JSON.stringify({ hidden: true, chiefOfStaff: false }),
+          }),
+        ),
+      );
+      for (const response of archiveNew) dispatch({ type: "botPatched", bot: response.bot });
+
+      const previousChief = result.archived.find((bot) => bot.chiefOfStaff);
+      const restoreOthers = await Promise.all(
+        result.archived
+          .filter((bot) => !bot.chiefOfStaff)
+          .map((bot) =>
+            api(`/api/bots/${bot.id}`, {
+              method: "PATCH",
+              body: JSON.stringify({ hidden: false }),
+            }),
+          ),
+      );
+      for (const response of restoreOthers) dispatch({ type: "botPatched", bot: response.bot });
+      if (previousChief) {
+        const response = await api(`/api/bots/${previousChief.id}`, {
+          method: "PATCH",
+          body: JSON.stringify({ hidden: false, chiefOfStaff: true }),
+        });
+        dispatch({ type: "botPatched", bot: response.bot });
+      }
+      const first = result.archived[0];
+      if (first) dispatch({ type: "select", id: first.id });
+      setTeamFeedback({ error: false, text: "Previous team restored" });
+    } catch (cause) {
+      setTeamFeedback({ error: true, text: cause instanceof Error ? cause.message : String(cause) });
+    }
+  };
+
+  const archiveBot = async (bot: Bot) => {
+    const activeBots = state.bots.filter((candidate) => !candidate.hidden);
+    if (bot.chiefOfStaff || activeBots.length <= 1) return;
+    setTeamFeedback(null);
+    try {
+      const response = await api(`/api/bots/${bot.id}`, {
+        method: "PATCH",
+        body: JSON.stringify({ hidden: true }),
+      });
+      dispatch({ type: "botPatched", bot: response.bot });
+      if (state.selectedId === bot.id) {
+        const next = activeBots.find((candidate) => candidate.id !== bot.id);
+        if (next) dispatch({ type: "select", id: next.id });
+      }
+      setTeamFeedback({
+        error: false,
+        text: `${bot.name} archived`,
+        restoreBot: { id: bot.id, name: bot.name },
+      });
+    } catch (cause) {
+      setTeamFeedback({ error: true, text: cause instanceof Error ? cause.message : String(cause) });
+    }
+  };
+
+  const undoBotArchive = async (bot: { id: string; name: string }) => {
+    setTeamFeedback(null);
+    try {
+      const response = await api(`/api/bots/${bot.id}`, {
+        method: "PATCH",
+        body: JSON.stringify({ hidden: false }),
+      });
+      dispatch({ type: "botPatched", bot: response.bot });
+      dispatch({ type: "select", id: bot.id });
+      setTeamFeedback({ error: false, text: `${bot.name} restored` });
+    } catch (cause) {
+      setTeamFeedback({ error: true, text: cause instanceof Error ? cause.message : String(cause) });
+    }
+  };
+
   const macInset = capabilities.windowChrome === "mac-inset";
   const browser = capabilities.host.label === "Browser";
 
@@ -620,6 +884,10 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
     .filter((bot) => !bot.chiefOfStaff)
     .sort((a, b) => Number(b.pinned ?? false) - Number(a.pinned ?? false));
   const visibleGroups = state.groups.filter((g) => !q || g.name.toLowerCase().includes(q));
+  const activeBotCount = state.bots.filter((bot) => !bot.hidden).length;
+  const archivedBots = state.bots.filter((bot) => bot.hidden);
+  const pendingTeamUndo = teamFeedback?.undo;
+  const pendingBotUndo = teamFeedback?.restoreBot;
 
   return (
     <aside
@@ -707,8 +975,21 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
                   className="flex w-full items-center gap-3 px-3.5 py-2 text-left text-[14px] text-ink hover:bg-raised/70"
                 >
                   <Library size={16} className="text-ink-secondary" />
-                  Add Team
+                  Teams
                 </button>
+                {archivedBots.length > 0 && (
+                  <button
+                    onClick={() => {
+                      setPlusOpen(false);
+                      setArchivedBotsOpen(true);
+                    }}
+                    className="flex w-full items-center gap-3 px-3.5 py-2 text-left text-[14px] text-ink hover:bg-raised/70"
+                  >
+                    <Archive size={16} className="text-ink-secondary" />
+                    <span className="flex-1">Archived bots</span>
+                    <span className="text-[11.5px] text-ink-secondary">{archivedBots.length}</span>
+                  </button>
+                )}
               </div>
             </>
           )}
@@ -738,14 +1019,25 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
           )}
           {chiefBot && (
             <div className="mb-1.5">
-              <BotListItem bot={chiefBot} onMenu={setMenu} />
+              <BotListItem
+                bot={chiefBot}
+                onMenu={setMenu}
+                onArchive={(bot) => void archiveBot(bot)}
+                archiveDisabled
+              />
             </div>
           )}
           {visibleGroups.map((g) => (
             <GroupListItem key={g.id} group={g} onMenu={setRoomMenu} />
           ))}
           {visibleBots.map((b) => (
-            <BotListItem key={b.id} bot={b} onMenu={setMenu} />
+            <BotListItem
+              key={b.id}
+              bot={b}
+              onMenu={setMenu}
+              onArchive={(bot) => void archiveBot(bot)}
+              archiveDisabled={activeBotCount <= 1}
+            />
           ))}
         </div>
       </div>
@@ -793,7 +1085,7 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
         </div>
       </div>
 
-      {menu && <BotContextMenu menu={menu} onClose={() => setMenu(null)} />}
+      {menu && <BotContextMenu menu={menu} onClose={() => setMenu(null)} onArchive={(bot) => void archiveBot(bot)} />}
       {roomMenu && (
         <RoomContextMenu
           menu={roomMenu}
@@ -801,13 +1093,31 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
         />
       )}
       {newRoom && <NewRoomPanel onClose={() => setNewRoom(false)} />}
+      {archivedBotsOpen && (
+        <ArchivedBotsPanel
+          bots={archivedBots}
+          onClose={() => setArchivedBotsOpen(false)}
+          onRestored={(message) => setTeamFeedback({ error: false, text: message })}
+        />
+      )}
       {teamLibraryOpen && (
         <TeamLibraryPanel
           returnFocusRef={importReturnRef}
           onClose={() => setTeamLibraryOpen(false)}
-          onImported={(name, members) => {
+          onImported={(result) => {
             setTeamLibraryOpen(false);
-            setTeamFeedback({ error: false, text: `${name} imported · ${members} ${members === 1 ? "bot" : "bots"}` });
+            setTeamFeedback(
+              result.archived.length > 0
+                ? {
+                    error: false,
+                    text: `${result.name} loaded · ${result.members} ${result.members === 1 ? "bot" : "bots"}`,
+                    undo: result,
+                  }
+                : {
+                    error: false,
+                    text: `${result.name} loaded · ${result.members} ${result.members === 1 ? "bot" : "bots"}`,
+                  },
+            );
           }}
         />
       )}
@@ -822,7 +1132,25 @@ export function Sidebar({ open, onClose }: { open: boolean; onClose: () => void
                 : "border-hairline/50 bg-card text-ink",
             )}
           >
-            {teamFeedback.text}
+            <div className="flex items-center gap-3">
+              <span>{teamFeedback.text}</span>
+              {pendingTeamUndo && (
+                <button
+                  onClick={() => void undoTeamLoad(pendingTeamUndo)}
+                  className="rounded-md px-1.5 py-0.5 font-medium text-accent hover:bg-raised"
+                >
+                  Undo
+                </button>
+              )}
+              {pendingBotUndo && (
+                <button
+                  onClick={() => void undoBotArchive(pendingBotUndo)}
+                  className="rounded-md px-1.5 py-0.5 font-medium text-accent hover:bg-raised"
+                >
+                  Undo
+                </button>
+              )}
+            </div>
           </div>,
           document.body,
         )}
diff --git a/src/components/TeamLibraryPanel.tsx b/src/components/TeamLibraryPanel.tsx
index 282f95d53..ff2782022 100644
--- a/src/components/TeamLibraryPanel.tsx
+++ b/src/components/TeamLibraryPanel.tsx
@@ -1,14 +1,14 @@
 import { track } from "@/lib/analytics";
+import { cn } from "@/lib/cn";
 import { teamImportPreview, type PendingTeamImport } from "@/lib/team-import";
 import { api, useStore, type Bot } from "@/state/store";
 import {
   ArrowLeft,
+  Check,
   ExternalLink,
-  FileJson,
   Github,
-  Library,
-  Link as LinkIcon,
   Loader2,
+  Search,
   UploadCloud,
   Users,
   X,
@@ -36,8 +36,28 @@ interface TeamCatalog {
   teams: TeamCatalogEntry[];
 }
 
+export interface ArchivedTeamBot {
+  id: string;
+  chiefOfStaff: boolean;
+}
+
+export interface TeamImportResult {
+  name: string;
+  members: number;
+  importedBotIds: string[];
+  archived: ArchivedTeamBot[];
+}
+
 type ImportSource = "library" | "file" | "github";
-type ImportTab = "explore" | "file" | "github";
+type TeamTab = "explore" | "import";
+type ImportMode = "replace" | "add";
+
+const TEAM_GLYPHS = [
+  "bg-purple-500/15 text-purple-300",
+  "bg-cyan-500/15 text-cyan-300",
+  "bg-orange-500/15 text-orange-300",
+  "bg-emerald-500/15 text-emerald-300",
+] as const;
 
 async function openExternal(url: string): Promise<void> {
   if (window.ogb?.openExternal) {
@@ -48,9 +68,12 @@ async function openExternal(url: string): Promise<void> {
   if (opened) opened.opener = null;
 }
 
-function teamSourceUrl(repositoryUrl: string, entry: TeamCatalogEntry): string {
-  const folder = entry.readme.replace(/\/README\.md$/, "");
-  return `${repositoryUrl}/tree/main/${folder}`;
+function TeamGlyph({ index }: { index: number }) {
+  return (
+    <div className={cn("flex size-11 shrink-0 items-center justify-center rounded-xl", TEAM_GLYPHS[index % TEAM_GLYPHS.length])}>
+      <Users size={20} />
+    </div>
+  );
 }
 
 export function TeamLibraryPanel({
@@ -59,13 +82,13 @@ export function TeamLibraryPanel({
   returnFocusRef,
 }: {
   onClose: () => void;
-  onImported: (name: string, members: number) => void;
+  onImported: (result: TeamImportResult) => void;
   returnFocusRef: React.RefObject<HTMLButtonElement | null>;
 }) {
-  const { dispatch } = useStore();
+  const { state, dispatch } = useStore();
   const dialogRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [tab, setTab] = useState<ImportTab>("explore");
+  const [tab, setTab] = useState<TeamTab>("explore");
   const [catalog, setCatalog] = useState<TeamCatalog | null>(null);
   const [catalogLoading, setCatalogLoading] = useState(true);
   const [catalogError, setCatalogError] = useState("");
@@ -76,14 +99,18 @@ export function TeamLibraryPanel({
   const [githubLoading, setGithubLoading] = useState(false);
   const [importing, setImporting] = useState(false);
   const [dragging, setDragging] = useState(false);
+  const [importMode, setImportMode] = useState<ImportMode>("replace");
+  const [search, setSearch] = useState("");
   const [error, setError] = useState("");
 
+  const currentBotCount = state.bots.filter((bot) => !bot.hidden).length;
+
   const loadCatalog = useCallback(async () => {
     setCatalogLoading(true);
     setCatalogError("");
     try {
-      const result = (await api("/api/team-library/catalog")) as TeamCatalog;
-      setCatalog(result);
+      // SAFETY: this endpoint is owned by the app and returns TeamCatalog.
+      setCatalog((await api("/api/team-library/catalog")) as TeamCatalog);
     } catch (cause) {
       setCatalogError(cause instanceof Error ? cause.message : String(cause));
     } finally {
@@ -131,9 +158,10 @@ export function TeamLibraryPanel({
     return () => window.removeEventListener("keydown", onKeyDown, true);
   }, [importing, onClose, pending]);
 
-  const previewManifest = (manifest: unknown, nextSource: ImportSource) => {
-    setPending(teamImportPreview(manifest));
+  const previewManifest = (preview: PendingTeamImport, nextSource: ImportSource) => {
+    setPending(preview);
     setSource(nextSource);
+    setImportMode(currentBotCount > 0 ? "replace" : "add");
     setError("");
   };
 
@@ -146,14 +174,14 @@ export function TeamLibraryPanel({
       if (cause instanceof SyntaxError) throw new Error("That team file is not valid JSON.");
       throw cause;
     }
-    previewManifest(manifest, "file");
+    previewManifest(teamImportPreview(manifest), "file");
   };
 
   const loadLibraryTeam = async (entry: TeamCatalogEntry) => {
     setBusySlug(entry.slug);
     setError("");
     try {
-      previewManifest(await api(`/api/team-library/teams/${entry.slug}`), "library");
+      previewManifest(teamImportPreview(await api(`/api/team-library/teams/${entry.slug}`)), "library");
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
     } finally {
@@ -170,7 +198,7 @@ export function TeamLibraryPanel({
         method: "POST",
         body: JSON.stringify({ url: githubUrl.trim() }),
       });
-      previewManifest(manifest, "github");
+      previewManifest(teamImportPreview(manifest), "github");
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
     } finally {
@@ -183,15 +211,22 @@ export function TeamLibraryPanel({
     setImporting(true);
     setError("");
     try {
-      const response = (await api("/api/teams/import", {
+      // SAFETY: this endpoint is owned by the app and returns imported bots.
+      const response = (await api(`/api/teams/import?mode=${importMode}`, {
         method: "POST",
         body: JSON.stringify(pending.manifest),
-      })) as { bots: Bot[] };
+      })) as { bots: Bot[]; archivedBots?: Bot[]; archived?: ArchivedTeamBot[] };
+      for (const bot of response.archivedBots ?? []) dispatch({ type: "botPatched", bot });
       for (const bot of response.bots) dispatch({ type: "botAdded", bot });
       const first = response.bots[0];
       if (first) dispatch({ type: "select", id: first.id });
-      track("team_imported", { members: response.bots.length, source });
-      onImported(pending.name, response.bots.length);
+      track("team_imported", { members: response.bots.length, source, mode: importMode });
+      onImported({
+        name: pending.name,
+        members: response.bots.length,
+        importedBotIds: response.bots.map((bot) => bot.id),
+        archived: response.archived ?? [],
+      });
     } catch (cause) {
       setError(cause instanceof Error ? cause.message : String(cause));
     } finally {
@@ -199,9 +234,17 @@ export function TeamLibraryPanel({
     }
   };
 
+  const normalizedSearch = search.trim().toLowerCase();
+  const visibleTeams = (catalog?.teams ?? []).filter((entry) => {
+    if (!normalizedSearch) return true;
+    return `${entry.name} ${entry.summary} ${entry.category} ${entry.skills.join(" ")} ${entry.requires.apps.join(" ")}`
+      .toLowerCase()
+      .includes(normalizedSearch);
+  });
+
   return createPortal(
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/55 p-4 backdrop-blur-[2px] sm:p-6"
       onMouseDown={(event) => event.target === event.currentTarget && !importing && onClose()}
     >
       <div
@@ -210,9 +253,9 @@ export function TeamLibraryPanel({
         aria-modal="true"
         aria-labelledby="team-library-title"
         tabIndex={-1}
-        className="flex max-h-[min(760px,calc(100vh-32px))] w-[760px] max-w-full flex-col overflow-hidden rounded-2xl border border-hairline/50 bg-card shadow-2xl"
+        className="animate-pop-in flex h-[min(780px,calc(100dvh-2rem))] w-full max-w-[1040px] flex-col overflow-hidden rounded-[24px] border border-hairline/50 bg-panel shadow-2xl shadow-black/50 outline-none"
       >
-        <header className="flex items-start justify-between gap-4 border-b border-hairline/40 px-5 py-4">
+        <header className="flex items-start justify-between gap-4 px-6 pb-3 pt-6 sm:px-8 sm:pt-7">
           <div className="min-w-0">
             <div className="flex items-center gap-2">
               {pending && (
@@ -222,151 +265,203 @@ export function TeamLibraryPanel({
                     setError("");
                   }}
                   disabled={importing}
-                  className="rounded-md p-1 text-ink-secondary hover:bg-raised hover:text-ink disabled:opacity-50"
-                  aria-label="Back to team library"
+                  className="rounded-lg p-1.5 text-ink-secondary hover:bg-raised hover:text-ink disabled:opacity-50"
+                  aria-label="Back to teams"
                 >
-                  <ArrowLeft size={17} />
+                  <ArrowLeft size={18} />
                 </button>
               )}
-              <h2 id="team-library-title" className="truncate text-[19px] font-semibold text-ink">
-                {pending ? `Import ${pending.name}?` : "Add a team"}
+              <h2 id="team-library-title" className="truncate text-[22px] font-semibold tracking-[-0.01em] text-ink">
+                {pending ? pending.name : "Teams"}
               </h2>
             </div>
-            <p className="mt-1 text-[13px] text-ink-secondary">
-              {pending
-                ? `This creates ${pending.members.length} new ${pending.members.length === 1 ? "bot" : "bots"}. No room is created.`
-                : "Start with a community team, a local file, or a public GitHub link."}
+            <p className={cn("mt-1 text-[13px] text-ink-secondary", pending && "ml-9")}>
+              {pending ? `${pending.members.length} ready-to-load bots` : "Start with a complete team or bring your own."}
             </p>
           </div>
           <div className="flex shrink-0 items-center gap-1">
-            <button
-              onClick={() => void openExternal(catalog?.repositoryUrl ?? COMMUNITY_TEAMS_REPOSITORY)}
-              className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-[12.5px] text-ink-secondary hover:bg-raised hover:text-ink"
-              title="Open the community team repository"
-            >
-              <Github size={15} />
-              <span className="max-sm:hidden">Community repo</span>
-              <ExternalLink size={12} />
-            </button>
+            {!pending && (
+              <button
+                onClick={() => void openExternal(catalog?.repositoryUrl ?? COMMUNITY_TEAMS_REPOSITORY)}
+                className="flex items-center gap-1.5 rounded-lg px-2.5 py-2 text-[12.5px] text-ink-secondary hover:bg-raised hover:text-ink"
+                title="Open the community teams repository"
+              >
+                <Github size={16} />
+                <span className="max-sm:hidden">Community repo</span>
+                <ExternalLink size={12} />
+              </button>
+            )}
             <button
               onClick={onClose}
               disabled={importing}
-              className="rounded-md p-1.5 text-ink-secondary hover:bg-raised hover:text-ink disabled:opacity-50"
-              aria-label="Close team library"
+              className="rounded-lg p-2 text-ink-secondary hover:bg-raised hover:text-ink disabled:opacity-50"
+              aria-label="Close teams"
             >
-              <X size={19} />
+              <X size={21} />
             </button>
           </div>
         </header>
 
         {pending ? (
-          <div className="min-h-0 flex-1 overflow-y-auto p-5">
-            {pending.description && <p className="mb-4 text-[13.5px] leading-relaxed text-ink-secondary">{pending.description}</p>}
-            <div className="space-y-1 rounded-xl bg-raised/45 p-2">
-              {pending.members.map((member, index) => (
-                <div key={`${member.name}-${index}`} className="flex items-baseline gap-3 rounded-lg px-2.5 py-2">
-                  <span className="min-w-0 flex-1 truncate text-[14px] font-medium text-ink">{member.name}</span>
-                  <span className="max-w-[280px] truncate text-[12.5px] text-ink-secondary">
-                    {member.title || "General assistant"}
-                  </span>
-                </div>
-              ))}
+          <>
+            <div className="min-h-0 flex-1 overflow-y-auto px-6 pb-6 pt-6 sm:px-8">
+              {pending.description && (
+                <p className="max-w-2xl text-[13.5px] leading-relaxed text-ink-secondary">{pending.description}</p>
+              )}
+              <div className="mt-6 text-[12px] font-medium text-ink-secondary">Team members</div>
+              <div className="mt-2 grid grid-cols-1 gap-x-10 md:grid-cols-2">
+                {pending.members.map((member, index) => (
+                  <div key={`${member.name}-${index}`} className="flex min-h-[72px] items-center gap-3 border-b border-hairline/35 px-1 py-3">
+                    <div className={cn("flex size-9 shrink-0 items-center justify-center rounded-lg text-[13px] font-semibold", TEAM_GLYPHS[index % TEAM_GLYPHS.length])}>
+                      {member.name.slice(0, 1).toUpperCase()}
+                    </div>
+                    <div className="min-w-0">
+                      <div className="truncate text-[14px] font-medium text-ink">{member.name}</div>
+                      <div className="mt-0.5 truncate text-[12.5px] text-ink-secondary">{member.title || "General assistant"}</div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <div className="mt-6 flex items-start gap-2.5 rounded-xl bg-raised/45 px-4 py-3 text-[12.5px] leading-relaxed text-ink-secondary">
+                <Check size={15} className="mt-0.5 shrink-0 text-success" />
+                <p>
+                  Only roles and appearance are loaded. Your conversations, account connections, permissions, and computer access stay private.
+                  {source === "library" && " Playbooks remain available in the community repo for review."}
+                </p>
+              </div>
+              {error && <div role="alert" className="mt-4 rounded-lg bg-danger/10 px-3 py-2 text-[12.5px] text-danger">{error}</div>}
             </div>
-            <p className="mt-4 text-[12.5px] leading-relaxed text-ink-secondary">
-              Bots use your default engine. Conversations, API keys, permissions, provider sessions, and computer access are never imported.
-            </p>
-            {source === "library" && (
-              <p className="mt-2 text-[12.5px] leading-relaxed text-ink-secondary">
-                The team&apos;s role playbooks are available in the community repo for you to review; this import currently adds the bot roles only.
-              </p>
-            )}
-            {error && <div role="alert" className="mt-4 rounded-lg bg-danger/10 px-3 py-2 text-[12.5px] text-danger">{error}</div>}
-          </div>
+
+            <footer className="flex flex-col gap-3 border-t border-hairline/35 px-6 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-8">
+              <div className="text-[12.5px] text-ink-secondary">
+                {currentBotCount > 0 ? (
+                  importMode === "replace" ? (
+                    <>
+                      Replaces your {currentBotCount} current {currentBotCount === 1 ? "bot" : "bots"}. They&apos;ll be archived with conversations intact.{" "}
+                      <button onClick={() => setImportMode("add")} className="font-medium text-ink hover:underline">Add alongside instead</button>
+                    </>
+                  ) : (
+                    <>
+                      This team will be added alongside your current bots.{" "}
+                      <button onClick={() => setImportMode("replace")} className="font-medium text-ink hover:underline">Replace current team instead</button>
+                    </>
+                  )
+                ) : (
+                  "No room is created—you can make one later if you want."
+                )}
+              </div>
+              <button
+                onClick={() => void importTeam()}
+                disabled={importing}
+                className="flex shrink-0 items-center justify-center gap-2 rounded-full bg-accent px-5 py-2.5 text-[13.5px] font-medium text-white hover:bg-accent/90 disabled:opacity-60"
+              >
+                {importing && <Loader2 size={15} className="animate-spin" />}
+                {importing
+                  ? "Loading…"
+                  : currentBotCount === 0
+                    ? "Load team"
+                    : importMode === "replace"
+                      ? "Replace team"
+                      : "Add team"}
+              </button>
+            </footer>
+          </>
         ) : (
           <>
-            <div className="flex gap-1 border-b border-hairline/40 px-5 pt-3" role="tablist" aria-label="Team import source">
-              {([
-                ["explore", Library, "Explore"],
-                ["file", FileJson, "From file"],
-                ["github", Github, "From GitHub"],
-              ] as const).map(([value, Icon, label]) => (
+            <div className="flex flex-col gap-3 px-6 pb-4 pt-5 sm:flex-row sm:items-center sm:justify-between sm:px-8">
+              <div className="flex w-fit rounded-xl bg-raised/70 p-1" role="tablist" aria-label="Team source">
                 <button
-                  key={value}
                   role="tab"
-                  aria-selected={tab === value}
+                  aria-selected={tab === "explore"}
                   onClick={() => {
-                    setTab(value);
+                    setTab("explore");
                     setError("");
                   }}
-                  className={`flex items-center gap-2 border-b-2 px-3 py-2 text-[13.5px] transition-colors ${
-                    tab === value ? "border-accent text-ink" : "border-transparent text-ink-secondary hover:text-ink"
-                  }`}
+                  className={cn(
+                    "rounded-lg px-4 py-2 text-[13.5px] transition-colors",
+                    tab === "explore" ? "bg-card text-ink shadow-sm" : "text-ink-secondary hover:text-ink",
+                  )}
                 >
-                  <Icon size={15} /> {label}
+                  Explore
                 </button>
-              ))}
+                <button
+                  role="tab"
+                  aria-selected={tab === "import"}
+                  onClick={() => {
+                    setTab("import");
+                    setError("");
+                  }}
+                  className={cn(
+                    "rounded-lg px-4 py-2 text-[13.5px] transition-colors",
+                    tab === "import" ? "bg-card text-ink shadow-sm" : "text-ink-secondary hover:text-ink",
+                  )}
+                >
+                  Import
+                </button>
+              </div>
+              {tab === "explore" && (
+                <label className="flex h-11 w-full items-center gap-2.5 rounded-xl bg-raised/70 px-3.5 sm:w-[320px]">
+                  <Search size={17} className="shrink-0 text-ink-secondary" />
+                  <input
+                    value={search}
+                    onChange={(event) => setSearch(event.target.value)}
+                    placeholder="Search teams"
+                    aria-label="Search teams"
+                    className="min-w-0 flex-1 bg-transparent text-[14px] text-ink placeholder:text-ink-secondary focus:outline-none"
+                  />
+                </label>
+              )}
             </div>
 
-            <div className="min-h-0 flex-1 overflow-y-auto p-5">
+            <div className="min-h-0 flex-1 overflow-y-auto px-6 pb-7 pt-5 sm:px-8">
               {tab === "explore" && (
                 <div>
+                  <div className="mb-3 text-[12px] font-medium text-ink-secondary">
+                    {search ? "Search results" : "Community teams"}
+                  </div>
                   {catalogLoading && (
-                    <div className="flex items-center justify-center gap-2 py-20 text-[13px] text-ink-secondary">
-                      <Loader2 size={17} className="animate-spin" /> Loading community teams…
+                    <div className="flex items-center justify-center gap-2 py-24 text-[13px] text-ink-secondary">
+                      <Loader2 size={16} className="animate-spin" /> Loading teams…
                     </div>
                   )}
                   {!catalogLoading && catalogError && (
-                    <div className="rounded-xl border border-danger/20 bg-danger/5 p-4 text-[13px] text-danger">
+                    <div className="rounded-xl bg-danger/10 p-4 text-[13px] text-danger">
                       <p>{catalogError}</p>
-                      <button onClick={() => void loadCatalog()} className="mt-3 rounded-lg bg-raised px-3 py-1.5 text-ink hover:bg-raised/80">
-                        Try again
-                      </button>
+                      <button onClick={() => void loadCatalog()} className="mt-3 rounded-full bg-raised px-3.5 py-2 text-ink hover:bg-raised-hover">Try again</button>
                     </div>
                   )}
                   {!catalogLoading && catalog && (
-                    <div className="grid gap-3 sm:grid-cols-2">
-                      {catalog.teams.map((entry) => (
-                        <article key={entry.slug} className="flex min-h-52 flex-col rounded-xl border border-hairline/45 bg-raised/25 p-4">
-                          <div className="flex items-start justify-between gap-2">
-                            <div>
-                              <span className="text-[11px] font-medium uppercase tracking-wide text-accent">{entry.category}</span>
-                              <h3 className="mt-0.5 text-[15px] font-semibold text-ink">{entry.name}</h3>
-                            </div>
-                            <button
-                              onClick={() => void openExternal(teamSourceUrl(catalog.repositoryUrl, entry))}
-                              className="rounded-md p-1 text-ink-secondary hover:bg-raised hover:text-ink"
-                              title={`View ${entry.name} on GitHub`}
-                              aria-label={`View ${entry.name} on GitHub`}
-                            >
-                              <ExternalLink size={14} />
-                            </button>
-                          </div>
-                          <p className="mt-2 text-[12.5px] leading-relaxed text-ink-secondary">{entry.summary}</p>
-                          <div className="mt-3 flex flex-wrap gap-1.5 text-[11.5px] text-ink-secondary">
-                            <span className="flex items-center gap-1 rounded-md bg-raised px-2 py-1"><Users size={12} /> {entry.members} bots</span>
-                            <span className="rounded-md bg-raised px-2 py-1">{entry.skills.length} playbooks</span>
+                    <div className="grid grid-cols-1 gap-x-10 md:grid-cols-2">
+                      {visibleTeams.map((entry, index) => (
+                        <article key={entry.slug} className="flex min-h-[104px] items-center gap-3 border-b border-hairline/35 px-1 py-4">
+                          <TeamGlyph index={index} />
+                          <div className="min-w-0 flex-1">
+                            <h3 className="truncate text-[14px] font-medium text-ink">{entry.name}</h3>
+                            <p className="mt-0.5 truncate text-[12.5px] text-ink-secondary">{entry.summary}</p>
+                            <p className="mt-1 text-[11.5px] text-ink-secondary/80">{entry.members} bots · {entry.skills.length} playbooks</p>
                           </div>
-                          {entry.requires.apps.length > 0 && (
-                            <p className="mt-2 line-clamp-2 text-[11.5px] text-ink-secondary">
-                              Works with {entry.requires.apps.join(", ")}
-                            </p>
-                          )}
                           <button
                             onClick={() => void loadLibraryTeam(entry)}
                             disabled={busySlug !== null}
-                            className="mt-auto flex w-full items-center justify-center gap-2 rounded-lg bg-accent px-3 py-2 text-[13px] font-medium text-white hover:bg-accent/90 disabled:opacity-50"
+                            className="flex min-w-[72px] items-center justify-center gap-1.5 rounded-full bg-raised px-3.5 py-2 text-[12.5px] text-ink hover:bg-raised-hover disabled:opacity-40"
                           >
-                            {busySlug === entry.slug && <Loader2 size={14} className="animate-spin" />}
-                            {busySlug === entry.slug ? "Loading…" : "Preview team"}
+                            {busySlug === entry.slug && <Loader2 size={13} className="animate-spin" />}
+                            {busySlug === entry.slug ? "Loading" : "Load"}
                           </button>
                         </article>
                       ))}
                     </div>
                   )}
+                  {!catalogLoading && catalog && visibleTeams.length === 0 && (
+                    <div className="flex min-h-56 flex-col items-center justify-center text-center">
+                      <div className="text-[14px] font-medium text-ink">No teams found</div>
+                      <div className="mt-1 text-[12.5px] text-ink-secondary">Try a different search.</div>
+                    </div>
+                  )}
                 </div>
               )}
 
-              {tab === "file" && (
+              {tab === "import" && (
                 <div>
                   <input
                     ref={fileInputRef}
@@ -380,84 +475,62 @@ export function TeamLibraryPanel({
                       void readFile(file).catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
                     }}
                   />
-                  <button
-                    onClick={() => fileInputRef.current?.click()}
-                    onDragEnter={(event) => {
-                      event.preventDefault();
-                      setDragging(true);
-                    }}
-                    onDragOver={(event) => event.preventDefault()}
-                    onDragLeave={() => setDragging(false)}
-                    onDrop={(event) => {
-                      event.preventDefault();
-                      setDragging(false);
-                      const file = event.dataTransfer.files[0];
-                      if (file) void readFile(file).catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
-                    }}
-                    className={`flex min-h-64 w-full flex-col items-center justify-center rounded-2xl border border-dashed px-6 text-center transition-colors ${
-                      dragging ? "border-accent bg-accent/5" : "border-hairline bg-raised/20 hover:bg-raised/40"
-                    }`}
-                  >
-                    <UploadCloud size={32} className="text-accent" />
-                    <span className="mt-3 text-[15px] font-medium text-ink">Drop a team JSON here</span>
-                    <span className="mt-1 text-[12.5px] text-ink-secondary">or click to choose a `.mausteam.json` file</span>
-                  </button>
-                </div>
-              )}
-
-              {tab === "github" && (
-                <div className="mx-auto max-w-xl py-8">
-                  <div className="flex size-11 items-center justify-center rounded-xl bg-raised text-ink-secondary"><LinkIcon size={21} /></div>
-                  <h3 className="mt-4 text-[16px] font-semibold text-ink">Load a public GitHub team</h3>
-                  <p className="mt-1 text-[13px] leading-relaxed text-ink-secondary">
-                    Paste a repository containing `team.mausteam.json`, or a direct GitHub link to any OpenMaus team JSON file.
-                  </p>
-                  <div className="mt-4 flex gap-2">
-                    <input
-                      value={githubUrl}
-                      onChange={(event) => setGithubUrl(event.target.value)}
-                      onKeyDown={(event) => event.key === "Enter" && void loadGithubTeam()}
-                      placeholder="https://github.com/owner/team-repo"
-                      aria-label="GitHub team URL"
-                      className="min-w-0 flex-1 rounded-lg bg-raised/70 px-3 py-2.5 text-[13.5px] text-ink placeholder:text-ink-secondary focus:outline-none"
-                    />
+                  <div className="mb-3 text-[12px] font-medium text-ink-secondary">Bring your own team</div>
+                  <div className="grid gap-5 md:grid-cols-2">
                     <button
-                      onClick={() => void loadGithubTeam()}
-                      disabled={!githubUrl.trim() || githubLoading}
-                      className="flex items-center gap-2 rounded-lg bg-accent px-4 py-2.5 text-[13.5px] font-medium text-white hover:bg-accent/90 disabled:opacity-40"
+                      onClick={() => fileInputRef.current?.click()}
+                      onDragEnter={(event) => {
+                        event.preventDefault();
+                        setDragging(true);
+                      }}
+                      onDragOver={(event) => event.preventDefault()}
+                      onDragLeave={() => setDragging(false)}
+                      onDrop={(event) => {
+                        event.preventDefault();
+                        setDragging(false);
+                        const file = event.dataTransfer.files[0];
+                        if (file) void readFile(file).catch((cause) => setError(cause instanceof Error ? cause.message : String(cause)));
+                      }}
+                      className={cn(
+                        "flex min-h-56 flex-col items-center justify-center rounded-2xl border border-dashed px-6 text-center transition-colors",
+                        dragging ? "border-accent bg-accent/5" : "border-hairline/60 bg-raised/20 hover:bg-raised/35",
+                      )}
                     >
-                      {githubLoading && <Loader2 size={14} className="animate-spin" />}
-                      {githubLoading ? "Loading…" : "Load"}
+                      <UploadCloud size={27} className="text-accent" />
+                      <span className="mt-3 text-[14px] font-medium text-ink">Choose a team file</span>
+                      <span className="mt-1 text-[12.5px] text-ink-secondary">or drop a .mausteam.json here</span>
                     </button>
+
+                    <div className="flex min-h-56 flex-col justify-center rounded-2xl bg-raised/25 px-6">
+                      <Github size={25} className="text-ink-secondary" />
+                      <h3 className="mt-3 text-[14px] font-medium text-ink">Load from GitHub</h3>
+                      <p className="mt-1 text-[12.5px] leading-relaxed text-ink-secondary">Paste a public repo or a direct team JSON link.</p>
+                      <div className="mt-4 flex gap-2">
+                        <input
+                          value={githubUrl}
+                          onChange={(event) => setGithubUrl(event.target.value)}
+                          onKeyDown={(event) => event.key === "Enter" && void loadGithubTeam()}
+                          placeholder="github.com/owner/repo"
+                          aria-label="GitHub team URL"
+                          className="min-w-0 flex-1 rounded-xl bg-raised/80 px-3 py-2.5 text-[13px] text-ink placeholder:text-ink-secondary focus:outline-none"
+                        />
+                        <button
+                          onClick={() => void loadGithubTeam()}
+                          disabled={!githubUrl.trim() || githubLoading}
+                          className="flex items-center gap-1.5 rounded-full bg-accent px-4 py-2.5 text-[13px] font-medium text-white hover:bg-accent/90 disabled:opacity-40"
+                        >
+                          {githubLoading && <Loader2 size={13} className="animate-spin" />}
+                          Load
+                        </button>
+                      </div>
+                    </div>
                   </div>
-                  <p className="mt-3 text-[11.5px] text-ink-secondary">Only public HTTPS links from github.com are fetched.</p>
+                  {error && <div role="alert" className="mt-4 rounded-lg bg-danger/10 px-3 py-2 text-[12.5px] text-danger">{error}</div>}
                 </div>
               )}
-
-              {error && <div role="alert" className="mt-4 rounded-lg bg-danger/10 px-3 py-2 text-[12.5px] text-danger">{error}</div>}
             </div>
           </>
         )}
-
-        {pending && (
-          <footer className="flex items-center justify-end gap-2 border-t border-hairline/40 px-5 py-4">
-            <button
-              onClick={() => setPending(null)}
-              disabled={importing}
-              className="rounded-lg px-3.5 py-2 text-[13.5px] text-ink-secondary hover:bg-raised disabled:opacity-50"
-            >
-              Back
-            </button>
-            <button
-              onClick={() => void importTeam()}
-              disabled={importing}
-              className="flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-[13.5px] font-medium text-white hover:bg-accent/90 disabled:opacity-60"
-            >
-              {importing && <Loader2 size={15} className="animate-spin" />}
-              {importing ? "Importing…" : `Import ${pending.members.length} ${pending.members.length === 1 ? "bot" : "bots"}`}
-            </button>
-          </footer>
-        )}
       </div>
     </div>,
     document.body,