@guuey/create-agentic-app 0.9.0 → 0.10.0

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

@@ -0,0 +1,36 @@
+/**
+ * Placeholder product page — REPLACE with your app's real dashboard. It
+ * exists so the shell demonstrates the swap: menus render your product
+ * here; the agent dock swaps this canvas for the fullscreen agent.
+ */
+import { Link } from "react-router-dom";
+import { appConfig } from "../config";
+
+export function Dashboard() {
+  return (
+    <div className="page">
+      <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.
+      </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
+          </li>
+          <li>
+            <Link to="/app/setup">Setup</Link> — live status + the three distribution channels for{" "}
+            {appConfig.brand.name}
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

package/dist/templates/agentic-app/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/agentic-app/google-adk/web/src/pages/Landing.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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";
+
+export function Landing() {
+  const [widget, setWidget] = useState<WidgetOutcome | "unlinked" | "loading">(
+    isLinked ? "loading" : "unlinked",
+  );
+
+  useEffect(() => {
+    if (!isLinked) return;
+    mountWidget((outcome) => setWidget(outcome));
+  }, []);
+
+  return (
+    <main className="page landing">
+      <section className="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
+          </Link>
+          <Link to={HOME_PATH} className="btn">
+            How this app is wired
+          </Link>
+        </div>
+        {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/agentic-app/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/agentic-app/google-adk/web/src/pages/Reports.tsx

@@ -0,0 +1,9 @@
+/** Placeholder product page — REPLACE with your app's real content. */
+export function Reports() {
+  return (
+    <div className="page">
+      <h1>Reports</h1>
+      <p className="calm">Another product page behind an upper-sidebar menu. Replace freely.</p>
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+/**
+ * "Talk on mobile" — a QR code to this agent in the guuey portal
+ * (app.guuey.com and its env twins). The QR targets the agent's CARD page
+ * (`/agent/<slug-or-appId>`), which resolves the live endpoint itself —
+ * 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";
+
+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>
+      {target ? (
+        <>
+          <p className="calm">
+            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}
+        </>
+      ) : (
+        <p className="calm">
+          Available once the app is bound to a deployed guuey agent —{" "}
+          <code>pnpm bootstrap -- --link</code>.
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +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.
+ */
+export const CHAT_PATH = "/app/agent";
+export const HOME_PATH = "/app/setup";

package/dist/templates/agentic-app/google-adk/web/src/styles-app.css

@@ -0,0 +1,132 @@
+/* agentic-app shell — split sidebar + fullscreen-swap canvas. Loaded after
+   styles.css; only shell-specific rules live here. */
+
+.app-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--line);
+  background: var(--bg-soft);
+}
+
+.sidebar-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 700;
+  padding: 16px;
+}
+
+.sidebar-menus {
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  gap: 2px;
+  flex: 1;
+}
+
+.sidebar-menus a {
+  padding: 9px 12px;
+  border-radius: 8px;
+  color: var(--fg-soft);
+  text-decoration: none;
+}
+
+.sidebar-menus a.active {
+  background: var(--bg);
+  color: var(--fg);
+  font-weight: 600;
+}
+
+.sidebar-dock {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px;
+  border-top: 1px solid var(--line);
+}
+
+.sidebar-dock a {
+  padding: 9px 12px;
+  border-radius: 8px;
+  color: var(--fg-soft);
+  text-decoration: none;
+}
+
+.sidebar-dock a.active {
+  background: var(--app-accent);
+  color: #fff;
+  font-weight: 600;
+}
+
+.dock-agent {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.dock-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ok);
+}
+
+.dock-agent.active .dock-dot {
+  background: #fff;
+}
+
+.dock-logout {
+  margin-top: 4px;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--fg-soft);
+  text-align: left;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.canvas {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.canvas .page {
+  max-width: 880px;
+}
+
+.agent-canvas {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  padding: 16px;
+}
+
+.mobile-page {
+  text-align: center;
+}
+
+.qr {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 8px;
+  background: #fff;
+}