@guuey/create-agentic-app 0.9.0 → 0.11.0

package/dist/templates/base/google-adk/web/src/lib/status.ts

@@ -0,0 +1,45 @@
+/**
+ * Live-ness probe for the Home page.
+ *
+ * Probes the agent's invoke route with a CORS preflight-shaped OPTIONS —
+ * the ONE route both servers answer cross-origin: the pod's CORS covers
+ * `/agent/invoke` for the app's allowed domains, and `guuey dev --serve`
+ * answers OPTIONS 204 on it too. (A bare `/healthz` GET carries no CORS
+ * headers on either server, so it is useless from a browser.) The
+ * platform's richer status API is credentialed and guuey-origin-CORS'd, so
+ * the CLI is the tool for detail: `pnpm status` runs `guuey apps get` +
+ * `guuey agent status`.
+ */
+import { agentEndpointUrl, isLinked } from "../config";
+
+export type AgentProbe =
+  | { state: "checking" }
+  | { state: "reachable" }
+  | {
+      /**
+       * Calm, honest failure: a fresh clone before `bootstrap --link` (or a
+       * dev session without `pnpm dev` running) is ALWAYS in this state —
+       * it is a setup stage, not an error.
+       */
+      state: "unreachable";
+      hint: string;
+    };
+
+export async function probeAgent(): Promise<AgentProbe> {
+  const base = agentEndpointUrl().replace(/\/+$/, "");
+  try {
+    const res = await fetch(`${base}/agent/invoke`, {
+      method: "OPTIONS",
+      signal: AbortSignal.timeout(5000),
+    });
+    if (res.ok) return { state: "reachable" };
+    return { state: "unreachable", hint: `agent answered ${res.status}` };
+  } catch {
+    return {
+      state: "unreachable",
+      hint: isLinked
+        ? "agent unreachable from this origin — check the app's Allowed Domains include this site, and that a deployment is live (pnpm status)"
+        : "local dev router not running — start it with `pnpm dev` (or bind a deployed app with `pnpm bootstrap -- --link`)",
+    };
+  }
+}

package/dist/templates/base/google-adk/web/src/lib/widget.ts

@@ -0,0 +1,96 @@
+/**
+ * Host-page loader for the guuey widget (distribution way #1).
+ *
+ * The queue shim + single-init + idempotent script tag pattern — safe under
+ * React strict-mode double effects and route remounts. The widget only
+ * works against a DEPLOYED app (it loads from the environment's widget
+ * origin and frames the app's hosted chat), so callers gate on
+ * `appConfig.link`.
+ */
+import { appConfig } from "../config";
+
+interface GuueyGlobal {
+  (...args: unknown[]): void;
+  q?: unknown[][];
+  loaded?: boolean;
+}
+
+declare global {
+  interface Window {
+    guuey?: GuueyGlobal;
+  }
+}
+
+const SCRIPT_ID = "guuey-widget-v1";
+let initDispatched = false;
+
+function ensureGlobal(): GuueyGlobal {
+  if (!window.guuey) {
+    const shim: GuueyGlobal = function (...args: unknown[]) {
+      (shim.q = shim.q ?? []).push(args);
+    };
+    window.guuey = shim;
+  }
+  return window.guuey;
+}
+
+export type WidgetOutcome = "live" | "offline";
+
+/**
+ * Mount the widget launcher once: dispatches `guuey("init", …)` on first
+ * call and injects `<widget origin>/v1.js` if it is not already on the
+ * page. Subsequent calls are no-ops. Returns false when the app is not
+ * linked yet (nothing to embed).
+ */
+export function mountWidget(onOutcome?: (o: WidgetOutcome) => void): boolean {
+  const link = appConfig.link;
+  if (!link) return false;
+
+  const guuey = ensureGlobal();
+  if (!initDispatched) {
+    initDispatched = true;
+    guuey("init", {
+      app: link.appId,
+      launcher: `Ask ${appConfig.brand.name}`,
+      color: appConfig.theme.accent,
+      theme: appConfig.theme.mode,
+    });
+  }
+
+  if (!document.getElementById(SCRIPT_ID)) {
+    const script = document.createElement("script");
+    script.id = SCRIPT_ID;
+    script.src = `${link.widgetOrigin}/v1.js`;
+    script.async = true;
+    script.addEventListener("load", () => onOutcome?.("live"));
+    script.addEventListener("error", () => onOutcome?.("offline"));
+    document.head.appendChild(script);
+  } else {
+    onOutcome?.("live");
+  }
+  return true;
+}
+
+/**
+ * A value embedded inside an inline <script> on the customer's page: JSON
+ * string escaping, plus a `<` rewrite so a pathological brand name cannot
+ * smuggle `</script>` and terminate the element (the same rule the widget's
+ * own snippet generator applies).
+ */
+function jsString(value: string): string {
+  return JSON.stringify(value).replaceAll("<", "\\u003c");
+}
+
+/** The copy-paste embed snippet with this app's real values, for the Home guide. */
+export function widgetSnippet(): string | null {
+  const link = appConfig.link;
+  if (!link) return null;
+  return [
+    "<!-- guuey widget. Add this site to the app's allowed domains or the embed is refused. -->",
+    "<script>",
+    "  window.guuey = window.guuey || function(){(guuey.q=guuey.q||[]).push(arguments)};",
+    `  guuey("init", { app: ${jsString(link.appId)}, launcher: ${jsString(`Ask ${appConfig.brand.name}`)} });`,
+    "</script>",
+    `<script src="${link.widgetOrigin}/v1.js" async></script>`,
+  ].join("\n");
+}

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

@@ -0,0 +1,52 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import "@guuey/chat/styles.css";
+import "./styles.css";
+import { appConfig } from "./config";
+import { BootstrapGate } from "./components/BootstrapGate";
+import { Shell } from "./components/Shell";
+import { Landing } from "./pages/Landing";
+import { Login } from "./pages/Login";
+import { Chat } from "./pages/Chat";
+import { Home } from "./pages/Home";
+
+// Site theme: one accent + light/dark, applied as CSS variables. The chat
+// kit themes itself via its own tokens (see @guuey/chat theming docs).
+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 />,
+    children: [
+      { path: "/", element: <Landing /> },
+      { path: "/login", element: <Login /> },
+      { path: "/chat", element: <Chat /> },
+      { path: "/home", element: <Home /> },
+    ],
+  },
+]);
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <BootstrapGate>
+      <RouterProvider router={router} />
+    </BootstrapGate>
+  </StrictMode>,
+);

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

@@ -0,0 +1,15 @@
+/**
+ * The embedded chat page — distribution way #2 in the flesh. In local dev
+ * this talks to `guuey dev --serve` (pnpm dev boots it); once linked it
+ * talks to the deployed agent pod. Generative-UI cards render inline via
+ * the chat kit's sandboxed default mount — no extra setup.
+ */
+import { AgentChat } from "../components/AgentChat";
+
+export function Chat() {
+  return (
+    <main className="page chat-page">
+      <AgentChat className="chat-fill" />
+    </main>
+  );
+}

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

@@ -0,0 +1,133 @@
+/**
+ * Home — the instructions page: live agent status + the three-ways
+ * distribution guide, every snippet carrying this app's REAL values (no
+ * "replace me" placeholders once linked).
+ */
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { agentEndpointUrl, appConfig } from "../config";
+import { CHAT_PATH } from "../routes";
+import { probeAgent, type AgentProbe } from "../lib/status";
+import { widgetSnippet } from "../lib/widget";
+
+function chatSnippet(): string {
+  const endpoint = appConfig.link?.endpointUrl ?? "http://localhost:6790";
+  const api = appConfig.link?.apiBaseUrl ?? "http://localhost:6790";
+  const appId = appConfig.link?.appId ?? "local";
+  return [
+    `import { GuueyChat } from "@guuey/chat/react";`,
+    `import "@guuey/chat/styles.css";`,
+    ``,
+    `<GuueyChat`,
+    `  endpointUrl="${endpoint}"`,
+    `  appId="${appId}"`,
+    `  apiBaseUrl="${api}"`,
+    `  getGuestSecret={() => myGuestSecret}`,
+    `/>`,
+  ].join("\n");
+}
+
+export function Home() {
+  const [probe, setProbe] = useState<AgentProbe>({ state: "checking" });
+
+  useEffect(() => {
+    let cancelled = false;
+    void probeAgent().then((result) => {
+      if (!cancelled) setProbe(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const link = appConfig.link;
+
+  return (
+    <main className="page home">
+      <section className="card">
+        <h2>Agent status</h2>
+        <dl className="facts">
+          <dt>Endpoint</dt>
+          <dd>
+            <code>{agentEndpointUrl()}</code>
+          </dd>
+          <dt>Reachability</dt>
+          <dd>
+            {probe.state === "checking" ? "checking…" : null}
+            {probe.state === "reachable" ? <span className="ok">reachable</span> : null}
+            {probe.state === "unreachable" ? <span className="calm">{probe.hint}</span> : null}
+          </dd>
+          {link ? (
+            <>
+              <dt>App</dt>
+              <dd>
+                <code>{link.appId}</code> ({link.env})
+              </dd>
+              {link.pageUrl ? (
+                <>
+                  <dt>Agent's page</dt>
+                  <dd>
+                    <a href={link.pageUrl} target="_blank" rel="noreferrer">
+                      {link.pageUrl}
+                    </a>
+                  </dd>
+                </>
+              ) : null}
+            </>
+          ) : (
+            <>
+              <dt>Deployment</dt>
+              <dd className="calm">
+                not linked yet — <code>pnpm bootstrap -- --link</code> binds a deployed guuey app
+              </dd>
+            </>
+          )}
+        </dl>
+        <p className="hint">
+          Full detail lives in the CLI: <code>pnpm status</code> (runs{" "}
+          <code>guuey apps get</code> + <code>guuey agent status</code>).
+        </p>
+      </section>
+
+      <section className="card">
+        <h2>Three ways your users reach this agent</h2>
+
+        <h3>1 · The widget, on any site</h3>
+        <p>One script tag gives any page the floating launcher.</p>
+        {link ? (
+          <pre>
+            <code>{widgetSnippet()}</code>
+          </pre>
+        ) : (
+          <p className="calm">Snippet appears with real values after linking.</p>
+        )}
+
+        <h3>2 · Embedded chat, inside your app</h3>
+        <p>
+          The <code>@guuey/chat</code> kit, running on the <Link to={CHAT_PATH}>Chat page</Link> of
+          this very app:
+        </p>
+        <pre>
+          <code>{chatSnippet()}</code>
+        </pre>
+
+        <h3>3 · The guuey portal</h3>
+        {link?.slug ? (
+          <p>
+            Users can find and chat with this agent in the portal:{" "}
+            <a href={`${link.portalUrl}/agent/${link.slug}`} target="_blank" rel="noreferrer">
+              {link.portalUrl}/agent/{link.slug}
+            </a>
+          </p>
+        ) : link ? (
+          <p className="calm">
+            Claim a public short name first — <code>guuey slug claim &lt;name&gt;</code> — then the
+            portal link (and the agent's own page) light up.
+          </p>
+        ) : (
+          <p className="calm">Available after linking a deployed app.</p>
+        )}
+      </section>
+    </main>
+  );
+}

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

@@ -0,0 +1,65 @@
+/**
+ * Landing — the widget IS the hero (distribution way #1). On a linked app
+ * the real guuey widget launcher mounts in the corner; before linking, an
+ * honest placeholder explains what will appear here.
+ */
+import { useEffect, useState } from "react";
+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">(
+    isLinked ? "loading" : "unlinked",
+  );
+
+  useEffect(() => {
+    if (!isLinked) return;
+    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" 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">
+            {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
+            deployed guuey agent — <code>pnpm bootstrap -- --link</code>.
+          </p>
+        ) : null}
+        {widget === "offline" ? (
+          <p className="hint">
+            Widget script failed to load from this environment — check the app's
+            Allowed Domains include this site.
+          </p>
+        ) : null}
+      </section>
+    </main>
+  );
+}

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

@@ -0,0 +1,81 @@
+/**
+ * Login — two doors, one identity rule (never both at once):
+ *
+ * - "Continue as guest": one click, no account. A per-browser secret is
+ *   minted locally; the agent remembers this browser across visits.
+ * - "Sign in": the BYO-OIDC seam. Active only when `auth.oidc` is
+ *   configured in guuey.app.json (any spec-compliant IdP — this is where a
+ *   "Sign in with Google" plugs in). The bound guuey app must be in BYO
+ *   auth mode for the same issuer.
+ */
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { appConfig } from "../config";
+import { CHAT_PATH } from "../routes";
+import { continueAsGuest, setIdentityMode } from "../lib/identity";
+import { completeSignIn, isSigninCallback, oidcConfigured, signIn, signOutOidc } from "../lib/oidc";
+
+export function Login() {
+  const navigate = useNavigate();
+  const [error, setError] = useState<string | null>(null);
+  const [completing, setCompleting] = useState(isSigninCallback());
+  // One-shot: StrictMode double-invokes effects in dev, and the OIDC
+  // authorization code is single-use — a second signinCallback() would
+  // double-spend it and flash a bogus failure.
+  const callbackStarted = useRef(false);
+
+  // Finish the redirect flow when the IdP sent us back here.
+  useEffect(() => {
+    if (!isSigninCallback() || callbackStarted.current) return;
+    callbackStarted.current = true;
+    completeSignIn()
+      .then(() => {
+        setIdentityMode("oidc");
+        navigate(CHAT_PATH, { replace: true });
+      })
+      .catch((err: unknown) => {
+        setCompleting(false);
+        setError(err instanceof Error ? err.message : String(err));
+      });
+  }, [navigate]);
+
+  function guest() {
+    // One identity mode per surface: an explicit guest choice also drops
+    // any cached OIDC session, so a stale bearer can never shadow it.
+    void signOutOidc();
+    continueAsGuest();
+    navigate(CHAT_PATH);
+  }
+
+  if (completing) {
+    return (
+      <main className="page login">
+        <div className="login-card">
+          <p>Completing sign-in…</p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="page login">
+      <div className="login-card">
+        <h1>Welcome to {appConfig.brand.name}</h1>
+        {oidcConfigured() ? (
+          <button type="button" className="btn btn-accent btn-wide" onClick={() => void signIn()}>
+            Sign in
+          </button>
+        ) : (
+          <button type="button" className="btn btn-wide" disabled title="Configure auth.oidc in guuey.app.json (or via bootstrap) to enable sign-in">
+            Sign in — not configured yet
+          </button>
+        )}
+        <button type="button" className="btn btn-wide" onClick={guest}>
+          Continue as guest
+        </button>
+        <p className="hint">{appConfig.copy.login.guestHint}</p>
+        {error ? <p className="error">Sign-in failed: {error}</p> : null}
+      </div>
+    </main>
+  );
+}

package/dist/templates/base/google-adk/web/src/routes.ts

@@ -0,0 +1,7 @@
+/**
+ * Route constants shared by the chrome and pages. The agentic-app template
+ * overlays this file (its chat lives at /app/agent inside the app shell) —
+ * link via these constants, never hard-code the paths in components.
+ */
+export const CHAT_PATH = "/chat";
+export const HOME_PATH = "/home";