@vendoai/vendo 0.4.3 → 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, vendoRootWrapperSource, 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";
@@ -333,6 +333,16 @@ async function manualWiringLines(root, layout, withRegistry) {
             `${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") {
@@ -495,7 +505,12 @@ export function wireNextLayout(source, wrapperSpecifier) {
 }
 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;
@@ -503,7 +518,40 @@ async function buildPlan(options, confirmAuth, selectAuth) {
     let registryPath = null;
     let withRegistry = false;
     let layout = { kind: "manual" };
-    if (framework === "express") {
+    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) {
@@ -773,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

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; }
   }
 `;