diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23e5bc2343..ef3f64d9a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,29 @@ Newest first. `Unreleased` is what is on `main` and not yet tagged.
   `code_required` (below). A server and a computer must be upgraded together: an older computer has
   no `/sign-in/code`.
 
+### A new Bot is made from a sheet that asks where it runs first
+
+New Bot opens a sheet instead of the four-screen wizard. It asks where the Bot will run, with Run it
+here chosen; a framework you run asks for its address next, and Continue checks from the server that
+something answers there before going on. The name, title, instructions and who can see it come
+last. A Bot given only a name gets a title and instructions the server accepts: for one that runs
+here, the instructions are a short prompt naming it. The frameworks list Claude Agent SDK, Google
+ADK, Google Antigravity and LangGraph first; AG2, Agno and Langroid now show their marks, and every
+mark sits on a light tile in dark mode.
+
+### A run of tool calls folds into one line
+
+Consecutive tool calls a Bot makes without drawing anything now collapse into one line ("Used 5
+tools") that opens to show each, as connector calls already did. Calls that draw an interface, and
+calls waiting on the person, still stand on their own.
+
+### Onboarding says which pictures are pictures, and tells a local install more
+
+The illustrations in onboarding sit in a muted frame and can no longer be clicked, tabbed into or
+read out as controls. On a single-user install, three more slides follow: that its data stays on
+the machine, which agents it can bring, and how to deploy it for an organization.
+`/api/capabilities` gains `localEvaluation`, true in single-user mode.
+
 ### An HTML-only email reaches its trigger as the sender wrote it
 
 An email trigger reads an HTML-only mail by stripping its tags, and the character references stayed:
diff --git a/app/src/components/agents/create-agent-dialog.tsx b/app/src/components/agents/create-agent-dialog.tsx
deleted file mode 100644
index 4c20c50e23..0000000000
--- a/app/src/components/agents/create-agent-dialog.tsx
+++ /dev/null
@@ -1,752 +0,0 @@
-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,
-  DialogBody,
-  DialogContent,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Field,
-  FieldError,
-  FieldGroup,
-  FieldLabel,
-} from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import {
-  Questionnaire,
-  QuestionnaireChoice,
-  QuestionnaireChoiceDescription,
-  QuestionnaireChoices,
-  QuestionnaireDescription,
-  QuestionnaireItem,
-  QuestionnaireTitle,
-} from "@/components/ui/questionnaire";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  type AgentFormValues,
-  agentFormSchema,
-  agentInputFrom,
-  emptyAgentForm,
-} from "@/lib/agents/form";
-import { createAgentMutationOptions } from "@/lib/agents/mutations";
-import {
-  agentCapabilitiesQueryOptions,
-  type ConnectionVerdict,
-  testAgentConnection,
-} from "@/lib/agents/queries";
-import { isComposing } from "@/lib/composing";
-import { queryClient } from "@/query-client";
-
-/**
- * Creating a coworker, one question at a time.
- *
- * A wizard rather than a form, because the answers are three different kinds of decision: who this
- * coworker is, who may see it, and where it runs. The last one is the fork — a built-in coworker
- * needs nothing more, a managed one needs an endpoint — and a flat form showing endpoint fields to
- * everybody made the common case read like the hard one.
- */
-export function CreateAgentDialog({
-  open,
-  onClose,
-  onCreated,
-}: {
-  open: boolean;
-  onClose: () => void;
-  /** The new coworker's id, so the caller can open its dialog on it. */
-  onCreated: (agentId: string) => void;
-}) {
-  return (
-    <Dialog onOpenChange={(next) => !next && onClose()} open={open}>
-      {/* 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} />
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-/**
- * 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", "endpoint", "visibility"] as const;
-type StepName = (typeof STEPS)[number];
-
-/** The two ways a coworker can be seen. */
-const VISIBILITY_OPTIONS: Array<{
-  value: AgentFormValues["visibility"];
-  title: string;
-  description: string;
-}> = [
-  {
-    value: "private",
-    title: "Private",
-    description: "Only you can see it and start channels with it.",
-  },
-  {
-    value: "public",
-    title: "Public",
-    description: "Everyone in the deployment can find and use it.",
-  },
-];
-
-/**
- * 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";
-
-/** The first step's slice of the form contract, so its errors match the server's limits. */
-const identitySchema = agentFormSchema.pick({
-  name: true,
-  title: true,
-  roleDescription: true,
-});
-
-type IdentityField = keyof typeof identitySchema.shape;
-
-/** First message per field, or nothing when the step parses. */
-function identityIssues(
-  values: AgentFormValues,
-): Partial<Record<IdentityField, string>> {
-  const parsed = identitySchema.safeParse(values);
-  if (parsed.success) return {};
-  const issues: Partial<Record<IdentityField, string>> = {};
-  for (const issue of parsed.error.issues) {
-    const field = issue.path[0] as IdentityField | undefined;
-    if (field && !issues[field]) issues[field] = issue.message;
-  }
-  return issues;
-}
-
-/** A pane arrives from the side the journey is moving toward, and leaves out the other. */
-const variants = {
-  initial: (direction: number) => ({ x: `${110 * direction}%`, opacity: 0 }),
-  active: { x: "0%", opacity: 1 },
-  exit: (direction: number) => ({ x: `${-110 * direction}%`, opacity: 0 }),
-};
-
-function CreateAgentWizard({
-  onClose,
-  onCreated,
-}: {
-  onClose: () => void;
-  onCreated: (agentId: string) => void;
-}) {
-  const createAgent = useMutation(createAgentMutationOptions(queryClient));
-  /*
-   * Whether "built-in" is a coworker this deployment can actually make. Assumed true while the
-   * answer is loading, so the common deployment never sees the card flash from disabled to
-   * enabled; the server refuses the create either way, so an optimistic card risks nothing.
-   */
-  const { data: capabilities } = useQuery(agentCapabilitiesQueryOptions());
-  const builtInAvailable = capabilities?.builtInAvailable ?? true;
-
-  const [step, setStep] = useState(0);
-  const [direction, setDirection] = useState(1);
-  /** Whether this step's Continue was pressed, which is when its errors become worth showing. */
-  const [tried, setTried] = useState(false);
-  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();
-
-  /**
-   * 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],
-  ) => setValues((current) => ({ ...current, [key]: value }));
-
-  /** Test endpoint reachability from the server, which is what runs will use. */
-  const testConnection = async () => {
-    setTesting(true);
-    setConnection(null);
-    try {
-      setConnection(
-        await testAgentConnection(values.endpoint, values.authValue),
-      );
-    } finally {
-      setTesting(false);
-    }
-  };
-
-  const identityErrors = tried ? identityIssues(values) : {};
-  const endpointError = !tried
-    ? undefined
-    : 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 (current === "identity") {
-      return identitySchema.safeParse(values).success;
-    }
-    // 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
-      );
-    }
-    // Visibility always holds an answer; the radio starts on private.
-    return true;
-  };
-
-  const go = (to: number) => {
-    setDirection(to > step ? 1 : -1);
-    setTried(false);
-    setStep(to);
-  };
-
-  /**
-   * Every way forward lands here — the Continue button, Enter in a field, Enter on a choice — as
-   * the questionnaire form's submit. Backwards never validates; half answers are fine to leave.
-   */
-  const advance = async () => {
-    if (!stepValid()) {
-      setTried(true);
-      return;
-    }
-    if (!last) {
-      go(step + 1);
-      return;
-    }
-    const agent = await createAgent.mutateAsync(agentInputFrom(values));
-    onCreated(agent.id);
-  };
-
-  return (
-    <>
-      {/* Read aloud, never shown: each step carries its own heading, and a dialog-level title
-          above them made two heading sizes compete. The popup still needs an accessible name. */}
-      <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={current}
-          noValidate
-          /*
-           * Enter means Continue, handled here rather than through the form's submit. The
-           * questionnaire's own submit path refuses any item it does not consider answered, and it
-           * cannot see these fields: the identity inputs are this dialog's own, not registered
-           * answers. Running first and preventing default also keeps the primitive's Enter
-           * handling out of the way; a textarea keeps Enter for its line breaks. The Enter that
-           * confirms a composed character is left alone, as the primitive leaves it: it finishes a
-           * character, not the step.
-           */
-          onKeyDown={(event) => {
-            if (
-              event.key === "Enter" &&
-              !event.shiftKey &&
-              !isComposing(event) &&
-              event.target instanceof HTMLInputElement
-            ) {
-              event.preventDefault();
-              void advance();
-            }
-          }}
-          onSubmit={(event) => event.preventDefault()}
-        >
-          {/* 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 }}
-          >
-            {/* The frame follows each pane's height, so the buttons glide instead of jumping.
-                `relative` is load-bearing: popLayout positions the exiting pane absolutely, and an
-                absolute element is clipped by overflow-hidden only on an ancestor that positions
-                it. Without this its containing block is the dialog popup, and the old pane slides
-                across the whole dialog instead of out of this frame. */}
-            <motion.div
-              animate={{ height: bounds.height > 0 ? bounds.height : "auto" }}
-              className="relative overflow-hidden"
-            >
-              <div ref={ref}>
-                <AnimatePresence
-                  custom={direction}
-                  initial={false}
-                  mode="popLayout"
-                >
-                  <motion.div
-                    animate="active"
-                    /*
-                     * `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"
-                    key={current}
-                    variants={variants}
-                  >
-                    {current === "identity" ? (
-                      <IdentityStep
-                        errors={identityErrors}
-                        set={set}
-                        values={values}
-                      />
-                    ) : current === "visibility" ? (
-                      <VisibilityStep set={set} values={values} />
-                    ) : current === "endpoint" ? (
-                      <EndpointStep
-                        connection={connection}
-                        endpointError={endpointError}
-                        onTest={() => void testConnection()}
-                        set={set}
-                        testing={testing}
-                        values={values}
-                      />
-                    ) : (
-                      <KindStep
-                        builtInAvailable={builtInAvailable}
-                        chosen={harness}
-                        kind={kind}
-                        onChoose={choose}
-                      />
-                    )}
-                  </motion.div>
-                </AnimatePresence>
-              </div>
-            </motion.div>
-          </MotionConfig>
-
-          {createAgent.error ? (
-            <p className="mt-4 text-sm text-destructive" role="alert">
-              {createAgent.error.message}
-            </p>
-          ) : null}
-
-          {/* `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"
-              variant="outline"
-            >
-              {step === 0 ? "Cancel" : "Back"}
-            </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>
-    </>
-  );
-}
-
-/**
- * `hidden={false}` and `inert={false}` on every item, against the questionnaire's own hiding.
- *
- * The primitive blanks any item that is not the active one, which is right for its stacked layout
- * and wrong here: only the active step is mounted, except for the instant an old pane is sliding
- * out under AnimatePresence — exactly when the primitive would blank it mid-slide. The item's
- * visibility is the animation's job in this dialog, never the questionnaire's.
- */
-function StepItem({
-  name,
-  children,
-}: {
-  name: StepName;
-  children: React.ReactNode;
-}) {
-  return (
-    <QuestionnaireItem hidden={false} inert={false} name={name}>
-      {children}
-    </QuestionnaireItem>
-  );
-}
-
-function IdentityStep({
-  values,
-  errors,
-  set,
-}: {
-  values: AgentFormValues;
-  errors: Partial<Record<IdentityField, string>>;
-  set: <K extends keyof AgentFormValues>(
-    key: K,
-    value: AgentFormValues[K],
-  ) => void;
-}) {
-  return (
-    <StepItem name="identity">
-      <QuestionnaireTitle>Who is this coworker?</QuestionnaireTitle>
-      <QuestionnaireDescription>
-        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"
-            value={values.name}
-          />
-          {errors.name ? (
-            <FieldError errors={[{ message: errors.name }]} />
-          ) : null}
-        </Field>
-        <Field data-invalid={errors.title ? true : undefined}>
-          <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"
-            value={values.title}
-          />
-          {errors.title ? (
-            <FieldError errors={[{ message: errors.title }]} />
-          ) : (
-            <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">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."
-            rows={4}
-            value={values.roleDescription}
-          />
-          {errors.roleDescription ? (
-            <FieldError errors={[{ message: errors.roleDescription }]} />
-          ) : (
-            /* 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>
-  );
-}
-
-function VisibilityStep({
-  values,
-  set,
-}: {
-  values: AgentFormValues;
-  set: <K extends keyof AgentFormValues>(
-    key: K,
-    value: AgentFormValues[K],
-  ) => void;
-}) {
-  return (
-    <StepItem name="visibility">
-      <QuestionnaireTitle>Who can see it?</QuestionnaireTitle>
-      <QuestionnaireChoices>
-        {VISIBILITY_OPTIONS.map((option) => (
-          <QuestionnaireChoice
-            checked={values.visibility === option.value}
-            key={option.value}
-            onChange={() => set("visibility", option.value)}
-            value={option.value}
-          >
-            <span className="font-medium">{option.title}</span>
-            <QuestionnaireChoiceDescription>
-              {option.description}
-            </QuestionnaireChoiceDescription>
-          </QuestionnaireChoice>
-        ))}
-      </QuestionnaireChoices>
-    </StepItem>
-  );
-}
-
-/**
- * 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,
-  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;
-}) {
-  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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"
-          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
-                ? "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>
-
-        <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>
-
-        {/*
-         * 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.
-         *
-         * 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="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 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)}
-                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>
-  );
-}
-
-/**
- * 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,
-  connection,
-  testing,
-  onTest,
-}: {
-  values: AgentFormValues;
-  set: <K extends keyof AgentFormValues>(
-    key: K,
-    value: AgentFormValues[K],
-  ) => void;
-  endpointError?: string;
-  connection: ConnectionVerdict | null;
-  testing: boolean;
-  onTest: () => void;
-}) {
-  return (
-    <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-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">
-              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>
-          <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/src/components/agents/harness-mark.tsx b/app/src/components/agents/harness-mark.tsx
index c6c32a39a1..4684d32ff5 100644
--- a/app/src/components/agents/harness-mark.tsx
+++ b/app/src/components/agents/harness-mark.tsx
@@ -3,28 +3,38 @@ 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.
+ * Draws nothing when the brand has no mark, 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.
  */
+/** The column every row reserves, marked or not, so the names beside it line up. */
+export const MARK_TILE = "size-5 shrink-0";
+
 export function HarnessMark({ id, name }: { id: string | null; name: string }) {
   const uri = markFor(id);
   /*
-   * 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
+   * An empty box of the same size, not nothing. A row with no mark ("An agent you already run", or
+   * a brand that publishes none) in a collapsed box started its name a tile's width to the left of
+   * the rest — a ragged list rather than a row 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" />;
+  if (!uri) return <span aria-hidden="true" className={MARK_TILE} />;
   return (
+    /*
+     * ON A WHITE TILE IN DARK MODE, BECAUSE SOME MARKS DISAPPEAR WITHOUT ONE. A mark drawn in
+     * `currentColor` (Antigravity, Mastra, OpenAI, half of Strands) cannot see the page's text
+     * colour from inside an `<img>`, so it is always black; LangGraph and CrewAI are drawn in fixed
+     * dark colours. All of them read on white, so dark mode gives every mark a white tile rather
+     * than recolouring anybody's artwork, which `shared/marks/README.md` rules out.
+     */
     <img
       alt=""
       aria-hidden="true"
-      className="size-5 shrink-0"
+      className={`${MARK_TILE} rounded-sm dark:bg-white dark:p-0.5`}
       data-mark={name}
       src={uri}
     />
diff --git a/app/src/components/agents/new-bot-sheet.tsx b/app/src/components/agents/new-bot-sheet.tsx
new file mode 100644
index 0000000000..4c8bb2bc60
--- /dev/null
+++ b/app/src/components/agents/new-bot-sheet.tsx
@@ -0,0 +1,816 @@
+import { summaryFor, WEB_HARNESSES } from "@openbot/shared/harnesses";
+import {
+  IconCheck,
+  IconLock,
+  IconSparkles,
+  IconUsers,
+} from "@tabler/icons-react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { MotionConfig, motion, useReducedMotion } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+import { HarnessMark } from "@/components/agents/harness-mark";
+import AgentOrb from "@/components/agents/orb/agent-orb";
+import { Button } from "@/components/ui/button";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetFooter,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  type AgentFormValues,
+  agentFormSchema,
+  agentInputFrom,
+} from "@/lib/agents/form";
+import { createAgentMutationOptions } from "@/lib/agents/mutations";
+import {
+  agentCapabilitiesQueryOptions,
+  testAgentConnection,
+} from "@/lib/agents/queries";
+import { isComposing } from "@/lib/composing";
+import { cn } from "@/lib/utils";
+import { queryClient } from "@/query-client";
+
+/**
+ * Where a new Bot is made: a wide sheet floating in from the right, so the roster it is being added
+ * to stays in view behind it.
+ *
+ * No visible header and no corner ✕ — Cancel, Escape and a click outside all close it. It replaced
+ * a centred wizard dialog that asked the same questions over four screens, one of them only to say
+ * who could see the Bot.
+ *
+ * The title is still there for screen readers: a dialog with no name is announced as just "dialog".
+ */
+export function NewBotSheet({
+  open,
+  onClose,
+  onCreated,
+}: {
+  open: boolean;
+  onClose: () => void;
+  /** The new Bot's id, so the caller can take the person to it. */
+  onCreated: (agentId: string) => void;
+}) {
+  return (
+    <Sheet
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+      open={open}
+    >
+      <SheetContent
+        className="gap-0 data-[side=right]:w-[calc(100%-1rem)] data-[side=right]:sm:max-w-2xl"
+        showCloseButton={false}
+        side="right"
+        variant="inset"
+      >
+        <SheetTitle className="sr-only">New Bot</SheetTitle>
+        {/* Inside the popup, so it unmounts on close and a reopened sheet starts empty. */}
+        <NewBotFlow onCreated={onCreated} />
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+/**
+ * The steps, in the order they are asked.
+ *
+ * WHERE IT RUNS COMES FIRST because it decides what the rest of the sheet means. For a Bot that runs
+ * here, its instructions are the system prompt it runs on; for one somebody else runs, they are a
+ * line added on top of a prompt written elsewhere. Asking for them before knowing which left the
+ * field unable to say what it was for. The address is asked only of a Bot somebody else runs, and is
+ * checked before the person spends time naming it. About it is always last, and always creates.
+ */
+const STEPS = ["runtime", "endpoint", "about"] as const;
+type Step = (typeof STEPS)[number];
+
+/**
+ * Where the Bot runs: on this deployment, or behind a framework somebody hosts.
+ *
+ * Which framework is kept so Back returns to it still chosen, and so a Bot made without a title can
+ * be given one. Every framework is reached the same way and stored the same way — an AG-UI address —
+ * so the server never hears which was picked.
+ */
+type Runtime = { kind: "builtin" } | { kind: "managed"; harness: string };
+
+/** What a created Bot is called beneath its name when the person gave it no title. */
+function defaultTitle(runtime: Runtime): string {
+  if (runtime.kind === "builtin") return "Assistant";
+  if (runtime.harness === "byo-url") return "AG-UI agent";
+  return (
+    WEB_HARNESSES.find((harness) => harness.id === runtime.harness)?.name ??
+    "AG-UI agent"
+  );
+}
+
+/**
+ * The role description sent when the person wrote no custom instructions.
+ *
+ * The server requires one, and for a Bot that runs here it is more than a description: it is the
+ * system prompt the Bot runs on. So that one gets a sentence it can actually act on. A Bot somebody
+ * else runs takes its instructions from wherever it runs, and gets a plain line saying where.
+ */
+function defaultInstructions(name: string, runtime: Runtime): string {
+  if (runtime.kind === "builtin") {
+    return `You are ${name}. Help the people you work with on whatever they bring you, clearly and briefly.`;
+  }
+  return `Connected from ${defaultTitle(runtime)}.`;
+}
+
+/**
+ * The steps and everything answered in them, held above all three so going Back loses nothing.
+ *
+ * Every way forward — Continue, Create, or Enter in a field — is the form's submit. Create on the
+ * last step makes the Bot. Back never validates; a half answer is fine to leave and come back to.
+ *
+ * The body is the one part of the sheet that scrolls, and it has to say so: a flex child with
+ * `min-h-0` and no overflow of its own shrinks and paints over the footer instead.
+ */
+function NewBotFlow({ onCreated }: { onCreated: (agentId: string) => void }) {
+  const createAgent = useMutation(createAgentMutationOptions(queryClient));
+  /*
+   * Assumed available while the answer loads, so the common deployment never sees the option flash
+   * from disabled to enabled; the server refuses the create either way.
+   */
+  const { data: capabilities } = useQuery(agentCapabilitiesQueryOptions());
+  const builtInAvailable = capabilities?.builtInAvailable ?? true;
+  const [step, setStep] = useState<Step>("runtime");
+  const [direction, setDirection] = useState(1);
+  const [name, setName] = useState("");
+  const [title, setTitle] = useState("");
+  const [instructions, setInstructions] = useState("");
+  /** Private until said otherwise: a Bot shown to everybody by accident is the worse mistake. */
+  const [visibility, setVisibility] = useState<Visibility>("private");
+  /** Run it here unless the person picks otherwise: the answer that needs nothing set up. */
+  const [runtime, setRuntime] = useState<Runtime | null>({ kind: "builtin" });
+  const [endpoint, setEndpoint] = useState("");
+  const [key, setKey] = useState("");
+  /** Whether Continue was pressed on the address, which is when its error becomes worth showing. */
+  const [tried, setTried] = useState(false);
+  /** Continue on the address is dialling it, before anything is created. */
+  const [checking, setChecking] = useState(false);
+  /** Why the server could not reach the address on the last Continue, in its own words. */
+  const [unreachable, setUnreachable] = useState<string>();
+  /** The Bot just made, held for the moment the sheet spends saying so before it hands over. */
+  const [createdId, setCreatedId] = useState<string>();
+  const reduceMotion = useReducedMotion();
+
+  // A deployment with no Bot of its own cannot run one here, so nothing is chosen for the person.
+  useEffect(() => {
+    if (!builtInAvailable) {
+      setRuntime((current) => (current?.kind === "builtin" ? null : current));
+    }
+  }, [builtInAvailable]);
+
+  /*
+   * Read through a ref so the timer below is not restarted by a caller that passes a fresh arrow on
+   * every render; the hand-over should happen once, a fixed beat after the Bot exists.
+   */
+  const onCreatedRef = useRef(onCreated);
+  useEffect(() => {
+    onCreatedRef.current = onCreated;
+  });
+  useEffect(() => {
+    if (!createdId) return;
+    const timer = window.setTimeout(
+      () => onCreatedRef.current(createdId),
+      reduceMotion ? CREATED_BEAT_REDUCED_MS : CREATED_BEAT_MS,
+    );
+    return () => window.clearTimeout(timer);
+  }, [createdId, reduceMotion]);
+
+  const named = name.trim() !== "";
+  const endpointIssue =
+    endpoint.trim() === ""
+      ? "An address is required for an agent you run."
+      : agentFormSchema.shape.endpoint.safeParse(endpoint).error?.issues[0]
+          ?.message;
+  const busy = checking || createAgent.isPending;
+  const canContinue =
+    !busy &&
+    (step === "about"
+      ? named
+      : step === "runtime"
+        ? runtime !== null
+        : endpointIssue === undefined || !tried);
+
+  const go = (to: Step) => {
+    setDirection(STEPS.indexOf(to) > STEPS.indexOf(step) ? 1 : -1);
+    setTried(false);
+    setUnreachable(undefined);
+    createAgent.reset();
+    setStep(to);
+  };
+
+  const create = async (chosen: Runtime) => {
+    const managed = chosen.kind === "managed";
+    const agent = await createAgent.mutateAsync(
+      agentInputFrom({
+        name: name.trim(),
+        title: title.trim() || defaultTitle(chosen),
+        roleDescription:
+          instructions.trim() || defaultInstructions(name.trim(), chosen),
+        visibility,
+        // A Bot that runs here has no address; whatever was typed on the way past stays behind.
+        endpoint: managed ? endpoint.trim() : "",
+        authValue: managed ? key : "",
+      }),
+    );
+    setCreatedId(agent.id);
+  };
+
+  const advance = () => {
+    if (step === "runtime" && runtime) {
+      return go(runtime.kind === "builtin" ? "about" : "endpoint");
+    }
+    if (step === "endpoint") return connect();
+    if (step === "about" && runtime) return create(runtime);
+  };
+
+  /** Where Back goes: the address for a Bot somebody else runs, where it runs otherwise. */
+  const previous = (): Step =>
+    step === "about" && runtime?.kind === "managed" ? "endpoint" : "runtime";
+
+  /**
+   * Continue on the address: dial it from the server, and move on only if it answers.
+   *
+   * There is no separate Test button. A test that could be skipped let a Bot be made pointed at
+   * nothing, and one that could not be skipped was a second button doing Continue's job. So Continue
+   * tests: an agent that answers moves on, and one that does not says why under its address, where
+   * the fix will be typed. Continue stays pressable after that, because the usual fix is starting the
+   * agent, not editing what was typed.
+   */
+  const connect = async () => {
+    const focusAddress = () =>
+      // Focus would otherwise fall to the page while the button below is busy or disabled.
+      document.getElementById("new-bot-endpoint")?.focus();
+    if (endpointIssue) {
+      setTried(true);
+      focusAddress();
+      return;
+    }
+    setUnreachable(undefined);
+    setChecking(true);
+    const verdict = await testAgentConnection(endpoint.trim(), key).finally(
+      () => setChecking(false),
+    );
+    if (!verdict.ok) {
+      setUnreachable(verdict.reason);
+      focusAddress();
+      return;
+    }
+    go("about");
+  };
+
+  if (createdId) {
+    return (
+      <MotionConfig reducedMotion="user">
+        <CreatedView name={name.trim()} />
+      </MotionConfig>
+    );
+  }
+
+  const submit = () => {
+    if (!canContinue) return;
+    // The failure is shown from the mutation's own state; nothing more to do with it here.
+    void Promise.resolve(advance()).catch(() => undefined);
+  };
+
+  return (
+    <form
+      className="flex min-h-0 flex-1 flex-col"
+      noValidate
+      /*
+       * Enter in a text field means Continue, handled here rather than left to the browser's
+       * implicit submit, because the browser does not ask whether the Enter was a real one. The
+       * Enter that confirms a character an input method is composing — Japanese, Chinese, Korean —
+       * finishes a character, not the step; WebKit sends it as a submit-worthy Enter regardless.
+       * A textarea keeps Enter for its line breaks, and the option buttons keep it for pressing.
+       */
+      onKeyDown={(event) => {
+        if (
+          event.key !== "Enter" ||
+          event.shiftKey ||
+          !(event.target instanceof HTMLInputElement)
+        ) {
+          return;
+        }
+        event.preventDefault();
+        if (!isComposing(event)) submit();
+      }}
+      onSubmit={(event) => {
+        event.preventDefault();
+        submit();
+      }}
+    >
+      <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-6 pt-8 pb-6">
+        <MotionConfig reducedMotion="user">
+          {/* Shares its layout id with the orb on the created view, so it travels there. */}
+          <motion.div className="w-fit" layoutId={ORB_LAYOUT_ID}>
+            <AgentOrb
+              size="40px"
+              state={busy ? "thinking" : named ? "listening" : "idle"}
+            />
+          </motion.div>
+
+          <motion.div
+            animate={{ opacity: 1, x: 0 }}
+            className="mt-6"
+            initial={{ opacity: 0, x: 24 * direction }}
+            key={step}
+            transition={{ duration: 0.2, ease: "easeOut" }}
+          >
+            {step === "about" ? (
+              <AboutStep
+                instructions={instructions}
+                name={name}
+                runtime={runtime ?? { kind: "builtin" }}
+                onInstructions={setInstructions}
+                onName={setName}
+                onTitle={setTitle}
+                onVisibility={setVisibility}
+                title={title}
+                visibility={visibility}
+              />
+            ) : step === "runtime" ? (
+              <RuntimeStep
+                builtInAvailable={builtInAvailable}
+                onChoose={setRuntime}
+                runtime={runtime}
+              />
+            ) : (
+              <EndpointStep
+                endpoint={endpoint}
+                endpointError={tried ? endpointIssue : unreachable}
+                harness={runtime?.kind === "managed" ? runtime.harness : null}
+                onEndpoint={(value) => {
+                  setEndpoint(value);
+                  setTried(false);
+                  setUnreachable(undefined);
+                }}
+                onKey={(value) => {
+                  setKey(value);
+                  setUnreachable(undefined);
+                }}
+                secret={key}
+              />
+            )}
+          </motion.div>
+        </MotionConfig>
+
+        {createAgent.error ? (
+          <p className="mt-6 text-destructive text-sm" role="alert">
+            {createAgent.error.message}
+          </p>
+        ) : null}
+      </div>
+
+      <SheetFooter className="flex-row justify-between border-t border-border">
+        {step === "runtime" ? (
+          <SheetClose
+            render={<Button className="px-4" size="lg" variant="ghost" />}
+          >
+            Cancel
+          </SheetClose>
+        ) : (
+          <Button
+            className="px-4"
+            disabled={busy}
+            onClick={() => go(previous())}
+            size="lg"
+            type="button"
+            variant="ghost"
+          >
+            Back
+          </Button>
+        )}
+        <Button
+          className="px-4"
+          disabled={!canContinue}
+          size="lg"
+          type="submit"
+        >
+          {checking
+            ? "Checking…"
+            : createAgent.isPending
+              ? "Creating…"
+              : step === "about"
+                ? "Create"
+                : "Continue"}
+        </Button>
+      </SheetFooter>
+    </form>
+  );
+}
+
+/** How long the created view holds before handing over to the new Bot's page. */
+const CREATED_BEAT_MS = 1600;
+/** Shorter with reduced motion: nothing is moving, so the pause is only long enough to read. */
+const CREATED_BEAT_REDUCED_MS = 900;
+const ORB_LAYOUT_ID = "new-bot-orb";
+
+/**
+ * The beat between the Bot existing and the person arriving at it.
+ *
+ * Without it the sheet vanished mid-press and a different page appeared, which read as the form
+ * being lost rather than finished. The orb that has sat in the corner of every step travels to the
+ * middle, grows, settles into its finished state with a check beside it, and the Bot is named as
+ * ready. Then the caller closes the sheet and takes the person there.
+ *
+ * It is a status, announced once, with nothing to press: closing the sheet now leaves the Bot made
+ * and on the roster, which is the same place the hand-over would have led.
+ */
+function CreatedView({ name }: { name: string }) {
+  return (
+    <div
+      aria-live="polite"
+      className="flex min-h-0 flex-1 flex-col items-center justify-center gap-6 px-6 text-center"
+      role="status"
+    >
+      <div className="relative">
+        <motion.div
+          layoutId={ORB_LAYOUT_ID}
+          transition={{ type: "spring", bounce: 0.25, duration: 0.7 }}
+        >
+          <AgentOrb size="88px" state="done" />
+        </motion.div>
+        <motion.span
+          animate={{ opacity: 1, scale: 1 }}
+          className="absolute -right-0.5 -bottom-0.5 flex size-7 items-center justify-center rounded-full bg-emerald-500 text-white ring-3 ring-popover"
+          initial={{ opacity: 0, scale: 0 }}
+          transition={{
+            delay: 0.45,
+            type: "spring",
+            bounce: 0.5,
+            duration: 0.5,
+          }}
+        >
+          <IconCheck aria-hidden className="size-4" stroke={3} />
+        </motion.span>
+      </div>
+      <motion.div
+        animate={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0, y: 8 }}
+        transition={{ delay: 0.3, duration: 0.35, ease: "easeOut" }}
+      >
+        <h2 className="break-words font-semibold text-xl tracking-tight">
+          {name} is ready
+        </h2>
+        <p className="mt-1 text-muted-foreground text-sm">Taking you to it…</p>
+      </motion.div>
+    </div>
+  );
+}
+
+type Visibility = AgentFormValues["visibility"];
+
+/** The two ways a Bot can be seen, in the words the old wizard used for them. */
+const VISIBILITY_OPTIONS: Array<{
+  value: Visibility;
+  title: string;
+  description: string;
+  icon: typeof IconLock;
+}> = [
+  {
+    value: "private",
+    title: "Private",
+    description: "Only you can see it and start channels with it.",
+    icon: IconLock,
+  },
+  {
+    value: "public",
+    title: "Public",
+    description: "Everyone in the deployment can find and use it.",
+    icon: IconUsers,
+  },
+];
+
+/**
+ * The last step: what to call it, who can see it, and — only if the person wants to be more
+ * specific — a line describing it and the instructions it follows.
+ *
+ * Title and instructions are optional and say so; who can see it always holds an answer, so a Bot
+ * named and nothing else is a complete answer, and Create waits for nothing more.
+ *
+ * The instructions field says what it is for the Bot being made. For one that runs here it is the
+ * prompt it runs on, so it is called Instructions and says how it behaves without them; for one
+ * somebody else runs it is a line added to a prompt written elsewhere, so it is called Role. The
+ * title's example is the framework's name, which is what it becomes when left blank.
+ *
+ * Who can see it was the old wizard's last step. It is here because this step had the room, and a
+ * question that does not change what is being made is cheaper answered alongside the name than as a
+ * screen of its own.
+ */
+function AboutStep({
+  name,
+  title,
+  instructions,
+  runtime,
+  visibility,
+  onName,
+  onTitle,
+  onInstructions,
+  onVisibility,
+}: {
+  name: string;
+  title: string;
+  instructions: string;
+  runtime: Runtime;
+  visibility: Visibility;
+  onName: (value: string) => void;
+  onTitle: (value: string) => void;
+  onInstructions: (value: string) => void;
+  onVisibility: (value: Visibility) => void;
+}) {
+  const runsHere = runtime.kind === "builtin";
+  return (
+    <FieldGroup>
+      <Field>
+        <FieldLabel htmlFor="new-bot-name">Name</FieldLabel>
+        <Input
+          autoComplete="off"
+          autoFocus
+          id="new-bot-name"
+          maxLength={80}
+          onChange={(event) => onName(event.target.value)}
+          placeholder="Expense Review"
+          value={name}
+        />
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="new-bot-title">
+          Title
+          <span className="font-normal text-muted-foreground">Optional</span>
+        </FieldLabel>
+        <Input
+          autoComplete="off"
+          id="new-bot-title"
+          maxLength={120}
+          onChange={(event) => onTitle(event.target.value)}
+          placeholder={runsHere ? "Finance Operations" : defaultTitle(runtime)}
+          value={title}
+        />
+        <FieldDescription>
+          A few words, shown beneath its name in lists.
+        </FieldDescription>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="new-bot-instructions">
+          {runsHere ? "Instructions" : "Role"}
+          <span className="font-normal text-muted-foreground">Optional</span>
+        </FieldLabel>
+        <Textarea
+          autoComplete="off"
+          id="new-bot-instructions"
+          maxLength={1000}
+          onChange={(event) => onInstructions(event.target.value)}
+          placeholder="Review receipts, categorize expenses, and prepare reimbursement reports."
+          rows={5}
+          value={instructions}
+        />
+        <FieldDescription>
+          {runsHere
+            ? "How it behaves in every conversation. Left blank, it helps with whatever it is asked."
+            : "Added to the agent's own instructions, in every conversation it joins."}
+        </FieldDescription>
+      </Field>
+      <FieldSet>
+        <FieldLegend variant="label">Who can see it</FieldLegend>
+        <div className="grid gap-2 sm:grid-cols-2">
+          {VISIBILITY_OPTIONS.map((option) => {
+            const Icon = option.icon;
+            return (
+              <button
+                aria-pressed={visibility === option.value}
+                className={OPTION_CLASSES}
+                key={option.value}
+                onClick={() => onVisibility(option.value)}
+                type="button"
+              >
+                <Icon className="size-5 shrink-0 text-muted-foreground" />
+                <span className="min-w-0">
+                  <span className="block font-medium text-sm">
+                    {option.title}
+                  </span>
+                  <span className="block text-pretty text-muted-foreground text-xs">
+                    {option.description}
+                  </span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </FieldSet>
+    </FieldGroup>
+  );
+}
+
+/**
+ * Filled rather than outlined, so the list reads as a set of things to pick and not as a stack of
+ * cards. The border is there but transparent until chosen, so choosing one never shifts the rows.
+ */
+const OPTION_CLASSES =
+  "flex w-full items-center gap-3 rounded-lg border border-transparent bg-muted/50 p-3 text-left transition-colors hover:bg-muted disabled:pointer-events-none disabled:opacity-50 aria-pressed:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset";
+
+/**
+ * Where it runs, answered by recognition: the Bot this deployment runs itself first, then every
+ * framework somebody might already have running.
+ *
+ * NAMES RATHER THAN TWO RADIOS. The person here 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 is theirs. A
+ * list of frameworks by name and mark is answered by finding your own.
+ *
+ * EVERY FRAMEWORK LEADS TO THE SAME PLACE. Picking Google ADK rather than CrewAI changes nothing but
+ * the default title: both ask for an AG-UI address next and are stored identically. The names are
+ * there so somebody finds theirs and knows it will work, not because the choice branches.
+ *
+ * RUN IT HERE IS THE BIG CARD, ALREADY CHOSEN. It is the answer that needs nothing set up, and most
+ * people making a Bot want exactly that, so the sheet opens with it chosen and Continue ready. The
+ * frameworks sit below at their usual size for the person who arrived with an agent of their own.
+ *
+ * A press chooses rather than advances, because the sheet has a Continue and the choice should be
+ * visible before it is confirmed.
+ *
+ * No inner scroller: the sheet's body already scrolls, and a second one inside it would give the
+ * list two scrollbars at once.
+ *
+ * The heading takes focus on arrival, so a keyboard or screen reader lands on the question rather
+ * than on the Continue it just pressed, which is still there.
+ */
+function RuntimeStep({
+  builtInAvailable,
+  runtime,
+  onChoose,
+}: {
+  /** Whether this deployment has a Bot of its own to run one here on. */
+  builtInAvailable: boolean;
+  runtime: Runtime | null;
+  onChoose: (runtime: Runtime) => void;
+}) {
+  const heading = useRef<HTMLHeadingElement>(null);
+  useEffect(() => heading.current?.focus(), []);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <h2
+        className="mb-2 break-words font-semibold text-lg tracking-tight outline-none"
+        ref={heading}
+        tabIndex={-1}
+      >
+        Where will your Bot run?
+      </h2>
+
+      <button
+        aria-pressed={runtime?.kind === "builtin"}
+        className={cn(OPTION_CLASSES, "items-start gap-4 p-5")}
+        disabled={!builtInAvailable}
+        onClick={() => onChoose({ kind: "builtin" })}
+        type="button"
+      >
+        <span className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-background shadow-xs">
+          <IconSparkles className="size-6 text-foreground" />
+        </span>
+        <span className="min-w-0 pt-0.5">
+          <span className="block font-semibold text-base">Run it here</span>
+          <span className="mt-1 block text-pretty text-muted-foreground text-sm">
+            {builtInAvailable
+              ? "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>
+
+      <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>
+
+      {WEB_HARNESSES.map((harness) => (
+        <button
+          aria-pressed={
+            runtime?.kind === "managed" && runtime.harness === harness.id
+          }
+          className={OPTION_CLASSES}
+          key={harness.id}
+          onClick={() => onChoose({ kind: "managed", harness: 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-pretty text-muted-foreground text-xs">
+              {summaryFor(harness)}
+            </span>
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * The address of an agent somebody else runs, and the key it sits behind if it has one.
+ *
+ * The framework picked on the step before is named at the top so the person can see what they are
+ * connecting, but nothing below differs by framework: every one of them is an AG-UI address and is
+ * stored the same way.
+ *
+ * The address takes focus on arrival rather than the heading, as the name does on the last step: it
+ * is the one thing this step asks for, and its label says what it is.
+ *
+ * Whether it answers is checked when Continue is pressed, by the server rather than the browser,
+ * because the server is what will dial it on every run. An agent on this machine has to be reachable
+ * from there, which is the one thing the browser cannot tell. Why it could not be reached arrives as
+ * this field's error.
+ */
+function EndpointStep({
+  harness,
+  endpoint,
+  secret,
+  endpointError,
+  onEndpoint,
+  onKey,
+}: {
+  harness: string | null;
+  endpoint: string;
+  secret: string;
+  endpointError?: string;
+  onEndpoint: (value: string) => void;
+  onKey: (value: string) => void;
+}) {
+  const chosen = WEB_HARNESSES.find((entry) => entry.id === harness);
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-3">
+        {chosen ? (
+          <span className="inline-flex w-fit items-center gap-2 rounded-lg bg-muted/50 py-1 pr-2.5 pl-1.5 text-sm">
+            <HarnessMark id={chosen.mark} name={chosen.name} />
+            {chosen.name}
+          </span>
+        ) : null}
+        <h2 className="break-words font-semibold text-lg tracking-tight">
+          Where can it be reached?
+        </h2>
+      </div>
+
+      <FieldGroup>
+        <Field data-invalid={endpointError ? true : undefined}>
+          <FieldLabel htmlFor="new-bot-endpoint">Agent address</FieldLabel>
+          <Input
+            aria-invalid={endpointError ? true : undefined}
+            autoComplete="off"
+            autoFocus
+            id="new-bot-endpoint"
+            inputMode="url"
+            onChange={(event) => onEndpoint(event.target.value)}
+            placeholder="https://your-agent.example.com/ag-ui"
+            value={endpoint}
+          />
+          {endpointError ? (
+            <FieldError
+              className="text-pretty"
+              errors={[{ message: endpointError }]}
+            />
+          ) : (
+            <FieldDescription>
+              Anything that speaks AG-UI works. This server dials your agent, so
+              an agent on your own machine has to be reachable from here.
+            </FieldDescription>
+          )}
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="new-bot-key">
+            Key
+            <span className="font-normal text-muted-foreground">Optional</span>
+          </FieldLabel>
+          <Input
+            autoComplete="off"
+            id="new-bot-key"
+            onChange={(event) => onKey(event.target.value)}
+            placeholder="Bearer …"
+            type="password"
+            value={secret}
+          />
+          <FieldDescription>
+            Sent as an <code>Authorization</code> header on every run, and kept
+            in the credential vault.
+          </FieldDescription>
+        </Field>
+      </FieldGroup>
+    </div>
+  );
+}
diff --git a/app/src/components/channels/chat-transcript.tsx b/app/src/components/channels/chat-transcript.tsx
index e4b3e0f845..94a8972d20 100644
--- a/app/src/components/channels/chat-transcript.tsx
+++ b/app/src/components/channels/chat-transcript.tsx
@@ -65,6 +65,7 @@ import { VOICE_CHAT_ACTIVITY, type VoiceChatEntry } from "@/lib/voice/archive";
 import {
   groupToolSteps,
   ToolActivity,
+  useDrawnTool,
   type TranscriptItem,
 } from "./tool-activity";
 import {
@@ -1520,6 +1521,7 @@ export function ChatTranscript({
   restoring = false,
   stopped,
 }: ChatTranscriptProps) {
+  const isDrawn = useDrawnTool();
   /*
    * NOT MEMOISED, AND THAT IS DELIBERATE. `useMemo` keyed on `messages` looks obviously right and
    * silently broke the transcript: the agent hands back the SAME array and mutates it, so the
@@ -1530,7 +1532,7 @@ export function ChatTranscript({
    * cost was markdown parsing and chart SVGs, and those are skipped by the memoised children below,
    * which is where the 25x came from. This runs per render and is not worth guarding.
    */
-  const items = groupToolSteps(toVisibleChatItems(messages));
+  const items = groupToolSteps(toVisibleChatItems(messages), isDrawn);
 
   /*
    * ONLY WHILE THERE IS NOTHING ELSE TO LOOK AT. Once a reply starts streaming, or a tool line
diff --git a/app/src/components/channels/tool-activity.tsx b/app/src/components/channels/tool-activity.tsx
index 7e772e376e..22431443b4 100644
--- a/app/src/components/channels/tool-activity.tsx
+++ b/app/src/components/channels/tool-activity.tsx
@@ -1,13 +1,16 @@
+import { CopilotKitContext } from "@copilotkit/react-core/v2/context";
 import {
   IconFileText,
   IconPlug,
   IconSearch,
+  IconTool,
   IconWorld,
 } from "@tabler/icons-react";
+import { useCallback, useContext, useMemo, useSyncExternalStore } from "react";
 import { Streamdown } from "streamdown";
 import { PendingApprovals } from "@/components/approvals/inline-approval";
 import { markdownComponents } from "@/lib/markdown";
-import { readToolName } from "@/lib/plugins/tool-name";
+import { humanise, readToolName } from "@/lib/plugins/tool-name";
 import {
   asText,
   forDisplay,
@@ -35,16 +38,20 @@ export type TranscriptItem = VisibleChatItem | ToolGroup;
  * Fold adjacent tool calls into one row, so a reply that searched, read two pages and checked Drive
  * reads as one thing the Bot did rather than four lines before the answer.
  *
- * Only calls drawn as a plain line are folded: browser steps and connector (MCP) tools. A tool the
- * app draws itself, a chart or a request for help, stays where it is, and so does a refusal that
- * asks the person to connect their own account, because a question for the person must never sit
- * behind a disclosure. A connector call on its own keeps its own line; one browser step is still a
- * group, as it always was, so the row does not change shape when the second step arrives.
+ * Only calls drawn as a plain line are folded: browser steps, connector (MCP) tools, and any other
+ * tool the app has no component for, such as an external agent's `run_command`. A tool the app draws
+ * itself, a chart or a request for help, stays where it is, and so does a refusal that asks the
+ * person to connect their own account, because a question for the person must never sit behind a
+ * disclosure. A single call on its own keeps its own line; one browser step is still a group, as it
+ * always was, so the row does not change shape when the second step arrives.
+ *
+ * `isDrawn` says which tools the app draws itself; the transcript reads it from `useDrawnTool`.
  *
  * The group takes its first step's id, so the row keeps its identity while later steps stream in.
  */
 export function groupToolSteps(
   items: readonly VisibleChatItem[],
+  isDrawn: (name: string) => boolean,
 ): TranscriptItem[] {
   const grouped: TranscriptItem[] = [];
   let run: ToolItem[] = [];
@@ -56,7 +63,7 @@ export function groupToolSteps(
     run = [];
   };
   for (const item of items) {
-    if (item.kind === "tool" && foldable(item)) {
+    if (item.kind === "tool" && foldable(item, isDrawn)) {
       run.push(item);
       continue;
     }
@@ -67,12 +74,44 @@ export function groupToolSteps(
   return grouped;
 }
 
-function foldable(item: ToolItem): boolean {
+function foldable(item: ToolItem, isDrawn: (name: string) => boolean): boolean {
   if (isBrowserStep(item)) return true;
-  if (!item.toolCall.function.name.startsWith("mcp__")) return false;
+  const name = item.toolCall.function.name;
+  if (!name.startsWith("mcp__") && isDrawn(name)) return false;
   return !asksThePerson(item.result);
 }
 
+const NOTHING_DRAWN: readonly { name: string }[] = [];
+
+/**
+ * Whether the app draws a tool itself, read from CopilotKit's own renderer registry.
+ *
+ * Read from the registry rather than kept as a list here, because every `useRenderTool` and
+ * `useFrontendTool` already registers its name there, and a list would fall behind the first tool
+ * added without it. Taken from the context directly, not through `useCopilotKit`, because that
+ * throws outside a provider and the transcript is drawn without one in places. With no provider
+ * nothing is drawn. A `*` renderer draws every tool it is asked about, so nothing outside MCP folds.
+ */
+export function useDrawnTool(): (name: string) => boolean {
+  const copilotkit = useContext(CopilotKitContext)?.copilotkit;
+  const subscribe = useCallback(
+    (onChange: () => void) =>
+      copilotkit
+        ? copilotkit.subscribe({ onRenderToolCallsChanged: onChange })
+            .unsubscribe
+        : () => {},
+    [copilotkit],
+  );
+  const renderers = useSyncExternalStore(
+    subscribe,
+    () => copilotkit?.renderToolCalls ?? NOTHING_DRAWN,
+  );
+  return useMemo(() => {
+    const names = new Set(renderers.map((renderer) => renderer.name));
+    return names.has("*") ? () => true : (name) => names.has(name);
+  }, [renderers]);
+}
+
 /**
  * Whether this refusal is a question for the person rather than a line about what a Bot did.
  *
@@ -88,7 +127,7 @@ function asksThePerson(result: string | undefined): boolean {
   return readTeamBotConsent(body) !== null || readConnectPrompt(body) !== null;
 }
 
-type StepKind = "search" | "fetch" | "browser" | "connector";
+type StepKind = "search" | "fetch" | "browser" | "connector" | "tool";
 
 export type StepDetails = {
   id: string;
@@ -186,22 +225,26 @@ export function stepDetails(step: ToolItem): StepDetails {
   }
 
   const name = step.toolCall.function.name;
-  const [, server = "", ...rest] = name.split("__");
-  const role = researchRoleOfTool(server, rest.join("__"));
-  const { label, detail } = readToolName(name);
   const answer = step.result === undefined ? undefined : asText(step.result);
   const refused = answer?.startsWith(REFUSAL_MARKER) ?? false;
   const body = refused ? answer?.slice(REFUSAL_MARKER.length).trim() : answer;
-  const urls = role === "fetch" ? urlsOf(args) : [];
-  const base = {
+  const outcome = {
     id: step.id,
-    label,
     pending: step.result === undefined,
     failed: !refused && toolResultFailed(step.result),
     refused,
     inputs,
     ...(body ? { output: body } : {}),
   };
+  // Not a connector: a tool an external agent runs itself. Named in words, never as an identifier.
+  if (!name.startsWith("mcp__"))
+    return { ...outcome, kind: "tool", label: humanise(name), pages: 0 };
+
+  const [, server = "", ...rest] = name.split("__");
+  const role = researchRoleOfTool(server, rest.join("__"));
+  const { label, detail } = readToolName(name);
+  const urls = role === "fetch" ? urlsOf(args) : [];
+  const base = { ...outcome, label };
   if (role === "search") {
     const query = firstString(
       args.query,
@@ -276,6 +319,8 @@ export function summarise(steps: readonly StepDetails[]): string {
     phrases.push(
       `used ${plural(connectors.length, "connector", "connectors")}`,
     );
+  const tools = of("tool").length;
+  if (tools) phrases.push(`used ${plural(tools, "tool", "tools")}`);
   const sentence = joinPhrases(phrases);
   return sentence.charAt(0).toUpperCase() + sentence.slice(1);
 }
@@ -285,6 +330,7 @@ const KIND_ICONS = {
   fetch: IconFileText,
   browser: IconWorld,
   connector: IconPlug,
+  tool: IconTool,
 } as const;
 
 function StepIcon({
diff --git a/app/src/components/onboarding/illustration-frame.tsx b/app/src/components/onboarding/illustration-frame.tsx
new file mode 100644
index 0000000000..42410fe6e4
--- /dev/null
+++ b/app/src/components/onboarding/illustration-frame.tsx
@@ -0,0 +1,38 @@
+import type * as React from "react";
+
+/**
+ * The muted frame every picture in onboarding sits in, the same one the computer illustration has.
+ *
+ * Without it a picture of a composer or of Bot cards reads as the real thing, and people click it
+ * and nothing happens. The frame says "this is an illustration" before anybody tries.
+ *
+ * NOTHING INSIDE IS REACHABLE, BY ANY ROUTE. `pointer-events-none` stops the mouse but not the
+ * keyboard: the composer drawn on the Welcome slide still put its editor, Dictate and Send in the Tab
+ * order, and a screen reader announced an editable message box. `inert` takes the whole subtree out
+ * of focus and out of the accessibility tree, and the outer `role="img"` with its label is what is
+ * read in its place: one picture, described once.
+ *
+ * The label sits on a wrapper rather than on the inert element because an inert element is removed
+ * from the accessibility tree along with everything in it, its own name included.
+ */
+export function IllustrationFrame({
+  label,
+  children,
+  className = "",
+}: {
+  /** What the picture shows, read in place of the controls drawn inside it. */
+  label: string;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div aria-label={label} className="w-full max-w-lg" role="img">
+      <div
+        className={`pointer-events-none select-none rounded-2xl border border-border bg-muted/60 ${className}`}
+        inert
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/app/src/components/onboarding/laptop-illustration.tsx b/app/src/components/onboarding/laptop-illustration.tsx
new file mode 100644
index 0000000000..cd648a6e94
--- /dev/null
+++ b/app/src/components/onboarding/laptop-illustration.tsx
@@ -0,0 +1,46 @@
+import { motion, useReducedMotion } from "motion/react";
+import AgentOrb from "@/components/agents/orb/agent-orb";
+import { appConfig } from "@/lib/generated/application-config";
+
+/**
+ * A laptop whose lid swings open, then whose screen lights up with the product: the orb the Welcome
+ * slide opens on, and the product's name from the brand config, so a white-label build shows its own.
+ *
+ * Drawn here rather than loaded: a local install should not fetch artwork from somebody else's
+ * server to say its data stays home. There is no logo file to use instead, so the orb stands in.
+ *
+ * The lid starts tilted back on mount and the screen fades in after it, so it plays each time the
+ * slide arrives. Somebody who asks for reduced motion gets the laptop already open.
+ */
+export function LaptopIllustration() {
+  const reduceMotion = useReducedMotion();
+  return (
+    <div className="mx-auto w-64 perspective-distant">
+      <motion.div
+        animate={{ rotateX: 0 }}
+        className="mx-auto h-32 w-[90%] rounded-t-lg bg-neutral-100 p-1 shadow-sm ring-1 shadow-black/10 ring-black/10 dark:bg-neutral-800 dark:shadow-white/5 dark:ring-white/10"
+        initial={reduceMotion ? false : { rotateX: -60 }}
+        style={{ transformOrigin: "center bottom" }}
+        transition={{ delay: 0.35, duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
+      >
+        <div className="relative h-full w-full overflow-hidden rounded-t rounded-b-sm bg-white dark:bg-neutral-900">
+          <div className="absolute inset-x-0 top-1 mx-auto h-2 w-7 rounded-full bg-black" />
+          <motion.div
+            animate={{ opacity: 1, filter: "blur(0px)" }}
+            className="flex h-full flex-col items-center justify-center gap-2 pt-2"
+            initial={reduceMotion ? false : { opacity: 0, filter: "blur(8px)" }}
+            transition={{ delay: 1, duration: 0.6 }}
+          >
+            <AgentOrb size="44px" />
+            <span className="text-xs font-semibold tracking-tight">
+              {appConfig.brand.productName}
+            </span>
+          </motion.div>
+        </div>
+      </motion.div>
+      <div className="relative h-3 w-full rounded-t-md rounded-b-3xl bg-linear-to-b from-neutral-100 to-neutral-300 shadow-[0px_1px_0px_0px_var(--color-neutral-200)_inset] dark:from-neutral-700 dark:to-neutral-900 dark:shadow-[0px_1px_0px_0px_var(--color-neutral-600)_inset]">
+        <div className="absolute inset-x-0 top-0 mx-auto h-1.5 w-10 rounded-b-sm bg-neutral-400 shadow-[0px_-1px_0px_0px_var(--color-neutral-300)_inset] dark:bg-neutral-600 dark:shadow-[0px_-1px_0px_0px_var(--color-neutral-500)_inset]" />
+      </div>
+    </div>
+  );
+}
diff --git a/app/src/components/onboarding/organization-flow.tsx b/app/src/components/onboarding/organization-flow.tsx
new file mode 100644
index 0000000000..37014dbd1e
--- /dev/null
+++ b/app/src/components/onboarding/organization-flow.tsx
@@ -0,0 +1,157 @@
+import {
+  IconBrandGoogle,
+  IconBrandWindows,
+  IconKey,
+  IconListCheck,
+  IconRobot,
+  IconShieldCheck,
+} from "@tabler/icons-react";
+import { useReducedMotion } from "motion/react";
+import AgentOrb from "@/components/agents/orb/agent-orb";
+
+/*
+ * Drawn on one fixed grid so the connectors and the pills always meet: the SVG and the pills share
+ * the same coordinate box, and each pill is centred on the point its line ends at.
+ */
+const WIDTH = 360;
+const HEIGHT = 210;
+const HUB = { x: WIDTH / 2, y: HEIGHT / 2 };
+const COLUMNS = [60, WIDTH / 2, WIDTH - 60];
+const TOP_Y = 18;
+const BOTTOM_Y = HEIGHT - 18;
+
+type Node = {
+  label: string;
+  icon: typeof IconKey;
+  /** Tailwind classes for the small square behind the icon. */
+  tone: string;
+};
+
+/** Who signs in: the identity providers the slide's sentence names. Okta has no glyph, so a key. */
+const SIGN_IN: Node[] = [
+  {
+    label: "Google",
+    icon: IconBrandGoogle,
+    tone: "bg-sky-500/15 text-sky-600 dark:text-sky-400",
+  },
+  {
+    label: "Microsoft",
+    icon: IconBrandWindows,
+    tone: "bg-blue-500/15 text-blue-600 dark:text-blue-400",
+  },
+  {
+    label: "Okta",
+    icon: IconKey,
+    tone: "bg-indigo-500/15 text-indigo-600 dark:text-indigo-400",
+  },
+];
+
+/** What an organization gets once its people are in. */
+const OUTCOMES: Node[] = [
+  {
+    label: "Your rules",
+    icon: IconShieldCheck,
+    tone: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
+  },
+  {
+    label: "Team Bots",
+    icon: IconRobot,
+    tone: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
+  },
+  {
+    label: "Audit trail",
+    icon: IconListCheck,
+    tone: "bg-violet-500/15 text-violet-600 dark:text-violet-400",
+  },
+];
+
+/** A gentle S-curve from a pill into the hub's top edge, or out of its bottom edge. */
+function inbound(x: number) {
+  return `M ${x} ${TOP_Y + 12} C ${x} ${TOP_Y + 52}, ${HUB.x} ${HUB.y - 62}, ${HUB.x} ${HUB.y - 22}`;
+}
+function outbound(x: number) {
+  return `M ${HUB.x} ${HUB.y + 22} C ${HUB.x} ${HUB.y + 62}, ${x} ${BOTTOM_Y - 52}, ${x} ${BOTTOM_Y - 12}`;
+}
+
+function Pill({ node, x, y }: { node: Node; x: number; y: number }) {
+  const Icon = node.icon;
+  return (
+    <div
+      className="absolute flex -translate-x-1/2 -translate-y-1/2 items-center gap-1.5 whitespace-nowrap rounded-full border border-border bg-card py-1 pr-2.5 pl-1 text-xs shadow-xs"
+      style={{ left: x, top: y }}
+    >
+      <span
+        className={`flex size-5 items-center justify-center rounded-full ${node.tone}`}
+      >
+        <Icon aria-hidden className="size-3" stroke={2} />
+      </span>
+      {node.label}
+    </div>
+  );
+}
+
+/**
+ * How OpenBot sits inside an organization: its people sign in through the organization's own
+ * identity provider, and what comes out is its own rules, its own Bots and a record of every action.
+ *
+ * Built here from Tailwind and SVG, in the visual language of node-and-connector diagrams, rather
+ * than copied from a commercial illustration set. A dot runs each connector into and out of the hub;
+ * somebody who asks for reduced motion gets the diagram still.
+ */
+export function OrganizationFlow() {
+  const reduceMotion = useReducedMotion();
+  const paths = [...COLUMNS.map(inbound), ...COLUMNS.map(outbound)];
+  return (
+    <div className="relative mx-auto" style={{ width: WIDTH, height: HEIGHT }}>
+      <svg
+        aria-hidden
+        className="absolute inset-0 text-border"
+        fill="none"
+        height={HEIGHT}
+        viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
+        width={WIDTH}
+      >
+        {paths.map((d) => (
+          <path d={d} key={d} stroke="currentColor" strokeWidth={1.25} />
+        ))}
+        {reduceMotion
+          ? null
+          : paths.map((d, index) => (
+              <circle
+                className="fill-muted-foreground/60"
+                key={`dot-${d}`}
+                r={2}
+              >
+                {/* Inbound dots first, outbound after, so the flow reads top to bottom. */}
+                <animateMotion
+                  begin={`${(index % 3) * 0.4 + (index < 3 ? 0 : 1.2)}s`}
+                  dur="2.4s"
+                  path={d}
+                  repeatCount="indefinite"
+                />
+              </circle>
+            ))}
+      </svg>
+
+      {SIGN_IN.map((node, index) => (
+        <Pill key={node.label} node={node} x={COLUMNS[index] ?? 0} y={TOP_Y} />
+      ))}
+
+      <div
+        className="absolute flex size-11 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-card shadow-xs"
+        style={{ left: HUB.x, top: HUB.y }}
+      >
+        <AgentOrb size="28px" />
+      </div>
+
+      {OUTCOMES.map((node, index) => (
+        <Pill
+          key={node.label}
+          node={node}
+          x={COLUMNS[index] ?? 0}
+          y={BOTTOM_Y}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/app/src/components/ui/sheet.tsx b/app/src/components/ui/sheet.tsx
index b2a861c84e..5e208f46e8 100644
--- a/app/src/components/ui/sheet.tsx
+++ b/app/src/components/ui/sheet.tsx
@@ -34,14 +34,25 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
   );
 }
 
+/**
+ * Floats the sheet a few pixels in from the screen's edges, with its own border and rounded corners,
+ * instead of running flush to them. Every rule is keyed on both `data-side` and `data-variant`, so it
+ * outranks the single-attribute edge rules above it whatever order Tailwind writes them in.
+ */
+const INSET_CLASSES =
+  "data-[variant=inset]:rounded-xl data-[variant=inset]:border data-[side=right]:data-[variant=inset]:inset-y-2 data-[side=right]:data-[variant=inset]:right-2 data-[side=right]:data-[variant=inset]:h-auto data-[side=left]:data-[variant=inset]:inset-y-2 data-[side=left]:data-[variant=inset]:left-2 data-[side=left]:data-[variant=inset]:h-auto data-[side=top]:data-[variant=inset]:inset-x-2 data-[side=top]:data-[variant=inset]:top-2 data-[side=bottom]:data-[variant=inset]:inset-x-2 data-[side=bottom]:data-[variant=inset]:bottom-2";
+
 function SheetContent({
   className,
   children,
   side = "right",
+  variant = "default",
   showCloseButton = true,
   ...props
 }: SheetPrimitive.Popup.Props & {
   side?: "top" | "right" | "bottom" | "left";
+  /** `inset` floats the sheet in from the edges; `default` runs it flush to them. */
+  variant?: "default" | "inset";
   showCloseButton?: boolean;
 }) {
   return (
@@ -50,8 +61,10 @@ function SheetContent({
       <SheetPrimitive.Popup
         data-slot="sheet-content"
         data-side={side}
+        data-variant={variant}
         className={cn(
           "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          INSET_CLASSES,
           className,
         )}
         {...props}
diff --git a/app/src/lib/deployment/queries.ts b/app/src/lib/deployment/queries.ts
index 7e96876875..d50eb949d7 100644
--- a/app/src/lib/deployment/queries.ts
+++ b/app/src/lib/deployment/queries.ts
@@ -24,6 +24,11 @@ export type DeploymentCapabilities = {
    * for a deployment on a paid Intelligence plan.
    */
   selfHostBanner: boolean;
+  /**
+   * Whether this is somebody trying OpenBot on their own machine rather than an organization's
+   * deployment: single-user mode on the server, which only a local, unreachable install can be in.
+   */
+  localEvaluation: boolean;
   transcription?: boolean;
   voice?: boolean;
 };
@@ -62,6 +67,7 @@ export function deploymentCapabilitiesQueryOptions() {
       ).json()) as {
         generativeUi?: boolean;
         selfHostBanner?: boolean;
+        localEvaluation?: boolean;
         transcription?: boolean;
         voice?: boolean;
       };
@@ -69,6 +75,7 @@ export function deploymentCapabilitiesQueryOptions() {
       return {
         generativeUi: body.generativeUi === true,
         selfHostBanner: body.selfHostBanner === true,
+        localEvaluation: body.localEvaluation === true,
         transcription: body.transcription === true,
         voice: body.voice === true,
       };
diff --git a/app/src/lib/plugins/tool-name.ts b/app/src/lib/plugins/tool-name.ts
index c39d7b10b9..b7306abbbb 100644
--- a/app/src/lib/plugins/tool-name.ts
+++ b/app/src/lib/plugins/tool-name.ts
@@ -114,7 +114,7 @@ function singular(word: string): string {
  * is that the first word is a verb. Splitting on both and sentence-casing the result gets a phrase
  * that reads as an action without anybody maintaining a table of names.
  */
-function humanise(tool: string): string {
+export function humanise(tool: string): string {
   const words = wordsOf(tool).join(" ");
   if (words.length === 0) return tool;
   return words.charAt(0).toUpperCase() + words.slice(1);
diff --git a/app/src/routes/_authed/_app/bots.index.tsx b/app/src/routes/_authed/_app/bots.index.tsx
index 9aa7a74b4e..e27fd9f506 100644
--- a/app/src/routes/_authed/_app/bots.index.tsx
+++ b/app/src/routes/_authed/_app/bots.index.tsx
@@ -1,11 +1,14 @@
 import { IconPlus } from "@tabler/icons-react";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { z } from "zod";
-import { CreateAgentDialog } from "@/components/agents/create-agent-dialog";
+import { NewBotSheet } from "@/components/agents/new-bot-sheet";
 import { BotRoster } from "@/components/bots/bot-roster";
 import { PageShell } from "@/components/layout/page-shell";
 import { Button } from "@/components/ui/button";
 
+/** Just longer than the sheet's 200ms exit, so it has finished sliding away before the page changes. */
+const SHEET_CLOSE_MS = 240;
+
 /** Creating a Bot is a search-parameter state, so the roster stays mounted and Back closes it. */
 export const Route = createFileRoute("/_authed/_app/bots/")({
   validateSearch: z.object({ new: z.boolean().optional() }),
@@ -33,15 +36,25 @@ function BotsPage() {
       title="Bots"
     >
       <BotRoster />
-      <CreateAgentDialog
+      <NewBotSheet
         onClose={() => void navigate({ search: {} })}
-        onCreated={(agentId) =>
-          void navigate({
-            params: { agentId },
-            search: {},
-            to: "/bots/$agentId",
-          })
-        }
+        onCreated={(agentId) => {
+          /*
+           * Close first, then go. Navigating straight to the Bot unmounted this page with the sheet
+           * still on it, so it vanished instead of sliding away. Replacing the `?new` entry means Back
+           * from the new Bot lands on the roster, not on an empty sheet.
+           */
+          void navigate({ replace: true, search: {} });
+          window.setTimeout(
+            () =>
+              void navigate({
+                params: { agentId },
+                search: {},
+                to: "/bots/$agentId",
+              }),
+            SHEET_CLOSE_MS,
+          );
+        }}
         open={creating === true}
       />
     </PageShell>
diff --git a/app/src/routes/_authed/onboarding.tsx b/app/src/routes/_authed/onboarding.tsx
index e1d58b98b3..48645e540d 100644
--- a/app/src/routes/_authed/onboarding.tsx
+++ b/app/src/routes/_authed/onboarding.tsx
@@ -1,18 +1,26 @@
+import { WEB_HARNESSES } from "@openbot/shared/harnesses";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router";
 import Avatar from "boring-avatars";
 import { AnimatePresence, MotionConfig, motion } from "motion/react";
 import * as React from "react";
 import useMeasure from "react-use-measure";
+import { HarnessMark } from "@/components/agents/harness-mark";
 import AgentOrb from "@/components/agents/orb/agent-orb";
 import { Composer } from "@/components/channels/composer";
 import { DesktopIllustration } from "@/components/computer/desktop-illustration";
 import { ComputerPlaceholder } from "@/components/computer/placeholder";
-import { Button } from "@/components/ui/button";
+import { SELF_HOST_URL } from "@/components/layout/self-host-banner";
+import { IllustrationFrame } from "@/components/onboarding/illustration-frame";
+import { LaptopIllustration } from "@/components/onboarding/laptop-illustration";
+import { OrganizationFlow } from "@/components/onboarding/organization-flow";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { type AgentProfile, agentListQueryOptions } from "@/lib/agents/queries";
 import { currentUserQueryOptions, needsOnboarding } from "@/lib/auth/queries";
+import { deploymentCapabilitiesQueryOptions } from "@/lib/deployment/queries";
 import { appConfig } from "@/lib/generated/application-config";
 import { completeOnboardingMutationOptions } from "@/lib/onboarding/mutations";
+import { cn } from "@/lib/utils";
 import { queryClient } from "@/query-client";
 
 export const Route = createFileRoute("/_authed/onboarding")({
@@ -34,31 +42,37 @@ function WelcomeStep() {
       <h1 className="text-3xl font-semibold tracking-tight max-w-md text-center">
         Welcome to {appConfig.brand.productName}
       </h1>
-      <div className="h-32" />
-      <AgentOrb size="72px" />
-      {/*
-       * A POSTER OF A COMPOSER, AND `pointer-events-none` IS WHAT MAKES IT ONE. Nothing here is
-       * meant to be typed in, clicked or dropped on: it is a picture of the thing the person is
-       * about to get, shown while they read a sentence about it.
-       *
-       * THE DROP THAT PASSES STRAIGHT THROUGH IT IS SOMEBODY ELSE'S TO CATCH, WHICH IS WORTH
-       * SAYING OUT LOUD. The composer guards its own form against a dropped file navigating the
-       * whole app away (`refuseDragOver` in `composer.tsx`), and that guard cannot fire here: an
-       * element with no pointer events is never the target of the drop, so the event goes past it
-       * to the document as if this composer were not on the page. What catches it is
-       * `useUnclaimedDropGuard` in `routes/__root.tsx`, which refuses every drop nobody claimed —
-       * the reason that guard lives at the root rather than in the composer, and the reason this
-       * wrapper does not need to change to be safe. Taking `pointer-events-none` off to "fix" the
-       * drop would turn the poster back into a live composer with nowhere to upload to.
-       */}
-      <div className="max-w-md w-full mx-auto pointer-events-none mt-10">
-        <Composer
-          compact
-          className="scale-90"
-          editorClassName="text-base"
-          initialValue="Hand off tasks to your team of agents"
-        />
-      </div>
+      <div className="h-8" />
+      <IllustrationFrame
+        className="flex flex-col items-center px-8 pt-16 pb-10"
+        label="A message box where you hand off tasks to your agents"
+      >
+        <AgentOrb size="72px" />
+        {/*
+         * A POSTER OF A COMPOSER, AND THE FRAME AROUND IT IS WHAT MAKES IT ONE: `IllustrationFrame` is
+         * `pointer-events-none` and `inert`. Nothing here is
+         * meant to be typed in, clicked or dropped on: it is a picture of the thing the person is
+         * about to get, shown while they read a sentence about it.
+         *
+         * THE DROP THAT PASSES STRAIGHT THROUGH IT IS SOMEBODY ELSE'S TO CATCH, WHICH IS WORTH
+         * SAYING OUT LOUD. The composer guards its own form against a dropped file navigating the
+         * whole app away (`refuseDragOver` in `composer.tsx`), and that guard cannot fire here: an
+         * element with no pointer events is never the target of the drop, so the event goes past it
+         * to the document as if this composer were not on the page. What catches it is
+         * `useUnclaimedDropGuard` in `routes/__root.tsx`, which refuses every drop nobody claimed —
+         * the reason that guard lives at the root rather than in the composer, and the reason this
+         * wrapper does not need to change to be safe. Taking `pointer-events-none` off to "fix" the
+         * drop would turn the poster back into a live composer with nowhere to upload to.
+         */}
+        <div className="max-w-md w-full mx-auto mt-10">
+          <Composer
+            compact
+            className="scale-90"
+            editorClassName="text-base"
+            initialValue="Hand off tasks to your team of agents"
+          />
+        </div>
+      </IllustrationFrame>
     </div>
   );
 }
@@ -119,7 +133,10 @@ function RosterStep() {
         Choose from a variety of agents or create your own
       </h1>
       <div className="h-8" />
-      <div className="w-full max-w-lg overflow-hidden grid grid-cols-1 md:grid-cols-2 gap-4">
+      <IllustrationFrame
+        className="grid grid-cols-1 md:grid-cols-2 gap-4 p-6"
+        label={`Bots you can work with, such as ${roster.map((a) => a.name).join(", ")}, and one of your own`}
+      >
         {roster.map((a) => {
           return (
             <div
@@ -145,7 +162,105 @@ function RosterStep() {
             Your own agent
           </h3>
         </div>
-      </div>
+      </IllustrationFrame>
+    </div>
+  );
+}
+
+/*
+ * THE THREE SLIDES BELOW ARE FOR SOMEBODY TRYING OPENBOT ON THEIR OWN MACHINE, and only they see them
+ * (see `localEvaluation` in RouteComponent). They answer what that person is deciding: where their
+ * data is, whether their own agents fit, and what taking it to their organization involves (OB-02 in
+ * the product backlog). None of it is said to an organization's own people, who are past all three.
+ */
+
+function LocalStep() {
+  return (
+    <div className="w-full flex flex-col items-center justify-center">
+      <h1 className="text-3xl font-semibold tracking-tight max-w-md text-center">
+        It runs on your machine
+      </h1>
+      {/*
+       * "Stored", and the model named, because "your data never leaves" would be untrue: every turn
+       * goes to the model provider this install was set up with. What stays is everything kept. No
+       * word about sign-in either: activating a local install signs you in to CopilotKit.
+       */}
+      <p className="mt-3 max-w-md text-center text-muted-foreground">
+        Your conversations, files and Bots are stored on this computer. Only
+        what you send to your model leaves it.
+      </p>
+      <div className="h-8" />
+      <IllustrationFrame
+        className="flex items-center justify-center px-8 py-12"
+        label={`A laptop running ${appConfig.brand.productName}`}
+      >
+        <LaptopIllustration />
+      </IllustrationFrame>
+    </div>
+  );
+}
+
+/** Every framework the New Bot wizard offers by name; "an agent you already run" is the sentence. */
+const FRAMEWORKS = WEB_HARNESSES.filter((harness) => harness.id !== "byo-url");
+
+function AgentsStep() {
+  return (
+    <div className="w-full flex flex-col items-center justify-center">
+      <h1 className="text-3xl font-semibold tracking-tight max-w-md text-center">
+        Bring the agents you already have
+      </h1>
+      <p className="mt-3 max-w-md text-center text-muted-foreground">
+        Any agent that speaks AG-UI joins as a Bot. Add one any time from Bots,
+        then New Bot.
+      </p>
+      <div className="h-8" />
+      <IllustrationFrame
+        className="flex flex-wrap justify-center gap-2 p-6"
+        label={`Frameworks that work as Bots: ${FRAMEWORKS.map((harness) => harness.name).join(", ")}`}
+      >
+        {FRAMEWORKS.map((harness) => (
+          <span
+            className="flex items-center gap-2 rounded-full bg-card px-3 py-1.5 text-sm"
+            key={harness.id}
+          >
+            <HarnessMark id={harness.mark} name={harness.name} />
+            {harness.name}
+          </span>
+        ))}
+      </IllustrationFrame>
+    </div>
+  );
+}
+
+function OrganizationStep() {
+  return (
+    <div className="w-full flex flex-col items-center justify-center">
+      <h1 className="text-3xl font-semibold tracking-tight max-w-md text-center">
+        Deploy it for your organization
+      </h1>
+      <p className="mt-3 max-w-md text-center text-muted-foreground">
+        One container image, or a Helm chart for EKS, GKE and AKS, with sign-in
+        through Google, Microsoft or Okta.
+      </p>
+      <div className="h-8" />
+      <IllustrationFrame
+        className="flex justify-center px-6 py-8"
+        label="Your people sign in with Google, Microsoft or Okta, and your organization gets its own rules, its own Bots and an audit trail"
+      >
+        <OrganizationFlow />
+      </IllustrationFrame>
+      {/*
+       * The one real control on these slides, so it sits outside the frame: a frame means picture.
+       * A new tab, because following it must not cost this person their place in onboarding.
+       */}
+      <a
+        className={cn(buttonVariants({ variant: "outline" }), "mt-6")}
+        href={SELF_HOST_URL}
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        Talk to an engineer
+      </a>
     </div>
   );
 }
@@ -174,7 +289,26 @@ function RouteComponent() {
   const [leaving, setLeaving] = React.useState(false);
   const [ref, bounds] = useMeasure();
 
-  const last = step === STEPS.length - 1;
+  /*
+   * The last three slides are for somebody evaluating OpenBot locally, never for an organization's people:
+   * the server says single-user mode, which an organization's deployment, always behind sign-in,
+   * cannot be in. Until the answer arrives they are left out, so a slow or failed request never
+   * shows an organization's employees a page about deploying OpenBot themselves.
+   *
+   * NOT GATED ON `selfHostBanner` AS WELL. That flag is off for any deployment with a paid
+   * Intelligence entitlement, and the stack `copilotkit local` installs runs on an enterprise
+   * evaluation licence, so every CLI evaluator, the person these slides are for, would never see them.
+   */
+  const { data: capabilities } = useQuery(deploymentCapabilitiesQueryOptions());
+  const steps = capabilities?.localEvaluation
+    ? [
+        ...STEPS,
+        () => <LocalStep />,
+        () => <AgentsStep />,
+        () => <OrganizationStep />,
+      ]
+    : STEPS;
+  const last = step === steps.length - 1;
 
   const go = (to: number) => {
     setDirection(to > step ? 1 : -1);
@@ -218,7 +352,7 @@ function RouteComponent() {
                   key={step}
                   variants={variants}
                 >
-                  {STEPS[step]()}
+                  {steps[step]?.()}
                 </motion.div>
               </AnimatePresence>
 
diff --git a/app/tests/approvals-rules.test.tsx b/app/tests/approvals-rules.test.tsx
index 3b55210089..a4f3833c9c 100644
--- a/app/tests/approvals-rules.test.tsx
+++ b/app/tests/approvals-rules.test.tsx
@@ -415,6 +415,8 @@ test("in the real transcript shape a waiting click is folded into browser activi
         content: '{"ok":true,"url":"https://httpbin.org/forms/post"}',
       },
     ] as never),
+    // Browser steps fold whatever the app draws, so nothing else needs naming here.
+    () => false,
   );
   const group = items.find((item) => item.kind === "tools");
   if (group?.kind !== "tools") throw new Error("no tool group");
diff --git a/app/tests/browser-activity.test.ts b/app/tests/browser-activity.test.ts
index 8b6ea5852e..b9a093e0e7 100644
--- a/app/tests/browser-activity.test.ts
+++ b/app/tests/browser-activity.test.ts
@@ -20,14 +20,20 @@ function step(
   };
 }
 
+// The computer tools the app draws itself, as CopilotKit's renderer registry would list them.
+const drawn = (name: string) =>
+  name.startsWith("computer_request_") || name === "computer_run_command";
+
 test("navigation and intervening browser actions become one stable row as results stream", () => {
   const first = step("one");
   const items = [first, step("read", "computer_read"), step("two")];
-  const grouped = groupToolSteps(items);
+  const grouped = groupToolSteps(items, drawn);
   expect(grouped).toEqual([{ kind: "tools", id: "one", steps: items }]);
   expect(
-    groupToolSteps([{ ...first, result: '{"ok":true}' }, ...items.slice(1)])[0]
-      ?.id,
+    groupToolSteps(
+      [{ ...first, result: '{"ok":true}' }, ...items.slice(1)],
+      drawn,
+    )[0]?.id,
   ).toBe("one");
   expect(items).toHaveLength(3);
 });
@@ -46,7 +52,7 @@ test("grouping keeps messages, other tools, and human assistance requests in the
     step("shell", "computer_run_command"),
   ];
   for (const boundary of boundaries) {
-    const grouped = groupToolSteps([step("one"), boundary, step("two")]);
+    const grouped = groupToolSteps([step("one"), boundary, step("two")], drawn);
     expect(grouped.map((item) => item.id)).toEqual(["one", boundary.id, "two"]);
     expect(grouped[1]).toBe(boundary);
   }
diff --git a/app/tests/composing-enter.test.tsx b/app/tests/composing-enter.test.tsx
index ab272d8c24..803a624969 100644
--- a/app/tests/composing-enter.test.tsx
+++ b/app/tests/composing-enter.test.tsx
@@ -17,8 +17,8 @@ import {
 import { act, cleanup, fireEvent, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { ComponentType, ReactNode } from "react";
+import { NewBotSheet } from "@/components/agents/new-bot-sheet";
 import { SetupSections } from "@/components/bot-profile/setup";
-import { CreateAgentDialog } from "@/components/agents/create-agent-dialog";
 import { type AgentProfile, agentKeys } from "@/lib/agents/queries";
 import { computerKeys } from "@/lib/computers/queries";
 import { Route as BoundariesRoute } from "@/routes/_authed/admin/boundaries";
@@ -31,7 +31,7 @@ import { Route as BoundariesRoute } from "@/routes/_authed/admin/boundaries";
  * Chromium marks it `isComposing`, and WebKit sends it after `compositionend` with the key code 229.
  * The chat composer already skips it: `prompt-area` checks `isComposing` on every Enter it handles.
  * Three text fields in the app acted on it instead, each with a text field's text still unconfirmed:
- * a coworker's name saved in place, the new-coworker wizard moving on to its next step, and a
+ * a coworker's name saved in place, the New Bot sheet moving on to its next step, and a
  * boundary rule saved into the policy in force.
  *
  * THE HARNESS IS THIS REPOSITORY'S: `GlobalRegistrator` in `beforeAll`/`afterAll`, `cleanup` in
@@ -164,26 +164,28 @@ test("a coworker's name is not saved by the Enter that confirms a composed chara
   expect(writes[0]?.body).toMatchObject({ name: "経費" });
 });
 
-test("the new-coworker wizard does not move on from the Enter that confirms a composed character", async () => {
+test("the New Bot sheet does not create from the Enter that confirms a composed character", async () => {
   const view = draw(
-    <CreateAgentDialog onClose={() => {}} onCreated={() => {}} open />,
+    <NewBotSheet onClose={() => {}} onCreated={() => {}} open />,
   );
 
+  // Run it here is chosen when the sheet opens, so Continue goes straight to the name.
+  await act(async () => {
+    fireEvent.click(await view.findByRole("button", { name: "Continue" }));
+  });
   const name = await view.findByLabelText("Name");
   await type(name, "経費");
-  await type(view.getByLabelText("Title"), "Finance Operations");
-  await type(view.getByLabelText("What it does"), "Review receipts.");
 
   await confirmComposedCharacter(name);
   await settle();
-  // 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();
+  expect(writes.map((write) => write.request)).toEqual([]);
 
-  // An ordinary Enter still means Continue.
+  // An ordinary Enter still means Create.
   await act(async () => {
     fireEvent.keyDown(name, { key: "Enter", keyCode: 13 });
   });
-  expect(await view.findByText("Where does it run?")).toBeTruthy();
+  await settle();
+  expect(writes.map((write) => write.request)).toEqual(["POST /api/agents"]);
 });
 
 test("a boundary rule is not saved by the Enter that confirms a composed character", async () => {
diff --git a/app/tests/create-agent-endpoint.test.tsx b/app/tests/create-agent-endpoint.test.tsx
deleted file mode 100644
index 1b59e41b73..0000000000
--- a/app/tests/create-agent-endpoint.test.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-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
deleted file mode 100644
index 01ca3f0568..0000000000
--- a/app/tests/create-agent-kind.test.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import {
-  afterAll,
-  afterEach,
-  beforeAll,
-  beforeEach,
-  expect,
-  mock,
-  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,
-  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 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.
- */
-/*
- * 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 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 () => {
-  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 } = await atKindStep();
-  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);
-});
-
-/*
- * 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("switch this on");
-});
-
-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/app/tests/create-agent-steps.test.tsx b/app/tests/create-agent-steps.test.tsx
deleted file mode 100644
index 100d04aaee..0000000000
--- a/app/tests/create-agent-steps.test.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-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";
-import { settleReactWork } from "./settle-react-work";
-
-/**
- * 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);
-/*
- * 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;
-
-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+/);
-});
diff --git a/app/tests/harness-mark.test.tsx b/app/tests/harness-mark.test.tsx
index b05d24c31a..972e5cbad7 100644
--- a/app/tests/harness-mark.test.tsx
+++ b/app/tests/harness-mark.test.tsx
@@ -12,7 +12,9 @@ mock.module("@/lib/marks", () => ({
     id === "langgraph" ? "data:image/svg+xml,<svg/>" : null,
 }));
 
-const { HarnessMark } = await import("@/components/agents/harness-mark");
+const { HarnessMark, MARK_TILE } = await import(
+  "@/components/agents/harness-mark"
+);
 
 beforeAll(() => GlobalRegistrator.register());
 afterEach(() => cleanup());
@@ -25,27 +27,28 @@ test("draws the vendored mark for a brand that has one", () => {
 });
 
 /*
- * 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
+ * The rule from shared/marks/README.md: a brand that publishes no mark gets none, 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 no image at all for a brand with no usable mark", () => {
-  const { container } = render(<HarnessMark id={null} name="Agno" />);
+  const { container } = render(<HarnessMark id={null} name="Unmarked" />);
   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.
+ * Empty space is not an invented mark. With the box collapsed, a row with no mark began its name a
+ * tile's width to the left of the others, which read as a ragged list rather than as a row without
+ * artwork.
  */
 test("still holds the tile's width, so unmarked rows line up with marked ones", () => {
+  // The same reserved column on both; only a drawn mark gets the white tile dark mode puts behind it.
   const marked = render(<HarnessMark id="langgraph" name="LangGraph" />);
-  const tile = marked.container.firstElementChild?.className;
+  expect(marked.container.firstElementChild?.className).toStartWith(MARK_TILE);
   cleanup();
-  const bare = render(<HarnessMark id={null} name="Agno" />);
-  expect(bare.container.firstElementChild?.className).toBe(tile);
+  const bare = render(<HarnessMark id={null} name="Unmarked" />);
+  expect(bare.container.firstElementChild?.className).toBe(MARK_TILE);
 });
 
 test("never announces the brand twice, because the name is drawn beside it", () => {
diff --git a/app/tests/new-bot-sheet.test.tsx b/app/tests/new-bot-sheet.test.tsx
new file mode 100644
index 0000000000..1b9a465f29
--- /dev/null
+++ b/app/tests/new-bot-sheet.test.tsx
@@ -0,0 +1,293 @@
+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 as the other create tests stub
+ * it: a brand with a vendored mark resolves to something drawable, one without to null.
+ */
+mock.module("@/lib/marks", () => ({
+  markFor: (id: string | null | undefined) =>
+    id ? `data:image/svg+xml,${id}` : null,
+}));
+
+// After the stub: a static import is hoisted and would load the real marks module first.
+const { NewBotSheet } = await import("@/components/agents/new-bot-sheet");
+
+/**
+ * The New Bot sheet, end to end against a stubbed server.
+ *
+ * What it promises: a name is the only thing asked for before Continue; where it runs is answered by
+ * recognition, with the partners people look for first; a Bot that runs here is created straight
+ * from that answer; one somebody else runs is created only once the server has reached its address;
+ * and a Bot made with nothing but a name still satisfies a server that requires a title and a role
+ * description.
+ */
+
+beforeAll(() => GlobalRegistrator.register());
+afterEach(cleanup);
+afterAll(async () => {
+  await settleReactWork();
+  GlobalRegistrator.unregister();
+});
+
+const originalFetch = global.fetch;
+let builtInAvailable = true;
+/** What the server says when asked to reach an address. */
+let verdict: { ok: true; events: string[] } | { ok: false; reason: string };
+/** Every create sent, with its body. */
+let creates: Record<string, unknown>[] = [];
+/** Every address the server was asked to reach. */
+let dialled: string[] = [];
+
+beforeEach(() => {
+  builtInAvailable = true;
+  verdict = { ok: true, events: ["RUN_STARTED"] };
+  creates = [];
+  dialled = [];
+  global.fetch = Object.assign(
+    async (path: Parameters<typeof fetch>[0], init?: RequestInit) => {
+      const body = init?.body ? JSON.parse(String(init.body)) : undefined;
+      if (path === "/api/agents/capabilities") {
+        return Response.json({ capabilities: { builtInAvailable } });
+      }
+      if (path === "/api/agents/test-connection") {
+        dialled.push(body.endpoint);
+        return Response.json(verdict);
+      }
+      if (path === "/api/agents" && init?.method === "POST") {
+        creates.push(body);
+        return Response.json({ agent: { id: "agent_new" } }, { status: 201 });
+      }
+      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>,
+  );
+}
+
+/** The sheet open, on its first step: where the Bot will run. */
+async function opened(onCreated: (id: string) => void = () => {}) {
+  const view = draw(
+    <NewBotSheet onClose={() => {}} onCreated={onCreated} open />,
+  );
+  await view.findByText("Where will your Bot run?");
+  const user = userEvent.setup({ document: view.container.ownerDocument });
+  return { view, user };
+}
+
+/** A framework chosen and its address answered, which lands on the last step. */
+async function connected(onCreated?: (id: string) => void) {
+  const { view, user } = await opened(onCreated);
+  await user.click(view.getByRole("button", { name: /LangGraph/ }));
+  await user.click(view.getByRole("button", { name: "Continue" }));
+  await user.type(
+    await view.findByLabelText("Agent address"),
+    "https://agent.example.com/ag-ui",
+  );
+  return { view, user };
+}
+
+/** Long enough for a request the press started to have reached `fetch`. */
+async function settle() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  });
+}
+
+test("opens on where it runs, with Run it here already chosen", async () => {
+  const { view } = await opened();
+  const runHere = view.getByRole("button", { name: /Run it here/ });
+  expect(runHere.getAttribute("aria-pressed")).toBe("true");
+  expect(
+    view.getByRole("button", { name: "Continue" }).hasAttribute("disabled"),
+  ).toBe(false);
+});
+
+test("lists the partners people look for first, and never offers Mastra", async () => {
+  const { view } = await opened();
+  const frameworks = view
+    .getAllByRole("button", { pressed: false })
+    .map((button) => button.textContent ?? "");
+  expect(frameworks.slice(0, 4)).toEqual([
+    expect.stringContaining("Claude Agent SDK"),
+    expect.stringContaining("Google ADK"),
+    expect.stringContaining("Google Antigravity"),
+    expect.stringContaining("LangGraph"),
+  ]);
+  expect(view.queryByRole("button", { name: /Mastra/ })).toBeNull();
+});
+
+test("chooses nothing where the deployment has no Bot of its own", async () => {
+  builtInAvailable = false;
+  const { view } = await opened();
+  await settle();
+  const runHere = view.getByRole("button", { name: /Run it here/ });
+  expect(runHere.hasAttribute("disabled")).toBe(true);
+  expect(runHere.getAttribute("aria-pressed")).toBe("false");
+  expect(runHere.textContent).toContain("has to switch this on");
+  expect(
+    view.getByRole("button", { name: "Continue" }).hasAttribute("disabled"),
+  ).toBe(true);
+});
+
+test("Run it here goes straight to the name, and Create waits for one", async () => {
+  const { view, user } = await opened();
+  await user.click(view.getByRole("button", { name: "Continue" }));
+  const name = await view.findByLabelText("Name");
+  // Its instructions are the prompt it runs on, so the field is named for that.
+  expect(view.getByLabelText(/^Instructions/)).toBeTruthy();
+  const create = view.getByRole("button", { name: "Create" });
+  expect(create.hasAttribute("disabled")).toBe(true);
+  await user.type(name, "Expense Review");
+  expect(create.hasAttribute("disabled")).toBe(false);
+  expect(dialled).toEqual([]);
+});
+
+test("Create fills in what was left blank, then hands over", async () => {
+  const handedOver: string[] = [];
+  const { view, user } = await opened((id) => handedOver.push(id));
+  await user.click(view.getByRole("button", { name: "Continue" }));
+  const name = await view.findByLabelText("Name");
+  await user.type(name, "Expense Review");
+  // Enter in the name is Create.
+  await act(async () => {
+    fireEvent.keyDown(name, { key: "Enter", keyCode: 13 });
+  });
+
+  expect(await view.findByText("Expense Review is ready")).toBeTruthy();
+  expect(creates).toHaveLength(1);
+  expect(creates[0]).toMatchObject({
+    name: "Expense Review",
+    title: "Assistant",
+    visibility: "private",
+    endpoint: "",
+  });
+  // For a Bot that runs here this is its system prompt, so it has to be something it can act on.
+  expect(String(creates[0]?.roleDescription)).toStartWith(
+    "You are Expense Review.",
+  );
+
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 1800));
+  });
+  expect(handedOver).toEqual(["agent_new"]);
+});
+
+test("a framework asks for its address, and refuses an empty one without dialling it", async () => {
+  const { view, user } = await opened();
+  await user.click(view.getByRole("button", { name: /LangGraph/ }));
+  await user.click(view.getByRole("button", { name: "Continue" }));
+  await view.findByText("Where can it be reached?");
+
+  await user.click(view.getByRole("button", { name: "Continue" }));
+  expect(
+    await view.findByText("An address is required for an agent you run."),
+  ).toBeTruthy();
+  expect(dialled).toEqual([]);
+});
+
+test("an address that does not answer says why under it, and goes no further", async () => {
+  verdict = { ok: false, reason: "Nothing answered at that address." };
+  const { view } = await connected();
+  // Enter in the address is Continue, as it is everywhere else.
+  await act(async () => {
+    fireEvent.keyDown(view.getByLabelText("Agent address"), {
+      key: "Enter",
+      keyCode: 13,
+    });
+  });
+
+  expect(
+    await view.findByText("Nothing answered at that address."),
+  ).toBeTruthy();
+  expect(dialled).toEqual(["https://agent.example.com/ag-ui"]);
+  expect(view.queryByLabelText("Name")).toBeNull();
+  expect(creates).toEqual([]);
+});
+
+test("an address that answers moves on, and Create sends it with its key", async () => {
+  const { view, user } = await connected();
+  await user.type(view.getByLabelText(/Key/), "Bearer secret");
+  await user.click(view.getByRole("button", { name: "Continue" }));
+
+  await user.type(await view.findByLabelText("Name"), "Expense Review");
+  // Somebody else's agent has its own prompt; what is typed here is added to it.
+  expect(view.getByLabelText(/^Role/)).toBeTruthy();
+  expect(creates).toEqual([]);
+  await user.click(view.getByRole("button", { name: "Create" }));
+
+  expect(await view.findByText("Expense Review is ready")).toBeTruthy();
+  expect(creates).toHaveLength(1);
+  expect(creates[0]).toMatchObject({
+    endpoint: "https://agent.example.com/ag-ui",
+    auth: { header: "Authorization", value: "Bearer secret" },
+    title: "LangGraph",
+    roleDescription: "Connected from LangGraph.",
+  });
+});
+
+test("going back keeps what was answered, and Run it here leaves a typed address behind", async () => {
+  const { view, user } = await connected();
+  await user.click(view.getByRole("button", { name: "Continue" }));
+  await user.type(await view.findByLabelText("Name"), "Expense Review");
+  await user.click(view.getByRole("button", { name: /Public/ }));
+
+  // Back from the name returns to the address, still filled in, then to the framework, still chosen.
+  await user.click(view.getByRole("button", { name: "Back" }));
+  expect(
+    ((await view.findByLabelText("Agent address")) as HTMLInputElement).value,
+  ).toBe("https://agent.example.com/ag-ui");
+  await user.click(view.getByRole("button", { name: "Back" }));
+  expect(
+    (await view.findByRole("button", { name: /LangGraph/ })).getAttribute(
+      "aria-pressed",
+    ),
+  ).toBe("true");
+
+  await user.click(view.getByRole("button", { name: /Run it here/ }));
+  await user.click(view.getByRole("button", { name: "Continue" }));
+  expect(((await view.findByLabelText("Name")) as HTMLInputElement).value).toBe(
+    "Expense Review",
+  );
+  await user.click(view.getByRole("button", { name: "Create" }));
+  await view.findByText("Expense Review is ready");
+  expect(creates[0]).toMatchObject({ endpoint: "", visibility: "public" });
+  expect(creates[0]?.auth).toBeUndefined();
+});
diff --git a/app/tests/preload.ts b/app/tests/preload.ts
index 42746975b5..982ee6dcc0 100644
--- a/app/tests/preload.ts
+++ b/app/tests/preload.ts
@@ -35,7 +35,7 @@ GlobalRegistrator.unregister();
  * 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
+ * Null for every brand, which is a real state — a row can 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/app/tests/tool-activity.test.tsx b/app/tests/tool-activity.test.tsx
index 041ac9f504..f395a81126 100644
--- a/app/tests/tool-activity.test.tsx
+++ b/app/tests/tool-activity.test.tsx
@@ -1,7 +1,9 @@
 import { afterAll, afterEach, beforeAll, expect, test } from "bun:test";
 import { GlobalRegistrator } from "@happy-dom/global-registrator";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { cleanup, fireEvent, render } from "@testing-library/react";
+import { cleanup, fireEvent, render, renderHook } from "@testing-library/react";
+import { CopilotKitContext } from "@copilotkit/react-core/v2/context";
+import type { ReactNode } from "react";
 import type { VisibleChatItem } from "../src/components/channels/chat-messages";
 import {
   groupToolSteps,
@@ -9,6 +11,7 @@ import {
   summarise,
   ToolActivity,
   type ToolGroup,
+  useDrawnTool,
 } from "../src/components/channels/tool-activity";
 
 beforeAll(() => GlobalRegistrator.register());
@@ -39,6 +42,9 @@ const search = (id = "search", result = '"Results"') =>
   call(id, "mcp__exa__web_search_exa", { query: "top 5 GDP 2025" }, result);
 const fetch = (urls: string[], id = "fetch") =>
   call(id, "mcp__exa__web_fetch_exa", { urls }, '"Page text"');
+// The names this app draws itself, as CopilotKit's renderer registry would list them.
+const drawn = (name: string) =>
+  name === "showBarChart" || name === "computer_request_help";
 const text = (id: string): VisibleChatItem => ({
   kind: "text",
   id,
@@ -53,21 +59,90 @@ test("adjacent connector calls fold into one row named after the first", () => {
     call("drive", "mcp__google-drive__search_files", { q: "budget" }, '"x"'),
     text("answer"),
   ];
-  const grouped = groupToolSteps(items);
+  const grouped = groupToolSteps(items, drawn);
   expect(grouped.map((item) => item.kind)).toEqual(["tools", "text"]);
   expect(grouped[0]).toMatchObject({ id: "search", steps: items.slice(0, 3) });
 });
 
 test("one connector call keeps its own line, and anything the app draws stays where it is", () => {
-  expect(groupToolSteps([search()])).toEqual([search()]);
+  expect(groupToolSteps([search()], drawn)).toEqual([search()]);
   const chart = call("chart", "showBarChart");
   const help = call("help", "computer_request_help");
   for (const boundary of [chart, help, text("between")]) {
-    const grouped = groupToolSteps([search("a"), boundary, search("b")]);
+    const grouped = groupToolSteps([search("a"), boundary, search("b")], drawn);
     expect(grouped.map((item) => item.id)).toEqual(["a", boundary.id, "b"]);
   }
 });
 
+test("a run of tools the app does not draw folds like connector calls do", () => {
+  const commands = ["1", "2", "3", "4", "5"].map((n) =>
+    call(`cmd${n}`, "run_command", { command: "echo 5" }, '"5"'),
+  );
+  const grouped = groupToolSteps([...commands, text("answer")], drawn);
+  expect(grouped.map((item) => item.kind)).toEqual(["tools", "text"]);
+  expect(grouped[0]).toMatchObject({ id: "cmd1", steps: commands });
+  // On its own it keeps its own line, as a lone connector call does.
+  expect(groupToolSteps([commands[0] as ToolItem], drawn)).toEqual([
+    commands[0] as ToolItem,
+  ]);
+  // And it joins a run of connector calls rather than splitting it.
+  const mixed = groupToolSteps([search("a"), commands[0] as ToolItem], drawn);
+  expect(mixed.map((item) => item.kind)).toEqual(["tools"]);
+});
+
+test("a tool the app draws ends a run, whatever it is called", () => {
+  const grouped = groupToolSteps(
+    [
+      call("a", "run_command", {}, '"x"'),
+      call("b", "run_command", {}, '"x"'),
+      call("chart", "showBarChart"),
+      call("c", "run_command", {}, '"x"'),
+    ],
+    drawn,
+  );
+  expect(grouped.map((item) => item.id)).toEqual(["a", "chart", "c"]);
+});
+
+test("a tool step is named in words and counted as tools", () => {
+  const steps = ["1", "2", "3", "4", "5"]
+    .map((n) => call(n, "run_command", { command: "echo 5" }, '"5"'))
+    .map(stepDetails);
+  expect(steps[0]).toMatchObject({ kind: "tool", label: "Run command" });
+  expect(summarise(steps)).toBe("Used 5 tools");
+  expect(
+    summarise(
+      [
+        search(),
+        call("t", "runCommand", {}, '"x"'),
+        call("u", "read_file", {}, '"x"'),
+      ].map(stepDetails),
+    ),
+  ).toBe("Searched the web and used 2 tools");
+});
+
+test("the tools CopilotKit has a renderer for are the ones the app draws", () => {
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <CopilotKitContext.Provider
+      value={
+        {
+          copilotkit: {
+            renderToolCalls: [{ name: "showBarChart" }],
+            subscribe: () => ({ unsubscribe() {} }),
+          },
+        } as never
+      }
+    >
+      {children}
+    </CopilotKitContext.Provider>
+  );
+  const { result } = renderHook(() => useDrawnTool(), { wrapper });
+  expect(result.current("showBarChart")).toBe(true);
+  expect(result.current("run_command")).toBe(false);
+  // Outside a provider nothing is drawn, so nothing is held back from a group.
+  const bare = renderHook(() => useDrawnTool());
+  expect(bare.result.current("showBarChart")).toBe(false);
+});
+
 test("a request to connect the person's own account is never folded away", () => {
   const consent = call(
     "consent",
@@ -77,7 +152,7 @@ test("a request to connect the person's own account is never folded away", () =>
       'Refused. [team-bot-consent]{"botId":"b","serverId":"gmail"} Use your own Gmail?',
     ),
   );
-  const grouped = groupToolSteps([search("a"), consent, search("b")]);
+  const grouped = groupToolSteps([search("a"), consent, search("b")], drawn);
   expect(grouped.map((item) => item.id)).toContain("consent");
 });
 
@@ -90,7 +165,7 @@ test("a request to connect an app at all is never folded away either", () => {
       'Refused. [connect-app]{"serverId":"srv_notion","title":"Notion"} You have not connected your Notion account. Connect it and ask again.',
     ),
   );
-  const grouped = groupToolSteps([search("a"), prompt, search("b")]);
+  const grouped = groupToolSteps([search("a"), prompt, search("b")], drawn);
   expect(grouped.map((item) => item.id)).toContain("connect");
 });
 
diff --git a/desktop/src-tauri/src/harness.rs b/desktop/src-tauri/src/harness.rs
index 0588d45baf..d11c0f337c 100644
--- a/desktop/src-tauri/src/harness.rs
+++ b/desktop/src-tauri/src/harness.rs
@@ -791,17 +791,18 @@ mod tests {
         }
     }
 
-    /// The unmarked rows are the three brands with no mark in any maintained set. If a fourth
-    /// appears, somebody dropped a mark rather than a brand losing one, and that is worth stopping
-    /// for.
+    /// Every harness the picker runs an image for carries a mark. AG2, Agno and Langroid were the
+    /// last three without one, until their own repositories supplied them (see shared/marks). An
+    /// unmarked row appearing now means somebody dropped a mark rather than a brand lacking one, and
+    /// that is worth stopping for.
     #[test]
-    fn only_the_three_brands_without_a_mark_are_unmarked() {
+    fn every_harness_with_an_image_carries_a_mark() {
         let unmarked: Vec<String> = catalogue()
             .into_iter()
             .filter(|h| h.mark.is_none() && h.image.is_some())
             .map(|h| h.id)
             .collect();
-        assert_eq!(unmarked, vec!["agno", "ag2", "langroid"]);
+        assert!(unmarked.is_empty(), "unmarked harnesses: {unmarked:?}");
     }
 
     /// Mastra is offered, and the row is the assertion that the bridge on OpenBot's side works.
diff --git a/desktop/src/marks.ts b/desktop/src/marks.ts
index 8c34e6d5ad..f8ca820f8b 100644
--- a/desktop/src/marks.ts
+++ b/desktop/src/marks.ts
@@ -8,8 +8,8 @@
  * needs no `dangerouslySetInnerHTML` and the question of what is in the file never becomes a
  * 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 `shared/marks/README.md`.
+ * A row without an entry here is not an error: "an agent you already run" has no mark, nor would a
+ * brand that publishes none, and such a row shows the name alone. See `shared/marks/README.md`.
  */
 const files = import.meta.glob("../../shared/marks/*.svg", {
   eager: true,
diff --git a/server/src/app.ts b/server/src/app.ts
index b30d0dc2b9..ea2ac33575 100644
--- a/server/src/app.ts
+++ b/server/src/app.ts
@@ -483,6 +483,16 @@ export function createApp(
       selfHostBanner: selfHostBanner
         ? await selfHostBanner.shown()
         : config.selfHostBanner,
+      /*
+       * Whether this is somebody trying OpenBot on their own machine, not an organization's
+       * deployment. Onboarding reads it to explain where OpenBot can run, which only the person
+       * evaluating it needs and an organization's employees should never be pitched.
+       *
+       * Single-user mode, not a new switch: it is already true only with no identity provider and
+       * no address anybody else can reach (see `singleUserAllowed` in config.ts), which is exactly
+       * a local trial, and an operator cannot forget to set it.
+       */
+      localEvaluation: config.singleUser,
       transcription: Boolean(config.transcription),
       voice: Boolean(config.voice),
       /*
diff --git a/server/tests/health.test.ts b/server/tests/health.test.ts
index 851d40a5c7..dadb327397 100644
--- a/server/tests/health.test.ts
+++ b/server/tests/health.test.ts
@@ -47,6 +47,8 @@ describe("runtime capabilities", () => {
       generativeUi: true,
       // Default-on: a fresh clone is somebody evaluating the template.
       selfHostBanner: true,
+      // Off: this deployment has an identity provider, so it is not somebody's local trial.
+      localEvaluation: false,
       transcription: false,
       voice: false,
       // Names only. The sign-in screen reads this to know which buttons to draw.
@@ -73,6 +75,7 @@ describe("runtime capabilities", () => {
       "durableHistory",
       "generativeUi",
       "selfHostBanner",
+      "localEvaluation",
       "transcription",
       "voice",
       "authProviders",
diff --git a/shared/harnesses.json b/shared/harnesses.json
index 1e695bb0cb..2da82b919d 100644
--- a/shared/harnesses.json
+++ b/shared/harnesses.json
@@ -1,5 +1,5 @@
 {
-  "_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 \u2014 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 \u2014 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.",
+  "_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 \u2014 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 the brand publishes none \u2014 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",
@@ -40,7 +40,7 @@
       "runPath": "/agui",
       "credential": "any-provider",
       "maintainer": "first-party",
-      "mark": null,
+      "mark": "agno",
       "webCreate": true
     },
     {
@@ -152,7 +152,7 @@
       "runPath": "",
       "credential": "any-provider",
       "maintainer": "first-party",
-      "mark": null,
+      "mark": "ag2",
       "webCreate": true
     },
     {
@@ -166,7 +166,7 @@
       "runPath": "",
       "credential": "any-provider",
       "maintainer": "community",
-      "mark": null,
+      "mark": "langroid",
       "webCreate": true
     },
     {
diff --git a/shared/harnesses.test.ts b/shared/harnesses.test.ts
index 1e6f0fb004..098b593bfb 100644
--- a/shared/harnesses.test.ts
+++ b/shared/harnesses.test.ts
@@ -1,5 +1,5 @@
 import { expect, test } from "bun:test";
-import { HARNESSES } from "./harnesses";
+import { HARNESSES, WEB_HARNESSES } from "./harnesses";
 
 test("carries every row the desktop picker offers, in its order", () => {
   expect(HARNESSES.map((h) => h.id)).toEqual([
@@ -20,11 +20,29 @@ test("carries every row the desktop picker offers, in its order", () => {
   ]);
 });
 
+test("leads the web list with the partners people look for, keeping the rest in order", () => {
+  expect(WEB_HARNESSES.map((h) => h.id)).toEqual([
+    "claude-agent-sdk",
+    "google-adk",
+    "antigravity",
+    "langgraph",
+    "crewai",
+    "llamaindex",
+    "agno",
+    "pydantic-ai",
+    "microsoft-agent-framework",
+    "strands",
+    "ag2",
+    "langroid",
+    "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"]);
+  expect(unmarked).toEqual(["byo-url"]);
 });
 
 /*
diff --git a/shared/harnesses.ts b/shared/harnesses.ts
index fa3442e061..237681ca40 100644
--- a/shared/harnesses.ts
+++ b/shared/harnesses.ts
@@ -66,10 +66,34 @@ export type Harness = {
 export const HARNESSES: readonly Harness[] =
   catalogue.harnesses as readonly Harness[];
 
-/** What the web dialog may offer, in the catalogue's own order. */
+/**
+ * The partners a person adding a Bot looks for first, in the order the web lists them.
+ *
+ * The catalogue is ranked stars-first, which suits the desktop installer choosing an image to run
+ * but not somebody scanning for their own framework: Atai, October 19, read CrewAI, LlamaIndex and
+ * Agno at the top as "the ones on top don't make sense", and reported LangChain and ADK missing when
+ * they were fourth and fifth. These lead; everything else follows in the catalogue's own order.
+ */
+const WEB_LEAD: readonly string[] = [
+  "claude-agent-sdk",
+  "google-adk",
+  "antigravity",
+  "langgraph",
+];
+
+/** Where a harness sits in the web list: its lead position, or after every lead. */
+function webRank(harness: Harness): number {
+  const lead = WEB_LEAD.indexOf(harness.id);
+  return lead === -1 ? WEB_LEAD.length : lead;
+}
+
+/**
+ * What the web dialog may offer: the leads first, then the catalogue's order, which keeps "An agent
+ * you already run" last. The sort is stable, so the rows after the leads keep their ranking.
+ */
 export const WEB_HARNESSES: readonly Harness[] = HARNESSES.filter(
   (harness) => harness.webCreate,
-);
+).sort((a, b) => webRank(a) - webRank(b));
 
 /** The sentence to draw on a web surface: the override where there is one, else the installer's. */
 export function summaryFor(harness: Harness): string {
diff --git a/shared/marks/README.md b/shared/marks/README.md
index 80899ab418..a63205dde9 100644
--- a/shared/marks/README.md
+++ b/shared/marks/README.md
@@ -1,15 +1,28 @@
 # Vendored brand marks
 
-From [`@lobehub/icons-static-svg`](https://github.com/lobehub/lobe-icons), MIT licensed, vendored
-rather than fetched because the setup window draws before it has any network guarantee.
+Vendored rather than fetched, because the setup window draws before it has any network guarantee.
+Most come from [`@lobehub/icons-static-svg`](https://github.com/lobehub/lobe-icons), MIT licensed.
+Where that set has none, the mark is the vendor's own published artwork, taken from the project's
+own repository:
+
+| File | Source |
+| --- | --- |
+| `ag2.svg` | [`ag2ai/ag2`](https://github.com/ag2ai/ag2) `website/static/img/favicon-dark.svg`, verbatim apart from a `<title>` |
+| `agno.svg` | [`agno-agi/docs`](https://github.com/agno-agi/docs) `favicon.png`, embedded unchanged in an SVG |
+| `langroid.svg` | [`langroid/langroid`](https://github.com/langroid/langroid) `public/logo_light.png`, scaled to 128 px and embedded in an SVG |
+
+The two PNGs sit inside an SVG wrapper only so every mark is one file type: both apps resolve a
+mark by globbing `*.svg`, and a second extension would mean a second rule in each.
+
+Each of the three carries a `<title>` naming the product, as every lobehub mark already does, because
+the linter rejects an SVG without one.
 
 Renamed to the harness or provider id they belong to, so a row finds its mark by its own id and
 there is no second mapping to keep in step.
 
 Each mark is its owner's trademark, used to identify that product in a picker and for nothing else.
-**Nothing here is invented.** Agno, AG2 and Langroid have no mark in any maintained set, so their
-rows show the name alone. A monogram we drew would read as the vendor's own, which is the thing a
-trademark holder actually objects to.
+**Nothing here is invented.** A brand that publishes no mark shows its name alone. A monogram we
+drew would read as the vendor's own, which is the thing a trademark holder actually objects to.
 
 Every row shows its name whether or not it has a mark. The mark sits beside the name and never
 replaces it.
diff --git a/shared/marks/ag2.svg b/shared/marks/ag2.svg
new file mode 100644
index 0000000000..216a0b407e
--- /dev/null
+++ b/shared/marks/ag2.svg
@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><title>AG2</title>
+<path d="M0 1.16667C0 2.23333 0.0659794 2.33333 0.956701 2.33333C1.78144 2.33333 1.94639 2.46667 2.04536 3.23333C2.11134 4 2.30928 4.2 3.23299 4.26667C4.1567 4.36667 4.28866 4.5 4.28866 5.36667C4.28866 6.23333 4.38763 6.33333 5.27835 6.33333C6.20206 6.33333 6.26804 6.43333 6.26804 7.5C6.26804 8.56667 6.20206 8.66667 5.27835 8.66667C4.38763 8.66667 4.28866 8.76667 4.28866 9.63333C4.28866 10.5 4.1567 10.6333 3.23299 10.7333C2.14433 10.8333 2.14433 10.8333 2.04536 12.9L1.94639 15H3.13402H4.28866V12.8333V10.6667H5.27835C6.16907 10.6667 6.26804 10.5667 6.26804 9.66667V8.66667H8.41237H10.5567V7.5V6.33333H15.8351H21.1134V7.5V8.66667H23.2577H25.4021V9.66667C25.4021 10.6 25.501 10.6667 26.5567 10.6667H27.7113V12.8333V15H28.701H29.6907V12.8333V10.6667H28.701C27.8103 10.6667 27.7113 10.5667 27.7113 9.66667C27.7113 8.73333 27.6124 8.66667 26.5567 8.66667C25.468 8.66667 25.4021 8.6 25.4021 7.5C25.4021 6.4 25.468 6.33333 26.5567 6.33333C27.6124 6.33333 27.7113 6.26667 27.7113 5.33333C27.7113 4.43333 27.8103 4.33333 28.701 4.33333C29.5918 4.33333 29.6907 4.23333 29.6907 3.36667C29.6907 2.5 29.8227 2.36667 30.7794 2.26667C31.7031 2.16667 31.835 2.03333 31.934 1.06667C32.033 0.0333326 32 -7.82311e-07 30.8783 -7.82311e-07C29.7897 -7.82311e-07 29.6907 0.0666659 29.6907 0.999999C29.6907 1.9 29.5918 2 28.701 2C27.7773 2 27.7113 2.1 27.7113 3.16667C27.7113 4.26667 27.6454 4.33333 26.5567 4.33333C25.501 4.33333 25.4021 4.4 25.4021 5.33333V6.33333H23.2577H21.1134V5.33333V4.33333H15.8351H10.5567V5.33333V6.33333H8.41237H6.26804V5.33333C6.26804 4.43333 6.16907 4.33333 5.31134 4.33333C4.45361 4.33333 4.32165 4.2 4.22268 3.23333C4.1567 2.33333 3.95876 2.13333 3.23299 2.06667C2.44124 1.96667 2.30928 1.8 2.30928 0.966666C2.30928 0.0666659 2.21031 -7.82311e-07 1.15464 -7.82311e-07C0.0659794 -7.82311e-07 0 0.0666659 0 1.16667Z" fill="black"/>
+<path d="M8.51134 11.7333C8.41237 12.7 8.28041 12.8333 7.32371 12.9333L6.23505 13.0333L6.33402 15.1L6.43299 17.1667L15.934 17.2667L25.4021 17.3333V15.1667V13H24.4124C23.4887 13 23.4227 12.9 23.4227 11.8333V10.6667H16.033H8.61031L8.51134 11.7333ZM12.866 14C12.866 14.9333 12.767 15 11.7113 15C10.6557 15 10.5567 14.9333 10.5567 14C10.5567 13.0667 10.6557 13 11.7113 13C12.767 13 12.866 13.0667 12.866 14ZM21.1134 14C21.1134 14.9 21.0144 15 20.1237 15C19.233 15 19.134 14.9 19.134 14C19.134 13.1 19.233 13 20.1237 13C21.0144 13 21.1134 13.1 21.1134 14Z" fill="black"/>
+<path d="M2.30928 21.8333C2.30928 22.9333 2.2433 23 1.15464 23H0V27.5V32H1.15464H2.30928V29.6667V27.3333H4.45361H6.59794V29.6667V32H7.75258H8.90722V27.5V23H7.91753C6.99381 23 6.92783 22.9 6.92783 21.8333V20.6667H4.61856H2.30928V21.8333ZM6.59794 24V25H4.45361H2.30928V24V23H4.45361H6.59794V24Z" fill="black"/>
+<path d="M13.5258 21.8333C13.5258 22.9 13.4598 23 12.5361 23H11.5464V26.3333V29.6667H12.5361C13.4598 29.6667 13.5258 29.7667 13.5258 30.8333V32H15.8351H18.1443V30.8333C18.1443 29.7333 18.2103 29.6667 19.299 29.6667H20.4536V27.3333V24.9667L18.2433 25.0667L16 25.1667L15.901 26.2333C15.8021 27.3 15.8351 27.3333 16.9567 27.3333C18.0784 27.3333 18.1443 27.4 18.1443 28.5V29.6667H16H13.8557V26.3333V23H17.1546H20.4536V21.8333V20.6667H16.9897H13.5258V21.8333Z" fill="black"/>
+<path d="M22.8289 21.7333L22.9278 22.8333L26.3258 22.9333L29.6907 23.0333V24C29.6907 24.9667 29.6907 24.9667 27.4804 25.0667L25.2371 25.1667L25.1381 26.2333C25.0392 27.1667 24.9072 27.3 23.9835 27.4L22.9278 27.5L22.8289 29.7333L22.7299 32H27.3814H32V30.8333V29.6667H28.5361H25.0722V28.5V27.3333H27.3814H29.6907V26.3667C29.6907 25.5 29.8227 25.3667 30.7794 25.2667C31.7031 25.1667 31.8351 25.0333 31.934 24.0667C32.033 23.0333 32 23 30.8783 23C29.7567 23 29.6907 22.9333 29.6907 21.8333V20.6667H26.1938H22.7299L22.8289 21.7333Z" fill="black"/>
+</svg>
diff --git a/shared/marks/agno.svg b/shared/marks/agno.svg
new file mode 100644
index 0000000000..5cf607e00b
--- /dev/null
+++ b/shared/marks/agno.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168 169" width="168" height="169"><title>Agno</title><image width="168" height="169" href="data:image/png;base64,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"/></svg>
diff --git a/shared/marks/langroid.svg b/shared/marks/langroid.svg
new file mode 100644
index 0000000000..aec137a149
--- /dev/null
+++ b/shared/marks/langroid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128"><title>Langroid</title><image width="128" height="128" href="data:image/png;base64,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"/></svg>