From e6b7f84cd7a24658d8b31ac0b3fe2fae256ceccb Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Tue, 29 Sep 2026 22:56:10 -0700
Subject: [PATCH] fix(web): bench drawer tabs and Information match the mockup
 (CL-9587)

Tab strip scrolls the active tab into view; Information is unboxed sections; Grants show names with quiet badges; Members shows a skeleton until the roster resolves.
---
 apps/web/src/bench/bench-drawer.tsx    |  22 +++-
 apps/web/src/bench/drawer.css          |  56 ++++++++
 apps/web/src/bench/grants-tab.tsx      |  57 ++++++--
 apps/web/src/bench/information-tab.tsx | 172 ++++++++++++++++++-------
 apps/web/src/bench/members-tab.tsx     |   8 +-
 apps/web/src/pages/workbench-page.tsx  |  13 +-
 6 files changed, 263 insertions(+), 65 deletions(-)
 create mode 100644 apps/web/src/bench/drawer.css

diff --git a/apps/web/src/bench/bench-drawer.tsx b/apps/web/src/bench/bench-drawer.tsx
index 6356963f5..eb8e06ad8 100644
--- a/apps/web/src/bench/bench-drawer.tsx
+++ b/apps/web/src/bench/bench-drawer.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@corbits/react-ui";
 import { X } from "@/lib/icons";
+import "./drawer.css";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 
 export const DRAWER_TABS = [
@@ -26,12 +27,27 @@ export function BenchDrawer({
 }: {
   readonly open: boolean;
   readonly title: string;
-  readonly subtitle: string;
+  /** The bench description; nothing renders without one. */
+  readonly subtitle?: string | undefined;
   readonly onClose: () => void;
   readonly tabs: Partial<Record<DrawerTab, ReactNode>>;
 }) {
   const [tab, setTab] = useState<DrawerTab>("Information");
   const ref = useRef<HTMLDivElement>(null);
+  const stripRef = useRef<HTMLDivElement>(null);
+
+  // Never scrollIntoView: it scrolls the clipped work sheet and jerks the view.
+  useEffect(() => {
+    const strip = stripRef.current;
+    const active = strip?.querySelector<HTMLElement>('[aria-selected="true"]');
+    if (strip === null || strip === undefined || active === null || active === undefined) return;
+    if (
+      active.offsetLeft < strip.scrollLeft ||
+      active.offsetLeft + active.offsetWidth > strip.scrollLeft + strip.clientWidth
+    ) {
+      strip.scrollLeft = active.offsetLeft - 16;
+    }
+  }, [tab, open]);
 
   useEffect(() => {
     if (!open) return;
@@ -61,13 +77,13 @@ export function BenchDrawer({
         <div className="drawer-head">
           <div>
             <h2>{title}</h2>
-            <p>{subtitle}</p>
+            {subtitle === undefined || subtitle === "" ? null : <p>{subtitle}</p>}
           </div>
           <Button variant="ghost" size="sm" aria-label="Close drawer" onClick={onClose}>
             <X size={16} aria-hidden="true" />
           </Button>
         </div>
-        <div className="drawer-tabs" role="tablist">
+        <div className="drawer-tabs" role="tablist" ref={stripRef}>
           {DRAWER_TABS.map((name) => (
             <button
               key={name}
diff --git a/apps/web/src/bench/drawer.css b/apps/web/src/bench/drawer.css
new file mode 100644
index 000000000..7a3b644ce
--- /dev/null
+++ b/apps/web/src/bench/drawer.css
@@ -0,0 +1,56 @@
+/* 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);
+}
+.drawer .drawer-tabs button:last-child {
+  margin-right: 24px;
+}
+
+.drawer-sec {
+  margin-bottom: 24px;
+}
+.drawer .workbench-info-panel {
+  padding: 0;
+  border: 0;
+  background: none;
+  margin: 0 0 24px;
+}
+.drawer .workbench-info-panel-header {
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.drawer .workbench-info-panel-header h2 {
+  font-size: 12.5px;
+  font-weight: 800;
+  color: var(--ink-2);
+}
+.drawer-about {
+  margin: 0;
+  font-size: 13.5px;
+  color: var(--ink-2);
+}
+.drawer-now {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.drawer-now b,
+.drawer-now span {
+  display: block;
+}
+.drawer-now span {
+  font-size: 12px;
+  color: var(--ink-3);
+}
+.drawer-grant-mode {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--ink-3);
+  white-space: nowrap;
+}
+.drawer-grant-mode[data-effect="deny"] {
+  color: var(--ink-2);
+}
diff --git a/apps/web/src/bench/grants-tab.tsx b/apps/web/src/bench/grants-tab.tsx
index 115ff30c2..0cde8bc77 100644
--- a/apps/web/src/bench/grants-tab.tsx
+++ b/apps/web/src/bench/grants-tab.tsx
@@ -1,22 +1,51 @@
-import { Badge, ConfirmButton, toast } from "@corbits/react-ui";
+import { ConfirmButton, toast } from "@corbits/react-ui";
 import type { GrantEffect } from "@intx/types";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
+import type { WorkbenchParticipant } from "@/chat/threads-api";
 import { QueryView, describeApiError, toAPIQuery } from "@/lib/api-query";
 import { tenantKeys } from "@/query-client";
+import { GRANT_RESOURCE_LABEL, type GrantResource } from "../settings/resource-vocabulary";
+import { principalLabel } from "../settings/identity";
 import { listGrants, revokeGrant, type Grant } from "../settings/tenancy-api";
 
-const MODE: Record<
-  GrantEffect,
-  { readonly label: string; readonly tone: "success" | "danger" | "info" }
-> = {
-  allow: { label: "Always allow", tone: "success" },
-  ask: { label: "Ask", tone: "info" },
-  deny: { label: "Deny", tone: "danger" },
+const MODE: Record<GrantEffect, string> = {
+  allow: "Always allow",
+  ask: "Ask first",
+  deny: "Deny",
 };
 
+const TOOL_PREFIX = "tool:";
+
+/** "tool:artifact_link_file" reads "Artifact link file"; other resources keep
+ * their vocabulary label. */
+function resourceName(resource: string): string {
+  if (!resource.startsWith(TOOL_PREFIX)) {
+    return GRANT_RESOURCE_LABEL[resource as GrantResource] ?? resource;
+  }
+  const words = resource
+    .slice(TOOL_PREFIX.length)
+    .replace(/[_.-]+/g, " ")
+    .trim();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+
 /** This workbench's own grants; they never inherit from the workspace. */
-export function GrantsTab({ workbenchTenantId }: { readonly workbenchTenantId: string }) {
+export function GrantsTab({
+  workbenchTenantId,
+  participants,
+}: {
+  readonly workbenchTenantId: string;
+  readonly participants: readonly WorkbenchParticipant[];
+}) {
+  const who = (grant: Grant): string => {
+    if (grant.roleName !== undefined && grant.roleName !== null) return grant.roleName;
+    const known = participants.find((p) => p.id === grant.principalId);
+    if (known !== undefined) return known.name;
+    return grant.principalName === undefined || grant.principalName === null
+      ? "Everyone here"
+      : principalLabel(grant.principalName).label;
+  };
   const queryClient = useQueryClient();
   const query = toAPIQuery<readonly Grant[]>(
     useQuery({
@@ -52,12 +81,14 @@ export function GrantsTab({ workbenchTenantId }: { readonly workbenchTenantId: s
               {grants.map((grant) => (
                 <li key={grant.id} className="bench-tab-row">
                   <span className="bench-tab-text">
-                    <span className="bench-tab-mono">{grant.action}</span>
-                    <span className="workbench-info-cell-context">
-                      {grant.resource} · {grant.roleName ?? grant.principalName ?? "—"}
+                    <span className="workbench-info-cell-primary" title={grant.resource}>
+                      {resourceName(grant.resource)}
                     </span>
+                    <span className="workbench-info-cell-context">{who(grant)}</span>
+                  </span>
+                  <span className="drawer-grant-mode" data-effect={grant.effect}>
+                    {MODE[grant.effect]}
                   </span>
-                  <Badge tone={MODE[grant.effect].tone}>{MODE[grant.effect].label}</Badge>
                   <ConfirmButton
                     variant="ghost"
                     size="sm"
diff --git a/apps/web/src/bench/information-tab.tsx b/apps/web/src/bench/information-tab.tsx
index 337f8a67f..d79f9f4f8 100644
--- a/apps/web/src/bench/information-tab.tsx
+++ b/apps/web/src/bench/information-tab.tsx
@@ -1,24 +1,56 @@
 import { Skeleton, formatRelativeTime } from "@corbits/react-ui";
+import { useQuery } from "@tanstack/react-query";
 
+import { ArtifactListPageSchema, useAPIQuery } from "@/api";
 import { ApprovalRow } from "@/chat/approval-row";
 import { IdentityAvatar } from "@/chat/avatar";
-import {
-  resolveParticipantName,
-  type WorkbenchMessage,
-  type WorkbenchParticipant,
-} from "@/chat/threads-api";
+import type { WorkbenchParticipant } from "@/chat/threads-api";
+import { libraryArtifactPath } from "@/library";
+import { FileText, FlowArrow } from "@/lib/icons";
+import { Link } from "@/navigation";
+import { ARTIFACTS_PATH_PREFIX, WORKFLOWS_PATH_PREFIX } from "@/path-ids";
+import { tenantKeys } from "@/query-client";
+import { routineDetailPath } from "@/global-routines";
+import { scheduleSentence } from "@/pages/routines-page";
+import { listScheduledWorkflows } from "@/routines-api";
 import { WorkbenchSchedulesPanel } from "../pages/workbench-schedules-panel";
 import { usePendingApprovals } from "../pending-approvals";
+import { benchLink } from "../shell/page-crumbs";
+import type { WorkerStatus } from "../worker-status";
 
-/** Overview of the bench: latest activity, what's waiting on the person,
- * running schedules, and who is in it. */
+function Section({
+  title,
+  action,
+  children,
+}: {
+  readonly title: string;
+  readonly action?: { readonly to: string; readonly label: string };
+  readonly children: React.ReactNode;
+}) {
+  return (
+    <section className="drawer-sec">
+      <div className="drawer-sec-head">
+        <h3>{title}</h3>
+        {action === undefined ? null : <Link to={action.to}>{action.label}</Link>}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/** Overview of the bench: what it is, what's happening now, what's waiting
+ * on the person, and its live workflows and latest files. */
 export function InformationTab({
   workbenchTenantId,
-  latestMessage,
+  description,
+  worker,
+  status,
   participants,
 }: {
   readonly workbenchTenantId: string;
-  readonly latestMessage: WorkbenchMessage | undefined;
+  readonly description?: string | undefined;
+  readonly worker: WorkbenchParticipant | undefined;
+  readonly status: WorkerStatus;
   readonly participants: readonly WorkbenchParticipant[];
 }) {
   const anyAgentStarting = participants.some((p) => p.kind === "agent" && p.address === "");
@@ -27,32 +59,55 @@ export function InformationTab({
   });
   const pendingApprovals = approvalsQuery.kind === "ready" ? approvalsQuery.data : null;
 
+  const flows = useQuery({
+    queryKey: tenantKeys.routines(workbenchTenantId),
+    queryFn: () => listScheduledWorkflows(workbenchTenantId),
+  });
+  const liveFlows = (flows.data ?? []).filter((flow) => flow.status === "deployed");
+
+  const artifacts = useAPIQuery(
+    `/api/tenants/${workbenchTenantId}/artifacts`,
+    ArtifactListPageSchema,
+  );
+  const latest =
+    artifacts.kind === "ready"
+      ? [...artifacts.data.artifacts]
+          .sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+          .slice(0, 2)
+      : [];
+
   return (
     <>
-      <section className="workbench-info-panel">
-        <div className="workbench-info-panel-header">
-          <h2>Latest activity</h2>
-        </div>
-        {latestMessage === undefined ? (
-          <p className="workbench-info-empty-note">Nothing yet — say something to get started.</p>
-        ) : (
-          <p className="workbench-info-cell-context">
-            {resolveParticipantName(latestMessage, participants)} ·{" "}
-            {formatRelativeTime(latestMessage.at)}
-          </p>
-        )}
-      </section>
+      {description === undefined || description === "" ? null : (
+        <Section title="About">
+          <p className="drawer-about">{description}</p>
+        </Section>
+      )}
 
-      <section className="workbench-info-panel">
-        <div className="workbench-info-panel-header">
-          <h2>Approvals</h2>
-        </div>
+      {worker !== undefined && status.tone === "working" ? (
+        <Section title="Now">
+          <div className="drawer-now">
+            <IdentityAvatar
+              kind="agent"
+              name={worker.name}
+              principalId={worker.id}
+              status={status.tone}
+            />
+            <div>
+              <b>{worker.name}</b>
+              <span>{status.text}</span>
+            </div>
+          </div>
+        </Section>
+      ) : null}
+
+      <Section title="Needs you">
         {approvalsQuery.kind === "loading" ? <Skeleton className="h-16 w-full" /> : null}
         {approvalsQuery.kind === "error" ? (
           <p className="workbench-info-empty-note">{approvalsQuery.message}</p>
         ) : null}
         {pendingApprovals !== null && pendingApprovals.length === 0 ? (
-          <p className="workbench-info-empty-note">Nothing waiting on you.</p>
+          <p className="workbench-info-empty-note">Nothing is waiting on you.</p>
         ) : null}
         {pendingApprovals !== null && pendingApprovals.length > 0 ? (
           <ul className="workbench-info-approval-list">
@@ -61,29 +116,58 @@ export function InformationTab({
             ))}
           </ul>
         ) : null}
-      </section>
+      </Section>
 
       <WorkbenchSchedulesPanel workbenchTenantId={workbenchTenantId} participants={participants} />
 
-      <section className="workbench-info-panel">
-        <div className="workbench-info-panel-header">
-          <h2>Participants</h2>
+      <Section
+        title="Active workflows"
+        action={{ to: benchLink(WORKFLOWS_PATH_PREFIX, workbenchTenantId), label: "View all" }}
+      >
+        {flows.isLoading ? <Skeleton className="h-10 w-full" /> : null}
+        {flows.isSuccess && liveFlows.length === 0 ? (
+          <p className="workbench-info-empty-note">No workflows are running here.</p>
+        ) : null}
+        <div className="drawer-list">
+          {liveFlows.map((flow) => (
+            <Link
+              key={flow.definitionId}
+              to={routineDetailPath(flow.definitionId)}
+              className="drawer-li"
+            >
+              <FlowArrow size={16} aria-hidden="true" />
+              <span className="drawer-li-t">
+                <b>{flow.name}</b>
+                <span>{scheduleSentence(flow.schedule)}</span>
+              </span>
+            </Link>
+          ))}
         </div>
-        <ul className="workbench-participants" aria-label="In this workbench">
-          {participants.map((participant) => (
-            <li key={participant.id} data-kind={participant.kind}>
-              <span className="shell-ch-avatar">
-                <IdentityAvatar
-                  kind={participant.kind}
-                  name={participant.name}
-                  principalId={participant.id}
-                />
+      </Section>
+
+      <Section
+        title="Latest artifacts"
+        action={{ to: benchLink(ARTIFACTS_PATH_PREFIX, workbenchTenantId), label: "View all" }}
+      >
+        {artifacts.kind === "loading" ? <Skeleton className="h-10 w-full" /> : null}
+        {artifacts.kind === "ready" && latest.length === 0 ? (
+          <p className="workbench-info-empty-note">Nothing saved here yet.</p>
+        ) : null}
+        <div className="drawer-list">
+          {latest.map((artifact) => (
+            <Link key={artifact.id} to={libraryArtifactPath(artifact.id)} className="drawer-li">
+              <span className="drawer-file-ic">
+                <FileText size={16} aria-hidden="true" />
               </span>
-              {participant.name}
-            </li>
+              <span className="drawer-li-t">
+                <b>{artifact.title}</b>
+                <span>{artifact.kind}</span>
+              </span>
+              <span className="drawer-li-m">{formatRelativeTime(artifact.updatedAt)}</span>
+            </Link>
           ))}
-        </ul>
-      </section>
+        </div>
+      </Section>
     </>
   );
 }
diff --git a/apps/web/src/bench/members-tab.tsx b/apps/web/src/bench/members-tab.tsx
index 101428f90..395713098 100644
--- a/apps/web/src/bench/members-tab.tsx
+++ b/apps/web/src/bench/members-tab.tsx
@@ -13,8 +13,11 @@ import { listPrincipals } from "../settings/tenancy-api";
 export function MembersTab({
   workbenchTenantId,
   participants,
+  loading,
 }: {
   readonly workbenchTenantId: string;
+  /** True until the roster resolves; an empty list then isn't "no agents". */
+  readonly loading: boolean;
   readonly participants: readonly WorkbenchParticipant[];
 }) {
   // A distinct key from Settings -> People, which caches a different shape
@@ -60,7 +63,10 @@ export function MembersTab({
       </section>
       <section className="insights-panel">
         <h3>Agents</h3>
-        {agents.length === 0 ? <p className="workbench-info-empty-note">No agents yet.</p> : null}
+        {loading ? <Skeleton className="h-12 w-full" /> : null}
+        {!loading && agents.length === 0 ? (
+          <p className="workbench-info-empty-note">No agents yet.</p>
+        ) : null}
         <ul className="drawer-list">
           {agents.map((agent) => (
             <li key={agent.id}>
diff --git a/apps/web/src/pages/workbench-page.tsx b/apps/web/src/pages/workbench-page.tsx
index 06b3ae700..ce9fbff89 100644
--- a/apps/web/src/pages/workbench-page.tsx
+++ b/apps/web/src/pages/workbench-page.tsx
@@ -239,7 +239,6 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
   });
 
   const messages = timeline.data ?? [];
-  const latestMessage = [...messages].sort((a, b) => Date.parse(b.at) - Date.parse(a.at))[0];
   const openedChain = openThread === null ? [] : ancestorChain(messages, openThread);
   const opened = openedChain.at(-1);
   const failure: unknown = timeline.error ?? participants.error;
@@ -361,24 +360,30 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
         <BenchDrawer
           open={drawerOpen}
           title={tenant.data?.name ?? "Workbench"}
-          subtitle={workerStatus.text}
           onClose={closeDrawer}
           tabs={{
             Information: (
               <InformationTab
                 workbenchTenantId={workbenchTenantId}
-                latestMessage={latestMessage}
+                worker={agents[0]}
+                status={workerStatus}
                 participants={participants.data ?? []}
               />
             ),
             Artifacts: <ArtifactsTab workbenchTenantId={workbenchTenantId} />,
             Tools: <ToolsTab workbenchTenantId={workbenchTenantId} />,
-            Grants: <GrantsTab workbenchTenantId={workbenchTenantId} />,
+            Grants: (
+              <GrantsTab
+                workbenchTenantId={workbenchTenantId}
+                participants={participants.data ?? []}
+              />
+            ),
             Insights: <InsightsTab workbenchTenantId={workbenchTenantId} />,
             Members: (
               <MembersTab
                 workbenchTenantId={workbenchTenantId}
                 participants={participants.data ?? []}
+                loading={participants.isPending}
               />
             ),
             Workflows: <WorkflowsTab workbenchTenantId={workbenchTenantId} />,