Add real-time viewer count component and integrate it into stream page; update presence tracking logic with Jazz.

.ai/commit-checkpoints.json

@@ -1,7 +1,7 @@
 {
   "last_commit": {
-    "timestamp": "2025-12-21T22:56:32.894190+00:00",
-    "session_id": "019b431c-d0bc-7511-a9ac-47633a3ec88c",
-    "last_entry_timestamp": "2025-12-21T22:56:29.923Z"
+    "timestamp": "2025-12-21T23:04:42.523116+00:00",
+    "session_id": "019b4325-bfcd-7a43-bed2-90e50260dd9f",
+    "last_entry_timestamp": "2025-12-21T23:04:39.775Z"
   }
 }

packages/web/src/components/ViewerCount.tsx

@@ -0,0 +1,34 @@
+import { useStreamViewers } from "@/lib/jazz/useStreamViewers"
+
+interface ViewerCountProps {
+  username: string
+}
+
+/**
+ * Displays the real-time viewer count for a stream
+ */
+export function ViewerCount({ username }: ViewerCountProps) {
+  const { viewerCount, isConnected, isLoading } = useStreamViewers(username)
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 text-neutral-400">
+        <div className="h-2 w-2 rounded-full bg-neutral-500 animate-pulse" />
+        <span className="text-sm">...</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <div
+        className={`h-2 w-2 rounded-full ${
+          isConnected ? "bg-green-500" : "bg-neutral-500"
+        }`}
+      />
+      <span className="text-sm text-neutral-300">
+        {viewerCount} {viewerCount === 1 ? "viewer" : "viewers"}
+      </span>
+    </div>
+  )
+}

packages/web/src/lib/jazz/provider.tsx

@@ -0,0 +1,28 @@
+import { JazzReactProvider } from "jazz-tools/react"
+import { ViewerAccount } from "./schema"
+
+// Jazz Cloud API key - using public demo key for now
+// TODO: Replace with linsa-specific key from https://jazz.tools
+const JAZZ_API_KEY = "jazz_cloud_demo"
+
+interface JazzProviderProps {
+  children: React.ReactNode
+}
+
+/**
+ * Jazz provider for stream viewer presence tracking
+ * Uses anonymous auth - viewers don't need to sign in
+ */
+export function JazzProvider({ children }: JazzProviderProps) {
+  return (
+    <JazzReactProvider
+      sync={{
+        peer: `wss://cloud.jazz.tools/?key=${JAZZ_API_KEY}`,
+        when: "always",
+      }}
+      AccountSchema={ViewerAccount}
+    >
+      {children}
+    </JazzReactProvider>
+  )
+}

packages/web/src/lib/jazz/schema.ts

@@ -0,0 +1,63 @@
+import { co, z } from "jazz-tools"
+
+/**
+ * Presence entry - pushed to a feed when a viewer joins/updates
+ */
+export const Presence = z.object({
+  /** Last activity timestamp */
+  lastActive: z.number(),
+})
+export type Presence = z.infer<typeof Presence>
+
+/**
+ * A feed of presence entries - each session pushes their own presence
+ * Jazz automatically tracks sessions, so we can count unique viewers
+ */
+export const PresenceFeed = co.feed(Presence)
+
+/**
+ * Container for a stream's presence feed - enables upsertUnique
+ */
+export const StreamPresenceContainer = co.map({
+  presenceFeed: PresenceFeed,
+})
+
+/**
+ * Account profile - minimal, just for Jazz to work
+ */
+export const ViewerProfile = co
+  .profile({
+    name: z.string(),
+  })
+  .withPermissions({
+    onCreate: (newGroup) => newGroup.makePublic(),
+  })
+
+/**
+ * Viewer account root - stores any viewer-specific data
+ */
+export const ViewerRoot = co.map({
+  /** Placeholder field */
+  version: z.number(),
+})
+
+/**
+ * Viewer account - anonymous viewers watching streams
+ */
+export const ViewerAccount = co
+  .account({
+    profile: ViewerProfile,
+    root: ViewerRoot,
+  })
+  .withMigration((account) => {
+    if (!account.$jazz.has("profile")) {
+      account.$jazz.set("profile", {
+        name: "Anonymous",
+      })
+    }
+    if (!account.$jazz.has("root")) {
+      account.$jazz.set("root", {
+        version: 1,
+      })
+    }
+  })

packages/web/src/lib/jazz/useStreamViewers.ts

@@ -0,0 +1,147 @@
+import { useEffect, useState } from "react"
+import { useAccount, useCoState } from "jazz-tools/react"
+import { Group } from "jazz-tools"
+import {
+  PresenceFeed,
+  StreamPresenceContainer,
+  ViewerAccount,
+} from "./schema"
+
+/** How old a presence entry can be before considered stale (10 seconds) */
+const PRESENCE_STALE_MS = 10_000
+
+/** How often to update presence (5 seconds) */
+const PRESENCE_UPDATE_MS = 5_000
+
+interface UseStreamViewersResult {
+  /** Number of active viewers */
+  viewerCount: number
+  /** Whether Jazz is connected */
+  isConnected: boolean
+  /** Whether the room is loaded */
+  isLoading: boolean
+}
+
+/**
+ * Hook to track and count stream viewers using Jazz presence
+ *
+ * @param username - The streamer's username (used as room identifier)
+ * @returns Viewer count and connection status
+ */
+export function useStreamViewers(username: string): UseStreamViewersResult {
+  const [feedId, setFeedId] = useState<string | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [viewerCount, setViewerCount] = useState(0)
+
+  // Get current account
+  const me = useAccount(ViewerAccount)
+
+  // Load the presence feed directly
+  const presenceFeed = useCoState(PresenceFeed, feedId ?? undefined, {
+    resolve: true,
+  })
+
+  // Create or load the stream presence container
+  useEffect(() => {
+    if (!me.$isLoaded) return
+
+    const loadPresenceFeed = async () => {
+      setIsLoading(true)
+
+      try {
+        // Create a unique identifier for this stream's presence
+        const containerUID = { stream: username, origin: "linsa.io" }
+
+        // Create a group for this container that anyone can write to
+        const group = Group.create({ owner: me })
+        group.addMember("everyone", "writer")
+
+        // Try to upsert the container (create if doesn't exist)
+        const container = await StreamPresenceContainer.upsertUnique({
+          value: {
+            presenceFeed: [],
+          },
+          resolve: { presenceFeed: true },
+          unique: containerUID,
+          owner: group,
+        })
+
+        if (container.$isLoaded && container.$jazz.refs.presenceFeed) {
+          setFeedId(container.$jazz.refs.presenceFeed.id)
+        }
+      } catch (err) {
+        console.error("Failed to load presence feed:", err)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadPresenceFeed()
+  }, [me.$isLoaded, me.$jazz?.id, username])
+
+  // Update our presence periodically
+  useEffect(() => {
+    if (!presenceFeed?.$isLoaded) return
+
+    const updatePresence = () => {
+      try {
+        presenceFeed.$jazz.push({
+          lastActive: Date.now(),
+        })
+      } catch (err) {
+        console.error("Failed to update presence:", err)
+      }
+    }
+
+    // Update immediately
+    updatePresence()
+
+    // Then update periodically
+    const interval = setInterval(updatePresence, PRESENCE_UPDATE_MS)
+
+    return () => clearInterval(interval)
+  }, [presenceFeed?.$isLoaded])
+
+  // Count active viewers
+  useEffect(() => {
+    if (!presenceFeed?.$isLoaded) {
+      setViewerCount(0)
+      return
+    }
+
+    const countViewers = () => {
+      const now = Date.now()
+      const activeViewers = new Set<string>()
+
+      // Get all sessions and count those with recent activity
+      const perSession = presenceFeed.perSession
+      if (perSession) {
+        for (const sessionId of Object.keys(perSession)) {
+          const entry = (perSession as Record<string, { value?: { lastActive: number } }>)[sessionId]
+          if (entry?.value) {
+            const age = now - entry.value.lastActive
+            if (age < PRESENCE_STALE_MS) {
+              activeViewers.add(sessionId)
+            }
+          }
+        }
+      }
+
+      setViewerCount(activeViewers.size)
+    }
+
+    // Count immediately
+    countViewers()
+
+    // Recount periodically
+    const interval = setInterval(countViewers, 2000)
+
+    return () => clearInterval(interval)
+  }, [presenceFeed?.$isLoaded, presenceFeed])
+
+  return {
+    viewerCount,
+    isConnected: me.$isLoaded,
+    isLoading,
+  }
+}

packages/web/src/routes/$username.tsx

@@ -4,6 +4,8 @@ import { getStreamByUsername, type StreamPageData } from "@/lib/stream/db"
 import { VideoPlayer } from "@/components/VideoPlayer"
 import { CloudflareStreamPlayer } from "@/components/CloudflareStreamPlayer"
 import { resolveStreamPlayback } from "@/lib/stream/playback"
+import { JazzProvider } from "@/lib/jazz/provider"
+import { ViewerCount } from "@/components/ViewerCount"
 
 export const Route = createFileRoute("/$username")({
   ssr: false,
@@ -26,7 +28,7 @@ const NIKIV_DATA: StreamPageData = {
     id: "nikiv-stream",
     title: "Live Coding",
     description: "Building in public",
-    is_live: true,
+    is_live: false, // Set to true when actually streaming
     viewer_count: 0,
     hls_url: HLS_URL,
     playback: NIKIV_PLAYBACK,
@@ -149,54 +151,61 @@ function StreamPage() {
     playback?.type === "cloudflare" || (playback?.type === "hls" && streamReady)
 
   return (
-    <div className="h-screen w-screen bg-black">
-      {stream?.is_live && playback && showPlayer ? (
-        playback.type === "cloudflare" ? (
-          <div className="relative h-full w-full">
-            <CloudflareStreamPlayer
-              uid={playback.uid}
-              customerCode={playback.customerCode}
-              muted={false}
-              onReady={() => setStreamReady(true)}
-            />
-            {!streamReady && (
-              <div className="absolute inset-0 flex items-center justify-center text-white">
-                <div className="text-center">
-                  <div className="animate-pulse text-4xl">🔴</div>
-                  <p className="mt-4 text-xl text-neutral-400">
-                    Connecting to stream...
-                  </p>
+    <JazzProvider>
+      <div className="h-screen w-screen bg-black">
+        {/* Viewer count overlay */}
+        <div className="absolute top-4 right-4 z-10 rounded-lg bg-black/50 px-3 py-2 backdrop-blur-sm">
+          <ViewerCount username={username} />
+        </div>
+
+        {stream?.is_live && playback && showPlayer ? (
+          playback.type === "cloudflare" ? (
+            <div className="relative h-full w-full">
+              <CloudflareStreamPlayer
+                uid={playback.uid}
+                customerCode={playback.customerCode}
+                muted={false}
+                onReady={() => setStreamReady(true)}
+              />
+              {!streamReady && (
+                <div className="absolute inset-0 flex items-center justify-center text-white">
+                  <div className="text-center">
+                    <div className="animate-pulse text-4xl">🔴</div>
+                    <p className="mt-4 text-xl text-neutral-400">
+                      Connecting to stream...
+                    </p>
+                  </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
+          ) : (
+            <VideoPlayer src={playback.url} muted={false} />
+          )
+        ) : stream?.is_live && playback ? (
+          <div className="flex h-full w-full items-center justify-center text-white">
+            <div className="text-center">
+              <div className="animate-pulse text-4xl">🔴</div>
+              <p className="mt-4 text-xl text-neutral-400">
+                Connecting to stream...
+              </p>
+            </div>
           </div>
         ) : (
-          <VideoPlayer src={playback.url} muted={false} />
-        )
-      ) : stream?.is_live && playback ? (
-        <div className="flex h-full w-full items-center justify-center text-white">
-          <div className="text-center">
-            <div className="animate-pulse text-4xl">🔴</div>
-            <p className="mt-4 text-xl text-neutral-400">
-              Connecting to stream...
-            </p>
+          <div className="flex h-full w-full items-center justify-center text-white">
+            <div className="text-center">
+              <p className="text-2xl font-medium">Streaming soon</p>
+              <a
+                href="https://nikiv.dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mt-4 inline-block text-lg text-neutral-400 underline hover:text-white transition-colors"
+              >
+                nikiv.dev
+              </a>
+            </div>
           </div>
-        </div>
-      ) : (
-        <div className="flex h-full w-full items-center justify-center text-white">
-          <div className="text-center">
-            <p className="text-2xl font-medium">Streaming soon</p>
-            <a
-              href="https://nikiv.dev"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="mt-4 inline-block text-lg text-neutral-400 underline hover:text-white transition-colors"
-            >
-              nikiv.dev
-            </a>
-          </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+    </JazzProvider>
   )
 }

packages/web/src/routes/index.tsx

@@ -1,18 +1,30 @@
 import { createFileRoute } from "@tanstack/react-router"
 import { ShaderBackground } from "@/components/ShaderBackground"
 
+const galleryItems = [
+  { id: 1, image: "https://picsum.photos/seed/linsa1/400/600", title: "Nature" },
+  { id: 2, image: "https://picsum.photos/seed/linsa2/400/600", title: "Urban" },
+  { id: 3, image: "https://picsum.photos/seed/linsa3/400/600", title: "Abstract" },
+  { id: 4, image: "https://picsum.photos/seed/linsa4/400/600", title: "Portrait" },
+  { id: 5, image: "https://picsum.photos/seed/linsa5/400/600", title: "Landscape" },
+  { id: 6, image: "https://picsum.photos/seed/linsa6/400/600", title: "Art" },
+  { id: 7, image: "https://picsum.photos/seed/linsa7/400/600", title: "Design" },
+  { id: 8, image: "https://picsum.photos/seed/linsa8/400/600", title: "Photo" },
+]
+
 function LandingPage() {
   return (
-    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-black text-white">
+    <div className="relative min-h-screen overflow-hidden bg-black text-white">
       <ShaderBackground />
-      <div className="relative z-10 flex flex-col items-center">
+
+      {/* Hero Section */}
+      <div className="relative z-10 flex min-h-[60vh] flex-col items-center justify-center">
         <h1 className="text-6xl font-bold tracking-tight drop-shadow-2xl">
           Linsa
         </h1>
         <p className="mt-4 text-xl text-white/80 drop-shadow-lg">
           Save anything privately. Share it.
         </p>
-        <p className="mt-8 text-sm text-white/50">Coming Soon</p>
         <a
           href="https://x.com/linsa_io"
           target="_blank"
@@ -22,6 +34,33 @@ function LandingPage() {
           @linsa_io
         </a>
       </div>
+
+      {/* Gallery Section */}
+      <div className="relative z-10 px-6 pb-12">
+        <div className="mx-auto max-w-7xl">
+          <h2 className="mb-6 text-center text-2xl font-semibold text-white/90">
+            Gallery
+          </h2>
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+            {galleryItems.map((item) => (
+              <div
+                key={item.id}
+                className="group relative aspect-[2/3] overflow-hidden rounded-2xl bg-white/5 transition-all hover:bg-white/10"
+              >
+                <img
+                  src={item.image}
+                  alt={item.title}
+                  className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
+                <div className="absolute bottom-0 left-0 right-0 p-4 opacity-0 transition-opacity group-hover:opacity-100">
+                  <p className="text-sm font-medium text-white">{item.title}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }