@fluxy-chat/create-fluxy-chat 0.3.0 → 0.5.0

package/templates/full/scripts/fluxy-doctor.mjs

@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+/**
+ * Verify .env, worker health, demo/local readiness, and agent config.
+ */
+import { existsSync, readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const envPath = join(root, ".env");
+
+const useColor = process.stdout.isTTY && !process.env.NO_COLOR;
+const c = (code, s) => (useColor ? `\x1b[${code}m${s}\x1b[0m` : s);
+const green = (s) => c("32", s);
+const red = (s) => c("31", s);
+const yellow = (s) => c("33", s);
+const bold = (s) => c("1", s);
+
+let failures = 0;
+let warnings = 0;
+
+function pass(msg) {
+  console.log(`  ${green("✓")} ${msg}`);
+}
+function warn(msg) {
+  warnings += 1;
+  console.log(`  ${yellow("!")} ${msg}`);
+}
+function fail(msg) {
+  failures += 1;
+  console.log(`  ${red("✗")} ${msg}`);
+}
+
+function parseEnvFile(path) {
+  if (!existsSync(path)) return {};
+  const out = {};
+  for (const line of readFileSync(path, "utf8").split(/\r?\n/)) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) continue;
+    const eq = trimmed.indexOf("=");
+    if (eq <= 0) continue;
+    out[trimmed.slice(0, eq).trim()] = trimmed.slice(eq + 1).trim();
+  }
+  return out;
+}
+
+async function fetchOk(url, init = {}) {
+  try {
+    const r = await fetch(url, { ...init, signal: AbortSignal.timeout(5000) });
+    return { ok: r.ok, status: r.status, json: r.headers.get("content-type")?.includes("json") ? await r.json().catch(() => null) : null };
+  } catch (err) {
+    return { ok: false, error: err instanceof Error ? err.message : String(err) };
+  }
+}
+
+async function main() {
+  console.log(bold("\nFluxyChat doctor\n"));
+
+  const env = parseEnvFile(envPath);
+  if (!existsSync(envPath)) {
+    fail(".env missing — run: pnpm setup");
+  } else {
+    pass(".env exists");
+  }
+
+  const workerUrl = env.VITE_FLUXYCHAT_WORKER_URL || process.env.FLUXY_WORKER_URL;
+  const jwt = env.VITE_FLUXYCHAT_MEMBER_JWT;
+  const roomId = env.VITE_FLUXYCHAT_ROOM_ID;
+  const agentId = env.VITE_FLUXYCHAT_AGENT_ID;
+
+  if (!workerUrl) fail("VITE_FLUXYCHAT_WORKER_URL unset");
+  else pass(`worker URL: ${workerUrl}`);
+
+  if (!jwt) fail("VITE_FLUXYCHAT_MEMBER_JWT unset");
+  else pass(`JWT present (${jwt.length} chars)`);
+
+  if (!roomId) warn("VITE_FLUXYCHAT_ROOM_ID unset");
+  else pass(`room: ${roomId}`);
+
+  if (!agentId) warn("VITE_FLUXYCHAT_AGENT_ID unset — agent invoke disabled");
+  else pass(`agent: ${agentId}`);
+
+  if (workerUrl) {
+    const health = await fetchOk(`${workerUrl}/health`);
+    if (health.ok) pass("worker /health OK");
+    else fail(`worker /health failed${health.error ? `: ${health.error}` : ` (${health.status})`}`);
+
+    const demoStatus = await fetchOk(`${workerUrl}/demo/status`);
+    if (demoStatus.ok && demoStatus.json?.ready) {
+      pass("public demo available (/demo/status)");
+    } else if (workerUrl.includes("127.0.0.1") || workerUrl.includes("localhost")) {
+      pass("local worker (demo status optional)");
+    } else {
+      warn("public demo not ready on this worker");
+    }
+  }
+
+  if (workerUrl && jwt && roomId) {
+    const rooms = await fetchOk(`${workerUrl}/rooms`, {
+      headers: { Authorization: `Bearer ${jwt}` },
+    });
+    if (rooms.ok) {
+      const list = Array.isArray(rooms.json?.rooms) ? rooms.json.rooms : [];
+      if (list.some((r) => r?.id === roomId)) pass(`room membership OK (${roomId})`);
+      else warn(`room ${roomId} not listed for this JWT`);
+    } else {
+      warn(`GET /rooms failed (${rooms.status ?? rooms.error})`);
+    }
+  }
+
+  console.log("");
+  if (failures > 0) {
+    console.log(red(bold(`${failures} check(s) failed`)) + (warnings ? ` · ${warnings} warning(s)` : ""));
+    process.exit(1);
+  }
+  console.log(green(bold("All checks passed")) + (warnings ? ` · ${warnings} warning(s)` : ""));
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/templates/full/scripts/fluxy-setup.mjs

@@ -0,0 +1,323 @@
+#!/usr/bin/env node
+/**
+ * Provision credentials and write .env for the full template.
+ *
+ * Modes:
+ *   local  (default) — POST /dev/provision on local worker (ALLOW_DEV_PROVISION=true)
+ *   hosted           — GET /demo/session on fluxychat.com (no wrangler required)
+ *
+ * Usage:
+ *   pnpm setup
+ *   pnpm setup -- --mode hosted
+ *   FLUXY_SETUP_MODE=hosted pnpm setup
+ */
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const envPath = join(root, ".env");
+const metaPath = join(root, ".fluxy", "setup.json");
+const modePath = join(root, ".fluxy", "mode");
+
+const HOSTED_WORKER_DEFAULT = "https://api.fluxychat.com";
+const HOSTED_CONSOLE_DEFAULT = "https://fluxychat.com";
+const LOCAL_WORKER_DEFAULT = "http://127.0.0.1:8787";
+const LOCAL_CONSOLE_DEFAULT = "http://localhost:3000";
+const POST_TIMEOUT_MS = 15_000;
+
+const useColor = process.stdout.isTTY && !process.env.NO_COLOR;
+const c = (code, s) => (useColor ? `\x1b[${code}m${s}\x1b[0m` : s);
+const green = (s) => c("32", s);
+const red = (s) => c("31", s);
+const dim = (s) => c("2", s);
+const bold = (s) => c("1", s);
+
+function ok(msg) {
+  console.log(`  ${green("✓")} ${msg}`);
+}
+function fail(msg) {
+  console.error(`\n${red("✗")} ${red(bold(msg))}`);
+  process.exit(1);
+}
+
+function readDefaultMode() {
+  if (existsSync(modePath)) {
+    const m = readFileSync(modePath, "utf8").trim().toLowerCase();
+    if (m === "hosted" || m === "local") return m;
+  }
+  return "local";
+}
+
+function resolveMode() {
+  const argv = process.argv.slice(2);
+  const flagIdx = argv.indexOf("--mode");
+  if (flagIdx >= 0 && argv[flagIdx + 1]) {
+    const m = String(argv[flagIdx + 1]).trim().toLowerCase();
+    if (m === "hosted" || m === "local") return m;
+    fail(`Unknown mode "${argv[flagIdx + 1]}". Use: local | hosted`);
+  }
+  const fromEnv = String(process.env.FLUXY_SETUP_MODE || "").trim().toLowerCase();
+  if (fromEnv === "hosted" || fromEnv === "local") return fromEnv;
+  return readDefaultMode();
+}
+
+function fetchWithTimeout(url, init = {}, timeoutMs = POST_TIMEOUT_MS) {
+  const ctrl = new AbortController();
+  const t = setTimeout(() => ctrl.abort(), timeoutMs);
+  return fetch(url, { ...init, signal: ctrl.signal }).finally(() => clearTimeout(t));
+}
+
+async function isWorkerUp(workerUrl) {
+  try {
+    const r = await fetchWithTimeout(`${workerUrl}/health`, { method: "GET" }, 2000);
+    return r.ok;
+  } catch {
+    return false;
+  }
+}
+
+async function postJson(workerUrl, path, body, headers = {}) {
+  const res = await fetchWithTimeout(`${workerUrl}${path}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", ...headers },
+    body: JSON.stringify(body),
+  });
+  const text = await res.text();
+  let json = null;
+  try {
+    json = text ? JSON.parse(text) : null;
+  } catch {
+    /* ignore */
+  }
+  if (!res.ok) {
+    const detail = json?.error || text || res.statusText;
+    throw new Error(`${path} → HTTP ${res.status}: ${detail}`);
+  }
+  return json ?? {};
+}
+
+async function getJson(workerUrl, path, headers = {}) {
+  const res = await fetchWithTimeout(`${workerUrl}${path}`, { method: "GET", headers });
+  const text = await res.text();
+  let json = null;
+  try {
+    json = text ? JSON.parse(text) : null;
+  } catch {
+    /* ignore */
+  }
+  if (!res.ok) {
+    const detail = json?.error || text || res.statusText;
+    throw new Error(`${path} → HTTP ${res.status}: ${detail}`);
+  }
+  return json ?? {};
+}
+
+function quickstartRoomId(projectId) {
+  return `${projectId}-general`;
+}
+
+async function ensureRoom(workerUrl, token, projectId) {
+  const roomId = quickstartRoomId(projectId);
+  const listed = await getJson(workerUrl, "/rooms", { Authorization: `Bearer ${token}` });
+  const rooms = Array.isArray(listed?.rooms) ? listed.rooms : [];
+  if (rooms.some((room) => room?.id === roomId)) {
+    ok(`room ${roomId} ready`);
+    return roomId;
+  }
+  try {
+    await postJson(
+      workerUrl,
+      "/rooms",
+      { id: roomId, type: "public", name: "General" },
+      { Authorization: `Bearer ${token}` },
+    );
+    ok(`room ${roomId} created`);
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    if (msg.includes("409") || msg.includes("room_id_already_exists")) {
+      ok(`room ${roomId} exists`);
+    } else {
+      throw err;
+    }
+  }
+  return roomId;
+}
+
+async function resolveAssistantAgent(workerUrl, token) {
+  const data = await getJson(workerUrl, "/agents", { Authorization: `Bearer ${token}` });
+  const agents = Array.isArray(data?.agents) ? data.agents : Array.isArray(data) ? data : [];
+  const assistant =
+    agents.find((a) => a?.handle === "@assistant") ??
+    agents.find((a) => String(a?.handle ?? "").includes("assistant")) ??
+    agents[0];
+  if (!assistant?.id) {
+    fail("No agents found. Ensure worker migrations ran (built-in @assistant seed).");
+  }
+  ok(`agent ${assistant.handle ?? assistant.id}`);
+  return { id: String(assistant.id), handle: String(assistant.handle ?? "@assistant") };
+}
+
+function writeEnv(vars) {
+  const lines = [
+    "# Auto-generated by pnpm setup — do not commit secrets",
+    `VITE_FLUXYCHAT_WORKER_URL=${vars.workerUrl}`,
+    `VITE_FLUXYCHAT_MEMBER_JWT=${vars.token}`,
+    `VITE_FLUXYCHAT_ROOM_ID=${vars.roomId}`,
+    `VITE_FLUXYCHAT_AGENT_ID=${vars.agentId}`,
+    `VITE_FLUXYCHAT_AGENT_HANDLE=${vars.agentHandle}`,
+    `VITE_FLUXYCHAT_PROJECT_ID=${vars.projectId}`,
+    `VITE_FLUXYCHAT_USER_ID=${vars.userId}`,
+    `VITE_FLUXYCHAT_CONSOLE_URL=${vars.consoleUrl}`,
+    "",
+  ];
+  writeFileSync(envPath, lines.join("\n"));
+  ok(`wrote ${envPath}`);
+}
+
+function writeMeta(meta) {
+  mkdirSync(dirname(metaPath), { recursive: true });
+  writeFileSync(metaPath, `${JSON.stringify(meta, null, 2)}\n`);
+}
+
+async function setupHosted() {
+  const workerUrl =
+    process.env.FLUXY_HOSTED_WORKER_URL ||
+    process.env.FLUXY_WORKER_URL ||
+    HOSTED_WORKER_DEFAULT;
+  const consoleUrl = process.env.FLUXY_CONSOLE_URL || HOSTED_CONSOLE_DEFAULT;
+
+  console.log(dim(`  mode: hosted · worker: ${workerUrl}`));
+
+  const status = await getJson(workerUrl, "/demo/status").catch(() => null);
+  if (!status?.ready) {
+    fail(
+      `Public demo not available at ${workerUrl}\n` +
+        "  Try: pnpm setup -- --mode local (with local worker)\n" +
+        "  Or: https://fluxychat.com/demo",
+    );
+  }
+  ok("public demo ready");
+
+  const session = await getJson(workerUrl, "/demo/session");
+  if (!session?.token || !session?.roomId) {
+    fail("/demo/session did not return token + roomId");
+  }
+  ok(`guest session · room ${session.roomId}`);
+
+  writeEnv({
+    workerUrl,
+    token: session.token,
+    roomId: session.roomId,
+    agentId: session.agentId ?? "",
+    agentHandle: session.agentHandle ?? "@assistant",
+    projectId: "hosted-demo",
+    userId: session.userId ?? "demo-guest",
+    consoleUrl,
+  });
+
+  writeMeta({
+    mode: "hosted",
+    workerUrl,
+    projectId: "hosted-demo",
+    roomId: session.roomId,
+    agentId: session.agentId ?? null,
+    agentHandle: session.agentHandle ?? "@assistant",
+    expiresIn: session.expiresIn ?? null,
+    setupAt: new Date().toISOString(),
+  });
+
+  console.log(dim("  Run: pnpm dev"));
+  console.log(dim(`  Keep this project: ${consoleUrl}/onboarding?from=cli`));
+  console.log(dim("  Paste your .env in the console to continue onboarding."));
+}
+
+async function setupLocal() {
+  const workerUrl =
+    process.env.FLUXY_WORKER_URL || process.env.FLUXYCHAT_WORKER_URL || LOCAL_WORKER_DEFAULT;
+  const consoleUrl = process.env.FLUXY_CONSOLE_URL || LOCAL_CONSOLE_DEFAULT;
+
+  console.log(dim(`  mode: local · worker: ${workerUrl}`));
+
+  if (!(await isWorkerUp(workerUrl))) {
+    fail(
+      `Worker not reachable at ${workerUrl}\n` +
+        "  Start it from the FluxyChat monorepo:\n" +
+        "    pnpm --filter @fluxy-chat/worker dev\n" +
+        "  Or use hosted mode:\n" +
+        "    pnpm setup -- --mode hosted",
+    );
+  }
+  ok(`worker healthy at ${workerUrl}`);
+
+  const provision = await postJson(workerUrl, "/dev/provision", {});
+  if (!provision.projectId) {
+    fail("/dev/provision did not return projectId (is ALLOW_DEV_PROVISION=true?)");
+  }
+  ok(`projectId = ${provision.projectId}`);
+
+  let apiKey = provision.apiKey;
+  if (!apiKey && provision.reused) {
+    const fromEnv = process.env.FLUXY_CONSOLE_API_KEY || process.env.FIRST_MESSAGE_API_KEY;
+    if (fromEnv?.startsWith("fc_")) apiKey = fromEnv;
+    if (!apiKey && existsSync(join(root, "..", "..", "apps", "worker", ".dev.vars"))) {
+      const devVars = readFileSync(join(root, "..", "..", "apps", "worker", ".dev.vars"), "utf8");
+      const m = devVars.match(/^FLUXY_CONSOLE_API_KEY\s*=\s*(.+)$/m);
+      if (m?.[1]?.startsWith("fc_")) apiKey = m[1].trim();
+    }
+  }
+  if (!apiKey?.startsWith("fc_")) {
+    fail("No API key from /dev/provision. Re-run or set FLUXY_CONSOLE_API_KEY=fc_…");
+  }
+
+  const auth = await postJson(
+    workerUrl,
+    "/auth/token",
+    { userId: "demo-user", roles: ["owner", "admin"], ttlSeconds: 86400 },
+    { "X-Fluxy-Api-Key": apiKey },
+  );
+  if (!auth.token) fail("/auth/token did not return a JWT");
+
+  const roomId = await ensureRoom(workerUrl, auth.token, provision.projectId);
+  const agent = await resolveAssistantAgent(workerUrl, auth.token);
+
+  writeEnv({
+    workerUrl,
+    token: auth.token,
+    roomId,
+    agentId: agent.id,
+    agentHandle: agent.handle,
+    projectId: provision.projectId,
+    userId: "demo-user",
+    consoleUrl,
+  });
+
+  writeMeta({
+    mode: "local",
+    workerUrl,
+    projectId: provision.projectId,
+    roomId,
+    agentId: agent.id,
+    agentHandle: agent.handle,
+    setupAt: new Date().toISOString(),
+  });
+
+  console.log(`\n${green(bold("Local setup complete."))}`);
+  console.log(dim("  Run: pnpm dev"));
+  console.log(dim(`  Keep this project: ${consoleUrl}/onboarding?from=cli`));
+}
+
+async function main() {
+  const mode = resolveMode();
+  console.log(bold(`\nFluxyChat setup (${mode})\n`));
+
+  if (mode === "hosted") {
+    await setupHosted();
+  } else {
+    await setupLocal();
+  }
+}
+
+main().catch((err) => {
+  fail(err instanceof Error ? err.message : String(err));
+});

package/templates/full/src/App.tsx

@@ -0,0 +1,223 @@
+import { useMemo, useState } from "react";
+import { FluxyChatClient } from "@fluxy-chat/sdk";
+import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";
+
+const workerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL?.trim();
+const memberJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT?.trim();
+const roomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID?.trim() || "general";
+const agentId = import.meta.env.VITE_FLUXYCHAT_AGENT_ID?.trim() || "";
+const agentHandle = import.meta.env.VITE_FLUXYCHAT_AGENT_HANDLE?.trim() || "@assistant";
+const projectId = import.meta.env.VITE_FLUXYCHAT_PROJECT_ID?.trim() || "";
+const consoleUrl = import.meta.env.VITE_FLUXYCHAT_CONSOLE_URL?.trim() || "http://localhost:3000";
+const memberUserId =
+  import.meta.env.VITE_FLUXYCHAT_USER_ID?.trim() || "demo-user";
+
+function ChatRoom() {
+  const {
+    messages,
+    sendMessage,
+    invokeAgent,
+    connectionState,
+    agentTyping,
+    toolThreadEvents,
+    lastAgentRun,
+  } = useChat({
+    roomId,
+    agentId: agentId || undefined,
+    markReadLatest: true,
+  });
+
+  const [draft, setDraft] = useState("");
+  const [invokeError, setInvokeError] = useState<string | null>(null);
+
+  async function handleSendMessage(text: string) {
+    setInvokeError(null);
+    await sendMessage(text);
+  }
+
+  async function handleInvokeAgent(text: string) {
+    if (!agentId) {
+      setInvokeError("Set VITE_FLUXYCHAT_AGENT_ID in .env (run pnpm setup).");
+      return;
+    }
+    setInvokeError(null);
+    try {
+      await invokeAgent(text, { agentId });
+    } catch (err) {
+      setInvokeError(err instanceof Error ? err.message : "Agent invoke failed");
+    }
+  }
+
+  return (
+    <section className="chat-panel">
+      <header className="chat-header">
+        <strong>{roomId}</strong>
+        <span className="status">{connectionState.status}</span>
+      </header>
+
+      <ul className="messages">
+        {messages.map((m) => {
+          const isSelf = m.userId === memberUserId || m.userId === "first-message-user";
+          const isAgent = m.userId?.includes("agent") || m.userId === "assistant";
+          return (
+            <li
+              key={m.id ?? `${m.createdAt}-${m.userId}`}
+              className={`message${isSelf ? " self" : ""}${isAgent ? " agent" : ""}`}
+            >
+              <span className="author">{m.userId}</span>
+              <span>{m.content}</span>
+            </li>
+          );
+        })}
+      </ul>
+
+      {agentTyping ? <p className="typing">{agentHandle} is thinking…</p> : null}
+
+      {(toolThreadEvents.length > 0 || lastAgentRun?.toolCalls?.length) ? (
+        <div className="tools">
+          <h3>Agent tools</h3>
+          <ul>
+            {toolThreadEvents.map((ev) => (
+              <li key={ev.key}>
+                {String(ev.kind ?? "tool")}: {String(ev.title ?? ev.toolName ?? ev.key)}
+              </li>
+            ))}
+            {(lastAgentRun?.toolCalls ?? []).map((tc) => (
+              <li key={tc.id}>
+                {tc.name}: {tc.status ?? "done"}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
+      {invokeError ? <p className="hint" style={{ color: "#b91c1c", padding: "0 1rem" }}>{invokeError}</p> : null}
+
+      <form
+        className="composer"
+        onSubmit={(e) => {
+          e.preventDefault();
+          const text = draft.trim();
+          if (!text) return;
+          void handleSendMessage(text);
+          setDraft("");
+        }}
+      >
+        <div className="composer-row">
+          <input
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            placeholder="Message or ask @assistant…"
+            aria-label="Message"
+          />
+          <button type="submit">Send</button>
+          <button
+            type="button"
+            className="secondary"
+            disabled={!draft.trim()}
+            onClick={() => {
+              const text = draft.trim();
+              if (!text) return;
+              const payload = text.startsWith("@") ? text : `${agentHandle} ${text}`;
+              void handleInvokeAgent(payload);
+              setDraft("");
+            }}
+          >
+            Ask agent
+          </button>
+        </div>
+        <p className="hint">
+          Realtime via WebSocket · Agent replies stream in-room · Tool calls appear above
+        </p>
+      </form>
+    </section>
+  );
+}
+
+export function App() {
+  const client = useMemo(() => {
+    if (!workerUrl || !memberJwt) return null;
+    return new FluxyChatClient({
+      baseUrl: workerUrl,
+      userId: memberUserId,
+      token: memberJwt,
+    });
+  }, []);
+
+  if (!workerUrl || !memberJwt) {
+    return (
+      <main className="shell">
+        <div className="error-box">
+          <p>
+            <strong>Setup required.</strong> Run provisioning against a local FluxyChat worker:
+          </p>
+          <pre>
+            <code>{`# Terminal 1 — from FluxyChat monorepo
+pnpm --filter @fluxy-chat/worker dev
+
+# Terminal 2 — in this project
+pnpm setup
+pnpm dev`}</code>
+          </pre>
+          <p>
+            Or copy <code>.env.example</code> → <code>.env</code> with credentials from{" "}
+            <a href="https://fluxychat.com/onboarding" target="_blank" rel="noreferrer">
+              fluxychat.com/onboarding
+            </a>
+            .
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  if (!client) return null;
+
+  return (
+    <main className="shell">
+      <div className="hero">
+        <h1>FluxyChat — full stack starter</h1>
+        <p>
+          Your app · Worker {workerUrl} ·{" "}
+          <a href={`${consoleUrl.replace(/\/$/, "")}/onboarding?from=cli`} target="_blank" rel="noreferrer">
+            Keep this project
+          </a>
+        </p>
+      </div>
+
+      <div className="layout">
+        <FluxyRealtimeProvider client={client}>
+          <ChatRoom />
+        </FluxyRealtimeProvider>
+
+        <aside className="side">
+          <div className="card">
+            <h2>Project</h2>
+            <dl>
+              <div>
+                <dt>Project ID</dt>
+                <dd>{projectId || "—"}</dd>
+              </div>
+              <div>
+                <dt>Room</dt>
+                <dd>{roomId}</dd>
+              </div>
+              <div>
+                <dt>Agent</dt>
+                <dd>{agentHandle}{agentId ? ` (${agentId.slice(0, 12)}…)` : ""}</dd>
+              </div>
+            </dl>
+          </div>
+          <div className="card">
+            <h2>Try next</h2>
+            <ul style={{ margin: 0, paddingLeft: "1.1rem" }}>
+              <li>Open a second tab — same URL — for realtime</li>
+              <li>Ask the agent about FluxyChat architecture</li>
+              <li>Manage rooms & agents in the console</li>
+            </ul>
+          </div>
+        </aside>
+      </div>
+    </main>
+  );
+}