fix(web): drawer tabs fit, and Insights and Members tabs match Information (CL-9599)

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

@@ -46,10 +46,29 @@ export function BenchDrawer({
       active.offsetLeft < strip.scrollLeft ||
       active.offsetLeft + active.offsetWidth > strip.scrollLeft + strip.clientWidth
     ) {
-      strip.scrollLeft = active.offsetLeft - 16;
+      strip.scrollLeft = Math.max(0, active.offsetLeft - 32);
     }
   }, [tab, open]);
 
+  // Edge fades show only on the side that still has tabs to scroll to.
+  useEffect(() => {
+    const strip = stripRef.current;
+    if (strip === null) return;
+    const update = () => {
+      const max = strip.scrollWidth - strip.clientWidth;
+      strip.dataset["fadeStart"] = String(strip.scrollLeft > 1);
+      strip.dataset["fadeEnd"] = String(strip.scrollLeft < max - 1);
+    };
+    update();
+    strip.addEventListener("scroll", update, { passive: true });
+    const observer = new ResizeObserver(update);
+    observer.observe(strip);
+    return () => {
+      strip.removeEventListener("scroll", update);
+      observer.disconnect();
+    };
+  }, []);
+
   useEffect(() => {
     if (!open) return;
     // preventScroll: focusing must never shift the thread's scroll position.

apps/web/src/bench/drawer.css

@@ -1,8 +1,28 @@
 /* Drawer chrome and tab-body sections: unboxed, per the mockup. */
 
 .drawer .drawer-tabs {
-  -webkit-mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
-  mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
+  --fade-start: #000;
+  --fade-end: #000;
+  -webkit-mask: linear-gradient(
+    90deg,
+    var(--fade-start),
+    #000 28px,
+    #000 calc(100% - 28px),
+    var(--fade-end)
+  );
+  mask: linear-gradient(
+    90deg,
+    var(--fade-start),
+    #000 28px,
+    #000 calc(100% - 28px),
+    var(--fade-end)
+  );
+}
+.drawer .drawer-tabs[data-fade-start="true"] {
+  --fade-start: transparent;
+}
+.drawer .drawer-tabs[data-fade-end="true"] {
+  --fade-end: transparent;
 }
 .drawer .drawer-tabs button:last-child {
   margin-right: 24px;

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

@@ -33,9 +33,11 @@ export function InsightsTab({ workbenchTenantId }: { readonly workbenchTenantId:
   ];
 
   return (
-    <div className="drawer-stack">
-      <section className="insights-panel">
-        <h3>Last 7 days</h3>
+    <div>
+      <section className="drawer-sec">
+        <div className="drawer-sec-head">
+          <h3>Last 7 days</h3>
+        </div>
         <div className="bi-stats">
           {tiles.map(([label, value]) => (
             <div key={label} className="bi-stat">
@@ -45,8 +47,10 @@ export function InsightsTab({ workbenchTenantId }: { readonly workbenchTenantId:
           ))}
         </div>
       </section>
-      <section className="insights-panel">
-        <h3>Runs per day</h3>
+      <section className="drawer-sec">
+        <div className="drawer-sec-head">
+          <h3>Runs per day</h3>
+        </div>
         <OutcomeChart days={stats.days} />
       </section>
       <Link

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

@@ -29,9 +29,11 @@ export function MembersTab({
   const agents = participants.filter((p) => p.kind === "agent");
 
   return (
-    <div className="drawer-stack">
-      <section className="insights-panel">
-        <h3>People</h3>
+    <div>
+      <section className="drawer-sec">
+        <div className="drawer-sec-head">
+          <h3>People</h3>
+        </div>
         {people.isPending ? <Skeleton className="h-12 w-full" /> : null}
         {people.isError ? (
           <RichEmptyState
@@ -61,8 +63,10 @@ export function MembersTab({
           })}
         </ul>
       </section>
-      <section className="insights-panel">
-        <h3>Agents</h3>
+      <section className="drawer-sec">
+        <div className="drawer-sec-head">
+          <h3>Agents</h3>
+        </div>
         {loading ? <Skeleton className="h-12 w-full" /> : null}
         {!loading && agents.length === 0 ? (
           <p className="workbench-info-empty-note">No agents yet.</p>
@@ -74,7 +78,7 @@ export function MembersTab({
                 <WorkbenchAvatar kind="worker" name={agent.name} size="md" />
                 <span className="drawer-list-text">
                   <b>{agent.name}</b>
-                  <span>{agent.address === "" ? "Starting" : "Live"}</span>
+                  <span>{agent.address === "" ? "Starting" : "Running"}</span>
                 </span>
               </Link>
             </li>