feat(web): bench drawer Insights and Members tabs (CL-9571)

apps/web/src/app.css

@@ -4557,6 +4557,51 @@ tr.insights-row-clickable:hover {
   height: 0.9rem;
 }
 
+/* Bench drawer Insights and Members tabs */
+.drawer-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.drawer-link {
+  align-self: flex-start;
+  font-size: 0.85rem;
+  color: var(--foreground);
+  text-decoration: underline;
+}
+.drawer-list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.drawer-list > li,
+.drawer-list-link {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+}
+.drawer-list-link {
+  width: 100%;
+  color: inherit;
+  text-decoration: none;
+}
+.drawer-list-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: 0.85rem;
+}
+.drawer-list-text > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.78rem;
+  color: var(--muted-foreground);
+}
+
 .stage-crumb-back {
   display: inline-flex;
   flex-shrink: 0;

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

@@ -0,0 +1,57 @@
+import { RichEmptyState, Skeleton } from "@corbits/react-ui";
+
+import { useAPIQuery } from "../api";
+import { insightsTopLevelRunsPath, TopLevelRunsSchema } from "../insights-api";
+import { computeBenchInsights, durationLabel, formatCount } from "../insights-stats";
+import { Link } from "../navigation";
+import { INSIGHTS_PATH_PREFIX } from "../path-ids";
+import { OutcomeChart } from "../pages/bench-insights";
+
+/** The bench Insights page in miniature: the same runs query and
+ * `computeBenchInsights`, fixed to the last 7 days. */
+export function InsightsTab({ workbenchTenantId }: { readonly workbenchTenantId: string }) {
+  const runs = useAPIQuery(insightsTopLevelRunsPath(workbenchTenantId), TopLevelRunsSchema);
+
+  if (runs.kind === "loading") return <Skeleton className="h-32 w-full" />;
+  if (runs.kind !== "ready") {
+    return (
+      <RichEmptyState
+        title="Couldn't load insights"
+        description="Something went wrong on our side. Try again in a moment."
+        {...(runs.kind === "error" ? { actions: [{ label: "Retry", onClick: runs.retry }] } : {})}
+      />
+    );
+  }
+
+  const stats = computeBenchInsights(runs.data.data, 7);
+  const finished = stats.ok + stats.fail;
+  const tiles: readonly (readonly [string, string])[] = [
+    ["Runs", formatCount(stats.total)],
+    ["Succeeded", finished === 0 ? "—" : `${Math.round((stats.ok / finished) * 100)}%`],
+    ["Median run", stats.medianMs === null ? "—" : durationLabel(stats.medianMs)],
+  ];
+  const id = encodeURIComponent(workbenchTenantId);
+
+  return (
+    <div className="drawer-stack">
+      <section className="insights-panel">
+        <h3>Last 7 days</h3>
+        <div className="bi-stats">
+          {tiles.map(([label, value]) => (
+            <div key={label} className="bi-stat">
+              <div className="bi-stat-v">{value}</div>
+              <div className="bi-stat-k">{label}</div>
+            </div>
+          ))}
+        </div>
+      </section>
+      <section className="insights-panel">
+        <h3>Runs per day</h3>
+        <OutcomeChart days={stats.days} />
+      </section>
+      <Link className="drawer-link" to={`${INSIGHTS_PATH_PREFIX}/workbench/${id}?from=${id}`}>
+        Open Insights
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,80 @@
+import { RichEmptyState, Skeleton } from "@corbits/react-ui";
+import { useQuery } from "@tanstack/react-query";
+
+import { IdentityAvatar, WorkbenchAvatar } from "@/chat/avatar";
+import type { WorkbenchParticipant } from "@/chat/threads-api";
+import { Link } from "../navigation";
+import { tenantKeys } from "../query-client";
+import { principalLabel } from "../settings/identity";
+import { listPrincipals } from "../settings/tenancy-api";
+
+/** Humans are the bench tenant's user principals; agents are the bench's
+ * workers, already listed as participants. */
+export function MembersTab({
+  workbenchTenantId,
+  participants,
+}: {
+  readonly workbenchTenantId: string;
+  readonly participants: readonly WorkbenchParticipant[];
+}) {
+  // A distinct key from Settings -> People, which caches a different shape
+  // under the bare principals key; prefix invalidation still reaches both.
+  const people = useQuery({
+    queryKey: [...tenantKeys.principals(workbenchTenantId), "members"],
+    queryFn: async () => (await listPrincipals(workbenchTenantId)).filter((p) => p.kind === "user"),
+  });
+  const agents = participants.filter((p) => p.kind === "agent");
+
+  return (
+    <div className="drawer-stack">
+      <section className="insights-panel">
+        <h3>People</h3>
+        {people.isPending ? <Skeleton className="h-12 w-full" /> : null}
+        {people.isError ? (
+          <RichEmptyState
+            title="Couldn't load people"
+            description="Something went wrong on our side. Try again in a moment."
+            actions={[{ label: "Retry", onClick: () => void people.refetch() }]}
+          />
+        ) : null}
+        {people.data?.length === 0 ? (
+          <p className="workbench-info-empty-note">No people yet.</p>
+        ) : null}
+        <ul className="drawer-list">
+          {(people.data ?? []).map((person) => {
+            const { label } = principalLabel(person.displayName);
+            const detail = [person.email, person.roles.map((r) => r.name).join(", ")]
+              .filter((s): s is string => s !== undefined && s !== "")
+              .join(" · ");
+            return (
+              <li key={person.id}>
+                <IdentityAvatar kind="person" name={label} principalId={person.id} />
+                <span className="drawer-list-text">
+                  <b>{label}</b>
+                  <span>{detail}</span>
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+      <section className="insights-panel">
+        <h3>Agents</h3>
+        {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}>
+              <Link className="drawer-list-link" to={`/workers/${encodeURIComponent(agent.id)}`}>
+                <WorkbenchAvatar kind="worker" name={agent.name} size="md" />
+                <span className="drawer-list-text">
+                  <b>{agent.name}</b>
+                  <span>{agent.address === "" ? "Starting" : "Live"}</span>
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}

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

@@ -37,7 +37,7 @@ function dayLabel(date: Date): string {
   });
 }
 
-function OutcomeChart({ days }: { readonly days: readonly BenchDay[] }) {
+export function OutcomeChart({ days }: { readonly days: readonly BenchDay[] }) {
   const [active, setActive] = useState<number | null>(null);
   const max = Math.max(...days.map((d) => d.ok + d.fail), 1);
   const every = days.length > 30 ? 14 : days.length > 7 ? 5 : 1;

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

@@ -27,6 +27,8 @@ 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 { InsightsTab } from "../bench/insights-tab";
+import { MembersTab } from "../bench/members-tab";
 import { ToolsTab } from "../bench/tools-tab";
 import { useBench } from "../bench-context";
 import { createFetchStockHub } from "../needs-converge";
@@ -316,6 +318,13 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
             ),
             Tools: <ToolsTab workbenchTenantId={workbenchTenantId} />,
             Grants: <GrantsTab workbenchTenantId={workbenchTenantId} />,
+            Insights: <InsightsTab workbenchTenantId={workbenchTenantId} />,
+            Members: (
+              <MembersTab
+                workbenchTenantId={workbenchTenantId}
+                participants={participants.data ?? []}
+              />
+            ),
           }}
         />
       </div>