@fluxy-chat/create-fluxy-chat 0.5.3 → 0.5.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [0.5.4] - 2026-08-19
+
+### Fixed
+
+- Add `zustand` to `full` template dependencies so `pnpm install` gets everything without manual intervention.
+- Fix `FluxyRealtimeProvider` usage: pass `workerUrl` + `authTokenProvider` instead of non-existent `client` prop (fixes "disconnected" state and message sending).
+- Restyle full template UI to match FluxyChat dark theme (indigo/emerald palette, proper message bubbles, live/disconnected badge).
+
+## [0.5.5] - 2026-08-19
+
+### Fixed
+
+- Hosted `full` template now provisions a user project + assistant room via Clerk (no more public playground session).
+- Hosted `full` template uses the same chat UI primitives as FluxyChat (message bubbles/composer/status) to match dashboard/rooms/onboarding styling.
+- Remove fuorvianti "dash" UI artifacts and wire message sending through the same chat path as the dashboard.
+
 ## [0.5.3] - 2026-08-19
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluxy-chat/create-fluxy-chat",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "description": "Scaffold a new FluxyChat bot project with a single command",
   "type": "module",
   "main": "./dist/index.js",

package/templates/full/README.md

@@ -1,66 +1,47 @@
-# FluxyChat — full stack starter
+# FluxyChat full stack starter
 
-Chat + AI agent + tool calls in one Vite app. Provisions against a local FluxyChat worker in ~60 seconds.
+Chat + AI agent in a Vite app. Hosted mode signs you in with Clerk (same as the console), then creates your project and assistant room.
 
 ## Quick start
 
-**Hosted (no wrangler):**
+**Hosted (Clerk, no wrangler):**
 
 ```bash
-npx @fluxy-chat/create-fluxy-chat my-app --mode hosted -y
+npx @fluxy-chat/create-fluxy-chat@latest my-app --mode hosted -y
 cd my-app
 pnpm install
 pnpm setup:hosted
 pnpm dev
 ```
 
-**Local (full control):**
+The app opens on localhost. Click Continue with FluxyChat, sign in, then you land in your own room (not the public playground).
+
+**Local worker:**
 
 ```bash
-# Terminal 1 — monorepo worker
 pnpm --filter @fluxy-chat/worker dev
-
-# Terminal 2 — new project
-npx create-fluxy-chat my-app --full -y
+npx @fluxy-chat/create-fluxy-chat@latest my-app --full -y
 cd my-app
 pnpm install
 pnpm setup
 pnpm dev
 ```
 
-Optional: `pnpm doctor` checks `.env`, worker health, room access.
-
-## What you get
-
-- Realtime chat (`useChat` + WebSocket)
-- `@assistant` invoke with tool call thread in the UI
-- Sidebar with project/room/agent metadata
-- Link to operator console
-
 ## Scripts
 
 | Command | Description |
 |---------|-------------|
-| `pnpm setup:hosted` | Guest JWT via `GET /demo/session` on api.fluxychat.com |
-| `pnpm setup:local` | Local `/dev/provision` (same as `pnpm setup`) |
-| `pnpm doctor` | Health check: .env, worker, room |
-| `pnpm dev` | Start Vite; auto-start worker if FluxyChat monorepo is detected nearby |
-| `pnpm dev:app` | Vite only |
+| `pnpm setup:hosted` | Writes worker + console URLs. Auth happens in the browser via Clerk. |
+| `pnpm setup:local` | Local `/dev/provision` |
+| `pnpm doctor` | Health check |
+| `pnpm dev` | Start Vite |
 
 ## Environment
 
-See `.env.example`. Generated by `pnpm setup`:
-
-- `VITE_FLUXYCHAT_WORKER_URL` — default `http://127.0.0.1:8787`
-- `VITE_FLUXYCHAT_MEMBER_JWT` — member token with admin roles
-- `VITE_FLUXYCHAT_ROOM_ID` — `{projectId}-general`
-- `VITE_FLUXYCHAT_AGENT_ID` — built-in `@assistant`
-
-## Hosted credentials
+`.env` from `pnpm setup:hosted` only needs worker and console URLs. Member JWT, room, and agent come from Clerk after sign in.
 
-Use [fluxychat.com/onboarding](https://fluxychat.com/onboarding) and copy values into `.env` manually.
+Open console: [fluxychat.com/onboarding](https://fluxychat.com/onboarding)
 
 ## Learn more
 
-- [One-click product roadmap](https://github.com/AlessandroFare/fluxychat/blob/main/docs/ONE-CLICK-PRODUCT-ROADMAP.md)
 - [Docs](https://docs.fluxychat.com)

package/templates/full/index.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FluxyChat</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;650&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

package/templates/full/package.json

@@ -16,13 +16,23 @@
   "dependencies": {
     "@fluxy-chat/react": "^0.1.1",
     "@fluxy-chat/sdk": "^0.6.2",
+    "@fluxy-chat/ui": "^0.1.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.511.0",
+    "radix-ui": "^1.4.3",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^3.0.0",
+    "zustand": "^5.0.14"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.5.0",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.6.0",
     "vite": "^6.0.0"
   }

package/templates/full/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

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

@@ -71,8 +71,11 @@ async function main() {
   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)`);
+  const hosted = (env.VITE_FLUXYCHAT_CONSOLE_URL || "").includes("fluxychat.com");
+  if (!jwt) {
+    if (hosted) warn("VITE_FLUXYCHAT_MEMBER_JWT unset — sign in from the app (Clerk)");
+    else 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}`);

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

@@ -189,49 +189,32 @@ async function setupHosted() {
 
   console.log(dim(`  mode: hosted · worker: ${workerUrl}`));
 
-  const cliHeaders = { Origin: consoleUrl };
-
-  const status = await getJson(workerUrl, "/demo/status", cliHeaders).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", cliHeaders);
-  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",
+    token: "",
+    roomId: "",
+    agentId: "",
+    agentHandle: "@assistant",
+    projectId: "",
+    userId: "",
     consoleUrl,
   });
 
   writeMeta({
     mode: "hosted",
     workerUrl,
-    projectId: "hosted-demo",
-    roomId: session.roomId,
-    agentId: session.agentId ?? null,
-    agentHandle: session.agentHandle ?? "@assistant",
-    expiresIn: session.expiresIn ?? null,
+    projectId: null,
+    roomId: null,
+    agentId: null,
+    agentHandle: "@assistant",
     setupAt: new Date().toISOString(),
+    auth: "clerk",
   });
 
+  ok("wrote hosted endpoints (sign in with Clerk on pnpm dev)");
   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."));
+  console.log(dim("  Sign in with Clerk. We create your project and assistant room."));
+  console.log(dim(`  Console: ${consoleUrl}/onboarding`));
 }
 
 async function setupLocal() {

package/templates/full/src/App.tsx

@@ -1,221 +1,200 @@
 import { useMemo, useState } from "react";
-import { FluxyChatClient } from "@fluxy-chat/sdk";
 import { FluxyRealtimeProvider, useChat } from "@fluxy-chat/react";
+import { ChatWindow } from "@fluxy-chat/ui";
+import { loadCliSession, type CliSession } from "./session";
+
+const envWorkerUrl = import.meta.env.VITE_FLUXYCHAT_WORKER_URL?.trim() ?? "";
+const envJwt = import.meta.env.VITE_FLUXYCHAT_MEMBER_JWT?.trim() ?? "";
+const envRoomId = import.meta.env.VITE_FLUXYCHAT_ROOM_ID?.trim() ?? "";
+const envAgentId = import.meta.env.VITE_FLUXYCHAT_AGENT_ID?.trim() ?? "";
+const envAgentHandle = import.meta.env.VITE_FLUXYCHAT_AGENT_HANDLE?.trim() || "@assistant";
+const envProjectId = import.meta.env.VITE_FLUXYCHAT_PROJECT_ID?.trim() ?? "";
+const envUserId = import.meta.env.VITE_FLUXYCHAT_USER_ID?.trim() ?? "";
+const consoleUrl = import.meta.env.VITE_FLUXYCHAT_CONSOLE_URL?.trim() || "https://fluxychat.com";
+
+const SUGGESTED_PROMPTS = [
+  "Tell me about FluxyChat features",
+  "What can this assistant do?",
+];
+
+function sessionFromEnv(): CliSession | null {
+  if (!envWorkerUrl || !envJwt || !envRoomId) return null;
+  return {
+    workerUrl: envWorkerUrl,
+    memberJwt: envJwt,
+    roomId: envRoomId,
+    agentId: envAgentId,
+    agentHandle: envAgentHandle,
+    projectId: envProjectId,
+    userId: envUserId || "demo-user",
+  };
+}
 
-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 SignInGate() {
+  const returnTo = typeof window !== "undefined" ? window.location.origin : "http://localhost:5173";
+  const href = `${consoleUrl.replace(/\/$/, "")}/cli-auth?redirect_uri=${encodeURIComponent(returnTo)}`;
 
-function ChatRoom() {
-  const {
-    messages,
-    sendMessage,
-    invokeAgent,
-    connectionState,
-    agentTyping,
-    toolThreadEvents,
-    lastAgentRun,
-  } = useChat({
-    roomId,
-    agentId: agentId || undefined,
-    markReadLatest: true,
-  });
+  return (
+    <main className="app-shell">
+      <header className="topbar">
+        <div className="brand">
+          <img src={`${consoleUrl.replace(/\/$/, "")}/fluxychat-icon.svg`} alt="" width={28} height={28} />
+          <span>FluxyChat</span>
+        </div>
+      </header>
+      <div className="signin-card">
+        <p className="eyebrow">Local starter</p>
+        <h1>Sign in to open your room</h1>
+        <p>
+          Use the same Clerk account as the console. We create your project and
+          assistant room, then you chat here.
+        </p>
+        <a className="btn-primary" href={href}>
+          Continue with FluxyChat
+        </a>
+        <p className="fine-print">
+          Opens {consoleUrl.replace(/^https?:\/\//, "")} for sign in, then returns to this app.
+        </p>
+      </div>
+    </main>
+  );
+}
 
-  const [draft, setDraft] = useState("");
-  const [invokeError, setInvokeError] = useState<string | null>(null);
+function ChatRoom({ session }: { session: CliSession }) {
+  const { messages, sendMessage, invokeAgent, connectionState, agentTyping, typingUsers, online } =
+    useChat({
+      roomId: session.roomId,
+      agentId: session.agentId || undefined,
+      markReadLatest: true,
+    });
 
-  async function handleSendMessage(text: string) {
-    setInvokeError(null);
-    await sendMessage(text);
-  }
+  const [error, setError] = useState<string | null>(null);
+  const connected = connectionState.status === "connected";
 
-  async function handleInvokeAgent(text: string) {
-    if (!agentId) {
-      setInvokeError("Set VITE_FLUXYCHAT_AGENT_ID in .env (run pnpm setup).");
-      return;
-    }
-    setInvokeError(null);
+  async function onSend(content: string) {
+    setError(null);
+    const mentionsAgent = content.toLowerCase().includes(
+      (session.agentHandle || "@assistant").replace(/^@/, "").toLowerCase(),
+    );
     try {
-      await invokeAgent(text, { agentId });
+      if (mentionsAgent && session.agentId) {
+        await invokeAgent(content, { agentId: session.agentId });
+      } else {
+        await sendMessage(content);
+      }
     } catch (err) {
-      setInvokeError(err instanceof Error ? err.message : "Agent invoke failed");
+      setError(err instanceof Error ? err.message : "Failed to send");
     }
   }
 
   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}
+    <div className="chat-column">
+      <div className="status-row">
+        <span className="inline-flex items-center gap-2">
+          <span className={`status-dot ${connected ? "on" : "off"}`} />
+          <span className="font-medium text-foreground">
+            {connected ? "Connected" : connectionState.status}
+          </span>
+          <span className="text-muted-foreground">· {session.roomId}</span>
+        </span>
+      </div>
 
-      {invokeError ? <p className="hint" style={{ color: "#b91c1c", padding: "0 1rem" }}>{invokeError}</p> : null}
+      <div className="chat-frame">
+        <ChatWindow
+          messages={messages}
+          online={online ?? 0}
+          typingUsers={typingUsers ?? {}}
+          onSend={(content) => {
+            void onSend(content);
+          }}
+          agentTyping={Boolean(agentTyping)}
+          agentTypingLabel={session.agentHandle || "@assistant"}
+          mentionSuggestions={[
+            {
+              handle: (session.agentHandle || "@assistant").replace(/^@/, ""),
+              label: session.agentHandle || "@assistant",
+              agentId: session.agentId,
+            },
+          ]}
+        />
+      </div>
 
-      <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>
+      <div className="prompts">
+        {SUGGESTED_PROMPTS.map((prompt) => (
           <button
+            key={prompt}
             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("");
+              const handle = session.agentHandle || "@assistant";
+              void onSend(`${handle} ${prompt}`);
             }}
           >
-            Ask agent
+            {prompt}
           </button>
-        </div>
-        <p className="hint">
-          Realtime via WebSocket · Agent replies stream in-room · Tool calls appear above
-        </p>
-      </form>
-    </section>
+        ))}
+      </div>
+      {error ? <p className="chat-error">{error}</p> : null}
+    </div>
   );
 }
 
 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>
-    );
-  }
+  const session = useMemo(() => loadCliSession() ?? sessionFromEnv(), []);
 
-  if (!client) return null;
+  if (!session) return <SignInGate />;
 
   return (
-    <main className="shell">
-      <div className="hero">
-        <h1>FluxyChat — full stack starter</h1>
-        <p>
-          Your app · Worker {workerUrl} ·{" "}
+    <main className="app-shell">
+      <header className="topbar">
+        <div className="brand">
+          <img src={`${consoleUrl.replace(/\/$/, "")}/fluxychat-icon.svg`} alt="" width={28} height={28} />
+          <span>FluxyChat</span>
+        </div>
+        <nav className="top-links">
+          <span className="meta">{session.projectName || session.projectId || "project"}</span>
           <a href={`${consoleUrl.replace(/\/$/, "")}/onboarding?from=cli`} target="_blank" rel="noreferrer">
-            Keep this project
+            Open console
           </a>
-        </p>
-      </div>
-
-      <div className="layout">
-        <FluxyRealtimeProvider client={client}>
-          <ChatRoom />
+        </nav>
+      </header>
+      <div className="page">
+        <FluxyRealtimeProvider
+          workerUrl={session.workerUrl}
+          authTokenProvider={session.memberJwt}
+          userId={session.userId}
+        >
+          <ChatRoom session={session} />
         </FluxyRealtimeProvider>
-
         <aside className="side">
-          <div className="card">
+          <section>
             <h2>Project</h2>
             <dl>
               <div>
-                <dt>Project ID</dt>
-                <dd>{projectId || "—"}</dd>
+                <dt>ID</dt>
+                <dd>{session.projectId || "—"}</dd>
               </div>
               <div>
                 <dt>Room</dt>
-                <dd>{roomId}</dd>
+                <dd>{session.roomId}</dd>
               </div>
               <div>
                 <dt>Agent</dt>
-                <dd>{agentHandle}{agentId ? ` (${agentId.slice(0, 12)}…)` : ""}</dd>
+                <dd>{session.agentHandle}</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>
+          </section>
+          <section>
+            <h2>Next</h2>
+            <ul>
+              <li>Send a message, or mention the agent to invoke it</li>
+              <li>Open a second tab on this URL for realtime</li>
+              <li>
+                <a href={`${consoleUrl.replace(/\/$/, "")}/onboarding?from=cli`} target="_blank" rel="noreferrer">
+                  Continue onboarding in the console
+                </a>
+              </li>
             </ul>
-          </div>
+          </section>
         </aside>
       </div>
     </main>

package/templates/full/src/index.css

@@ -1,242 +1,278 @@
-:root {
-  font-family: system-ui, -apple-system, sans-serif;
-  line-height: 1.5;
-  color: #0f172a;
-  background: #fdfbf9;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-* {
-  box-sizing: border-box;
+:root {
+  --background: #fdfbf9;
+  --foreground: #0e1316;
+  --surface: #fdfbf9;
+  --surface-muted: #f3f0ec;
+  --surface-card: #ffffff;
+  --text-primary: #1a1a1a;
+  --text-muted: #6b7280;
+  --border: #e5e0d8;
+  --brand: #ff725e;
+  --destructive: #dc2626;
+  --ring: #ff725e;
+  --radius: 0.5rem;
+
+  --fluxy-logo-color: #ff6a1a;
+  --fluxy-cta-color: #c2410c;
+  --fluxy-bubble-sent-bg: #ff6a1a;
+  --fluxy-bubble-sent-text: #ffffff;
+  --fluxy-bubble-received-bg: #f4f4f5;
+  --fluxy-bubble-received-border: #e4e4e7;
+  --fluxy-bubble-received-text: #1a1a1a;
+  --primary: var(--fluxy-cta-color);
+  --primary-foreground: #ffffff;
+  --muted: var(--surface-muted);
+  --muted-foreground: var(--text-muted);
+}
+
+html,
+body,
+#root {
+  height: 100%;
 }
 
 body {
   margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  -webkit-font-smoothing: antialiased;
 }
 
-.shell {
-  max-width: 880px;
-  margin: 0 auto;
-  padding: 1.5rem;
-}
-
-.hero {
-  margin-bottom: 1rem;
-}
-
-.hero h1 {
-  font-size: 1.35rem;
-  margin: 0 0 0.35rem;
+.app-shell {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--background);
 }
 
-.hero p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: #64748b;
+.topbar {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--surface-card);
 }
 
-.hero a {
-  color: #c2410c;
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 650;
+  font-size: 15px;
 }
 
-.layout {
-  display: grid;
-  gap: 1rem;
+.top-links {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  font-size: 13px;
 }
 
-@media (min-width: 900px) {
-  .layout {
-    grid-template-columns: 1fr 240px;
-    align-items: start;
-  }
+.top-links a,
+.side a {
+  color: var(--fluxy-cta-color);
+  font-weight: 500;
+  text-decoration: none;
 }
 
-.chat-panel {
-  display: flex;
-  flex-direction: column;
-  min-height: 520px;
-  border: 1px solid #e7e5e4;
-  border-radius: 16px;
-  background: #fff;
-  overflow: hidden;
-  box-shadow: 0 8px 30px rgb(15 23 42 / 6%);
+.top-links a:hover,
+.side a:hover {
+  text-decoration: underline;
 }
 
-.chat-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid #e7e5e4;
-  background: #0f172a;
-  color: #fff;
+.meta {
+  color: var(--text-muted);
 }
 
-.status {
-  font-size: 0.75rem;
-  opacity: 0.85;
+.page {
+  flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
+  min-height: 0;
 }
 
-.messages {
-  flex: 1;
-  overflow-y: auto;
-  list-style: none;
-  margin: 0;
-  padding: 1rem;
+.chat-column {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  min-width: 0;
+  padding: 16px 20px 20px;
+  gap: 12px;
 }
 
-.message {
-  display: flex;
-  flex-direction: column;
-  gap: 0.15rem;
-  padding: 0.6rem 0.85rem;
-  border-radius: 10px;
-  background: #f8fafc;
-  max-width: 85%;
+.status-row {
+  font-size: 12px;
+  color: var(--text-muted);
 }
 
-.message.self {
-  align-self: flex-end;
-  background: #fff7ed;
-  border: 1px solid #fed7aa;
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 99px;
+  display: inline-block;
 }
+.status-dot.on { background: #16a34a; }
+.status-dot.off { background: #d97706; }
 
-.message.agent {
-  background: #f1f5f9;
-  border: 1px solid #e2e8f0;
+.chat-frame {
+  flex: 1;
+  min-height: 420px;
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
-.author {
-  font-size: 0.7rem;
-  color: #64748b;
-  font-weight: 600;
+.chat-frame > div {
+  height: 100% !important;
+  max-width: none !important;
+  border: none !important;
+  border-radius: 0 !important;
 }
 
-.composer {
+.prompts {
   display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 0.75rem;
-  border-top: 1px solid #e7e5e4;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-.composer-row {
-  display: flex;
-  gap: 0.5rem;
+.prompts button {
+  border: 1px solid var(--border);
+  background: var(--surface-card);
+  color: var(--foreground);
+  border-radius: 999px;
+  padding: 6px 12px;
+  font-size: 12px;
+  cursor: pointer;
 }
 
-.composer input {
-  flex: 1;
-  border: 1px solid #cbd5e1;
-  border-radius: 10px;
-  padding: 0.55rem 0.75rem;
+.prompts button:hover {
+  border-color: var(--fluxy-cta-color);
+  color: var(--fluxy-cta-color);
 }
 
-.composer button {
-  border: none;
-  border-radius: 10px;
-  background: #c2410c;
-  color: #fff;
-  padding: 0.55rem 1rem;
-  cursor: pointer;
-  font-weight: 600;
+.chat-error {
+  color: var(--destructive);
+  font-size: 13px;
 }
 
-.composer button.secondary {
-  background: #0f172a;
+.side {
+  border-left: 1px solid var(--border);
+  background: var(--surface-muted);
+  padding: 20px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.composer button:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
+.side section {
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 14px;
 }
 
-.hint {
-  font-size: 0.75rem;
-  color: #64748b;
+.side h2 {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin: 0 0 10px;
 }
 
-.tools {
-  margin: 0 1rem 1rem;
-  padding: 0.75rem;
-  border-radius: 10px;
-  border: 1px solid #e2e8f0;
-  background: #f8fafc;
+.side dl {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 0;
 }
 
-.tools h3 {
-  margin: 0 0 0.5rem;
-  font-size: 0.7rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: #64748b;
+.side dt {
+  font-size: 11px;
+  color: var(--text-muted);
 }
 
-.tools ul {
+.side dd {
   margin: 0;
-  padding-left: 1rem;
-  font-size: 0.8rem;
+  font-size: 13px;
+  word-break: break-all;
 }
 
-.side {
+.side ul {
+  margin: 0;
+  padding-left: 1.1rem;
+  color: var(--text-muted);
+  font-size: 13px;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 8px;
 }
 
-.card {
-  border: 1px solid #e7e5e4;
-  border-radius: 12px;
-  padding: 0.85rem 1rem;
-  background: #fff;
-  font-size: 0.8rem;
+.signin-card {
+  margin: auto;
+  max-width: 440px;
+  width: calc(100% - 32px);
+  background: var(--surface-card);
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
-.card h2 {
-  margin: 0 0 0.5rem;
-  font-size: 0.75rem;
+.eyebrow {
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: #64748b;
-}
-
-.card dl {
-  margin: 0;
-  display: grid;
-  gap: 0.35rem;
+  color: var(--fluxy-cta-color);
+  margin: 0 0 8px;
 }
 
-.card dt {
-  color: #94a3b8;
-  font-size: 0.7rem;
+.signin-card h1 {
+  margin: 0 0 8px;
+  font-size: 24px;
 }
 
-.card dd {
-  margin: 0;
-  word-break: break-all;
+.signin-card p {
+  color: var(--text-muted);
+  font-size: 14px;
+  line-height: 1.5;
 }
 
-.card a {
-  color: #c2410c;
+.btn-primary {
+  display: inline-flex;
+  margin-top: 16px;
+  background: var(--fluxy-cta-color);
+  color: #fff;
+  border-radius: 10px;
+  padding: 10px 16px;
+  font-weight: 600;
+  font-size: 14px;
+  text-decoration: none;
 }
 
-.error-box {
-  border: 1px solid #fecaca;
-  background: #fef2f2;
-  color: #991b1b;
-  border-radius: 12px;
-  padding: 1rem;
-  font-size: 0.875rem;
+.btn-primary:hover {
+  background: #9a3412;
 }
 
-.error-box code {
-  font-size: 0.8rem;
+.fine-print {
+  margin-top: 12px;
+  font-size: 12px !important;
 }
 
-.typing {
-  padding: 0 1rem 0.5rem;
-  font-size: 0.75rem;
-  color: #64748b;
+@media (max-width: 860px) {
+  .page {
+    grid-template-columns: 1fr;
+  }
+  .side {
+    border-left: none;
+    border-top: 1px solid var(--border);
+  }
 }

package/templates/full/src/session.ts

@@ -0,0 +1,54 @@
+const STORAGE_KEY = "fluxy-cli-session";
+
+export interface CliSession {
+  workerUrl: string;
+  memberJwt: string;
+  roomId: string;
+  agentId: string;
+  agentHandle: string;
+  projectId: string;
+  userId: string;
+  projectName?: string;
+  consoleUrl?: string;
+}
+
+function isCliSession(value: unknown): value is CliSession {
+  if (!value || typeof value !== "object") return false;
+  const v = value as Record<string, unknown>;
+  return typeof v.memberJwt === "string" && v.memberJwt.length > 0 && typeof v.workerUrl === "string";
+}
+
+export function readCliSessionFromHash(): CliSession | null {
+  if (typeof window === "undefined") return null;
+  const hash = window.location.hash.replace(/^#/, "");
+  const raw = new URLSearchParams(hash).get("fluxy_cli") || (hash.startsWith("fluxy_cli=") ? hash.slice("fluxy_cli=".length) : "");
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(atob(decodeURIComponent(raw))) as unknown;
+    if (!isCliSession(parsed)) return null;
+    window.history.replaceState(null, "", window.location.pathname + window.location.search);
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+export function loadCliSession(): CliSession | null {
+  const fromHash = readCliSessionFromHash();
+  if (fromHash) {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(fromHash));
+    return fromHash;
+  }
+  try {
+    const stored = sessionStorage.getItem(STORAGE_KEY);
+    if (!stored) return null;
+    const parsed = JSON.parse(stored) as unknown;
+    return isCliSession(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+
+export function clearCliSession() {
+  sessionStorage.removeItem(STORAGE_KEY);
+}

package/templates/full/tailwind.config.js

@@ -0,0 +1,41 @@
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@fluxy-chat/ui/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+        border: "var(--border)",
+        muted: {
+          DEFAULT: "var(--surface-muted)",
+          foreground: "var(--text-muted)",
+        },
+        primary: {
+          DEFAULT: "var(--fluxy-cta-color)",
+          foreground: "#ffffff",
+        },
+        secondary: {
+          DEFAULT: "var(--surface-muted)",
+          foreground: "var(--foreground)",
+        },
+        card: {
+          DEFAULT: "var(--surface-card)",
+          foreground: "var(--foreground)",
+        },
+        destructive: {
+          DEFAULT: "var(--destructive)",
+          foreground: "#ffffff",
+        },
+        ring: "var(--ring)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+      },
+    },
+  },
+  plugins: [],
+};