@vendoai/vendo 0.4.2 → 0.4.4

package/dist/cli/init.js

@@ -2,7 +2,7 @@ import { spawn } from "node:child_process";
 import { mkdir, mkdtemp, readFile, rm } from "node:fs/promises";
 import { tmpdir } from "node:os";
 import { dirname, join, relative, resolve, sep } from "node:path";
-import { mergeOverrides, vendoSync, } from "@vendoai/actions";
+import { mergeOverrides, vendoSync } from "@vendoai/actions/sync";
 import { createInterface } from "node:readline/promises";
 import { stdin, stdout } from "node:process";
 import { scrubErrorDetail } from "@vendoai/telemetry";
@@ -15,7 +15,7 @@ import { ENV_KEY_VARS, resolveDevCredential, describeDevCredential } from "../de
 import { detectFramework, detectVendoWiring } from "./framework.js";
 import { resolveScaffoldAuth } from "./init-auth.js";
 import { ensureProviderDeps } from "./provider-deps.js";
-import { expressServerSource, registrySource, routeSource, serverActionsModuleSource, VENDO_ENV_EXAMPLE, wiringServerActions, } from "./init-scaffolds.js";
+import { customServerSource, expressServerSource, registrySource, routeSource, serverActionsModuleSource, VENDO_ENV_EXAMPLE, vendoRootWrapperSource, wiringServerActions, } from "./init-scaffolds.js";
 import { createPrettyOutput, plainSelect, usePrettyOutput } from "./pretty.js";
 import { contrastingText } from "./theme/color.js";
 import { applyThemeDraft, extractTheme as extractThemeSlots, validateSlotValue, } from "./theme/extract-theme.js";
@@ -24,17 +24,24 @@ import { cloudProjectProps, consoleOutput, envLocalValueSync, errorClass, exists
  * `vendo init` (install-dx v1, re-derived 2026-07-18): one command, zero
  * questions on the happy path, no ceremony.
  *
- *   scan → wire (the two-file surface — empty vendo/registry.tsx + the
- *   catch-all handler wired to it; a detected auth preset gets one
- *   consent-style confirm in interactive runs, --yes/non-interactive accept
- *   it silently — plus package.json hooks; never edits user-authored code)
+ *   scan → wire (the surface files — empty vendo/registry.tsx, the client
+ *   mount vendo/vendo-root.tsx, the catch-all handler wired to the registry,
+ *   and the ONE bounded layout edit that mounts <VendoRoot> + <VendoOverlay />
+ *   so a by-the-book install is actually visible (0.4.1 E2E cert B3); a
+ *   detected auth preset gets one consent-style confirm in interactive runs,
+ *   --yes/non-interactive accept it silently — plus package.json hooks)
  *   → key (env stated, else the cloud starter offer) → done summary (files
- *   changed, the VendoRoot line to paste, next steps).
+ *   changed, any remaining paste, next steps).
  *
- * Removed by design: the interview, per-diff y/N approvals, the layout
- * codemod, the lib/ai.ts scaffold (createVendo's `model` is optional now),
- * remix offers, the encryption-key step, the refine offer, and the finale
- * ceremony (doctor owns verification and the live turn).
+ * The layout edit is the one place init touches user-authored code: it is
+ * idempotent (skipped when <VendoRoot> or <VendoOverlay> is already mounted),
+ * bounded (wrap the single JSX `{children}` + one import line), and degrades
+ * to the printed paste when the layout can't be edited safely.
+ *
+ * Removed by design: the interview, per-diff y/N approvals, the lib/ai.ts
+ * scaffold (createVendo's `model` is optional now), remix offers, the
+ * encryption-key step, the refine offer, and the finale ceremony (doctor owns
+ * verification and the live turn).
  */
 const DEFAULT_RADIUS = { small: "4px", large: "12px" };
 const BRIEF_PLACEHOLDER = `${BRIEF_TEMPLATE}\n`;
@@ -309,27 +316,59 @@ async function setupSkillSource() {
         return null;
     }
 }
-/** The one line init never writes: the user pastes the VendoRoot wrap. When
-    the shared registry exists (scaffolded or host-authored) the wrap carries
-    `components={registry}` — the client half of the one-file/two-consumers
-    pattern; it stays ONE pasted line plus its imports. */
-async function vendoRootPasteLines(root, framework, withRegistry) {
-    if (framework === "express") {
+/** The remaining manual wiring lines, derived from how far the auto-wire got.
+    A layout wired this run (or one that already mounts a surface) leaves
+    nothing to paste; an uneditable layout gets the wrapper paste (the wrapper
+    owns the registry/theme imports — pasting them into a Server Component
+    layout is the RSC-serialization crash the wrapper exists to avoid); a
+    <VendoRoot>-without-surface host gets the one overlay line; Express keeps
+    its printed wiring lines. */
+async function manualWiringLines(root, layout, withRegistry) {
+    if (layout.kind === "express") {
         const wrap = withRegistry
-            ? `<VendoRoot components={registry} theme={theme}>…</VendoRoot>`
-            : `<VendoRoot theme={theme}>…</VendoRoot>`;
+            ? `<VendoRoot components={registry} theme={theme}>…<VendoOverlay /></VendoRoot>`
+            : `<VendoRoot theme={theme}>…<VendoOverlay /></VendoRoot>`;
         return [
             `app.use("/api/vendo", mountVendo());   // in your server`,
-            `${wrap}  // around your client root (see vendo/server for the imports)`,
+            `${wrap}  // around your client root (see vendo/server for the imports; <VendoOverlay /> is the visible launcher + panel)`,
+        ];
+    }
+    if (layout.kind === "custom") {
+        const wrap = withRegistry
+            ? `<VendoRoot components={registry} theme={theme}>…<VendoOverlay /></VendoRoot>`
+            : `<VendoRoot theme={theme}>…<VendoOverlay /></VendoRoot>`;
+        return [
+            `Route your runtime's requests through the generated module — Cloudflare Workers: export default { fetch: (request, env) => handleVendoRequest(request, env) };`,
+            `${wrap}  // around your client root (see vendo/server for the imports; <VendoOverlay /> is the visible launcher + panel)`,
+            `Set VENDO_BASE_URL to the deployed origin (credential forwarding fails closed without it).`,
+        ];
+    }
+    if (layout.kind === "wired" || layout.kind === "already")
+        return [];
+    if (layout.kind === "overlay-missing") {
+        return [
+            `In ${layout.layoutPath}: nothing renders yet — <VendoRoot> is a context provider. Mount the visible surface inside it:`,
+            `  import { VendoOverlay } from "@vendoai/vendo/react";`,
+            `  … then add: <VendoOverlay />  (the launcher pill + panel users open)`,
         ];
     }
     const app = await appDirectory(root);
+    const layoutRel = relative(root, join(app, "layout.tsx"));
+    if (withRegistry) {
+        const wrapperSpecifier = relative(app, join(dirname(app), "vendo", "vendo-root")).split(sep).join("/");
+        return [
+            `In ${layoutRel}:`,
+            `  import { VendoRoot } from ${JSON.stringify(wrapperSpecifier)};`,
+            `  … then wrap: <VendoRoot>{children}</VendoRoot>`,
+            `  (${join("vendo", "vendo-root.tsx")} mounts <VendoOverlay />, the visible launcher + panel)`,
+        ];
+    }
+    // No registry consumer (a hand-wired route that ignores it): the direct
+    // provider + overlay paste — theme.json is serializable, so it may cross
+    // the Server Component boundary; the registry may not.
     const specifier = await themeImportSpecifier(root, app);
-    const layout = relative(root, join(app, "layout.tsx"));
-    const registrySpecifier = relative(app, join(dirname(app), "vendo", "registry")).split(sep).join("/");
     const importLines = [
-        `import { VendoRoot } from "@vendoai/vendo/react";`,
-        ...(withRegistry ? [`import { registry } from ${JSON.stringify(registrySpecifier)};`] : []),
+        `import { VendoOverlay, VendoRoot } from "@vendoai/vendo/react";`,
         ...(specifier === null
             ? []
             : [
@@ -337,12 +376,8 @@ async function vendoRootPasteLines(root, framework, withRegistry) {
                 `import type { VendoTheme } from "@vendoai/vendo";`,
             ]),
     ];
-    const props = [
-        ...(withRegistry ? ["components={registry}"] : []),
-        ...(specifier === null ? [] : ["theme={theme as VendoTheme}"]),
-    ];
-    const wrap = `<VendoRoot${props.length === 0 ? "" : ` ${props.join(" ")}`}>{children}</VendoRoot>`;
-    return [`In ${layout}:`, ...importLines.map((line) => `  ${line}`), `  … then wrap: ${wrap}`];
+    const wrap = `<VendoRoot${specifier === null ? "" : " theme={theme as VendoTheme}"}>{children}<VendoOverlay /></VendoRoot>`;
+    return [`In ${layoutRel}:`, ...importLines.map((line) => `  ${line}`), `  … then wrap: ${wrap}`];
 }
 /** The repo-specific agent tail (agent-install-dx): a non-interactive
     scaffold run is agent-driven, so the run ends with plain deterministic
@@ -374,11 +409,17 @@ async function agentTailLines(args) {
     if (args.framework === "express") {
         // No exact entry file exists to name on Express — point at the printed
         // wiring lines instead of guessing a path.
-        lines.push("edit your server and client entries — paste the mountVendo() and <VendoRoot> lines above");
+        lines.push("edit your server and client entries — paste the mountVendo() and <VendoRoot>/<VendoOverlay /> lines above (without a mounted surface, users see nothing)");
     }
-    else {
+    else if (args.layout.kind === "wired") {
+        lines.push(`surface: ${args.layout.layoutPath} wired this run — <VendoRoot> wraps the app and mounts <VendoOverlay /> (the visible launcher + panel) via ${join("vendo", "vendo-root.tsx")}; review the diff`);
+    }
+    else if (args.layout.kind === "overlay-missing") {
+        lines.push(`edit ${args.layout.layoutPath} — add <VendoOverlay /> inside your <VendoRoot> (see the lines above; <VendoRoot> alone renders NOTHING visible)`);
+    }
+    else if (args.layout.kind === "manual") {
         const layout = relative(args.root, join(await appDirectory(args.root), "layout.tsx"));
-        lines.push(`edit ${layout} — wrap the app in the <VendoRoot> lines above`);
+        lines.push(`edit ${layout} — wrap the app in the <VendoRoot> lines above (it mounts <VendoOverlay />, the visible surface; without it users see nothing)`);
     }
     if (await readOptional(join(args.root, ".vendo", "brief.md")) === BRIEF_PLACEHOLDER) {
         lines.push(`edit ${join(".vendo", "brief.md")} — replace the placeholder with what this product does and for whom`);
@@ -420,16 +461,98 @@ export function starViaGh(spawnStar, timeoutMs = 5_000) {
         child.on("exit", (code) => settle(code === 0));
     });
 }
+/** Where the wrapped `{children}` insert lands: the SINGLE JSX-rendered
+    `{children}` (between a `>` and a `<`). Requiring the JSX position keeps
+    the layout's own `({ children })` parameter destructure out of the count. */
+const LAYOUT_CHILDREN = /(>)(\s*\{\s*children\s*\}\s*)(<)/g;
+/** End index for the wrapper import: after the last top-level import
+    statement (lazy up to its module-specifier string literal, so multi-line
+    destructures work), else after a leading directive ("use client"), else 0. */
+function importInsertionIndex(source) {
+    const heads = [...source.matchAll(/^import\b/gm)];
+    if (heads.length === 0) {
+        const directive = /^(?:\s*(?:'[^']*'|"[^"]*");?[^\S\n]*\n)+/.exec(source);
+        return directive === null ? 0 : directive[0].length;
+    }
+    const last = heads[heads.length - 1].index;
+    const statement = /import\s[\s\S]*?["'][^"']*["'][^\S\n]*;?/.exec(source.slice(last));
+    const end = last + (statement === null ? 0 : statement[0].length);
+    const newline = source.indexOf("\n", end);
+    return newline === -1 ? source.length : newline + 1;
+}
+/**
+ * The one bounded edit init makes to user-authored code (visible-surface fix,
+ * 0.4.1 E2E cert B3): mount the generated client wrapper around the layout's
+ * `{children}` and import it. Null — leave the file untouched, fall back to
+ * the printed paste — whenever a Vendo mount already exists (idempotence) or
+ * the file doesn't have exactly one JSX `{children}` to wrap (ambiguity).
+ * Exported for direct unit tests.
+ */
+export function wireNextLayout(source, wrapperSpecifier) {
+    if (source.includes("VendoRoot") || source.includes("VendoOverlay"))
+        return null;
+    const matches = [...source.matchAll(LAYOUT_CHILDREN)];
+    if (matches.length !== 1)
+        return null;
+    const match = matches[0];
+    const open = match.index + match[1].length;
+    const close = match.index + match[0].length - match[3].length;
+    let next = `${source.slice(0, open)}<VendoRoot>${source.slice(open, close)}</VendoRoot>${source.slice(close)}`;
+    const at = importInsertionIndex(next);
+    const importLine = `import { VendoRoot } from ${JSON.stringify(wrapperSpecifier)};\n`;
+    next = `${next.slice(0, at)}${importLine}${next.slice(at)}`;
+    return next;
+}
 async function buildPlan(options, confirmAuth, selectAuth) {
     const root = resolve(options.targetDir);
-    const framework = options.framework ?? await detectFramework(root);
+    // "unknown" detection lands on the runtime-neutral custom scaffold — the
+    // safe default that exists now (guessing the Next layout into a Worker
+    // host was the field failure; the non-interactive guard still demands an
+    // explicit --framework so agents never inherit a guess silently).
+    const detected = options.framework ?? await detectFramework(root);
+    const framework = detected === "unknown" ? "custom" : detected;
     const changes = [];
     let authAdvice = null;
     let authWired = null;
     let compositionPath = null;
     let registryPath = null;
     let withRegistry = false;
-    if (framework === "express") {
+    let layout = { kind: "manual" };
+    if (framework === "custom") {
+        layout = { kind: "custom" };
+        const wiring = await detectVendoWiring(root);
+        if (!wiring.server || !wiring.client) {
+            const typescript = await exists(join(root, "tsconfig.json"));
+            const server = join(root, "vendo", typescript ? "server.ts" : "server.mjs");
+            const registryFile = join(root, "vendo", typescript ? "registry.tsx" : "registry.mjs");
+            const registryBefore = await readOptional(registryFile);
+            const serverBefore = await readOptional(server);
+            // Same ownership rules as the Express branch: init composes only when
+            // it CREATES the composition, and the registry regenerates only for a
+            // consumer that uses it.
+            const scaffolding = serverBefore === null && !wiring.server;
+            const registryPlanned = registryBefore === null
+                && (scaffolding || serverBefore?.includes("./registry") === true);
+            if (registryPlanned) {
+                const path = relative(root, registryFile);
+                const registryAfter = registrySource(typescript ? "tsx" : "mjs");
+                changes.push({ absolute: registryFile, path, before: null, after: registryAfter, diff: diff(path, null, registryAfter) });
+                registryPath = path;
+            }
+            if (scaffolding) {
+                const path = relative(root, server);
+                const auth = await resolveScaffoldAuth(root, path, options.auth, confirmAuth, selectAuth);
+                const serverAfter = customServerSource(typescript, auth.wired);
+                changes.push({ absolute: server, path, before: null, after: serverAfter, diff: diff(path, null, serverAfter) });
+                authAdvice = auth.advice;
+                authWired = auth.wired;
+                compositionPath = path;
+            }
+            withRegistry = registryBefore !== null || registryPlanned;
+        }
+    }
+    else if (framework === "express") {
+        layout = { kind: "express" };
         const wiring = await detectVendoWiring(root);
         if (!wiring.server || !wiring.client) {
             const typescript = await exists(join(root, "tsconfig.json"));
@@ -522,6 +645,45 @@ async function buildPlan(options, confirmAuth, selectAuth) {
                 changes.push({ absolute: route, path, before: routeBefore, after: wiredRoute, diff: diff(path, routeBefore, wiredRoute) });
             }
         }
+        // Visible surface (0.4.1 E2E cert B3): the client mount wrapper next to
+        // the registry — the "use client" boundary that owns the registry + theme
+        // imports (passing the registry from the Server Component layout into the
+        // client provider fails RSC serialization) and mounts <VendoOverlay /> —
+        // plus the ONE bounded layout edit that wraps `{children}` in it. Both
+        // idempotent: an existing wrapper is never clobbered, a layout already
+        // mounting <VendoRoot> or <VendoOverlay> is never re-edited, and an
+        // uneditable layout degrades to the printed paste.
+        const wrapperFile = join(dirname(app), "vendo", "vendo-root.tsx");
+        const wrapperBefore = await readOptional(wrapperFile);
+        const layoutFile = join(app, "layout.tsx");
+        const layoutBefore = await readOptional(layoutFile);
+        // The generated wrapper doesn't count as a host mount: its overlay is
+        // only real once a layout mounts the wrapper itself.
+        const mounts = await detectVendoWiring(root, { exclude: [wrapperFile] });
+        if (mounts.client || mounts.surface) {
+            // A mounted <VendoRoot> next to an existing wrapper IS the surface —
+            // the wrapper renders <VendoOverlay /> (the re-run after an auto-wire).
+            layout = mounts.surface || wrapperBefore !== null
+                ? { kind: "already" }
+                : { kind: "overlay-missing", layoutPath: relative(root, layoutFile) };
+        }
+        else if (withRegistry) {
+            // The wrapper consumes ./registry, so it exists only alongside one —
+            // a hand-wired host that ignores the registry keeps the manual paste.
+            if (wrapperBefore === null) {
+                const path = relative(root, wrapperFile);
+                const themeSpecifier = await themeImportSpecifier(root, dirname(wrapperFile));
+                const wrapperAfter = vendoRootWrapperSource({ themeSpecifier });
+                changes.push({ absolute: wrapperFile, path, before: null, after: wrapperAfter, diff: diff(path, null, wrapperAfter) });
+            }
+            const wrapperSpecifier = relative(app, join(dirname(app), "vendo", "vendo-root")).split(sep).join("/");
+            const layoutAfter = layoutBefore === null ? null : wireNextLayout(layoutBefore, wrapperSpecifier);
+            if (layoutAfter !== null) {
+                const path = relative(root, layoutFile);
+                changes.push({ absolute: layoutFile, path, before: layoutBefore, after: layoutAfter, diff: diff(path, layoutBefore, layoutAfter) });
+                layout = { kind: "wired", layoutPath: path };
+            }
+        }
     }
     const packageJson = join(root, "package.json");
     const packageBefore = await readOptional(packageJson);
@@ -561,7 +723,7 @@ async function buildPlan(options, confirmAuth, selectAuth) {
         ".vendo/theme.json",
         ".vendo/data/.gitignore",
     ];
-    const manualSteps = await vendoRootPasteLines(root, framework, withRegistry);
+    const manualSteps = await manualWiringLines(root, layout, withRegistry);
     return {
         changes,
         manualSteps,
@@ -569,6 +731,7 @@ async function buildPlan(options, confirmAuth, selectAuth) {
         authWired,
         compositionPath,
         registryPath,
+        layout,
         plan: {
             framework,
             root,
@@ -658,7 +821,7 @@ export async function runInit(options) {
     if (options.framework === undefined && (options.yes === true || !interactive)
         && await detectFramework(root) === "unknown") {
         output.error("Framework not detected (no next or express dependency in package.json) and this run cannot ask. " +
-            "Pass --framework. Example: vendo init --yes --framework next");
+            "Pass --framework. Examples: vendo init --yes --framework next · --framework custom (any Web-standard runtime: Cloudflare Workers, Bun, Hono, ...)");
         return 1;
     }
     // (No stdin-TTY guard on these defaults, unlike the star ask's: an unshown
@@ -671,7 +834,7 @@ export async function runInit(options) {
         ? undefined
         : (options.selectAuth ?? (pretty === null ? plainSelect : pretty.select));
     const detectStarted = Date.now();
-    const { plan, changes, manualSteps, authAdvice, authWired, compositionPath, registryPath } = await buildPlan(options, confirmAuth, selectAuth);
+    const { plan, changes, manualSteps, authAdvice, authWired, compositionPath, registryPath, layout } = await buildPlan(options, confirmAuth, selectAuth);
     const detectMs = Date.now() - detectStarted;
     let telemetry = telemetryFor(options, output, root);
     await telemetry.track("init_started", { framework: plan.framework });
@@ -950,10 +1113,16 @@ export async function runInit(options) {
         if (aiVersion !== null && Number.parseInt(aiVersion, 10) >= 7) {
             output.error(`warning: installed ai@${aiVersion} is unsupported — Vendo supports ai@6; downgrade (npm install ai@^6 @ai-sdk/anthropic@^3 @ai-sdk/react@^3) or track github.com/runvendo/vendo/issues/478`);
         }
-        // Done — the one paste that is the user's, then their own dev server.
-        output.log("\nLast steps are yours:");
-        for (const line of manualSteps)
-            output.log(`  ${line}`);
+        // Done — whatever paste remains (none when the layout auto-wire landed),
+        // then their own dev server.
+        if (layout.kind === "wired") {
+            output.log(`\nMounted <VendoRoot> + <VendoOverlay /> (the visible launcher + panel) in ${layout.layoutPath} — review the diff before committing.`);
+        }
+        if (manualSteps.length > 0) {
+            output.log("\nLast steps are yours:");
+            for (const line of manualSteps)
+                output.log(`  ${line}`);
+        }
         output.log("\nThen start your dev server — the agent is live in your app.");
         output.log("Verify everything: `npx vendo doctor` (it can start the server and run a live turn).");
         // Agent tail (agent-install-dx): the --yes-or-non-TTY path is agent-driven
@@ -962,7 +1131,7 @@ export async function runInit(options) {
         // never reaches here (its read-only JSON plan returned above).
         if (options.yes === true || !interactive) {
             output.log("\nAgent tail:");
-            const tail = await agentTailLines({ root, framework: plan.framework, registryPath, compositionPath, authWired, cloudKeyMissing: credential.rung === "none" });
+            const tail = await agentTailLines({ root, framework: plan.framework, registryPath, compositionPath, authWired, layout, cloudKeyMissing: credential.rung === "none" });
             for (const line of tail)
                 output.log(`  ${line}`);
         }

package/dist/cli/playground/app/fake-client.js

@@ -72,12 +72,18 @@ export function createFakeClient(fixtures) {
         },
         connections: {
             list: async () => [...state.connections],
-            // The scripted catalog mirrors the scenarios' explicit connectors prop;
-            // surfaces resolving in auto mode see the same two toolkits.
+            // A realistic host catalog: the toolkits the scenarios act through
+            // (slack, github) plus the breadth a real Composio-brokered host
+            // exposes, so the connect tray demos search + scroll + real brand
+            // marks (every slug below has a real logo on logos.composio.dev).
             catalog: async () => [
-                { toolkit: "slack", connector: "composio" },
-                { toolkit: "github", connector: "composio" },
-            ],
+                "slack", "github", "gmail", "googlecalendar", "googledrive",
+                "googlesheets", "notion", "linear", "jira", "confluence", "asana",
+                "trello", "clickup", "monday", "todoist", "hubspot", "salesforce",
+                "stripe", "shopify", "intercom", "zendesk", "airtable", "dropbox",
+                "figma", "discord", "zoom", "outlook", "calendly", "mailchimp",
+                "typeform",
+            ].map((toolkit) => ({ toolkit, connector: "composio" })),
             initiate: async ({ toolkit, connector }) => ({
                 id: `conn_${toolkit}_new`,
                 connector: connector ?? "composio",

package/dist/cli/playground/app/main.js

@@ -6,27 +6,34 @@ import { ScenarioMount } from "./scenario-mount.js";
 import { scenarios } from "./scenarios.js";
 import { ThemeEditor, useGoogleFont } from "./theme-editor.js";
 import { decodeThemeParam, encodeThemeParam } from "./theme-state.js";
+/* Vendo brand shell (brand kit): Porcelain #FAFAF8, Ink #17171A, Ultramarine
+   #4338CA, Onest (its @font-face rides in via the chrome stylesheet). The
+   STAGE column deliberately has no fixed background — App paints it with the
+   active theme's colors.background so every chrome surface sits on its own
+   canvas edge-to-edge instead of printing an abrupt theme-colored rectangle
+   on the shell. */
 const SHELL_CSS = `
   :root { color-scheme: light; }
   * { box-sizing: border-box; }
-  body { margin: 0; font-family: Inter, system-ui, -apple-system, sans-serif; background: #f3ede2; color: #14151a; }
+  body { margin: 0; font-family: Onest, Inter, system-ui, -apple-system, sans-serif; background: #fafaf8; color: #17171a; }
   .pg-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
-  .pg-nav { border-right: 1px solid #e3ddd2; background: #faf6ee; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
+  .pg-nav { border-right: 1px solid rgba(23, 23, 26, 0.08); background: #fafaf8; padding: 18px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
   .pg-brand { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 4px 6px 2px; }
-  .pg-brand small { display: block; font-weight: 500; font-size: 11px; color: #8a8b92; margin-top: 3px; }
-  .pg-group { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8b92; margin: 18px 6px 6px; }
-  .pg-link { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: #34353b; text-decoration: none; }
-  .pg-link:hover { background: #f0e9dc; }
-  .pg-link[aria-current="page"] { background: #14151a; color: #fffdf9; }
-  .pg-main { padding: 26px 30px 60px; min-width: 0; }
+  .pg-brand-mark { color: #4338ca; }
+  .pg-brand small { display: block; font-weight: 500; font-size: 11px; color: #6f6f78; margin-top: 3px; }
+  .pg-group { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: #85858f; margin: 18px 6px 6px; }
+  .pg-link { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: #3a3a41; text-decoration: none; transition: background .12s, color .12s; }
+  .pg-link:hover { background: rgba(67, 56, 202, 0.07); color: #17171a; }
+  .pg-link[aria-current="page"] { background: #17171a; color: #fafaf8; }
+  .pg-main { padding: 26px 30px 60px; min-width: 0; transition: background .2s, color .2s; }
   @media (max-width: 640px) {
     .pg-shell { grid-template-columns: 1fr; }
-    .pg-nav { position: static; height: auto; border-right: none; border-bottom: 1px solid #e3ddd2; }
+    .pg-nav { position: static; height: auto; border-right: none; border-bottom: 1px solid rgba(23, 23, 26, 0.08); }
     .pg-main { padding: 18px 16px 80px; }
   }
   .pg-head { max-width: 860px; margin-bottom: 20px; }
   .pg-head h1 { font-size: 19px; letter-spacing: -0.01em; margin: 0 0 6px; }
-  .pg-head p { font-size: 13.5px; color: #5c5d64; line-height: 1.55; margin: 0; }
+  .pg-head p { font-size: 13.5px; opacity: 0.72; line-height: 1.55; margin: 0; }
   .pg-stage { max-width: 860px; }
   .pg-embed { padding: 0; }
 `;
@@ -95,12 +102,15 @@ function App() {
     const embed = new URLSearchParams(window.location.search).has("embed");
     const [theme, setTheme] = useThemeState(embed);
     if (embed) {
-        return (_jsx("div", { className: "pg-embed", children: _jsx(ScenarioMount, { scenario: scenario, theme: theme }, scenario.id) }));
+        return (
+        // Same host-canvas rule as the stage: the embed page (the phone iframe's
+        // whole viewport) wears the theme background so the surface blends.
+        _jsx("div", { className: "pg-embed", style: { background: theme.colors.background, minHeight: "100vh" }, children: _jsx(ScenarioMount, { scenario: scenario, theme: theme }, scenario.id) }));
     }
     const groups = [...new Set(scenarios.map((entry) => entry.group))];
-    return (_jsxs("div", { className: "pg-shell", children: [_jsxs("nav", { className: "pg-nav", "aria-label": "Scenarios", children: [_jsxs("div", { className: "pg-brand", children: ["Vendo playground", _jsx("small", { children: "every surface \u00B7 scripted data \u00B7 no model key" })] }), groups.map((group) => (_jsxs("div", { children: [_jsx("div", { className: "pg-group", children: group }), scenarios
+    return (_jsxs("div", { className: "pg-shell", children: [_jsxs("nav", { className: "pg-nav", "aria-label": "Scenarios", children: [_jsxs("div", { className: "pg-brand", children: [_jsx("span", { className: "pg-brand-mark", children: "vendo" }), " playground", _jsx("small", { children: "every surface \u00B7 scripted data \u00B7 no model key" })] }), groups.map((group) => (_jsxs("div", { children: [_jsx("div", { className: "pg-group", children: group }), scenarios
                                 .filter((entry) => entry.group === group)
-                                .map((entry) => (_jsx("a", { className: "pg-link", href: `#${entry.id}`, "aria-current": entry.id === scenario.id ? "page" : undefined, children: entry.title }, entry.id)))] }, group)))] }), _jsxs("main", { className: "pg-main", children: [_jsxs("header", { className: "pg-head", children: [_jsx("h1", { children: scenario.title }), _jsx("p", { children: scenario.description })] }), _jsx("div", { className: "pg-stage", children: _jsx(ScenarioMount, { scenario: scenario, theme: theme }, scenario.id) })] }), _jsx(ThemeEditor, { theme: theme, onChange: setTheme })] }));
+                                .map((entry) => (_jsx("a", { className: "pg-link", href: `#${entry.id}`, "aria-current": entry.id === scenario.id ? "page" : undefined, children: entry.title }, entry.id)))] }, group)))] }), _jsxs("main", { className: "pg-main", style: { background: theme.colors.background, color: theme.colors.text }, children: [_jsxs("header", { className: "pg-head", children: [_jsx("h1", { children: scenario.title }), _jsx("p", { children: scenario.description })] }), _jsx("div", { className: "pg-stage", children: _jsx(ScenarioMount, { scenario: scenario, theme: theme }, scenario.id) })] }), _jsx(ThemeEditor, { theme: theme, onChange: setTheme })] }));
 }
 const style = document.createElement("style");
 style.textContent = SHELL_CSS;

package/dist/cli/playground/app/scenario-mount.js

@@ -44,5 +44,8 @@ export function ScenarioMount({ scenario, theme, root }) {
     const client = useMemo(() => createFakeClient((scenario.fixtures ?? playgroundFixtures)()), [scenario]);
     const transport = useMemo(() => (scenario.script ? new ScriptedTransport(scenario.script, { speed: scenario.speed ?? 1 }) : undefined), [scenario]);
     useAutoSend(scenario, root);
-    return (_jsx(VendoProvider, { client: client, transport: transport, theme: theme, tools: playgroundToolMeta, connectors: [{ toolkit: "slack", label: "Slack" }, { toolkit: "github", label: "GitHub" }], children: scenario.render() }));
+    // No explicit `connectors` prop: the surfaces resolve the auto catalog from
+    // the fake client (fake-client.ts), so the tray demos search + scroll over
+    // a realistic host's toolkit breadth.
+    return (_jsx(VendoProvider, { client: client, transport: transport, theme: theme, tools: playgroundToolMeta, children: scenario.render() }));
 }

package/dist/cli/playground/app/theme-editor.js

@@ -5,51 +5,51 @@ const EDITOR_CSS = `
   /* Above the chrome's own overlay/takeover layers (they top out at
      2147483100) — the editor is harness tooling and must stay reachable
      while the overlay scenario is open. */
-  .te-card, .te-pill { position: fixed; top: 16px; right: 16px; z-index: 2147483200; font-family: Inter, system-ui, sans-serif; }
-  .te-card { width: 302px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #faf6ee; border: 1px solid #e3ddd2; border-radius: 14px; box-shadow: 0 18px 44px rgba(20, 21, 26, 0.18); transform-origin: top right; transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .te-card, .te-pill { position: fixed; top: 16px; right: 16px; z-index: 2147483200; font-family: Onest, Inter, system-ui, sans-serif; }
+  .te-card { width: 302px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: #fafaf8; border: 1px solid rgba(23, 23, 26, 0.1); border-radius: 14px; box-shadow: 0 18px 44px rgba(23, 23, 26, 0.18); transform-origin: top right; transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
   .te-card[data-closed="true"] { transform: scale(0.6) translateY(-8px); opacity: 0; pointer-events: none; }
-  .te-pill { display: inline-flex; align-items: center; gap: 7px; background: #14151a; color: #fffdf9; border: none; border-radius: 999px; font: 600 12.5px Inter, sans-serif; padding: 9px 15px; cursor: pointer; box-shadow: 0 10px 26px rgba(20, 21, 26, 0.25); opacity: 0; pointer-events: none; transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+  .te-pill { display: inline-flex; align-items: center; gap: 7px; background: #17171a; color: #fafaf8; border: none; border-radius: 999px; font: 600 12.5px Onest, Inter, sans-serif; padding: 9px 15px; cursor: pointer; box-shadow: 0 10px 26px rgba(23, 23, 26, 0.25); opacity: 0; pointer-events: none; transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
   .te-pill[data-shown="true"] { opacity: 1; pointer-events: auto; }
-  .te-dot { width: 13px; height: 13px; border-radius: 50%; background: conic-gradient(#e7683c, #f5c644, #55a06f, #2f5af5, #7c6cff, #e7683c); border: 1px solid rgba(255, 255, 255, 0.4); }
+  .te-dot { width: 13px; height: 13px; border-radius: 50%; background: conic-gradient(#4338ca, #818cf8, #22d3ee, #4338ca); border: 1px solid rgba(255, 255, 255, 0.4); }
   .te-grab { display: none; }
-  .te-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid #e3ddd2; flex-shrink: 0; }
-  .te-head b { font-size: 12.5px; color: #14151a; }
-  .te-head small { display: block; font-weight: 500; font-size: 10.5px; color: #8a8b92; margin-top: 2px; }
-  .te-x { border: none; background: none; color: #8a8b92; font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1; }
-  .te-x:hover { background: #f0e9dc; color: #14151a; }
-  .te-body { overflow-y: auto; padding: 10px 14px 12px; font-size: 12.5px; color: #14151a; }
+  .te-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 10px; border-bottom: 1px solid rgba(23, 23, 26, 0.1); flex-shrink: 0; }
+  .te-head b { font-size: 12.5px; color: #17171a; }
+  .te-head small { display: block; font-weight: 500; font-size: 10.5px; color: #6f6f78; margin-top: 2px; }
+  .te-x { border: none; background: none; color: #6f6f78; font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1; }
+  .te-x:hover { background: rgba(67, 56, 202, 0.08); color: #17171a; }
+  .te-body { overflow-y: auto; padding: 10px 14px 12px; font-size: 12.5px; color: #17171a; }
   .te-sec { margin-bottom: 14px; }
-  .te-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8b92; margin-bottom: 7px; }
+  .te-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #85858f; margin-bottom: 7px; }
   .te-presets { display: flex; flex-wrap: wrap; gap: 6px; }
-  .te-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e3ddd2; background: #fffdf9; border-radius: 999px; padding: 4px 10px 4px 5px; font: 600 11.5px Inter, sans-serif; cursor: pointer; color: #14151a; }
+  .te-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(23, 23, 26, 0.1); background: #ffffff; border-radius: 999px; padding: 4px 10px 4px 5px; font: 600 11.5px Onest, Inter, sans-serif; cursor: pointer; color: #17171a; }
   .te-chip .te-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); }
-  .te-chip[aria-pressed="true"] { border-color: #14151a; box-shadow: inset 0 0 0 1px #14151a; }
+  .te-chip[aria-pressed="true"] { border-color: #4338ca; box-shadow: inset 0 0 0 1px #4338ca; }
   .te-crow { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
-  .te-crow input[type="color"] { width: 24px; height: 24px; border: 1px solid #e3ddd2; border-radius: 7px; padding: 1px; background: #fffdf9; cursor: pointer; flex-shrink: 0; }
+  .te-crow input[type="color"] { width: 24px; height: 24px; border: 1px solid rgba(23, 23, 26, 0.1); border-radius: 7px; padding: 1px; background: #ffffff; cursor: pointer; flex-shrink: 0; }
   .te-crow span { flex: 1; font-weight: 550; font-size: 11.5px; }
-  .te-crow code { font: 500 10.5px ui-monospace, monospace; color: #8a8b92; }
-  .te-body select, .te-body input[type="text"] { width: 100%; font: 500 12px Inter, sans-serif; color: #14151a; background: #fffdf9; border: 1px solid #e3ddd2; border-radius: 8px; padding: 6px 8px; }
+  .te-crow code { font: 500 10.5px ui-monospace, monospace; color: #6f6f78; }
+  .te-body select, .te-body input[type="text"] { width: 100%; font: 500 12px Onest, Inter, sans-serif; color: #17171a; background: #ffffff; border: 1px solid rgba(23, 23, 26, 0.1); border-radius: 8px; padding: 6px 8px; }
   .te-body input[type="text"] { margin-top: 6px; }
   .te-srow { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
   .te-srow label { font-size: 11.5px; font-weight: 550; width: 62px; flex-shrink: 0; }
-  .te-srow input[type="range"] { flex: 1; accent-color: #14151a; min-width: 0; }
-  .te-srow output { font: 500 10.5px ui-monospace, monospace; color: #8a8b92; width: 34px; text-align: right; flex-shrink: 0; }
+  .te-srow input[type="range"] { flex: 1; accent-color: #4338ca; min-width: 0; }
+  .te-srow output { font: 500 10.5px ui-monospace, monospace; color: #6f6f78; width: 34px; text-align: right; flex-shrink: 0; }
   .te-segs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-  .te-seg { display: flex; background: #fffdf9; border: 1px solid #e3ddd2; border-radius: 9px; padding: 2px; gap: 2px; }
-  .te-seg button { flex: 1; border: none; background: none; font: 600 11px Inter, sans-serif; color: #6b6c72; padding: 5px 0; border-radius: 7px; cursor: pointer; }
-  .te-seg button[aria-pressed="true"] { background: #14151a; color: #fffdf9; }
-  .te-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid #e3ddd2; flex-shrink: 0; }
-  .te-foot button { flex: 1; font: 600 11.5px Inter, sans-serif; border-radius: 8px; padding: 7px 0; cursor: pointer; }
-  .te-copy { background: #14151a; color: #fffdf9; border: 1px solid #14151a; }
-  .te-link { background: #fffdf9; color: #14151a; border: 1px solid #e3ddd2; }
+  .te-seg { display: flex; background: #ffffff; border: 1px solid rgba(23, 23, 26, 0.1); border-radius: 9px; padding: 2px; gap: 2px; }
+  .te-seg button { flex: 1; border: none; background: none; font: 600 11px Onest, Inter, sans-serif; color: #6f6f78; padding: 5px 0; border-radius: 7px; cursor: pointer; }
+  .te-seg button[aria-pressed="true"] { background: #17171a; color: #fafaf8; }
+  .te-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(23, 23, 26, 0.1); flex-shrink: 0; }
+  .te-foot button { flex: 1; font: 600 11.5px Onest, Inter, sans-serif; border-radius: 8px; padding: 7px 0; cursor: pointer; }
+  .te-copy { background: #17171a; color: #fafaf8; border: 1px solid #17171a; }
+  .te-link { background: #ffffff; color: #17171a; border: 1px solid rgba(23, 23, 26, 0.1); }
   @media (prefers-reduced-motion: reduce) {
     .te-card, .te-pill { transition: none; }
   }
   @media (max-width: 640px) {
-    .te-card { top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: 72vh; border-radius: 18px 18px 0 0; border-left: none; border-right: none; border-bottom: none; padding-bottom: env(safe-area-inset-bottom, 0px); transform-origin: bottom center; box-shadow: 0 -16px 44px rgba(20, 21, 26, 0.3); }
+    .te-card { top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: 72vh; border-radius: 18px 18px 0 0; border-left: none; border-right: none; border-bottom: none; padding-bottom: env(safe-area-inset-bottom, 0px); transform-origin: bottom center; box-shadow: 0 -16px 44px rgba(23, 23, 26, 0.3); }
     .te-card[data-closed="true"] { transform: translateY(105%); opacity: 1; }
     .te-pill { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
-    .te-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: #d7d2c7; margin: 8px auto 0; flex-shrink: 0; }
+    .te-grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: rgba(23, 23, 26, 0.18); margin: 8px auto 0; flex-shrink: 0; }
     .te-x { padding: 6px 10px; }
   }
 `;