@guuey/create-agentic-app 0.10.0 → 0.12.0

package/dist/templates/base/claude-agent-sdk/web/src/pages/Landing.tsx

@@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
 import { appConfig, isLinked } from "../config";
 import { CHAT_PATH, HOME_PATH } from "../routes";
 import { mountWidget, type WidgetOutcome } from "../lib/widget";
+import { QrLink } from "../components/QrLink";
 
 export function Landing() {
   const [widget, setWidget] = useState<WidgetOutcome | "unlinked" | "loading">(
@@ -19,19 +20,33 @@ export function Landing() {
     mountWidget((outcome) => setWidget(outcome));
   }, []);
 
+  // The demo posture (spec §2.3): a REAL product site whose hero's one job
+  // is getting the visitor INTO the demo — big CTA to the console page +
+  // a QR to continue on mobile via the portal.
+  const portalTarget =
+    appConfig.link !== null
+      ? `${appConfig.link.portalUrl}/agent/${appConfig.link.slug ?? appConfig.link.appId}`
+      : null;
+
   return (
     <main className="page landing">
-      <section className="hero">
+      <section className="hero" data-tour="hero">
         <h1>{appConfig.copy.landing.headline}</h1>
         <p>{appConfig.copy.landing.sub}</p>
         <div className="hero-actions">
           <Link to={CHAT_PATH} className="btn btn-accent">
-            Open the chat
+            {appConfig.demoMode ? "Enter the demo" : "Open the chat"}
           </Link>
           <Link to={HOME_PATH} className="btn">
             How this app is wired
           </Link>
         </div>
+        {appConfig.demoMode && portalTarget !== null ? (
+          <div className="hero-qr">
+            <p className="hint">Or continue on your phone:</p>
+            <QrLink url={portalTarget} size={140} />
+          </div>
+        ) : null}
         {widget === "unlinked" ? (
           <p className="hint">
             The floating agent launcher appears here once the app is bound to a

package/dist/templates/base/claude-agent-sdk/web/src/vite-env.d.ts

@@ -1 +1,14 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  /**
+   * Optional external-script hook (guuey#303): a URL loaded at boot — the
+   * demo tour's bundle rides this in the demo apps; unset in customer
+   * builds.
+   */
+  readonly VITE_DEMO_TOUR_SRC?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/dist/templates/base/google-adk/package.json

@@ -16,8 +16,8 @@
   },
   "devDependencies": {
     "@ggui-ai/cli": "0.6.3",
-    "@guuey/cli": "0.10.0",
-    "@guuey/config": "0.10.0",
+    "@guuey/cli": "0.12.0",
+    "@guuey/config": "0.12.0",
     "tsup": "^8.5.0",
     "tsx": "^4.19.0",
     "typescript": "^5.8.0"

package/dist/templates/base/google-adk/scripts/bootstrap.mjs

@@ -121,6 +121,27 @@ async function guuey(args) {
   }
 }
 
+// ── ggui.json theme sync (guuey#302 scaffold hygiene) ───────────────────────
+
+/**
+ * Keep `ggui/ggui.json`'s theme MODE in step with guuey.app.json so the
+ * local `ggui serve` preview matches the site (the scaffold used to ship
+ * the two contradicting each other: light site, dark ggui preview). Only
+ * `mode` syncs — `preset` is ggui-side vocabulary and stays the author's
+ * choice. NOTE: the deployed render's theme is platform data (`guuey
+ * deploy` deliberately ignores this block; guuey#304 owns the production
+ * side) — this sync is about local-preview honesty.
+ */
+function syncGguiTheme(config) {
+  const gguiJsonPath = join(projectRoot, "ggui", "ggui.json");
+  if (!existsSync(gguiJsonPath)) return;
+  const ggui = JSON.parse(readFileSync(gguiJsonPath, "utf8"));
+  if (ggui.theme?.mode === config.theme.mode) return;
+  ggui.theme = { ...(ggui.theme ?? {}), mode: config.theme.mode };
+  writeFileSync(gguiJsonPath, `${JSON.stringify(ggui, null, 2)}\n`, "utf8");
+  console.log(`ggui/ggui.json theme mode → ${config.theme.mode} (local preview matches the site).`);
+}
+
 // ── AGENTS.md managed block ─────────────────────────────────────────────────
 
 function managedBlock(config) {
@@ -367,6 +388,7 @@ async function main() {
   // extraction (`--example`), the demo chrome turns off here.
   config.demoMode = false;
   writeConfig(config);
+  syncGguiTheme(config);
   regenerateAgentsMd(config);
 
   console.log(`\nConfigured "${name}" — guuey.app.json written, AGENTS.md updated.`);

package/dist/templates/base/google-adk/web/package.json

@@ -9,14 +9,16 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@guuey/chat": "0.10.0",
+    "@guuey/chat": "0.12.0",
     "oidc-client-ts": "^3.1.0",
+    "qrcode": "^1.5.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",

package/dist/templates/base/google-adk/web/src/components/AgentChat.tsx

@@ -10,11 +10,43 @@
  */
 import { useEffect, useState, type CSSProperties } from "react";
 import { GuueyChat } from "@guuey/chat/react";
+import type { GuueyChatHandle } from "@guuey/chat/react";
+import type { PlanViewSummary, ViewRefItem } from "@guuey/chat";
 import { agentEndpointUrl, appConfig, historyBaseUrl } from "../config";
 import { currentIdentityMode, ensureGuestSecret } from "../lib/identity";
 import { getBearerToken, currentUser, oidcConfigured } from "../lib/oidc";
 
-export function AgentChat({ className, style }: { className?: string; style?: CSSProperties }) {
+/**
+ * The chat-rail bridge (agentic-app shell): with `viewsBridge` set, the
+ * chat runs the kit's CHIPS presentation — generative views collapse to
+ * compact chips in the rail, the full renders belong to the host's main
+ * canvas (fed by `onViewsChange`), and chip clicks re-select
+ * (`onViewRef` → `promotedViewKey`, the browser-history mechanic).
+ */
+export interface ViewsBridge {
+  promotedViewKey?: string | undefined;
+  onViewRef: (item: ViewRefItem) => void;
+  onViewsChange: (views: PlanViewSummary[]) => void;
+}
+
+// Module scope on purpose: props want STABLE identities. An inline
+// `policy={{ … }}` literal (or per-render arrow getters) re-mints every
+// render; the kit stabilizes structurally since 0.11.0, but the template
+// models the correct shape — one identity for the app's whole life.
+const RAIL_POLICY = { view: { timeoutMs: 8000, presentation: "chips" as const } };
+
+export function AgentChat({
+  className,
+  style,
+  viewsBridge,
+  onReady,
+}: {
+  className?: string;
+  style?: CSSProperties;
+  viewsBridge?: ViewsBridge;
+  /** Receives the chat handle — the AppShell mounts canvas views with `handle.viewSlotProps()`. */
+  onReady?: (handle: GuueyChatHandle) => void;
+}) {
   // The user's CHOSEN mode wins: an explicit "Continue as guest" must never
   // be shadowed by a cached OIDC session. Only when no choice is recorded
   // does a live session imply oidc.
@@ -43,11 +75,22 @@ export function AgentChat({ className, style }: { className?: string; style?: CS
     mode: appConfig.theme.mode,
     className,
     style,
+    ...(onReady !== undefined ? { onReady } : {}),
+    ...(viewsBridge !== undefined
+      ? {
+          policy: RAIL_POLICY,
+          promotedViewKey: viewsBridge.promotedViewKey,
+          onViewRef: viewsBridge.onViewRef,
+          onViewsChange: viewsBridge.onViewsChange,
+        }
+      : {}),
   };
 
+  // The lib functions ARE the stable getters — no wrapping arrows (a fresh
+  // closure per render is the identity churn RAIL_POLICY exists to avoid).
   return identity === "oidc" ? (
-    <GuueyChat {...shared} getAccessToken={() => getBearerToken()} />
+    <GuueyChat {...shared} getAccessToken={getBearerToken} />
   ) : (
-    <GuueyChat {...shared} getGuestSecret={() => ensureGuestSecret()} />
+    <GuueyChat {...shared} getGuestSecret={ensureGuestSecret} />
   );
 }

package/dist/templates/base/google-adk/web/src/components/QrLink.tsx

@@ -0,0 +1,25 @@
+/** A QR code for a URL, with the plain link beneath — mobile hand-off. */
+import { useEffect, useRef, useState } from "react";
+import QRCode from "qrcode";
+
+export function QrLink({ url, size = 200 }: { url: string; size?: number }) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    QRCode.toCanvas(canvasRef.current, url, { width: size, margin: 1 }).catch((err: unknown) => {
+      setError(err instanceof Error ? err.message : String(err));
+    });
+  }, [url, size]);
+
+  return (
+    <span className="qr-link">
+      <canvas ref={canvasRef} className="qr" />
+      <a href={url} target="_blank" rel="noreferrer">
+        {url}
+      </a>
+      {error ? <span className="error">QR render failed: {error}</span> : null}
+    </span>
+  );
+}

package/dist/templates/base/google-adk/web/src/main.tsx

@@ -17,6 +17,20 @@ document.documentElement.dataset.mode = appConfig.theme.mode;
 document.documentElement.style.setProperty("--app-accent", appConfig.theme.accent);
 document.title = appConfig.brand.name;
 
+// Optional external script (the analytics-snippet pattern): a build-time
+// env names a script URL and this app loads it — the demo tour rides this
+// hook (its bundle lives OUTSIDE the template; guuey#303). The script can
+// anchor on the `data-tour` attributes the pages carry and listen for the
+// `demo:render-complete` CustomEvent the app shell dispatches when a
+// generative view first lands on the canvas.
+const tourSrc = import.meta.env.VITE_DEMO_TOUR_SRC;
+if (tourSrc !== undefined && tourSrc !== "") {
+  const script = document.createElement("script");
+  script.src = tourSrc;
+  script.defer = true;
+  document.head.appendChild(script);
+}
+
 const router = createBrowserRouter([
   {
     element: <Shell />,

package/dist/templates/base/google-adk/web/src/pages/Landing.tsx

@@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
 import { appConfig, isLinked } from "../config";
 import { CHAT_PATH, HOME_PATH } from "../routes";
 import { mountWidget, type WidgetOutcome } from "../lib/widget";
+import { QrLink } from "../components/QrLink";
 
 export function Landing() {
   const [widget, setWidget] = useState<WidgetOutcome | "unlinked" | "loading">(
@@ -19,19 +20,33 @@ export function Landing() {
     mountWidget((outcome) => setWidget(outcome));
   }, []);
 
+  // The demo posture (spec §2.3): a REAL product site whose hero's one job
+  // is getting the visitor INTO the demo — big CTA to the console page +
+  // a QR to continue on mobile via the portal.
+  const portalTarget =
+    appConfig.link !== null
+      ? `${appConfig.link.portalUrl}/agent/${appConfig.link.slug ?? appConfig.link.appId}`
+      : null;
+
   return (
     <main className="page landing">
-      <section className="hero">
+      <section className="hero" data-tour="hero">
         <h1>{appConfig.copy.landing.headline}</h1>
         <p>{appConfig.copy.landing.sub}</p>
         <div className="hero-actions">
           <Link to={CHAT_PATH} className="btn btn-accent">
-            Open the chat
+            {appConfig.demoMode ? "Enter the demo" : "Open the chat"}
           </Link>
           <Link to={HOME_PATH} className="btn">
             How this app is wired
           </Link>
         </div>
+        {appConfig.demoMode && portalTarget !== null ? (
+          <div className="hero-qr">
+            <p className="hint">Or continue on your phone:</p>
+            <QrLink url={portalTarget} size={140} />
+          </div>
+        ) : null}
         {widget === "unlinked" ? (
           <p className="hint">
             The floating agent launcher appears here once the app is bound to a

package/dist/templates/base/google-adk/web/src/vite-env.d.ts

@@ -1 +1,14 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  /**
+   * Optional external-script hook (guuey#303): a URL loaded at boot — the
+   * demo tour's bundle rides this in the demo apps; unset in customer
+   * builds.
+   */
+  readonly VITE_DEMO_TOUR_SRC?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/dist/templates/base/openai-agents-sdk/README.md

@@ -15,9 +15,11 @@ locally with one command, and deployable to guuey with one more.
 ├── prompts/system.md    # system prompt, referenced from guuey.json#agent.systemPrompt.file
 ├── mcps/todo/           # the "copy-me" custom MCP server — @modelcontextprotocol/sdk,
 │                         #   Streamable HTTP, in-memory todo list, port :6782
-├── ggui/                # ggui.json + blueprints/ + themes/ — generative-UI config.
-│                         #   `ggui serve` runs against this locally; it's pushed to your
-│                         #   deployed app's guuey-managed ggui instance on `guuey deploy`.
+├── ggui/                # ggui.json + blueprints/ — generative-UI config.
+│                         #   `ggui serve` runs against this locally; `guuey deploy` pushes
+│                         #   generation config + blueprints (the deployed RENDER THEME is
+│                         #   platform data, not this dir — ggui.json#theme is local-preview
+│                         #   only, kept in step with guuey.app.json by `pnpm bootstrap`).
 ├── web/                 # the product frontend (Vite + React on @guuey/chat):
 │                         #   landing (widget) · login (guest + BYO-OIDC seam) · home
 │                         #   (status + distribution guide) · the chat surface
@@ -127,7 +129,7 @@ anything user-visible changes:
    as its own hosted MCP server (build → deploy → registry), then writes the
    resulting server id back into `guuey.json`. This scaffold has none — the
    todo MCP is `colocated`, so this leg is a no-op here.
-2. **ggui asset leg** — pushes `ggui/` (ggui.json, blueprints, themes) to your
+2. **ggui asset leg** — pushes `ggui/` (generation config, blueprints) to your
    app's guuey-managed ggui instance.
 3. **Agent leg** — builds `src/worker.ts` into `guuey.worker.js`, packs the
    project root (including `mcps/`), and deploys it as a gVisor-isolated,

package/dist/templates/base/openai-agents-sdk/package.json

@@ -12,12 +12,12 @@
   },
   "dependencies": {
     "@openai/agents": "^0.12.0",
-    "@guuey/config": "0.10.0",
-    "@guuey/worker": "0.10.0"
+    "@guuey/config": "0.12.0",
+    "@guuey/worker": "0.12.0"
   },
   "devDependencies": {
     "@ggui-ai/cli": "0.6.3",
-    "@guuey/cli": "0.10.0",
+    "@guuey/cli": "0.12.0",
     "tsup": "^8.5.0",
     "tsx": "^4.19.0",
     "typescript": "^5.8.0"

package/dist/templates/base/openai-agents-sdk/scripts/bootstrap.mjs

@@ -121,6 +121,27 @@ async function guuey(args) {
   }
 }
 
+// ── ggui.json theme sync (guuey#302 scaffold hygiene) ───────────────────────
+
+/**
+ * Keep `ggui/ggui.json`'s theme MODE in step with guuey.app.json so the
+ * local `ggui serve` preview matches the site (the scaffold used to ship
+ * the two contradicting each other: light site, dark ggui preview). Only
+ * `mode` syncs — `preset` is ggui-side vocabulary and stays the author's
+ * choice. NOTE: the deployed render's theme is platform data (`guuey
+ * deploy` deliberately ignores this block; guuey#304 owns the production
+ * side) — this sync is about local-preview honesty.
+ */
+function syncGguiTheme(config) {
+  const gguiJsonPath = join(projectRoot, "ggui", "ggui.json");
+  if (!existsSync(gguiJsonPath)) return;
+  const ggui = JSON.parse(readFileSync(gguiJsonPath, "utf8"));
+  if (ggui.theme?.mode === config.theme.mode) return;
+  ggui.theme = { ...(ggui.theme ?? {}), mode: config.theme.mode };
+  writeFileSync(gguiJsonPath, `${JSON.stringify(ggui, null, 2)}\n`, "utf8");
+  console.log(`ggui/ggui.json theme mode → ${config.theme.mode} (local preview matches the site).`);
+}
+
 // ── AGENTS.md managed block ─────────────────────────────────────────────────
 
 function managedBlock(config) {
@@ -367,6 +388,7 @@ async function main() {
   // extraction (`--example`), the demo chrome turns off here.
   config.demoMode = false;
   writeConfig(config);
+  syncGguiTheme(config);
   regenerateAgentsMd(config);
 
   console.log(`\nConfigured "${name}" — guuey.app.json written, AGENTS.md updated.`);

package/dist/templates/base/openai-agents-sdk/web/package.json

@@ -9,14 +9,16 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@guuey/chat": "0.10.0",
+    "@guuey/chat": "0.12.0",
     "oidc-client-ts": "^3.1.0",
+    "qrcode": "^1.5.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.0"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.4",

package/dist/templates/base/openai-agents-sdk/web/src/components/AgentChat.tsx

@@ -10,11 +10,43 @@
  */
 import { useEffect, useState, type CSSProperties } from "react";
 import { GuueyChat } from "@guuey/chat/react";
+import type { GuueyChatHandle } from "@guuey/chat/react";
+import type { PlanViewSummary, ViewRefItem } from "@guuey/chat";
 import { agentEndpointUrl, appConfig, historyBaseUrl } from "../config";
 import { currentIdentityMode, ensureGuestSecret } from "../lib/identity";
 import { getBearerToken, currentUser, oidcConfigured } from "../lib/oidc";
 
-export function AgentChat({ className, style }: { className?: string; style?: CSSProperties }) {
+/**
+ * The chat-rail bridge (agentic-app shell): with `viewsBridge` set, the
+ * chat runs the kit's CHIPS presentation — generative views collapse to
+ * compact chips in the rail, the full renders belong to the host's main
+ * canvas (fed by `onViewsChange`), and chip clicks re-select
+ * (`onViewRef` → `promotedViewKey`, the browser-history mechanic).
+ */
+export interface ViewsBridge {
+  promotedViewKey?: string | undefined;
+  onViewRef: (item: ViewRefItem) => void;
+  onViewsChange: (views: PlanViewSummary[]) => void;
+}
+
+// Module scope on purpose: props want STABLE identities. An inline
+// `policy={{ … }}` literal (or per-render arrow getters) re-mints every
+// render; the kit stabilizes structurally since 0.11.0, but the template
+// models the correct shape — one identity for the app's whole life.
+const RAIL_POLICY = { view: { timeoutMs: 8000, presentation: "chips" as const } };
+
+export function AgentChat({
+  className,
+  style,
+  viewsBridge,
+  onReady,
+}: {
+  className?: string;
+  style?: CSSProperties;
+  viewsBridge?: ViewsBridge;
+  /** Receives the chat handle — the AppShell mounts canvas views with `handle.viewSlotProps()`. */
+  onReady?: (handle: GuueyChatHandle) => void;
+}) {
   // The user's CHOSEN mode wins: an explicit "Continue as guest" must never
   // be shadowed by a cached OIDC session. Only when no choice is recorded
   // does a live session imply oidc.
@@ -43,11 +75,22 @@ export function AgentChat({ className, style }: { className?: string; style?: CS
     mode: appConfig.theme.mode,
     className,
     style,
+    ...(onReady !== undefined ? { onReady } : {}),
+    ...(viewsBridge !== undefined
+      ? {
+          policy: RAIL_POLICY,
+          promotedViewKey: viewsBridge.promotedViewKey,
+          onViewRef: viewsBridge.onViewRef,
+          onViewsChange: viewsBridge.onViewsChange,
+        }
+      : {}),
   };
 
+  // The lib functions ARE the stable getters — no wrapping arrows (a fresh
+  // closure per render is the identity churn RAIL_POLICY exists to avoid).
   return identity === "oidc" ? (
-    <GuueyChat {...shared} getAccessToken={() => getBearerToken()} />
+    <GuueyChat {...shared} getAccessToken={getBearerToken} />
   ) : (
-    <GuueyChat {...shared} getGuestSecret={() => ensureGuestSecret()} />
+    <GuueyChat {...shared} getGuestSecret={ensureGuestSecret} />
   );
 }

package/dist/templates/base/openai-agents-sdk/web/src/components/QrLink.tsx

@@ -0,0 +1,25 @@
+/** A QR code for a URL, with the plain link beneath — mobile hand-off. */
+import { useEffect, useRef, useState } from "react";
+import QRCode from "qrcode";
+
+export function QrLink({ url, size = 200 }: { url: string; size?: number }) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+    QRCode.toCanvas(canvasRef.current, url, { width: size, margin: 1 }).catch((err: unknown) => {
+      setError(err instanceof Error ? err.message : String(err));
+    });
+  }, [url, size]);
+
+  return (
+    <span className="qr-link">
+      <canvas ref={canvasRef} className="qr" />
+      <a href={url} target="_blank" rel="noreferrer">
+        {url}
+      </a>
+      {error ? <span className="error">QR render failed: {error}</span> : null}
+    </span>
+  );
+}

package/dist/templates/base/openai-agents-sdk/web/src/main.tsx

@@ -17,6 +17,20 @@ document.documentElement.dataset.mode = appConfig.theme.mode;
 document.documentElement.style.setProperty("--app-accent", appConfig.theme.accent);
 document.title = appConfig.brand.name;
 
+// Optional external script (the analytics-snippet pattern): a build-time
+// env names a script URL and this app loads it — the demo tour rides this
+// hook (its bundle lives OUTSIDE the template; guuey#303). The script can
+// anchor on the `data-tour` attributes the pages carry and listen for the
+// `demo:render-complete` CustomEvent the app shell dispatches when a
+// generative view first lands on the canvas.
+const tourSrc = import.meta.env.VITE_DEMO_TOUR_SRC;
+if (tourSrc !== undefined && tourSrc !== "") {
+  const script = document.createElement("script");
+  script.src = tourSrc;
+  script.defer = true;
+  document.head.appendChild(script);
+}
+
 const router = createBrowserRouter([
   {
     element: <Shell />,

package/dist/templates/base/openai-agents-sdk/web/src/pages/Landing.tsx

@@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
 import { appConfig, isLinked } from "../config";
 import { CHAT_PATH, HOME_PATH } from "../routes";
 import { mountWidget, type WidgetOutcome } from "../lib/widget";
+import { QrLink } from "../components/QrLink";
 
 export function Landing() {
   const [widget, setWidget] = useState<WidgetOutcome | "unlinked" | "loading">(
@@ -19,19 +20,33 @@ export function Landing() {
     mountWidget((outcome) => setWidget(outcome));
   }, []);
 
+  // The demo posture (spec §2.3): a REAL product site whose hero's one job
+  // is getting the visitor INTO the demo — big CTA to the console page +
+  // a QR to continue on mobile via the portal.
+  const portalTarget =
+    appConfig.link !== null
+      ? `${appConfig.link.portalUrl}/agent/${appConfig.link.slug ?? appConfig.link.appId}`
+      : null;
+
   return (
     <main className="page landing">
-      <section className="hero">
+      <section className="hero" data-tour="hero">
         <h1>{appConfig.copy.landing.headline}</h1>
         <p>{appConfig.copy.landing.sub}</p>
         <div className="hero-actions">
           <Link to={CHAT_PATH} className="btn btn-accent">
-            Open the chat
+            {appConfig.demoMode ? "Enter the demo" : "Open the chat"}
           </Link>
           <Link to={HOME_PATH} className="btn">
             How this app is wired
           </Link>
         </div>
+        {appConfig.demoMode && portalTarget !== null ? (
+          <div className="hero-qr">
+            <p className="hint">Or continue on your phone:</p>
+            <QrLink url={portalTarget} size={140} />
+          </div>
+        ) : null}
         {widget === "unlinked" ? (
           <p className="hint">
             The floating agent launcher appears here once the app is bound to a

package/dist/templates/base/openai-agents-sdk/web/src/vite-env.d.ts

@@ -1 +1,14 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  /**
+   * Optional external-script hook (guuey#303): a URL loaded at boot — the
+   * demo tour's bundle rides this in the demo apps; unset in customer
+   * builds.
+   */
+  readonly VITE_DEMO_TOUR_SRC?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guuey/create-agentic-app",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Scaffold a guuey agentic app: code-mode agent + custom MCP + ggui + web, local pnpm dev, one-command guuey deploy.",
   "license": "MIT",
   "type": "module",
@@ -25,8 +25,8 @@
     "tsup": "^8.5.0",
     "typescript": "^5.8.0",
     "vitest": "^3.2.4",
-    "@guuey/config": "0.10.0",
-    "@guuey/worker": "0.10.0"
+    "@guuey/worker": "0.12.0",
+    "@guuey/config": "0.12.0"
   },
   "publishConfig": {
     "access": "public"

package/dist/templates/agentic-app/claude-agent-sdk/web/src/pages/AgentCanvas.tsx

@@ -1,14 +0,0 @@
-/**
- * The fullscreen agent — the whole main canvas is the chat, so generative
- * UI cards render at real size. This is the same configured `<AgentChat>`
- * every chat surface in this template uses.
- */
-import { AgentChat } from "../components/AgentChat";
-
-export function AgentCanvas() {
-  return (
-    <div className="agent-canvas">
-      <AgentChat className="chat-fill" />
-    </div>
-  );
-}

package/dist/templates/agentic-app/google-adk/web/src/pages/AgentCanvas.tsx

@@ -1,14 +0,0 @@
-/**
- * The fullscreen agent — the whole main canvas is the chat, so generative
- * UI cards render at real size. This is the same configured `<AgentChat>`
- * every chat surface in this template uses.
- */
-import { AgentChat } from "../components/AgentChat";
-
-export function AgentCanvas() {
-  return (
-    <div className="agent-canvas">
-      <AgentChat className="chat-fill" />
-    </div>
-  );
-}

package/dist/templates/agentic-app/openai-agents-sdk/web/src/pages/AgentCanvas.tsx

@@ -1,14 +0,0 @@
-/**
- * The fullscreen agent — the whole main canvas is the chat, so generative
- * UI cards render at real size. This is the same configured `<AgentChat>`
- * every chat surface in this template uses.
- */
-import { AgentChat } from "../components/AgentChat";
-
-export function AgentCanvas() {
-  return (
-    <div className="agent-canvas">
-      <AgentChat className="chat-fill" />
-    </div>
-  );
-}