From da0241f767649d6540480022426f5557b648f851 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 19:23:47 -0300
Subject: [PATCH 01/12] Make New Bot a small ghost button

---
 app/src/routes/_authed/_app/bots.index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/src/routes/_authed/_app/bots.index.tsx b/app/src/routes/_authed/_app/bots.index.tsx
index 63394c051..9aa7a74b4 100644
--- a/app/src/routes/_authed/_app/bots.index.tsx
+++ b/app/src/routes/_authed/_app/bots.index.tsx
@@ -22,7 +22,8 @@ function BotsPage() {
           render={(props) => (
             <Link {...props} search={{ new: true }} to="/bots" />
           )}
-          size="lg"
+          size="sm"
+          variant="ghost"
         >
           <IconPlus />
           New Bot

From 8c9e4c366eb4c9956983a604d16ffe643ecffbee Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 19:23:58 -0300
Subject: [PATCH 02/12] Hold the new-Bot dialog open and say what each field is
 for

A floor of 70% of the viewport, under the 85% ceiling the popup already
carried, so three of the four states land on one height instead of the
dialog resizing between every question. The buttons pin to the bottom, and
the pane keeps slack under it so the animated frame never shaves the last
line of a step while the spring settles.

"Role" beside "Title" read as a second job title when it is the standing
instruction the Bot carries into every channel. It is now "What it does",
and the per-channel promise moved from above all three fields onto the one
field it is true of. The validation messages and the Bot's own screens
follow the same name.
---
 app/src/components/agents/agent-profile.tsx   |  2 +-
 .../components/agents/create-agent-dialog.tsx | 48 ++++++++++++++++---
 app/src/components/bot-profile/setup.tsx      |  4 +-
 app/src/lib/agents/form.ts                    |  4 +-
 server/src/agents/routes.ts                   |  2 +-
 5 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/app/src/components/agents/agent-profile.tsx b/app/src/components/agents/agent-profile.tsx
index 5065173c5..6d77bf57d 100644
--- a/app/src/components/agents/agent-profile.tsx
+++ b/app/src/components/agents/agent-profile.tsx
@@ -89,7 +89,7 @@ export function AgentProfile({ agentId }: { agentId: string }) {
 
       <section className="grid gap-2">
         <h2 className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-          Role
+          What it does
         </h2>
         <p className="text-sm whitespace-pre-wrap text-pretty">
           {profile.roleDescription}
diff --git a/app/src/components/agents/create-agent-dialog.tsx b/app/src/components/agents/create-agent-dialog.tsx
index ff06cf169..a621681df 100644
--- a/app/src/components/agents/create-agent-dialog.tsx
+++ b/app/src/components/agents/create-agent-dialog.tsx
@@ -61,7 +61,13 @@ export function CreateAgentDialog({
 }) {
   return (
     <Dialog onOpenChange={(next) => !next && onClose()} open={open}>
-      <DialogContent>
+      {/* A floor of 70% of the viewport, against the popup's usual grow-to-fit. The three steps are
+          very different heights — two choices on one, three fields on another, four plus an
+          endpoint test on the last — and a dialog that resized itself between each made the
+          wizard feel like three unrelated popups. The floor sits under the 85svh ceiling the popup
+          already carries, so the two never fight: every step lands in that 70–85% band, and the
+          shortest one pays for it with empty room below the question. */}
+      <DialogContent className="min-h-[70svh]">
         {/* All wizard state lives below DialogContent, whose portal unmounts on close: dismissing
             the dialog mid-way discards the half-answered steps rather than pickling them. */}
         <CreateAgentWizard onClose={onClose} onCreated={onCreated} />
@@ -248,6 +254,9 @@ function CreateAgentWizard({
       <DialogTitle className="sr-only">New coworker</DialogTitle>
       <DialogBody className="overflow-y-auto">
         <Questionnaire
+          /* Fills the body so the empty room the min-height buys falls between the step and the
+             buttons, rather than below buttons floating in the middle of the popup. */
+          className="flex-1"
           item={STEPS[step]}
           noValidate
           /*
@@ -297,7 +306,15 @@ function CreateAgentWizard({
                 >
                   <motion.div
                     animate="active"
-                    className="pt-4"
+                    /*
+                     * `pb-2` is slack under the pane, not spacing: the frame above animates its
+                     * height to whatever this measures, and clips at that edge. Without it the
+                     * last line of a step sits exactly on the clip, so the spring's tail — still
+                     * 4px short at 320ms, 1px at 400ms — shaves the bottom off that line for a
+                     * visible moment on the way back to a taller step, and any rounding against
+                     * it clips the line outright at rest.
+                     */
+                    className="pt-4 pb-2"
                     custom={direction}
                     exit="exit"
                     initial="initial"
@@ -347,7 +364,9 @@ function CreateAgentWizard({
             </p>
           ) : null}
 
-          <div className="mt-6 flex justify-between gap-2">
+          {/* `mt-auto` pins the row to the bottom when the step is short; `pt-6` is the gap it
+              keeps once the step is tall enough to have pushed it there itself. */}
+          <div className="mt-auto flex justify-between gap-2 pt-6">
             <Button
               onClick={step === 0 ? onClose : () => go(step - 1)}
               type="button"
@@ -411,13 +430,14 @@ function IdentityStep({
     <StepItem name="identity">
       <QuestionnaireTitle>Who is this coworker?</QuestionnaireTitle>
       <QuestionnaireDescription>
-        The role you write here applies in every channel this coworker works in.
+        A name to call it by, a line describing it, and the job it does.
       </QuestionnaireDescription>
       <FieldGroup>
         <Field data-invalid={errors.name ? true : undefined}>
           <FieldLabel htmlFor="create-agent-name">Name</FieldLabel>
           <Input
             aria-invalid={errors.name ? true : undefined}
+            autoComplete="off"
             id="create-agent-name"
             onChange={(event) => set("name", event.target.value)}
             placeholder="Expense Manager"
@@ -431,6 +451,7 @@ function IdentityStep({
           <FieldLabel htmlFor="create-agent-title">Title</FieldLabel>
           <Input
             aria-invalid={errors.title ? true : undefined}
+            autoComplete="off"
             id="create-agent-title"
             onChange={(event) => set("title", event.target.value)}
             placeholder="Finance Operations"
@@ -438,12 +459,17 @@ function IdentityStep({
           />
           {errors.title ? (
             <FieldError errors={[{ message: errors.title }]} />
-          ) : null}
+          ) : (
+            <p className="text-muted-foreground text-sm">
+              A few words, shown beneath its name in lists.
+            </p>
+          )}
         </Field>
         <Field data-invalid={errors.roleDescription ? true : undefined}>
-          <FieldLabel htmlFor="create-agent-role">Role</FieldLabel>
+          <FieldLabel htmlFor="create-agent-role">What it does</FieldLabel>
           <Textarea
             aria-invalid={errors.roleDescription ? true : undefined}
+            autoComplete="off"
             id="create-agent-role"
             onChange={(event) => set("roleDescription", event.target.value)}
             placeholder="Review receipts, categorize expenses, and prepare reimbursement reports."
@@ -452,7 +478,15 @@ function IdentityStep({
           />
           {errors.roleDescription ? (
             <FieldError errors={[{ message: errors.roleDescription }]} />
-          ) : null}
+          ) : (
+            /* Said here rather than above the three fields, where it used to sit: it is true of
+               this field alone, and "Role" next to "Title" read as a second job title rather than
+               as the standing instruction it becomes. */
+            <p className="text-muted-foreground text-sm">
+              Its standing instruction in every channel. Messages in a channel
+              are tasks within it.
+            </p>
+          )}
         </Field>
       </FieldGroup>
     </StepItem>
diff --git a/app/src/components/bot-profile/setup.tsx b/app/src/components/bot-profile/setup.tsx
index c79643fc2..70cb8d05b 100644
--- a/app/src/components/bot-profile/setup.tsx
+++ b/app/src/components/bot-profile/setup.tsx
@@ -61,7 +61,9 @@ const TEXT_FIELDS: {
   { field: "title", label: "Title", icon: IconTag },
   {
     field: "roleDescription",
-    label: "Role",
+    // Not "Role": beside "Title" it read as a second job title, when it is the standing
+    // instruction the Bot carries into every channel. The create dialog says the same.
+    label: "What it does",
     icon: IconTextCaption,
     multiline: true,
   },
diff --git a/app/src/lib/agents/form.ts b/app/src/lib/agents/form.ts
index 48d25faad..b0ba30849 100644
--- a/app/src/lib/agents/form.ts
+++ b/app/src/lib/agents/form.ts
@@ -19,8 +19,8 @@ export const agentFormSchema = z.object({
   roleDescription: z
     .string()
     .trim()
-    .min(1, "Role description is required.")
-    .max(1000, "Role description must be 1000 characters or fewer."),
+    .min(1, "A description of what it does is required.")
+    .max(1000, "What it does must be 1000 characters or fewer."),
   visibility: z.enum(["public", "private"]),
   /**
    * The AG-UI endpoint this coworker runs on. Empty means the Bot in the box.
diff --git a/server/src/agents/routes.ts b/server/src/agents/routes.ts
index 582ec6ba8..1aae47c71 100644
--- a/server/src/agents/routes.ts
+++ b/server/src/agents/routes.ts
@@ -69,7 +69,7 @@ export function parseAgentInput(
   const roleDescription = boundedText(
     input.roleDescription,
     1000,
-    "Role description must be text between 1 and 1000 characters.",
+    "What it does must be text between 1 and 1000 characters.",
   );
   if (typeof roleDescription !== "string") return roleDescription;
 

From c521c412dccd99f0d2ec0289670448f962f99a6e Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 19:24:14 -0300
Subject: [PATCH 03/12] Move the harness catalogue into shared so both UIs read
 one list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The twelve frameworks and the address row lived in Rust, reachable only
through the Tauri command the desktop setup window calls. The web app's New
Bot dialog needs the same names, summaries and marks to say "the thing you
already run is one of these", and a second copy would drift — which matters
more here than for most lists, because this one carries other companies'
trade marks and the rules about what may be drawn for them.

The desktop is not in the root bun workspace, so Rust takes the JSON by path
with include_str! rather than importing the module beside it. The file is
camelCase, which is what the web app reads; `Harness` stays snake_case,
which is what the Tauri command has always sent HarnessPicker.tsx, so a
private row struct does the renaming and the wire format is unchanged.

Two fields are new and the desktop ignores both. `webCreate` is false for
Mastra alone: the server reaches it as remote_mastra through the @ag-ui/mastra
bridge and needs a roster id, and the web create API can send neither, so a
Mastra row in that dialog would make a Bot that appears, accepts a grant, and
answers nothing. `webSummary` overrides the installer's sentence on the two
rows where it is false on a surface that installs nothing.
---
 desktop/src-tauri/src/harness.rs | 212 ++++++++-----------------------
 shared/harnesses.json            | 187 +++++++++++++++++++++++++++
 shared/harnesses.test.ts         |  51 ++++++++
 shared/harnesses.ts              |  59 +++++++++
 shared/package.json              |   1 +
 5 files changed, 352 insertions(+), 158 deletions(-)
 create mode 100644 shared/harnesses.json
 create mode 100644 shared/harnesses.test.ts
 create mode 100644 shared/harnesses.ts

diff --git a/desktop/src-tauri/src/harness.rs b/desktop/src-tauri/src/harness.rs
index 5d2ece885..33223c304 100644
--- a/desktop/src-tauri/src/harness.rs
+++ b/desktop/src-tauri/src/harness.rs
@@ -148,168 +148,64 @@ fn byo_remote_ag_ui_url(value: &str) -> Result<String, String> {
 /// `registerCopilotKit` in the harness amounted to: that route serves the CopilotKit Runtime
 /// protocol, not AG-UI, and a run reached it and came back asking for a `method` field.
 pub fn catalogue() -> Vec<Harness> {
-    // Marks are vendored under the row's own id, so a row finds its own without a second mapping.
-    // The three with none are named here rather than discovered at draw time, because a missing
-    // file and a brand with no mark are different things and only one of them is a bug.
-    const UNMARKED: [&str; 3] = ["agno", "ag2", "langroid"];
     /*
-     * The directory is given, not derived from the id, and that is deliberate.
+     * Read from `shared/harnesses.json`, the one file every language reads, rather than written
+     * here. The web app's New Bot dialog names the same frameworks, and a second copy of this list
+     * would drift — which matters more than for most lists, because this one carries other
+     * companies' trade marks and the rules in `shared/marks/README.md` about what may be drawn for
+     * them.
      *
-     * A release publishes `openbot-<directory>`, taken from the Dockerfile paths in the tree, so
-     * the image name belongs to the directory and not to whatever this list calls the row. Derived
-     * from the id it was wrong for every row — `openbot-harness-crewai` against a published
-     * `openbot-agent-crewai` — and wrong twice for the four whose id does not match their folder.
-     * A picker that names an image nobody publishes fails at the pull, on a first run, with nothing
-     * on screen to say why. `every_image_is_one_a_release_publishes` holds it.
+     * Baked in with `include_str!` rather than read at runtime: the setup window draws before it
+     * has a working directory it can rely on, and a catalogue that can fail to load is a catalogue
+     * that can leave the picker empty on a first run with nothing on screen to say why.
      */
-    let ours = |id: &str,
-                directory: &str,
-                port: u16,
-                run_path: &str,
-                name: &str,
-                summary: &str,
-                maintainer: Maintainer| Harness {
-        id: id.into(),
-        name: name.into(),
-        summary: summary.into(),
-        // The manifest's own key, which is the directory the image is built from. `openbot-` is
-        // the published repository's prefix and belongs to the reference, not to this name.
-        image: Some(directory.to_string()),
-        port: Some(port),
-        health_path: Some("/health".into()),
-        run_path: run_path.into(),
-        credential: Credential::AnyProvider,
-        maintainer,
-        mark: (!UNMARKED.contains(&id)).then(|| id.to_string()),
-    };
+    #[derive(Deserialize)]
+    struct CatalogFile {
+        harnesses: Vec<CatalogRow>,
+    }
 
-    vec![
-        ours(
-            "crewai",
-            "agent-crewai",
-            4202,
-            "",
-            "CrewAI",
-            "Crews of agents with roles and tasks.",
-            Maintainer::Partnership,
-        ),
-        ours(
-            "llamaindex",
-            "agent-llamaindex",
-            4204,
-            "/run",
-            "LlamaIndex",
-            "Agents built around your own documents.",
-            Maintainer::FirstParty,
-        ),
-        ours(
-            "agno",
-            "agent-agno",
-            4203,
-            "/agui",
-            "Agno",
-            "Fast, small, and multi-modal.",
-            Maintainer::FirstParty,
-        ),
-        ours(
-            "langgraph",
-            "agent-langgraph-agui",
-            4206,
-            "",
-            "LangGraph",
-            "Graphs you can change, from LangChain.",
-            Maintainer::Partnership,
-        ),
-        ours(
-            "google-adk",
-            "agent-adk",
-            4208,
-            "",
-            "Google ADK",
-            "Google's agent kit. Gemini first, any model after.",
-            Maintainer::FirstParty,
-        ),
-        ours(
-            "pydantic-ai",
-            "agent-pydantic-ai",
-            4205,
-            "",
-            "Pydantic AI",
-            "Typed agents, validated in and out.",
-            Maintainer::FirstParty,
-        ),
-        ours(
-            "microsoft-agent-framework",
-            "agent-microsoft",
-            4211,
-            "",
-            "Microsoft Agent Framework",
-            "Microsoft's, model-agnostic by design.",
-            Maintainer::FirstParty,
-        ),
-        Harness {
-            id: "claude-agent-sdk".into(),
-            name: "Claude Agent SDK".into(),
-            summary: "Anthropic's own. The one that takes a Claude plan instead of a key.".into(),
-            image: Some("agent-claude-sdk".into()),
-            port: Some(4212),
-            health_path: Some("/health".into()),
-            run_path: String::new(),
-            credential: Credential::Anthropic,
-            maintainer: Maintainer::Community,
-            mark: Some("claude-agent-sdk".into()),
-        },
-        ours(
-            "strands",
-            "agent-strands",
-            4207,
-            "",
-            "AWS Strands",
-            "Amazon's. Bedrock first, any model after.",
-            Maintainer::FirstParty,
-        ),
-        ours(
-            "ag2",
-            "agent-ag2",
-            4210,
-            "",
-            "AG2",
-            "The AutoGen line, continued.",
-            Maintainer::FirstParty,
-        ),
-        ours(
-            "langroid",
-            "agent-langroid",
-            4209,
-            "",
-            "Langroid",
-            "Multi-agent, deliberately small.",
-            Maintainer::Community,
-        ),
-        ours(
-            "mastra",
-            "agent-mastra",
-            4213,
-            "",
-            "Mastra",
-            "TypeScript agents, with their own server.",
-            Maintainer::Partnership,
-        ),
-        Harness {
-            id: "byo-url".into(),
-            name: "An agent you already run".into(),
-            summary: "Give its address. It is proved with a real AG-UI run before it is saved."
-                .into(),
-            image: None,
-            port: None,
-            health_path: None,
-            run_path: String::new(),
-            credential: Credential::TheirEndpoint,
-            maintainer: Maintainer::Community,
-            // Stands for whatever the person already runs, so no vendor's mark is honest here.
-            mark: None,
-        },
-    ]
+    /*
+     * Its own struct rather than deserializing `Harness` directly, because the two shapes differ on
+     * purpose. The file is camelCase, which is what the web app reads; `Harness` is snake_case,
+     * which is what the Tauri command has always sent `desktop/src/HarnessPicker.tsx`. Renaming
+     * `Harness` to match the file would change that wire format for a UI that declares
+     * `health_path`. Unknown keys — `_readme`, and the web-only `webSummary` and `webCreate` — are
+     * ignored by serde, which is what lets the web app add a field without touching this.
+     */
+    #[derive(Deserialize)]
+    #[serde(rename_all = "camelCase")]
+    struct CatalogRow {
+        id: String,
+        name: String,
+        summary: String,
+        image: Option<String>,
+        port: Option<u16>,
+        health_path: Option<String>,
+        run_path: String,
+        credential: Credential,
+        maintainer: Maintainer,
+        mark: Option<String>,
+    }
+
+    let file: CatalogFile =
+        serde_json::from_str(include_str!("../../../shared/harnesses.json"))
+            .expect("shared/harnesses.json is baked in at build time and must parse");
+
+    file.harnesses
+        .into_iter()
+        .map(|row| Harness {
+            id: row.id,
+            name: row.name,
+            summary: row.summary,
+            image: row.image,
+            health_path: row.health_path,
+            run_path: row.run_path,
+            port: row.port,
+            credential: row.credential,
+            maintainer: row.maintainer,
+            mark: row.mark,
+        })
+        .collect()
 }
 
 /**
diff --git a/shared/harnesses.json b/shared/harnesses.json
new file mode 100644
index 000000000..2ce6fd7a2
--- /dev/null
+++ b/shared/harnesses.json
@@ -0,0 +1,187 @@
+{
+  "_readme": "One file every language reads: the agent harnesses OpenBot knows by name. The desktop setup window reads it through Rust (desktop/src-tauri/src/harness.rs, include_str!) to decide which image to run; the web app's New Bot dialog reads it through shared/harnesses.ts to name the frameworks a person might already be running. Ranked stars-first, with downloads as the sanity check, because each misleads alone. Anything the AG-UI table marks In Progress is left out — OpenAI's Agents SDK, AWS Bedrock Agents and Cloudflare Agents are all In Progress, and offering a harness that cannot answer is worse than a shorter list. 'image' is the DIRECTORY the image is built from, not the id: a release publishes openbot-<directory> from the Dockerfile paths in the tree, and four rows have an id that differs from their folder. 'mark' is the file stem under shared/marks/, or null where no maintained set has one — nothing is ever invented to fill the gap, see shared/marks/README.md. 'webCreate' is false for a row the web create API cannot actually make work. 'webSummary' overrides 'summary' in the web dialog, and exists only where the installer's sentence is false on a surface that installs nothing.",
+  "harnesses": [
+    {
+      "id": "crewai",
+      "name": "CrewAI",
+      "summary": "Crews of agents with roles and tasks.",
+      "webSummary": null,
+      "image": "agent-crewai",
+      "port": 4202,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "any-provider",
+      "maintainer": "partnership",
+      "mark": "crewai",
+      "webCreate": true
+    },
+    {
+      "id": "llamaindex",
+      "name": "LlamaIndex",
+      "summary": "Agents built around your own documents.",
+      "webSummary": null,
+      "image": "agent-llamaindex",
+      "port": 4204,
+      "healthPath": "/health",
+      "runPath": "/run",
+      "credential": "any-provider",
+      "maintainer": "first-party",
+      "mark": "llamaindex",
+      "webCreate": true
+    },
+    {
+      "id": "agno",
+      "name": "Agno",
+      "summary": "Fast, small, and multi-modal.",
+      "webSummary": null,
+      "image": "agent-agno",
+      "port": 4203,
+      "healthPath": "/health",
+      "runPath": "/agui",
+      "credential": "any-provider",
+      "maintainer": "first-party",
+      "mark": null,
+      "webCreate": true
+    },
+    {
+      "id": "langgraph",
+      "name": "LangGraph",
+      "summary": "Graphs you can change, from LangChain.",
+      "webSummary": null,
+      "image": "agent-langgraph-agui",
+      "port": 4206,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "any-provider",
+      "maintainer": "partnership",
+      "mark": "langgraph",
+      "webCreate": true
+    },
+    {
+      "id": "google-adk",
+      "name": "Google ADK",
+      "summary": "Google's agent kit. Gemini first, any model after.",
+      "webSummary": null,
+      "image": "agent-adk",
+      "port": 4208,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "any-provider",
+      "maintainer": "first-party",
+      "mark": "google-adk",
+      "webCreate": true
+    },
+    {
+      "id": "pydantic-ai",
+      "name": "Pydantic AI",
+      "summary": "Typed agents, validated in and out.",
+      "webSummary": null,
+      "image": "agent-pydantic-ai",
+      "port": 4205,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "any-provider",
+      "maintainer": "first-party",
+      "mark": "pydantic-ai",
+      "webCreate": true
+    },
+    {
+      "id": "microsoft-agent-framework",
+      "name": "Microsoft Agent Framework",
+      "summary": "Microsoft's, model-agnostic by design.",
+      "webSummary": null,
+      "image": "agent-microsoft",
+      "port": 4211,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "any-provider",
+      "maintainer": "first-party",
+      "mark": "microsoft-agent-framework",
+      "webCreate": true
+    },
+    {
+      "id": "claude-agent-sdk",
+      "name": "Claude Agent SDK",
+      "summary": "Anthropic's own. The one that takes a Claude plan instead of a key.",
+      "webSummary": "Anthropic's own agent loop, speaking AG-UI.",
+      "image": "agent-claude-sdk",
+      "port": 4212,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "anthropic",
+      "maintainer": "community",
+      "mark": "claude-agent-sdk",
+      "webCreate": true
+    },
+    {
+      "id": "strands",
+      "name": "AWS Strands",
+      "summary": "Amazon's. Bedrock first, any model after.",
+      "webSummary": null,
+      "image": "agent-strands",
+      "port": 4207,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "any-provider",
+      "maintainer": "first-party",
+      "mark": "strands",
+      "webCreate": true
+    },
+    {
+      "id": "ag2",
+      "name": "AG2",
+      "summary": "The AutoGen line, continued.",
+      "webSummary": null,
+      "image": "agent-ag2",
+      "port": 4210,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "any-provider",
+      "maintainer": "first-party",
+      "mark": null,
+      "webCreate": true
+    },
+    {
+      "id": "langroid",
+      "name": "Langroid",
+      "summary": "Multi-agent, deliberately small.",
+      "webSummary": null,
+      "image": "agent-langroid",
+      "port": 4209,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "any-provider",
+      "maintainer": "community",
+      "mark": null,
+      "webCreate": true
+    },
+    {
+      "id": "mastra",
+      "name": "Mastra",
+      "summary": "TypeScript agents, with their own server.",
+      "webSummary": null,
+      "image": "agent-mastra",
+      "port": 4213,
+      "healthPath": "/health",
+      "runPath": "",
+      "credential": "any-provider",
+      "maintainer": "partnership",
+      "mark": "mastra",
+      "webCreate": false
+    },
+    {
+      "id": "byo-url",
+      "name": "An agent you already run",
+      "summary": "Give its address. It is proved with a real AG-UI run before it is saved.",
+      "webSummary": "Anything else that speaks AG-UI. Give it its address.",
+      "image": null,
+      "port": null,
+      "healthPath": null,
+      "runPath": "",
+      "credential": "their-endpoint",
+      "maintainer": "community",
+      "mark": null,
+      "webCreate": true
+    }
+  ]
+}
diff --git a/shared/harnesses.test.ts b/shared/harnesses.test.ts
new file mode 100644
index 000000000..e1766a5f6
--- /dev/null
+++ b/shared/harnesses.test.ts
@@ -0,0 +1,51 @@
+import { expect, test } from "bun:test";
+import { HARNESSES } from "./harnesses";
+
+test("carries every row the desktop picker offers, in its order", () => {
+  expect(HARNESSES.map((h) => h.id)).toEqual([
+    "crewai",
+    "llamaindex",
+    "agno",
+    "langgraph",
+    "google-adk",
+    "pydantic-ai",
+    "microsoft-agent-framework",
+    "claude-agent-sdk",
+    "strands",
+    "ag2",
+    "langroid",
+    "mastra",
+    "byo-url",
+  ]);
+});
+
+test("the brands with no usable mark carry none", () => {
+  const unmarked = HARNESSES.filter((h) => h.mark === null)
+    .map((h) => h.id)
+    .sort();
+  expect(unmarked).toEqual(["ag2", "agno", "byo-url", "langroid"]);
+});
+
+/*
+ * Mastra is the one row a plain AG-UI endpoint cannot stand in for: the server dials it through the
+ * `@ag-ui/mastra` bridge as `remote_mastra` and needs a roster id, neither of which the web create
+ * API can send. Offered there it would make a Bot that answers nothing.
+ */
+test("marks Mastra as something the web dialog must not offer", () => {
+  const notOfferable = HARNESSES.filter((h) => !h.webCreate).map((h) => h.id);
+  expect(notOfferable).toEqual(["mastra"]);
+});
+
+test("gives a web-specific summary only where the installer's is false here", () => {
+  const rewritten = HARNESSES.filter((h) => h.webSummary !== null).map(
+    (h) => h.id,
+  );
+  expect(rewritten.sort()).toEqual(["byo-url", "claude-agent-sdk"]);
+});
+
+test("every row an image publishes names the directory it is built from", () => {
+  const crewai = HARNESSES.find((h) => h.id === "crewai");
+  expect(crewai?.image).toBe("agent-crewai");
+  expect(crewai?.healthPath).toBe("/health");
+  expect(crewai?.port).toBe(4202);
+});
diff --git a/shared/harnesses.ts b/shared/harnesses.ts
new file mode 100644
index 000000000..cb1efd549
--- /dev/null
+++ b/shared/harnesses.ts
@@ -0,0 +1,59 @@
+import catalogue from "./harnesses.json";
+
+/**
+ * The agent harnesses OpenBot knows by name, read from the one file every language reads.
+ *
+ * WHY A SHARED FILE. The list began in `desktop/src-tauri/src/harness.rs`, where it decides which
+ * image the setup window runs. The web app's New Bot dialog needs the same names, summaries and
+ * marks to say "the thing you already run is one of these" — and a second copy would drift, which
+ * matters more here than for most lists because this one carries other companies' trade marks and
+ * the rules in `shared/marks/README.md` about what may be drawn for them.
+ *
+ * The desktop reads this file through Rust rather than through this module: it is not in the root
+ * bun workspace, so `include_str!` takes the JSON directly. That is why the data lives in `.json`
+ * and only the typing lives here.
+ */
+export type Credential = "any-provider" | "anthropic" | "their-endpoint";
+export type Maintainer = "first-party" | "partnership" | "community";
+
+export type Harness = {
+  id: string;
+  name: string;
+  /** The installer's sentence. Written for a window that runs the image for you. */
+  summary: string;
+  /**
+   * What the web dialog says instead, where the installer's sentence is false on a surface that
+   * installs nothing. Null means `summary` is true everywhere and is used as-is.
+   */
+  webSummary: string | null;
+  /** The directory a release builds `openbot-<directory>` from, not the id. Null when none. */
+  image: string | null;
+  port: number | null;
+  healthPath: string | null;
+  runPath: string;
+  credential: Credential;
+  maintainer: Maintainer;
+  /** The file stem under `shared/marks/`, or null where no maintained set has one. */
+  mark: string | null;
+  /**
+   * Whether the web create API can actually make this row work.
+   *
+   * False for Mastra alone: the server reaches it as `remote_mastra` through the `@ag-ui/mastra`
+   * bridge and needs a roster id to say which agent it means, and the create endpoint can send
+   * neither. Offered in the dialog it would make a Bot that appears, accepts a grant, and answers
+   * nothing.
+   */
+  webCreate: boolean;
+};
+
+export const HARNESSES: readonly Harness[] = catalogue.harnesses;
+
+/** What the web dialog may offer, in the catalogue's own order. */
+export const WEB_HARNESSES: readonly Harness[] = HARNESSES.filter(
+  (harness) => harness.webCreate,
+);
+
+/** The sentence to draw on a web surface: the override where there is one, else the installer's. */
+export function summaryFor(harness: Harness): string {
+  return harness.webSummary ?? harness.summary;
+}
diff --git a/shared/package.json b/shared/package.json
index d9862e8f5..225955e48 100644
--- a/shared/package.json
+++ b/shared/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "type": "module",
   "exports": {
+    "./harnesses.json": "./harnesses.json",
     "./model-providers.json": "./model-providers.json",
     "./*": "./*.ts"
   },

From fa07e75ec66747a8f38820274b79c63bdc75d97f Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 19:27:34 -0300
Subject: [PATCH 04/12] Move the vendored brand marks beside the catalogue that
 names them

The marks sat under desktop/src, reachable only by the setup window. The web
app's New Bot dialog draws the same eleven, and copying the artwork would
have meant two sets of another company's trade mark to keep in step. They
now live in shared/marks/, globbed from both sides, with the README that
carries the rules moved with them.

Both globs resolve a file to its id by stripping everything up to the marks
directory rather than a fixed prefix, so neither breaks again if the path
moves. The Rust guard that every named mark is vendored follows to the new
location.

A glob that matches nothing fails silently here: every row would simply show
its name, which is also what a brand with no mark legitimately looks like.
`every named mark is vendored where both apps look for it` is the assertion
that tells those two apart, and it was proved to fail by removing a mark
before it was trusted.
---
 app/src/components/agents/harness-mark.tsx    | 26 +++++++++++
 app/src/lib/marks.ts                          | 28 ++++++++++++
 app/tests/harness-mark.test.tsx               | 43 +++++++++++++++++++
 desktop/src-tauri/src/harness.rs              |  2 +-
 desktop/src/marks.ts                          |  6 +--
 shared/harnesses.test.ts                      | 13 ++++++
 {desktop/src => shared}/marks/README.md       |  0
 {desktop/src => shared}/marks/anthropic.svg   |  0
 .../src => shared}/marks/claude-agent-sdk.svg |  0
 {desktop/src => shared}/marks/crewai.svg      |  0
 {desktop/src => shared}/marks/google-adk.svg  |  0
 {desktop/src => shared}/marks/langgraph.svg   |  0
 {desktop/src => shared}/marks/llamaindex.svg  |  0
 {desktop/src => shared}/marks/mastra.svg      |  0
 .../marks/microsoft-agent-framework.svg       |  0
 {desktop/src => shared}/marks/openai.svg      |  0
 {desktop/src => shared}/marks/pydantic-ai.svg |  0
 {desktop/src => shared}/marks/strands.svg     |  0
 18 files changed, 114 insertions(+), 4 deletions(-)
 create mode 100644 app/src/components/agents/harness-mark.tsx
 create mode 100644 app/src/lib/marks.ts
 create mode 100644 app/tests/harness-mark.test.tsx
 rename {desktop/src => shared}/marks/README.md (100%)
 rename {desktop/src => shared}/marks/anthropic.svg (100%)
 rename {desktop/src => shared}/marks/claude-agent-sdk.svg (100%)
 rename {desktop/src => shared}/marks/crewai.svg (100%)
 rename {desktop/src => shared}/marks/google-adk.svg (100%)
 rename {desktop/src => shared}/marks/langgraph.svg (100%)
 rename {desktop/src => shared}/marks/llamaindex.svg (100%)
 rename {desktop/src => shared}/marks/mastra.svg (100%)
 rename {desktop/src => shared}/marks/microsoft-agent-framework.svg (100%)
 rename {desktop/src => shared}/marks/openai.svg (100%)
 rename {desktop/src => shared}/marks/pydantic-ai.svg (100%)
 rename {desktop/src => shared}/marks/strands.svg (100%)

diff --git a/app/src/components/agents/harness-mark.tsx b/app/src/components/agents/harness-mark.tsx
new file mode 100644
index 000000000..06880fe57
--- /dev/null
+++ b/app/src/components/agents/harness-mark.tsx
@@ -0,0 +1,26 @@
+import { markFor } from "@/lib/marks";
+
+/**
+ * A framework's own mark, beside its name.
+ *
+ * Draws nothing when the brand has no mark. Three of the frameworks have none in any maintained
+ * set, and `shared/marks/README.md` is explicit about why nothing is drawn to fill the gap: a
+ * monogram we drew would read as the vendor's own, which is the thing a trade mark holder actually
+ * objects to. The caller draws the name either way, so a row without a mark is not a lesser one.
+ *
+ * Decorative, always: `alt=""` and `aria-hidden`, because the name is already there in text and a
+ * screen reader announcing "LangGraph LangGraph" is worse than one announcing it once.
+ */
+export function HarnessMark({ id, name }: { id: string | null; name: string }) {
+  const uri = markFor(id);
+  if (!uri) return null;
+  return (
+    <img
+      alt=""
+      aria-hidden="true"
+      className="size-5 shrink-0"
+      data-mark={name}
+      src={uri}
+    />
+  );
+}
diff --git a/app/src/lib/marks.ts b/app/src/lib/marks.ts
new file mode 100644
index 000000000..a342b5d33
--- /dev/null
+++ b/app/src/lib/marks.ts
@@ -0,0 +1,28 @@
+/**
+ * The vendored brand marks, inlined at build time as data URIs.
+ *
+ * The same files the desktop setup window draws, read from `shared/marks/` so there is one copy of
+ * each vendor's artwork rather than two to keep in step. See `shared/marks/README.md` before
+ * adding, renaming or drawing anything here: the rules in it are the reason a brand with no mark
+ * shows its name alone instead of a monogram we invented.
+ *
+ * As URIs rather than SVG source on purpose: an `<img>` cannot execute anything, so drawing these
+ * needs no `dangerouslySetInnerHTML` and what is in the file never becomes a security question.
+ */
+const files = import.meta.glob("../../../shared/marks/*.svg", {
+  eager: true,
+  query: "?inline",
+  import: "default",
+}) as Record<string, string>;
+
+const byId = new Map<string, string>(
+  Object.entries(files).map(([path, uri]) => [
+    path.replace(/^.*\/marks\//, "").replace(".svg", ""),
+    uri,
+  ]),
+);
+
+/** The mark for a brand id, or null where no maintained set has one. */
+export function markFor(id: string | null | undefined): string | null {
+  return (id && byId.get(id)) ?? null;
+}
diff --git a/app/tests/harness-mark.test.tsx b/app/tests/harness-mark.test.tsx
new file mode 100644
index 000000000..2faf660c7
--- /dev/null
+++ b/app/tests/harness-mark.test.tsx
@@ -0,0 +1,43 @@
+import { afterAll, afterEach, beforeAll, expect, mock, test } from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { cleanup, render } from "@testing-library/react";
+
+/**
+ * The glob that inlines the vendored SVGs is Vite's, and `bun test` has no Vite. Mocked the same
+ * way `desktop/src/App.test.tsx` mocks its own, so the behaviour this file cares about — what a
+ * brand with no mark draws — is tested rather than the bundler.
+ */
+mock.module("@/lib/marks", () => ({
+  markFor: (id: string | null | undefined) =>
+    id === "langgraph" ? "data:image/svg+xml,<svg/>" : null,
+}));
+
+const { HarnessMark } = await import("@/components/agents/harness-mark");
+
+beforeAll(() => GlobalRegistrator.register());
+afterEach(() => cleanup());
+afterAll(() => GlobalRegistrator.unregister());
+
+test("draws the vendored mark for a brand that has one", () => {
+  const { container } = render(<HarnessMark id="langgraph" name="LangGraph" />);
+  const img = container.querySelector("img");
+  expect(img?.getAttribute("src")).toBe("data:image/svg+xml,<svg/>");
+});
+
+/*
+ * The rule from shared/marks/README.md: three brands have no mark in any maintained set, and
+ * nothing is drawn to fill the gap. A monogram we drew would read as the vendor's own, which is the
+ * thing a trade mark holder actually objects to.
+ */
+test("draws nothing at all for a brand with no usable mark", () => {
+  const { container } = render(<HarnessMark id={null} name="Agno" />);
+  expect(container.firstChild).toBeNull();
+});
+
+test("never announces the brand twice, because the name is drawn beside it", () => {
+  const { container } = render(<HarnessMark id="langgraph" name="LangGraph" />);
+  expect(container.querySelector("img")?.getAttribute("aria-hidden")).toBe(
+    "true",
+  );
+  expect(container.querySelector("img")?.getAttribute("alt")).toBe("");
+});
diff --git a/desktop/src-tauri/src/harness.rs b/desktop/src-tauri/src/harness.rs
index 33223c304..3493bdea5 100644
--- a/desktop/src-tauri/src/harness.rs
+++ b/desktop/src-tauri/src/harness.rs
@@ -775,7 +775,7 @@ mod tests {
         for harness in catalogue() {
             let Some(mark) = harness.mark else { continue };
             let path = std::path::Path::new(env!("CARGO_MANIFEST_DIR"))
-                .join("../src/marks")
+                .join("../../shared/marks")
                 .join(format!("{mark}.svg"));
             assert!(
                 path.exists(),
diff --git a/desktop/src/marks.ts b/desktop/src/marks.ts
index 0ac40ead0..8c34e6d5a 100644
--- a/desktop/src/marks.ts
+++ b/desktop/src/marks.ts
@@ -9,9 +9,9 @@
  * security question at all.
  *
  * A row without an entry here is not an error: three of the twelve brands have no mark in any
- * maintained set, and their rows show the name alone. See `src/marks/README.md`.
+ * maintained set, and their rows show the name alone. See `shared/marks/README.md`.
  */
-const files = import.meta.glob("./marks/*.svg", {
+const files = import.meta.glob("../../shared/marks/*.svg", {
   eager: true,
   query: "?inline",
   import: "default",
@@ -19,7 +19,7 @@ const files = import.meta.glob("./marks/*.svg", {
 
 const byId = new Map<string, string>(
   Object.entries(files).map(([path, uri]) => [
-    path.replace("./marks/", "").replace(".svg", ""),
+    path.replace(/^.*\/marks\//, "").replace(".svg", ""),
     uri,
   ]),
 );
diff --git a/shared/harnesses.test.ts b/shared/harnesses.test.ts
index e1766a5f6..a75567ff4 100644
--- a/shared/harnesses.test.ts
+++ b/shared/harnesses.test.ts
@@ -43,6 +43,19 @@ test("gives a web-specific summary only where the installer's is false here", ()
   expect(rewritten.sort()).toEqual(["byo-url", "claude-agent-sdk"]);
 });
 
+/*
+ * The web app and the desktop both resolve a mark by globbing this directory, and a glob that
+ * matches nothing fails silently: every row simply shows its name, which is also what a brand with
+ * no mark legitimately looks like. Only this assertion tells the two apart.
+ */
+test("every named mark is vendored where both apps look for it", async () => {
+  for (const harness of HARNESSES) {
+    if (harness.mark === null) continue;
+    const file = Bun.file(`${import.meta.dir}/marks/${harness.mark}.svg`);
+    expect(await file.exists()).toBe(true);
+  }
+});
+
 test("every row an image publishes names the directory it is built from", () => {
   const crewai = HARNESSES.find((h) => h.id === "crewai");
   expect(crewai?.image).toBe("agent-crewai");
diff --git a/desktop/src/marks/README.md b/shared/marks/README.md
similarity index 100%
rename from desktop/src/marks/README.md
rename to shared/marks/README.md
diff --git a/desktop/src/marks/anthropic.svg b/shared/marks/anthropic.svg
similarity index 100%
rename from desktop/src/marks/anthropic.svg
rename to shared/marks/anthropic.svg
diff --git a/desktop/src/marks/claude-agent-sdk.svg b/shared/marks/claude-agent-sdk.svg
similarity index 100%
rename from desktop/src/marks/claude-agent-sdk.svg
rename to shared/marks/claude-agent-sdk.svg
diff --git a/desktop/src/marks/crewai.svg b/shared/marks/crewai.svg
similarity index 100%
rename from desktop/src/marks/crewai.svg
rename to shared/marks/crewai.svg
diff --git a/desktop/src/marks/google-adk.svg b/shared/marks/google-adk.svg
similarity index 100%
rename from desktop/src/marks/google-adk.svg
rename to shared/marks/google-adk.svg
diff --git a/desktop/src/marks/langgraph.svg b/shared/marks/langgraph.svg
similarity index 100%
rename from desktop/src/marks/langgraph.svg
rename to shared/marks/langgraph.svg
diff --git a/desktop/src/marks/llamaindex.svg b/shared/marks/llamaindex.svg
similarity index 100%
rename from desktop/src/marks/llamaindex.svg
rename to shared/marks/llamaindex.svg
diff --git a/desktop/src/marks/mastra.svg b/shared/marks/mastra.svg
similarity index 100%
rename from desktop/src/marks/mastra.svg
rename to shared/marks/mastra.svg
diff --git a/desktop/src/marks/microsoft-agent-framework.svg b/shared/marks/microsoft-agent-framework.svg
similarity index 100%
rename from desktop/src/marks/microsoft-agent-framework.svg
rename to shared/marks/microsoft-agent-framework.svg
diff --git a/desktop/src/marks/openai.svg b/shared/marks/openai.svg
similarity index 100%
rename from desktop/src/marks/openai.svg
rename to shared/marks/openai.svg
diff --git a/desktop/src/marks/pydantic-ai.svg b/shared/marks/pydantic-ai.svg
similarity index 100%
rename from desktop/src/marks/pydantic-ai.svg
rename to shared/marks/pydantic-ai.svg
diff --git a/desktop/src/marks/strands.svg b/shared/marks/strands.svg
similarity index 100%
rename from desktop/src/marks/strands.svg
rename to shared/marks/strands.svg

From 16018d483e44fc45ae706e8b6fd3cca6ac10f97b Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 19:29:16 -0300
Subject: [PATCH 05/12] Point the composed-character test at the renamed field

---
 app/tests/composing-enter.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/tests/composing-enter.test.tsx b/app/tests/composing-enter.test.tsx
index bfb55ccbe..85a1b568f 100644
--- a/app/tests/composing-enter.test.tsx
+++ b/app/tests/composing-enter.test.tsx
@@ -172,7 +172,7 @@ test("the new-coworker wizard does not move on from the Enter that confirms a co
   const name = await view.findByLabelText("Name");
   await type(name, "経費");
   await type(view.getByLabelText("Title"), "Finance Operations");
-  await type(view.getByLabelText("Role"), "Review receipts.");
+  await type(view.getByLabelText("What it does"), "Review receipts.");
 
   await confirmComposedCharacter(name);
   await settle();

From 87420969b8cb612de77bde35224a24fe1e725824 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 19:32:26 -0300
Subject: [PATCH 06/12] Ask who can see a Bot last, and draw no step counter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Visibility was the second question, which put it before the person had
decided anything that makes private or public mean something. It is the one
answer that does not change what they are making, so it goes last.

The counter goes with the reorder rather than despite it. The wizard is three
questions for a Bot that runs here and four for one at an address somebody
hosts, and a counter whose total changes under the reader mid-way reads as
the thing having got longer. Each step already says what it is asking in its
own heading, which is what was carrying the reader.

Two tests used the counter as their signal that a step had moved; they now
read the heading, which says the same thing and survives the next reorder.
The first version of the test forbidding the counter passed against the
counter it was written to forbid — `Step {n} of {total}` renders as four text
nodes and a regex matcher walks them one at a time — so it asserts against
the popup's whole text instead.
---
 .../components/agents/create-agent-dialog.tsx |  20 ++--
 app/tests/composing-enter.test.tsx            |   5 +-
 app/tests/create-agent-steps.test.tsx         | 106 ++++++++++++++++++
 3 files changed, 122 insertions(+), 9 deletions(-)
 create mode 100644 app/tests/create-agent-steps.test.tsx

diff --git a/app/src/components/agents/create-agent-dialog.tsx b/app/src/components/agents/create-agent-dialog.tsx
index a621681df..dcaccfdbf 100644
--- a/app/src/components/agents/create-agent-dialog.tsx
+++ b/app/src/components/agents/create-agent-dialog.tsx
@@ -76,8 +76,14 @@ export function CreateAgentDialog({
   );
 }
 
-/** The steps, in the order they are asked. The name is the questionnaire item's name. */
-const STEPS = ["identity", "visibility", "kind"] as const;
+/**
+ * The steps, in the order they are asked. The name is the questionnaire item's name.
+ *
+ * Visibility is last because it is the only question whose answer does not change what the person
+ * is making. Asked second, it arrived before they had decided anything that makes private or public
+ * mean something, and it was the step people had the least to go on.
+ */
+const STEPS = ["identity", "kind", "visibility"] as const;
 type StepName = (typeof STEPS)[number];
 
 /** The two ways a coworker can be seen. */
@@ -281,11 +287,11 @@ function CreateAgentWizard({
           }}
           onSubmit={(event) => event.preventDefault()}
         >
-          {/* A plain element rather than QuestionnaireProgress: only the active step is mounted,
-              so the primitive would count one question and announce the wrong total. */}
-          <p className="text-xs font-medium text-muted-foreground tabular-nums">
-            Step {step + 1} of {STEPS.length}
-          </p>
+          {/* No step counter. The wizard is three questions for a Bot that runs here and four for
+              one at an address somebody hosts, and a counter whose total changes under the reader
+              mid-way is worse than none: it reads as the thing having got longer. Each step says
+              what it is asking in its own heading, which is the part that was carrying the reader
+              anyway. */}
           <MotionConfig
             transition={{ duration: 0.5, type: "spring", bounce: 0 }}
           >
diff --git a/app/tests/composing-enter.test.tsx b/app/tests/composing-enter.test.tsx
index 85a1b568f..ab272d8c2 100644
--- a/app/tests/composing-enter.test.tsx
+++ b/app/tests/composing-enter.test.tsx
@@ -176,13 +176,14 @@ test("the new-coworker wizard does not move on from the Enter that confirms a co
 
   await confirmComposedCharacter(name);
   await settle();
-  expect(view.getByText("Step 1 of 3")).toBeTruthy();
+  // The wizard draws no counter, so the step's own heading is what says where we are.
+  expect(view.getByText("Who is this coworker?")).toBeTruthy();
 
   // An ordinary Enter still means Continue.
   await act(async () => {
     fireEvent.keyDown(name, { key: "Enter", keyCode: 13 });
   });
-  expect(await view.findByText("Step 2 of 3")).toBeTruthy();
+  expect(await view.findByText("Where does it run?")).toBeTruthy();
 });
 
 test("a boundary rule is not saved by the Enter that confirms a composed character", async () => {
diff --git a/app/tests/create-agent-steps.test.tsx b/app/tests/create-agent-steps.test.tsx
new file mode 100644
index 000000000..1284e3cbb
--- /dev/null
+++ b/app/tests/create-agent-steps.test.tsx
@@ -0,0 +1,106 @@
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  expect,
+  test,
+} from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
+import { cleanup, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { CreateAgentDialog } from "@/components/agents/create-agent-dialog";
+
+/**
+ * The order the wizard asks its questions in, and the counter it no longer draws.
+ *
+ * Visibility used to be the second question, asked before the person had decided anything that
+ * makes it meaningful. It is now the last. The "Step 1 of 3" line went with the reorder rather than
+ * despite it: the wizard is three steps for a Bot that runs here and four for one at an address, and
+ * a counter that changes its own total mid-way is worse than no counter.
+ *
+ * Harness is this repository's: `GlobalRegistrator` around the file, `cleanup` after each, a
+ * `QueryClient` with `retry: false`, and the real component inside a router of one route.
+ */
+
+beforeAll(() => GlobalRegistrator.register());
+afterEach(cleanup);
+afterAll(() => GlobalRegistrator.unregister());
+
+const originalFetch = global.fetch;
+
+beforeEach(() => {
+  global.fetch = Object.assign(
+    async (path: Parameters<typeof fetch>[0]) => {
+      if (path === "/api/agents/capabilities") {
+        return Response.json({ capabilities: { builtInAvailable: true } });
+      }
+      return new Response(null, { status: 404 });
+    },
+    { preconnect: originalFetch.preconnect },
+  );
+});
+
+afterEach(() => {
+  global.fetch = originalFetch;
+});
+
+function draw(screen: ReactNode) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const router = createRouter({
+    history: createMemoryHistory({ initialEntries: ["/"] }),
+    routeTree: createRootRoute({ component: () => screen }),
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+}
+
+function dialog() {
+  return draw(
+    <CreateAgentDialog onClose={() => {}} onCreated={() => {}} open />,
+  );
+}
+
+async function fillIdentity(view: ReturnType<typeof draw>) {
+  const user = userEvent.setup({
+    document: (await view.findByLabelText("Name")).ownerDocument,
+  });
+  await user.type(view.getByLabelText("Name"), "Expense Manager");
+  await user.type(view.getByLabelText("Title"), "Finance Operations");
+  await user.type(view.getByLabelText("What it does"), "Review receipts.");
+  return user;
+}
+
+test("asks where it runs straight after who it is, not who can see it", async () => {
+  const view = dialog();
+  const user = await fillIdentity(view);
+  await user.click(view.getByText("Continue"));
+  expect(await view.findByText("Where does it run?")).toBeTruthy();
+  expect(view.queryByText("Who can see it?")).toBeNull();
+});
+
+/*
+ * Asserted against the popup's whole text rather than with `queryByText`: the counter was built as
+ * `Step {step + 1} of {STEPS.length}`, which React renders as four separate text nodes, and a
+ * regex matcher walks nodes one at a time and never sees it. The first version of this test passed
+ * against the counter it was written to forbid.
+ */
+test("never draws a step counter", async () => {
+  const view = dialog();
+  await view.findByLabelText("Name");
+  const popup = view.baseElement.querySelector('[data-slot="dialog-content"]');
+  expect(popup?.textContent).not.toMatch(/Step \d+ of \d+/);
+});

From 4902e2e1daf1252f69ab8a1f0d5867dc81461f9f Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 19:33:05 -0300
Subject: [PATCH 07/12] Drain React's scheduler before the step test takes the
 document away

---
 app/tests/create-agent-steps.test.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/tests/create-agent-steps.test.tsx b/app/tests/create-agent-steps.test.tsx
index 1284e3cbb..100d04aae 100644
--- a/app/tests/create-agent-steps.test.tsx
+++ b/app/tests/create-agent-steps.test.tsx
@@ -18,6 +18,7 @@ import { cleanup, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { ReactNode } from "react";
 import { CreateAgentDialog } from "@/components/agents/create-agent-dialog";
+import { settleReactWork } from "./settle-react-work";
 
 /**
  * The order the wizard asks its questions in, and the counter it no longer draws.
@@ -33,7 +34,15 @@ import { CreateAgentDialog } from "@/components/agents/create-agent-dialog";
 
 beforeAll(() => GlobalRegistrator.register());
 afterEach(cleanup);
-afterAll(() => GlobalRegistrator.unregister());
+/*
+ * Drain React's scheduler before the document goes away: `cleanup` unmounts, but it does not
+ * retract a callback the scheduler has already posted, and one firing after `unregister()` reports
+ * as "Unhandled error between tests" with zero failing tests and a non-zero exit.
+ */
+afterAll(async () => {
+  await settleReactWork();
+  GlobalRegistrator.unregister();
+});
 
 const originalFetch = global.fetch;
 

From d9c7b77e09f1d0a16a6655a857bac8424f8502f6 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 19:41:52 -0300
Subject: [PATCH 08/12] Offer the frameworks people already run, and ask for
 the address after
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two radios asked a person who had just described a role to tell Built-in from
Managed. Both are a kind of Bot and neither word says which one is theirs. The
step now leads with the Bot this deployment runs itself and lists the
frameworks somebody might already have running, by name and by their own mark,
so the answer is recognised instead of deduced.

The press is the answer, so there is no Continue beside them: a button that
confirmed a decision already taken was the second press this path used to cost.
Three frameworks show and the rest open behind a disclosure, because twelve
names at once is a wall on the step somebody reaches knowing only that they
want a Bot.

The address moves onto a step of its own, reached only by the frameworks, so a
Bot that runs here is never shown a field it has no use for. It is generic: no
heading names the framework that led to it, because nothing about it differs by
framework. That is also the honest limit of the list — picking Google ADK
rather than CrewAI changes nothing and is stored nowhere.

Mastra is absent, and shared/harnesses.json says why: the server reaches it
through its own bridge and needs a roster id this create path cannot send.

Tasks 4 and 5 of the plan are one commit because they could not be two.
Click-to-advance leaves the step the moment a framework is pressed, so the
endpoint fields could not stay inline for one commit and move in the next
without shipping a state where a hosted Bot had nowhere to type an address.

biome.json now skips .superpowers, the git-ignored scratch directory these
plans and their mockups live in; HTML written to be thrown away was failing
`bun run lint`.
---
 .../components/agents/create-agent-dialog.tsx | 398 +++++++++++-------
 app/tests/create-agent-endpoint.test.tsx      | 181 ++++++++
 app/tests/create-agent-kind.test.tsx          | 166 ++++++++
 biome.json                                    |   1 +
 shared/harnesses.ts                           |   8 +-
 5 files changed, 599 insertions(+), 155 deletions(-)
 create mode 100644 app/tests/create-agent-endpoint.test.tsx
 create mode 100644 app/tests/create-agent-kind.test.tsx

diff --git a/app/src/components/agents/create-agent-dialog.tsx b/app/src/components/agents/create-agent-dialog.tsx
index dcaccfdbf..23df0cdf6 100644
--- a/app/src/components/agents/create-agent-dialog.tsx
+++ b/app/src/components/agents/create-agent-dialog.tsx
@@ -1,7 +1,10 @@
+import { summaryFor, WEB_HARNESSES } from "@openbot/shared/harnesses";
+import { IconSparkles } from "@tabler/icons-react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { AnimatePresence, MotionConfig, motion } from "motion/react";
 import { useState } from "react";
 import useMeasure from "react-use-measure";
+import { HarnessMark } from "@/components/agents/harness-mark";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -83,7 +86,7 @@ export function CreateAgentDialog({
  * is making. Asked second, it arrived before they had decided anything that makes private or public
  * mean something, and it was the step people had the least to go on.
  */
-const STEPS = ["identity", "kind", "visibility"] as const;
+const STEPS = ["identity", "kind", "endpoint", "visibility"] as const;
 type StepName = (typeof STEPS)[number];
 
 /** The two ways a coworker can be seen. */
@@ -107,28 +110,13 @@ const VISIBILITY_OPTIONS: Array<{
 /**
  * Where the coworker runs. Not a stored field: the server knows only whether an endpoint was
  * given, so "built-in" is the empty endpoint and this choice exists to make that fork explicit.
+ *
+ * Which framework was picked is not stored either. Every one of them is reached the same way and
+ * written the same way, so after this dialog closes there is no record of the button that was
+ * pressed.
  */
 type AgentKind = "builtin" | "managed";
 
-const KIND_OPTIONS: Array<{
-  value: AgentKind;
-  title: string;
-  description: string;
-}> = [
-  {
-    value: "builtin",
-    title: "Built-in",
-    description:
-      "Runs on this deployment's own Bot. Nothing to host or connect — it is ready the moment it is created.",
-  },
-  {
-    value: "managed",
-    title: "Managed",
-    description:
-      "Runs on an agent you host, spoken to over AG-UI. This server dials your endpoint on every run.",
-  },
-];
-
 /** The first step's slice of the form contract, so its errors match the server's limits. */
 const identitySchema = agentFormSchema.pick({
   name: true,
@@ -182,12 +170,30 @@ function CreateAgentWizard({
   const [values, setValues] = useState<AgentFormValues>(emptyAgentForm);
   /** Deliberately unanswered to start with: revealing endpoint fields is the point of asking. */
   const [kind, setKind] = useState<AgentKind | null>(null);
+  /**
+   * Which framework's button was pressed, so Back returns to it still chosen.
+   *
+   * Nothing else reads it. Every framework leads to the same endpoint step and is stored the same
+   * way, so after this dialog closes there is no answer to "which did I pick" — by design.
+   */
+  const [harness, setHarness] = useState<string | null>(null);
 
   const [connection, setConnection] = useState<ConnectionVerdict | null>(null);
   const [testing, setTesting] = useState(false);
   const [ref, bounds] = useMeasure();
 
-  const last = step === STEPS.length - 1;
+  /**
+   * The steps this answer actually asks, which is why there is no counter.
+   *
+   * A Bot that runs on this deployment is never asked for an address, so the sequence is three
+   * questions for it and four for one somebody hosts. `step` indexes this rather than `STEPS`, so
+   * the same index means the same question whichever way the person went.
+   */
+  const sequence = STEPS.filter(
+    (name) => name !== "endpoint" || kind === "managed",
+  );
+  const current = sequence[step];
+  const last = step === sequence.length - 1;
   const set = <K extends keyof AgentFormValues>(
     key: K,
     value: AgentFormValues[K],
@@ -209,18 +215,39 @@ function CreateAgentWizard({
   const identityErrors = tried ? identityIssues(values) : {};
   const endpointError = !tried
     ? undefined
-    : kind === "managed" && values.endpoint.trim() === ""
-      ? "An endpoint is required for a managed coworker."
+    : values.endpoint.trim() === ""
+      ? "An address is required for an agent you host."
       : agentFormSchema.shape.endpoint.safeParse(values.endpoint).error
           ?.issues[0]?.message;
 
+  /**
+   * A framework button, or the Bot that runs here, answered and moved on in one press.
+   *
+   * The press is the answer, so there is nothing left for a Continue to confirm — and the step
+   * this replaced cost the hosted path two presses for one decision. `go` is called with the next
+   * index directly rather than through `advance`, because `advance` would read `kind` from a
+   * closure this setState has not updated yet.
+   */
+  const choose = (next: AgentKind, harnessId: string | null) => {
+    setKind(next);
+    setHarness(harnessId);
+    if (next === "builtin") {
+      // A built-in coworker has no endpoint; whatever was typed on the way past must not ride
+      // along into the create.
+      set("endpoint", "");
+      set("authValue", "");
+      setConnection(null);
+    }
+    go(step + 1);
+  };
+
   const stepValid = (): boolean => {
-    if (STEPS[step] === "identity") {
+    if (current === "identity") {
       return identitySchema.safeParse(values).success;
     }
-    if (STEPS[step] === "kind") {
-      if (kind === null) return false;
-      if (kind === "builtin") return true;
+    // Reachable only by pressing one of its buttons, which is the answer; guarded anyway for Enter.
+    if (current === "kind") return kind !== null;
+    if (current === "endpoint") {
       return (
         values.endpoint.trim() !== "" &&
         agentFormSchema.shape.endpoint.safeParse(values.endpoint).success
@@ -263,7 +290,7 @@ function CreateAgentWizard({
           /* Fills the body so the empty room the min-height buys falls between the step and the
              buttons, rather than below buttons floating in the middle of the popup. */
           className="flex-1"
-          item={STEPS[step]}
+          item={current}
           noValidate
           /*
            * Enter means Continue, handled here rather than through the form's submit. The
@@ -324,39 +351,33 @@ function CreateAgentWizard({
                     custom={direction}
                     exit="exit"
                     initial="initial"
-                    key={STEPS[step]}
+                    key={current}
                     variants={variants}
                   >
-                    {STEPS[step] === "identity" ? (
+                    {current === "identity" ? (
                       <IdentityStep
                         errors={identityErrors}
                         set={set}
                         values={values}
                       />
-                    ) : STEPS[step] === "visibility" ? (
+                    ) : current === "visibility" ? (
                       <VisibilityStep set={set} values={values} />
-                    ) : (
-                      <KindStep
-                        builtInAvailable={builtInAvailable}
+                    ) : current === "endpoint" ? (
+                      <EndpointStep
+                        connection={connection}
                         endpointError={endpointError}
-                        kind={kind}
-                        onKind={(next) => {
-                          setKind(next);
-                          if (next === "builtin") {
-                            // A built-in coworker has no endpoint; whatever was typed on the way
-                            // past must not ride along into the create.
-                            set("endpoint", "");
-                            set("authValue", "");
-                            setConnection(null);
-                          }
-                        }}
                         onTest={() => void testConnection()}
-                        connection={connection}
                         set={set}
-                        showKindError={tried && kind === null}
                         testing={testing}
                         values={values}
                       />
+                    ) : (
+                      <KindStep
+                        builtInAvailable={builtInAvailable}
+                        chosen={harness}
+                        kind={kind}
+                        onChoose={choose}
+                      />
                     )}
                   </motion.div>
                 </AnimatePresence>
@@ -380,17 +401,22 @@ function CreateAgentWizard({
             >
               {step === 0 ? "Cancel" : "Back"}
             </Button>
-            <Button
-              disabled={createAgent.isPending}
-              onClick={() => void advance()}
-              type="button"
-            >
-              {last
-                ? createAgent.isPending
-                  ? "Creating…"
-                  : "Create coworker"
-                : "Continue"}
-            </Button>
+            {/* No forward button where the choice is the answer: on "where does it run" every
+                button both answers and moves on, so a Continue beside them would be a
+                control that confirms a decision already taken. */}
+            {current === "kind" ? null : (
+              <Button
+                disabled={createAgent.isPending}
+                onClick={() => void advance()}
+                type="button"
+              >
+                {last
+                  ? createAgent.isPending
+                    ? "Creating…"
+                    : "Create coworker"
+                  : "Continue"}
+              </Button>
+            )}
           </div>
         </Questionnaire>
       </DialogBody>
@@ -531,11 +557,113 @@ function VisibilityStep({
   );
 }
 
+/**
+ * Where the coworker runs, as buttons.
+ *
+ * TWO RADIOS BECAME A LIST OF NAMES, because the person this step is for arrives knowing the role
+ * they want and could not tell "Built-in" from "Managed" — both are a kind of Bot, and neither
+ * word says which one is theirs. A list led by the Bot this deployment runs itself, followed by the
+ * frameworks somebody might already have running, is answered by recognition instead.
+ *
+ * EVERY FRAMEWORK LEADS TO THE SAME PLACE. Picking Google ADK rather than CrewAI changes nothing:
+ * both ask for an AG-UI address on the next step and are stored identically. The names are here so
+ * somebody finds their own and knows this will work, not because the choice branches. The risk that
+ * carries — that twelve buttons read as a promise OpenBot will go and run CrewAI for you, which is
+ * what the desktop setup window really does — was raised and accepted deliberately.
+ *
+ * The press is the answer, so there is no Continue: `onChoose` both records and advances.
+ */
 function KindStep({
   builtInAvailable,
+  chosen,
   kind,
-  onKind,
-  showKindError,
+  onChoose,
+}: {
+  /** Whether this deployment has been pointed at a Bot of its own. */
+  builtInAvailable: boolean;
+  /** The framework whose button was pressed, so coming back shows it still chosen. */
+  chosen: string | null;
+  kind: AgentKind | null;
+  onChoose: (kind: AgentKind, harness: string | null) => void;
+}) {
+  /*
+   * Three, then the rest. Twelve names at once is a wall on the step somebody reaches knowing only
+   * that they want a Bot, and the catalogue is already ranked, so the three at the top are the
+   * three most people are looking for. The disclosure stays open once opened: somebody who went
+   * looking for their own is not helped by it closing under them.
+   */
+  const [showAll, setShowAll] = useState(false);
+  const shown = showAll ? WEB_HARNESSES : WEB_HARNESSES.slice(0, 3);
+
+  return (
+    <StepItem name="kind">
+      <QuestionnaireTitle>Where does it run?</QuestionnaireTitle>
+      <div className="flex flex-col gap-2">
+        <button
+          aria-pressed={kind === "builtin"}
+          className="flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50 aria-pressed:border-primary/40 aria-pressed:bg-primary/5"
+          disabled={!builtInAvailable}
+          onClick={() => onChoose("builtin", null)}
+          type="button"
+        >
+          <IconSparkles className="size-5 shrink-0 text-muted-foreground" />
+          <span className="min-w-0">
+            <span className="block font-medium text-sm">Run it here</span>
+            <span className="block text-muted-foreground text-xs">
+              {builtInAvailable
+                ? "On this deployment's own Bot. Nothing to host or connect — it is ready the moment it is created."
+                : "Not yet: this deployment has not been pointed at a Bot of its own. Whoever runs it can set one."}
+            </span>
+          </span>
+        </button>
+
+        <div className="flex items-center gap-2 py-1 text-muted-foreground text-xs">
+          <span className="h-px flex-1 bg-border" />
+          or connect one you run
+          <span className="h-px flex-1 bg-border" />
+        </div>
+
+        {shown.map((harness) => (
+          <button
+            aria-pressed={kind === "managed" && chosen === harness.id}
+            className="flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:bg-muted aria-pressed:border-primary/40 aria-pressed:bg-primary/5"
+            data-testid="harness-option"
+            key={harness.id}
+            onClick={() => onChoose("managed", harness.id)}
+            type="button"
+          >
+            <HarnessMark id={harness.mark} name={harness.name} />
+            <span className="min-w-0">
+              <span className="block font-medium text-sm">{harness.name}</span>
+              <span className="block text-muted-foreground text-xs">
+                {summaryFor(harness)}
+              </span>
+            </span>
+          </button>
+        ))}
+
+        {showAll ? null : (
+          <button
+            className="self-start text-muted-foreground text-xs underline-offset-4 hover:underline"
+            data-testid="harness-more"
+            onClick={() => setShowAll(true)}
+            type="button"
+          >
+            Show {WEB_HARNESSES.length - shown.length} more
+          </button>
+        )}
+      </div>
+    </StepItem>
+  );
+}
+
+/**
+ * The address of an agent somebody else hosts.
+ *
+ * Generic on purpose: it does not name the framework that led here, because nothing about it
+ * differs per framework and a heading that said "your CrewAI agent" would imply otherwise.
+ */
+function EndpointStep({
   values,
   set,
   endpointError,
@@ -543,11 +671,6 @@ function KindStep({
   testing,
   onTest,
 }: {
-  /** Whether this deployment has a Bot of its own for a coworker to run on. */
-  builtInAvailable: boolean;
-  kind: AgentKind | null;
-  onKind: (kind: AgentKind) => void;
-  showKindError: boolean;
   values: AgentFormValues;
   set: <K extends keyof AgentFormValues>(
     key: K,
@@ -559,100 +682,67 @@ function KindStep({
   onTest: () => void;
 }) {
   return (
-    <StepItem name="kind">
-      <QuestionnaireTitle>Where does it run?</QuestionnaireTitle>
-      <QuestionnaireChoices>
-        {KIND_OPTIONS.map((option) => {
-          /*
-           * Shown but not offerable, rather than hidden: a deployment with no managed Bot cannot
-           * back a built-in coworker, and the create would be refused. The card staying visible is
-           * what tells the person the kind exists and why it is not theirs to pick.
-           */
-          const unavailable = option.value === "builtin" && !builtInAvailable;
-          return (
-            <QuestionnaireChoice
-              checked={kind === option.value}
-              disabled={unavailable}
-              key={option.value}
-              onChange={() => onKind(option.value)}
-              value={option.value}
-            >
-              <span className="font-medium">{option.title}</span>
-              <QuestionnaireChoiceDescription>
-                {unavailable
-                  ? "Not available here: this deployment has no Bot of its own for a coworker to run on."
-                  : option.description}
-              </QuestionnaireChoiceDescription>
-            </QuestionnaireChoice>
-          );
-        })}
-      </QuestionnaireChoices>
-      {showKindError ? (
-        <p className="text-sm text-destructive" role="alert">
-          Choose where this coworker runs.
-        </p>
-      ) : null}
-      {kind === "managed" ? (
-        <FieldGroup>
-          <Field data-invalid={endpointError ? true : undefined}>
-            <FieldLabel htmlFor="create-agent-endpoint">
-              Agent endpoint
-            </FieldLabel>
-            <div className="flex gap-2">
-              <Input
-                aria-invalid={endpointError ? true : undefined}
-                id="create-agent-endpoint"
-                onChange={(event) => set("endpoint", event.target.value)}
-                placeholder="https://your-agent.example.com/ag-ui"
-                value={values.endpoint}
-              />
-              <Button
-                disabled={!values.endpoint || testing}
-                onClick={onTest}
-                type="button"
-                variant="outline"
-              >
-                {testing ? "Testing…" : "Test"}
-              </Button>
-            </div>
-            {endpointError ? (
-              <FieldError errors={[{ message: endpointError }]} />
-            ) : null}
-            {connection ? (
-              <p
-                className={`text-sm ${connection.ok ? "text-muted-foreground" : "text-destructive"}`}
-                role="status"
-              >
-                {connection.ok
-                  ? `It answered: ${connection.events.join(", ")}`
-                  : connection.reason}
-              </p>
-            ) : (
-              <p className="text-muted-foreground text-sm">
-                Anything that speaks AG-UI works. This server dials your agent,
-                so an agent on your own machine has to be reachable from here.
-              </p>
-            )}
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="create-agent-key">
-              Key for that agent (optional)
-            </FieldLabel>
+    <StepItem name="endpoint">
+      <QuestionnaireTitle>Where can it be reached?</QuestionnaireTitle>
+      <FieldGroup>
+        <Field data-invalid={endpointError ? true : undefined}>
+          <FieldLabel htmlFor="create-agent-endpoint">
+            Agent endpoint
+          </FieldLabel>
+          <div className="flex gap-2">
             <Input
+              aria-invalid={endpointError ? true : undefined}
               autoComplete="off"
-              id="create-agent-key"
-              onChange={(event) => set("authValue", event.target.value)}
-              placeholder="Bearer …"
-              type="password"
-              value={values.authValue}
+              id="create-agent-endpoint"
+              onChange={(event) => set("endpoint", event.target.value)}
+              placeholder="https://your-agent.example.com/ag-ui"
+              value={values.endpoint}
             />
+            <Button
+              disabled={!values.endpoint || testing}
+              onClick={onTest}
+              type="button"
+              variant="outline"
+            >
+              {testing ? "Testing…" : "Test"}
+            </Button>
+          </div>
+          {endpointError ? (
+            <FieldError errors={[{ message: endpointError }]} />
+          ) : connection ? (
+            <p
+              className={`text-sm ${connection.ok ? "text-muted-foreground" : "text-destructive"}`}
+              role="status"
+            >
+              {connection.ok
+                ? `It answered: ${connection.events.join(", ")}`
+                : connection.reason}
+            </p>
+          ) : (
             <p className="text-muted-foreground text-sm">
-              Sent as an <code>Authorization</code> header on every run, and
-              kept in the credential vault.
+              Anything that speaks AG-UI works. This server dials your agent, so
+              an agent on your own machine has to be reachable from here.
             </p>
-          </Field>
-        </FieldGroup>
-      ) : null}
+          )}
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="create-agent-key">
+            Key for that agent (optional)
+          </FieldLabel>
+          <Input
+            autoComplete="off"
+            id="create-agent-key"
+            onChange={(event) => set("authValue", event.target.value)}
+            placeholder="Bearer …"
+            type="password"
+            value={values.authValue}
+          />
+          <p className="text-muted-foreground text-sm">
+            Sent as an <code>Authorization</code> header on every run, and kept
+            in the credential vault.
+          </p>
+        </Field>
+      </FieldGroup>
     </StepItem>
   );
 }
diff --git a/app/tests/create-agent-endpoint.test.tsx b/app/tests/create-agent-endpoint.test.tsx
new file mode 100644
index 000000000..1b59e41b7
--- /dev/null
+++ b/app/tests/create-agent-endpoint.test.tsx
@@ -0,0 +1,181 @@
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  expect,
+  mock,
+  test,
+} from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
+import { act, cleanup, fireEvent, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { settleReactWork } from "./settle-react-work";
+
+/*
+ * `import.meta.glob` is Vite's, and `bun test` has no Vite. Stubbed the way the desktop stubs its
+ * own marks module, keeping the shape that matters here: a brand with a vendored mark resolves to
+ * something drawable, and one without resolves to null so its row shows the name alone.
+ */
+mock.module("@/lib/marks", () => ({
+  markFor: (id: string | null | undefined) =>
+    id ? `data:image/svg+xml,${id}` : null,
+}));
+
+/*
+ * Imported after the stub above, not beside the other imports: a static import is hoisted
+ * and would evaluate the real marks module — and its Vite-only glob — before `mock.module`
+ * ever ran.
+ */
+const { CreateAgentDialog } = await import(
+  "@/components/agents/create-agent-dialog"
+);
+
+/**
+ * The AG-UI endpoint, on a step of its own.
+ *
+ * It is generic: every framework leads here and none of them changes a word of it. The step exists
+ * only for a Bot somebody else hosts, so the Bot that runs on this deployment never sees it.
+ */
+
+beforeAll(() => GlobalRegistrator.register());
+afterEach(cleanup);
+afterAll(async () => {
+  await settleReactWork();
+  GlobalRegistrator.unregister();
+});
+
+const originalFetch = global.fetch;
+/** Every write the dialog sent, so "the endpoint was discarded" is an assertion. */
+let writes: { request: string; body: Record<string, unknown> }[] = [];
+
+beforeEach(() => {
+  writes = [];
+  global.fetch = Object.assign(
+    async (
+      path: Parameters<typeof fetch>[0],
+      init?: Parameters<typeof fetch>[1],
+    ) => {
+      const method = init?.method ?? "GET";
+      if (path === "/api/agents/capabilities") {
+        return Response.json({ capabilities: { builtInAvailable: true } });
+      }
+      if (method === "POST" && String(path).startsWith("/api/agents")) {
+        writes.push({
+          request: `${method} ${path}`,
+          body: typeof init?.body === "string" ? JSON.parse(init.body) : {},
+        });
+        return Response.json({ agent: { id: "expense-manager" } });
+      }
+      return new Response(null, { status: 404 });
+    },
+    { preconnect: originalFetch.preconnect },
+  );
+});
+
+afterEach(() => {
+  global.fetch = originalFetch;
+});
+
+function draw(screen: ReactNode) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  const router = createRouter({
+    history: createMemoryHistory({ initialEntries: ["/"] }),
+    routeTree: createRootRoute({ component: () => screen }),
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+}
+
+async function atKindStep() {
+  const view = draw(
+    <CreateAgentDialog onClose={() => {}} onCreated={() => {}} open />,
+  );
+  const name = await view.findByLabelText("Name");
+  const user = userEvent.setup({ document: name.ownerDocument });
+  await user.type(name, "Expense Manager");
+  await user.type(view.getByLabelText("Title"), "Finance Operations");
+  await user.type(view.getByLabelText("What it does"), "Review receipts.");
+  await user.click(view.getByText("Continue"));
+  await view.findByText("Where does it run?");
+  return { view, user };
+}
+
+test("a framework leads to one generic endpoint step", async () => {
+  const { view, user } = await atKindStep();
+  await user.click(view.getByRole("button", { name: /CrewAI/ }));
+  const field = await view.findByLabelText("Agent endpoint");
+  expect(field).toBeTruthy();
+  /*
+   * Generic: the framework that led here is not named on it. Scoped to this step's own pane
+   * rather than the popup, because the pane being slid out is still mounted mid-animation and
+   * carries the name of the button that was just pressed.
+   */
+  const pane = view
+    .getByText("Where can it be reached?")
+    .closest('[data-slot="questionnaire-item"]');
+  expect(pane?.textContent).not.toContain("CrewAI");
+});
+
+test("the Bot that runs here skips the endpoint step entirely", async () => {
+  const { view, user } = await atKindStep();
+  await user.click(view.getByRole("button", { name: /Run it here/ }));
+  expect(await view.findByText("Who can see it?")).toBeTruthy();
+  expect(view.queryByLabelText("Agent endpoint")).toBeNull();
+});
+
+test("going back keeps the framework that was chosen", async () => {
+  const { view, user } = await atKindStep();
+  await user.click(view.getByRole("button", { name: /CrewAI/ }));
+  await view.findByLabelText("Agent endpoint");
+  await user.click(view.getByText("Back"));
+  const chosen = await view.findByRole("button", { name: /CrewAI/ });
+  expect(chosen.getAttribute("aria-pressed")).toBe("true");
+});
+
+/*
+ * Review Focus: an endpoint typed on the way past must not ride along into a Bot that runs here.
+ * The server stores whatever it is sent, and a built-in Bot carrying somebody's stale URL would be
+ * dialled at it.
+ */
+test("choosing Run it here discards an endpoint typed earlier", async () => {
+  const { view, user } = await atKindStep();
+  await user.click(view.getByRole("button", { name: /CrewAI/ }));
+  await user.type(
+    await view.findByLabelText("Agent endpoint"),
+    "https://example.com/ag-ui",
+  );
+  await user.click(view.getByText("Back"));
+  await user.click(view.getByRole("button", { name: /Run it here/ }));
+  await view.findByText("Who can see it?");
+  await user.click(view.getByText("Create coworker"));
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  });
+  expect(writes).toHaveLength(1);
+  expect(writes[0]?.body.endpoint).toBe("");
+});
+
+test("Enter in the endpoint field advances the step", async () => {
+  const { view, user } = await atKindStep();
+  await user.click(view.getByRole("button", { name: /CrewAI/ }));
+  const field = await view.findByLabelText("Agent endpoint");
+  await user.type(field, "https://example.com/ag-ui");
+  await act(async () => {
+    fireEvent.keyDown(field, { key: "Enter", keyCode: 13 });
+  });
+  expect(await view.findByText("Who can see it?")).toBeTruthy();
+});
diff --git a/app/tests/create-agent-kind.test.tsx b/app/tests/create-agent-kind.test.tsx
new file mode 100644
index 000000000..4008da80f
--- /dev/null
+++ b/app/tests/create-agent-kind.test.tsx
@@ -0,0 +1,166 @@
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  expect,
+  mock,
+  test,
+} from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  createMemoryHistory,
+  createRootRoute,
+  createRouter,
+  RouterProvider,
+} from "@tanstack/react-router";
+import { cleanup, render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { ReactNode } from "react";
+import { settleReactWork } from "./settle-react-work";
+
+/*
+ * `import.meta.glob` is Vite's, and `bun test` has no Vite. Stubbed the way the desktop stubs its
+ * own marks module, keeping the shape that matters here: a brand with a vendored mark resolves to
+ * something drawable, and one without resolves to null so its row shows the name alone.
+ */
+mock.module("@/lib/marks", () => ({
+  markFor: (id: string | null | undefined) =>
+    id ? `data:image/svg+xml,${id}` : null,
+}));
+
+/*
+ * Imported after the stub above, not beside the other imports: a static import is hoisted
+ * and would evaluate the real marks module — and its Vite-only glob — before `mock.module`
+ * ever ran.
+ */
+const { CreateAgentDialog } = await import(
+  "@/components/agents/create-agent-dialog"
+);
+
+/**
+ * "Where does it run?" as buttons rather than two radios.
+ *
+ * The person this step is for arrives knowing the role they want and little else, and could not
+ * tell Built-in from Managed. It now leads with the Bot this deployment runs itself, and lists the
+ * frameworks somebody might already be using by name and mark, so the answer is recognised rather
+ * than deduced.
+ *
+ * Mastra is deliberately absent. The server reaches it as `remote_mastra` through the
+ * `@ag-ui/mastra` bridge and needs a roster id to say which agent it means; the create endpoint can
+ * send neither, so a Mastra row here would make a Bot that appears, accepts a grant, and answers
+ * nothing. `shared/harnesses.json` carries that as `webCreate: false`.
+ */
+
+beforeAll(() => GlobalRegistrator.register());
+afterEach(cleanup);
+afterAll(async () => {
+  await settleReactWork();
+  GlobalRegistrator.unregister();
+});
+
+const originalFetch = global.fetch;
+let builtInAvailable = true;
+
+beforeEach(() => {
+  builtInAvailable = true;
+  global.fetch = Object.assign(
+    async (path: Parameters<typeof fetch>[0]) => {
+      if (path === "/api/agents/capabilities") {
+        return Response.json({ capabilities: { builtInAvailable } });
+      }
+      return new Response(null, { status: 404 });
+    },
+    { preconnect: originalFetch.preconnect },
+  );
+});
+
+afterEach(() => {
+  global.fetch = originalFetch;
+});
+
+function draw(screen: ReactNode) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  const router = createRouter({
+    history: createMemoryHistory({ initialEntries: ["/"] }),
+    routeTree: createRootRoute({ component: () => screen }),
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <RouterProvider router={router} />
+    </QueryClientProvider>,
+  );
+}
+
+/** Fill in who the coworker is and move on, which is the only way to reach this step. */
+async function atKindStep() {
+  const view = draw(
+    <CreateAgentDialog onClose={() => {}} onCreated={() => {}} open />,
+  );
+  const name = await view.findByLabelText("Name");
+  const user = userEvent.setup({ document: name.ownerDocument });
+  await user.type(name, "Expense Manager");
+  await user.type(view.getByLabelText("Title"), "Finance Operations");
+  await user.type(view.getByLabelText("What it does"), "Review receipts.");
+  await user.click(view.getByText("Continue"));
+  await view.findByText("Where does it run?");
+  return { view, user };
+}
+
+test("leads with the Bot this deployment runs itself", async () => {
+  const { view } = await atKindStep();
+  expect(view.getByRole("button", { name: /Run it here/ })).toBeTruthy();
+});
+
+test("shows three frameworks, and the rest only on request", async () => {
+  const { view, user } = await atKindStep();
+  expect(view.getAllByTestId("harness-option")).toHaveLength(3);
+  await user.click(view.getByTestId("harness-more"));
+  expect(view.getAllByTestId("harness-option").length).toBeGreaterThan(3);
+});
+
+test("a framework with no vendored mark still names itself", async () => {
+  const { view, user } = await atKindStep();
+  await user.click(view.getByTestId("harness-more"));
+  expect(view.getByRole("button", { name: /Agno/ })).toBeTruthy();
+});
+
+test("never offers Mastra, which this create path cannot make work", async () => {
+  const { view, user } = await atKindStep();
+  await user.click(view.getByTestId("harness-more"));
+  expect(view.queryByRole("button", { name: /Mastra/ })).toBeNull();
+});
+
+test("offers Run it here only where the deployment has a Bot of its own", async () => {
+  builtInAvailable = false;
+  const { view } = await atKindStep();
+  expect(
+    view.getByRole("button", { name: /Run it here/ }).hasAttribute("disabled"),
+  ).toBe(true);
+  expect(
+    view.getByRole("button", { name: /CrewAI/ }).hasAttribute("disabled"),
+  ).toBe(false);
+});
+
+test("says the deployment was never pointed at a Bot, not that none exists", async () => {
+  builtInAvailable = false;
+  const { view } = await atKindStep();
+  expect(
+    view.getByRole("button", { name: /Run it here/ }).textContent,
+  ).toContain("has not been pointed at");
+});
+
+test("choosing a framework moves straight on, with no Continue to press", async () => {
+  const { view, user } = await atKindStep();
+  await user.click(view.getByRole("button", { name: /CrewAI/ }));
+  expect(await view.findByLabelText("Agent endpoint")).toBeTruthy();
+});
+
+test("choosing Run it here moves straight on too", async () => {
+  const { view, user } = await atKindStep();
+  await user.click(view.getByRole("button", { name: /Run it here/ }));
+  expect(await view.findByText("Who can see it?")).toBeTruthy();
+});
diff --git a/biome.json b/biome.json
index 686c6088e..6493b4786 100644
--- a/biome.json
+++ b/biome.json
@@ -5,6 +5,7 @@
       "**",
       "!**/dist",
       "!.",
+      "!.superpowers",
       "!app/src/lib/generated/application-config.ts",
       "!app/src/routeTree.gen.ts",
       "!desktop/src-tauri/gen",
diff --git a/shared/harnesses.ts b/shared/harnesses.ts
index cb1efd549..c70979149 100644
--- a/shared/harnesses.ts
+++ b/shared/harnesses.ts
@@ -46,7 +46,13 @@ export type Harness = {
   webCreate: boolean;
 };
 
-export const HARNESSES: readonly Harness[] = catalogue.harnesses;
+/*
+ * Asserted rather than inferred: a JSON import widens `credential` and `maintainer` to `string`,
+ * and the point of naming them as unions is that a typo in the file is caught. `harnesses.test.ts`
+ * is what actually checks the data, including that every mark it names is vendored.
+ */
+export const HARNESSES: readonly Harness[] =
+  catalogue.harnesses as readonly Harness[];
 
 /** What the web dialog may offer, in the catalogue's own order. */
 export const WEB_HARNESSES: readonly Harness[] = HARNESSES.filter(

From a11f3721fded37256adbd5e31092e05f96e197e0 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 19:53:54 -0300
Subject: [PATCH 09/12] Show every framework at once, and say plainly what
 running it here means
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"Show 9 more" made somebody who did not find their own in the first three
press a control before they could even look. The list is open, and scrolls:
scrolling is the gesture people already try on a list, and the scroller is
bounded so it is the list that moves and not the step — the question above it
and the Back button below it stay where they were drawn.

"Run it here" was describing the deployment rather than the person's choice:
"On this deployment's own Bot. Nothing to host or connect." Neither
"deployment" nor "host or connect" means anything to somebody who has just
written down what they want a Bot to do. It now says OpenBot runs it for you
and there is nothing to set up. The unavailable case stops naming the plumbing
too: it says the Bot can be switched on and that whoever set OpenBot up is the
one to do it, which is true and is addressed to the right person.
---
 .../components/agents/create-agent-dialog.tsx | 73 +++++++++----------
 app/tests/create-agent-kind.test.tsx          | 38 +++++++---
 2 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/app/src/components/agents/create-agent-dialog.tsx b/app/src/components/agents/create-agent-dialog.tsx
index 23df0cdf6..b09f6caae 100644
--- a/app/src/components/agents/create-agent-dialog.tsx
+++ b/app/src/components/agents/create-agent-dialog.tsx
@@ -586,15 +586,6 @@ function KindStep({
   kind: AgentKind | null;
   onChoose: (kind: AgentKind, harness: string | null) => void;
 }) {
-  /*
-   * Three, then the rest. Twelve names at once is a wall on the step somebody reaches knowing only
-   * that they want a Bot, and the catalogue is already ranked, so the three at the top are the
-   * three most people are looking for. The disclosure stays open once opened: somebody who went
-   * looking for their own is not helped by it closing under them.
-   */
-  const [showAll, setShowAll] = useState(false);
-  const shown = showAll ? WEB_HARNESSES : WEB_HARNESSES.slice(0, 3);
-
   return (
     <StepItem name="kind">
       <QuestionnaireTitle>Where does it run?</QuestionnaireTitle>
@@ -611,8 +602,8 @@ function KindStep({
             <span className="block font-medium text-sm">Run it here</span>
             <span className="block text-muted-foreground text-xs">
               {builtInAvailable
-                ? "On this deployment's own Bot. Nothing to host or connect — it is ready the moment it is created."
-                : "Not yet: this deployment has not been pointed at a Bot of its own. Whoever runs it can set one."}
+                ? "OpenBot runs it for you. Nothing to set up — it can start work as soon as it is made."
+                : "Not available yet. Whoever set OpenBot up has to switch this on first."}
             </span>
           </span>
         </button>
@@ -623,35 +614,37 @@ function KindStep({
           <span className="h-px flex-1 bg-border" />
         </div>
 
-        {shown.map((harness) => (
-          <button
-            aria-pressed={kind === "managed" && chosen === harness.id}
-            className="flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:bg-muted aria-pressed:border-primary/40 aria-pressed:bg-primary/5"
-            data-testid="harness-option"
-            key={harness.id}
-            onClick={() => onChoose("managed", harness.id)}
-            type="button"
-          >
-            <HarnessMark id={harness.mark} name={harness.name} />
-            <span className="min-w-0">
-              <span className="block font-medium text-sm">{harness.name}</span>
-              <span className="block text-muted-foreground text-xs">
-                {summaryFor(harness)}
-              </span>
-            </span>
-          </button>
-        ))}
-
-        {showAll ? null : (
-          <button
-            className="self-start text-muted-foreground text-xs underline-offset-4 hover:underline"
-            data-testid="harness-more"
-            onClick={() => setShowAll(true)}
-            type="button"
-          >
-            Show {WEB_HARNESSES.length - shown.length} more
-          </button>
-        )}
+        {/*
+         * Every framework, always, behind a scroller rather than a disclosure. A "show more" made
+         * somebody who did not find their own on the first three press a control before they could
+         * even look; scrolling is the gesture people already try on a list. The scroller is bounded
+         * so it is the list that moves and not the step: the question above it and the Back button
+         * below stay exactly where they were.
+         */}
+        <div className="-mr-1 max-h-64 overflow-y-auto pr-1">
+          <div className="flex flex-col gap-2">
+            {WEB_HARNESSES.map((harness) => (
+              <button
+                aria-pressed={kind === "managed" && chosen === harness.id}
+                className="flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:bg-muted aria-pressed:border-primary/40 aria-pressed:bg-primary/5"
+                data-testid="harness-option"
+                key={harness.id}
+                onClick={() => onChoose("managed", harness.id)}
+                type="button"
+              >
+                <HarnessMark id={harness.mark} name={harness.name} />
+                <span className="min-w-0">
+                  <span className="block font-medium text-sm">
+                    {harness.name}
+                  </span>
+                  <span className="block text-muted-foreground text-xs">
+                    {summaryFor(harness)}
+                  </span>
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
       </div>
     </StepItem>
   );
diff --git a/app/tests/create-agent-kind.test.tsx b/app/tests/create-agent-kind.test.tsx
index 4008da80f..02e5f409d 100644
--- a/app/tests/create-agent-kind.test.tsx
+++ b/app/tests/create-agent-kind.test.tsx
@@ -8,6 +8,7 @@ import {
   test,
 } from "bun:test";
 import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { WEB_HARNESSES } from "@openbot/shared/harnesses";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   createMemoryHistory,
@@ -115,22 +116,33 @@ test("leads with the Bot this deployment runs itself", async () => {
   expect(view.getByRole("button", { name: /Run it here/ })).toBeTruthy();
 });
 
-test("shows three frameworks, and the rest only on request", async () => {
-  const { view, user } = await atKindStep();
-  expect(view.getAllByTestId("harness-option")).toHaveLength(3);
-  await user.click(view.getByTestId("harness-more"));
-  expect(view.getAllByTestId("harness-option").length).toBeGreaterThan(3);
+test("shows every offerable framework at once, behind no disclosure", async () => {
+  const { view } = await atKindStep();
+  expect(view.getAllByTestId("harness-option")).toHaveLength(
+    WEB_HARNESSES.length,
+  );
+  expect(view.queryByTestId("harness-more")).toBeNull();
+});
+
+/*
+ * The list is what scrolls, not the step: bounding it is what keeps the question above it and the
+ * Back button below it where they were when the step was drawn.
+ */
+test("scrolls the list rather than the step", async () => {
+  const { view } = await atKindStep();
+  const scroller = view
+    .getAllByTestId("harness-option")[0]
+    ?.closest("div")?.parentElement;
+  expect(scroller?.className).toContain("overflow-y-auto");
 });
 
 test("a framework with no vendored mark still names itself", async () => {
-  const { view, user } = await atKindStep();
-  await user.click(view.getByTestId("harness-more"));
+  const { view } = await atKindStep();
   expect(view.getByRole("button", { name: /Agno/ })).toBeTruthy();
 });
 
 test("never offers Mastra, which this create path cannot make work", async () => {
-  const { view, user } = await atKindStep();
-  await user.click(view.getByTestId("harness-more"));
+  const { view } = await atKindStep();
   expect(view.queryByRole("button", { name: /Mastra/ })).toBeNull();
 });
 
@@ -145,12 +157,16 @@ test("offers Run it here only where the deployment has a Bot of its own", async
   ).toBe(false);
 });
 
-test("says the deployment was never pointed at a Bot, not that none exists", async () => {
+/*
+ * The defect this replaced read as "there isn't one" when the truth is that nobody has switched it
+ * on. Worded for the person in front of the dialog, who is not the person who can fix it.
+ */
+test("says the Bot can be switched on, not that none exists", async () => {
   builtInAvailable = false;
   const { view } = await atKindStep();
   expect(
     view.getByRole("button", { name: /Run it here/ }).textContent,
-  ).toContain("has not been pointed at");
+  ).toContain("switch this on");
 });
 
 test("choosing a framework moves straight on, with no Continue to press", async () => {

From e807a3ce2e478136540350bcc9abdfb23f7cdc00 Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 20:18:37 -0300
Subject: [PATCH 10/12] Fix what the branch review found: a red build and two
 missing guards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Four server tests still asserted "Role description must be text between 1 and
1000 characters.", which the rename changed two weeks of commits ago. CI runs
the repo-wide suite, so the branch was red. This is the second half of a miss
already recorded once: the app half was fixed when it was found, the server
half was never looked for, because both times the rename was verified against
a subset of the suite rather than all of it.

`app/tests/composing-enter.test.tsx` and `create-agent-steps.test.tsx` passed
only because a `mock.module` in a different file leaked process-wide. Both
failed when run alone, and the plan's own step command for one of them was
broken. The stub moves to app/tests/preload.ts, which exists for exactly this —
its comment is about a test that "passed on its own and failed in the suite",
and this was the same bug pointing the other way. A file that needs a mark
drawn still overrides it.

The desktop CI filter watched desktop/** only, and the catalogue and the marks
it guards now live in shared/. A row with a bad `credential` would have passed
lint, typecheck and the TS suite and then panicked the setup window, because
`catalogue()` parses that file at runtime. The filter now watches
shared/harnesses.json and shared/marks/**.

Unmarked rows no longer collapse their tile. Four of the twelve have no mark,
and their names began a tile's width left of the rest, which read as a ragged
list rather than four brands without artwork. Reserving the column draws
nothing and invents nothing; it only keeps the names in line.
---
 .github/workflows/desktop.yml              |  8 ++++++--
 app/src/components/agents/harness-mark.tsx |  8 +++++++-
 app/tests/harness-mark.test.tsx            | 18 ++++++++++++++++--
 app/tests/preload.ts                       | 13 +++++++++++++
 server/tests/agent-routes.test.ts          |  8 ++++----
 5 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/desktop.yml b/.github/workflows/desktop.yml
index dd3abf74c..f06802fed 100644
--- a/.github/workflows/desktop.yml
+++ b/.github/workflows/desktop.yml
@@ -3,12 +3,16 @@ name: Desktop
 # The shell is the one thing here that cannot be proved by running it on Linux: it is a macOS app, a
 # Windows app and a Linux app built from one tree, and the ways they differ are exactly the ways
 # this fails. So it tests and builds on all three, on every change to it.
+# `shared/harnesses.json` and `shared/marks/**` are watched here even though they are not under
+# desktop/: the catalogue the setup window draws moved there so the web app could read one copy, and
+# these jobs are the only ones that prove it still deserializes into `Harness` — `catalogue()` parses
+# it at runtime with an `expect`, so a bad row panics the window rather than failing a type check.
 on:
   pull_request:
-    paths: ["desktop/**", "package.json", ".github/workflows/desktop.yml"]
+    paths: ["desktop/**", "shared/harnesses.json", "shared/marks/**", "package.json", ".github/workflows/desktop.yml"]
   push:
     branches: [main]
-    paths: ["desktop/**", "package.json", ".github/workflows/desktop.yml"]
+    paths: ["desktop/**", "shared/harnesses.json", "shared/marks/**", "package.json", ".github/workflows/desktop.yml"]
   workflow_call:
     secrets:
       OPENBOT_GOOGLE_MODEL_OAUTH_CLIENT_SECRET:
diff --git a/app/src/components/agents/harness-mark.tsx b/app/src/components/agents/harness-mark.tsx
index 06880fe57..c6c32a39a 100644
--- a/app/src/components/agents/harness-mark.tsx
+++ b/app/src/components/agents/harness-mark.tsx
@@ -13,7 +13,13 @@ import { markFor } from "@/lib/marks";
  */
 export function HarnessMark({ id, name }: { id: string | null; name: string }) {
   const uri = markFor(id);
-  if (!uri) return null;
+  /*
+   * An empty box of the same size, not nothing. Four of the twelve rows have no mark, and a
+   * collapsed box started their names a tile's width to the left of the rest — a ragged list rather
+   * than four brands without artwork. Reserving the column draws no mark and invents none, which is
+   * what the README forbids; it only keeps the names in line.
+   */
+  if (!uri) return <span aria-hidden="true" className="size-5 shrink-0" />;
   return (
     <img
       alt=""
diff --git a/app/tests/harness-mark.test.tsx b/app/tests/harness-mark.test.tsx
index 2faf660c7..b05d24c31 100644
--- a/app/tests/harness-mark.test.tsx
+++ b/app/tests/harness-mark.test.tsx
@@ -29,9 +29,23 @@ test("draws the vendored mark for a brand that has one", () => {
  * nothing is drawn to fill the gap. A monogram we drew would read as the vendor's own, which is the
  * thing a trade mark holder actually objects to.
  */
-test("draws nothing at all for a brand with no usable mark", () => {
+test("draws no image at all for a brand with no usable mark", () => {
   const { container } = render(<HarnessMark id={null} name="Agno" />);
-  expect(container.firstChild).toBeNull();
+  expect(container.querySelector("img")).toBeNull();
+  expect(container.textContent).toBe("");
+});
+
+/*
+ * Empty space is not an invented mark. Four of the twelve rows have no mark, and with the box
+ * collapsed their names began a tile's width to the left of the others, which read as a ragged
+ * list rather than as four brands without artwork.
+ */
+test("still holds the tile's width, so unmarked rows line up with marked ones", () => {
+  const marked = render(<HarnessMark id="langgraph" name="LangGraph" />);
+  const tile = marked.container.firstElementChild?.className;
+  cleanup();
+  const bare = render(<HarnessMark id={null} name="Agno" />);
+  expect(bare.container.firstElementChild?.className).toBe(tile);
 });
 
 test("never announces the brand twice, because the name is drawn beside it", () => {
diff --git a/app/tests/preload.ts b/app/tests/preload.ts
index 4825c03b7..42746975b 100644
--- a/app/tests/preload.ts
+++ b/app/tests/preload.ts
@@ -20,9 +20,22 @@
  * before, and each DOM test file still registers and unregisters its own happy-dom.
  */
 
+import { mock } from "bun:test";
 import { GlobalRegistrator } from "@happy-dom/global-registrator";
 
 GlobalRegistrator.register();
 /* `@base-ui/utils` is not a dependency of this package; the react package that owns it is. */
 await import("@base-ui/react/dialog");
 GlobalRegistrator.unregister();
+
+/**
+ * `markFor` globs the vendored brand marks, and `import.meta.glob` is Vite's — under `bun test` it
+ * is undefined and calling it throws. Anything that renders the New Bot dialog imports it
+ * transitively, so without this every such file would need its own stub, and two of them passed
+ * only because a stub in a *different* file leaked process-wide: exactly the walk-order dependency
+ * the note above exists to stop.
+ *
+ * Null for every brand, which is a real state — four rows have no mark. A file that needs a mark
+ * drawn calls `mock.module` itself and wins, because a later registration replaces this one.
+ */
+mock.module("../src/lib/marks", () => ({ markFor: () => null }));
diff --git a/server/tests/agent-routes.test.ts b/server/tests/agent-routes.test.ts
index fb8dc1a59..7d89403eb 100644
--- a/server/tests/agent-routes.test.ts
+++ b/server/tests/agent-routes.test.ts
@@ -142,22 +142,22 @@ describe("agent input parser", () => {
     [
       "roleDescription",
       undefined,
-      "Role description must be text between 1 and 1000 characters.",
+      "What it does must be text between 1 and 1000 characters.",
     ],
     [
       "roleDescription",
       {},
-      "Role description must be text between 1 and 1000 characters.",
+      "What it does must be text between 1 and 1000 characters.",
     ],
     [
       "roleDescription",
       "   ",
-      "Role description must be text between 1 and 1000 characters.",
+      "What it does must be text between 1 and 1000 characters.",
     ],
     [
       "roleDescription",
       "r".repeat(1001),
-      "Role description must be text between 1 and 1000 characters.",
+      "What it does must be text between 1 and 1000 characters.",
     ],
     ["visibility", undefined, "Visibility must be public or private."],
     ["visibility", 1, "Visibility must be public or private."],

From 982470653dbec4394d409722a1671f1a904e1a8f Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 20:23:16 -0300
Subject: [PATCH 11/12] Stop the scroller clipping its rows, and let the list
 fill the step
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`overflow-y-auto` computes `overflow-x` to `auto` as well, so the box clipped
sideways as much as it did downward — and the inset was on the right only. The
row under the pointer had its left border shaved off against that edge, which
is what made the component look cut off. The padding is now on both sides, and
the negative margin hands it back so the rows keep the width of the button
above them.

The height was a constant, chosen before seeing it in a dialog that is itself
70% of the viewport: the list stopped at 240px and left 139px of the step
empty below it. In `svh` it tracks the popup it sits in — 336px of list on a
laptop, and the gap down to Back is 45px instead of 139px.
---
 app/src/components/agents/create-agent-dialog.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/src/components/agents/create-agent-dialog.tsx b/app/src/components/agents/create-agent-dialog.tsx
index b09f6caae..7616fa5ff 100644
--- a/app/src/components/agents/create-agent-dialog.tsx
+++ b/app/src/components/agents/create-agent-dialog.tsx
@@ -620,8 +620,17 @@ function KindStep({
          * even look; scrolling is the gesture people already try on a list. The scroller is bounded
          * so it is the list that moves and not the step: the question above it and the Back button
          * below stay exactly where they were.
+         *
+         * `overflow-y-auto` computes `overflow-x` to `auto` as well, so this box clips sideways as
+         * much as it does downward. The padding is what keeps a row's border and focus ring off
+         * that edge, and it is inset on BOTH sides: with room on the right alone, the row under the
+         * pointer had its left border shaved off. The negative margin hands the padding back so the
+         * rows stay the width of the button above them.
+         *
+         * Bounded in `svh` rather than at a fixed height, because the popup it sits in is already
+         * sized that way: at `max-h-64` the list stopped short and left a third of the step empty.
          */}
-        <div className="-mr-1 max-h-64 overflow-y-auto pr-1">
+        <div className="-mx-1 max-h-[42svh] overflow-y-auto px-1">
           <div className="flex flex-col gap-2">
             {WEB_HARNESSES.map((harness) => (
               <button

From 712ca827d058aaf2804fc106a9f60c36962f4ebe Mon Sep 17 00:00:00 2001
From: Guido Vizoso <guido.vizoso9@gmail.com>
Date: Fri, 16 Oct 2026 20:40:11 -0300
Subject: [PATCH 12/12] Keep the step within the frame that clips it
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The real cause of the cut-off left edge, which the last commit guessed at and
missed. The frame that animates each step's height hides its overflow on both
axes. The negative margin added to keep a row's border off the clip edge made
the scroller three pixels wider than that frame, and focusing the step scrolled
the frame four pixels sideways to bring them into view. Every child then drew
four pixels left of where it belonged — which is why the heading lost the left
of its W and each row lost its left border, and why insetting on both sides did
not help: the inset was the thing causing it.

The scroller is flush now, and nothing inside the step is wider than the frame.
The rows keep their border off the clip edge by having a focus ring drawn
inside rather than outside — which they needed anyway, since they had no focus
style at all and keyboard focus fell back to an outline the scroller would have
clipped.

The test asserts the frame's scrollWidth against its clientWidth, which is the
property that actually broke. The one it replaces asserted a Tailwind class on
a wrapper two levels up, and would have passed throughout.
---
 .../components/agents/create-agent-dialog.tsx  | 18 ++++++++++--------
 app/tests/create-agent-kind.test.tsx           | 18 +++++++++++++-----
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/app/src/components/agents/create-agent-dialog.tsx b/app/src/components/agents/create-agent-dialog.tsx
index 7616fa5ff..4c20c50e2 100644
--- a/app/src/components/agents/create-agent-dialog.tsx
+++ b/app/src/components/agents/create-agent-dialog.tsx
@@ -592,7 +592,7 @@ function KindStep({
       <div className="flex flex-col gap-2">
         <button
           aria-pressed={kind === "builtin"}
-          className="flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50 aria-pressed:border-primary/40 aria-pressed:bg-primary/5"
+          className="flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50 aria-pressed:border-primary/40 aria-pressed:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
           disabled={!builtInAvailable}
           onClick={() => onChoose("builtin", null)}
           type="button"
@@ -621,21 +621,23 @@ function KindStep({
          * so it is the list that moves and not the step: the question above it and the Back button
          * below stay exactly where they were.
          *
-         * `overflow-y-auto` computes `overflow-x` to `auto` as well, so this box clips sideways as
-         * much as it does downward. The padding is what keeps a row's border and focus ring off
-         * that edge, and it is inset on BOTH sides: with room on the right alone, the row under the
-         * pointer had its left border shaved off. The negative margin hands the padding back so the
-         * rows stay the width of the button above them.
+         * FLUSH, WITH NOTHING WIDER THAN THE FRAME ABOVE IT. The frame that animates each step's
+         * height hides its overflow, and it hides it on both axes. A negative margin here — put in
+         * to stop a row's border meeting the clip edge — made this box three pixels wider than that
+         * frame, and focusing the step scrolled the frame four pixels sideways to reveal them.
+         * Every child then drew four pixels to the left of where it belonged, so the step's own
+         * heading lost the left of its first letter and each row lost its left border. Horizontal
+         * room is bought with an inset focus ring on the rows instead, which cannot overflow.
          *
          * Bounded in `svh` rather than at a fixed height, because the popup it sits in is already
          * sized that way: at `max-h-64` the list stopped short and left a third of the step empty.
          */}
-        <div className="-mx-1 max-h-[42svh] overflow-y-auto px-1">
+        <div className="max-h-[42svh] overflow-y-auto">
           <div className="flex flex-col gap-2">
             {WEB_HARNESSES.map((harness) => (
               <button
                 aria-pressed={kind === "managed" && chosen === harness.id}
-                className="flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:bg-muted aria-pressed:border-primary/40 aria-pressed:bg-primary/5"
+                className="flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:bg-muted aria-pressed:border-primary/40 aria-pressed:bg-primary/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
                 data-testid="harness-option"
                 key={harness.id}
                 onClick={() => onChoose("managed", harness.id)}
diff --git a/app/tests/create-agent-kind.test.tsx b/app/tests/create-agent-kind.test.tsx
index 02e5f409d..01ca3f056 100644
--- a/app/tests/create-agent-kind.test.tsx
+++ b/app/tests/create-agent-kind.test.tsx
@@ -128,12 +128,20 @@ test("shows every offerable framework at once, behind no disclosure", async () =
  * The list is what scrolls, not the step: bounding it is what keeps the question above it and the
  * Back button below it where they were when the step was drawn.
  */
-test("scrolls the list rather than the step", async () => {
+/*
+ * The step is drawn inside a frame that animates its height and hides its overflow — on BOTH axes.
+ * Anything wider than that frame can be scrolled into view sideways, and when it is, every child
+ * draws to the left of where it belongs: the heading loses the left of its first letter and each
+ * row loses its left border. This asserts the width, which is the property that actually broke,
+ * rather than a class name on a wrapper.
+ */
+test("puts nothing inside the step wider than the frame that clips it", async () => {
   const { view } = await atKindStep();
-  const scroller = view
-    .getAllByTestId("harness-option")[0]
-    ?.closest("div")?.parentElement;
-  expect(scroller?.className).toContain("overflow-y-auto");
+  const frame = view.baseElement.querySelector(".relative.overflow-hidden");
+  expect(frame).toBeTruthy();
+  expect((frame as HTMLElement).scrollWidth).toBeLessThanOrEqual(
+    (frame as HTMLElement).clientWidth,
+  );
 });
 
 test("a framework with no vendored mark still names itself", async () => {