Add agent creation to the workbench composer picker

apps/sidecar/src/conversation-state.test.ts

@@ -2,7 +2,7 @@ import fs from "node:fs";
 import os from "node:os";
 import path from "node:path";
 
-import { afterEach, expect, test } from "bun:test";
+import { afterEach, expect, spyOn, test } from "bun:test";
 
 import type {
   Principal,
@@ -311,3 +311,54 @@ test("prepareConversationForOriginatingWorkbench evicts the warm agent on room c
   expect(evictions).toHaveLength(1);
   expect(evictions[0]).toContain("chan_b");
 });
+
+test("reactor startup waits for an in-flight connector metadata write", async () => {
+  const root = tmpDir("conv-startup-metadata-");
+  const { store } = await makeStore(root);
+  await store.bindOriginatingWorkbench("chan_a");
+  const metadataPath = path.join(root, "local", "metadata.json");
+  const truncated = Promise.withResolvers<void>();
+  const resumeWrite = Promise.withResolvers<void>();
+  const writeFile = fs.promises.writeFile.bind(fs.promises);
+  let paused = false;
+  const writeSpy = spyOn(fs.promises, "writeFile").mockImplementation(
+    async (file, data, options) => {
+      if (file === metadataPath && !paused) {
+        paused = true;
+        await writeFile(file, "", options);
+        truncated.resolve();
+        await resumeWrite.promise;
+      }
+      await writeFile(file, data, options);
+    },
+  );
+  try {
+    const seed = store.seedInbound({
+      ref: { uid: 1, mailbox: "INBOX" },
+      headers: {
+        from: "human@example.test",
+        to: ["agent@example.test"],
+        date: "2026-09-08T00:00:00.000Z",
+        messageId: "<heartbeat@example.test>",
+        interchangeType: "conversation.message",
+      },
+      flags: [],
+      content: "heartbeat",
+      signatureStatus: "valid",
+    });
+    await truncated.promise;
+    const loaded = store.storage.load();
+    const outcome = loaded.then(
+      () => "loaded",
+      () => "invalid metadata",
+    );
+    await Bun.sleep(20);
+    resumeWrite.resolve();
+    await seed;
+    expect(await outcome).toBe("loaded");
+    await store.mirrorToSubstrate();
+  } finally {
+    resumeWrite.resolve();
+    writeSpy.mockRestore();
+  }
+});

apps/sidecar/src/conversation-state.ts

@@ -474,7 +474,8 @@ export async function createDurableConversationStore(
   // does not poison the chain, while each caller still observes its own op's
   // result (or rejection) through the returned promise.
   //
-  // This serializes mirror-vs-mirror and mirror-vs-restore only. It does NOT
+  // Reactor startup reads and metadata writes join this same queue, so
+  // startup cannot read a connector metadata file mid-write. It does NOT
   // address the reactor-vs-mirror peek-snapshot window documented on
   // `runMirror` below (nothing must append to the reactor's turn array
   // between its last writeTurns and the mirror's peekTurns) -- that is a
@@ -830,8 +831,22 @@ export async function createDurableConversationStore(
     });
   }
 
+  const storageOverrides: Pick<ContextStore, "load" | "writeMetadata"> = {
+    load: (signal) => serializeStateOp(() => baseStorage.load(signal)),
+    writeMetadata: (metadata, signal) =>
+      serializeStateOp(() => baseStorage.writeMetadata(metadata, signal)),
+  };
+  const storage = new Proxy(baseStorage, {
+    get(target, prop) {
+      if (prop === "load") return storageOverrides.load;
+      if (prop === "writeMetadata") return storageOverrides.writeMetadata;
+      const value = Reflect.get(target, prop, target);
+      return typeof value === "function" ? value.bind(target) : value;
+    },
+  });
+
   return {
-    storage: baseStorage,
+    storage,
     restoreFromSubstrate,
     mirrorToSubstrate,
     seedInbound,

apps/web/src/pages/new-workbench-picker.tsx

@@ -30,6 +30,7 @@ import { ApiQueryError, describeApiError } from "@corbits/api-query";
 import { reportError } from "@corbits/error-sink";
 
 import { useAPIQuery } from "../api";
+import { CreateAgentPanel } from "./create-agent-panel";
 import { TemplateLibraryPage } from "../workbench-templates-api";
 import { useBench } from "../bench-context";
 import {
@@ -102,13 +103,22 @@ function agentDisplayName({
   readonly name: string;
   readonly description?: string;
 }): string {
-  return description ?? humanizeSlug(name);
+  return description === undefined || description === ""
+    ? humanizeSlug(name)
+    : description;
 }
 
 export function NewWorkbenchPickerRoute() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { selectedTenantId } = useBench();
+  const currentTenantIdRef = useRef(selectedTenantId);
+  useEffect(() => {
+    currentTenantIdRef.current = selectedTenantId;
+    return () => {
+      currentTenantIdRef.current = null;
+    };
+  }, [selectedTenantId]);
   const library = useAPIQuery(
     selectedTenantId === null
       ? ""
@@ -120,6 +130,7 @@ export function NewWorkbenchPickerRoute() {
     readonly string[]
   >([]);
   const [agentPickerOpen, setAgentPickerOpen] = useState(false);
+  const [createAgentOpen, setCreateAgentOpen] = useState(false);
   const [agentQuery, setAgentQuery] = useState("");
   const [activeAgentIndex, setActiveAgentIndex] = useState(0);
   const [creating, setCreating] = useState(false);
@@ -172,6 +183,7 @@ export function NewWorkbenchPickerRoute() {
 
   useEffect(() => {
     setAgentPickerOpen(false);
+    setCreateAgentOpen(false);
     setAgentQuery("");
     setActiveAgentIndex(0);
     setSelectedAgentDefinitionIds([]);
@@ -429,10 +441,6 @@ export function NewWorkbenchPickerRoute() {
                       Couldn't load agents. You can still start without
                       one.
                     </span>
-                  ) : invitableAgents.data?.length === 0 ? (
-                    <span className="new-workbench-agent-status">
-                      No agents are available yet.
-                    </span>
                   ) : (
                     <div
                       ref={agentPickerRootRef}
@@ -508,7 +516,9 @@ export function NewWorkbenchPickerRoute() {
                           />
                           {filteredAgents.length === 0 ? (
                             <p className="new-workbench-agent-empty">
-                              No agents match that search.
+                              {invitableAgents.data?.length === 0
+                                ? "No agents are available yet."
+                                : "No agents match that search."}
                             </p>
                           ) : (
                             <div
@@ -550,6 +560,17 @@ export function NewWorkbenchPickerRoute() {
                               })}
                             </div>
                           )}
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            className="mt-2 w-full justify-start border-t border-border"
+                            onClick={() => {
+                              closeAgentPicker();
+                              setCreateAgentOpen(true);
+                            }}
+                          >
+                            + Create agent
+                          </Button>
                         </div>
                       ) : null}
                     </div>
@@ -652,6 +673,40 @@ export function NewWorkbenchPickerRoute() {
           </>
         )}
       </div>
+      {selectedTenantId !== null && createAgentOpen ? (
+        <CreateAgentPanel
+          key={selectedTenantId}
+          open={createAgentOpen}
+          onOpenChange={setCreateAgentOpen}
+          tenantId={selectedTenantId}
+          onCreated={(definition) => {
+            if (currentTenantIdRef.current !== selectedTenantId) return;
+            queryClient.setQueryData<
+              Awaited<ReturnType<typeof listTenantInvitableDefinitions>>
+            >(
+              ["tenant", selectedTenantId, "invitable-definitions"],
+              (current) => [
+                ...(current ?? []).filter(
+                  (agent) => agent.id !== definition.id,
+                ),
+                {
+                  id: definition.id,
+                  name: definition.name,
+                  ...(definition.description !== null &&
+                  definition.description !== ""
+                    ? { description: definition.description }
+                    : {}),
+                },
+              ],
+            );
+            setSelectedAgentDefinitionIds((current) => [
+              ...current,
+              definition.id,
+            ]);
+            promptRef.current?.focus();
+          }}
+        />
+      ) : null}
     </div>
   );
 }