From 5f656103261da2f77a49a415a31ddd4bffc35263 Mon Sep 17 00:00:00 2001
From: Sawyer <sawyer@dirtroad.dev>
Date: Tue, 29 Sep 2026 22:34:27 -0700
Subject: [PATCH] feat(web): /new is one composer that starts a workbench from
 a first message (CL-9580)

---
 apps/web/src/pages/new-workbench-picker.tsx | 336 +++-----------------
 apps/web/src/pages/new-workbench.css        |  67 ++++
 2 files changed, 114 insertions(+), 289 deletions(-)
 create mode 100644 apps/web/src/pages/new-workbench.css

diff --git a/apps/web/src/pages/new-workbench-picker.tsx b/apps/web/src/pages/new-workbench-picker.tsx
index 5a70f3e4f..62e4dc8a5 100644
--- a/apps/web/src/pages/new-workbench-picker.tsx
+++ b/apps/web/src/pages/new-workbench-picker.tsx
@@ -1,14 +1,11 @@
-// A new workbench is a child tenant plus the agents you put in it. This
-// screen is the prompt box: say what you want and hit Enter, or open an
-// empty workbench and add people and agents as you go.
+// A new workbench starts from one message: creating it deploys its agent and
+// posts the message so the worker starts.
 
 import { Button, toast } from "@corbits/react-ui";
-import { useDismissablePopover } from "@corbits/react-ui/hooks/use-dismissable-popover";
-import { Check, PaperPlaneRight, X } from "@/lib/icons";
+import { PaperPlaneRight } from "@/lib/icons";
 import { CHAT_STRINGS, WorkbenchLoadingState } from "@/chat";
-import { isMyraAgent, listChatAgents } from "@/chat/threads-api";
-import { useMemo, useRef, useState } from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useState } from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { reportError } from "@corbits/error-sink";
 
 import { useBench } from "../bench-context";
@@ -17,7 +14,7 @@ import { createWorkbench, WorkbenchCreateError } from "../workbench-create";
 import { useNavigate } from "../navigation";
 import { StageTopBar } from "../shell/stage-top-bar";
 import { workbenchPath } from "../workbench-path";
-import { CreateAgentPanel } from "./create-agent-panel";
+import "./new-workbench.css";
 
 const GENERIC_CREATE_FAILURE = "Something went wrong creating this workbench. Try again.";
 
@@ -34,11 +31,13 @@ export function describeWorkbenchCreateFailure(cause: unknown, refId?: string):
   return refId === undefined ? message : `${message} Reference: ${refId}`;
 }
 
-const PROMPT_PLACEHOLDER = "What do you want your Workbench to do?";
-const AGENT_LISTBOX_ID = "new-workbench-agent-listbox";
+const SUGGESTIONS = [
+  "Review every pull request on a repository",
+  "Vet a vendor before we sign",
+  "Summarize what shipped each Friday",
+];
 
-/** A workbench's name is its opening ask, trimmed — an empty workbench is just
- * "Workbench" until it is renamed. */
+/** A workbench's name is its opening ask, trimmed. */
 function workbenchName(prompt: string): string {
   const trimmed = prompt.trim();
   return trimmed === "" ? "Workbench" : trimmed.slice(0, 60);
@@ -49,57 +48,6 @@ export function NewWorkbenchPickerRoute() {
   const queryClient = useQueryClient();
   const { selectedTenantId } = useBench();
   const [prompt, setPrompt] = useState("");
-  const [selectedAgentIds, setSelectedAgentIds] = useState<readonly string[]>([]);
-  const [agentPickerOpen, setAgentPickerOpen] = useState(false);
-  const [createAgentOpen, setCreateAgentOpen] = useState(false);
-  const [agentQuery, setAgentQuery] = useState("");
-  const [activeAgentIndex, setActiveAgentIndex] = useState(0);
-  const promptRef = useRef<HTMLTextAreaElement | null>(null);
-
-  const {
-    rootRef: agentPickerRootRef,
-    triggerRef: agentPickerTriggerRef,
-    close: dismissAgentPicker,
-  } = useDismissablePopover<HTMLDivElement, HTMLButtonElement>({
-    closeOnEscape: false,
-    open: agentPickerOpen,
-    onOpenChange: setAgentPickerOpen,
-  });
-
-  const agentsQuery = useQuery({
-    queryKey: ["bench-agents", selectedTenantId],
-    queryFn: () => listChatAgents(selectedTenantId!),
-    enabled: selectedTenantId !== null,
-  });
-  const pickableAgents = useMemo(
-    () => (agentsQuery.data ?? []).filter((agent) => !isMyraAgent(agent)),
-    [agentsQuery.data],
-  );
-  const filteredAgents = useMemo(() => {
-    const query = agentQuery.trim().toLocaleLowerCase();
-    return query === ""
-      ? pickableAgents
-      : pickableAgents.filter((agent) => agent.name.toLocaleLowerCase().includes(query));
-  }, [pickableAgents, agentQuery]);
-  const selectedAgents = pickableAgents.filter((agent) => selectedAgentIds.includes(agent.id));
-
-  function toggleAgent(id: string) {
-    setSelectedAgentIds((current) =>
-      current.includes(id) ? current.filter((existing) => existing !== id) : [...current, id],
-    );
-  }
-
-  function closeAgentPicker() {
-    setAgentQuery("");
-    setActiveAgentIndex(0);
-    dismissAgentPicker();
-  }
-
-  function openAgentPicker() {
-    setAgentPickerOpen(true);
-    setAgentQuery("");
-    setActiveAgentIndex(0);
-  }
 
   const create = useMutation({
     mutationFn: ({
@@ -107,15 +55,12 @@ export function NewWorkbenchPickerRoute() {
       openingMessage,
     }: {
       readonly benchTenantId: string;
-      readonly openingMessage: string | undefined;
+      readonly openingMessage: string;
     }) =>
       createWorkbench({
         benchTenantId,
-        name: workbenchName(openingMessage ?? ""),
-        ...(openingMessage !== undefined ? { openingMessage } : {}),
-        pickedAgents: pickableAgents
-          .filter((agent) => selectedAgentIds.includes(agent.id))
-          .map((agent) => ({ id: agent.id, name: agent.name, assetName: agent.assetName })),
+        name: workbenchName(openingMessage),
+        openingMessage,
       }),
     onSuccess: (tenantId, variables) => {
       void queryClient.invalidateQueries({
@@ -140,214 +85,45 @@ export function NewWorkbenchPickerRoute() {
     },
   });
 
-  function startCreate(openingMessage?: string) {
-    if (selectedTenantId === null || create.isPending) return;
-    create.mutate({
-      benchTenantId: selectedTenantId,
-      ...(openingMessage !== undefined ? { openingMessage } : { openingMessage: undefined }),
-    });
-  }
-
-  function handlePromptSubmit() {
+  function submit() {
     const trimmed = prompt.trim();
-    if (trimmed === "") return;
-    startCreate(trimmed);
+    if (trimmed === "" || selectedTenantId === null || create.isPending) return;
+    create.mutate({ benchTenantId: selectedTenantId, openingMessage: trimmed });
   }
 
   return (
     <div className="flex h-full min-h-0 flex-col">
-      <StageTopBar
-        crumbs={[{ label: CHAT_STRINGS.newWorkbenchAction }]}
-        actions={
-          <Button type="button" variant="ghost" size="sm" onClick={() => navigate("/")}>
-            Cancel
-          </Button>
-        }
-      />
-      <div className="new-workbench-picker">
+      <StageTopBar crumbs={[{ label: CHAT_STRINGS.newWorkbenchAction }]} />
+      <div className="new-wrap">
         {create.isPending ? (
-          // `delayMs={0}`: this is a genuine wait the instant the person
-          // hits Enter, so the default hold-back only bought a blank pane.
+          // `delayMs={0}`: a genuine wait the instant the person sends.
           <WorkbenchLoadingState delayMs={0} title="Setting up your workbench…" />
         ) : (
           <>
-            <h3>What do you want your Workbench to do?</h3>
-            <p className="new-workbench-picker-sub">
-              Tell it what you&apos;re trying to get done. Takes about ten seconds.
-            </p>
-
+            <h1 className="new-title">What should this workbench do?</h1>
             <form
-              className="new-workbench-prompt"
+              className="new-composer"
               onSubmit={(event) => {
                 event.preventDefault();
-                handlePromptSubmit();
+                submit();
               }}
             >
-              <div className="new-workbench-prompt-main">
-                <textarea
-                  ref={promptRef}
-                  className="new-workbench-prompt-input"
-                  placeholder={PROMPT_PLACEHOLDER}
-                  value={prompt}
-                  rows={2}
-                  onChange={(event) => setPrompt(event.target.value)}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter" && !event.shiftKey) {
-                      event.preventDefault();
-                      handlePromptSubmit();
-                    }
-                  }}
-                />
-                <div className="new-workbench-prompt-examples" aria-label="Try an example">
-                  <span>Try</span>
-                  {[
-                    "Review every PR on faremeter/interchange",
-                    "Vet Northwind Traders before we sign",
-                    "Summarize what shipped each Friday",
-                  ].map((example) => (
-                    <button
-                      key={example}
-                      type="button"
-                      aria-pressed={prompt === example}
-                      className={prompt === example ? "is-selected" : undefined}
-                      onClick={() => setPrompt(example)}
-                    >
-                      {example}
-                    </button>
-                  ))}
-                </div>
-              </div>
-              <div className="new-workbench-prompt-actions">
-                <div className="new-workbench-agent-selection">
-                  <span>In the workbench</span>
-                  {selectedAgents.map((agent) => (
-                    <span key={agent.id} className="new-workbench-agent-chip">
-                      {agent.name}
-                      <button
-                        type="button"
-                        aria-label={`Remove ${agent.name}`}
-                        onClick={() => toggleAgent(agent.id)}
-                      >
-                        <X aria-hidden="true" />
-                      </button>
-                    </span>
-                  ))}
-                  {agentsQuery.isLoading ? (
-                    <span className="new-workbench-agent-status">Loading agents…</span>
-                  ) : agentsQuery.isError ? (
-                    <span className="new-workbench-agent-status" role="status">
-                      Couldn&apos;t load agents. You can still start without one.
-                    </span>
-                  ) : (
-                    <div ref={agentPickerRootRef} className="new-workbench-agent-picker">
-                      <button
-                        ref={agentPickerTriggerRef}
-                        type="button"
-                        className="new-workbench-add-agent"
-                        aria-controls={AGENT_LISTBOX_ID}
-                        aria-expanded={agentPickerOpen}
-                        onClick={() => (agentPickerOpen ? closeAgentPicker() : openAgentPicker())}
-                      >
-                        + Add agent
-                      </button>
-                      {agentPickerOpen ? (
-                        <div className="new-workbench-agent-popover">
-                          <input
-                            autoFocus
-                            className="new-workbench-agent-search"
-                            type="search"
-                            placeholder="Find an agent…"
-                            value={agentQuery}
-                            role="combobox"
-                            aria-autocomplete="list"
-                            aria-controls={AGENT_LISTBOX_ID}
-                            aria-expanded="true"
-                            aria-activedescendant={
-                              filteredAgents[activeAgentIndex] === undefined
-                                ? undefined
-                                : `new-workbench-agent-${filteredAgents[activeAgentIndex].id}`
-                            }
-                            onChange={(event) => {
-                              setAgentQuery(event.target.value);
-                              setActiveAgentIndex(0);
-                            }}
-                            onKeyDown={(event) => {
-                              if (event.key === "ArrowDown") {
-                                event.preventDefault();
-                                setActiveAgentIndex((current) =>
-                                  Math.min(current + 1, filteredAgents.length - 1),
-                                );
-                              }
-                              if (event.key === "ArrowUp") {
-                                event.preventDefault();
-                                setActiveAgentIndex((current) => Math.max(current - 1, 0));
-                              }
-                              if (event.key === "Enter") {
-                                // Implicit form submission would otherwise
-                                // fire on a miss, creating a workbench the
-                                // operator did not ask for.
-                                event.preventDefault();
-                                const activeAgent = filteredAgents[activeAgentIndex];
-                                if (activeAgent !== undefined) {
-                                  toggleAgent(activeAgent.id);
-                                }
-                              }
-                              if (event.key === "Escape") {
-                                event.preventDefault();
-                                closeAgentPicker();
-                              }
-                            }}
-                          />
-                          {filteredAgents.length === 0 ? (
-                            <p className="new-workbench-agent-empty">
-                              {pickableAgents.length === 0
-                                ? "No agents are available yet."
-                                : "No agents match that search."}
-                            </p>
-                          ) : (
-                            <div id={AGENT_LISTBOX_ID} role="listbox" aria-label="Available agents">
-                              {filteredAgents.map((agent, index) => {
-                                const selected = selectedAgentIds.includes(agent.id);
-                                return (
-                                  <button
-                                    key={agent.id}
-                                    id={`new-workbench-agent-${agent.id}`}
-                                    type="button"
-                                    role="option"
-                                    aria-selected={selected}
-                                    className={
-                                      index === activeAgentIndex
-                                        ? "new-workbench-agent-option is-active"
-                                        : "new-workbench-agent-option"
-                                    }
-                                    onMouseMove={() => setActiveAgentIndex(index)}
-                                    onClick={() => toggleAgent(agent.id)}
-                                  >
-                                    <span className="new-workbench-agent-option-name">
-                                      {agent.name}
-                                    </span>
-                                    {selected ? <Check aria-hidden="true" /> : null}
-                                  </button>
-                                );
-                              })}
-                            </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>
-                  )}
-                </div>
+              <textarea
+                className="new-composer-input"
+                aria-label="What should this workbench do?"
+                placeholder="Describe the job. Your co-worker sets up the rest."
+                value={prompt}
+                rows={3}
+                autoFocus
+                onChange={(event) => setPrompt(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" && !event.shiftKey) {
+                    event.preventDefault();
+                    submit();
+                  }
+                }}
+              />
+              <div className="new-composer-row">
                 <Button
                   type="submit"
                   aria-label="Start this workbench"
@@ -358,34 +134,16 @@ export function NewWorkbenchPickerRoute() {
                 </Button>
               </div>
             </form>
-
-            <button
-              type="button"
-              className="new-workbench-empty-channel"
-              disabled={create.isPending || selectedTenantId === null}
-              onClick={() => startCreate()}
-            >
-              Or <span>just open an empty channel</span> — nobody is in it yet, add people and
-              agents as you go.
-            </button>
+            <div className="new-suggestions" aria-label="Quick start">
+              {SUGGESTIONS.map((suggestion) => (
+                <button key={suggestion} type="button" onClick={() => setPrompt(suggestion)}>
+                  {suggestion}
+                </button>
+              ))}
+            </div>
           </>
         )}
       </div>
-      {selectedTenantId !== null && createAgentOpen ? (
-        <CreateAgentPanel
-          key={selectedTenantId}
-          open={createAgentOpen}
-          onOpenChange={setCreateAgentOpen}
-          tenantId={selectedTenantId}
-          onCreated={(deployment) => {
-            void queryClient.invalidateQueries({
-              queryKey: ["bench-agents", selectedTenantId],
-            });
-            setSelectedAgentIds((current) => [...current, deployment.definitionAssetId]);
-            promptRef.current?.focus();
-          }}
-        />
-      ) : null}
     </div>
   );
 }
diff --git a/apps/web/src/pages/new-workbench.css b/apps/web/src/pages/new-workbench.css
new file mode 100644
index 000000000..0faa4387a
--- /dev/null
+++ b/apps/web/src/pages/new-workbench.css
@@ -0,0 +1,67 @@
+.new-wrap {
+  width: min(42rem, 100%);
+  margin: 0 auto;
+  padding: 18vh 1.5rem 3rem;
+}
+
+.new-title {
+  margin: 0 0 1.5rem;
+  text-align: center;
+  font-size: 1.75rem;
+  font-weight: 650;
+  letter-spacing: -0.02em;
+}
+
+.new-composer {
+  border: 1px solid var(--border);
+  border-radius: 0.875rem;
+  background: var(--background);
+  box-shadow: 0 1px 2px rgb(43 38 39 / 5%);
+}
+
+.new-composer:focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+
+.new-composer-input {
+  display: block;
+  width: 100%;
+  resize: none;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  padding: 1rem 1.25rem 0.5rem;
+}
+
+.new-composer-row {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.5rem 0.75rem 0.75rem;
+}
+
+.new-suggestions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+.new-suggestions button {
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--muted);
+  color: var(--foreground);
+  font: inherit;
+  font-size: 0.8125rem;
+  padding: 0.375rem 0.75rem;
+  cursor: pointer;
+}
+
+.new-suggestions button:hover {
+  border-color: var(--border-strong, var(--border));
+}