Tools page shows popular MCPs with icons in a denser layout (CL-9782) (#1087)

* Add tests for MCP server tile icons

* Tools page shows popular MCPs with icons in a denser layout

* Tools page reads connected servers as rows with designer-audit polish

Designer audit follow-up: Connected servers move from tiles to the shared ListCard rows idiom (Popular stays a catalog grid); sections carry counts; empties speak with one voice ('Nothing connected yet' + CTA); waiting sign-ins spin inside their disabled buttons; all page targets are lg/40px; pills share one wash+inset-ring style; rhythm is 16px cards / 32px sections; the drawer's coming-soon fallback is an honest empty.

* Add E2E proof for popular MCP grid on the Tools page

Popular tiles render with icon marks in a dense multi-column grid: the 12px gap and 16px tile padding fingerprint the new CSS, and every non-final row packs full.

* Fix stale connected-server copy in oauth-connect E2E

The Tools page now renders the singular "1 tool live" via toolCountLabel; the wait expected the old plural and timed out.

Author: TheGreatAxios

apps/web/src/bench/bench-drawer.tsx

@@ -21,7 +21,7 @@ export const DrawerTabContext = createContext<(tab: DrawerTab) => void>(() => un
 
 /** The floating card in the grid column that pushes the thread left. Each
  * tab's body arrives as a prop keyed by tab name; a tab without one shows a
- * short empty state until its own ticket lands. */
+ * short empty state. */
 export function BenchDrawer({
   open,
   title,
@@ -128,9 +128,7 @@ export function BenchDrawer({
         </div>
         <div className="drawer-body" role="tabpanel">
           <DrawerTabContext.Provider value={setTab}>
-            {body ?? (
-              <p className="workbench-info-empty-note">{tab} is coming to this drawer soon.</p>
-            )}
+            {body ?? <p className="workbench-info-empty-note">Nothing to show for {tab} yet.</p>}
           </DrawerTabContext.Provider>
         </div>
       </div>

apps/web/src/bench/tools-tab.tsx

@@ -1,8 +1,8 @@
 import { Button } from "@corbits/react-ui";
 
 import { QueryView } from "@/lib/api-query";
-import { Plugs } from "@/lib/icons";
 import { Link } from "../navigation";
+import { toolCountLabel } from "../tools/tool-count";
 import { useMcpServers } from "../tools/mcp-servers-query";
 import "../tools/tools-page.css";
 import "./drawer.css";
@@ -20,23 +20,26 @@ export function ToolsTab({ workbenchTenantId }: { readonly workbenchTenantId: st
             <div className="workbench-info-panel-header">
               <h2>Tools</h2>
             </div>
-            <p className="workbench-info-empty-note">
-              No tools are connected in this workbench yet.
+            <p className="drawer-about">
+              Nothing connected yet — connect a server from the Tools page and every tool it offers
+              shows up here.
             </p>
-            <Button asChild size="sm" variant="outline">
-              <Link to={manage}>
-                <Plugs size={14} />
-                Connect a tool
-              </Link>
+            <Button asChild size="lg">
+              <Link to={manage}>Connect a tool</Link>
             </Button>
           </section>
         ) : (
           <>
             {servers.map((server) => (
               <section key={server.credentialId} className="drawer-sec">
                 <div className="drawer-sec-head">
-                  <h3>{server.name}</h3>
-                  <Link to={manage}>Add tools</Link>
+                  <h3>
+                    {server.name}{" "}
+                    <span className="tools-tab-count">{toolCountLabel(server.tools.length)}</span>
+                  </h3>
+                  <Link to={manage} className="tools-tab-add">
+                    Add tools
+                  </Link>
                 </div>
                 <ul className="drawer-list">
                   {server.tools.map((tool) => (