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

package/CHANGELOG.md

@@ -1,12 +1,15 @@
 # Changelog
 
-## [0.5.4] - 2026-08-19
+## [0.5.6] - 2026-08-19
+
+### Changed
+
+- Hosted `full` template opens a local onboarding tour first. Clerk sign-in is the last step, then you land on a simple chat (same UI primitives as the console). Open a second tab to try realtime. Dashboard is a separate button, not the first screen.
 
 ### 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).
+- Pin Vite to `@fluxy-chat/ui/dist/index.js` and force `@fluxy-chat/sdk@0.6.2` so `pnpm install` + `pnpm dev` work without extra setup.
+- Depend on `@fluxy-chat/ui@^0.1.3` (valid package exports).
 
 ## [0.5.5] - 2026-08-19
 
@@ -16,6 +19,14 @@
 - 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.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.3] - 2026-08-19
 
 ### Fixed

package/package.json

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

package/templates/full/README.md

@@ -1,10 +1,10 @@
 # FluxyChat full stack starter
 
-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.
+Chat + AI agent in a Vite app. Hosted mode starts with a short local tour, then Clerk, then your own room.
 
 ## Quick start
 
-**Hosted (Clerk, no wrangler):**
+**Hosted (no wrangler):**
 
 ```bash
 npx @fluxy-chat/create-fluxy-chat@latest my-app --mode hosted -y
@@ -14,7 +14,7 @@ pnpm setup:hosted
 pnpm dev
 ```
 
-The app opens on localhost. Click Continue with FluxyChat, sign in, then you land in your own room (not the public playground).
+Localhost opens a 3-step tour. Last step is sign in. After Clerk you come back to a simple chat. Open a second tab to try realtime. Use Open dashboard for rooms and agents.
 
 **Local worker:**
 
@@ -40,7 +40,7 @@ pnpm dev
 
 `.env` from `pnpm setup:hosted` only needs worker and console URLs. Member JWT, room, and agent come from Clerk after sign in.
 
-Open console: [fluxychat.com/onboarding](https://fluxychat.com/onboarding)
+Dashboard: [fluxychat.com/dashboard](https://fluxychat.com/dashboard)
 
 ## Learn more
 

package/templates/full/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@fluxy-chat/react": "^0.1.1",
     "@fluxy-chat/sdk": "^0.6.2",
-    "@fluxy-chat/ui": "^0.1.2",
+    "@fluxy-chat/ui": "^0.1.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.511.0",
@@ -35,5 +35,11 @@
     "tailwindcss": "^3.4.17",
     "typescript": "^5.6.0",
     "vite": "^6.0.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "@fluxy-chat/sdk": "0.6.2",
+      "@fluxy-chat/react>@fluxy-chat/sdk": "0.6.2"
+    }
   }
 }

package/templates/full/src/App.tsx

@@ -17,6 +17,19 @@ const SUGGESTED_PROMPTS = [
   "What can this assistant do?",
 ];
 
+function consoleOrigin(): string {
+  return consoleUrl.replace(/\/$/, "");
+}
+
+function clerkAuthHref(): string {
+  const returnTo = typeof window !== "undefined" ? window.location.origin : "http://localhost:5173";
+  return `${consoleOrigin()}/cli-auth?redirect_uri=${encodeURIComponent(returnTo)}`;
+}
+
+function dashboardHref(): string {
+  return `${consoleOrigin()}/dashboard`;
+}
+
 function sessionFromEnv(): CliSession | null {
   if (!envWorkerUrl || !envJwt || !envRoomId) return null;
   return {
@@ -30,31 +43,73 @@ function sessionFromEnv(): CliSession | null {
   };
 }
 
-function SignInGate() {
-  const returnTo = typeof window !== "undefined" ? window.location.origin : "http://localhost:5173";
-  const href = `${consoleUrl.replace(/\/$/, "")}/cli-auth?redirect_uri=${encodeURIComponent(returnTo)}`;
+function Brand() {
+  return (
+    <div className="brand">
+      <img src={`${consoleOrigin()}/fluxychat-icon.svg`} alt="" width={28} height={28} />
+      <span>FluxyChat</span>
+    </div>
+  );
+}
+
+const TOUR_STEPS = [
+  {
+    title: "You already have an app",
+    body: "This folder is a real Vite chat app. After a short sign-in we create your project and a private room. No public playground.",
+  },
+  {
+    title: "Realtime is the point",
+    body: "After you are in, open this same URL in a second tab. Send a message in one window and watch it land in the other.",
+  },
+  {
+    title: "Then the console",
+    body: "Sign in is required: that is what creates (or reuses) your project and assistant room. After that the two-tab demo works. The dashboard is a separate button once you are in chat.",
+  },
+] as const;
+
+function LocalOnboarding() {
+  const [step, setStep] = useState(0);
+  const last = step === TOUR_STEPS.length - 1;
+  const current = TOUR_STEPS[step];
 
   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>
+        <Brand />
+        <span className="meta">
+          {step + 1} / {TOUR_STEPS.length}
+        </span>
       </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 className="onboard">
+        <div className="dots" aria-hidden>
+          {TOUR_STEPS.map((_, i) => (
+            <span key={i} className={`dot-step ${i === step ? "active" : ""}`} />
+          ))}
+        </div>
+        <p className="eyebrow">Quick start</p>
+        <h1>{current.title}</h1>
+        <p>{current.body}</p>
+        <div className="onboard-actions">
+          {step > 0 ? (
+            <button type="button" className="btn-ghost" onClick={() => setStep((s) => s - 1)}>
+              Back
+            </button>
+          ) : null}
+          {last ? (
+            <a className="btn-primary" href={clerkAuthHref()}>
+              Sign in or create account
+            </a>
+          ) : (
+            <button type="button" className="btn-primary" onClick={() => setStep((s) => s + 1)}>
+              Continue
+            </button>
+          )}
+        </div>
+        {last ? (
+          <p className="fine-print">
+            Clerk on fluxychat.com, then back here with your room ready.
+          </p>
+        ) : null}
       </div>
     </main>
   );
@@ -73,9 +128,9 @@ function ChatRoom({ session }: { session: CliSession }) {
 
   async function onSend(content: string) {
     setError(null);
-    const mentionsAgent = content.toLowerCase().includes(
-      (session.agentHandle || "@assistant").replace(/^@/, "").toLowerCase(),
-    );
+    const mentionsAgent = content
+      .toLowerCase()
+      .includes((session.agentHandle || "@assistant").replace(/^@/, "").toLowerCase());
     try {
       if (mentionsAgent && session.agentId) {
         await invokeAgent(content, { agentId: session.agentId });
@@ -95,7 +150,7 @@ function ChatRoom({ session }: { session: CliSession }) {
           <span className="font-medium text-foreground">
             {connected ? "Connected" : connectionState.status}
           </span>
-          <span className="text-muted-foreground">· {session.roomId}</span>
+          <span className="text-muted-foreground"> · {session.roomId}</span>
         </span>
       </div>
 
@@ -141,19 +196,16 @@ function ChatRoom({ session }: { session: CliSession }) {
 export function App() {
   const session = useMemo(() => loadCliSession() ?? sessionFromEnv(), []);
 
-  if (!session) return <SignInGate />;
+  if (!session) return <LocalOnboarding />;
 
   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>
+        <Brand />
         <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
+          <span className="meta">{session.projectName || session.projectId || "your room"}</span>
+          <a href={dashboardHref()} target="_blank" rel="noreferrer">
+            Open dashboard
           </a>
         </nav>
       </header>
@@ -166,13 +218,17 @@ export function App() {
           <ChatRoom session={session} />
         </FluxyRealtimeProvider>
         <aside className="side">
+          <section>
+            <h2>Try this</h2>
+            <ul>
+              <li>Open a second tab on this same URL</li>
+              <li>Send a message in one tab. It should appear in the other.</li>
+              <li>Mention the agent to get a reply</li>
+            </ul>
+          </section>
           <section>
             <h2>Project</h2>
             <dl>
-              <div>
-                <dt>ID</dt>
-                <dd>{session.projectId || "—"}</dd>
-              </div>
               <div>
                 <dt>Room</dt>
                 <dd>{session.roomId}</dd>
@@ -184,16 +240,11 @@ export function App() {
             </dl>
           </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>
+            <h2>Console</h2>
+            <p className="side-copy">Rooms, agents, and settings live in the dashboard.</p>
+            <a className="btn-primary side-btn" href={dashboardHref()} target="_blank" rel="noreferrer">
+              Open dashboard
+            </a>
           </section>
         </aside>
       </div>

package/templates/full/src/index.css

@@ -76,14 +76,14 @@ body {
 }
 
 .top-links a,
-.side a {
+.side a:not(.btn-primary) {
   color: var(--fluxy-cta-color);
   font-weight: 500;
   text-decoration: none;
 }
 
 .top-links a:hover,
-.side a:hover {
+.side a:not(.btn-primary):hover {
   text-decoration: underline;
 }
 
@@ -226,6 +226,78 @@ body {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
+.onboard {
+  margin: auto;
+  max-width: 520px;
+  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);
+}
+
+.onboard h1 {
+  margin: 0 0 8px;
+  font-size: 24px;
+}
+
+.onboard p {
+  color: var(--text-muted);
+  font-size: 15px;
+  line-height: 1.55;
+}
+
+.dots {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 16px;
+}
+
+.dot-step {
+  width: 8px;
+  height: 8px;
+  border-radius: 99px;
+  background: var(--border);
+}
+
+.dot-step.active {
+  background: var(--fluxy-cta-color);
+  width: 22px;
+}
+
+.onboard-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.btn-ghost {
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--foreground);
+  border-radius: 10px;
+  padding: 10px 16px;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.btn-primary.side-btn {
+  margin-top: 10px;
+  width: 100%;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.side-copy {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.45;
+}
+
 .eyebrow {
   font-size: 11px;
   font-weight: 650;
@@ -248,14 +320,19 @@ body {
 
 .btn-primary {
   display: inline-flex;
-  margin-top: 16px;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0;
   background: var(--fluxy-cta-color);
   color: #fff;
+  border: none;
   border-radius: 10px;
   padding: 10px 16px;
   font-weight: 600;
   font-size: 14px;
   text-decoration: none;
+  cursor: pointer;
+  font-family: inherit;
 }
 
 .btn-primary:hover {

package/templates/full/vite.config.ts

@@ -3,5 +3,12 @@ import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      // @fluxy-chat/ui currently ships an entrypoint Vite cannot resolve reliably.
+      // Pin to dist js to keep template apps booting consistently.
+      "@fluxy-chat/ui": "@fluxy-chat/ui/dist/index.js",
+    },
+  },
   server: { port: 5173, open: true },
 });