From bc543bf5ab0fb49e4253261ba1374a65c495d500 Mon Sep 17 00:00:00 2001
From: Natalie Bridgers <natalie@stream.place>
Date: Wed, 10 Jun 2026 15:43:58 -0500
Subject: [PATCH] Migrate web app to React Query and add search route

- Integrate `@tanstack/react-query` and migrate home feed polling
- Implement persistent light/dark theme toggle
- Add search route and actor lookup functionality
- Add Sentry error tracking with sourcemap uploads
- Add global error boundary and loading states
- Add standalone chat popout route
- Add `TooltipProvider` and `FullscreenProvider` contexts
---
 js/core/src/index.ts                          |   8 +-
 js/web/index.html                             |  13 +-
 js/web/package.json                           |   3 +
 js/web/plan.md                                | 488 ++++++++++++++++++
 js/web/src/components/header.tsx              | 253 ++++++++-
 js/web/src/components/player/player.tsx       |   4 +-
 js/web/src/components/stream/chat-panel.tsx   | 149 ++++--
 js/web/src/components/stream/stream-info.tsx  | 175 ++++++-
 .../stream/stream-notifications.tsx           | 168 +++++-
 .../src/components/stream/video-section.tsx   |  18 +-
 js/web/src/components/svg/streamplace-bw.tsx  |  20 +-
 js/web/src/components/ui/button.tsx           |   2 +
 js/web/src/components/ui/dropdown-menu.tsx    |  10 +-
 js/web/src/hooks/use-chat-send.ts             |  40 +-
 js/web/src/hooks/use-color-scheme.ts          |  49 +-
 js/web/src/hooks/use-live-user.ts             |  19 -
 js/web/src/hooks/use-live-users.ts            |  33 ++
 js/web/src/hooks/use-platform.ts              |  75 ---
 js/web/src/hooks/use-sidebar-control.ts       |  39 --
 js/web/src/hooks/use-streamplace-node.ts      |  20 -
 js/web/src/hooks/use-video-list.ts            | 119 ++---
 .../lib/providers/streamplace-provider.tsx    |  30 +-
 js/web/src/lib/store/hooks.ts                 |  44 --
 js/web/src/lib/store/slices/blueskySlice.ts   | 195 ++++---
 .../lib/store/slices/contentMetadataSlice.ts  |  34 +-
 .../src/lib/store/slices/streamplaceSlice.ts  |  91 +---
 js/web/src/lib/streamplace-url.ts             |   3 +-
 js/web/src/main.tsx                           |  42 +-
 js/web/src/routeTree.gen.ts                   |  42 ++
 js/web/src/routes/$user/index.tsx             |  15 +-
 js/web/src/routes/$user/video/$tid.tsx        |  84 ++-
 js/web/src/routes/__root.tsx                  | 135 ++++-
 js/web/src/routes/chat-popout.$user.tsx       | 183 +++++++
 js/web/src/routes/index.tsx                   |  85 +--
 js/web/src/routes/search.tsx                  | 163 ++++++
 js/web/src/styles.css                         |  32 +-
 js/web/vite.config.ts                         |  80 +--
 pnpm-lock.yaml                                | 224 ++++++++
 38 files changed, 2438 insertions(+), 749 deletions(-)
 create mode 100644 js/web/plan.md
 delete mode 100644 js/web/src/hooks/use-live-user.ts
 create mode 100644 js/web/src/hooks/use-live-users.ts
 delete mode 100644 js/web/src/hooks/use-platform.ts
 delete mode 100644 js/web/src/hooks/use-sidebar-control.ts
 delete mode 100644 js/web/src/hooks/use-streamplace-node.ts
 create mode 100644 js/web/src/routes/chat-popout.$user.tsx
 create mode 100644 js/web/src/routes/search.tsx

diff --git a/js/core/src/index.ts b/js/core/src/index.ts
index b071bbb23..40ef4fc2e 100644
--- a/js/core/src/index.ts
+++ b/js/core/src/index.ts
@@ -1,10 +1,4 @@
-// Public API of @streamplace/core.
-// Only platform-agnostic code lives here. No react-native, no expo-*.
-//
-// During the extraction phase, some modules still pull a couple of
-// "leaves" from @streamplace/components (e.g. useDID, usePDSAgent).
-// Those will move here in subsequent refactors. Anything imported from
-// @streamplace/components in this file is by design temporary.
+// Public, platform-agnostic React code of @streamplace/core.
 export * from "./vod-store";
 
 export * from "./livestream-store";
diff --git a/js/web/index.html b/js/web/index.html
index cc75191ee..3f7d0903b 100644
--- a/js/web/index.html
+++ b/js/web/index.html
@@ -1,10 +1,21 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Streamplace</title>
+    <script>
+      // Sync dark/light class before first paint to avoid flash.
+      (function () {
+        var pref = localStorage.getItem("streamplace:theme") || "system";
+        var dark =
+          pref === "dark" ||
+          (pref === "system" &&
+            matchMedia("(prefers-color-scheme: dark)").matches);
+        if (dark) document.documentElement.classList.add("dark");
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/js/web/package.json b/js/web/package.json
index 78156e9b7..a7480f3a6 100644
--- a/js/web/package.json
+++ b/js/web/package.json
@@ -16,9 +16,11 @@
     "@base-ui/react": "^1.5.0",
     "@fontsource/atkinson-hyperlegible-next": "^5.2.7",
     "@hello-pangea/dnd": "^18.0.1",
+    "@sentry/react": "^10.57.0",
     "@streamplace/core": "workspace:*",
     "@streamplace/i18n": "workspace:*",
     "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-router": "^1.170.0",
     "@tiptap/extension-mention": "^3.26.0",
     "@tiptap/extension-placeholder": "^3.26.0",
@@ -44,6 +46,7 @@
     "zustand": "^5.0.5"
   },
   "devDependencies": {
+    "@sentry/vite-plugin": "^5.3.0",
     "@tailwindcss/vite": "^4.3.0",
     "@tanstack/router-plugin": "^1.168.0",
     "@types/react": "^19.2.0",
diff --git a/js/web/plan.md b/js/web/plan.md
new file mode 100644
index 000000000..e04693792
--- /dev/null
+++ b/js/web/plan.md
@@ -0,0 +1,488 @@
+# Streamplace Web App: Migration Plan
+
+## What We're Doing
+
+The existing React Native app (`js/app`) is the source of truth. The new web app (`js/web`) is a fresh Vite + TanStack Router SPA built with true DOM, Tailwind, and Base UI. It's already a solid foundation but has explicit Phase 3/4 stubs for core streaming features. This plan prioritizes reaching full feature parity with the RN app, then layering on web-native advantages.
+
+## Where We Are Today
+
+### Web App: What Works (Phase 1-2)
+
+- Home feed with live user grid
+- Single live stream viewer (HLS + WebRTC)
+- Single VOD viewer
+- VOD browse
+- OAuth login/registration
+- Chat (send/receive, mentions, emoji)
+- Settings: account, streaming (read-only keys), recommendations, webhooks, multistream, privacy, backup, branding, badges, languages, advanced, about
+- Player with stats overlay, keyboard shortcuts, quality selector
+- i18n (7 locales via `@streamplace/i18n`)
+
+### Web App: Explicitly Stubbed (Phase 3/4)
+
+From `blueskySlice.ts` header comments:
+
+- `createStreamKeyRecord` - throws
+- `createLivestreamRecord` - throws
+- `updateLivestreamRecord` - throws
+- `golivePost` - throws
+- `createBlockRecord` - throws
+
+### Web App: Missing Entirely
+
+- Go-live flow (no route, no UI, no broadcaster backend)
+- Stream key creation (keys.tsx is read-only delete)
+- Following feed (sidebar "Following" is disabled)
+- Notifications surface (no route, no header bell)
+- Search (no route)
+- Chat popout route (`/chat-popout/:handle` linked but no route file)
+- Upload VOD
+- Multi-stream viewer
+- Embed screens (stream, VOD, info widget, danmu OBS)
+- Popout windows (livestream, multistream, stream monitor, info widget)
+- Download screen
+- Support screen
+- "What is Streamplace?" about screen
+- Error boundary
+- Suspense fallback
+- Theme provider (useColorScheme is hardcoded "dark")
+- TooltipProvider (not mounted globally)
+- FullscreenProvider (declared but not mounted)
+- VideoElementProvider (declared but not mounted)
+- React Query (all fetching is hand-rolled useState/useEffect)
+
+### RN App: Feature Inventory
+
+All screens in `js/app/src/screens/`:
+
+| Screen                      | Purpose                                    |
+| --------------------------- | ------------------------------------------ |
+| `home.tsx`                  | Live stream grid with pull-to-refresh      |
+| `mobile-stream.tsx`         | Live stream viewer (full-screen on mobile) |
+| `mobile-go-live.tsx`        | Go-live with ingest player                 |
+| `launch-go-live.tsx`        | "Ready to go live?" prompt                 |
+| `live-dashboard.tsx`        | BentoGrid broadcaster dashboard            |
+| `video-list.tsx`            | VOD browse                                 |
+| `video.tsx`                 | Single VOD playback                        |
+| `vod.tsx`                   | VOD screen                                 |
+| `upload.tsx`                | VOD upload (1484 lines, tus-js-client)     |
+| `chat-popout.tsx`           | Popout chat window                         |
+| `multi.tsx`                 | Multi-stream viewer                        |
+| `about.tsx`                 | "What is Streamplace?"                     |
+| `download.tsx`              | Download app                               |
+| `embed.tsx`                 | Stream embed                               |
+| `vod-embed.tsx`             | VOD embed                                  |
+| `danmu-obs.tsx`             | Danmu OBS overlay                          |
+| `info-widget-embed.tsx`     | Info widget embed                          |
+| `popout-livestream.tsx`     | Popout livestream window                   |
+| `popout-multistream.tsx`    | Popout multistream window                  |
+| `popout-stream-monitor.tsx` | Stream monitor popout                      |
+| `popout-info-widget.tsx`    | Info widget popout                         |
+| `support.tsx`               | Support page                               |
+| `app-return.tsx`            | OAuth return handling                      |
+
+### RN App: Navigation Tree
+
+```
+RootStack
+├── MainTabs
+│   ├── HomeTab → HomeNavigator
+│   │   ├── HomeMain (home.tsx)
+│   │   ├── About
+│   │   ├── Download
+│   │   ├── LiveDashboard
+│   │   ├── Login
+│   │   ├── Multi
+│   │   ├── Support
+│   │   └── Upload (web only)
+│   ├── VideosTab → VideosNavigator
+│   │   ├── VideoList
+│   │   └── UserVideoList
+│   ├── GoLiveTab → LaunchGoLive
+│   └── SettingsTab → SettingsNavigator
+│       ├── MainSettings
+│       ├── AboutCategory
+│       ├── AccountCategory
+│       ├── StreamingCategory
+│       ├── WebhooksSettings
+│       ├── BackupSettings
+│       ├── RecommendationsSettings
+│       ├── PrivacyCategory
+│       ├── DanmuCategory
+│       ├── AdvancedCategory
+│       ├── MultistreamCategory
+│       ├── LanguagesCategory
+│       ├── KeyManagement
+│       ├── BadgeSelection
+│       ├── BadgeIssuer
+│       └── BrandingAdmin
+├── Stream (MobileStream)
+├── MobileGoLive
+├── Video
+├── Vod
+├── PopoutChat
+├── Embed / VodEmbed / InfoWidgetEmbed / DanmuOBS
+├── PopoutStreamMonitor / PopoutInfoWidget / PopoutMultistream / PopoutLivestream
+└── AppReturn
+```
+
+### Shared Packages
+
+| Package                         | Web Safe?    | Used by Web? | Notes                                                                                  |
+| ------------------------------- | ------------ | ------------ | -------------------------------------------------------------------------------------- |
+| `@streamplace/core`             | Mostly yes   | Yes          | LivestreamStore, handleWebSocketMessages, reduceChat, segmentize, Facet                |
+| `@streamplace/i18n`             | Yes          | Yes          | manifest, createI18nextConfig, locale resources                                        |
+| `@streamplace/components`       | No (RN deps) | No           | Contains Player, settings panels, hooks, but depends on react-native, expo-video, etc. |
+| `streamplace`                   | Yes          | Yes          | PlaceStream\* types, agent methods                                                     |
+| `js/playback-router`            | Likely yes   | No           | Not imported by web, worker-specific                                                   |
+| `js/config-react-native-webrtc` | No           | No           | RN-specific                                                                            |
+
+### RN Platform Dependencies in Active Use
+
+| Dependency                                                | Used In (RN)                  | Web Equivalent                                                    |
+| --------------------------------------------------------- | ----------------------------- | ----------------------------------------------------------------- |
+| `expo-video`                                              | Player components             | Native `<video>` + hls.js (already done)                          |
+| `react-native-webrtc`                                     | WebRTC publishing/subscribing | Native `RTCPeerConnection` (subscribing done, publishing missing) |
+| `expo-notifications` + `@react-native-firebase/messaging` | Push notifications            | Web Push API / Notification API                                   |
+| `expo-keep-awake`                                         | Go-live, live dashboard       | `navigator.wakeLock.request("screen")`                            |
+| `expo-screen-orientation`                                 | Full-screen video             | Screen Orientation API (limited)                                  |
+| `expo-sqlite`                                             | Local caching                 | IndexedDB                                                         |
+| `expo-file-system`                                        | File downloads, uploads       | Fetch API / File System Access API                                |
+| `expo-image`                                              | Image loading                 | Native `<img>` / `<picture>`                                      |
+| `expo-document-picker`                                    | File selection                | `<input type="file">`                                             |
+| `react-native-markdown-display`                           | Chat messages                 | TipTap (already done) or markdown-it                              |
+| `@zxing/browser`                                          | QR code scanning              | Native barcode detection or html5-qrcode                          |
+| `react-native-reanimated`                                 | Animations                    | CSS animations / Framer Motion / Web Animations API               |
+| `react-native-gesture-handler`                            | Touch gestures                | Pointer Events / touch-action CSS                                 |
+| `react-native-svg`                                        | SVG rendering                 | Native `<svg>` / lucide-react (already done)                      |
+| `hls.js`                                                  | Video playback                | hls.js (already done in web)                                      |
+| `burnt` (toasts)                                          | Toast notifications           | sonner (already done)                                             |
+| `qrcode`                                                  | QR display                    | qrcode (web-compatible)                                           |
+| `frimousse`                                               | Emoji picker                  | frimousse (already done, works on web)                            |
+| `react-native-sortables`                                  | Drag-to-reorder               | @hello-pangea/dnd (already done)                                  |
+| `reanimated-color-picker`                                 | Color picker                  | Native `<input type="color">` or react-colorful                   |
+| `tus-js-client`                                           | VOD upload                    | tus-js-client (web-compatible)                                    |
+| `ua-parser-js`                                            | User-agent parsing            | Inline parser (already done in web)                               |
+| `chrono-node`                                             | Date parsing                  | chrono-node (web-compatible)                                      |
+| `sdp-transform`                                           | SDP parsing                   | sdp-transform (web-compatible)                                    |
+| `@atproto/oauth-client-expo`                              | OAuth (RN)                    | @atproto/oauth-client-browser (already done)                      |
+| `expo-crypto`                                             | Crypto                        | Web Crypto API                                                    |
+| `@atproto/crypto`                                         | Identity                      | @atproto/crypto (web-compatible via webcrypto)                    |
+| `viem`                                                    | Blockchain                    | viem (web-compatible)                                             |
+| `multiformats`                                            | CID handling                  | multiformats (web-compatible)                                     |
+| `jose`                                                    | JWT                           | jose (web-compatible)                                             |
+| `expo-linking`                                            | Deep links                    | URL / window.location                                             |
+| `react-native-webview`                                    | In-app browser                | iframe or popup window                                            |
+| `expo-web-browser`                                        | OAuth browser                 | @atproto/oauth-client-browser (already done)                      |
+| `@sentry/react-native`                                    | Error tracking                | @sentry/react                                                     |
+| `react-native-edge-to-edge`                               | Edge-to-edge UI               | CSS safe-area-inset-\*                                            |
+| `react-native-safe-area-context`                          | Safe area                     | CSS env(safe-area-inset-\*)                                       |
+| `expo-splash-screen`                                      | Splash screen                 | CSS loading state                                                 |
+| `expo-updates`                                            | OTA updates                   | N/A (web is always latest)                                        |
+| `@react-native-firebase/app`                              | Firebase base                 | N/A                                                               |
+| `expo-localization`                                       | Locale detection              | navigator.language / Intl                                         |
+| `expo-system-ui`                                          | System UI                     | N/A                                                               |
+
+---
+
+## The Plan
+
+### Phase 1: Foundation & Modernization
+
+The web app works but has rough edges: hand-rolled data fetching, missing providers, hardcoded theme, no error boundaries. This phase cleans up the foundation so everything that comes after is easier to build and maintain.
+
+#### 1a. React Query
+
+Add `@tanstack/react-query` and migrate data fetching incrementally.
+
+**Why incremental:** A big-bang migration is high-risk and creates a massive diff. Incremental lets us convert one hook at a time, verify it works, then move on. The inconsistency is temporary and manageable.
+
+**What to migrate first:** Start with the ugliest hand-rolled fetching. `useVideoList` is a good candidate - it manually manages loading, error, cursor, inFlight ref, and page accumulation. React Query's `useInfiniteQuery` replaces all of that.
+
+**Migration order:**
+
+1. `useVideoList` → `useInfiniteQuery` (cursor-based pagination)
+2. `fetchLiveUsers` in `StreamplaceProvider` → `useQuery` with 5s refetch interval
+3. Profile fetching (`getProfile`, `getProfiles`) → `useQuery` with stale-while-revalidate
+4. Stream key records (`getStreamKeyRecords`) → `useQuery`
+5. Chat profile (`getChatProfileRecordFromPDS`) → `useQuery`
+6. Server settings (`getServerSettingsFromPDS`) → `useQuery`
+7. Recommendations → `useQuery`
+
+**What stays in Zustand:** Auth state, session, sidebar state, and anything that's not a server fetch. Zustand is for client state; React Query is for server state. The distinction matters.
+
+**Provider mount:** Wrap the app in `QueryClientProvider` in `main.tsx`.
+
+#### 1b. Error Boundary
+
+Add a React error boundary at the router level. Catches render errors, shows a fallback UI with a retry button. Integrate with `@sentry/react` for error reporting (see 1g).
+
+#### 1c. Suspense Fallbacks
+
+Add `<Suspense>` with loading skeletons at route level. The home page already has skeleton placeholders for the stream grid; extend that pattern to other routes.
+
+#### 1d. Mount Missing Providers
+
+These already exist in `js/web/src/contexts/` but aren't wired into `main.tsx`:
+
+- **`TooltipProvider`** - Mount in `main.tsx`. Required by the shadcn tooltip component.
+- **`FullscreenProvider`** - Mount in `main.tsx` or in the player wrapper. Exposes `useFullscreen()` hook.
+- **`VideoElementProvider`** - Mount in the player wrapper. Exposes `useVideoElement()` hook. Removes prop-passing in player components.
+
+#### 1e. Theme Provider
+
+Replace the hardcoded `"dark"` in `useColorScheme.ts` with a real implementation:
+
+- Listen to `prefers-color-scheme` media query
+- Support manual toggle (light/dark/system)
+- Persist preference to localStorage
+- CSS variables are already partially defined in `styles.css` for both modes
+
+This doesn't need to be a full feature yet - just get the plumbing right so light mode works when we need it.
+
+#### 1f. i18n Audit
+
+Audit all hardcoded English strings in the web app. Add missing keys to `@streamplace/i18n` Fluent files. Focus on: chat chrome, player controls, header, home empty state, error messages.
+
+#### 1g. Sentry
+
+Add `@sentry/react` for error tracking. Initialize in `main.tsx`. Configure source maps upload in the Vite build.
+
+#### 1h. Code Review & Cleanup
+
+- Audit the zustand store slices. Some state may be redundant with React Query (e.g., `liveUsers` in the streamplace slice could become a React Query cache).
+- Remove dead code and unused imports.
+- Ensure consistent error handling patterns across slices.
+- Document the state management split: Zustand for client state, React Query for server state.
+
+---
+
+### Phase 2: Feature Parity (No Go-Live)
+
+These features bring the web app to parity with the RN app, minus the go-live flow and server-dependent features.
+
+#### 2a. Chat Popout
+
+New route: `/chat-popout/$user`
+
+Standalone chat window with no player. `window.open()` from the chat sidebar "pop out" link. WebSocket connection to the chat stream. Minimal chrome - just the chat panel.
+
+The `ChatPanel` component already exists and works. This is mostly a routing + layout task.
+
+#### 2b. Block/Mute in Chat
+
+Un-stub `createBlockRecord` in `blueskySlice.ts`. Wire `userMute` and `chatWarn` actions to the chat UI.
+
+- Mute button on chat messages (hover or context menu)
+- Block button on user hover card
+- The `HoverCard` for chat users already exists in `chat-panel.tsx`
+
+#### 2c. Chat Profile Edit
+
+Route or modal for editing chat profile (color, avatar, badges). Wire `createChatProfileRecord` and `getChatProfileRecordFromPDS` - both are already implemented in the slice, they just need UI.
+
+Currently the chat profile links out to Bluesky. The web app could have an inline editor using `<input type="color">` for the color picker.
+
+#### 2d. VOD Download
+
+Add a download button to the VOD player. Use `fetch` + `Blob` + `URL.createObjectURL` + `<a download>`. Simple feature, high utility.
+
+#### 2e. Multi-Stream Viewer
+
+New route: `/multi`
+
+Grid of multiple simultaneous live streams. Use existing `VideoSection` components in a grid layout. Query params for which streams to show.
+
+#### 2f. Search
+
+New route: `/search`
+
+Search bar in the header (when logged in). Search actors, streams, VODs. Leverage `place.stream.live.searchActorsTypeahead` (already used in recommendations).
+
+#### 2g. Upload VOD
+
+New route: `/upload`
+
+`tus-js-client` for resumable uploads (already web-compatible). File picker via `<input type="file" accept="video/*">`. Upload progress, validation, metadata editor.
+
+Port the logic from RN `upload.tsx` (1484 lines) but the web version will be simpler: no expo-document-picker, no expo-file-system, just native file input + tus.
+
+#### 2h. Embed Screens
+
+Routes: `/embed/$user`, `/embed/$user/video/$tid`, `/embed/info-widget/$user`, `/embed/danmu-obs/$user`
+
+Minimal chrome, auto-play, no sidebar/header. Query params for configuration (chat visible, quality, etc.). These are important for distribution - streamers embed their streams on personal websites.
+
+#### 2i. Popout Windows
+
+Routes for popout views (livestream, multistream, stream monitor, info widget). Standalone windows with minimal UI. Lower priority than embeds but useful for power users.
+
+#### 2k. About, Download, Support
+
+These don't need to be full routes. They can be:
+
+- Links in the sidebar footer or header
+- External links to stream.place pages
+- Or simple inline content accessible from settings
+
+The functionality should be accessible without cluttering the route tree.
+
+#### 2l. VOD Download
+
+Already covered in 2d. (Duplicate removed.)
+
+---
+
+### Phase 3: Go-Live & Broadcaster Flow
+
+The biggest gap. This is deferred because the approach is still being thought through. The RN app has a complete go-live flow; the web app has zero.
+
+#### 3a. Stream Key Creation
+
+Un-stub `createStreamKeyRecord` in `blueskySlice.ts`. Add `@atproto/crypto` + `viem` to web dependencies. Build key generation flow using `@atproto/crypto` for keypair generation. Wire into `settings/keys.tsx` (currently read-only delete).
+
+#### 3b. Go-Live Route & UI
+
+New route: `/go-live` (or `/settings/go-live`)
+
+"Start streaming" button in sidebar (replace disabled Following with Go Live when logged in). Stream key display + copy-to-clipboard. OBS/Restream setup instructions. RTMP URL + stream key display.
+
+#### 3c. Live Dashboard
+
+New route: `/$user/dashboard` (broadcaster view)
+
+Un-stub `createLivestreamRecord` and `updateLivestreamRecord` in `blueskySlice.ts`. Implement `golivePost` in `blueskySlice.ts`.
+
+**Dashboard vision:** Twitch-style dashboard with movable widgets. BentoGrid layout with drag-and-drop rearrangement. Widgets: self-view, chat, viewer count, stream health, multistream status, activity feed.
+
+- Use `@dnd-kit/core` or similar for drag-and-drop widget arrangement
+- Horizontal scroll support for widget overflow
+- Widget state persisted to localStorage (positions, sizes)
+- Keep-awake via `navigator.wakeLock.request("screen")`
+- Mobile web: `<video autoplay muted playsinline>` for self-preview
+
+The RN app uses `BentoGrid` from `@streamplace/components` which is RN-specific. The web implementation should be its own thing, built for the web-native drag-and-drop experience.
+
+#### 3d. WebRTC Publishing (Web Broadcaster)
+
+`getUserMedia()` for camera/mic capture. `RTCPeerConnection` for WHEP/WHIP publishing. This is the web-native equivalent of `react-native-webrtc` + `rtcaudiodevice`. Integrate with the live dashboard self-view.
+
+This is significant work and only matters for a subset of users who want browser-based broadcasting. Could be deferred to after initial go-live if OBS-only (RTMP key + instructions) is sufficient.
+
+#### 3e. Following Feed
+
+Sidebar "Following" link → working route. Fetch following list from PDS, filter live users to followed accounts, display as StreamCard grid (same as home, filtered).
+
+This may need server-side work depending on how following data is fetched, plus optimisations and caching.
+
+---
+
+### Phase 4: Web-Native Enhancements
+
+These go beyond parity to make the web app genuinely better than the RN app on desktop.
+
+#### 4a. Picture-in-Picture
+
+`video.requestPictureInPicture()` API. PiP button in player controls. Continue watching while browsing other tabs.
+
+#### 4b. Web Share API
+
+Share button on streams and VODs. `navigator.share({ title, url, text })`. Fallback to copy-to-clipboard.
+
+#### 4c. Keyboard Shortcuts
+
+Global shortcuts: `G` for go-live, `/` for search, `?` for help. Player shortcuts: already done (space, m, f). Chat shortcuts: `Enter` to send, `Escape` to close.
+
+#### 4d. Multi-Window / Pop-Out Player
+
+Pop-out player to separate browser window. `window.open()` with minimal player UI. Sync play/pause state between windows.
+
+#### 4e. URL-Based Deep Linking
+
+Every view has a stable URL (already done with TanStack Router). Shareable links to specific moments in VODs. Embeddable via query params.
+
+#### 4f. Theming
+
+Full light mode + dark mode implementation. `prefers-color-scheme` media query listener. Manual toggle in settings. CSS variables already partially defined in `styles.css`.
+
+#### 4g. PWA (Progressive Web App)
+
+`manifest.json` with app name, icons, theme color. Service worker for offline shell caching. "Add to Home Screen" prompt. Offline fallback page.
+
+---
+
+## Decisions
+
+### 1. React Query Adoption Scope
+
+**Decision: Incremental.** Migrate one hook at a time, starting with the ugliest hand-rolled fetching. The inconsistency is temporary. A big-bang migration is high-risk and creates a massive diff that's hard to review.
+
+### 2. WebRTC Publishing Priority
+
+**Decision: Defer to after initial go-live.** OBS-only with RTMP key + instructions gets 90% of broadcasters. WebRTC publishing is significant work for a subset of users. Ship the basic go-live first, add WebRTC later.
+
+### 3. Route Structure
+
+**Decision: Add top-level routes for major features.** `/following`, `/search`, `/upload`, `/multi`, `/chat-popout/$user`. Keep settings nested. Embed routes under `/embed/`. Don't nest new features under existing sections just because the RN app does - the web has a sidebar, not tabs.
+
+### 4. Pop-Out Windows
+
+**Decision: Medium priority.** Embeds are higher priority (distribution). Pop-outs are nice for power users but most won't use them. Build embeds first, pop-outs second.
+
+### 5. Upload Flow
+
+**Decision: After go-live.** The go-live flow is the critical gap. Upload is important but secondary. When we do build it, `tus-js-client` + `<input type="file">` is simpler than the RN version.
+
+### 6. Shared Package Strategy
+
+**Decision: (c) Both.** Move shared logic to `@streamplace/core` (it's already well-structured). Keep web-specific UI in `js/web/src/`. The core package's livestream store and VOD interactions are already platform-agnostic; continue that pattern.
+
+### 7. State Management Split
+
+**Decision: Zustand for client state, React Query for server state.** Auth, session, sidebar, UI state stays in Zustand. Server data (live users, profiles, video lists, settings) moves to React Query. The distinction: if it's fetched from an API, it's React Query. If it's local UI state, it's Zustand.
+
+---
+
+## Suggested Priority Order
+
+### Phase 1: Foundation (Do First)
+
+1. React Query setup + incremental migration (1a)
+2. Mount missing providers: Tooltip, Fullscreen, VideoElement (1d)
+3. Error boundary (1b)
+4. Suspense fallbacks (1c)
+5. Theme provider plumbing (1e)
+6. i18n audit (1f)
+7. Sentry (1g)
+8. Code review & cleanup (1h)
+
+### Phase 2: Feature Parity (Do Second)
+
+1. Chat popout (2a)
+2. Block/mute in chat (2b)
+3. Chat profile edit (2c)
+4. VOD download (2d)
+5. Search (2f)
+6. Multi-stream viewer (2e)
+7. Upload VOD (2g)
+8. Embed screens (2h)
+9. About/Download/Support accessible somewhere (2k)
+10. Popout windows (2i)
+
+### Phase 3: Go-Live (Do Last)
+
+1. Stream key creation (3a)
+2. Go-live route + sidebar button (3b)
+3. Live dashboard with movable widgets (3c)
+4. WebRTC publishing (3d)
+5. Following feed (3e)
+
+### Phase 4: Web-Native Enhancements (Nice-to-Have)
+
+1. Picture-in-Picture (4a)
+2. Web Share API (4b)
+3. Keyboard shortcuts (4c)
+4. Multi-window player (4d)
+5. Deep linking (4e)
+6. Theming (4f)
+7. PWA (4g)
diff --git a/js/web/src/components/header.tsx b/js/web/src/components/header.tsx
index be18020a4..29e634f61 100644
--- a/js/web/src/components/header.tsx
+++ b/js/web/src/components/header.tsx
@@ -1,23 +1,22 @@
-import { Link } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { ArrowRight, Search, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import useAvatars from "../hooks/use-avatars";
 import { EMPTY_LOGIN_SEARCH } from "../lib/login-search";
 import { useSession } from "../lib/session";
-import { useUserProfile } from "../lib/store/hooks";
+import { usePDSAgent, useUserProfile } from "../lib/store/hooks";
 import StreamplaceSvg from "./svg/streamplace-bw";
 import { SidebarTrigger } from "./ui/sidebar";
 
+interface SearchResult {
+  did: string;
+  handle: string;
+  displayName?: string;
+}
+
 export default function Header() {
   const { state } = useSession();
-  // useUserProfile reads the authed user's profile from the slice's
-  // `profiles` state, which the BlueskyProvider populates with
-  // getProfile(did) on login. This is the reactive read for the
-  // header — the avatar appears as soon as the slice finishes its
-  // initial profile fetch.
   const userProfile = useUserProfile();
-  // useAvatars is also called so the authed user's profile lands in
-  // the batch cache (`profileCache`). Other consumers (e.g. a future
-  // chat list, a multi-user grid) reading via useAvatars will dedupe
-  // against this entry instead of refetching.
   useAvatars(state.status === "authenticated" ? [state.session.did] : []);
 
   const did = state.status === "authenticated" ? state.session.did : null;
@@ -25,20 +24,228 @@ export default function Header() {
   const handle = userProfile?.handle;
   const displayName = userProfile?.displayName || handle;
 
+  // --- Search ---
+  const agent = usePDSAgent();
+  const navigate = useNavigate();
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [searching, setSearching] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [highlightIndex, setHighlightIndex] = useState(-1);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const resultsRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const resultDids = results.map((r) => r.did);
+  const avatars = useAvatars(resultDids);
+
+  const searchActors = useCallback(
+    async (q: string) => {
+      if (!agent || !q.trim()) {
+        setResults([]);
+        return;
+      }
+      try {
+        setSearching(true);
+        const response = await agent.place.stream.live.searchActorsTypeahead({
+          q,
+          limit: 8,
+        });
+        setResults(
+          response.data.actors.map((a: any) => ({
+            did: a.did,
+            handle: a.handle,
+            displayName: a.displayName,
+          })),
+        );
+      } catch (error) {
+        console.error("Search failed:", error);
+        setResults([]);
+      } finally {
+        setSearching(false);
+      }
+    },
+    [agent],
+  );
+
+  const handleChange = (value: string) => {
+    setQuery(value);
+    setHighlightIndex(-1);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    if (value.trim()) {
+      setOpen(true);
+      timeoutRef.current = setTimeout(() => searchActors(value), 250);
+    } else {
+      setResults([]);
+      setOpen(false);
+    }
+  };
+
+  const selectResult = useCallback(
+    (actor: SearchResult) => {
+      setQuery("");
+      setResults([]);
+      setOpen(false);
+      navigate({ to: "/$user", params: { user: actor.handle } });
+    },
+    [navigate],
+  );
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!open) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightIndex((i) => Math.min(i + 1, results.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightIndex((i) => Math.max(i - 1, -1));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (highlightIndex >= 0 && results[highlightIndex]) {
+        selectResult(results[highlightIndex]);
+      }
+    } else if (e.key === "Escape") {
+      setOpen(false);
+      inputRef.current?.blur();
+    }
+  };
+
+  // Close on outside click.
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClick);
+    return () => document.removeEventListener("mousedown", onClick);
+  }, [open]);
+
+  // Scroll highlighted item into view.
+  useEffect(() => {
+    if (highlightIndex < 0 || !resultsRef.current) return;
+    const el = resultsRef.current.children[highlightIndex] as HTMLElement;
+    el?.scrollIntoView({ block: "nearest" });
+  }, [highlightIndex]);
+
+  const clearSearch = () => {
+    setQuery("");
+    setResults([]);
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+
   return (
     <>
-      <header className="flex items-center gap-4 pt-2 pb-4 py-2 h-12 bg-sidebar">
-        {/* fake sidebar left */}
-        <div className="fixed left-4 top-3 z-50 flex items-center gap-2">
+      <header className="flex items-center gap-4 pt-4 pb-4 py-2 h-12 bg-sidebar">
+        {/* logo */}
+        <div className="fixed left-4 top-2.5 z-50 flex items-center gap-2">
           <StreamplaceSvg className="w-6 h-6 invert-100" />
-          <h1 className="text-lg">Streamplace</h1>
+          <h1 className="text-lg hidden md:block">Streamplace</h1>
+          <SidebarTrigger />
         </div>
-        <div className="flex-1 flex items-center justify-end gap-4">
+
+        {/* search bar */}
+        <div ref={containerRef} className="flex-1 flex justify-center ml-24">
+          <div className="relative w-full max-w-sm">
+            <div className="relative flex items-center">
+              <Search className="absolute left-2.5 w-3.5 h-3.5 text-[var(--color-fg-muted)] pointer-events-none" />
+              <input
+                ref={inputRef}
+                type="text"
+                value={query}
+                onChange={(e) => handleChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onFocus={() => {
+                  if (query.trim() && results.length > 0) setOpen(true);
+                }}
+                placeholder="Search..."
+                className="w-full h-8 pl-8 pr-8 text-sm rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+              />
+              {query && (
+                <button
+                  type="button"
+                  onClick={clearSearch}
+                  className="absolute right-2 p-0.5 rounded text-[var(--color-fg-muted)] hover:text-[var(--color-fg)]"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              )}
+            </div>
+
+            {/* results dropdown */}
+            {open && (results.length > 0 || searching) && (
+              <div
+                ref={resultsRef}
+                className="absolute top-full mt-1 left-0 right-0 z-50 rounded-md border border-[var(--color-border)] bg-[var(--color-bg-elevated)] shadow-md overflow-hidden max-h-80 overflow-y-auto"
+              >
+                {searching && results.length === 0 && (
+                  <div className="flex items-center justify-center py-6">
+                    <div className="w-4 h-4 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin" />
+                  </div>
+                )}
+                {results.map((actor, i) => (
+                  <button
+                    key={actor.did}
+                    type="button"
+                    onClick={() => selectResult(actor)}
+                    onMouseEnter={() => setHighlightIndex(i)}
+                    className={`w-full flex items-center gap-2.5 px-3 py-2 text-left transition-colors ${
+                      i === highlightIndex
+                        ? "bg-[var(--color-bg-overlay)]"
+                        : "hover:bg-[var(--color-bg-overlay)]"
+                    }`}
+                  >
+                    {avatars[actor.did]?.avatar ? (
+                      <img
+                        src={avatars[actor.did].avatar}
+                        alt=""
+                        className="w-7 h-7 rounded-full bg-[var(--color-bg)] object-cover flex-shrink-0"
+                      />
+                    ) : (
+                      <div className="w-7 h-7 rounded-full bg-[var(--color-bg-overlay)] border border-[var(--color-border)] flex items-center justify-center text-xs font-medium text-[var(--color-fg-muted)] flex-shrink-0">
+                        {(
+                          actor.displayName?.[0] ||
+                          actor.handle[0] ||
+                          "?"
+                        ).toUpperCase()}
+                      </div>
+                    )}
+                    <div className="min-w-0 flex-1">
+                      <div className="text-sm font-medium text-[var(--color-fg)] truncate">
+                        {actor.displayName || actor.handle}
+                      </div>
+                      <div className="text-xs text-[var(--color-fg-muted)] truncate">
+                        @{actor.handle}
+                      </div>
+                    </div>
+                  </button>
+                ))}
+                <div className="w-full flex justify-center items-center border-t">
+                  <Link
+                    to="/search"
+                    search={{ q: query || undefined }}
+                    onClick={() => setOpen(false)}
+                    className="flex items-center gap-2 text-center py-2 text-sm text-[var(--color-accent)] hover:bg-[var(--color-bg-overlay)] transition-colors"
+                  >
+                    More results <ArrowRight className="w-3.5 h-3.5 inline" />
+                  </Link>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-4">
           <nav className="flex items-center gap-4">
             {did ? (
               <Link
-                to="/$user"
-                params={{ user: handle || did }}
+                to="/settings/account"
                 className="flex items-center gap-2 rounded-full hover:bg-[var(--color-bg-overlay)] transition-colors pl-1 pr-3 py-1"
                 title={displayName ? `Signed in as @${handle}` : "Profile"}
                 aria-label={displayName ? `Signed in as @${handle}` : "Profile"}
@@ -47,10 +254,8 @@ export default function Header() {
                   <img
                     src={avatar}
                     alt=""
-                    className="w-7 h-7 rounded-full bg-[var(--color-bg)] object-cover"
+                    className="w-7 h-7 rounded-full bg-(--color-bg) object-cover"
                     onError={(e) => {
-                      // Hide the img if the avatar URL 404s so the
-                      // initial-letter fallback below shows through.
                       (e.currentTarget as HTMLImageElement).style.display =
                         "none";
                     }}
@@ -60,11 +265,6 @@ export default function Header() {
                     {(displayName?.[0] || handle?.[0] || "?").toUpperCase()}
                   </div>
                 )}
-                {displayName && (
-                  <span className="text-sm font-medium text-[var(--color-fg)] hidden sm:inline">
-                    @{handle}
-                  </span>
-                )}
               </Link>
             ) : (
               <Link
@@ -75,7 +275,6 @@ export default function Header() {
                 Log in
               </Link>
             )}
-            <SidebarTrigger />
           </nav>
         </div>
       </header>
diff --git a/js/web/src/components/player/player.tsx b/js/web/src/components/player/player.tsx
index ce2289ba5..4adcdd0f4 100644
--- a/js/web/src/components/player/player.tsx
+++ b/js/web/src/components/player/player.tsx
@@ -516,7 +516,9 @@ function StatsOverlay({
         <Row label="Protocol" value={protocol} />
         <Row label="Latency Mode" value={latencyMode} />
         <Row label="Render Surface" value="video" />
-        {stats.hlsVersion && <Row label="Backend" value={stats.hlsVersion} />}
+        {stats.hlsVersion && (
+          <Row label="hls.js version" value={stats.hlsVersion} />
+        )}
         <Row label="Session" value={sessionId} />
       </div>
     </div>
diff --git a/js/web/src/components/stream/chat-panel.tsx b/js/web/src/components/stream/chat-panel.tsx
index c1330a450..e1d72ecba 100644
--- a/js/web/src/components/stream/chat-panel.tsx
+++ b/js/web/src/components/stream/chat-panel.tsx
@@ -5,21 +5,28 @@ import {
 } from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
 import type { LivestreamStore } from "@streamplace/core";
 import { segmentize, type Facet, type FacetFeature } from "@streamplace/core";
-import { ArrowDown, Reply } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { ArrowDown, ArrowUp, Pin, Reply } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type {
   ChatMessageViewHydrated,
   PlaceStreamBadgeDefs,
 } from "streamplace";
 import { useStore } from "zustand";
 import { useShallow } from "zustand/react/shallow";
+import { useSession } from "../../lib/session";
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from "../ui/hover-card";
 
-export function ChatPanel({ store }: { store: LivestreamStore }) {
+export function ChatPanel({
+  store,
+  reversed = false,
+}: {
+  store: LivestreamStore;
+  reversed?: boolean;
+}) {
   const { chat, authors, replyToMessage } = useStore(
     store,
     useShallow((s) => ({
@@ -30,43 +37,55 @@ export function ChatPanel({ store }: { store: LivestreamStore }) {
   );
 
   const scrollRef = useRef<HTMLDivElement | null>(null);
-  const messagesEndRef = useRef<HTMLDivElement | null>(null);
-  const [isAtBottom, setIsAtBottom] = useState(true);
+  const anchorRef = useRef<HTMLDivElement | null>(null);
+  const [isAtAnchor, setIsAtAnchor] = useState(true);
   const [newMessageCount, setNewMessageCount] = useState(0);
   const prevChatLenRef = useRef(chat.length);
 
-  // Track whether the user is scrolled to the bottom.
+  // Track whether the user is scrolled to the anchor end.
+  // Normal: anchor is bottom. Reversed: anchor is top.
   const handleScroll = useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
     const threshold = 40;
-    setIsAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < threshold);
-  }, []);
+    if (reversed) {
+      setIsAtAnchor(el.scrollTop < threshold);
+    } else {
+      setIsAtAnchor(
+        el.scrollHeight - el.scrollTop - el.clientHeight < threshold,
+      );
+    }
+  }, [reversed]);
 
-  // When new messages arrive, auto-scroll only if already at bottom.
+  // When new messages arrive, auto-scroll only if already at anchor.
   useEffect(() => {
     const delta = chat.length - prevChatLenRef.current;
     prevChatLenRef.current = chat.length;
 
     if (delta <= 0) return;
 
-    if (isAtBottom) {
-      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    if (isAtAnchor) {
+      anchorRef.current?.scrollIntoView({ behavior: "smooth" });
       setNewMessageCount(0);
     } else {
       setNewMessageCount((c) => c + delta);
     }
-  }, [chat.length, isAtBottom]);
+  }, [chat.length, isAtAnchor]);
 
-  const scrollToBottom = useCallback(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  const scrollToAnchor = useCallback(() => {
+    anchorRef.current?.scrollIntoView({ behavior: "smooth" });
     setNewMessageCount(0);
   }, []);
 
-  // Clear the badge when the user scrolls back to the bottom.
+  // Clear the badge when the user scrolls back to the anchor.
   useEffect(() => {
-    if (isAtBottom) setNewMessageCount(0);
-  }, [isAtBottom]);
+    if (isAtAnchor) setNewMessageCount(0);
+  }, [isAtAnchor]);
+
+  const displayMessages = useMemo(() => {
+    const sliced = chat.slice(-1500);
+    return reversed ? [...sliced].reverse() : sliced;
+  }, [chat, reversed]);
 
   return (
     <div className="flex flex-col flex-1 min-h-0 max-w-full relative">
@@ -75,32 +94,36 @@ export function ChatPanel({ store }: { store: LivestreamStore }) {
         onScroll={handleScroll}
         className="flex-1 overflow-y-auto overflow-x-hidden p-3 space-y-0.5"
       >
-        {chat.length === 0 ? (
+        {reversed && <div ref={anchorRef} />}
+        {displayMessages.length === 0 ? (
           <div className="text-center text-[var(--color-fg-muted)] text-sm py-8">
             No messages yet
           </div>
         ) : (
-          chat
-            .slice(-100)
-            .map((msg) => (
-              <ChatMessage
-                key={msg.uri}
-                message={msg}
-                profile={authors[msg.author.did]}
-                authors={authors}
-              />
-            ))
+          displayMessages.map((msg) => (
+            <ChatMessage
+              key={msg.uri}
+              message={msg}
+              profile={authors[msg.author.did]}
+              authors={authors}
+              store={store}
+            />
+          ))
         )}
-        <div ref={messagesEndRef} />
+        {!reversed && <div ref={anchorRef} />}
       </div>
 
-      {!isAtBottom && (
+      {!isAtAnchor && (
         <button
-          onClick={scrollToBottom}
+          onClick={scrollToAnchor}
           className="absolute bottom-2 right-3 w-8 h-8 rounded-full bg-[var(--color-bg-elevated)] border border-[var(--color-border)] shadow-md flex items-center justify-center text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-bg-overlay)] transition-colors z-10"
-          aria-label="Scroll to bottom"
+          aria-label={reversed ? "Scroll to top" : "Scroll to bottom"}
         >
-          <ArrowDown className="w-4 h-4" />
+          {reversed ? (
+            <ArrowUp className="w-4 h-4" />
+          ) : (
+            <ArrowDown className="w-4 h-4" />
+          )}
           {newMessageCount > 0 && (
             <span className="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-[var(--color-accent)] text-white text-[10px] font-medium flex items-center justify-center">
               {newMessageCount}
@@ -116,12 +139,41 @@ function ChatMessage({
   message,
   profile,
   authors,
+  store,
 }: {
   message: ChatMessageViewHydrated;
   profile: ChatMessageViewHydrated["chatProfile"];
   authors: { [key: string]: ChatMessageViewHydrated["chatProfile"] };
+  store: LivestreamStore;
 }) {
+  const { state, pdsAgent, did } = useSession();
   const isSystem = message.author.did === "did:sys:system";
+  const isOwn = did === message.author.did;
+
+  // Check if current user is the streamer (can pin messages).
+  const streamerDid = useStore(store, (s) => s.livestream?.author.did);
+  const canPin = did && streamerDid && did === streamerDid;
+
+  const handleReply = useCallback(() => {
+    store.setState((s) => ({ ...s, replyToMessage: message }));
+  }, [store, message]);
+
+  const handlePin = useCallback(async () => {
+    if (!pdsAgent || !streamerDid) return;
+    try {
+      await pdsAgent.com.atproto.repo.createRecord({
+        repo: streamerDid,
+        collection: "place.stream.chat.pinnedRecord",
+        record: {
+          $type: "place.stream.chat.pinnedRecord",
+          pinnedMessage: message.uri,
+          createdAt: new Date().toISOString(),
+        },
+      });
+    } catch (e) {
+      console.error("Failed to pin message:", e);
+    }
+  }, [pdsAgent, streamerDid, message.uri]);
 
   if (isSystem) {
     return (
@@ -132,7 +184,31 @@ function ChatMessage({
   }
 
   return (
-    <div className="py-0.5 group hover:bg-[var(--color-bg-overlay)] rounded px-2 -mx-2 leading-snug">
+    <div className="py-0.5 group hover:bg-[var(--color-bg-overlay)] rounded px-2 -mx-2 leading-snug relative">
+      {/* Hover actions — visible on group hover */}
+      <div className="absolute right-0 top-0 -translate-y-1/2 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+        {state.status === "authenticated" && !isOwn && (
+          <button
+            type="button"
+            onClick={handleReply}
+            className="p-1 rounded bg-[var(--color-bg-elevated)] border border-[var(--color-border)] shadow-sm text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-bg-overlay)] transition-colors"
+            aria-label="Reply to message"
+          >
+            <Reply className="w-3.5 h-3.5" />
+          </button>
+        )}
+        {canPin && (
+          <button
+            type="button"
+            onClick={handlePin}
+            className="p-1 rounded bg-[var(--color-bg-elevated)] border border-[var(--color-border)] shadow-sm text-[var(--color-fg-muted)] hover:text-[var(--color-accent)] hover:bg-[var(--color-bg-overlay)] transition-colors"
+            aria-label="Pin message"
+          >
+            <Pin className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+
       {message.replyTo && (
         <div className="pl-[60px]">
           <ReplyBanner parent={message.replyTo} authors={authors} />
@@ -145,7 +221,10 @@ function ChatMessage({
         </span>
         <div className="flex-1 min-w-0 flex-wrap items-center gap-1">
           {message.badges?.map((badge, i) => (
-            <span className="items-end justify-end gap-0.5 inline-block">
+            <span
+              key={i}
+              className="items-end justify-end gap-0.5 inline-block"
+            >
               <BadgeIcon key={i} badge={badge} />
             </span>
           ))}
diff --git a/js/web/src/components/stream/stream-info.tsx b/js/web/src/components/stream/stream-info.tsx
index 4f951cfa6..5add477e3 100644
--- a/js/web/src/components/stream/stream-info.tsx
+++ b/js/web/src/components/stream/stream-info.tsx
@@ -1,10 +1,22 @@
+import { useStreamplaceUrl } from "@/lib/store/hooks";
+import { cn } from "@/lib/utils";
 import type { LivestreamStore } from "@streamplace/core";
+import { ChevronRight, ClipboardCopy, Plus, Share2 } from "lucide-react";
 import type { PlaceStreamDefs } from "streamplace";
 import { useStore } from "zustand";
 import { useShallow } from "zustand/react/shallow";
 import type { Liveness } from "../../hooks/use-liveness-state";
 import { formatViewers } from "../../lib/format";
 import { useSession } from "../../lib/session";
+import { Button, buttonVariants } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
 
 const ACTIVITY_LABELS: Record<string, string> = {
   events: "Events",
@@ -63,6 +75,8 @@ export function StreamInfo({
   const viewers = formatViewers(state.viewers);
   const isLive = liveness === "live";
 
+  const node = useStreamplaceUrl();
+
   return (
     <div className="mt-3 space-y-3 mx-3">
       <div className="flex items-start gap-3">
@@ -111,33 +125,152 @@ export function StreamInfo({
         <div className="flex items-center gap-2 flex-shrink-0">
           {sessionState.status === "authenticated" &&
             sessionState.session.did !== author?.did && (
-              <button
-                type="button"
-                className="h-8 px-3 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-[var(--color-accent-fg)] text-xs font-medium"
-              >
-                Follow
-              </button>
+              <Button type="button">
+                <Plus className="size-4" /> Follow
+              </Button>
             )}
-          <button
-            type="button"
-            className="h-8 px-3 rounded-md border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-xs text-[var(--color-fg-muted)]"
-            onClick={() => {
-              navigator.clipboard
-                .writeText(window.location.href)
-                .catch(() => {});
-            }}
-          >
-            Share
-          </button>
-          <button
+          <CopyButton type="live" nodeBaseURL={node} />
+          <Button
             type="button"
-            className="h-8 px-3 rounded-md border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-xs text-[var(--color-fg-muted)]"
+            variant="outline"
+            size="icon-lg"
             onClick={onToggleChat}
           >
-            {chatOpen ? "Hide chat" : "Chat"}
-          </button>
+            <ChevronRight
+              className={cn(
+                "size-6 transition-transform duration-250 ease-in-out",
+                !chatOpen && "-scale-100",
+              )}
+            />
+          </Button>
         </div>
       </div>
     </div>
   );
 }
+
+function assembleShareLink(
+  nodeBaseUrl: string,
+  type: "vod" | "live",
+  embed?: boolean,
+  rkey?: string,
+): string {
+  const url = new URL(nodeBaseUrl);
+  if (type === "vod" && rkey) {
+    url.pathname = `/${type}/vod/${rkey}`;
+  } else {
+    url.pathname = `/${type}`;
+  }
+  url.pathname += embed ? "/embed" : "";
+  return url.toString();
+}
+
+// checkmark button save 4 later
+//           <Button
+//   type="button"
+//   variant={copied ? "success" : "outline"}
+//   size="icon-lg"
+//   disabled={typeof share === "undefined"}
+//   className={cn("relative overflow-hidden")}
+// >
+//   {copied ? "Copied!" : "Share"}
+//   <svg
+//     className={cn(
+//       "size-4 text-green-500 absolute",
+//       "transition-all duration-300",
+//       copied ? "opacity-100" : "opacity-0 translate-y-6",
+//     )}
+//     fill="none"
+//     viewBox="0 0 24 24"
+//     stroke="currentColor"
+//     strokeWidth={2}
+//   >
+//     <path
+//       strokeLinecap="round"
+//       strokeLinejoin="round"
+//       d="M5 13l4 4L19 7"
+//     />
+//   </svg>
+//   <Share2
+//     className={cn(
+//       "size-4 transition-transform duration-300",
+//       copied && "scale-0",
+//     )}
+//   />
+// </Button>
+
+// copy button that has a dropdown for multiple platforms
+function CopyButton({
+  nodeBaseURL,
+  type,
+  rkey,
+}: {
+  nodeBaseURL?: string;
+  type: "vod" | "live";
+  rkey?: string;
+}) {
+  const share = nodeBaseURL
+    ? assembleShareLink(nodeBaseURL, type, false, rkey)
+    : undefined;
+
+  const embedShare = nodeBaseURL
+    ? assembleShareLink(nodeBaseURL, type, true, rkey)
+    : undefined;
+
+  const handleCopy = (link: string) => {
+    console.error("copying link", link);
+    navigator.clipboard.writeText(link);
+  };
+  const handleOpenInNewTab = (link: string) => {
+    window.open(link, "_blank");
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          className={cn(
+            buttonVariants({ variant: "outline", size: "icon-lg" }),
+            "relative overflow-hidden",
+          )}
+        >
+          <Share2 className={cn("size-4 transition-transform duration-300")} />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="min-w-40">
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>Copy</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => {
+                if (share) {
+                  handleCopy(share);
+                }
+              }}
+            >
+              <ClipboardCopy /> Copy Link
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                if (embedShare) {
+                  handleCopy(
+                    `<iframe src="${embedShare}" width="560" height="315" frameborder="0" allowfullscreen></iframe>`,
+                  );
+                }
+              }}
+            >
+              <ClipboardCopy /> Copy Embed Code
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => {
+                if (embedShare) {
+                  handleCopy(embedShare);
+                }
+              }}
+            >
+              <ClipboardCopy /> Copy Embed URL
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+}
diff --git a/js/web/src/components/stream/stream-notifications.tsx b/js/web/src/components/stream/stream-notifications.tsx
index 2149f9eac..4f89aeadd 100644
--- a/js/web/src/components/stream/stream-notifications.tsx
+++ b/js/web/src/components/stream/stream-notifications.tsx
@@ -1,9 +1,24 @@
+import { $Typed } from "@atproto/api";
+import type { FacetLink } from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
 import type { LivestreamStore } from "@streamplace/core";
-import { Pin } from "lucide-react";
+import { segmentize, type Facet, type FacetFeature } from "@streamplace/core";
+import { EyeOff, Pin, X } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import type {
+  ChatMessageViewHydrated,
+  PinnedRecordViewHydrated,
+} from "streamplace";
 import { useStore } from "zustand";
 import { useShallow } from "zustand/react/shallow";
 import { useSession } from "../../lib/session";
 
+function rgbColor(
+  color?: { red: number; green: number; blue: number } | null,
+): string | undefined {
+  if (!color) return undefined;
+  return `rgb(${color.red}, ${color.green}, ${color.blue})`;
+}
+
 export function StreamNotifications({ store }: { store: LivestreamStore }) {
   const state = useStore(
     store,
@@ -30,31 +45,150 @@ function PinnedNotification({
   comment,
 }: {
   store: LivestreamStore;
-  comment: any;
+  comment: PinnedRecordViewHydrated;
 }) {
-  const { state } = useSession();
-  const isOwn =
-    state.status === "authenticated" &&
-    state.session.did === comment.author?.did;
+  const { state: sessionState, pdsAgent, did } = useSession();
+  const streamerDid = useStore(store, (s) => s.livestream?.author.did);
+  const canUnpin = did && streamerDid && did === streamerDid;
+
+  const message = comment.message as ChatMessageViewHydrated | undefined;
+  const record = comment.record;
+  const authorColor = rgbColor(message?.chatProfile?.color);
+  const authorName = message
+    ? message.author.displayName || message.author.handle || message.author.did
+    : "unknown";
+  const messageRecord = message?.record as
+    | ChatMessageViewHydrated["record"]
+    | undefined;
+  const text = messageRecord?.text || "";
+  const facets = messageRecord?.facets;
+
+  const segments = facets ? segmentize(text, facets as Facet[]) : [];
+
+  const [dismissed, setDismissed] = useState(false);
+
+  // Handle TTL expiry
+  const expiresAt = record.expiresAt ? new Date(record.expiresAt) : null;
+  useEffect(() => {
+    if (!expiresAt) return;
+    const remaining = expiresAt.getTime() - Date.now();
+    if (remaining <= 0) {
+      setDismissed(true);
+      return;
+    }
+    const timeout = setTimeout(() => setDismissed(true), remaining);
+    return () => clearTimeout(timeout);
+  }, [expiresAt]);
+
+  // When dismissed, clear from store
+  useEffect(() => {
+    if (dismissed) {
+      store.setState({ pinnedComment: null });
+    }
+  }, [dismissed, store]);
+
+  const handleDismiss = useCallback(() => {
+    setDismissed(true);
+  }, []);
 
-  const text = comment.record?.text;
+  const handleUnpin = useCallback(async () => {
+    if (!pdsAgent || !streamerDid) return;
+    try {
+      const rkey = comment.uri.split("/").pop();
+      if (!rkey) return;
+      await pdsAgent.com.atproto.repo.deleteRecord({
+        repo: streamerDid,
+        collection: "place.stream.chat.pinnedRecord",
+        rkey,
+      });
+    } catch (e) {
+      console.error("Failed to unpin message:", e);
+    }
+    store.setState({ pinnedComment: null });
+  }, [pdsAgent, streamerDid, comment.uri, store]);
+
+  if (dismissed) return null;
 
   return (
-    <div className="px-3 py-2 border-b border-[var(--color-border)] bg-[var(--color-bg-overlay)]">
-      <div className="flex items-center gap-1.5 mb-0.5">
-        <Pin className="w-3 h-3 text-[var(--color-accent)]" />
-        <span className="text-xs font-medium text-[var(--color-fg-muted)] uppercase tracking-wide">
-          Pinned message
-          {isOwn && " · You"}
-        </span>
+    <div className="bg-neutral-900 rounded-lg overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2">
+        <div style={{ transform: "rotate(-25deg)" }} className="flex-shrink-0">
+          <Pin
+            className="w-5 h-5"
+            style={{ color: authorColor || "var(--color-accent)" }}
+            fill={authorColor || "var(--color-accent)"}
+          />
+        </div>
+        <div className="flex-1 min-w-0 flex flex-col gap-1">
+          <div className="flex items-center gap-1 flex-wrap">
+            <span
+              className="font-semibold text-sm"
+              style={{ color: authorColor || "var(--color-fg)" }}
+            >
+              {authorName}
+            </span>
+            <span className="text-sm text-neutral-300">
+              {segments.length > 0
+                ? segments.map((seg, i) => (
+                    <PinnedRichText key={i} segment={seg} />
+                  ))
+                : text}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {canUnpin && (
+            <button
+              type="button"
+              onClick={handleUnpin}
+              className="p-1 rounded hover:bg-white/10 text-neutral-400 hover:text-neutral-200 transition-colors"
+              aria-label="Unpin message"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={handleDismiss}
+            className="p-1 rounded hover:bg-white/10 text-neutral-400 hover:text-neutral-200 transition-colors"
+            aria-label="Dismiss pinned message"
+          >
+            <EyeOff className="w-4 h-4" />
+          </button>
+        </div>
       </div>
-      <p className="text-sm text-[var(--color-fg)] line-clamp-2">
-        {text || ""}
-      </p>
     </div>
   );
 }
 
+function PinnedRichText({
+  segment,
+}: {
+  segment: { text: string; features?: unknown[] };
+}) {
+  const ftr = segment.features?.[0] as FacetFeature | undefined;
+  if (!ftr) {
+    return <span>{segment.text}</span>;
+  }
+  if (ftr.$type === "app.bsky.richtext.facet#link") {
+    const linkFtr = ftr as $Typed<FacetLink>;
+    return (
+      <a
+        href={linkFtr.uri}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-blue-400 hover:underline break-all"
+      >
+        {segment.text}
+      </a>
+    );
+  }
+  if (ftr.$type === "app.bsky.richtext.facet#mention") {
+    return <span className="text-blue-400">{segment.text}</span>;
+  }
+  return <span>{segment.text}</span>;
+}
+
 function TeleportNotification({ teleport }: { teleport: any }) {
   const targetDid = teleport.target;
   const startsAt = teleport.startsAt
diff --git a/js/web/src/components/stream/video-section.tsx b/js/web/src/components/stream/video-section.tsx
index 40ae9807a..00f75a1ef 100644
--- a/js/web/src/components/stream/video-section.tsx
+++ b/js/web/src/components/stream/video-section.tsx
@@ -76,13 +76,17 @@ export function VideoSectionInner({
   const segRatio = segment ? segment.width / segment.height : 16 / 9;
 
   return (
-    <div className="w-full max-h-[calc(min(100vh-240px,100%))] h-full bg-black">
-      <div
-        className="relative h-full bg-green-400 mx-auto"
-        style={{
-          maxHeight: "calc(100vh-240px)",
-        }}
-      >
+    <div
+      className="w-full bg-black"
+      style={{
+        // constrain height to the lesser of: (container width / segRatio) or (viewport height - header/padding).
+        // this keeps the video at its natural aspect ratio on wide screens while preventing it from
+        // overflowing the viewport on tall/narrow ones. segRatio falls back to 16/9 when no segment data is available.
+        maxHeight: `min(calc(100vw / ${segRatio}), calc(100vh - 240px))`,
+        aspectRatio: `${segRatio}`,
+      }}
+    >
+      <div className="relative h-full bg-green-400 mx-auto">
         {neverLive ? (
           <img
             src={thumbnailUrl}
diff --git a/js/web/src/components/svg/streamplace-bw.tsx b/js/web/src/components/svg/streamplace-bw.tsx
index fc169a277..bb966327c 100644
--- a/js/web/src/components/svg/streamplace-bw.tsx
+++ b/js/web/src/components/svg/streamplace-bw.tsx
@@ -15,52 +15,52 @@ export default function StreamplaceSvg(props: React.ComponentProps<"svg">) {
       <path
         d="M33.8134 34.59L46.6717 37.819L37.2113 47.6831L34.4887 47.4905L33.8134 47.3205V46.3873L43.3754 40.1349L33.8134 35.2284V34.59ZM18.9681 26.9812L19.5407 37.9688L28.1652 32.3276L28.804 32.6997L19.935 41.948L19.9197 41.9159L15.9882 28.113L17.1794 26.3309L17.4191 26.0812L18.9681 26.9812ZM44.3766 23.1435L43.6505 23.5667L32.8677 18.0349L33.4628 29.4897L32.994 29.762L29.2136 16.4846L29.5064 16.506L43.02 19.9002L44.0755 22.0794L44.3766 23.1435Z"
         fill="black"
-        fill-opacity="0.9"
+        fillOpacity="0.9"
       />
       <path
         d="M33.8135 34.2155L48.4369 35.2462L39.9752 47.8793L37.2114 47.6831L46.6718 37.819L33.8135 34.59V34.2155ZM34.4888 47.4905L33.8135 47.443V47.3205L34.4888 47.4905ZM29.1901 32.9244L21.2834 44.7311L19.9351 41.9491L28.8053 32.6997L29.1901 32.9244ZM19.921 41.9194L14.3909 30.5002L15.9883 28.1118L19.921 41.9194ZM29.2138 16.4845L32.9941 29.7619L32.7238 29.9189L26.1122 16.267L29.2138 16.4845ZM17.4204 26.0812L17.1784 26.3344L17.3684 26.0514L17.4204 26.0812ZM44.5443 23.0471L44.5691 23.0329L44.3778 23.1446L44.0756 22.0794L44.5443 23.0471ZM41.797 17.3726L43.0201 19.9002L29.5006 16.5047L41.797 17.3726Z"
         fill="black"
-        fill-opacity="0.8"
+        fillOpacity="0.8"
       />
       <path
         d="M43.6541 48.0339L42.6104 48.2574L33.8135 49.0301V47.443L39.9752 47.8793L48.4368 35.2463L33.8135 34.2155V33.9599L50.8678 32.4571L43.6541 48.0339ZM16.0284 25.2727L17.3684 26.0515L14.3908 30.5003L21.2834 44.7311L29.1913 32.9244L29.4888 33.098L22.4983 48.1967L12.2751 33.4962L12.3932 33.1301L16.0284 25.2727Z"
         fill="black"
-        fill-opacity="0.7"
+        fillOpacity="0.7"
       />
       <path
         d="M44.5443 23.0472L41.7969 17.3726L26.1122 16.267L32.7238 29.9189L32.5065 30.0461L22.4924 15.644L40.1948 14.083L40.6934 14.626L45.9807 22.2689L44.5443 23.0472Z"
         fill="black"
-        fill-opacity="0.7"
+        fillOpacity="0.7"
       />
       <path
         d="M29.6977 33.2192L24.1747 50.3391L11.438 36.0927L12.2751 33.4962L22.4982 48.1967L29.4887 33.0979L29.6977 33.2192ZM33.8134 50.1393V49.0301L42.6103 48.2573L33.8134 50.1393ZM46.2455 47.481L43.654 48.0338L50.8677 32.4571L33.8134 33.9599V33.7863L51.9125 29.9129L46.2455 47.481ZM16.0295 25.2727L12.3931 33.13L15.1003 24.733L16.0295 25.2727ZM40.1983 14.083L22.4923 15.644L32.5064 30.0461L32.3648 30.1281L19.8016 16.0791L38.4202 12.094L40.1983 14.083ZM46.9586 21.6431L45.9633 22.2221L40.6788 14.6204L46.9586 21.6431Z"
         fill="black"
-        fill-opacity="0.6"
+        fillOpacity="0.6"
       />
       <path
         d="M15.1015 24.733L11.438 36.0928L24.1747 50.3391L29.6977 33.2192L29.8654 33.3167L25.608 53.4956L9.59619 38.977L12.8736 23.4383L15.1015 24.733ZM49.6469 47.55L33.8134 52.7288V50.1394L46.2455 47.481L51.9125 29.913L33.8134 33.7863V33.677L53.9657 27.0834L49.6469 47.55ZM49.2254 20.3258L46.9586 21.6431L38.4202 12.094L19.8016 16.0791L32.3648 30.1281L32.2337 30.2042L16.3435 15.7962L36.8346 9.0921L49.2254 20.3258Z"
         fill="black"
-        fill-opacity="0.5"
+        fillOpacity="0.5"
       />
       <path
         d="M12.8748 23.4383L9.59616 38.9769L25.6079 53.4955L29.8665 33.3167L29.9999 33.3951L27.3305 55.3074L9.04126 41.4308L11.3423 22.5478L12.8748 23.4383ZM52.0093 46.7427L33.8134 54.5204V52.7287L49.6469 47.55L53.9656 27.0834L33.8134 33.6769V33.5889L54.7012 24.6616L52.0093 46.7427ZM50.7968 19.4115L49.2254 20.3258L36.8346 9.09207L16.3435 15.7962L32.2337 30.2042L32.1392 30.2589L13.9173 16.4322L34.9952 7.42169L50.7968 19.4115Z"
         fill="black"
-        fill-opacity="0.4"
+        fillOpacity="0.4"
       />
       <path
         d="M11.3424 22.5478L9.04131 41.4308L27.3305 55.3074L30.0011 33.3951L30.1062 33.457L28.8831 56.992L8.48169 43.6504L9.63045 21.5527L11.3424 22.5478ZM54.1782 46.0627L33.8134 56.5105V54.5203L52.0094 46.7427L54.7012 24.6616L33.8134 33.5889V33.5331L55.4072 22.4539L54.1782 46.0627ZM52.5371 18.3998L50.7969 19.4115L34.9952 7.42169L13.9173 16.4322L32.1393 30.2589L32.0613 30.3041L11.6859 16.9803L33.36 5.8595L52.5371 18.3998Z"
         fill="black"
-        fill-opacity="0.3"
+        fillOpacity="0.3"
       />
       <path
         d="M9.63047 21.5527L8.48171 43.6504L28.8831 56.992L30.1062 33.457L30.1865 33.5033V58.6101L7.82056 45.6073V20.5006L9.63047 21.5527ZM56.1794 45.6073L33.8134 58.6101V56.5105L54.1782 46.0627L55.4073 22.4539L33.8134 33.5331V33.5033L56.1794 20.5006V45.6073ZM54.366 17.3381L52.5371 18.3998L33.3601 5.8595L11.686 16.9803L32.0614 30.3041L32 30.3409L9.63283 17.3381L32 4.33417L54.366 17.3381Z"
         fill="black"
-        fill-opacity="0.2"
+        fillOpacity="0.2"
       />
       <path
         d="M7.82052 45.6074L30.1865 58.6101V33.5034L7.82052 20.5006V45.6074ZM33.8134 33.5034V58.6101L56.1794 45.6074V20.5006L33.8134 33.5034ZM9.63279 17.3382L31.9999 30.3409L54.3659 17.3382L31.9999 4.3342L9.63279 17.3382ZM59.8063 46.6619C59.8063 47.3143 59.4606 47.9169 58.8995 48.2431L32.9067 63.355C32.3456 63.6812 31.6543 63.6812 31.0932 63.355L5.10033 48.2431C4.53931 47.9169 4.1936 47.3143 4.1936 46.6619V17.3382C4.1936 16.6858 4.53934 16.0832 5.10033 15.757L31.0932 0.645104C31.6543 0.318901 32.3456 0.318901 32.9067 0.645104L58.8995 15.757C59.4605 16.0832 59.8063 16.6858 59.8063 17.3382V46.6619Z"
         fill="black"
-        fill-opacity="0.1"
+        fillOpacity="0.1"
       />
     </svg>
   );
diff --git a/js/web/src/components/ui/button.tsx b/js/web/src/components/ui/button.tsx
index e2ee79307..f19012ad6 100644
--- a/js/web/src/components/ui/button.tsx
+++ b/js/web/src/components/ui/button.tsx
@@ -17,6 +17,8 @@ const buttonVariants = cva(
           "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
         destructive:
           "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        success:
+          "bg-success/10 text-success hover:bg-success/20 focus-visible:border-success/40 focus-visible:ring-success/20 dark:bg-success/20 dark:hover:bg-success/30 dark:focus-visible:border-success/40 dark:focus-visible:ring-success/40",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/js/web/src/components/ui/dropdown-menu.tsx b/js/web/src/components/ui/dropdown-menu.tsx
index afc05a1e2..1c5232efe 100644
--- a/js/web/src/components/ui/dropdown-menu.tsx
+++ b/js/web/src/components/ui/dropdown-menu.tsx
@@ -91,7 +91,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-highlighted:bg-destructive/10 data-[variant=destructive]:data-highlighted:text-destructive dark:data-[variant=destructive]:data-highlighted:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className,
       )}
       {...props}
@@ -116,7 +116,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -165,7 +165,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       checked={checked}
@@ -206,7 +206,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-highlighted:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -245,7 +245,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-highlighted/dropdown-menu-item:text-accent-foreground",
         className,
       )}
       {...props}
diff --git a/js/web/src/hooks/use-chat-send.ts b/js/web/src/hooks/use-chat-send.ts
index 5cfa5a8a6..575284e61 100644
--- a/js/web/src/hooks/use-chat-send.ts
+++ b/js/web/src/hooks/use-chat-send.ts
@@ -2,7 +2,7 @@
 import { RichText } from "@atproto/api";
 import { reduceChat, type LivestreamStore } from "@streamplace/core";
 import { useCallback } from "react";
-import { type ChatMessageViewHydrated } from "streamplace";
+import { type ChatMessageViewHydrated, place } from "streamplace";
 import { useSession } from "../lib/session";
 
 const ALLOWED_FACET_TYPES = new Set([
@@ -26,6 +26,12 @@ export function useChatSend(store: LivestreamStore) {
         throw new Error("No active livestream to chat on");
       }
 
+      // Grab and clear reply context before composing the message.
+      const replyTo = store.getState().replyToMessage;
+      if (replyTo) {
+        store.setState((s) => ({ ...s, replyToMessage: null }));
+      }
+
       // Detect links and mentions so the message renders with rich
       // formatting for ourselves (optimistic) and for anyone who
       // receives the record afterwards.
@@ -45,20 +51,42 @@ export function useChatSend(store: LivestreamStore) {
 
       const localUri = `local-${Date.now()}`;
       const createdAt = new Date().toISOString();
+
+      const replyRef = replyTo
+        ? {
+            root: { uri: replyTo.uri, cid: replyTo.cid },
+            parent: { uri: replyTo.uri, cid: replyTo.cid },
+          }
+        : undefined;
+
       const localMessage: ChatMessageViewHydrated = {
-        uri: localUri,
+        uri: localUri as any,
         cid: "",
-        author: { did, handle: did },
+        author: { did: did as any, handle: did as any },
         record: {
           $type: "place.stream.chat.message",
           text: trimmed,
-          createdAt,
-          streamer: streamerDid,
+          createdAt: createdAt as any,
+          streamer: streamerDid as any,
+          ...(replyRef ? { reply: replyRef } : {}),
           ...(facets
             ? { facets: facets as ChatMessageViewHydrated["record"]["facets"] }
             : {}),
         },
-        indexedAt: createdAt,
+        indexedAt: createdAt as any,
+        ...(replyTo
+          ? {
+              replyTo: {
+                $type: "place.stream.chat.defs#messageView",
+                uri: replyTo.uri,
+                cid: replyTo.cid,
+                author: replyTo.author,
+                record: replyTo.record,
+                indexedAt: replyTo.indexedAt,
+                chatProfile: replyTo.chatProfile,
+              } as ChatMessageViewHydrated["replyTo"],
+            }
+          : {}),
       };
 
       store.setState((s) => reduceChat(s, [localMessage], [], []));
diff --git a/js/web/src/hooks/use-color-scheme.ts b/js/web/src/hooks/use-color-scheme.ts
index 434b44dd8..7dff5b26a 100644
--- a/js/web/src/hooks/use-color-scheme.ts
+++ b/js/web/src/hooks/use-color-scheme.ts
@@ -1,6 +1,45 @@
-// Color scheme stub. The app's useColorScheme returns "dark" on web
-// until the real light/dark toggle lands; we mirror that here.
-// Phase 7 polish is when this gets a real implementation.
-export function useColorScheme(): "dark" | "light" {
-  return "dark";
+// Color scheme provider. Reads persisted preference from localStorage,
+// listens to system prefers-color-scheme for "system" mode, and
+// syncs the `.dark` class on <html>.
+const STORAGE_KEY = "streamplace:theme";
+
+export type ThemePreference = "light" | "dark" | "system";
+
+function getSystemScheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+export function getStoredPreference(): ThemePreference {
+  if (typeof localStorage === "undefined") return "system";
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === "light" || stored === "dark" || stored === "system") {
+    return stored;
+  }
+  return "system";
+}
+
+export function getEffectiveScheme(
+  preference?: ThemePreference,
+): "light" | "dark" {
+  const pref = preference ?? getStoredPreference();
+  if (pref === "system") return getSystemScheme();
+  return pref;
+}
+
+export function setThemePreference(pref: ThemePreference) {
+  localStorage.setItem(STORAGE_KEY, pref);
+  syncThemeClass(pref);
+}
+
+export function syncThemeClass(preference?: ThemePreference) {
+  const scheme = getEffectiveScheme(preference);
+  const root = document.documentElement;
+  if (scheme === "dark") {
+    root.classList.add("dark");
+  } else {
+    root.classList.remove("dark");
+  }
 }
diff --git a/js/web/src/hooks/use-live-user.ts b/js/web/src/hooks/use-live-user.ts
deleted file mode 100644
index 0b7242d45..000000000
--- a/js/web/src/hooks/use-live-user.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// Composite selector that tells the caller when the authenticated
-// user is currently broadcasting. Mirrors js/app/hooks/useLiveUser.
-import { PlaceStreamSegment } from "streamplace";
-import { useMySegments } from "../lib/store/hooks";
-
-export function useLiveUser(): boolean {
-  const mySegments = useMySegments();
-  if (mySegments.length === 0) {
-    return false;
-  }
-  if (!PlaceStreamSegment.isRecord(mySegments[0].record)) {
-    return false;
-  }
-  const record = mySegments[0].record as PlaceStreamSegment.Record;
-  if (Date.now() - new Date(record.startTime).getTime() < 1000 * 10) {
-    return true;
-  }
-  return false;
-}
diff --git a/js/web/src/hooks/use-live-users.ts b/js/web/src/hooks/use-live-users.ts
new file mode 100644
index 000000000..e2a33ba05
--- /dev/null
+++ b/js/web/src/hooks/use-live-users.ts
@@ -0,0 +1,33 @@
+// Fetches live streams via React Query with automatic 30s polling.
+// Only active while a component that calls this hook is mounted,
+// so navigating away from the home screen stops the requests.
+import { useQuery } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { place } from "streamplace";
+import { useStore } from "../lib/store";
+
+export type LivestreamView = place.stream.livestream.LivestreamView;
+
+const REFETCH_INTERVAL = 30_000;
+
+export function useLiveUsers() {
+  const anonPDSAgent = useStore((state) => state.anonPDSAgent);
+  const streamplaceUrl = useStore((state) => state.url);
+
+  const getAgent = useCallback(async () => {
+    if (anonPDSAgent) return anonPDSAgent;
+    const { StreamplaceAgent } = await import("streamplace");
+    return new StreamplaceAgent(streamplaceUrl);
+  }, [anonPDSAgent, streamplaceUrl]);
+
+  return useQuery({
+    queryKey: ["liveUsers"],
+    queryFn: async (): Promise<LivestreamView[]> => {
+      const agent = await getAgent();
+      const result = await agent.client.call(place.stream.live.getLiveUsers);
+      return (result.streams ?? []) as LivestreamView[];
+    },
+    refetchInterval: REFETCH_INTERVAL,
+    refetchIntervalInBackground: false,
+  });
+}
diff --git a/js/web/src/hooks/use-platform.ts b/js/web/src/hooks/use-platform.ts
deleted file mode 100644
index d6e44ac44..000000000
--- a/js/web/src/hooks/use-platform.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-// Port of js/app/hooks/usePlatform.web.tsx. Returns an IsPlatform-shaped
-// object describing the runtime. For web, isNative is always false;
-// isWeb is always true; UA-derived flags drive isWebAndroid/isWebIOS/
-// isSafari/etc.
-//
-// Cached UA parse so the hook is cheap to call from many components.
-
-interface IsPlatform {
-  isNative: boolean;
-  isIOS: boolean;
-  isAndroid: boolean;
-  isWeb: boolean;
-  isWebAndroid: boolean;
-  isWebIOS: boolean;
-  isElectron: boolean;
-  isBrowser: boolean;
-  isSafari: boolean;
-  isChrome: boolean;
-  isFirefox: boolean;
-  isMobileSafari: boolean;
-  topSafeHeight: () => number;
-}
-
-interface UAResult {
-  browser: { name: string };
-  os: { name: string };
-}
-
-let cached: UAResult | null = null;
-
-function getUA(): UAResult {
-  if (!cached) {
-    const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
-    // Minimal UA parser — only the fields we actually use. Avoids the
-    // ua-parser-js dependency that the app's web variant pulls in.
-    cached = {
-      browser: {
-        name: /Edg\//.test(ua)
-          ? "Edge"
-          : /Chrome\//.test(ua)
-            ? "Chrome"
-            : /Firefox\//.test(ua)
-              ? "Firefox"
-              : /Safari\//.test(ua)
-                ? "Safari"
-                : "Unknown",
-      },
-      os: { name: "" },
-    };
-  }
-  return cached;
-}
-
-export default function usePlatform(): IsPlatform {
-  const ua = getUA();
-  const electron =
-    typeof window !== "undefined" && (window as any).SP_ELECTRON !== undefined;
-  const userAgent = typeof navigator !== "undefined" ? navigator.userAgent : "";
-  return {
-    isNative: false,
-    isIOS: false,
-    isAndroid: false,
-    isWeb: true,
-    isWebAndroid: /Android/.test(userAgent),
-    isWebIOS: /iPhone|iPad|iPod/.test(userAgent),
-    isElectron: electron,
-    isBrowser: !electron,
-    isSafari: ua.browser.name.includes("Safari"),
-    isChrome: ua.browser.name === "Chrome",
-    isFirefox: ua.browser.name === "Firefox",
-    isMobileSafari:
-      /Safari/.test(userAgent) && !/CriOS|FxiOS|EdgiOS/.test(userAgent),
-    topSafeHeight: () => 0,
-  };
-}
diff --git a/js/web/src/hooks/use-sidebar-control.ts b/js/web/src/hooks/use-sidebar-control.ts
deleted file mode 100644
index 88cc2074c..000000000
--- a/js/web/src/hooks/use-sidebar-control.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-// Sidebar control hook. The web's sidebar is a shadcn primitive, so
-// the reanimated animatedWidth from the app doesn't apply — the
-// component handles its own CSS transition. We still expose
-// isActive / isCollapsed / isHidden / targetWidth / toggle for
-// parity and so future sidebar-overlay work has a single source of
-// truth.
-import { useStore } from "../lib/store";
-import {
-  useIsSidebarCollapsed,
-  useIsSidebarHidden,
-  useSidebarTargetWidth,
-} from "../lib/store/hooks";
-import { useIsLargeScreen } from "./use-is-large-screen";
-
-export interface UseSidebarOutput {
-  isActive: boolean;
-  isCollapsed: boolean;
-  isHidden: boolean;
-  targetWidth: number;
-  toggle: () => void;
-}
-
-export function useSidebarControl(): UseSidebarOutput {
-  const isActive = useIsLargeScreen();
-  const isCollapsed = useIsSidebarCollapsed();
-  const isHidden = useIsSidebarHidden();
-  const targetWidth = useSidebarTargetWidth();
-  const toggleSidebar = useStore((state) => state.toggleSidebar);
-
-  return {
-    isActive,
-    isCollapsed,
-    isHidden,
-    targetWidth,
-    toggle: () => {
-      if (isActive) toggleSidebar();
-    },
-  };
-}
diff --git a/js/web/src/hooks/use-streamplace-node.ts b/js/web/src/hooks/use-streamplace-node.ts
deleted file mode 100644
index e743fa9dc..000000000
--- a/js/web/src/hooks/use-streamplace-node.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Reads the streamplace slice's URL through the small context that
-// StreamplaceProvider publishes. Mirrors js/app/hooks/useStreamplaceNode.
-// The web's slice already exposes `url` via useStore too, so callers
-// who don't need the context boundary can just use `useStreamplaceUrl`
-// from `../lib/store/hooks` directly.
-import { createContext } from "react";
-import { useStreamplaceUrl } from "../lib/store/hooks";
-
-export interface StreamplaceNode {
-  url: string;
-}
-
-export const StreamplaceContext = createContext<StreamplaceNode>({
-  url: "",
-});
-
-export default function useStreamplaceNode(): StreamplaceNode {
-  const url = useStreamplaceUrl();
-  return { url };
-}
diff --git a/js/web/src/hooks/use-video-list.ts b/js/web/src/hooks/use-video-list.ts
index 16f247fe4..1fa093f98 100644
--- a/js/web/src/hooks/use-video-list.ts
+++ b/js/web/src/hooks/use-video-list.ts
@@ -1,92 +1,67 @@
 // Fetches a page of place.stream.media.getVideoList and exposes
-// cursor-based infinite scroll. Port of js/app/hooks/useVideoList.ts.
+// cursor-based infinite scroll via @tanstack/react-query.
 // Pass a `repo` (DID or handle) to scope the list to a single
 // uploader; omit it for the global newest-first feed.
-import { useCallback, useEffect, useRef, useState } from "react";
-import { PlaceStreamMediaGetVideo } from "streamplace";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { place } from "streamplace";
 import { useStore } from "../lib/store";
 
-export type VideoView = PlaceStreamMediaGetVideo.VideoView;
+export type VideoView = place.stream.media.getVideo.VideoView;
 
 const PAGE_SIZE = 24;
 
+interface VideoPage {
+  videos: VideoView[];
+  cursor: string | undefined;
+}
+
 export function useVideoList(repo?: string) {
   const anonPDSAgent = useStore((state) => state.anonPDSAgent);
   const streamplaceUrl = useStore((state) => state.url);
-  const [videos, setVideos] = useState<VideoView[]>([]);
-  const [cursor, setCursor] = useState<string | undefined>(undefined);
-  const [hasMore, setHasMore] = useState(true);
-  const [loading, setLoading] = useState(true);
-  const [refreshing, setRefreshing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const inFlight = useRef(false);
-
-  // Lazily resolve the agent. Falls back to constructing one from
-  // the streamplace URL if BlueskyProvider hasn't yet run
-  // loadOAuthClient (which creates anonPDSAgent).
-  const agentRef = useRef(anonPDSAgent);
-  if (anonPDSAgent) agentRef.current = anonPDSAgent;
 
   const getAgent = useCallback(async () => {
-    if (agentRef.current) return agentRef.current;
+    if (anonPDSAgent) return anonPDSAgent;
     const { StreamplaceAgent } = await import("streamplace");
-    const agent = new StreamplaceAgent(streamplaceUrl);
-    agentRef.current = agent;
-    return agent;
-  }, [streamplaceUrl]);
+    return new StreamplaceAgent(streamplaceUrl);
+  }, [anonPDSAgent, streamplaceUrl]);
 
-  const fetchPage = useCallback(
-    async (nextCursor?: string, replace = false) => {
-      if (inFlight.current) return;
-      inFlight.current = true;
-      if (replace) {
-        setRefreshing(true);
-      } else {
-        setLoading(true);
-      }
-      setError(null);
-      try {
-        const agent = await getAgent();
-        const res = await agent.place.stream.media.getVideoList({
-          ...(repo ? { repo } : {}),
-          limit: PAGE_SIZE,
-          ...(nextCursor ? { cursor: nextCursor } : {}),
-        });
-        const page = (res.data.videos ?? []) as VideoView[];
-        setVideos((prev) => (replace ? page : [...prev, ...page]));
-        setCursor(res.data.cursor);
-        setHasMore(Boolean(res.data.cursor) && page.length > 0);
-      } catch (e: any) {
-        console.error("error fetching video list", e);
-        setError(e?.message ?? "failed to load videos");
-        setHasMore(false);
-      } finally {
-        inFlight.current = false;
-        setLoading(false);
-        setRefreshing(false);
+  const query = useInfiniteQuery({
+    queryKey: ["videoList", repo ?? null],
+    queryFn: async ({ pageParam }): Promise<VideoPage> => {
+      const agent = await getAgent();
+      const res = await agent.client.call(place.stream.media.getVideoList, {
+        ...(repo ? { repo } : {}),
+        limit: PAGE_SIZE,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      });
+      return {
+        videos: (res.videos ?? []) as VideoView[],
+        cursor: res.cursor as string | undefined,
+      };
+    },
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.cursor || lastPage.videos.length === 0) {
+        return undefined;
       }
+      return lastPage.cursor;
     },
-    [getAgent, repo],
-  );
-
-  // Initial load + reload when the agent or repo changes.
-  useEffect(() => {
-    setVideos([]);
-    setCursor(undefined);
-    setHasMore(true);
-    fetchPage(undefined, true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getAgent, repo]);
+  });
 
-  const loadMore = useCallback(() => {
-    if (loading || refreshing || !hasMore || !cursor) return;
-    fetchPage(cursor, false);
-  }, [loading, refreshing, hasMore, cursor, fetchPage]);
-
-  const refresh = useCallback(() => {
-    fetchPage(undefined, true);
-  }, [fetchPage]);
+  // Flatten pages into a single array.
+  const videos = useMemo(
+    () => query.data?.pages.flatMap((p) => p.videos) ?? [],
+    [query.data],
+  );
 
-  return { videos, loading, refreshing, error, hasMore, loadMore, refresh };
+  return {
+    videos,
+    loading: query.isLoading,
+    refreshing: query.isRefetching && !query.isFetchingNextPage,
+    error: query.error?.message ?? null,
+    hasMore: query.hasNextPage,
+    loadMore: query.fetchNextPage,
+    refresh: query.refetch,
+  };
 }
diff --git a/js/web/src/lib/providers/streamplace-provider.tsx b/js/web/src/lib/providers/streamplace-provider.tsx
index e0ab537c9..12df365a5 100644
--- a/js/web/src/lib/providers/streamplace-provider.tsx
+++ b/js/web/src/lib/providers/streamplace-provider.tsx
@@ -1,12 +1,9 @@
 // Streamplace server URL provider. Calls `initialize()` on mount to
-// hydrate the slice from storage, and publishes the URL via context
-// for `useStreamplaceNode` consumers. Also polls the live-users list
-// every 5s so the home feed is fresh without manual refresh.
+// hydrate the slice from storage.
+//
+// Live-users polling now lives in hooks/use-live-users.ts (React Query)
+// and is only active while the home route is mounted.
 import { ReactNode, useEffect } from "react";
-import {
-  StreamplaceContext,
-  StreamplaceNode,
-} from "../../hooks/use-streamplace-node";
 import { useStore } from "../store";
 import { useStreamplaceInitialized } from "../store/hooks";
 
@@ -17,7 +14,6 @@ export default function StreamplaceProvider({
 }) {
   const initialize = useStore((state) => state.initialize);
   const initialized = useStreamplaceInitialized();
-  const fetchLiveUsers = useStore((state) => state.fetchLiveUsers);
 
   useEffect(() => {
     if (!initialized) {
@@ -25,21 +21,5 @@ export default function StreamplaceProvider({
     }
   }, [initialized, initialize]);
 
-  // Poll live users every 5s. The slice's anonPDSAgent is lazily
-  // constructed by fetchLiveUsers if BlueskyProvider hasn't yet run
-  // loadOAuthClient, so the first fetch may create a throwaway agent.
-  useEffect(() => {
-    fetchLiveUsers();
-    const handle = setInterval(fetchLiveUsers, 5000);
-    return () => clearInterval(handle);
-  }, [fetchLiveUsers]);
-
-  const url = useStore((state) => state.url);
-  const value: StreamplaceNode = { url };
-
-  return (
-    <StreamplaceContext.Provider value={value}>
-      {children}
-    </StreamplaceContext.Provider>
-  );
+  return <>{children}</>;
 }
diff --git a/js/web/src/lib/store/hooks.ts b/js/web/src/lib/store/hooks.ts
index 7cdc1b5e7..0cb7e0a88 100644
--- a/js/web/src/lib/store/hooks.ts
+++ b/js/web/src/lib/store/hooks.ts
@@ -1,36 +1,14 @@
 // Selector hooks for the combined store. Mirrors js/app/store/hooks.ts.
 import { useStore } from "./index";
 
-// Base
-export const useHydrated = () => useStore((state) => state.hydrated);
-
-// Sidebar
-export const useIsSidebarCollapsed = () =>
-  useStore((state) => state.isCollapsed);
-export const useSidebarTargetWidth = () =>
-  useStore((state) => state.targetWidth);
-export const useIsSidebarLoaded = () => useStore((state) => state.isLoaded);
-export const useIsSidebarHidden = () => useStore((state) => state.isHidden);
-
 // Streamplace
 export const useStreamplaceUrl = () => useStore((state) => state.url);
 export const useStreamplaceInitialized = () =>
   useStore((state) => state.initialized);
-export const useUserMuted = () => useStore((state) => state.userMuted);
-export const useChatWarned = () => useStore((state) => state.chatWarned);
-export const useMySegments = () => useStore((state) => state.mySegments);
-export const useLiveUsers = () => useStore((state) => state.liveUsers);
-export const useLiveUsersLoading = () =>
-  useStore((state) => state.liveUsersLoading);
-export const useLiveUsersError = () =>
-  useStore((state) => state.liveUsersError);
 
 // Bluesky / OAuth
 export const useOAuthSession = () => useStore((state) => state.oauthSession);
-export const usePDS = () => useStore((state) => state.pds);
-export const useLogin = () => useStore((state) => state.loginState);
 export const useProfiles = () => useStore((state) => state.profiles);
-export const useStoredKey = () => useStore((state) => state.storedKey);
 export const useKeyRecords = () =>
   useStore((state) => state.streamKeysResponse);
 export const useServerSettings = () =>
@@ -60,29 +38,7 @@ export const useIsReady = () => {
   }
   return true;
 };
-export const useNewLivestream = () => useStore((state) => state.newLivestream);
-export const useChatProfile = () => useStore((state) => state.chatProfile);
 export const useCachedProfiles = () => useStore((state) => state.profileCache);
 
-// ContentMetadata
-export const useContentMetadata = () =>
-  useStore((state) => ({
-    creating: state.creating,
-    updating: state.updating,
-    error: state.error,
-    lastCreatedRecord: state.lastCreatedRecord,
-  }));
-export const useIsCreating = () => useStore((state) => state.creating);
-export const useIsUpdating = () => useStore((state) => state.updating);
-export const useContentMetadataError = () => useStore((state) => state.error);
-export const useLastCreatedRecord = () =>
-  useStore((state) => state.lastCreatedRecord);
-
-// Platform
-export const useNotificationToken = () =>
-  useStore((state) => state.notificationToken);
-export const useNotificationDestination = () =>
-  useStore((state) => state.notificationDestination);
-
 // PDS Agent (convenience — reads from bluesky slice)
 export const usePDSAgent = () => useStore((state) => state.pdsAgent);
diff --git a/js/web/src/lib/store/slices/blueskySlice.ts b/js/web/src/lib/store/slices/blueskySlice.ts
index 0e9ae625f..f297b44a8 100644
--- a/js/web/src/lib/store/slices/blueskySlice.ts
+++ b/js/web/src/lib/store/slices/blueskySlice.ts
@@ -524,12 +524,12 @@ export const createBlueskySlice: StateCreator<
     const state = get() as BlueskySlice;
     if (!state.pdsAgent) {
       set({ isDeletingKey: false });
-      return;
+      throw new Error("No agent");
     }
     const did = state.oauthSession?.did;
     if (!did) {
       set({ isDeletingKey: false });
-      return;
+      throw new Error("No DID");
     }
     try {
       await state.pdsAgent.com.atproto.repo.deleteRecord({
@@ -553,8 +553,8 @@ export const createBlueskySlice: StateCreator<
         },
       });
     } catch (error) {
-      console.error("deleteStreamKeyRecord rejected", error);
       set({ isDeletingKey: false });
+      throw error;
     }
   },
 
@@ -631,8 +631,14 @@ export const createBlueskySlice: StateCreator<
       } else {
         console.log("not a record", res.data.value);
       }
-    } catch (error) {
-      console.error("getChatProfileRecordFromPDS error", error);
+    } catch (error: any) {
+      set({
+        chatProfile: {
+          loading: false,
+          error: error?.message ?? "Failed to get chat profile",
+          profile: null,
+        },
+      });
     }
   },
 
@@ -694,122 +700,103 @@ export const createBlueskySlice: StateCreator<
   },
 
   followUser: async (subjectDID: string) => {
-    try {
-      const state = get() as BlueskySlice;
-      if (!state.pdsAgent) {
-        throw new Error("No agent");
-      }
-      const did = state.oauthSession?.did;
-      if (!did) {
-        throw new Error("No DID");
-      }
-      await state.pdsAgent.follow(subjectDID);
-      console.log("followUser fulfilled", { subjectDID });
-    } catch (error) {
-      console.error("followUser rejected", error);
+    const state = get() as BlueskySlice;
+    if (!state.pdsAgent) {
+      throw new Error("No agent");
+    }
+    const did = state.oauthSession?.did;
+    if (!did) {
+      throw new Error("No DID");
     }
+    await state.pdsAgent.follow(subjectDID);
   },
 
   unfollowUser: async (subjectDID: string, followUri?: string) => {
-    try {
-      const state = get() as BlueskySlice;
-      if (!state.pdsAgent) {
-        throw new Error("No agent");
-      }
-      const did = state.oauthSession?.did;
-      if (!did) {
-        throw new Error("No DID");
-      }
-
-      if (followUri) {
-        await state.pdsAgent.deleteFollow(followUri);
-      } else {
-        const streamplaceUrl = get().url;
-        const res = await fetch(
-          `${streamplaceUrl}/xrpc/place.stream.graph.getFollowingUser?subjectDID=${encodeURIComponent(subjectDID)}&userDID=${encodeURIComponent(did)}`,
-          {
-            credentials: "include",
-          },
-        );
-        const data = await res.json();
+    const state = get() as BlueskySlice;
+    if (!state.pdsAgent) {
+      throw new Error("No agent");
+    }
+    const did = state.oauthSession?.did;
+    if (!did) {
+      throw new Error("No DID");
+    }
 
-        if (!data.follow || !data.follow.uri) {
-          throw new Error("Follow record not found");
-        }
+    if (followUri) {
+      await state.pdsAgent.deleteFollow(followUri);
+    } else {
+      const streamplaceUrl = get().url;
+      const res = await fetch(
+        `${streamplaceUrl}/xrpc/place.stream.graph.getFollowingUser?subjectDID=${encodeURIComponent(subjectDID)}&userDID=${encodeURIComponent(did)}`,
+        {
+          credentials: "include",
+        },
+      );
+      const data = await res.json();
 
-        await state.pdsAgent.deleteFollow(data.follow.uri);
+      if (!data.follow || !data.follow.uri) {
+        throw new Error("Follow record not found");
       }
 
-      console.log("unfollowUser fulfilled", { subjectDID });
-    } catch (error) {
-      console.error("unfollowUser rejected", error);
+      await state.pdsAgent.deleteFollow(data.follow.uri);
     }
   },
 
   getServerSettingsFromPDS: async () => {
-    try {
-      const state = get() as BlueskySlice;
-      const did = state.oauthSession?.did;
-      if (!did) {
-        throw new Error("No DID");
-      }
-      if (!state.pdsAgent) {
-        throw new Error("No agent");
-      }
-      const streamplaceUrl = get().url;
-      const u = new URL(streamplaceUrl);
-      const res = await state.pdsAgent.com.atproto.repo.getRecord({
-        repo: did,
-        collection: "place.stream.server.settings",
-        rkey: u.host,
-      });
-      if (!res.success) {
-        throw new Error("Failed to get chat profile record");
-      }
+    const state = get() as BlueskySlice;
+    const did = state.oauthSession?.did;
+    if (!did) {
+      throw new Error("No DID");
+    }
+    if (!state.pdsAgent) {
+      throw new Error("No agent");
+    }
+    const streamplaceUrl = get().url;
+    const u = new URL(streamplaceUrl);
+    const res = await state.pdsAgent.com.atproto.repo.getRecord({
+      repo: did,
+      collection: "place.stream.server.settings",
+      rkey: u.host,
+    });
+    if (!res.success) {
+      throw new Error("Failed to get server settings record");
+    }
 
-      if (PlaceStreamServerSettings.isRecord(res.data.value)) {
-        set({
-          serverSettings: res.data.value as PlaceStreamServerSettings.Record,
-        });
-      } else {
-        console.log("not a record", res.data.value);
-      }
-    } catch (error) {
-      console.error("getServerSettingsFromPDS rejected", error);
+    if (PlaceStreamServerSettings.isRecord(res.data.value)) {
+      set({
+        serverSettings: res.data.value as PlaceStreamServerSettings.Record,
+      });
+    } else {
+      console.log("not a record", res.data.value);
     }
   },
 
   createServerSettingsRecord: async (debugRecording: boolean) => {
-    try {
-      const state = get() as BlueskySlice;
-      if (!state.pdsAgent) {
-        throw new Error("No agent");
-      }
-      const did = state.oauthSession?.did;
-      if (!did) {
-        throw new Error("No DID");
-      }
-      const streamplaceUrl = get().url;
-      const u = new URL(streamplaceUrl);
-      const serverSettings: PlaceStreamServerSettings.Record = {
-        $type: "place.stream.server.settings",
-        debugRecording: debugRecording,
-      };
-
-      const res = await state.pdsAgent.com.atproto.repo.putRecord({
-        repo: did,
-        collection: "place.stream.server.settings",
-        record: serverSettings,
-        rkey: u.host,
-      });
-      if (!res.success) {
-        throw new Error("Failed to create server settings record");
-      }
-      set({
-        serverSettings: serverSettings,
-      });
-    } catch (error) {
-      console.error("createServerSettingsRecord rejected", error);
+    const state = get() as BlueskySlice;
+    if (!state.pdsAgent) {
+      throw new Error("No agent");
     }
+    const did = state.oauthSession?.did;
+    if (!did) {
+      throw new Error("No DID");
+    }
+    const streamplaceUrl = get().url;
+    const u = new URL(streamplaceUrl);
+    const serverSettings: PlaceStreamServerSettings.Record = {
+      $type: "place.stream.server.settings",
+      debugRecording: debugRecording,
+    };
+
+    const res = await state.pdsAgent.com.atproto.repo.putRecord({
+      repo: did,
+      collection: "place.stream.server.settings",
+      record: serverSettings,
+      rkey: u.host,
+    });
+    if (!res.success) {
+      throw new Error("Failed to create server settings record");
+    }
+    set({
+      serverSettings: serverSettings,
+    });
   },
 });
diff --git a/js/web/src/lib/store/slices/contentMetadataSlice.ts b/js/web/src/lib/store/slices/contentMetadataSlice.ts
index 0814575fe..1491ab937 100644
--- a/js/web/src/lib/store/slices/contentMetadataSlice.ts
+++ b/js/web/src/lib/store/slices/contentMetadataSlice.ts
@@ -8,7 +8,6 @@
 import { StateCreator } from "zustand";
 import { getPDSServiceEndpoint, resolveDIDDocument } from "../../did";
 import { AppStore } from "../index";
-import { BlueskySlice } from "./blueskySlice";
 
 export interface ContentMetadataSlice {
   creating: boolean;
@@ -65,15 +64,12 @@ export const createContentMetadataSlice: StateCreator<
   }) => {
     set({ creating: true, error: null });
     try {
-      // need access to bluesky slice - combined store provides it
-      const state = get() as any;
-      const bluesky: BlueskySlice = state;
-
-      if (!bluesky.pdsAgent) {
+      const { pdsAgent, oauthSession } = get();
+      if (!pdsAgent) {
         throw new Error("No agent");
       }
 
-      const did = bluesky.oauthSession?.did;
+      const did = oauthSession?.did;
       if (!did) {
         throw new Error("No DID");
       }
@@ -91,7 +87,7 @@ export const createContentMetadataSlice: StateCreator<
           }),
       };
 
-      const result = await bluesky.pdsAgent.com.atproto.repo.createRecord({
+      const result = await pdsAgent.com.atproto.repo.createRecord({
         repo: did,
         collection: "place.stream.metadata.configuration",
         rkey: "self",
@@ -127,14 +123,12 @@ export const createContentMetadataSlice: StateCreator<
   }) => {
     set({ updating: true, error: null });
     try {
-      const state = get() as any;
-      const bluesky: BlueskySlice = state;
-
-      if (!bluesky.pdsAgent) {
+      const { pdsAgent, oauthSession } = get();
+      if (!pdsAgent) {
         throw new Error("No agent");
       }
 
-      const did = bluesky.oauthSession?.did;
+      const did = oauthSession?.did;
       if (!did) {
         throw new Error("No DID");
       }
@@ -153,7 +147,7 @@ export const createContentMetadataSlice: StateCreator<
           }),
       };
 
-      const result = await bluesky.pdsAgent.com.atproto.repo.putRecord({
+      const result = await pdsAgent.com.atproto.repo.putRecord({
         repo: did,
         collection: "place.stream.metadata.configuration",
         rkey: rkey || "self",
@@ -182,14 +176,12 @@ export const createContentMetadataSlice: StateCreator<
   getContentMetadata: async ({ userDid, rkey = "self" } = {}) => {
     set({ error: null });
     try {
-      const state = get() as any;
-      const bluesky: BlueskySlice = state;
-
-      if (!bluesky.pdsAgent) {
+      const { pdsAgent, oauthSession } = get();
+      if (!pdsAgent) {
         throw new Error("No agent");
       }
 
-      const targetDid = userDid || bluesky.oauthSession?.did;
+      const targetDid = userDid || oauthSession?.did;
       if (!targetDid) {
         throw new Error("No DID provided or user not authenticated");
       }
@@ -203,8 +195,8 @@ export const createContentMetadataSlice: StateCreator<
           // best-effort: fall through to default agent
         }
 
-        let agent = bluesky.pdsAgent;
-        if (targetPDS && targetPDS !== (bluesky.pdsAgent as any)?.host) {
+        let agent = pdsAgent;
+        if (targetPDS && targetPDS !== (pdsAgent as any)?.host) {
           const { StreamplaceAgent } = await import("streamplace");
           agent = new StreamplaceAgent(targetPDS) as any;
         }
diff --git a/js/web/src/lib/store/slices/streamplaceSlice.ts b/js/web/src/lib/store/slices/streamplaceSlice.ts
index 604591d9b..0450fbbc2 100644
--- a/js/web/src/lib/store/slices/streamplaceSlice.ts
+++ b/js/web/src/lib/store/slices/streamplaceSlice.ts
@@ -1,9 +1,11 @@
-// Streamplace server URL, mute flag, chat-warning state, live-users list.
+// Streamplace server URL, mute flag, chat-warning state.
 // Mirrors js/app/store/slices/streamplaceSlice.ts.
-import type { PlaceStreamLivestream, PlaceStreamSegment } from "streamplace";
+//
+// Live-users polling now lives in hooks/use-live-users.ts (React Query).
 import { StateCreator } from "zustand";
 import { storage } from "../../storage";
 import { getStreamplaceUrl } from "../../streamplace-url";
+import { AppStore } from "../index";
 
 // Build-time env override. Empty string when not set; the slice falls back
 // to `getStreamplaceUrl()` (env > window.location.origin) at runtime.
@@ -27,30 +29,16 @@ const USER_MUTED_KEY = "streamplaceUserMuted";
 const URL_KEY = "streamplaceUrl";
 const CHAT_WARNING_KEY = "streamplaceChatWarning2";
 
-export interface Identity {
-  id: string;
-  handle?: string;
-  did?: string;
-}
-
 export interface StreamplaceSlice {
   url: string;
-  identity: Identity | null;
   initialized: boolean;
   userMuted: boolean | null;
   chatWarned: boolean;
-  mySegments: PlaceStreamSegment.SegmentView[];
-  liveUsers: PlaceStreamLivestream.LivestreamView[] | null;
-  liveUsersLoading: boolean;
-  liveUsersError: string | null;
   // actions
   initialize: () => Promise<void>;
   setURL: (url: string) => void;
   userMute: (muted: boolean) => void;
   chatWarn: (warned: boolean) => void;
-  getIdentity: () => Promise<void>;
-  fetchLiveUsers: () => Promise<void>;
-  pollMySegments: () => Promise<void>;
   getRecommendations: (userDID: string) => Promise<{
     recommendations: Array<{
       $type: string;
@@ -62,10 +50,12 @@ export interface StreamplaceSlice {
   }>;
 }
 
-export const createStreamplaceSlice: StateCreator<StreamplaceSlice> = (
-  set,
-  get,
-) => ({
+export const createStreamplaceSlice: StateCreator<
+  AppStore,
+  [],
+  [],
+  StreamplaceSlice
+> = (set, get) => ({
   // Initial value resolves at module load. `initialize()` re-reads from
   // storage and may overwrite this with the persisted override.
   url: (() => {
@@ -75,14 +65,9 @@ export const createStreamplaceSlice: StateCreator<StreamplaceSlice> = (
       return DEFAULT_URL;
     }
   })(),
-  identity: null,
   initialized: false,
   userMuted: null,
   chatWarned: false,
-  mySegments: [],
-  liveUsers: null,
-  liveUsersLoading: false,
-  liveUsersError: null,
   initialize: async () => {
     let [url, userMutedStr, chatWarningStr] = await Promise.all([
       storage.getItem(URL_KEY),
@@ -126,62 +111,12 @@ export const createStreamplaceSlice: StateCreator<StreamplaceSlice> = (
     });
     set({ chatWarned: warned });
   },
-  getIdentity: async () => {
-    const state = get() as StreamplaceSlice;
-    const res = await fetch(`${state.url}/api/identity`);
-    const identity = await res.json();
-    set({ identity });
-  },
-  fetchLiveUsers: async () => {
-    set({ liveUsersLoading: true, liveUsersError: null });
-    try {
-      const state = get() as any;
-      // anonPDSAgent is created by loadOAuthClient — works even when
-      // not logged in. Falls back to constructing one from url if not
-      // yet available.
-      let agent = state.anonPDSAgent;
-      if (!agent) {
-        const { StreamplaceAgent } = await import("streamplace");
-        agent = new StreamplaceAgent(state.url);
-      }
-      const result = await agent.place.stream.live.getLiveUsers();
-      set({
-        liveUsers: result.data.streams ?? [],
-        liveUsersLoading: false,
-        liveUsersError: null,
-      });
-    } catch (err: any) {
-      set({
-        liveUsersLoading: false,
-        liveUsersError: err?.message ?? "Failed to fetch live users",
-      });
-    }
-  },
-  pollMySegments: async () => {
-    try {
-      // need access to bluesky slice - will handle in combined store
-      const state = get() as any;
-      if (!state.pdsAgent) {
-        return;
-      }
-      if (!state.oauthSession) {
-        return;
-      }
-      const result = await state.pdsAgent.place.stream.live.getSegments({
-        userDID: state.oauthSession?.did ?? "",
-      });
-      set({ mySegments: result.data.segments ?? [] });
-    } catch {
-      // silently fail
-    }
-  },
   getRecommendations: async (userDID: string) => {
-    // need access to bluesky slice - will handle in combined store
-    const state = get() as any;
-    if (!state.pdsAgent) {
+    const { pdsAgent } = get();
+    if (!pdsAgent) {
       throw new Error("no pdsAgent");
     }
-    const result = await state.pdsAgent.place.stream.live.getRecommendations({
+    const result = await pdsAgent.place.stream.live.getRecommendations({
       userDID,
     });
     return result.data;
diff --git a/js/web/src/lib/streamplace-url.ts b/js/web/src/lib/streamplace-url.ts
index e0dd89106..77bb1eaf9 100644
--- a/js/web/src/lib/streamplace-url.ts
+++ b/js/web/src/lib/streamplace-url.ts
@@ -8,8 +8,7 @@
 //
 // This module is intentionally tiny and synchronous. Anything that
 // wants the URL to be reactive (auto-update without a reload) should
-// read from the slice via useStreamplaceUrl() or useStreamplaceNode()
-// instead.
+// read from the slice via useStreamplaceUrl() instead.
 
 const ENV_KEY = "VITE_STREAMPLACE_URL";
 const SLICE_URL_KEY = "streamplaceUrl";
diff --git a/js/web/src/main.tsx b/js/web/src/main.tsx
index e4e4195e1..408e1d842 100644
--- a/js/web/src/main.tsx
+++ b/js/web/src/main.tsx
@@ -1,7 +1,10 @@
+import * as Sentry from "@sentry/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider, createRouter } from "@tanstack/react-router";
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { Toaster } from "./components/ui/sonner";
+import { syncThemeClass } from "./hooks/use-color-scheme";
 import "./lib/i18n";
 import BlueskyProvider from "./lib/providers/bluesky-provider";
 import StreamplaceProvider from "./lib/providers/streamplace-provider";
@@ -9,6 +12,29 @@ import { SessionProvider } from "./lib/session";
 import { routeTree } from "./routeTree.gen";
 import "./styles.css";
 
+// Initialize Sentry if DSN is provided.
+const SENTRY_DSN = import.meta.env["VITE_SENTRY_DSN"] as string | undefined;
+if (SENTRY_DSN) {
+  Sentry.init({
+    dsn: SENTRY_DSN,
+    environment: import.meta.env.MODE,
+    tracesSampleRate: 0.1,
+  });
+}
+
+// Sync theme class before first paint to avoid flash.
+syncThemeClass();
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 10_000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
 const router = createRouter({
   routeTree,
   defaultPreload: "intent",
@@ -28,13 +54,15 @@ if (!rootEl) {
 
 createRoot(rootEl).render(
   <StrictMode>
-    <StreamplaceProvider>
-      <BlueskyProvider>
-        <SessionProvider>
-          <RouterProvider router={router} />
-        </SessionProvider>
-      </BlueskyProvider>
-    </StreamplaceProvider>
+    <QueryClientProvider client={queryClient}>
+      <StreamplaceProvider>
+        <BlueskyProvider>
+          <SessionProvider>
+            <RouterProvider router={router} />
+          </SessionProvider>
+        </BlueskyProvider>
+      </StreamplaceProvider>
+    </QueryClientProvider>
     <Toaster />
   </StrictMode>,
 );
diff --git a/js/web/src/routeTree.gen.ts b/js/web/src/routeTree.gen.ts
index 89b0ba3e5..a9557135c 100644
--- a/js/web/src/routeTree.gen.ts
+++ b/js/web/src/routeTree.gen.ts
@@ -11,6 +11,7 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as VideosRouteImport } from './routes/videos'
 import { Route as SettingsRouteImport } from './routes/settings'
+import { Route as SearchRouteImport } from './routes/search'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as SettingsIndexRouteImport } from './routes/settings/index'
@@ -29,6 +30,7 @@ import { Route as SettingsBackupRouteImport } from './routes/settings/backup'
 import { Route as SettingsAdvancedRouteImport } from './routes/settings/advanced'
 import { Route as SettingsAccountRouteImport } from './routes/settings/account'
 import { Route as SettingsAboutRouteImport } from './routes/settings/about'
+import { Route as ChatPopoutUserRouteImport } from './routes/chat-popout.$user'
 import { Route as UserVideoTidRouteImport } from './routes/$user/video/$tid'
 
 const VideosRoute = VideosRouteImport.update({
@@ -41,6 +43,11 @@ const SettingsRoute = SettingsRouteImport.update({
   path: '/settings',
   getParentRoute: () => rootRouteImport,
 } as any)
+const SearchRoute = SearchRouteImport.update({
+  id: '/search',
+  path: '/search',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LoginRoute = LoginRouteImport.update({
   id: '/login',
   path: '/login',
@@ -131,6 +138,11 @@ const SettingsAboutRoute = SettingsAboutRouteImport.update({
   path: '/about',
   getParentRoute: () => SettingsRoute,
 } as any)
+const ChatPopoutUserRoute = ChatPopoutUserRouteImport.update({
+  id: '/chat-popout/$user',
+  path: '/chat-popout/$user',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const UserVideoTidRoute = UserVideoTidRouteImport.update({
   id: '/$user/video/$tid',
   path: '/$user/video/$tid',
@@ -140,8 +152,10 @@ const UserVideoTidRoute = UserVideoTidRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/login': typeof LoginRoute
+  '/search': typeof SearchRoute
   '/settings': typeof SettingsRouteWithChildren
   '/videos': typeof VideosRoute
+  '/chat-popout/$user': typeof ChatPopoutUserRoute
   '/settings/about': typeof SettingsAboutRoute
   '/settings/account': typeof SettingsAccountRoute
   '/settings/advanced': typeof SettingsAdvancedRoute
@@ -163,7 +177,9 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/login': typeof LoginRoute
+  '/search': typeof SearchRoute
   '/videos': typeof VideosRoute
+  '/chat-popout/$user': typeof ChatPopoutUserRoute
   '/settings/about': typeof SettingsAboutRoute
   '/settings/account': typeof SettingsAccountRoute
   '/settings/advanced': typeof SettingsAdvancedRoute
@@ -186,8 +202,10 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/login': typeof LoginRoute
+  '/search': typeof SearchRoute
   '/settings': typeof SettingsRouteWithChildren
   '/videos': typeof VideosRoute
+  '/chat-popout/$user': typeof ChatPopoutUserRoute
   '/settings/about': typeof SettingsAboutRoute
   '/settings/account': typeof SettingsAccountRoute
   '/settings/advanced': typeof SettingsAdvancedRoute
@@ -211,8 +229,10 @@ export interface FileRouteTypes {
   fullPaths:
     | '/'
     | '/login'
+    | '/search'
     | '/settings'
     | '/videos'
+    | '/chat-popout/$user'
     | '/settings/about'
     | '/settings/account'
     | '/settings/advanced'
@@ -234,7 +254,9 @@ export interface FileRouteTypes {
   to:
     | '/'
     | '/login'
+    | '/search'
     | '/videos'
+    | '/chat-popout/$user'
     | '/settings/about'
     | '/settings/account'
     | '/settings/advanced'
@@ -256,8 +278,10 @@ export interface FileRouteTypes {
     | '__root__'
     | '/'
     | '/login'
+    | '/search'
     | '/settings'
     | '/videos'
+    | '/chat-popout/$user'
     | '/settings/about'
     | '/settings/account'
     | '/settings/advanced'
@@ -280,8 +304,10 @@ export interface FileRouteTypes {
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   LoginRoute: typeof LoginRoute
+  SearchRoute: typeof SearchRoute
   SettingsRoute: typeof SettingsRouteWithChildren
   VideosRoute: typeof VideosRoute
+  ChatPopoutUserRoute: typeof ChatPopoutUserRoute
   UserIndexRoute: typeof UserIndexRoute
   UserVideoTidRoute: typeof UserVideoTidRoute
 }
@@ -302,6 +328,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/search': {
+      id: '/search'
+      path: '/search'
+      fullPath: '/search'
+      preLoaderRoute: typeof SearchRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -428,6 +461,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsAboutRouteImport
       parentRoute: typeof SettingsRoute
     }
+    '/chat-popout/$user': {
+      id: '/chat-popout/$user'
+      path: '/chat-popout/$user'
+      fullPath: '/chat-popout/$user'
+      preLoaderRoute: typeof ChatPopoutUserRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/$user/video/$tid': {
       id: '/$user/video/$tid'
       path: '/$user/video/$tid'
@@ -481,8 +521,10 @@ const SettingsRouteWithChildren = SettingsRoute._addFileChildren(
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   LoginRoute: LoginRoute,
+  SearchRoute: SearchRoute,
   SettingsRoute: SettingsRouteWithChildren,
   VideosRoute: VideosRoute,
+  ChatPopoutUserRoute: ChatPopoutUserRoute,
   UserIndexRoute: UserIndexRoute,
   UserVideoTidRoute: UserVideoTidRoute,
 }
diff --git a/js/web/src/routes/$user/index.tsx b/js/web/src/routes/$user/index.tsx
index f128548c7..8af6e39b4 100644
--- a/js/web/src/routes/$user/index.tsx
+++ b/js/web/src/routes/$user/index.tsx
@@ -35,6 +35,7 @@ function StreamPage() {
     let reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
     let currentConnectId = 0;
     let mounted = true;
+    let flushTimer: ReturnType<typeof setTimeout> | null = null;
 
     const scheduleReconnect = () => {
       if (!mounted || reconnectTimeout) return;
@@ -53,12 +54,23 @@ function StreamPage() {
 
       ws.onopen = () => {};
 
+      let messageBuffer: any[] = [];
+      const flush = () => {
+        flushTimer = null;
+        const batch = messageBuffer;
+        messageBuffer = [];
+        store.current?.setState((s) => handleWebSocketMessages(s, batch));
+      };
+
       ws.onmessage = (event) => {
         if (connectId !== currentConnectId) return;
         try {
           const messages = JSON.parse(event.data);
           const list = Array.isArray(messages) ? messages : [messages];
-          store.current?.setState((s) => handleWebSocketMessages(s, list));
+          messageBuffer.push(...list);
+          if (!flushTimer) {
+            flushTimer = setTimeout(flush, 0);
+          }
         } catch {}
       };
 
@@ -80,6 +92,7 @@ function StreamPage() {
 
     return () => {
       mounted = false;
+      if (flushTimer) clearTimeout(flushTimer);
       if (reconnectTimeout) clearTimeout(reconnectTimeout);
       ws?.close();
     };
diff --git a/js/web/src/routes/$user/video/$tid.tsx b/js/web/src/routes/$user/video/$tid.tsx
index b7e1bb769..822f35312 100644
--- a/js/web/src/routes/$user/video/$tid.tsx
+++ b/js/web/src/routes/$user/video/$tid.tsx
@@ -3,7 +3,8 @@ import { useVideoRecord } from "@/hooks/use-video-record";
 import { getStreamplaceUrl } from "@/lib/streamplace-url";
 import { formatDuration } from "@/lib/video";
 import { createFileRoute } from "@tanstack/react-router";
-import { useMemo } from "react";
+import { Download } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
 
 export const Route = createFileRoute("/$user/video/$tid")({
   component: VodPage,
@@ -12,6 +13,7 @@ export const Route = createFileRoute("/$user/video/$tid")({
 function VodPage() {
   const { user, tid } = Route.useParams();
   const { record, author, loading, error } = useVideoRecord(user, tid);
+  const [downloading, setDownloading] = useState(false);
 
   const { playlistUrl, thumbnailUrl } = useMemo(() => {
     const base = getStreamplaceUrl();
@@ -23,6 +25,61 @@ function VodPage() {
   }, [user, tid]);
 
   const title = record?.title || "Untitled";
+
+  const handleDownload = useCallback(async () => {
+    setDownloading(true);
+    try {
+      // Fetch the HLS playlist and extract segment URLs.
+      const res = await fetch(playlistUrl);
+      const playlistText = await res.text();
+      const lines = playlistText.split("\n");
+      const segmentUrls: string[] = [];
+      const playlistBase = playlistUrl.split("?")[0];
+      const baseUrl = playlistBase.substring(0, playlistBase.lastIndexOf("/"));
+
+      for (const line of lines) {
+        const trimmed = line.trim();
+        if (!trimmed || trimmed.startsWith("#")) continue;
+        // Segment URLs may be absolute or relative.
+        if (trimmed.startsWith("http")) {
+          segmentUrls.push(trimmed);
+        } else {
+          segmentUrls.push(`${baseUrl}/${trimmed}`);
+        }
+      }
+
+      if (segmentUrls.length === 0) {
+        // Fallback: download the playlist file itself.
+        const blob = new Blob([playlistText], {
+          type: "application/x-mpegURL",
+        });
+        const a = document.createElement("a");
+        a.href = URL.createObjectURL(blob);
+        a.download = `${title}.m3u8`;
+        a.click();
+        URL.revokeObjectURL(a.href);
+        return;
+      }
+
+      // Download all segments and concatenate.
+      const chunks: ArrayBuffer[] = [];
+      for (const url of segmentUrls) {
+        const segRes = await fetch(url);
+        chunks.push(await segRes.arrayBuffer());
+      }
+
+      const blob = new Blob(chunks, { type: "video/mp4" });
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = `${title}.mp4`;
+      a.click();
+      URL.revokeObjectURL(a.href);
+    } catch (e) {
+      console.error("Download failed", e);
+    } finally {
+      setDownloading(false);
+    }
+  }, [playlistUrl, title]);
   const description = record?.description;
   const createdAt = record?.createdAt
     ? new Date(record.createdAt).toLocaleDateString(undefined, {
@@ -31,7 +88,9 @@ function VodPage() {
         day: "numeric",
       })
     : null;
-  const duration = record?.durationMs ? formatDuration(record.durationMs) : null;
+  const duration = record?.durationMs
+    ? formatDuration(record.durationMs)
+    : null;
 
   return (
     <div className="flex flex-col gap-3 h-full">
@@ -49,9 +108,20 @@ function VodPage() {
           <div className="mt-3 space-y-3 mx-3">
             <div className="flex items-start gap-3">
               <div className="flex-1 min-w-0">
-                <h2 className="font-display font-semibold text-[var(--color-fg)] line-clamp-2">
-                  {loading ? "Loading..." : title}
-                </h2>
+                <div className="flex items-start gap-2">
+                  <h2 className="flex-1 font-display font-semibold text-[var(--color-fg)] line-clamp-2">
+                    {loading ? "Loading..." : title}
+                  </h2>
+                  <button
+                    type="button"
+                    onClick={handleDownload}
+                    disabled={downloading}
+                    className="flex-shrink-0 p-2 rounded-md border border-[var(--color-border)] hover:border-[var(--color-border-strong)] text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] transition-colors disabled:opacity-50"
+                    title="Download video"
+                  >
+                    <Download className="w-4 h-4" />
+                  </button>
+                </div>
 
                 <div className="flex items-center gap-2 mt-1 text-sm text-[var(--color-fg-muted)]">
                   <span className="truncate">
@@ -60,9 +130,7 @@ function VodPage() {
                   {(author?.displayName || author?.handle) && (
                     <span className="text-[var(--color-fg-subtle)]">@</span>
                   )}
-                  <span className="truncate">
-                    {author?.handle || user}
-                  </span>
+                  <span className="truncate">{author?.handle || user}</span>
                 </div>
 
                 {duration && (
diff --git a/js/web/src/routes/__root.tsx b/js/web/src/routes/__root.tsx
index 384f5043b..71df09bba 100644
--- a/js/web/src/routes/__root.tsx
+++ b/js/web/src/routes/__root.tsx
@@ -1,35 +1,134 @@
 import Header from "@/components/header";
 import SidebarComponent from "@/components/sidebar";
-import { createRootRoute, Outlet } from "@tanstack/react-router";
-import { useState } from "react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { FullscreenProvider } from "@/contexts/fullscreen-context";
+import {
+  createRootRoute,
+  Outlet,
+  useRouterState,
+} from "@tanstack/react-router";
+import { Component, type ReactNode, useEffect, useState } from "react";
 import { SidebarInset, SidebarProvider } from "../components/ui/sidebar";
+import { getStoredPreference, syncThemeClass } from "../hooks/use-color-scheme";
+
+/** Routes that should render without sidebar/header chrome. */
+const POPOUT_PREFIXES = ["/chat-popout/"];
 
 export const Route = createRootRoute({
   component: RootLayout,
+  pendingComponent: RouteLoadingSkeleton,
 });
 
+// --- Error boundary ---
+
+interface ErrorBoundaryState {
+  error: Error | null;
+}
+
+class ErrorBoundary extends Component<
+  { children: ReactNode },
+  ErrorBoundaryState
+> {
+  state: ErrorBoundaryState = { error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: React.ErrorInfo) {
+    console.error("Unhandled render error:", error, info);
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div className="flex flex-col items-center justify-center min-h-svh px-6 text-center">
+          <h1 className="text-2xl font-semibold font-display mb-2">
+            Something went wrong
+          </h1>
+          <p className="text-[var(--color-fg-muted)] mb-6 max-w-md">
+            {this.state.error.message || "An unexpected error occurred."}
+          </p>
+          <button
+            type="button"
+            onClick={() => this.setState({ error: null })}
+            className="h-10 px-4 rounded-md bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-[var(--color-accent-fg)] font-medium transition-colors"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+// --- Root layout ---
+
+function RouteLoadingSkeleton() {
+  return (
+    <div className="flex items-center justify-center min-h-svh">
+      <div className="w-6 h-6 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin" />
+    </div>
+  );
+}
+
 function RootLayout() {
+  const pathname = useRouterState({
+    select: (s) => s.resolvedLocation?.pathname ?? "",
+  });
+  const isPopout = POPOUT_PREFIXES.some((p) => pathname.startsWith(p));
+
   const [open, setOpen] = useState(() => {
     if (typeof localStorage === "undefined") return true;
     return localStorage.getItem("streamplace:nav-open") !== "false";
   });
 
-  return (
-    <SidebarProvider
-      open={open}
-      onOpenChange={(o) => {
-        setOpen(o);
-        localStorage.setItem("streamplace:nav-open", String(o));
-      }}
-      className="h-svh"
-    >
-      <SidebarComponent />
-      <SidebarInset>
-        <Header />
-        <div className="flex flex-1 flex-col min-h-0 mx-auto w-full">
+  // Re-sync theme when system preference changes (only matters if pref is "system").
+  useEffect(() => {
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      if (getStoredPreference() === "system") {
+        syncThemeClass();
+      }
+    };
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  // Popout routes get no chrome — just providers and the outlet.
+  if (isPopout) {
+    return (
+      <ErrorBoundary>
+        <TooltipProvider>
           <Outlet />
-        </div>
-      </SidebarInset>
-    </SidebarProvider>
+        </TooltipProvider>
+      </ErrorBoundary>
+    );
+  }
+
+  return (
+    <ErrorBoundary>
+      <TooltipProvider>
+        <FullscreenProvider>
+          <SidebarProvider
+            open={open}
+            onOpenChange={(o) => {
+              setOpen(o);
+              localStorage.setItem("streamplace:nav-open", String(o));
+            }}
+            className="h-svh"
+          >
+            <SidebarComponent />
+            <SidebarInset>
+              <Header />
+              <div className="flex flex-1 flex-col min-h-0 mx-auto w-full">
+                <Outlet />
+              </div>
+            </SidebarInset>
+          </SidebarProvider>
+        </FullscreenProvider>
+      </TooltipProvider>
+    </ErrorBoundary>
   );
 }
diff --git a/js/web/src/routes/chat-popout.$user.tsx b/js/web/src/routes/chat-popout.$user.tsx
new file mode 100644
index 000000000..d1fc8a37c
--- /dev/null
+++ b/js/web/src/routes/chat-popout.$user.tsx
@@ -0,0 +1,183 @@
+// Standalone chat popout window. Minimal chrome — just the chat panel
+// and input, no player, no sidebar, no header.
+//
+// Query parameters (useful for OBS browser sources):
+//   reverse=true     Show newest messages at top
+//   reverse=false    Show newest messages at bottom (default)
+//   hideAfter=N      Hide the chat after N seconds
+//   hideChatBox=true Hide the chat input (read-only)
+//   hidePinnedComments=true  Hide pinned comment notifications
+import { ChatInput } from "@/components/stream/chat-input";
+import { ChatPanel } from "@/components/stream/chat-panel";
+import { StreamNotifications } from "@/components/stream/stream-notifications";
+import { getStreamplaceUrl } from "@/lib/streamplace-url";
+import {
+  handleWebSocketMessages,
+  makeLivestreamStore,
+  type LivestreamStore,
+} from "@streamplace/core";
+import { createFileRoute } from "@tanstack/react-router";
+import { useEffect, useRef, useState } from "react";
+
+export const Route = createFileRoute("/chat-popout/$user")({
+  validateSearch: (
+    search: Record<string, unknown>,
+  ): {
+    reverse?: boolean;
+    hideAfter?: number;
+    hideChatBox?: boolean;
+    hidePinnedComments?: boolean;
+  } => {
+    const toBool = (v: unknown): boolean | undefined => {
+      if (v === undefined || v === null) return undefined;
+      if (typeof v === "boolean") return v;
+      return String(v).toLowerCase() === "true";
+    };
+    const toNum = (v: unknown): number | undefined => {
+      if (typeof v === "number" && !isNaN(v)) return v;
+      if (typeof v === "string" && !isNaN(Number(v))) return Number(v);
+      return undefined;
+    };
+    const result: {
+      reverse?: boolean;
+      hideAfter?: number;
+      hideChatBox?: boolean;
+      hidePinnedComments?: boolean;
+    } = {};
+    const reverse = toBool(search.reverse);
+    if (reverse !== undefined) result.reverse = reverse;
+    const hideAfter = toNum(search.hideAfter);
+    if (hideAfter !== undefined) result.hideAfter = hideAfter;
+    const hideChatBox = toBool(search.hideChatBox);
+    if (hideChatBox !== undefined) result.hideChatBox = hideChatBox;
+    const hidePinnedComments = toBool(search.hidePinnedComments);
+    if (hidePinnedComments !== undefined)
+      result.hidePinnedComments = hidePinnedComments;
+    return result;
+  },
+  component: ChatPopoutPage,
+});
+
+function ChatPopoutPage() {
+  const { user } = Route.useParams();
+  const { reverse, hideAfter, hideChatBox, hidePinnedComments } =
+    Route.useSearch();
+  const reverseVal = reverse ?? false;
+  const hideChatBoxVal = hideChatBox ?? false;
+  const hidePinnedCommentsVal = hidePinnedComments ?? false;
+  const store = useRef<LivestreamStore | null>(null);
+  const [initialized, setInitialized] = useState(false);
+  const [hidden, setHidden] = useState(false);
+
+  useEffect(() => {
+    const s = makeLivestreamStore();
+    store.current = s;
+    setInitialized(true);
+  }, []);
+
+  // hideAfter timer
+  useEffect(() => {
+    if (!hideAfter || hideAfter <= 0) return;
+    const timer = setTimeout(() => setHidden(true), hideAfter * 1000);
+    return () => clearTimeout(timer);
+  }, [hideAfter]);
+
+  useEffect(() => {
+    if (!store.current) return;
+
+    const wsUrl = `${getStreamplaceUrl()}/api/websocket/${user}`;
+
+    let ws: WebSocket | null = null;
+    let reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
+    let currentConnectId = 0;
+    let mounted = true;
+
+    const scheduleReconnect = () => {
+      if (!mounted || reconnectTimeout) return;
+      reconnectTimeout = setTimeout(connect, 3000);
+    };
+
+    const connect = () => {
+      if (reconnectTimeout) {
+        clearTimeout(reconnectTimeout);
+        reconnectTimeout = null;
+      }
+
+      const connectId = ++currentConnectId;
+
+      ws = new WebSocket(wsUrl);
+
+      ws.onopen = () => {};
+
+      let messageBuffer: any[] = [];
+      let flushTimer: ReturnType<typeof setTimeout> | null = null;
+      const flush = () => {
+        flushTimer = null;
+        const batch = messageBuffer;
+        messageBuffer = [];
+        store.current?.setState((s) => handleWebSocketMessages(s, batch));
+      };
+
+      ws.onmessage = (event) => {
+        if (connectId !== currentConnectId) return;
+        try {
+          const messages = JSON.parse(event.data);
+          const list = Array.isArray(messages) ? messages : [messages];
+          messageBuffer.push(...list);
+          if (!flushTimer) {
+            flushTimer = setTimeout(flush, 0);
+          }
+        } catch {}
+      };
+
+      ws.onclose = () => {
+        if (connectId !== currentConnectId) return;
+        store.current?.setState((s) => ({ ...s, websocketConnected: false }));
+        scheduleReconnect();
+      };
+
+      ws.onerror = () => {
+        if (connectId !== currentConnectId) return;
+        store.current?.setState((s) => ({ ...s, websocketConnected: false }));
+        ws?.close();
+        scheduleReconnect();
+      };
+    };
+
+    connect();
+
+    return () => {
+      mounted = false;
+      if (flushTimer) clearTimeout(flushTimer);
+      if (reconnectTimeout) clearTimeout(reconnectTimeout);
+      ws?.close();
+    };
+  }, [user]);
+
+  if (!initialized || !store.current) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="w-5 h-5 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="flex flex-col h-screen bg-[var(--color-background)]"
+      style={
+        hidden ? { opacity: 0, pointerEvents: "none" as const } : undefined
+      }
+    >
+      {!hidePinnedCommentsVal && <StreamNotifications store={store.current} />}
+      <div className="flex flex-col flex-1 min-h-0">
+        <ChatPanel store={store.current} reversed={reverseVal} />
+      </div>
+      {!hideChatBoxVal && (
+        <div className="border-t p-2">
+          <ChatInput store={store.current} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/js/web/src/routes/index.tsx b/js/web/src/routes/index.tsx
index 078511d21..6a8b1fdf4 100644
--- a/js/web/src/routes/index.tsx
+++ b/js/web/src/routes/index.tsx
@@ -1,26 +1,20 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { StreamCard } from "../components/stream/stream-card";
 import useAvatars from "../hooks/use-avatars";
+import { useLiveUsers } from "../hooks/use-live-users";
 import { EMPTY_LOGIN_SEARCH } from "../lib/login-search";
-import {
-  useLiveUsers,
-  useLiveUsersError,
-  useLiveUsersLoading,
-} from "../lib/store/hooks";
 
 export const Route = createFileRoute("/")({
   component: HomePage,
 });
 
 function HomePage() {
-  const streams = useLiveUsers();
-  const loading = useLiveUsersLoading();
-  const error = useLiveUsersError();
+  const { data: streams, isLoading, error } = useLiveUsers();
 
   const allDids = streams?.map((s) => s.author.did) ?? [];
   const avatars = useAvatars(allDids);
 
-  if (streams === null && loading) {
+  if (streams === undefined && isLoading) {
     return (
       <div className="max-w-6xl mx-auto px-6 py-12">
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
@@ -43,7 +37,7 @@ function HomePage() {
 
   return (
     <div className="max-w-6xl mx-auto px-6 py-8">
-      {error && streams === null && (
+      {error && !streams && (
         <div className="mb-6 p-4 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border)] text-sm text-[var(--color-fg-muted)]">
           Could not load streams. You might be offline.
         </div>
@@ -231,38 +225,47 @@ function HomePage() {
                   r="2"
                 ></circle>
               </g>
-              <g className="animate-in-hubble">
-                <g
-                  id="scope"
-                  transform="rotate(0 340 180)"
-                  className="animate-scope-rock scale-50"
-                  stroke-width="2"
-                >
-                  <g transform="rotate(90, 230, 180)">
-                    <rect x="178" y="152" width="104" height="56" rx="6"></rect>
-                    <line x1="204" y1="152" x2="204" y2="208"></line>
-                    <line x1="230" y1="120" x2="230" y2="208"></line>
-                    <line x1="256" y1="152" x2="256" y2="208"></line>
-                  </g>
-                  <g transform="rotate(90, 450, 180)">
-                    <rect x="398" y="152" width="104" height="56" rx="6"></rect>
-                    <line x1="424" y1="152" x2="424" y2="208"></line>
-                    <line x1="450" y1="152" x2="450" y2="248"></line>
-                    <line x1="476" y1="152" x2="476" y2="208"></line>
-                  </g>
+              <g className="scale-50 translate-x-43 translate-y-20">
+                <g className="animate-in-hubble">
+                  <g id="scope" className="animate-scope-rock" stroke-width="2">
+                    <g transform="rotate(90, 230, 180)">
+                      <rect
+                        x="178"
+                        y="152"
+                        width="104"
+                        height="56"
+                        rx="6"
+                      ></rect>
+                      <line x1="204" y1="152" x2="204" y2="208"></line>
+                      <line x1="230" y1="120" x2="230" y2="208"></line>
+                      <line x1="256" y1="152" x2="256" y2="208"></line>
+                    </g>
+                    <g transform="rotate(90, 450, 180)">
+                      <rect
+                        x="398"
+                        y="152"
+                        width="104"
+                        height="56"
+                        rx="6"
+                      ></rect>
+                      <line x1="424" y1="152" x2="424" y2="208"></line>
+                      <line x1="450" y1="152" x2="450" y2="248"></line>
+                      <line x1="476" y1="152" x2="476" y2="208"></line>
+                    </g>
 
-                  <line x1="282" y1="180" x2="296" y2="180"></line>
-                  <line x1="384" y1="180" x2="398" y2="180"></line>
+                    <line x1="282" y1="180" x2="296" y2="180"></line>
+                    <line x1="384" y1="180" x2="398" y2="180"></line>
 
-                  <path d="M296 134 h88 a14 14 0 0 1 14 14 v64 a14 14 0 0 1 -14 14 h-88 a14 14 0 0 1 -14 -14 v-64 a14 14 0 0 1 14 -14 z"></path>
-                  <line x1="282" y1="156" x2="398" y2="156"></line>
-                  <line x1="282" y1="204" x2="398" y2="204"></line>
-                  <circle cx="340" cy="180" r="13"></circle>
-                  <circle cx="340" cy="180" r="5"></circle>
-                  <line x1="340" y1="134" x2="340" y2="106"></line>
-                  <path d="M331 106 h18"></path>
-                  <circle cx="340" cy="98" r="6"></circle>
-                  <path d="M312 222 l-10 16 M368 222 l10 16"></path>
+                    <path d="M296 134 h88 a14 14 0 0 1 14 14 v64 a14 14 0 0 1 -14 14 h-88 a14 14 0 0 1 -14 -14 v-64 a14 14 0 0 1 14 -14 z"></path>
+                    <line x1="282" y1="156" x2="398" y2="156"></line>
+                    <line x1="282" y1="204" x2="398" y2="204"></line>
+                    <circle cx="340" cy="180" r="13"></circle>
+                    <circle cx="340" cy="180" r="5"></circle>
+                    <line x1="340" y1="134" x2="340" y2="106"></line>
+                    <path d="M331 106 h18"></path>
+                    <circle cx="340" cy="98" r="6"></circle>
+                    <path d="M312 222 l-10 16 M368 222 l10 16"></path>
+                  </g>
                 </g>
               </g>
             </g>
@@ -286,7 +289,7 @@ function HomePage() {
         </div>
       )}
 
-      {streams === null && !loading && (
+      {!streams && !isLoading && !error && (
         <div className="max-w-2xl mx-auto text-center">
           <h1 className="text-4xl font-semibold font-display tracking-tight">
             The video layer for everything.
diff --git a/js/web/src/routes/search.tsx b/js/web/src/routes/search.tsx
new file mode 100644
index 000000000..b5fe4d08e
--- /dev/null
+++ b/js/web/src/routes/search.tsx
@@ -0,0 +1,163 @@
+// Search page. Searches actors via searchActorsTypeahead and shows
+// results as profile cards linking to their streams.
+import useAvatars from "@/hooks/use-avatars";
+import { usePDSAgent } from "@/lib/store/hooks";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { Search } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface SearchResult {
+  did: string;
+  handle: string;
+  displayName?: string;
+}
+
+export const Route = createFileRoute("/search")({
+  validateSearch: (
+    search: Record<string, unknown>,
+  ): { q: string | undefined } => ({
+    q: typeof search.q === "string" ? search.q : undefined,
+  }),
+  component: SearchPage,
+});
+
+function SearchPage() {
+  const { q: initialQ } = Route.useSearch();
+  const navigate = useNavigate({ from: Route.fullPath });
+  const agent = usePDSAgent();
+  const [query, setQuery] = useState(initialQ ?? "");
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [searching, setSearching] = useState(false);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const dids = results.map((r) => r.did);
+  const avatars = useAvatars(dids);
+
+  const searchActors = useCallback(
+    async (q: string) => {
+      if (!agent || !q.trim()) {
+        setResults([]);
+        return;
+      }
+      try {
+        setSearching(true);
+        const response = await agent.place.stream.live.searchActorsTypeahead({
+          q,
+          limit: 20,
+        });
+        setResults(
+          response.data.actors.map((a: any) => ({
+            did: a.did,
+            handle: a.handle,
+            displayName: a.displayName,
+          })),
+        );
+      } catch (error) {
+        console.error("Search failed:", error);
+        setResults([]);
+      } finally {
+        setSearching(false);
+      }
+    },
+    [agent],
+  );
+
+  // Sync initial query param into the input and trigger a search.
+  useEffect(() => {
+    if (initialQ) {
+      searchActors(initialQ);
+    }
+    inputRef.current?.focus();
+  }, [initialQ, searchActors]);
+
+  const handleChange = (value: string) => {
+    setQuery(value);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    if (value.trim()) {
+      timeoutRef.current = setTimeout(() => {
+        searchActors(value);
+        navigate({ search: { q: value }, replace: true });
+      }, 300);
+    } else {
+      setResults([]);
+      navigate({ search: { q: undefined }, replace: true });
+    }
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto w-full px-4 py-6">
+      <div className="relative mb-6">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--color-fg-muted)]" />
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => handleChange(e.target.value)}
+          placeholder="Search for streamers..."
+          className="w-full h-10 pl-9 pr-4 rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-fg)] placeholder:text-[var(--color-fg-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--color-ring)]"
+        />
+      </div>
+
+      {searching && results.length === 0 && (
+        <div className="flex justify-center py-12">
+          <div className="w-5 h-5 border-2 border-[var(--color-border)] border-t-[var(--color-accent)] rounded-full animate-spin" />
+        </div>
+      )}
+
+      {!searching && query.trim() && results.length === 0 && (
+        <div className="text-center py-12">
+          <p className="text-[var(--color-fg-muted)]">
+            No results for &ldquo;{query}&rdquo;
+          </p>
+        </div>
+      )}
+
+      {results.length > 0 && (
+        <div className="space-y-1">
+          {results.map((actor) => (
+            <Link
+              key={actor.did}
+              to="/$user"
+              params={{ user: actor.handle }}
+              className="flex items-center gap-3 p-3 rounded-lg hover:bg-[var(--color-bg-elevated)] transition-colors"
+            >
+              {avatars[actor.did]?.avatar ? (
+                <img
+                  src={avatars[actor.did].avatar}
+                  alt=""
+                  className="w-10 h-10 rounded-full bg-[var(--color-bg)] object-cover"
+                />
+              ) : (
+                <div className="w-10 h-10 rounded-full bg-[var(--color-bg-overlay)] border border-[var(--color-border)] flex items-center justify-center text-sm font-medium text-[var(--color-fg-muted)]">
+                  {(
+                    actor.displayName?.[0] ||
+                    actor.handle[0] ||
+                    "?"
+                  ).toUpperCase()}
+                </div>
+              )}
+              <div className="min-w-0 flex-1">
+                <div className="text-sm font-medium text-[var(--color-fg)] truncate">
+                  {actor.displayName || actor.handle}
+                </div>
+                <div className="text-xs text-[var(--color-fg-muted)] truncate">
+                  @{actor.handle}
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+
+      {!query.trim() && (
+        <div className="text-center py-16">
+          <Search className="w-8 h-8 mx-auto text-[var(--color-fg-muted)] mb-3" />
+          <p className="text-[var(--color-fg-muted)]">
+            Find streamers by name or handle
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/js/web/src/styles.css b/js/web/src/styles.css
index 559249d7b..28082dc03 100644
--- a/js/web/src/styles.css
+++ b/js/web/src/styles.css
@@ -1,12 +1,10 @@
 /* tw overwrites this but that's ok, we want both */
-@import "reset.css";
+@import "./fonts.css";
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
 @import "tw-animate-css";
 
-@import "./fonts.css";
-
 @custom-variant dark (&:where(.dark, .dark *));
 
 code {
@@ -135,7 +133,7 @@ code {
   --color-accent-hover: var(--color-accent);
   --color-accent-fg: var(--color-accent-foreground);
   --color-danger: var(--color-chart-1);
-  --color-success: var(--color-primary);
+  --color-success: var(--color-chart-4);
 
   --color-info: var(--color-chart-3);
 
@@ -345,3 +343,29 @@ body {
   animation: fade-in 0.8s ease-out both;
   animation-delay: 1s;
 }
+
+/* Custom scrollbar styles */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-sidebar-ring) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--color-sidebar-ring);
+  opacity: 0.2;
+  border-radius: 999px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--color-sidebar-ring);
+  opacity: 0.2;
+}
diff --git a/js/web/vite.config.ts b/js/web/vite.config.ts
index 3a265c50e..977fbb4f3 100644
--- a/js/web/vite.config.ts
+++ b/js/web/vite.config.ts
@@ -4,35 +4,57 @@ import react from "@vitejs/plugin-react";
 import { resolve } from "node:path";
 import { defineConfig } from "vite";
 
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [
-    // TanStack Router must be registered BEFORE @vitejs/plugin-react so the
-    // generated route tree is in place when the React plugin runs.
-    tanstackRouter({
-      target: "react",
-      autoCodeSplitting: true,
-      routesDirectory: "./src/routes",
-      generatedRouteTree: "./src/routeTree.gen.ts",
+// Conditionally add Sentry plugin for source maps upload in CI.
+function sentryPlugin() {
+  const authToken = process.env.SENTRY_AUTH_TOKEN;
+  const org = process.env.SENTRY_ORG;
+  const project = process.env.SENTRY_PROJECT;
+  if (!authToken || !org || !project) return [];
+  // Dynamic import so the plugin isn't required for local dev.
+  return import("@sentry/vite-plugin").then(({ sentryVitePlugin }) =>
+    sentryVitePlugin({
+      org,
+      project,
+      authToken,
+      telemetry: false,
+      sourcemaps: { assets: "./dist/**" },
     }),
-    react(),
-    tailwindcss(),
-  ],
-  resolve: {
-    alias: {
-      // Workspace packages — Vite reads each package's package.json `main`/`types`
-      // fields directly, so these aliases just make resolution explicit.
-      "@streamplace/core": resolve(__dirname, "../core/src"),
-      streamplace: resolve(__dirname, "../streamplace/src"),
-      // @-prefix for src/ — makes imports a bit cleaner and avoids relative path hell.
-      "@": resolve(__dirname, "./src"),
+  );
+}
+
+// https://vite.dev/config/
+export default defineConfig(async () => {
+  const sentry = await sentryPlugin();
+  return {
+    plugins: [
+      // TanStack Router must be registered BEFORE @vitejs/plugin-react so the
+      // generated route tree is in place when the React plugin runs.
+      tanstackRouter({
+        target: "react",
+        autoCodeSplitting: true,
+        routesDirectory: "./src/routes",
+        generatedRouteTree: "./src/routeTree.gen.ts",
+      }),
+      react(),
+      tailwindcss(),
+      ...(sentry ? [sentry] : []),
+    ],
+    resolve: {
+      alias: {
+        // Workspace packages — Vite reads each package's package.json `main`/`types`
+        // fields directly, so these aliases just make resolution explicit.
+        "@streamplace/core": resolve(__dirname, "../core/src"),
+        streamplace: resolve(__dirname, "../streamplace/src"),
+        // @-prefix for src/ — makes imports a bit cleaner and avoids relative path hell.
+        "@": resolve(__dirname, "./src"),
+      },
+    },
+    server: {
+      port: 5173,
+      strictPort: false,
+    },
+    preview: {
+      port: 5173,
     },
-  },
-  server: {
-    port: 5173,
-    strictPort: false,
-  },
-  preview: {
-    port: 5173,
-  },
+  };
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ac90f1562..eaab817fa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -810,6 +810,9 @@ importers:
       '@hello-pangea/dnd':
         specifier: ^18.0.1
         version: 18.0.1(@types/react@19.2.14)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@sentry/react':
+        specifier: ^10.57.0
+        version: 10.57.0(react@19.2.0)
       '@streamplace/core':
         specifier: workspace:*
         version: link:../core
@@ -819,6 +822,9 @@ importers:
       '@tailwindcss/typography':
         specifier: ^0.5.19
         version: 0.5.19(tailwindcss@4.3.0)
+      '@tanstack/react-query':
+        specifier: ^5.90.21
+        version: 5.90.21(react@19.2.0)
       '@tanstack/react-router':
         specifier: ^1.170.0
         version: 1.170.15(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -889,6 +895,9 @@ importers:
         specifier: ^5.0.5
         version: 5.0.11(@types/react@19.2.14)(immer@10.1.1)(react@19.2.0)(use-sync-external-store@1.6.0(react@19.2.0))
     devDependencies:
+      '@sentry/vite-plugin':
+        specifier: ^5.3.0
+        version: 5.3.0(encoding@0.1.13)(rollup@4.59.0)
       '@tailwindcss/vite':
         specifier: ^4.3.0
         version: 4.3.0(vite@6.4.1(@types/node@25.5.0)(jiti@2.7.0)(lightningcss@1.32.0)(terser@5.46.0)(yaml@2.8.2))
@@ -5481,31 +5490,64 @@ packages:
     resolution: {integrity: sha512-UOJtYmdcxHCcV0NPfXFff/a95iXl/E0EhuQ1y0uE0BuZDMupWSF5t2BgC4HaE5Aw3RTjDF3XkSHWoIF6ohy7eA==}
     engines: {node: '>=18'}
 
+  '@sentry-internal/browser-utils@10.57.0':
+    resolution: {integrity: sha512-tXObp954rMTSYKlbftjVXHtNl4t/6ssks3jkqyzmKb+PDPWzabGQO7sWwqVuTjT8Kx/8A3FmriS1bGmqxiJy3A==}
+    engines: {node: '>=18'}
+
   '@sentry-internal/feedback@10.38.0':
     resolution: {integrity: sha512-JXneg9zRftyfy1Fyfc39bBlF/Qd8g4UDublFFkVvdc1S6JQPlK+P6q22DKz3Pc8w3ySby+xlIq/eTu9Pzqi4KA==}
     engines: {node: '>=18'}
 
+  '@sentry-internal/feedback@10.57.0':
+    resolution: {integrity: sha512-ZcF4QhkqGX3iiQSXB2N0N3Awp+j5iqnDRu6PA/qyLFrWqH5ZiiAAgu59OLD9E6XAdg6iFtLYw19MAMZVK8qNOQ==}
+    engines: {node: '>=18'}
+
   '@sentry-internal/replay-canvas@10.38.0':
     resolution: {integrity: sha512-OXWM9jEqNYh4VTvrMu7v+z1anz+QKQ/fZXIZdsO7JTT2lGNZe58UUMeoq386M+Saxen8F9SUH7yTORy/8KI5qw==}
     engines: {node: '>=18'}
 
+  '@sentry-internal/replay-canvas@10.57.0':
+    resolution: {integrity: sha512-zsfa4JcfV0AEc9YhNxNabd5lSZL2Av84saAyexGAqcHs+67m9Gd0cGStOzMb/nCl7UAtmdP0aI+G7a3rcxxN/A==}
+    engines: {node: '>=18'}
+
   '@sentry-internal/replay@10.38.0':
     resolution: {integrity: sha512-YWIkL6/dnaiQyFiZXJ/nN+NXGv/15z45ia86bE/TMq01CubX/DUOilgsFz0pk2v/pg3tp/U2MskLO9Hz0cnqeg==}
     engines: {node: '>=18'}
 
+  '@sentry-internal/replay@10.57.0':
+    resolution: {integrity: sha512-Wmnx/6ABynVH1iwuoNUqJNyjIUqsqoGML7qsyivBRKb5Wo2YQtPOQlQYfxfZSvWzGpcoSVdInkRjDssUQxQEQg==}
+    engines: {node: '>=18'}
+
   '@sentry/babel-plugin-component-annotate@4.9.1':
     resolution: {integrity: sha512-0gEoi2Lb54MFYPOmdTfxlNKxI7kCOvNV7gP8lxMXJ7nCazF5OqOOZIVshfWjDLrc0QrSV6XdVvwPV9GDn4wBMg==}
     engines: {node: '>= 14'}
 
+  '@sentry/babel-plugin-component-annotate@5.3.0':
+    resolution: {integrity: sha512-p4q8gn8wcFqZGP/s2MnJCAAd8fTikaU6A0mM97RDHQgStcrYiaS0Sc5zUNfb1V+UOLPuvdEdL6MwyxfzjYJQTA==}
+    engines: {node: '>= 18'}
+
   '@sentry/browser@10.38.0':
     resolution: {integrity: sha512-3phzp1YX4wcQr9mocGWKbjv0jwtuoDBv7+Y6Yfrys/kwyaL84mDLjjQhRf4gL5SX7JdYkhBp4WaiNlR0UC4kTA==}
     engines: {node: '>=18'}
 
+  '@sentry/browser@10.57.0':
+    resolution: {integrity: sha512-s36AQy/CKXTfyY9Z+qUhzNomntZXgfs0rbaK7q9ffnFkqcPwzE8qQtVs58y3Suut56u+AhwSztgQtERcuZ5VIA==}
+    engines: {node: '>=18'}
+
+  '@sentry/bundler-plugin-core@5.3.0':
+    resolution: {integrity: sha512-L5T60sWdAI3qWwdg3Ptwek/0TY59PERrxyqp4XMUkroayQvGd9r5dIW9Q1kSeXX9iJ442nXbFZKAOyCKV4Z13Q==}
+    engines: {node: '>= 18'}
+
   '@sentry/cli-darwin@2.58.4':
     resolution: {integrity: sha512-kbTD+P4X8O+nsNwPxCywtj3q22ecyRHWff98rdcmtRrvwz8CKi/T4Jxn/fnn2i4VEchy08OWBuZAqaA5Kh2hRQ==}
     engines: {node: '>=10'}
     os: [darwin]
 
+  '@sentry/cli-darwin@2.58.6':
+    resolution: {integrity: sha512-udAVvcyfNa0R+95GvPz/+43/N3TC0TYKdkQ7D7jhPSzbcMc7l2fxRNN5yB3UpCA5fWFnW4toeaqwDBhb/Wh3LA==}
+    engines: {node: '>=10'}
+    os: [darwin]
+
   '@sentry/cli-darwin@3.3.3':
     resolution: {integrity: sha512-P8DoL79eX5fhKCfBHHl7xwwTShDPOb2drJC8lizZ3v1iS1JLPrNweM1KEzDefR30zH1wghbLSwsYv/svWdM3wA==}
     engines: {node: '>=18'}
@@ -5517,6 +5559,12 @@ packages:
     cpu: [arm64]
     os: [linux, freebsd, android]
 
+  '@sentry/cli-linux-arm64@2.58.6':
+    resolution: {integrity: sha512-q8mEcNNmeXMy5i+jWT30TVpH7LcP4HD21CD5XRSPAd/a912HF6EpK0ybf/1USO14WOhoXbAGi9txwaWabSe33g==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux, freebsd, android]
+
   '@sentry/cli-linux-arm64@3.3.3':
     resolution: {integrity: sha512-9jaX9RGyTpjo9u2urNi5ciBDpRdTt107YJpFXev+BFHJ6Lwz/owgRuYzPRfAen8hKkOOFheZ3iy07kl576eZzw==}
     engines: {node: '>=18'}
@@ -5529,6 +5577,12 @@ packages:
     cpu: [arm]
     os: [linux, freebsd, android]
 
+  '@sentry/cli-linux-arm@2.58.6':
+    resolution: {integrity: sha512-pD0LAt5PcUzAinBwvDqc66x9+2CabHEv486yP0gRjWO7SakbaxmfVq/EXd8VLq/Tzi39LAu422UYK1lpW3MILw==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux, freebsd, android]
+
   '@sentry/cli-linux-arm@3.3.3':
     resolution: {integrity: sha512-a7o/huozveLIImXHe0HDwEMVhvDopOP2tLcopvV7sQsVE8f/QOShR5FudKjmiaZz2opdLzPJO9pv5WuF9jAZPg==}
     engines: {node: '>=18'}
@@ -5541,6 +5595,12 @@ packages:
     cpu: [x86, ia32]
     os: [linux, freebsd, android]
 
+  '@sentry/cli-linux-i686@2.58.6':
+    resolution: {integrity: sha512-q8vNJi1eOV/4vxAFWBsEwLHoSYapaZHIf4j76KJGJXFKTkEbsjCOOsKbwUIBTQQhRgV4DFWh3ryfsPS/que4Kg==}
+    engines: {node: '>=10'}
+    cpu: [x86, ia32]
+    os: [linux, freebsd, android]
+
   '@sentry/cli-linux-i686@3.3.3':
     resolution: {integrity: sha512-VngQYzR2kDm2oojCuYF20ebLTK8HKvEwxe785J6gxob8Ef9JvZkERyUqENYppBa9aVgN0pandqPAqOECWykTMA==}
     engines: {node: '>=18'}
@@ -5553,6 +5613,12 @@ packages:
     cpu: [x64]
     os: [linux, freebsd, android]
 
+  '@sentry/cli-linux-x64@2.58.6':
+    resolution: {integrity: sha512-DZu956Mhi3ZRjTBe1WdbGV46ldVbA8d2rgp/fh51GsI25zjBHah4wZnPTSzpc+YqxU6pJpg579B/r3jrIK530Q==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux, freebsd, android]
+
   '@sentry/cli-linux-x64@3.3.3':
     resolution: {integrity: sha512-rBxXQeIYGefUNI2cXHxEr0y3bhxDQjOD4G6j/gqLz/Dj+l8gJ/iKP64kTudnoViNIpn0pdYccG69th7zmzM/Fg==}
     engines: {node: '>=18'}
@@ -5565,6 +5631,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@sentry/cli-win32-arm64@2.58.6':
+    resolution: {integrity: sha512-nj0Ff/kmAB73EPDhR8B4O9r+NUHK5GkPCkGWC+kXVemqAJWL5jcJ5KdxG0l/S0z6RoEoltID8/43/B+TaMlT7A==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
   '@sentry/cli-win32-arm64@3.3.3':
     resolution: {integrity: sha512-c52g+YS6BO0rzH8AEHqQPmpqZrw0GJjMWqy0tQ5jcqaGdaLVnxk0mMEubv8R6Dv5MR2LShoKjiNsaeVfrWIMUg==}
     engines: {node: '>=18'}
@@ -5577,6 +5649,12 @@ packages:
     cpu: [x86, ia32]
     os: [win32]
 
+  '@sentry/cli-win32-i686@2.58.6':
+    resolution: {integrity: sha512-WNZiDzPbgsEMQWq4avsQ391v/xWKJDIWWWo9GYl+N/w5qcYKkoDW7wQG7T9FasI6ENn68phChTOAPXXxbfAdOg==}
+    engines: {node: '>=10'}
+    cpu: [x86, ia32]
+    os: [win32]
+
   '@sentry/cli-win32-i686@3.3.3':
     resolution: {integrity: sha512-DygYzSY/+tS7oFj/mfeg/yzYxsQx3fO8cI+IWc2pns/at+JcJ9O5xyM/x/q55wOxpnwla7RL1D3rsqK2mqkYfg==}
     engines: {node: '>=18'}
@@ -5589,6 +5667,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@sentry/cli-win32-x64@2.58.6':
+    resolution: {integrity: sha512-R35WJ17oF4D2eqI1DR2sQQqr0fjRTt5xoP16WrTu91XM2lndRMFsnjh+/GttbxapLCBNlrjzia99MJ0PZHZpgA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
   '@sentry/cli-win32-x64@3.3.3':
     resolution: {integrity: sha512-i0glPcHwkqbVA2Y+0Yz7CD/l8TSkfft1a+lTU9yk/+DDU8WGkyArEAxAji9bGo4p+k5HIFC8OC2MwpKdcdFM4Q==}
     engines: {node: '>=18'}
@@ -5600,6 +5684,11 @@ packages:
     engines: {node: '>= 10'}
     hasBin: true
 
+  '@sentry/cli@2.58.6':
+    resolution: {integrity: sha512-baBcNPLLfUi9WuL+Tpri9BFaAdvugZIKelC5X0tt0Zdy+K0K+PCVSrnNmwMWU/HyaF/SEv6b6UHnXIdqanBlcg==}
+    engines: {node: '>= 10'}
+    hasBin: true
+
   '@sentry/cli@3.3.3':
     resolution: {integrity: sha512-4CZtfgiOraX+BntMjYQhfLDArXwpqt3sEo5Zdj2pqWSZSd4yI3ncfQ21CsxLcI/sUQrjmD5Vzidu4/1OShyxtA==}
     engines: {node: '>= 18'}
@@ -5609,6 +5698,10 @@ packages:
     resolution: {integrity: sha512-1pubWDZE5y5HZEPMAZERP4fVl2NH3Ihp1A+vMoVkb3Qc66Diqj1WierAnStlZP7tCx0TBa0dK85GTW/ZFYyB9g==}
     engines: {node: '>=18'}
 
+  '@sentry/core@10.57.0':
+    resolution: {integrity: sha512-kntItTA2kiT0YpL7encXaF6mkdZMB+y48lwj8w1wkfBpfJAC7sifdgrzLQZqmsqVNE3crg9VfufaAGA+78uFMg==}
+    engines: {node: '>=18'}
+
   '@sentry/react-native@7.13.0':
     resolution: {integrity: sha512-pKY+rln3CEnhnG21eUXcl/yeG5fkNruqXXjEikE5FjsyLmJi2POAGwT4tlupyHtG3fQT5mp06QI7bQdpAuH4Xw==}
     hasBin: true
@@ -5626,10 +5719,29 @@ packages:
     peerDependencies:
       react: ^16.14.0 || 17.x || 18.x || 19.x
 
+  '@sentry/react@10.57.0':
+    resolution: {integrity: sha512-6QThwQ4XWQ2rwKZEVQ9P9WKl7JlowC7S5LpAvmMdrwlfJBpLDFOsM7tycnIvbXTXf0ZOOuLFPa4L4YYbdyNGmA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.14.0 || 17.x || 18.x || 19.x
+
+  '@sentry/rollup-plugin@5.3.0':
+    resolution: {integrity: sha512-hgPGPYdQJ/G1cGYOxAb7d4z3V+/k/E5/P/5TFPEEBLuIbFFk+JG0CISUDJdzXJjO382Lb99PBJuXGbueBmO79w==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      rollup: '>=3.2.0'
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@sentry/types@10.38.0':
     resolution: {integrity: sha512-DoeyTv/TvnoVDhHgdyv/wehieAKdyjLjEMtPOqqq/AjkP02BxeC0JYUrrWKOjV0wdLq5ZP8jKcCX8GN7awZonQ==}
     engines: {node: '>=18'}
 
+  '@sentry/vite-plugin@5.3.0':
+    resolution: {integrity: sha512-qcoSzo4n2MulVQ70UUPLq6dTleb2a2HwL2wuwvAgWhPChrYTuk6A6mDg6aQb9fairPAwFPiU9PzOANpoDJcz1A==}
+    engines: {node: '>= 18'}
+
   '@shikijs/core@3.23.0':
     resolution: {integrity: sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA==}
 
@@ -22610,22 +22722,42 @@ snapshots:
     dependencies:
       '@sentry/core': 10.38.0
 
+  '@sentry-internal/browser-utils@10.57.0':
+    dependencies:
+      '@sentry/core': 10.57.0
+
   '@sentry-internal/feedback@10.38.0':
     dependencies:
       '@sentry/core': 10.38.0
 
+  '@sentry-internal/feedback@10.57.0':
+    dependencies:
+      '@sentry/core': 10.57.0
+
   '@sentry-internal/replay-canvas@10.38.0':
     dependencies:
       '@sentry-internal/replay': 10.38.0
       '@sentry/core': 10.38.0
 
+  '@sentry-internal/replay-canvas@10.57.0':
+    dependencies:
+      '@sentry-internal/replay': 10.57.0
+      '@sentry/core': 10.57.0
+
   '@sentry-internal/replay@10.38.0':
     dependencies:
       '@sentry-internal/browser-utils': 10.38.0
       '@sentry/core': 10.38.0
 
+  '@sentry-internal/replay@10.57.0':
+    dependencies:
+      '@sentry-internal/browser-utils': 10.57.0
+      '@sentry/core': 10.57.0
+
   '@sentry/babel-plugin-component-annotate@4.9.1': {}
 
+  '@sentry/babel-plugin-component-annotate@5.3.0': {}
+
   '@sentry/browser@10.38.0':
     dependencies:
       '@sentry-internal/browser-utils': 10.38.0
@@ -22634,51 +22766,96 @@ snapshots:
       '@sentry-internal/replay-canvas': 10.38.0
       '@sentry/core': 10.38.0
 
+  '@sentry/browser@10.57.0':
+    dependencies:
+      '@sentry-internal/browser-utils': 10.57.0
+      '@sentry-internal/feedback': 10.57.0
+      '@sentry-internal/replay': 10.57.0
+      '@sentry-internal/replay-canvas': 10.57.0
+      '@sentry/core': 10.57.0
+
+  '@sentry/bundler-plugin-core@5.3.0(encoding@0.1.13)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@sentry/babel-plugin-component-annotate': 5.3.0
+      '@sentry/cli': 2.58.6(encoding@0.1.13)
+      dotenv: 16.4.5
+      find-up: 5.0.0
+      glob: 13.0.6
+      magic-string: 0.30.21
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@sentry/cli-darwin@2.58.4':
     optional: true
 
+  '@sentry/cli-darwin@2.58.6':
+    optional: true
+
   '@sentry/cli-darwin@3.3.3':
     optional: true
 
   '@sentry/cli-linux-arm64@2.58.4':
     optional: true
 
+  '@sentry/cli-linux-arm64@2.58.6':
+    optional: true
+
   '@sentry/cli-linux-arm64@3.3.3':
     optional: true
 
   '@sentry/cli-linux-arm@2.58.4':
     optional: true
 
+  '@sentry/cli-linux-arm@2.58.6':
+    optional: true
+
   '@sentry/cli-linux-arm@3.3.3':
     optional: true
 
   '@sentry/cli-linux-i686@2.58.4':
     optional: true
 
+  '@sentry/cli-linux-i686@2.58.6':
+    optional: true
+
   '@sentry/cli-linux-i686@3.3.3':
     optional: true
 
   '@sentry/cli-linux-x64@2.58.4':
     optional: true
 
+  '@sentry/cli-linux-x64@2.58.6':
+    optional: true
+
   '@sentry/cli-linux-x64@3.3.3':
     optional: true
 
   '@sentry/cli-win32-arm64@2.58.4':
     optional: true
 
+  '@sentry/cli-win32-arm64@2.58.6':
+    optional: true
+
   '@sentry/cli-win32-arm64@3.3.3':
     optional: true
 
   '@sentry/cli-win32-i686@2.58.4':
     optional: true
 
+  '@sentry/cli-win32-i686@2.58.6':
+    optional: true
+
   '@sentry/cli-win32-i686@3.3.3':
     optional: true
 
   '@sentry/cli-win32-x64@2.58.4':
     optional: true
 
+  '@sentry/cli-win32-x64@2.58.6':
+    optional: true
+
   '@sentry/cli-win32-x64@3.3.3':
     optional: true
 
@@ -22702,6 +22879,26 @@ snapshots:
       - encoding
       - supports-color
 
+  '@sentry/cli@2.58.6(encoding@0.1.13)':
+    dependencies:
+      https-proxy-agent: 5.0.1
+      node-fetch: 2.7.0(encoding@0.1.13)
+      progress: 2.0.3
+      proxy-from-env: 1.1.0
+      which: 2.0.2
+    optionalDependencies:
+      '@sentry/cli-darwin': 2.58.6
+      '@sentry/cli-linux-arm': 2.58.6
+      '@sentry/cli-linux-arm64': 2.58.6
+      '@sentry/cli-linux-i686': 2.58.6
+      '@sentry/cli-linux-x64': 2.58.6
+      '@sentry/cli-win32-arm64': 2.58.6
+      '@sentry/cli-win32-i686': 2.58.6
+      '@sentry/cli-win32-x64': 2.58.6
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@sentry/cli@3.3.3':
     dependencies:
       progress: 2.0.3
@@ -22720,6 +22917,8 @@ snapshots:
 
   '@sentry/core@10.38.0': {}
 
+  '@sentry/core@10.57.0': {}
+
   '@sentry/react-native@7.13.0(encoding@0.1.13)(expo@55.0.6)(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(bufferutil@4.0.8)(react@19.2.0)(utf-8-validate@5.0.10))(react@19.2.0)':
     dependencies:
       '@sentry/babel-plugin-component-annotate': 4.9.1
@@ -22742,10 +22941,35 @@ snapshots:
       '@sentry/core': 10.38.0
       react: 19.2.0
 
+  '@sentry/react@10.57.0(react@19.2.0)':
+    dependencies:
+      '@sentry/browser': 10.57.0
+      '@sentry/core': 10.57.0
+      react: 19.2.0
+
+  '@sentry/rollup-plugin@5.3.0(encoding@0.1.13)(rollup@4.59.0)':
+    dependencies:
+      '@sentry/bundler-plugin-core': 5.3.0(encoding@0.1.13)
+      magic-string: 0.30.21
+    optionalDependencies:
+      rollup: 4.59.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+
   '@sentry/types@10.38.0':
     dependencies:
       '@sentry/core': 10.38.0
 
+  '@sentry/vite-plugin@5.3.0(encoding@0.1.13)(rollup@4.59.0)':
+    dependencies:
+      '@sentry/bundler-plugin-core': 5.3.0(encoding@0.1.13)
+      '@sentry/rollup-plugin': 5.3.0(encoding@0.1.13)(rollup@4.59.0)
+    transitivePeerDependencies:
+      - encoding
+      - rollup
+      - supports-color
+
   '@shikijs/core@3.23.0':
     dependencies:
       '@shikijs/types': 3.23.0
-- 
2.51.2