@sansavision/create-pulse 0.4.1 → 0.4.3

package/templates/nextjs-auth-demo/src/app/page.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+import Link from "next/link";
+import {
+  Zap,
+  Shield,
+  Wifi,
+  MessageSquare,
+  Video,
+  Database,
+  Gamepad2,
+  Lock,
+  ArrowRight,
+  Globe,
+  Clock,
+  Activity,
+} from "lucide-react";
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen">
+      {/* Nav */}
+      <nav className="fixed top-0 left-0 right-0 z-50 glass">
+        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-purple-500 to-cyan-500 flex items-center justify-center">
+              <Zap className="w-5 h-5 text-white" />
+            </div>
+            <span className="text-xl font-bold">Pulse</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <Link
+              href="/auth/sign-in"
+              className="px-4 py-2 text-sm text-slate-300 hover:text-white transition-colors"
+            >
+              Sign In
+            </Link>
+            <Link
+              href="/auth/sign-up"
+              className="px-5 py-2 text-sm bg-purple-600 hover:bg-purple-500 rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-purple-500/25"
+            >
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero */}
+      <section className="relative pt-32 pb-20 px-6 overflow-hidden">
+        {/* Background gradient orbs */}
+        <div className="absolute top-20 left-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-[128px]" />
+        <div className="absolute top-40 right-1/4 w-96 h-96 bg-cyan-500/20 rounded-full blur-[128px]" />
+
+        <div className="max-w-5xl mx-auto text-center relative z-10">
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-purple-500/30 bg-purple-500/10 text-purple-300 text-sm mb-8">
+            <Activity className="w-3.5 h-3.5" />
+            <span>PLP — Pulse Line Protocol v1</span>
+          </div>
+
+          <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight leading-tight mb-6">
+            <span className="gradient-text">The Real-Time Protocol</span>
+            <br />
+            <span className="text-slate-200">for Modern Applications</span>
+          </h1>
+
+          <p className="text-xl text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+            Sub-millisecond latency, end-to-end encryption, durable queues, and
+            external auth — all in one binary. Built with Rust, powered by QUIC.
+          </p>
+
+          <div className="flex items-center justify-center gap-4">
+            <Link
+              href="/auth/sign-up"
+              className="inline-flex items-center gap-2 px-8 py-3.5 bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 rounded-xl font-semibold text-lg transition-all hover:shadow-xl hover:shadow-purple-500/25 pulse-glow"
+            >
+              Try the Demo
+              <ArrowRight className="w-5 h-5" />
+            </Link>
+            <a
+              href="https://github.com/Sansa-Organisation/pulse"
+              target="_blank"
+              rel="noopener"
+              className="px-8 py-3.5 rounded-xl font-semibold text-lg border border-slate-700 hover:border-slate-500 hover:bg-slate-800/50 transition-all"
+            >
+              GitHub
+            </a>
+          </div>
+
+          {/* Stats */}
+          <div className="grid grid-cols-3 gap-8 max-w-xl mx-auto mt-16">
+            {[
+              { label: "Latency", value: "<1ms", icon: Clock },
+              { label: "Connections", value: "100K+", icon: Globe },
+              { label: "Uptime", value: "99.99%", icon: Activity },
+            ].map((stat) => (
+              <div key={stat.label} className="text-center">
+                <stat.icon className="w-5 h-5 text-purple-400 mx-auto mb-2" />
+                <div className="text-2xl font-bold">{stat.value}</div>
+                <div className="text-sm text-slate-500">{stat.label}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features */}
+      <section className="py-20 px-6">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-16">
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">
+              Everything you need, out of the box
+            </h2>
+            <p className="text-slate-400 text-lg max-w-xl mx-auto">
+              One protocol, five powerful modes. Each demo below is fully functional
+              and uses real PLP connections.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {[
+              {
+                icon: MessageSquare,
+                title: "Real-time Chat",
+                desc: "Multi-user rooms with typing indicators, presence, and message history.",
+                color: "from-blue-500 to-blue-600",
+              },
+              {
+                icon: Video,
+                title: "Watch Together",
+                desc: "Synchronized video playback — play, pause, seek in perfect sync.",
+                color: "from-pink-500 to-rose-600",
+              },
+              {
+                icon: Database,
+                title: "Durable Queues",
+                desc: "Persist messages, simulate offline, come back online — nothing lost.",
+                color: "from-amber-500 to-orange-600",
+              },
+              {
+                icon: Gamepad2,
+                title: "Game State Sync",
+                desc: "Real-time shared state with conflict-free resolution.",
+                color: "from-green-500 to-emerald-600",
+              },
+              {
+                icon: Lock,
+                title: "E2E Encrypted Chat",
+                desc: "End-to-end encryption with relay-blind transport.",
+                color: "from-purple-500 to-violet-600",
+              },
+              {
+                icon: Shield,
+                title: "Auth Context",
+                desc: "External auth integration — Better Auth, Clerk, Auth0, and more.",
+                color: "from-cyan-500 to-teal-600",
+              },
+            ].map((feature) => (
+              <div
+                key={feature.title}
+                className="demo-card glass rounded-2xl p-6"
+              >
+                <div
+                  className={`w-12 h-12 rounded-xl bg-gradient-to-br ${feature.color} flex items-center justify-center mb-4`}
+                >
+                  <feature.icon className="w-6 h-6 text-white" />
+                </div>
+                <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+                <p className="text-slate-400 text-sm leading-relaxed">
+                  {feature.desc}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Architecture */}
+      <section className="py-20 px-6">
+        <div className="max-w-4xl mx-auto">
+          <div className="glass rounded-2xl p-8 md:p-12">
+            <h2 className="text-2xl font-bold mb-6 text-center">
+              How Auth Works
+            </h2>
+            <div className="flex flex-col md:flex-row items-center gap-6">
+              {[
+                {
+                  step: 1,
+                  icon: Shield,
+                  title: "Sign In",
+                  desc: "User authenticates via Better Auth (email/password)",
+                },
+                {
+                  step: 2,
+                  icon: Wifi,
+                  title: "Connect",
+                  desc: "SDK sends bearer token in PLP CONNECT handshake",
+                },
+                {
+                  step: 3,
+                  icon: Zap,
+                  title: "Verify",
+                  desc: "Relay calls webhook → Better Auth validates session",
+                },
+              ].map((item, i) => (
+                <div key={item.step} className="flex-1 text-center">
+                  <div className="w-10 h-10 rounded-full bg-purple-600 text-white font-bold flex items-center justify-center mx-auto mb-3">
+                    {item.step}
+                  </div>
+                  <item.icon className="w-6 h-6 text-purple-400 mx-auto mb-2" />
+                  <h4 className="font-semibold mb-1">{item.title}</h4>
+                  <p className="text-sm text-slate-400">{item.desc}</p>
+                  {i < 2 && (
+                    <ArrowRight className="w-5 h-5 text-slate-600 mx-auto mt-4 hidden md:block rotate-0" />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-20 px-6">
+        <div className="max-w-3xl mx-auto text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">
+            Ready to experience it?
+          </h2>
+          <p className="text-slate-400 text-lg mb-8">
+            Create an account and explore every feature live. Open two browser
+            tabs to see multi-user sync in action.
+          </p>
+          <Link
+            href="/auth/sign-up"
+            className="inline-flex items-center gap-2 px-10 py-4 bg-gradient-to-r from-purple-600 to-cyan-600 hover:from-purple-500 hover:to-cyan-500 rounded-xl font-semibold text-lg transition-all hover:shadow-xl hover:shadow-purple-500/25"
+          >
+            Create Account
+            <ArrowRight className="w-5 h-5" />
+          </Link>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t border-slate-800 py-8 px-6">
+        <div className="max-w-6xl mx-auto flex items-center justify-between text-sm text-slate-500">
+          <span>© 2026 Sansa Vision. Pulse Protocol.</span>
+          <div className="flex items-center gap-1">
+            <div className="status-online" />
+            <span>Relay Live</span>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/templates/nextjs-auth-demo/src/lib/auth-client.ts

@@ -0,0 +1,15 @@
+import { createAuthClient } from "better-auth/react";
+
+export const authClient = createAuthClient({
+    baseURL: typeof window !== "undefined" ? window.location.origin : "http://localhost:3000",
+    fetchOptions: {
+        onSuccess: (ctx) => {
+            const authToken = ctx.response.headers.get("set-auth-token");
+            if (authToken && typeof window !== "undefined") {
+                localStorage.setItem("pulse_bearer_token", authToken);
+            }
+        },
+    },
+});
+
+export const { signIn, signUp, signOut, useSession } = authClient;

package/templates/nextjs-auth-demo/src/lib/auth.ts

@@ -0,0 +1,14 @@
+import { betterAuth } from "better-auth";
+import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { bearer } from "better-auth/plugins";
+import { db } from "./db";
+import * as schema from "./schema";
+
+export const auth = betterAuth({
+    database: drizzleAdapter(db, { provider: "sqlite", schema }),
+    emailAndPassword: {
+        enabled: true,
+    },
+    plugins: [bearer()],
+    trustedOrigins: [process.env.BETTER_AUTH_URL || "http://localhost:3000"],
+});

package/templates/nextjs-auth-demo/src/lib/db.ts

@@ -0,0 +1,6 @@
+import Database from "better-sqlite3";
+import { drizzle } from "drizzle-orm/better-sqlite3";
+import * as schema from "./schema";
+
+const sqlite = new Database("./sqlite.db");
+export const db = drizzle(sqlite, { schema });

package/templates/nextjs-auth-demo/src/lib/pulse.ts

@@ -0,0 +1,45 @@
+"use client";
+
+import { Pulse } from "@sansavision/pulse-sdk";
+
+let pulseInstance: Pulse | null = null;
+
+export function getPulse(): Pulse {
+    if (!pulseInstance) {
+        pulseInstance = new Pulse({ apiKey: "demo" });
+    }
+    return pulseInstance;
+}
+
+/**
+ * Get the bearer token stored by Better Auth for Pulse auth.
+ */
+export function getPulseToken(): string | null {
+    if (typeof window === "undefined") return null;
+    return localStorage.getItem("pulse_bearer_token");
+}
+
+/**
+ * Connect to the Pulse relay with authentication.
+ * Uses the Better Auth bearer token for the PLP CONNECT handshake.
+ */
+export async function connectWithAuth() {
+    const pulse = getPulse();
+    const token = getPulseToken();
+    const url = process.env.NEXT_PUBLIC_PULSE_URL || "ws://localhost:4001";
+
+    const conn = await pulse.connect(url, {
+        encoding: "json",
+        autoReconnect: true,
+        ...(token
+            ? {
+                auth: {
+                    token,
+                    provider: "better-auth",
+                },
+            }
+            : {}),
+    });
+
+    return conn;
+}

package/templates/nextjs-auth-demo/src/lib/schema.ts

@@ -0,0 +1,107 @@
+import { relations, sql } from "drizzle-orm";
+import { sqliteTable, text, integer, index } from "drizzle-orm/sqlite-core";
+
+export const user = sqliteTable("user", {
+    id: text("id").primaryKey(),
+    name: text("name").notNull(),
+    email: text("email").notNull().unique(),
+    emailVerified: integer("email_verified", { mode: "boolean" })
+        .default(false)
+        .notNull(),
+    image: text("image"),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+        .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+        .notNull(),
+    updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+        .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+        .$onUpdate(() => /* @__PURE__ */ new Date())
+        .notNull(),
+});
+
+export const session = sqliteTable(
+    "session",
+    {
+        id: text("id").primaryKey(),
+        expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
+        token: text("token").notNull().unique(),
+        createdAt: integer("created_at", { mode: "timestamp_ms" })
+            .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+            .notNull(),
+        updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+            .$onUpdate(() => /* @__PURE__ */ new Date())
+            .notNull(),
+        ipAddress: text("ip_address"),
+        userAgent: text("user_agent"),
+        userId: text("user_id")
+            .notNull()
+            .references(() => user.id, { onDelete: "cascade" }),
+    },
+    (table) => [index("session_userId_idx").on(table.userId)],
+);
+
+export const account = sqliteTable(
+    "account",
+    {
+        id: text("id").primaryKey(),
+        accountId: text("account_id").notNull(),
+        providerId: text("provider_id").notNull(),
+        userId: text("user_id")
+            .notNull()
+            .references(() => user.id, { onDelete: "cascade" }),
+        accessToken: text("access_token"),
+        refreshToken: text("refresh_token"),
+        idToken: text("id_token"),
+        accessTokenExpiresAt: integer("access_token_expires_at", {
+            mode: "timestamp_ms",
+        }),
+        refreshTokenExpiresAt: integer("refresh_token_expires_at", {
+            mode: "timestamp_ms",
+        }),
+        scope: text("scope"),
+        password: text("password"),
+        createdAt: integer("created_at", { mode: "timestamp_ms" })
+            .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+            .notNull(),
+        updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+            .$onUpdate(() => /* @__PURE__ */ new Date())
+            .notNull(),
+    },
+    (table) => [index("account_userId_idx").on(table.userId)],
+);
+
+export const verification = sqliteTable(
+    "verification",
+    {
+        id: text("id").primaryKey(),
+        identifier: text("identifier").notNull(),
+        value: text("value").notNull(),
+        expiresAt: integer("expires_at", { mode: "timestamp_ms" }).notNull(),
+        createdAt: integer("created_at", { mode: "timestamp_ms" })
+            .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+            .notNull(),
+        updatedAt: integer("updated_at", { mode: "timestamp_ms" })
+            .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`)
+            .$onUpdate(() => /* @__PURE__ */ new Date())
+            .notNull(),
+    },
+    (table) => [index("verification_identifier_idx").on(table.identifier)],
+);
+
+export const userRelations = relations(user, ({ many }) => ({
+    sessions: many(session),
+    accounts: many(account),
+}));
+
+export const sessionRelations = relations(session, ({ one }) => ({
+    user: one(user, {
+        fields: [session.userId],
+        references: [user.id],
+    }),
+}));
+
+export const accountRelations = relations(account, ({ one }) => ({
+    user: one(user, {
+        fields: [account.userId],
+        references: [user.id],
+    }),
+}));

package/templates/nextjs-auth-demo/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/react-queue-demo/README.md

@@ -1,6 +1,6 @@
 # Pulse Queue Demo
 
-A demo app showcasing **Pulse v0.4.0** durable message queues.
+A demo app showcasing **Pulse v0.4.5** durable message queues.
 
 ## Features
 
@@ -20,16 +20,16 @@ In a separate terminal, start Pulse with your preferred queue backend:
 
 ```bash
 # In-memory (default, ephemeral)
-pulse dev
+pulse serve
 
 # WAL (Write-Ahead Log — crash-resilient)
-PULSE_QUEUE_BACKEND=wal pulse dev
+pulse serve --queue-storage wal
 
 # PostgreSQL
-PULSE_QUEUE_BACKEND=postgres PULSE_QUEUE_POSTGRES_URL=postgres://user:pass@localhost/pulse pulse dev
+pulse serve --queue-storage postgres --database-url postgres://user:pass@localhost/pulse
 
 # Redis
-PULSE_QUEUE_BACKEND=redis PULSE_QUEUE_REDIS_URL=redis://localhost:6379 pulse dev
+pulse serve --queue-storage redis --redis-url redis://localhost:6379
 ```
 
 ## Encryption at Rest
@@ -37,8 +37,7 @@ PULSE_QUEUE_BACKEND=redis PULSE_QUEUE_REDIS_URL=redis://localhost:6379 pulse dev
 Add encryption to any backend:
 
 ```bash
-export PULSE_QUEUE_KEY=$(openssl rand -hex 32)
-PULSE_QUEUE_BACKEND=wal pulse dev
+pulse serve --queue-storage wal --queue-encryption-key $(openssl rand -hex 32)
 ```
 
 All payloads are encrypted with ChaCha20-Poly1305 before reaching storage.

package/templates/react-queue-demo/src/App.tsx

@@ -36,7 +36,7 @@ const TTL_OPTIONS = [
 ]
 
 export default function App() {
-    const [connected, setConnected] = useState(false)
+    const [connectionState, setConnectionState] = useState<'connecting' | 'connected' | 'reconnecting' | 'disconnected'>('connecting')
     const [messages, setMessages] = useState<DisplayMessage[]>([])
     const [input, setInput] = useState('')
     const [rtt, setRtt] = useState<number | null>(null)
@@ -47,35 +47,54 @@ export default function App() {
     const connRef = useRef<PulseConnection | null>(null)
     const queueRef = useRef<PulseQueue | null>(null)
 
+    const connected = connectionState === 'connected'
+
+    // Helper: drain persisted messages and refresh depth
+    const recoverMessages = useCallback(async (queue: PulseQueue) => {
+        try {
+            const recovered = await queue.drain()
+            if (recovered.length > 0) {
+                setMessages(recovered.map((m) => ({ ...m, state: 'pending' as const })))
+            }
+            await refreshDepth(queue)
+        } catch {
+            // Queue may not exist yet — that's fine, it'll be auto-created
+        }
+    }, [])
+
     // Connect + auto-fetch existing messages on mount
+    // Auto-reconnect is enabled by default in the SDK — the protocol "just works"
     useEffect(() => {
         const pulse = new Pulse({ apiKey: 'dev' })
 
+        setConnectionState('connecting')
+
         pulse.connect('ws://localhost:4001').then(async (connection) => {
             connRef.current = connection
             const queue = new PulseQueue(connection, QUEUE_NAME, 'demo-ui')
             queueRef.current = queue
-            setConnected(true)
+            setConnectionState('connected')
 
             // Live metrics
             connection.on('metrics', (m: ConnectionMetrics) => setRtt(m.rtt))
 
-            // Drain any persisted messages from a previous session
-            const recovered = await queue.drain()
-            if (recovered.length > 0) {
-                setMessages(recovered.map((m) => ({ ...m, state: 'pending' as const })))
-            }
+            // Connection lifecycle events
+            connection.on('disconnect', () => setConnectionState('reconnecting'))
+            connection.on('reconnecting', () => setConnectionState('reconnecting'))
+            connection.on('reconnected', async () => {
+                setConnectionState('connected')
+                // Re-drain persisted messages after reconnect
+                await recoverMessages(queue)
+            })
 
-            // Refresh depth
-            await refreshDepth(queue)
-        }).catch((err: Error) => {
-            console.error('Failed to connect:', err)
+            // Drain any persisted messages from a previous session
+            await recoverMessages(queue)
         })
 
         return () => {
             connRef.current?.disconnect()
         }
-    }, [])
+    }, [recoverMessages])
 
     const refreshDepth = async (queue?: PulseQueue) => {
         const q = queue || queueRef.current
@@ -162,8 +181,10 @@ export default function App() {
             <h1>🔄 Pulse Queue Demo</h1>
             <p style={{ color: '#888' }}>
                 Durable message queues with at-least-once delivery over PLP.
-                {connected ? (
+                {connectionState === 'connected' ? (
                     <span style={{ color: '#4ade80' }}> ● Connected</span>
+                ) : connectionState === 'reconnecting' ? (
+                    <span style={{ color: '#fbbf24' }}> ◌ Reconnecting...</span>
                 ) : (
                     <span style={{ color: '#f87171' }}> ○ Connecting...</span>
                 )}