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

package/CHANGELOG.md

@@ -8,6 +8,14 @@
 - 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.4",
+  "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,14 +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",
+    "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,220 +1,200 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 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() || "";
+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 memberUserId = import.meta.env.VITE_FLUXYCHAT_USER_ID?.trim() || "demo-user";
 
-function ChatRoom() {
-  const { messages, sendMessage, invokeAgent, connectionState, agentTyping } = useChat({
-    roomId,
-    agentId: agentId || undefined,
-    markReadLatest: true,
-  });
+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",
+  };
+}
+
+function SignInGate() {
+  const returnTo = typeof window !== "undefined" ? window.location.origin : "http://localhost:5173";
+  const href = `${consoleUrl.replace(/\/$/, "")}/cli-auth?redirect_uri=${encodeURIComponent(returnTo)}`;
+
+  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>
+  );
+}
+
+function ChatRoom({ session }: { session: CliSession }) {
+  const { messages, sendMessage, invokeAgent, connectionState, agentTyping, typingUsers, online } =
+    useChat({
+      roomId: session.roomId,
+      agentId: session.agentId || undefined,
+      markReadLatest: true,
+    });
 
-  const [draft, setDraft] = useState("");
   const [error, setError] = useState<string | null>(null);
-  const isConnected = connectionState.status === "connected";
+  const connected = connectionState.status === "connected";
 
-  async function handleSend(text: string) {
-    if (!text.trim()) return;
+  async function onSend(content: string) {
     setError(null);
+    const mentionsAgent = content.toLowerCase().includes(
+      (session.agentHandle || "@assistant").replace(/^@/, "").toLowerCase(),
+    );
     try {
-      await sendMessage(text);
+      if (mentionsAgent && session.agentId) {
+        await invokeAgent(content, { agentId: session.agentId });
+      } else {
+        await sendMessage(content);
+      }
     } catch (err) {
       setError(err instanceof Error ? err.message : "Failed to send");
     }
   }
 
-  async function handleAskAgent(text: string) {
-    if (!agentId) {
-      setError("No agent configured. Run pnpm setup again.");
-      return;
-    }
-    setError(null);
-    try {
-      await invokeAgent(text, { agentId });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Agent invoke failed");
-    }
-  }
-
-  function submit(e: React.FormEvent) {
-    e.preventDefault();
-    const text = draft.trim();
-    if (!text) return;
-    setDraft("");
-    void handleSend(text);
-  }
-
   return (
-    <div className="chat-panel">
-      <div className="chat-header">
-        <span className="room-name"># {roomId}</span>
-        <span className={`status-badge ${isConnected ? "connected" : "disconnected"}`}>
-          {isConnected ? "live" : connectionState.status}
+    <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>
 
-      <div className="messages-list">
-        {messages.length === 0 && (
-          <div className="empty-state">
-            Send a message or ask the agent something below.
-          </div>
-        )}
-        {messages.map((m) => {
-          const isSelf = m.userId === memberUserId;
-          const isAgent = String(m.userId ?? "").includes("agent") || m.userId === "assistant";
-          return (
-            <div
-              key={m.id ?? `${m.createdAt}-${m.userId}`}
-              className={`message ${isSelf ? "self" : ""} ${isAgent ? "agent" : ""}`.trim()}
-            >
-              <span className="msg-author">{m.userId}</span>
-              <p className="msg-body">{m.content}</p>
-            </div>
-          );
-        })}
-        {agentTyping && (
-          <div className="message agent typing-indicator">
-            <span className="msg-author">{agentHandle}</span>
-            <p className="msg-body">
-              <span className="dot" />
-              <span className="dot" />
-              <span className="dot" />
-            </p>
-          </div>
-        )}
-      </div>
-
-      {error && <p className="chat-error">{error}</p>}
-
-      <form className="composer" onSubmit={submit}>
-        <input
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          placeholder={`Message #${roomId}…`}
-          aria-label="Message"
-          autoFocus
-        />
-        <button type="submit" disabled={!draft.trim()}>
-          Send
-        </button>
-        <button
-          type="button"
-          className="btn-agent"
-          disabled={!draft.trim()}
-          onClick={() => {
-            const text = draft.trim();
-            if (!text) return;
-            setDraft("");
-            void handleAskAgent(text.startsWith("@") ? text : `${agentHandle} ${text}`);
+      <div className="chat-frame">
+        <ChatWindow
+          messages={messages}
+          online={online ?? 0}
+          typingUsers={typingUsers ?? {}}
+          onSend={(content) => {
+            void onSend(content);
           }}
-        >
-          Ask agent
-        </button>
-      </form>
-    </div>
-  );
-}
-
-function SetupRequired() {
-  return (
-    <main className="shell">
-      <div className="setup-card">
-        <div className="logo">
-          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
-            <rect width="32" height="32" rx="8" fill="#6366f1" />
-            <path d="M8 10h16M8 16h10M8 22h13" stroke="white" strokeWidth="2" strokeLinecap="round" />
-          </svg>
-          <span>FluxyChat</span>
-        </div>
-        <h1>Setup required</h1>
-        <p>Run the setup script to provision your credentials, then start the app.</p>
-        <pre><code>{`pnpm setup:hosted   # hosted demo (no local worker)
-# — or —
-pnpm setup          # local worker (pnpm dev in monorepo first)
+          agentTyping={Boolean(agentTyping)}
+          agentTypingLabel={session.agentHandle || "@assistant"}
+          mentionSuggestions={[
+            {
+              handle: (session.agentHandle || "@assistant").replace(/^@/, ""),
+              label: session.agentHandle || "@assistant",
+              agentId: session.agentId,
+            },
+          ]}
+        />
+      </div>
 
-pnpm dev`}</code></pre>
-        <p className="hint">
-          Or copy <code>.env.example</code> to <code>.env</code> and fill in your credentials
-          from{" "}
-          <a href={`${consoleUrl}/onboarding`} target="_blank" rel="noreferrer">
-            the console
-          </a>
-          .
-        </p>
+      <div className="prompts">
+        {SUGGESTED_PROMPTS.map((prompt) => (
+          <button
+            key={prompt}
+            type="button"
+            onClick={() => {
+              const handle = session.agentHandle || "@assistant";
+              void onSend(`${handle} ${prompt}`);
+            }}
+          >
+            {prompt}
+          </button>
+        ))}
       </div>
-    </main>
+      {error ? <p className="chat-error">{error}</p> : null}
+    </div>
   );
 }
 
 export function App() {
-  if (!workerUrl || !memberJwt) return <SetupRequired />;
+  const session = useMemo(() => loadCliSession() ?? sessionFromEnv(), []);
+
+  if (!session) return <SignInGate />;
 
   return (
-    <main className="shell">
-      <header className="app-header">
-        <div className="app-logo">
-          <svg width="24" height="24" viewBox="0 0 32 32" fill="none">
-            <rect width="32" height="32" rx="8" fill="#6366f1" />
-            <path d="M8 10h16M8 16h10M8 22h13" stroke="white" strokeWidth="2" strokeLinecap="round" />
-          </svg>
+    <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="app-nav">
-          <span className="nav-item">Project: {projectId || "demo"}</span>
-          <a
-            href={`${consoleUrl.replace(/\/$/, "")}/onboarding?from=cli`}
-            target="_blank"
-            rel="noreferrer"
-            className="nav-link"
-          >
+        <nav className="top-links">
+          <span className="meta">{session.projectName || session.projectId || "project"}</span>
+          <a href={`${consoleUrl.replace(/\/$/, "")}/onboarding?from=cli`} target="_blank" rel="noreferrer">
             Open console
           </a>
         </nav>
       </header>
-
-      <div className="layout">
+      <div className="page">
         <FluxyRealtimeProvider
-          workerUrl={workerUrl}
-          authTokenProvider={memberJwt}
-          userId={memberUserId}
+          workerUrl={session.workerUrl}
+          authTokenProvider={session.memberJwt}
+          userId={session.userId}
         >
-          <ChatRoom />
+          <ChatRoom session={session} />
         </FluxyRealtimeProvider>
-
-        <aside className="sidebar">
-          <div className="sidebar-card">
-            <h3>Project</h3>
+        <aside className="side">
+          <section>
+            <h2>Project</h2>
             <dl>
-              <div><dt>ID</dt><dd>{projectId || "hosted-demo"}</dd></div>
-              <div><dt>Room</dt><dd>{roomId}</dd></div>
-              <div><dt>Agent</dt><dd>{agentHandle}</dd></div>
-              <div><dt>Worker</dt><dd>{workerUrl}</dd></div>
+              <div>
+                <dt>ID</dt>
+                <dd>{session.projectId || "—"}</dd>
+              </div>
+              <div>
+                <dt>Room</dt>
+                <dd>{session.roomId}</dd>
+              </div>
+              <div>
+                <dt>Agent</dt>
+                <dd>{session.agentHandle}</dd>
+              </div>
             </dl>
-          </div>
-          <div className="sidebar-card">
-            <h3>Try it</h3>
+          </section>
+          <section>
+            <h2>Next</h2>
             <ul>
-              <li>Open a second tab to see realtime sync</li>
-              <li>Ask the agent about FluxyChat</li>
+              <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"
-                >
-                  Keep this project in the console
+                <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,354 +1,278 @@
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
-  --bg: #0f0f10;
-  --surface: #18181b;
-  --surface-2: #27272a;
-  --border: #3f3f46;
-  --text: #fafafa;
-  --text-muted: #a1a1aa;
-  --accent: #6366f1;
-  --accent-hover: #4f46e5;
-  --agent: #10b981;
-  --danger: #ef4444;
-  --radius: 10px;
-  --font: "Inter", system-ui, -apple-system, sans-serif;
-}
-
-html, body, #root { height: 100%; }
+  --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 {
-  font-family: var(--font);
-  background: var(--bg);
-  color: var(--text);
-  font-size: 14px;
-  line-height: 1.5;
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 
-a { color: var(--accent); text-decoration: none; }
-a:hover { text-decoration: underline; }
-
-/* ---- App shell ---- */
-
-.shell {
+.app-shell {
+  min-height: 100%;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  background: var(--background);
 }
 
-.app-header {
+.topbar {
+  height: 56px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
-  height: 52px;
   border-bottom: 1px solid var(--border);
-  background: var(--surface);
-  flex-shrink: 0;
+  background: var(--surface-card);
 }
 
-.app-logo {
+.brand {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-weight: 600;
+  font-weight: 650;
   font-size: 15px;
 }
 
-.app-nav {
+.top-links {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 14px;
+  font-size: 13px;
 }
 
-.nav-item { color: var(--text-muted); font-size: 13px; }
+.top-links a,
+.side a {
+  color: var(--fluxy-cta-color);
+  font-weight: 500;
+  text-decoration: none;
+}
 
-.nav-link {
-  font-size: 13px;
-  color: var(--accent);
-  border: 1px solid var(--accent);
-  border-radius: 6px;
-  padding: 4px 10px;
-  transition: background 0.15s;
+.top-links a:hover,
+.side a:hover {
+  text-decoration: underline;
 }
-.nav-link:hover { background: rgba(99,102,241,0.1); text-decoration: none; }
 
-/* ---- Layout ---- */
+.meta {
+  color: var(--text-muted);
+}
 
-.layout {
-  display: flex;
+.page {
   flex: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
   min-height: 0;
-  overflow: hidden;
 }
 
-/* ---- Chat panel ---- */
-
-.chat-panel {
-  flex: 1;
+.chat-column {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  border-right: 1px solid var(--border);
-}
-
-.chat-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 20px;
-  border-bottom: 1px solid var(--border);
-  background: var(--surface);
-  flex-shrink: 0;
+  padding: 16px 20px 20px;
+  gap: 12px;
 }
 
-.room-name {
-  font-weight: 600;
-  font-size: 15px;
+.status-row {
+  font-size: 12px;
+  color: var(--text-muted);
 }
 
-.status-badge {
-  font-size: 11px;
-  font-weight: 500;
-  padding: 2px 8px;
+.status-dot {
+  width: 8px;
+  height: 8px;
   border-radius: 99px;
-  letter-spacing: 0.03em;
+  display: inline-block;
 }
-.status-badge.connected { background: rgba(16,185,129,0.15); color: var(--agent); }
-.status-badge.disconnected { background: rgba(239,68,68,0.15); color: var(--danger); }
+.status-dot.on { background: #16a34a; }
+.status-dot.off { background: #d97706; }
 
-.messages-list {
+.chat-frame {
   flex: 1;
-  overflow-y: auto;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  scroll-behavior: smooth;
-}
-
-.empty-state {
-  margin: auto;
-  text-align: center;
-  color: var(--text-muted);
-  font-size: 14px;
-}
-
-/* ---- Messages ---- */
-
-.message {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 6px 10px;
-  border-radius: 8px;
-  max-width: 75%;
-  align-self: flex-start;
-}
-
-.message.self {
-  align-self: flex-end;
-  background: rgba(99,102,241,0.12);
-}
-
-.message.agent {
-  background: rgba(16,185,129,0.08);
-  border-left: 2px solid var(--agent);
-}
-
-.msg-author {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  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);
 }
 
-.message.self .msg-author { color: var(--accent); }
-.message.agent .msg-author { color: var(--agent); }
-
-.msg-body {
-  color: var(--text);
-  line-height: 1.55;
-  word-break: break-word;
-  white-space: pre-wrap;
+.chat-frame > div {
+  height: 100% !important;
+  max-width: none !important;
+  border: none !important;
+  border-radius: 0 !important;
 }
 
-/* ---- Typing indicator ---- */
-
-.typing-indicator .msg-body {
+.prompts {
   display: flex;
-  gap: 4px;
-  align-items: center;
-  padding: 4px 0;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-.dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: var(--agent);
-  animation: bounce 1.2s infinite ease-in-out;
+.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;
 }
-.dot:nth-child(2) { animation-delay: 0.2s; }
-.dot:nth-child(3) { animation-delay: 0.4s; }
 
-@keyframes bounce {
-  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
-  40% { transform: translateY(-4px); opacity: 1; }
+.prompts button:hover {
+  border-color: var(--fluxy-cta-color);
+  color: var(--fluxy-cta-color);
 }
 
-/* ---- Composer ---- */
-
 .chat-error {
-  margin: 0 20px 8px;
-  color: var(--danger);
+  color: var(--destructive);
   font-size: 13px;
 }
 
-.composer {
+.side {
+  border-left: 1px solid var(--border);
+  background: var(--surface-muted);
+  padding: 20px 16px;
   display: flex;
-  gap: 8px;
-  padding: 14px 20px;
-  border-top: 1px solid var(--border);
-  background: var(--surface);
-  flex-shrink: 0;
-  align-items: center;
+  flex-direction: column;
+  gap: 16px;
 }
 
-.composer input {
-  flex: 1;
-  background: var(--surface-2);
+.side section {
+  background: var(--surface-card);
   border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 9px 14px;
-  color: var(--text);
-  font-size: 14px;
-  font-family: var(--font);
-  outline: none;
-  transition: border-color 0.15s;
-}
-.composer input:focus { border-color: var(--accent); }
-.composer input::placeholder { color: var(--text-muted); }
-
-.composer button {
-  padding: 9px 16px;
-  border-radius: var(--radius);
-  border: none;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.15s, opacity 0.15s;
-  white-space: nowrap;
-  font-family: var(--font);
+  border-radius: 12px;
+  padding: 14px;
 }
-.composer button:disabled { opacity: 0.4; cursor: not-allowed; }
 
-.composer button[type="submit"] {
-  background: var(--accent);
-  color: #fff;
-}
-.composer button[type="submit"]:hover:not(:disabled) { background: var(--accent-hover); }
-
-.composer .btn-agent {
-  background: rgba(16,185,129,0.12);
-  color: var(--agent);
-  border: 1px solid rgba(16,185,129,0.3);
+.side h2 {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  margin: 0 0 10px;
 }
-.composer .btn-agent:hover:not(:disabled) { background: rgba(16,185,129,0.2); }
-
-/* ---- Sidebar ---- */
 
-.sidebar {
-  width: 280px;
-  flex-shrink: 0;
-  overflow-y: auto;
-  padding: 20px 16px;
+.side dl {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  background: var(--surface);
-}
-
-.sidebar-card {
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 14px 16px;
+  gap: 8px;
+  margin: 0;
 }
 
-.sidebar-card h3 {
+.side dt {
   font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.07em;
   color: var(--text-muted);
-  margin-bottom: 10px;
 }
 
-.sidebar-card dl { display: flex; flex-direction: column; gap: 6px; }
-.sidebar-card dl > div { display: flex; flex-direction: column; gap: 1px; }
-.sidebar-card dt { font-size: 11px; color: var(--text-muted); }
-.sidebar-card dd {
+.side dd {
+  margin: 0;
   font-size: 13px;
-  color: var(--text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  word-break: break-all;
 }
 
-.sidebar-card ul {
-  list-style: none;
+.side ul {
+  margin: 0;
+  padding-left: 1.1rem;
+  color: var(--text-muted);
+  font-size: 13px;
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-.sidebar-card li { font-size: 13px; color: var(--text-muted); }
-.sidebar-card li a { color: var(--accent); }
-
-/* ---- Setup required ---- */
 
-.setup-card {
+.signin-card {
   margin: auto;
-  background: var(--surface);
+  max-width: 440px;
+  width: calc(100% - 32px);
+  background: var(--surface-card);
   border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 36px 40px;
-  max-width: 480px;
-  width: 90%;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
-.setup-card .logo {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 700;
-  font-size: 16px;
+.eyebrow {
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--fluxy-cta-color);
+  margin: 0 0 8px;
 }
 
-.setup-card h1 {
-  font-size: 22px;
-  font-weight: 700;
+.signin-card h1 {
+  margin: 0 0 8px;
+  font-size: 24px;
 }
 
-.setup-card p { color: var(--text-muted); font-size: 14px; }
-.setup-card .hint { font-size: 13px; }
+.signin-card p {
+  color: var(--text-muted);
+  font-size: 14px;
+  line-height: 1.5;
+}
 
-.setup-card pre {
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 14px 16px;
-  overflow-x: auto;
+.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;
 }
 
-.setup-card code {
-  font-family: "Fira Code", "Cascadia Code", monospace;
-  font-size: 13px;
-  color: var(--text);
-  line-height: 1.8;
+.btn-primary:hover {
+  background: #9a3412;
+}
+
+.fine-print {
+  margin-top: 12px;
+  font-size: 12px !important;
+}
+
+@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: [],
+};