feat(web): a workbench has an editable description shown in the drawer (CL-9596)

apps/web/src/bench/description.css

@@ -0,0 +1,32 @@
+.bench-description-text {
+  margin: 0;
+  font-size: 0.85rem;
+  white-space: pre-wrap;
+}
+.bench-description-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.bench-description-form textarea {
+  width: 100%;
+  min-height: 72px;
+  resize: vertical;
+  padding: 8px 10px;
+  font: inherit;
+  font-size: 0.85rem;
+  color: var(--ink);
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+.bench-description-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.bench-description-count {
+  margin-left: auto;
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}

apps/web/src/bench/description.ts

@@ -0,0 +1,51 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { type } from "arktype";
+
+import { ApiQueryError } from "@/lib/api-query";
+import { TenantDetailSchema, fetchTenantDetail, type TenantDetail } from "../api";
+
+export const DESCRIPTION_MAX = 280;
+
+const DescriptionConfig = type({ "workbench.description?": `string <= ${DESCRIPTION_MAX}` });
+
+/** The description lives in the stock tenant config; anything malformed reads
+ * as no description. */
+export function readDescription(config: TenantDetail["config"]): string {
+  const parsed = DescriptionConfig(config ?? {});
+  return parsed instanceof type.errors ? "" : (parsed["workbench.description"] ?? "");
+}
+
+const descriptionKey = (tenantId: string) => ["workbench", tenantId, "description"] as const;
+
+export function useBenchDescription(tenantId: string) {
+  const queryClient = useQueryClient();
+  const query = useQuery({
+    queryKey: descriptionKey(tenantId),
+    queryFn: () => fetchTenantDetail(tenantId),
+  });
+  const save = useMutation({
+    mutationFn: async (text: string) => {
+      // Read-modify-write on fresh config so other keys are never dropped.
+      const current = await fetchTenantDetail(tenantId);
+      const path = `/api/tenants/${encodeURIComponent(tenantId)}`;
+      const response = await fetch(path, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ config: { ...current.config, "workbench.description": text } }),
+      });
+      if (!response.ok) {
+        throw new ApiQueryError(`The server answered ${response.status}.`, response.status, path);
+      }
+      const parsed = TenantDetailSchema(await response.json());
+      if (parsed instanceof type.errors) {
+        throw new ApiQueryError(`Unexpected tenant response shape: ${parsed.summary}`);
+      }
+      return parsed;
+    },
+    onSuccess: (tenant) => queryClient.setQueryData(descriptionKey(tenantId), tenant),
+  });
+  return {
+    description: query.data === undefined ? "" : readDescription(query.data.config),
+    save,
+  };
+}

apps/web/src/bench/drawer-narrow.css

@@ -18,3 +18,9 @@
       visibility 0s 300ms;
   }
 }
+
+.drawer-head p {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -1,4 +1,5 @@
-import { Skeleton, formatRelativeTime } from "@corbits/react-ui";
+import { Button, Skeleton, formatRelativeTime, toast } from "@corbits/react-ui";
+import { useState } from "react";
 
 import { ApprovalRow } from "@/chat/approval-row";
 import { IdentityAvatar } from "@/chat/avatar";
@@ -9,6 +10,48 @@ import {
 } from "@/chat/threads-api";
 import { WorkbenchSchedulesPanel } from "../pages/workbench-schedules-panel";
 import { usePendingApprovals } from "../pending-approvals";
+import "./description.css";
+import { DESCRIPTION_MAX, useBenchDescription } from "./description";
+
+function AboutSection({ workbenchTenantId }: { readonly workbenchTenantId: string }) {
+  const { description, save } = useBenchDescription(workbenchTenantId);
+  const [draft, setDraft] = useState<string | null>(null);
+  const value = draft ?? description;
+  const dirty = draft !== null && draft.trim() !== description;
+  return (
+    <section className="workbench-info-panel">
+      <div className="workbench-info-panel-header">
+        <h2>About</h2>
+      </div>
+      <form
+        className="bench-description-form"
+        onSubmit={(event) => {
+          event.preventDefault();
+          save.mutate(value.trim(), {
+            onSuccess: () => setDraft(null),
+            onError: (cause) => toast(cause instanceof Error ? cause.message : String(cause)),
+          });
+        }}
+      >
+        <textarea
+          aria-label="Description"
+          placeholder="Add a description"
+          maxLength={DESCRIPTION_MAX}
+          value={value}
+          onChange={(event) => setDraft(event.target.value)}
+        />
+        <div className="bench-description-actions">
+          <Button type="submit" size="sm" disabled={!dirty || save.isPending}>
+            Save
+          </Button>
+          <span className="bench-description-count">
+            {value.length}/{DESCRIPTION_MAX}
+          </span>
+        </div>
+      </form>
+    </section>
+  );
+}
 
 /** Overview of the bench: latest activity, what's waiting on the person,
  * running schedules, and who is in it. */
@@ -29,6 +72,8 @@ export function InformationTab({
 
   return (
     <>
+      <AboutSection workbenchTenantId={workbenchTenantId} />
+
       <section className="workbench-info-panel">
         <div className="workbench-info-panel-header">
           <h2>Latest activity</h2>

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

@@ -30,6 +30,7 @@ import { PendingOpeningMessage } from "../bench/pending-opening-message";
 import { ArtifactsTab } from "../bench/artifacts-tab";
 import { markTurnPending, useWorkerStatus } from "../worker-status";
 import { GrantsTab } from "../bench/grants-tab";
+import { useBenchDescription } from "../bench/description";
 import { InformationTab } from "../bench/information-tab";
 import { InsightsTab } from "../bench/insights-tab";
 import { MembersTab } from "../bench/members-tab";
@@ -168,6 +169,7 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
     queryKey: workbenchKeys.tenant(workbenchTenantId),
     queryFn: () => createFetchStockHub().getTenant(workbenchTenantId),
   });
+  const { description: benchDescription } = useBenchDescription(workbenchTenantId);
   const participants = useQuery({
     queryKey: workbenchKeys.participants(workbenchTenantId),
     queryFn: () => listWorkbenchParticipants(workbenchTenantId, tenant.data?.domain ?? ""),
@@ -361,7 +363,7 @@ function Workbench({ workbenchTenantId }: { readonly workbenchTenantId: string }
         <BenchDrawer
           open={drawerOpen}
           title={tenant.data?.name ?? "Workbench"}
-          subtitle={workerStatus.text}
+          subtitle={benchDescription === "" ? workerStatus.text : benchDescription}
           onClose={closeDrawer}
           tabs={{
             Information: (