@guuey/create-agentic-app 0.10.0 → 0.11.0

package/dist/templates/agentic-app/claude-agent-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/agentic-app/claude-agent-sdk/package.json

@@ -12,12 +12,12 @@
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "^0.3.199",
-    "@guuey/config": "0.10.0",
-    "@guuey/worker": "0.10.0"
+    "@guuey/config": "0.11.0",
+    "@guuey/worker": "0.11.0"
   },
   "devDependencies": {
     "@ggui-ai/cli": "0.6.3",
-    "@guuey/cli": "0.10.0",
+    "@guuey/cli": "0.11.0",
     "tsup": "^8.5.0",
     "tsx": "^4.19.0",
     "typescript": "^5.8.0"

package/dist/templates/agentic-app/claude-agent-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/agentic-app/claude-agent-sdk/web/package.json

@@ -9,7 +9,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@guuey/chat": "0.10.0",
+    "@guuey/chat": "0.11.0",
+    "@guuey/mcp-apps-host": "0.11.0",
     "oidc-client-ts": "^3.1.0",
     "qrcode": "^1.5.4",
     "react": "^19.0.0",

package/dist/templates/agentic-app/claude-agent-sdk/web/src/components/AgentChat.tsx

@@ -10,11 +10,39 @@
  */
 import { useEffect, useState, type CSSProperties } from "react";
 import { GuueyChat } 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,
+}: {
+  className?: string;
+  style?: CSSProperties;
+  viewsBridge?: ViewsBridge;
+}) {
   // 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 +71,21 @@ export function AgentChat({ className, style }: { className?: string; style?: CS
     mode: appConfig.theme.mode,
     className,
     style,
+    ...(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/agentic-app/claude-agent-sdk/web/src/components/AppShell.tsx

@@ -1,23 +1,30 @@
 /**
- * The split sidebar (the agentic-app pattern):
+ * The CHAT-RAIL shell (guuey#303, founder-confirmed):
  *
  *   ┌──────────┬────────────────────────┐
  *   │ ☰ Menu 1 │                        │
- *   │ ☰ Menu 2 │   FULLSCREEN AGENT     │
- *   │ ☰ Menu 3 │   chat + generative    │
- *   ├──────────┤   UI cards on the      │
- *   │ ● Agent  │   whole main canvas    │
- *   │ 📱 Talk   │                        │
- *   │   mobile │                        │
+ *   │ ☰ Menu 2 │   MAIN CANVAS          │
+ *   │ ☰ Menu 3 │   your pages — or the  │
+ *   ├──────────┤   full generated UI    │
+ *   │ AGENT    │   when the agent draws │
+ *   │ RAIL     │   one                  │
+ *   │ (chat)   │                        │
  *   └──────────┴────────────────────────┘
  *
- * Upper sidebar = your product's menus. Lower sidebar = the agent DOCK.
- * Activating the dock swaps the MAIN canvas to the fullscreen agent (the
- * generative-UI cards get the whole width) — the agent is never a cramped
- * pane inside the sidebar. Selecting a menu swaps the canvas back.
+ * Upper sidebar = your product's menus. LOWER sidebar = the embed-SDK
+ * agent rail — the visitor TYPES THERE; generative views collapse to
+ * compact CHIPS in the rail (the kit's chips presentation) and the full
+ * render takes the MAIN canvas. Chips are the history: clicking one
+ * re-selects its render onto the canvas ("just like a web browser's
+ * history"); a new render navigates forward automatically; picking a
+ * menu swaps the canvas back to your pages.
  */
+import { useCallback, useRef, useState } from "react";
 import { NavLink, Outlet, useNavigate } from "react-router-dom";
+import type { PlanViewSummary, ViewRefItem } from "@guuey/chat";
+import { GuueyView } from "@guuey/mcp-apps-host/react";
 import { appConfig } from "../config";
+import { AgentChat } from "../components/AgentChat";
 import { currentIdentityMode, logOut } from "../lib/identity";
 import { oidcConfigured, signOutOidc } from "../lib/oidc";
 
@@ -25,6 +32,41 @@ export function AppShell() {
   const navigate = useNavigate();
   const mode = currentIdentityMode();
 
+  // The rail↔canvas bridge: the kit's view roster (mount material lives
+  // here, the rail shows only chips), the selected key, and whether the
+  // canvas currently shows a view or the routed pages.
+  const [views, setViews] = useState<PlanViewSummary[]>([]);
+  const [selectedKey, setSelectedKey] = useState<string | undefined>(undefined);
+  const [canvasShowsView, setCanvasShowsView] = useState(false);
+  const newestKeyRef = useRef<string | undefined>(undefined);
+
+  const onViewsChange = useCallback((next: PlanViewSummary[]) => {
+    setViews(next);
+    // Browser-history forward-navigation: a NEW live render takes the
+    // canvas. (Reversed find = newest mountable; live entries sit after
+    // history in the roster's transcript order.)
+    const newest = [...next].reverse().find((v) => v.mount !== null && v.phase !== "expired");
+    if (newest !== undefined && newest.key !== newestKeyRef.current) {
+      newestKeyRef.current = newest.key;
+      setSelectedKey(newest.key);
+      setCanvasShowsView(true);
+      // The demo-tour hook (guuey#303): step machines outside the app can
+      // key on "the agent just drew UI".
+      window.dispatchEvent(
+        new CustomEvent("demo:render-complete", {
+          detail: { key: newest.key, title: newest.title },
+        }),
+      );
+    }
+  }, []);
+
+  const onViewRef = useCallback((item: ViewRefItem) => {
+    setSelectedKey(item.key);
+    setCanvasShowsView(true);
+  }, []);
+
+  const selected = views.find((v) => v.key === selectedKey && v.mount !== null);
+
   async function handleLogOut() {
     if (mode === "oidc" && oidcConfigured()) await signOutOidc();
     logOut();
@@ -40,24 +82,56 @@ export function AppShell() {
             <span>{appConfig.brand.name}</span>
           </div>
           <nav className="sidebar-menus">
-            <NavLink to="/app" end>
+            {/* Picking a menu swaps the canvas back to your pages. */}
+            <NavLink to="/app" end onClick={() => setCanvasShowsView(false)}>
               Dashboard
             </NavLink>
-            <NavLink to="/app/reports">Reports</NavLink>
-            <NavLink to="/app/setup">Setup</NavLink>
-          </nav>
-          <nav className="sidebar-dock">
-            <NavLink to="/app/agent" className="dock-agent">
-              <span className="dock-dot" /> Agent
+            <NavLink to="/app/reports" onClick={() => setCanvasShowsView(false)}>
+              Reports
+            </NavLink>
+            <NavLink to="/app/setup" onClick={() => setCanvasShowsView(false)}>
+              Setup
+            </NavLink>
+            <NavLink to="/app/mobile" onClick={() => setCanvasShowsView(false)}>
+              📱 Talk on mobile
             </NavLink>
-            <NavLink to="/app/mobile">📱 Talk on mobile</NavLink>
             <button type="button" className="dock-logout" onClick={() => void handleLogOut()}>
               Log out{mode === "guest" ? " (guest)" : ""}
             </button>
           </nav>
+          <div className="agent-rail" data-tour="agent-rail">
+            <AgentChat
+              className="rail-chat"
+              viewsBridge={{ promotedViewKey: selectedKey, onViewRef, onViewsChange }}
+            />
+          </div>
         </aside>
-        <main className="canvas">
-          <Outlet />
+        <main className="canvas" data-tour="canvas">
+          {canvasShowsView && selected !== undefined && selected.mount !== null ? (
+            <div className="canvas-view">
+              <header className="canvas-view-bar">
+                <span>{selected.title}</span>
+                <button type="button" className="btn" onClick={() => setCanvasShowsView(false)}>
+                  Back to {appConfig.brand.name}
+                </button>
+              </header>
+              {selected.mount.channel !== "locator" ? (
+                <GuueyView
+                  key={selected.key}
+                  mount={selected.mount}
+                  title={selected.title}
+                  className="canvas-view-mount"
+                />
+              ) : (
+                // A locator still resolving — the kit reads it and the next
+                // roster emission carries the material (a FAILED read
+                // surfaces as the chip's expired state instead).
+                <p className="calm canvas-view-loading">Loading card…</p>
+              )}
+            </div>
+          ) : (
+            <Outlet />
+          )}
         </main>
       </div>
     </div>

package/dist/templates/agentic-app/claude-agent-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/agentic-app/claude-agent-sdk/web/src/main.tsx

@@ -13,7 +13,6 @@ import { Login } from "./pages/Login";
 import { Home } from "./pages/Home";
 import { Dashboard } from "./pages/Dashboard";
 import { Reports } from "./pages/Reports";
-import { AgentCanvas } from "./pages/AgentCanvas";
 import { TalkOnMobile } from "./pages/TalkOnMobile";
 
 document.documentElement.dataset.mode = appConfig.theme.mode;
@@ -30,14 +29,14 @@ const router = createBrowserRouter([
     ],
   },
   {
-    // The product: split sidebar, fullscreen-swap agent canvas.
+    // The product: chat-rail shell — the agent rail in the lower
+    // sidebar, generated UI on the main canvas (guuey#303).
     path: "/app",
     element: <AppShell />,
     children: [
       { index: true, element: <Dashboard /> },
       { path: "reports", element: <Reports /> },
       { path: "setup", element: <Home /> },
-      { path: "agent", element: <AgentCanvas /> },
       { path: "mobile", element: <TalkOnMobile /> },
     ],
   },

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

@@ -12,15 +12,12 @@ export function Dashboard() {
       <h1>Dashboard</h1>
       <p className="calm">
         This is your product's canvas — replace this page with the real thing. The agent lives in
-        the dock at the bottom of the sidebar; activating it swaps this whole canvas to the
-        fullscreen agent.
+        the RAIL at the bottom of the sidebar: type there, and any UI the agent draws takes this
+        whole canvas (the rail's chips are the history — click one to bring its render back).
       </p>
       <section className="card">
         <h2>Getting oriented</h2>
         <ul>
-          <li>
-            <Link to="/app/agent">● Agent</Link> — the fullscreen chat with generative UI
-          </li>
           <li>
             <Link to="/app/mobile">📱 Talk on mobile</Link> — the same agent, on a phone via the
             guuey portal

package/dist/templates/agentic-app/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/agentic-app/claude-agent-sdk/web/src/pages/TalkOnMobile.tsx

@@ -5,23 +5,13 @@
  * never the chat route directly. Plain URL today; upgrades to a native
  * deep link when portal applinks land (same path, so the QR stays valid).
  */
-import { useEffect, useRef, useState } from "react";
-import QRCode from "qrcode";
 import { appConfig } from "../config";
+import { QrLink } from "../components/QrLink";
 
 export function TalkOnMobile() {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const [error, setError] = useState<string | null>(null);
   const link = appConfig.link;
   const target = link ? `${link.portalUrl}/agent/${link.slug ?? link.appId}` : null;
 
-  useEffect(() => {
-    if (!target || !canvasRef.current) return;
-    QRCode.toCanvas(canvasRef.current, target, { width: 240, margin: 1 }).catch((err: unknown) => {
-      setError(err instanceof Error ? err.message : String(err));
-    });
-  }, [target]);
-
   return (
     <div className="page mobile-page">
       <h1>Talk on mobile</h1>
@@ -31,13 +21,7 @@ export function TalkOnMobile() {
             Scan with a phone — the same agent, in the guuey portal. (The portal
             has its own sign-in, so phone conversations are separate threads.)
           </p>
-          <canvas ref={canvasRef} className="qr" />
-          <p>
-            <a href={target} target="_blank" rel="noreferrer">
-              {target}
-            </a>
-          </p>
-          {error ? <p className="error">QR render failed: {error}</p> : null}
+          <QrLink url={target} size={240} />
         </>
       ) : (
         <p className="calm">

package/dist/templates/agentic-app/claude-agent-sdk/web/src/routes.ts

@@ -1,7 +1,7 @@
 /**
  * Route constants shared by the chrome and pages. In the agentic-app
- * template the chat is the fullscreen agent canvas inside the app shell,
- * and the setup guide lives there too.
+ * template the agent RAIL lives inside the app shell (guuey#303's
+ * chat-rail layout) — "open the chat" means entering the app.
  */
-export const CHAT_PATH = "/app/agent";
+export const CHAT_PATH = "/app";
 export const HOME_PATH = "/app/setup";

package/dist/templates/agentic-app/claude-agent-sdk/web/src/styles-app.css

@@ -14,7 +14,7 @@
 }
 
 .sidebar {
-  width: 220px;
+  width: 320px;
   flex-shrink: 0;
   display: flex;
   flex-direction: column;
@@ -51,42 +51,40 @@
   font-weight: 600;
 }
 
-.sidebar-dock {
+.agent-rail {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: 8px;
+  min-height: 0;
+  height: 46vh;
   border-top: 1px solid var(--line);
+  background: var(--bg);
 }
 
-.sidebar-dock a {
-  padding: 9px 12px;
-  border-radius: 8px;
-  color: var(--fg-soft);
-  text-decoration: none;
+.rail-chat {
+  flex: 1;
+  min-height: 0;
 }
 
-.sidebar-dock a.active {
-  background: var(--app-accent);
-  color: #fff;
-  font-weight: 600;
+.canvas-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
-.dock-agent {
+.canvas-view-bar {
   display: flex;
   align-items: center;
-  gap: 8px;
-}
-
-.dock-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--ok);
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--line);
+  font-weight: 600;
 }
 
-.dock-agent.active .dock-dot {
-  background: #fff;
+.canvas-view-mount {
+  flex: 1;
+  min-height: 0;
 }
 
 .dock-logout {

package/dist/templates/agentic-app/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/agentic-app/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.11.0",
+    "@guuey/config": "0.11.0",
     "tsup": "^8.5.0",
     "tsx": "^4.19.0",
     "typescript": "^5.8.0"

package/dist/templates/agentic-app/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/agentic-app/google-adk/web/package.json

@@ -9,7 +9,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@guuey/chat": "0.10.0",
+    "@guuey/chat": "0.11.0",
+    "@guuey/mcp-apps-host": "0.11.0",
     "oidc-client-ts": "^3.1.0",
     "qrcode": "^1.5.4",
     "react": "^19.0.0",