feat(web): bench drawer Tools and Grants tabs (CL-9570)

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

@@ -0,0 +1,80 @@
+import { Badge, ConfirmButton, toast } from "@corbits/react-ui";
+import type { GrantEffect } from "@intx/types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { QueryView, describeApiError, toAPIQuery } from "@/lib/api-query";
+import { tenantKeys } from "@/query-client";
+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" },
+};
+
+/** This workbench's own grants; they never inherit from the workspace. */
+export function GrantsTab({ workbenchTenantId }: { readonly workbenchTenantId: string }) {
+  const queryClient = useQueryClient();
+  const query = toAPIQuery<readonly Grant[]>(
+    useQuery({
+      queryKey: tenantKeys.grants(workbenchTenantId),
+      queryFn: () => listGrants(workbenchTenantId, {}),
+    }),
+  );
+  const revoke = useMutation({
+    mutationFn: (grant: Grant) => revokeGrant(workbenchTenantId, grant.id),
+    onSuccess: () => {
+      void queryClient.invalidateQueries({ queryKey: tenantKeys.grants(workbenchTenantId) });
+      toast("Grant revoked.");
+    },
+    onError: (cause: unknown) => {
+      toast(describeApiError(cause, "revoking this grant"));
+    },
+  });
+
+  return (
+    <section className="workbench-info-panel">
+      <div className="workbench-info-panel-header">
+        <h2>What workers may do here</h2>
+      </div>
+      <p className="workbench-info-empty-note">
+        Set per workbench. Never inherited from the workspace.
+      </p>
+      <QueryView query={query} label="this workbench's grants" skeleton="rows">
+        {(grants) =>
+          grants.length === 0 ? (
+            <p className="workbench-info-empty-note">No grants here yet.</p>
+          ) : (
+            <ul className="bench-tab-list">
+              {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>
+                  </span>
+                  <Badge tone={MODE[grant.effect].tone}>{MODE[grant.effect].label}</Badge>
+                  <ConfirmButton
+                    variant="ghost"
+                    size="sm"
+                    disabled={revoke.isPending}
+                    confirmLabel="Revoke?"
+                    onConfirm={() => {
+                      revoke.mutate(grant);
+                    }}
+                  >
+                    Revoke
+                  </ConfirmButton>
+                </li>
+              ))}
+            </ul>
+          )
+        }
+      </QueryView>
+    </section>
+  );
+}

apps/web/src/bench/styles.css

@@ -1,3 +1,45 @@
 /* Reserved stylesheet entry for `@corbits/bench-ui/styles.css`. The
    switcher / create / members layout glue that lived here was deleted with
    those unused components; apps/web still imports this path. */
+
+.bench-tab-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.bench-tab-row {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0;
+  border-top: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+.bench-tab-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.bench-tab-text > * {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bench-tab-tile {
+  display: grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  background: var(--muted);
+  color: var(--muted-foreground);
+}
+.bench-tab-mono {
+  font-family: var(--font-mono, "Space Mono", monospace);
+  font-size: 0.8rem;
+}
+.bench-tab-link {
+  font-size: 0.8rem;
+  text-decoration: underline;
+}

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

@@ -0,0 +1,53 @@
+import { Badge, Button } from "@corbits/react-ui";
+
+import { QueryView } from "@/lib/api-query";
+import { Plugs } from "@/lib/icons";
+import { Link } from "../navigation";
+import { useMcpServers } from "../tools/mcp-servers-query";
+
+/** Tools the workspace catalog makes available here; "Connected" once an
+ * agent in this workbench binds the server. */
+export function ToolsTab({ workbenchTenantId }: { readonly workbenchTenantId: string }) {
+  const query = useMcpServers(workbenchTenantId);
+  const manage = `/tools?from=${encodeURIComponent(workbenchTenantId)}`;
+
+  return (
+    <section className="workbench-info-panel">
+      <div className="workbench-info-panel-header">
+        <h2>Tools</h2>
+      </div>
+      <QueryView query={query} label="this workbench's tools" skeleton="rows">
+        {(servers) =>
+          servers.length === 0 ? (
+            <>
+              <p className="workbench-info-empty-note">No tools are connected yet.</p>
+              <Button asChild size="sm">
+                <Link to={manage}>Connect a tool</Link>
+              </Button>
+            </>
+          ) : (
+            <ul className="bench-tab-list">
+              {servers.map((server) => (
+                <li key={server.credentialId} className="bench-tab-row">
+                  <span className="bench-tab-tile" aria-hidden="true">
+                    <Plugs size={16} />
+                  </span>
+                  <span className="bench-tab-text">
+                    <span className="workbench-info-cell-primary">{server.name}</span>
+                    <span className="workbench-info-cell-context">{server.url}</span>
+                  </span>
+                  <Badge tone={server.agentNames.length > 0 ? "success" : "neutral"}>
+                    {server.agentNames.length > 0 ? "Connected" : "Available"}
+                  </Badge>
+                  <Link to={manage} className="bench-tab-link">
+                    Manage
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )
+        }
+      </QueryView>
+    </section>
+  );
+}

apps/web/src/pages/workbench-page.tsx

@@ -25,7 +25,9 @@ import {
 } from "@/chat/threads-api";
 import { BenchDrawer } from "../bench/bench-drawer";
 import { BenchPill } from "../bench/bench-pill";
+import { GrantsTab } from "../bench/grants-tab";
 import { InformationTab } from "../bench/information-tab";
+import { ToolsTab } from "../bench/tools-tab";
 import { useBench } from "../bench-context";
 import { createFetchStockHub } from "../needs-converge";
 import { workbenchKeys } from "../chat-path";
@@ -312,6 +314,8 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
                 participants={participants.data ?? []}
               />
             ),
+            Tools: <ToolsTab workbenchTenantId={workbenchTenantId} />,
+            Grants: <GrantsTab workbenchTenantId={workbenchTenantId} />,
           }}
         />
       </div>