chore(deps): update grafana/grafana docker tag to v11.6.14

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.github/workflows/docker.yml

@@ -10,6 +10,12 @@ jobs:
     name: Push frontend to Docker Hub
     runs-on: ubuntu-latest
     steps:
+      - name: Wait
+        uses: NathanFirmo/wait-for-other-action@v1.0.4
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          workflow: 'emojis.yml'
+
       - name: Check out the repo
         uses: actions/checkout@v3
 
@@ -31,19 +37,18 @@ jobs:
 
       - name: Download latest emoji importer
         run: |
-          RELEASE_URL=$(curl -s https://api.github.com/repos/srizan10/hclive/releases/latest | \
+          RELEASE_URL=$(curl -s https://api.github.com/repos/srizan10/hctv/releases/latest | \
             grep "browser_download_url.*slack-import-emojis-linux-x86_64" | \
             cut -d '"' -f 4)
-          
-          curl -L -o slack-import-emojis $RELEASE_URL
-          chmod +x slack-import-emojis
-          
+
+          curl -L -o slack-import-emojis-bin $RELEASE_URL
+          chmod +x slack-import-emojis-bin
+
           mkdir -p apps/web/src/lib/instrumentation/
-          
-          export SLACK_TOKEN=${{ secrets.SLACK_TOKEN }}
-          ./slack-import-emojis
-          
-          mv emojis.json apps/web/src/lib/instrumentation/
+
+          ./slack-import-emojis-bin default
+
+          cp emojis.json apps/web/
 
       - name: Build and push Docker image
         uses: docker/build-push-action@v6
@@ -57,41 +62,7 @@ jobs:
           secrets: |
             TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}
             TURBO_TEAM=${{ secrets.TURBO_TEAM }}
-  db:
-    name: Push db to Docker Hub
-    runs-on: ubuntu-latest
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to Docker Hub
-        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
-        with:
-          images: srizan10/hclive-db
-          tags: latest
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: ./packages/db/Dockerfile
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64
-          secrets: |
-            TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}
-            TURBO_TEAM=${{ secrets.TURBO_TEAM }}
+            SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}
   chat:
     name: Push chat module to Docker Hub
     runs-on: ubuntu-latest
@@ -127,22 +98,43 @@ jobs:
           secrets: |
             TURBO_TOKEN=${{ secrets.TURBO_TOKEN }}
             TURBO_TEAM=${{ secrets.TURBO_TEAM }}
-  deploy:
-    name: Deploy to server
+  mediamtx:
+    name: Push MediaMTX image to Docker Hub
     runs-on: ubuntu-latest
-    needs: [frontend, db, chat]
     steps:
-      # source https://github.com/taciturnaxolotl/cachet/blob/main/.github/workflows/deploy.yaml
-      - name: Deploy with Docker
-        uses: appleboy/ssh-action@v1
+      - name: Check out the repo
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
         with:
-          host: hackclub.app
-          username: srizan
-          key: ${{ secrets.SSH_KEY }}
-          port: 22
-          script: |
-            cd ~/compose/hctv
-            docker compose pull
-            docker compose up -d --remove-orphans
-            # for some reason, without the restart, the rtmp container stops working
-            docker compose restart
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        with:
+          images: srizan10/hclive-mediamtx
+          tags: latest
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: ./docker/mediamtx/Dockerfile
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64
+  deploy:
+    name: Deploy to Coolify
+    runs-on: ubuntu-latest
+    needs: [frontend, chat, mediamtx]
+    steps:
+      - name: Send coolify redeploy webhook
+        run: |
+          curl -X POST -H "Authorization: Bearer ${{ secrets.COOLIFY_API_KEY }}" https://coolify.srizan.dev/api/v1/deploy?uuid=${{ secrets.COOLIFY_APP_UUID }}&force=true

.github/workflows/emojis.yml

@@ -38,12 +38,10 @@ jobs:
       
       - name: Create GitHub Release
         id: create_release
-        uses: actions/create-release@v1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        uses: softprops/action-gh-release@v1
         with:
           tag_name: emoji-importer-v${{ steps.get_version.outputs.version }}
-          release_name: Slack Emoji Importer v${{ steps.get_version.outputs.version }}
+          name: Slack Emoji Importer v${{ steps.get_version.outputs.version }}
           body: |
             Slack Emoji Importer v${{ steps.get_version.outputs.version }}
 
@@ -54,8 +52,6 @@ jobs:
             export SLACK_TOKEN=xoxb-your-token
             ./slack-import-emojis
             ```
-          draft: false
-          prerelease: false
           
       - name: Upload Linux binary
         uses: actions/upload-release-asset@v1

.gitignore

@@ -28,6 +28,7 @@ yarn-error.log*
 # local env files
 .env*.local
 .env* 
+!.env.example
 
 # vercel
 .vercel
@@ -45,4 +46,10 @@ packages/db/generated/client
 *dist
 
 slack-import-emojis/target
-**/*/emojis.json
+**/*/emojis.json
+
+.idea
+
+/apps/docs/src/content/docs/typedoc-sdk
+
+.codex

.vscode/mcp.json

@@ -0,0 +1,8 @@
+{
+  "servers": {
+    "Sentry": {
+      "url": "https://mcp.sentry.dev/mcp/sr-izan/hctv",
+      "type": "http"
+    }
+  }
+}

AGENTS.md

@@ -0,0 +1,343 @@
+# Agent Guidelines for HackClub.tv
+
+This document provides essential information for AI coding agents working on the HackClub.tv codebase.
+
+## Project Overview
+
+HackClub.tv is a live streaming platform built with Next.js 16, Prisma, and Turbo monorepo architecture.
+
+- **Monorepo**: Turborepo with pnpm workspaces
+- **Apps**: web (Next.js), chat (Hono), docs
+- **Packages**: db (Prisma), auth (Lucia), hono-ws, sdk
+- **Package Manager**: pnpm 10.6.5
+
+## Build, Lint, and Test Commands
+
+### Root Level Commands
+
+```bash
+pnpm install            # Install all dependencies
+pnpm build              # Build all apps and packages (uses Turbo)
+pnpm dev                # Start all apps in dev mode (uses Turbo)
+pnpm lint               # Lint all apps (uses Turbo)
+```
+
+### Database Commands
+
+```bash
+pnpm db:migrate         # Run Prisma migrations in dev
+pnpm prisma             # Run any Prisma command in db package
+```
+
+### App-Specific Commands
+
+```bash
+# Web app (Next.js)
+pnpm --filter=@hctv/web dev           # Start Next.js dev server
+pnpm --filter=@hctv/web build         # Build Next.js app
+pnpm --filter=@hctv/web lint          # Lint web app
+pnpm --filter=@hctv/web check-types   # Type check (tsc --noEmit)
+pnpm --filter=@hctv/web ui:add        # Add shadcn components
+
+# Chat app (Hono)
+pnpm --filter=@hctv/chat dev          # Start chat server with watch
+pnpm --filter=@hctv/chat build        # Build chat server
+
+# DB package (Prisma)
+pnpm --filter=@hctv/db db:generate    # Generate Prisma client
+pnpm --filter=@hctv/db db:migrate     # Run migrations
+pnpm --filter=@hctv/db build          # Generate client and build
+```
+
+### Running Single Tests
+
+This project does not currently have a test suite configured. When adding tests:
+
+- Use Vitest or Jest for unit tests
+- Use Playwright for E2E tests (recommended for Next.js)
+- Follow the pattern: `pnpm test -- <test-file-path>`
+
+### Docker Commands
+
+```bash
+pnpm docker:web         # Build web app Docker image
+pnpm docker:chat        # Build chat app Docker image
+pnpm r:rtmp             # Restart RTMP server
+```
+
+## Code Style Guidelines
+
+### Formatting
+
+- **Formatter**: Prettier (`.prettierrc.json`)
+- **Indentation**: 2 spaces (no tabs)
+- **Line Width**: 100 characters
+- **Quotes**: Single quotes
+- **Semicolons**: Required
+- **Trailing Commas**: ES5 style
+- **Linter**: ESLint with Next.js rules (`next/core-web-vitals`)
+
+### Import Organization
+
+Imports should be ordered as follows (no blank lines between groups):
+
+1. React/Next.js core imports
+2. Third-party libraries
+3. Internal components (`@/components`)
+4. Internal utilities/libs (`@/lib`)
+5. Package imports (`@hctv/*`)
+6. Type imports (use `import type` keyword)
+7. Relative imports
+
+```typescript
+import { useState, useEffect } from 'react';
+import { Send } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { validateRequest } from '@/lib/auth/validate';
+import { prisma } from '@hctv/db';
+import type { User, Channel } from '@hctv/db';
+import { helper } from './utils';
+```
+
+### TypeScript Usage
+
+- **Strict mode**: Enabled
+- **Type over interface**: Use `type` for unions/intersections, `interface` for object shapes
+- **No implicit any**: Always type your variables
+- **Type imports**: Use `import type` for type-only imports
+- **Prisma types**: Import from `@hctv/db` and use type composition
+
+```typescript
+// Interfaces for props and object shapes
+interface ChatMessage {
+  user?: User;
+  message: string;
+  type: 'message' | 'systemMsg';
+}
+
+// Type aliases for complex types
+type FormFieldConfig = {
+  name: string;
+  label?: string;
+};
+
+// Prisma type composition
+type StreamWithChannel = StreamInfo & { channel: Channel };
+```
+
+### Naming Conventions
+
+**Files:**
+
+- React components: `PascalCase.tsx` (e.g., `ChatPanel.tsx`)
+- Utilities/helpers: `camelCase.ts` (e.g., `validate.ts`)
+- Next.js pages: `page.tsx`, `route.ts`, `layout.tsx`
+- Client components: `page.client.tsx`
+
+**Variables & Functions:**
+
+- Components: `PascalCase`
+- Functions: `camelCase`
+- Constants: `SCREAMING_SNAKE_CASE`
+- Booleans: Use `is`, `has`, `should` prefixes
+- Refs: `Ref` suffix (e.g., `socketRef`)
+
+```typescript
+const MESSAGE_HISTORY_SIZE = 15;
+const isFollowing = await checkFollowing();
+const socketRef = useRef<WebSocket | null>(null);
+```
+
+### Error Handling
+
+**API Routes:**
+
+- Return `Response` objects with appropriate status codes
+- Use descriptive error messages
+- Status codes: 400 (bad request), 401 (unauthorized), 403 (forbidden), 404 (not found)
+
+```typescript
+if (!user) {
+  return new Response('Unauthorized', { status: 401 });
+}
+```
+
+**Server Actions:**
+
+- Return objects with `success` boolean and `error` or `data` fields
+- Use `zodVerify` helper for validation
+
+```typescript
+const zod = await zodVerify(schema, formData);
+if (!zod.success) {
+  return { success: false, error: zod.error };
+}
+return { success: true, data: result };
+```
+
+**Client-side:**
+
+- Use try-catch for async operations
+- Use toast notifications (sonner) for user feedback
+- Log errors with `console.error`
+
+### Async Patterns
+
+- **Prefer**: async/await over Promise chains
+- **Parallel operations**: Use `Promise.all()`
+- **No .then() chaining**: Except in utility functions like fetchers
+
+```typescript
+// Standard async/await
+const data = await prisma.model.findMany();
+
+// Parallel operations
+const [channelA, channelB] = await Promise.all([
+  prisma.channel.findUnique({ where: { id: 'a' } }),
+  prisma.channel.findUnique({ where: { id: 'b' } }),
+]);
+```
+
+## React Component Patterns
+
+### Component Structure
+
+1. Directive (`'use client'` or `'use server'`)
+2. Imports
+3. Component function
+4. Helper functions (if needed)
+5. Type/interface definitions (at bottom)
+
+```typescript
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+export default function ChatPanel(props: Props) {
+  const [message, setMessage] = useState('');
+
+  return <div>{/* JSX */}</div>;
+}
+
+interface Props {
+  username: string;
+}
+```
+
+### Server vs Client Components
+
+- **Server components**: Default (no directive), use for data fetching
+- **Client components**: Add `'use client'`, use for interactivity
+- Fetch data in server components, pass to client components as props
+
+## Database Patterns (Prisma)
+
+### Imports
+
+```typescript
+import { prisma } from '@hctv/db';
+import type { User, Channel, StreamInfo } from '@hctv/db';
+```
+
+### Common Queries
+
+```typescript
+// FindUnique with relations
+const channel = await prisma.channel.findUnique({
+  where: { name: channelName },
+  include: { owner: true, streamInfo: true },
+});
+
+// FindMany with dynamic filters
+const where: Prisma.StreamInfoWhereInput = {};
+if (isLive) where.isLive = true;
+const streams = await prisma.streamInfo.findMany({ where });
+
+// Create with relations
+await prisma.channel.create({
+  data: {
+    name: channelName,
+    ownerId: user.id,
+    personalFor: { connect: { id: user.id } },
+  },
+});
+
+// Update
+await prisma.streamInfo.update({
+  where: { username },
+  data: { title: newTitle },
+});
+
+// Upsert
+await prisma.streamKey.upsert({
+  create: { key: newKey, channelId },
+  update: { key: newKey },
+  where: { channelId },
+});
+```
+
+### Redis Usage
+
+```typescript
+import { getRedisConnection } from '@hctv/db';
+
+const redis = getRedisConnection();
+await redis.set('key', 'value');
+await redis.get('key');
+await redis.setex('key', 30, 'value'); // with expiry
+```
+
+## API Route Patterns
+
+### Next.js App Router
+
+```typescript
+import { validateRequest } from '@/lib/auth/validate';
+import { prisma } from '@hctv/db';
+import { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const { user } = await validateRequest();
+  if (!user) {
+    return new Response('Unauthorized', { status: 401 });
+  }
+
+  const searchParams = request.nextUrl.searchParams;
+  const param = searchParams.get('param');
+
+  const data = await prisma.model.findMany();
+  return Response.json(data);
+}
+```
+
+### Server Actions
+
+```typescript
+'use server';
+
+export async function createChannel(prev: any, formData: FormData) {
+  const { user } = await validateRequest();
+  if (!user) {
+    return { success: false, error: 'Unauthorized' };
+  }
+
+  const zod = await zodVerify(createChannelSchema, formData);
+  if (!zod.success) {
+    return zod;
+  }
+
+  // ... processing
+
+  return { success: true };
+}
+```
+
+## Important Notes
+
+- **Turbo caching**: Build outputs are cached. Use `--force` to bypass cache
+- **Environment variables**: Use `NEXT_PUBLIC_` prefix for client-side vars
+- **Styling**: Tailwind CSS with shadcn/ui components, use `cn()` for conditional classes
+- **Data fetching**: SWR for client-side, direct Prisma for server components
+- **Validation**: Zod schemas for form and API validation
+- **Cache invalidation**: Use `revalidatePath()` after mutations

README.md

@@ -1,13 +1,11 @@
 # hackclub.tv
 
-This is the source code for [hackclub.tv (hctv.srizan.dev)](https://hctv.srizan.dev), a livestreaming website for hackclubbers.
+This is the source code for [hackclub.tv](https://hackclub.tv), a livestreaming website for Hack Clubbers.
 
-Development has been ongoing for a few months, and the site is now live! There are some half-baked features, but I'm all ears for feedback.
+The development setup guide can be read at <https://docs.hackclub.tv/guides/dev/>
 
-Join [#hctv](https://hackclub.slack.com/archives/C08HGLXGXAB) on the HC Slack for discussion and updates!
+Join [#hctv](https://hackclub.slack.com/archives/C08HGLXGXAB) on the Hack Club Slack for discussion and updates!
 
-## Features
+## Streaming
 
-- High quality video streaming (low latency coming soon)
-- Chat with other viewers
-- Multiaccount support (database schema laid out, UI not implemented)
+To stream to the platform, open [hackclub.tv](https://hackclub.tv), log in, create a channel, press "Edit Livestream" and follow the streaming guide under the "Stream" tab. You can also find the streaming guide at <https://docs.hackclub.tv/guides/streaming/>.

apps/chat/Dockerfile

@@ -1,10 +1,13 @@
 FROM node:lts-alpine AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME/bin:$PATH"
+RUN corepack enable
 
 FROM base AS builder
 RUN apk update
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
-RUN yarn global add turbo@^2
+RUN pnpm add -g turbo@^2
 COPY . .
 
 RUN turbo prune @hctv/chat --docker
@@ -16,10 +19,10 @@ WORKDIR /app
  
 # First install the dependencies
 COPY --from=builder /app/out/json/ .
-RUN yarn install --frozen-lockfile
+RUN pnpm install --frozen-lockfile
 
 COPY --from=builder /app/out/full/ .
-RUN --mount=type=secret,id=TURBO_TOKEN --mount=type=secret,id=TURBO_TEAM TURBO_TOKEN=$(cat /run/secrets/TURBO_TOKEN) TURBO_TEAM=$(cat /run/secrets/TURBO_TEAM) yarn turbo run build --concurrency=1
+RUN --mount=type=secret,id=TURBO_TOKEN --mount=type=secret,id=TURBO_TEAM TURBO_TOKEN=$(cat /run/secrets/TURBO_TOKEN) TURBO_TEAM=$(cat /run/secrets/TURBO_TEAM) pnpm turbo run build --concurrency=1
  
 FROM base AS runner
 WORKDIR /app
@@ -41,4 +44,4 @@ WORKDIR /app/apps/chat
 
 EXPOSE 8000
 
-ENTRYPOINT ["node", "dist/index.js"]
+ENTRYPOINT ["node", "dist/index.js"]

apps/chat/README.md

@@ -1,8 +0,0 @@
-```
-npm install
-npm run dev
-```
-
-```
-open http://localhost:3000
-```

apps/chat/package.json

@@ -7,18 +7,19 @@
     "build": "tsc --build"
   },
   "dependencies": {
-    "@hctv/auth": "*",
-    "@hctv/db": "*",
-    "@hctv/hono-ws": "*",
-    "@hono/node-server": "^1.14.0",
-    "@hono/node-ws": "^1.1.0",
-    "@leeoniya/ufuzzy": "^1.0.18",
+    "@hctv/auth": "workspace:*",
+    "@hctv/db": "workspace:*",
+    "@hctv/hono-ws": "workspace:*",
+    "@hono/node-server": "^2.0.1",
+    "@hono/node-ws": "^1.3.1",
+    "@leeoniya/ufuzzy": "^1.0.19",
     "@oslojs/encoding": "^1.1.0",
-    "hono": "^4.7.5"
+    "hono": "^4.12.16",
+    "prom-client": "^15.1.3"
   },
   "devDependencies": {
-    "@types/node": "^20.11.17",
-    "tsx": "^4.7.1",
-    "typescript": "^5.8.2"
+    "@types/node": "^25.6.0",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.3"
   }
 }

apps/chat/src/metrics.ts

@@ -0,0 +1,251 @@
+import { collectDefaultMetrics, Counter, Gauge, Histogram, Registry } from 'prom-client';
+
+function createMetricsStore() {
+  const register = new Registry();
+  register.setDefaultLabels({ app: 'chat' });
+
+  collectDefaultMetrics({
+    prefix: 'hctv_chat_',
+    register,
+  });
+
+  const websocketConnections = new Gauge({
+    name: 'hctv_chat_websocket_connections',
+    help: 'Current number of active chat websocket connections.',
+    registers: [register],
+  });
+
+  const websocketConnectionsByChannel = new Gauge({
+    name: 'hctv_chat_websocket_connections_by_channel',
+    help: 'Current number of active chat websocket connections by target channel.',
+    labelNames: ['channel'],
+    registers: [register],
+  });
+
+  const websocketConnectionsByAuthMethod = new Gauge({
+    name: 'hctv_chat_websocket_connections_by_auth_method',
+    help: 'Current number of active chat websocket connections by auth method.',
+    labelNames: ['auth_method'],
+    registers: [register],
+  });
+
+  const websocketConnectionAttempts = new Counter({
+    name: 'hctv_chat_websocket_connection_attempts_total',
+    help: 'Total websocket connection attempts grouped by outcome, auth method, and rejection reason.',
+    labelNames: ['outcome', 'auth_method', 'reason'],
+    registers: [register],
+  });
+
+  const incomingMessages = new Counter({
+    name: 'hctv_chat_incoming_messages_total',
+    help: 'Total inbound websocket frames grouped by message type.',
+    labelNames: ['type'],
+    registers: [register],
+  });
+
+  const inboundPayloadBytes = new Counter({
+    name: 'hctv_chat_inbound_payload_bytes_total',
+    help: 'Total inbound websocket payload bytes grouped by message type.',
+    labelNames: ['type'],
+    registers: [register],
+  });
+
+  const messageDuration = new Histogram({
+    name: 'hctv_chat_message_duration_seconds',
+    help: 'Chat websocket message processing time in seconds.',
+    labelNames: ['type', 'outcome'],
+    buckets: [0.0005, 0.001, 0.005, 0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1],
+    registers: [register],
+  });
+
+  const deliveredMessages = new Counter({
+    name: 'hctv_chat_messages_delivered_total',
+    help: 'Total chat messages successfully broadcast, grouped by sender type.',
+    labelNames: ['sender_type'],
+    registers: [register],
+  });
+
+  const deliveredMessageBytes = new Counter({
+    name: 'hctv_chat_message_bytes_delivered_total',
+    help: 'Total message body bytes successfully broadcast, grouped by sender type.',
+    labelNames: ['sender_type'],
+    registers: [register],
+  });
+
+  const channelHistorySize = new Gauge({
+    name: 'hctv_chat_channel_history_size',
+    help: 'Current number of messages retained in Redis history for a channel.',
+    labelNames: ['channel'],
+    registers: [register],
+  });
+
+  const channelHistoryLoadedMessages = new Counter({
+    name: 'hctv_chat_history_messages_loaded_total',
+    help: 'Total history messages loaded from Redis during websocket joins.',
+    labelNames: ['channel'],
+    registers: [register],
+  });
+
+  const moderationState = new Gauge({
+    name: 'hctv_chat_moderation_state',
+    help: 'Current moderation settings by channel.',
+    labelNames: ['channel', 'setting'],
+    registers: [register],
+  });
+
+  const channelUniqueChatters = new Counter({
+    name: 'hctv_chat_unique_chatters_total',
+    help: 'Users who successfully sent at least one chat message, grouped by sender type.',
+    labelNames: ['sender_type'],
+    registers: [register],
+  });
+
+  const moderationActions = new Counter({
+    name: 'hctv_chat_moderation_actions_total',
+    help: 'Successful moderation actions performed in chat.',
+    labelNames: ['action'],
+    registers: [register],
+  });
+
+  const moderationBlocks = new Counter({
+    name: 'hctv_chat_moderation_blocks_total',
+    help: 'Message blocks and throttling decisions grouped by reason.',
+    labelNames: ['reason'],
+    registers: [register],
+  });
+
+  const emojiSearchResults = new Histogram({
+    name: 'hctv_chat_emoji_search_results',
+    help: 'Number of emoji search results returned per query.',
+    labelNames: ['outcome'],
+    buckets: [0, 1, 2, 5, 10, 25, 50, 100, 150],
+    registers: [register],
+  });
+
+  const errors = new Counter({
+    name: 'hctv_chat_errors_total',
+    help: 'Errors observed in the chat service grouped by phase.',
+    labelNames: ['phase'],
+    registers: [register],
+  });
+
+  return {
+    deliveredMessages,
+    deliveredMessageBytes,
+    channelHistoryLoadedMessages,
+    channelHistorySize,
+    emojiSearchResults,
+    errors,
+    inboundPayloadBytes,
+    incomingMessages,
+    messageDuration,
+    moderationActions,
+    moderationBlocks,
+    moderationState,
+    register,
+    channelUniqueChatters,
+    websocketConnectionAttempts,
+    websocketConnections,
+    websocketConnectionsByAuthMethod,
+    websocketConnectionsByChannel,
+  };
+}
+
+const globalForMetrics = globalThis as typeof globalThis & {
+  __hctvChatMetrics?: ReturnType<typeof createMetricsStore>;
+};
+
+const metrics = (globalForMetrics.__hctvChatMetrics ??= createMetricsStore());
+
+export const chatMetricsRegistry = metrics.register;
+
+export function recordChatConnectionAccepted(channel: string, authMethod: string): void {
+  metrics.websocketConnectionAttempts.inc({
+    auth_method: authMethod,
+    outcome: 'accepted',
+    reason: 'none',
+  });
+  metrics.websocketConnections.inc();
+  metrics.websocketConnectionsByChannel.inc({ channel });
+  metrics.websocketConnectionsByAuthMethod.inc({ auth_method: authMethod });
+}
+
+export function recordChatConnectionRejected(authMethod: string, reason: string): void {
+  metrics.websocketConnectionAttempts.inc({ auth_method: authMethod, outcome: 'rejected', reason });
+}
+
+export function recordChatDisconnect(channel: string, authMethod: string): void {
+  metrics.websocketConnections.dec();
+  metrics.websocketConnectionsByChannel.dec({ channel });
+  metrics.websocketConnectionsByAuthMethod.dec({ auth_method: authMethod });
+}
+
+export function recordIncomingChatMessage(type: string, payloadBytes: number): void {
+  metrics.incomingMessages.inc({ type });
+  metrics.inboundPayloadBytes.inc({ type }, payloadBytes);
+}
+
+export function startChatMessageTimer(type: string) {
+  return metrics.messageDuration.startTimer({ type });
+}
+
+export function recordDeliveredChatMessage(senderType: string): void {
+  metrics.deliveredMessages.inc({ sender_type: senderType });
+}
+
+export function recordDeliveredChatMessageBytes(senderType: string, bytes: number): void {
+  metrics.deliveredMessageBytes.inc({ sender_type: senderType }, bytes);
+}
+
+export function setChannelHistorySize(channel: string, size: number): void {
+  metrics.channelHistorySize.set({ channel }, size);
+}
+
+export function recordHistoryMessagesLoaded(channel: string, count: number): void {
+  if (count > 0) {
+    metrics.channelHistoryLoadedMessages.inc({ channel }, count);
+  }
+}
+
+export function setChatModerationState(
+  channel: string,
+  settings: {
+    blockedTerms: number;
+    maxMessageLength: number;
+    rateLimitCount: number;
+    rateLimitWindowSeconds: number;
+    slowModeSeconds: number;
+  }
+): void {
+  metrics.moderationState.set({ channel, setting: 'blocked_terms' }, settings.blockedTerms);
+  metrics.moderationState.set({ channel, setting: 'slow_mode_seconds' }, settings.slowModeSeconds);
+  metrics.moderationState.set(
+    { channel, setting: 'max_message_length' },
+    settings.maxMessageLength
+  );
+  metrics.moderationState.set({ channel, setting: 'rate_limit_count' }, settings.rateLimitCount);
+  metrics.moderationState.set(
+    { channel, setting: 'rate_limit_window_seconds' },
+    settings.rateLimitWindowSeconds
+  );
+}
+
+export function recordUniqueChatter(senderType: string): void {
+  metrics.channelUniqueChatters.inc({ sender_type: senderType });
+}
+
+export function recordChatModerationAction(action: string): void {
+  metrics.moderationActions.inc({ action });
+}
+
+export function recordChatModerationBlock(reason: string): void {
+  metrics.moderationBlocks.inc({ reason });
+}
+
+export function recordChatError(phase: string): void {
+  metrics.errors.inc({ phase });
+}
+
+export function recordEmojiSearchResults(outcome: string, count: number): void {
+  metrics.emojiSearchResults.observe({ outcome }, count);
+}

apps/chat/src/types/chat.ts

@@ -0,0 +1,70 @@
+import type { ModifiedWebSocket } from '@hctv/hono-ws';
+
+export interface ChatUser {
+  id: string;
+  username: string;
+  pfpUrl: string;
+  displayName?: string;
+  isBot: boolean;
+  moderatorUserId: string;
+  isPlatformAdmin: boolean;
+  channelRole: 'owner' | 'manager' | 'chatModerator' | 'botModerator' | null;
+}
+
+export interface ChatModerationSettingsShape {
+  blockedTerms: string[];
+  slowModeSeconds: number;
+  maxMessageLength: number;
+  rateLimitCount: number;
+  rateLimitWindowSeconds: number;
+}
+
+export interface ChatRestrictionState {
+  type: 'timeout' | 'ban';
+  reason: string;
+  expiresAt: Date | null;
+}
+
+export interface ChatSocket {
+  readyState: number;
+  OPEN: number;
+  send: (data: string) => void;
+  close: () => void;
+  wss: {
+    clients: Set<unknown>;
+  };
+  targetUsername?: string;
+  channelId?: string;
+  chatUser?: ChatUser | null;
+  personalChannel?: any;
+  viewerId?: string;
+  isModerator?: boolean;
+  metricsTracked?: boolean;
+  metricsAuthMethod?: string;
+  excludeFromViewerCount?: boolean;
+  raw?:
+    | (ModifiedWebSocket & {
+        targetUsername?: string;
+        channelId?: string;
+        chatUser?: ChatUser | null;
+        personalChannel?: any;
+        isModerator?: boolean;
+        metricsTracked?: boolean;
+        metricsAuthMethod?: string;
+        excludeFromViewerCount?: boolean;
+      })
+    | null;
+}
+
+export type ChatModerationCommand = {
+  type:
+    | 'mod:deleteMessage'
+    | 'mod:timeoutUser'
+    | 'mod:banUser'
+    | 'mod:unbanUser'
+    | 'mod:liftTimeout';
+  msgId?: string;
+  targetUserId?: string;
+  durationSeconds?: number;
+  reason?: string;
+};

apps/chat/src/utils/moderation.ts

@@ -0,0 +1,417 @@
+import { ChatModerationAction, prisma } from '@hctv/db';
+import { recordChatModerationAction } from '../metrics.js';
+import type {
+  ChatModerationCommand,
+  ChatRestrictionState,
+  ChatSocket,
+  ChatUser,
+} from '../types/chat.js';
+
+const ROLE_RANK: Record<NonNullable<ChatUser['channelRole']> | '__none__', number> = {
+  owner: 100,
+  manager: 50,
+  chatModerator: 10,
+  botModerator: 10,
+  __none__: 0,
+};
+
+function roleRank(role: ChatUser['channelRole']): number {
+  return role ? (ROLE_RANK[role] ?? 0) : ROLE_RANK.__none__;
+}
+
+type ModerationContext = {
+  chatUser: ChatUser;
+  targetUsername: string;
+  channelId: string;
+};
+
+type DeleteMessageDeps = {
+  deleteMessageFromHistory: (
+    targetUsername: string,
+    msgId: string
+  ) => Promise<{ deleted: boolean; messageContent?: string }>;
+  logModerationEvent: (payload: {
+    action: ChatModerationAction;
+    channelId: string;
+    moderatorId: string;
+    targetUserId?: string;
+    reason?: string;
+    details?: Record<string, unknown>;
+  }) => Promise<void>;
+  broadcastToChannel: (
+    targetUsername: string,
+    ws: ChatSocket,
+    payload: Record<string, unknown>
+  ) => void;
+};
+
+type UserRestrictionDeps = {
+  logModerationEvent: (payload: {
+    action: ChatModerationAction;
+    channelId: string;
+    moderatorId: string;
+    targetUserId?: string;
+    reason?: string;
+    details?: Record<string, unknown>;
+  }) => Promise<void>;
+  broadcastRestrictionStateToUser: (
+    targetUsername: string,
+    targetUserId: string,
+    channelId: string,
+    ws: ChatSocket
+  ) => Promise<void>;
+  broadcastToChannel: (
+    targetUsername: string,
+    ws: ChatSocket,
+    payload: Record<string, unknown>
+  ) => void;
+};
+
+export function sendModerationError(
+  socket: ChatSocket,
+  code: string,
+  message: string,
+  restriction?: ChatRestrictionState
+) {
+  socket.send(
+    JSON.stringify({
+      type: 'moderationError',
+      code,
+      message,
+      restriction,
+    })
+  );
+}
+
+async function requireModerationContext(
+  socket: ChatSocket,
+  socketState: ChatSocket
+): Promise<ModerationContext | null> {
+  if (!socketState.chatUser || !socketState.targetUsername || !socketState.channelId) {
+    sendModerationError(socket, 'FORBIDDEN', 'You do not have permission to moderate this chat.');
+    return null;
+  }
+
+  const chatUser = socketState.chatUser;
+  const channelId = socketState.channelId;
+
+  const [channel, moderatorRecord] = await Promise.all([
+    prisma.channel.findUnique({
+      where: { id: channelId },
+      select: {
+        ownerId: true,
+        managers: { select: { id: true } },
+        chatModerators: { select: { id: true } },
+        chatModeratorBots: { select: { id: true } },
+      },
+    }),
+    prisma.user.findUnique({
+      where: { id: chatUser.moderatorUserId },
+      select: { isAdmin: true },
+    }),
+  ]);
+
+  if (!channel) {
+    sendModerationError(socket, 'FORBIDDEN', 'You do not have permission to moderate this chat.');
+    return null;
+  }
+
+  const isPlatformAdmin = chatUser.isBot ? false : Boolean(moderatorRecord?.isAdmin);
+
+  let channelRole: ChatUser['channelRole'] = null;
+  if (chatUser.isBot) {
+    if (channel.chatModeratorBots.some((b) => b.id === chatUser.id)) {
+      channelRole = 'botModerator';
+    }
+  } else if (channel.ownerId === chatUser.id) {
+    channelRole = 'owner';
+  } else if (channel.managers.some((m) => m.id === chatUser.id)) {
+    channelRole = 'manager';
+  } else if (channel.chatModerators.some((m) => m.id === chatUser.id)) {
+    channelRole = 'chatModerator';
+  }
+
+  const isModerator =
+    isPlatformAdmin ||
+    channelRole === 'owner' ||
+    channelRole === 'manager' ||
+    channelRole === 'chatModerator' ||
+    channelRole === 'botModerator';
+
+  if (!isModerator) {
+    sendModerationError(socket, 'FORBIDDEN', 'You do not have permission to moderate this chat.');
+    return null;
+  }
+
+  const resolvedChatUser: ChatUser = { ...chatUser, isPlatformAdmin, channelRole };
+
+  return {
+    chatUser: resolvedChatUser,
+    targetUsername: socketState.targetUsername,
+    channelId,
+  };
+}
+
+async function resolveModerationTarget(
+  socket: ChatSocket,
+  actingModeratorUserId: string,
+  rawTargetUserId: unknown,
+  channelId: string
+) {
+  const targetUserId = typeof rawTargetUserId === 'string' ? rawTargetUserId : '';
+
+  if (!targetUserId || targetUserId === actingModeratorUserId) {
+    sendModerationError(socket, 'INVALID_TARGET', 'Invalid moderation target.');
+    return null;
+  }
+
+  const targetUserRecord = await prisma.user.findUnique({
+    where: { id: targetUserId },
+    select: {
+      isAdmin: true,
+      personalChannel: { select: { name: true } },
+      ownedChannels: { where: { id: channelId }, select: { id: true } },
+      managedChannels: { where: { id: channelId }, select: { id: true } },
+      chatModeratedChannels: { where: { id: channelId }, select: { id: true } },
+    },
+  });
+
+  if (!targetUserRecord) {
+    sendModerationError(socket, 'INVALID_TARGET', 'Target user no longer exists.');
+    return null;
+  }
+
+  let targetChannelRole: ChatUser['channelRole'] = null;
+  if (targetUserRecord.ownedChannels.length > 0) {
+    targetChannelRole = 'owner';
+  } else if (targetUserRecord.managedChannels.length > 0) {
+    targetChannelRole = 'manager';
+  } else if (targetUserRecord.chatModeratedChannels.length > 0) {
+    targetChannelRole = 'chatModerator';
+  }
+
+  return {
+    targetUserId,
+    targetUserRecord,
+    targetChannelRole,
+    resolvedTargetUsername: targetUserRecord.personalChannel?.name ?? 'that user',
+  };
+}
+
+async function ensureAdminTargetModerationAllowed(
+  socket: ChatSocket,
+  actingModeratorUserId: string,
+  targetIsAdmin: boolean
+) {
+  if (!targetIsAdmin) {
+    return true;
+  }
+
+  const actingUserRecord = await prisma.user.findUnique({
+    where: { id: actingModeratorUserId },
+    select: { isAdmin: true },
+  });
+
+  if (!actingUserRecord?.isAdmin) {
+    sendModerationError(
+      socket,
+      'FORBIDDEN',
+      'Platform admins cannot be moderated via chat commands.'
+    );
+    return false;
+  }
+
+  return true;
+}
+
+function ensureRoleHierarchyAllowed(
+  socket: ChatSocket,
+  actorRole: ChatUser['channelRole'],
+  actorIsPlatformAdmin: boolean,
+  targetRole: ChatUser['channelRole']
+): boolean {
+  if (actorIsPlatformAdmin) return true;
+
+  if (roleRank(actorRole) <= roleRank(targetRole)) {
+    sendModerationError(
+      socket,
+      'FORBIDDEN',
+      'You cannot moderate a user with an equal or higher role than yours.'
+    );
+    return false;
+  }
+
+  return true;
+}
+
+export async function handleDeleteMessageCommand(
+  socket: ChatSocket,
+  socketState: ChatSocket,
+  msg: ChatModerationCommand,
+  deps: DeleteMessageDeps
+) {
+  const context = await requireModerationContext(socket, socketState);
+  if (!context) {
+    return;
+  }
+
+  const msgId = typeof msg.msgId === 'string' ? msg.msgId : '';
+  if (!msgId) {
+    sendModerationError(socket, 'INVALID_REQUEST', 'Invalid message id.');
+    return;
+  }
+
+  const deletedMessage = await deps.deleteMessageFromHistory(context.targetUsername, msgId);
+  if (!deletedMessage.deleted) {
+    sendModerationError(socket, 'NOT_FOUND', 'Message not found.');
+    return;
+  }
+
+  await deps.logModerationEvent({
+    action: ChatModerationAction.MESSAGE_DELETED,
+    channelId: context.channelId,
+    moderatorId: context.chatUser.moderatorUserId,
+    reason: 'Message deleted by moderator',
+    details: {
+      msgId,
+      messageContent: deletedMessage.messageContent,
+    },
+  });
+  recordChatModerationAction('message_deleted');
+
+  deps.broadcastToChannel(context.targetUsername, socket, { type: 'messageDeleted', msgId });
+}
+
+export async function handleUserRestrictionCommand(
+  socket: ChatSocket,
+  socketState: ChatSocket,
+  msg: ChatModerationCommand,
+  deps: UserRestrictionDeps
+) {
+  const context = await requireModerationContext(socket, socketState);
+  if (!context) {
+    return;
+  }
+
+  const actingModeratorUserId = context.chatUser.moderatorUserId;
+  const target = await resolveModerationTarget(
+    socket,
+    actingModeratorUserId,
+    msg.targetUserId,
+    context.channelId
+  );
+  if (!target) {
+    return;
+  }
+
+  const canModerateTarget = await ensureAdminTargetModerationAllowed(
+    socket,
+    actingModeratorUserId,
+    target.targetUserRecord.isAdmin
+  );
+  if (!canModerateTarget) {
+    return;
+  }
+
+  const hierarchyAllowed = ensureRoleHierarchyAllowed(
+    socket,
+    context.chatUser.channelRole,
+    context.chatUser.isPlatformAdmin,
+    target.targetChannelRole
+  );
+  if (!hierarchyAllowed) {
+    return;
+  }
+
+  if (msg.type === 'mod:unbanUser' || msg.type === 'mod:liftTimeout') {
+    await prisma.chatUserBan.deleteMany({
+      where: {
+        channelId: context.channelId,
+        userId: target.targetUserId,
+      },
+    });
+
+    await deps.logModerationEvent({
+      action: ChatModerationAction.USER_UNBANNED,
+      channelId: context.channelId,
+      moderatorId: actingModeratorUserId,
+      targetUserId: target.targetUserId,
+      reason: 'User unbanned in chat',
+    });
+    recordChatModerationAction('user_unbanned');
+
+    await deps.broadcastRestrictionStateToUser(
+      context.targetUsername,
+      target.targetUserId,
+      context.channelId,
+      socket
+    );
+
+    deps.broadcastToChannel(context.targetUsername, socket, {
+      type: 'systemMsg',
+      message: `${target.resolvedTargetUsername} can chat again.`,
+    });
+    return;
+  }
+
+  const reason =
+    typeof msg.reason === 'string' && msg.reason.trim().length > 0
+      ? msg.reason.trim().slice(0, 250)
+      : msg.type === 'mod:timeoutUser'
+        ? 'Timed out by moderator'
+        : 'Banned by moderator';
+  const durationSeconds =
+    msg.type === 'mod:timeoutUser'
+      ? Math.min(Math.max(Number(msg.durationSeconds) || 300, 10), 60 * 60 * 24)
+      : null;
+  const expiresAt = durationSeconds ? new Date(Date.now() + durationSeconds * 1000) : null;
+
+  await prisma.chatUserBan.upsert({
+    where: {
+      channelId_userId: {
+        channelId: context.channelId,
+        userId: target.targetUserId,
+      },
+    },
+    create: {
+      channelId: context.channelId,
+      userId: target.targetUserId,
+      bannedById: actingModeratorUserId,
+      reason,
+      expiresAt,
+    },
+    update: {
+      bannedById: actingModeratorUserId,
+      reason,
+      expiresAt,
+    },
+  });
+
+  await deps.logModerationEvent({
+    action:
+      msg.type === 'mod:timeoutUser'
+        ? ChatModerationAction.USER_TIMEOUT
+        : ChatModerationAction.USER_BANNED,
+    channelId: context.channelId,
+    moderatorId: actingModeratorUserId,
+    targetUserId: target.targetUserId,
+    reason,
+    details: durationSeconds ? { durationSeconds } : undefined,
+  });
+  recordChatModerationAction(msg.type === 'mod:timeoutUser' ? 'user_timeout' : 'user_banned');
+
+  await deps.broadcastRestrictionStateToUser(
+    context.targetUsername,
+    target.targetUserId,
+    context.channelId,
+    socket
+  );
+
+  deps.broadcastToChannel(context.targetUsername, socket, {
+    type: 'systemMsg',
+    message:
+      msg.type === 'mod:timeoutUser'
+        ? `${target.resolvedTargetUsername} was timed out for ${durationSeconds}s.`
+        : `${target.resolvedTargetUsername} was banned.`,
+  });
+}

apps/docs/.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

apps/docs/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

apps/docs/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

apps/docs/astro.config.mjs

@@ -0,0 +1,45 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+import mermaid from 'astro-mermaid';
+import catppuccin from '@catppuccin/starlight';
+import starlightTypeDoc, { typeDocSidebarGroup } from 'starlight-typedoc';
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [
+    mermaid({
+      theme: 'base',
+      autoTheme: true,
+    }),
+    starlight({
+      title: 'hctv docs',
+      social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/SrIzan10/hctv' }],
+      plugins: [
+        catppuccin({
+          dark: { flavor: 'mocha', accent: 'blue' },
+          light: { flavor: 'latte', accent: 'blue' },
+        }),
+        starlightTypeDoc({
+          entryPoints: ['../../packages/sdk/src/index.ts'],
+          tsconfig: '../../packages/sdk/tsconfig.json',
+          output: 'typedoc-sdk',
+          sidebar: {
+            label: 'SDK Reference',
+          },
+        }),
+      ],
+      sidebar: [
+        {
+          label: 'API',
+          autogenerate: { directory: 'api' },
+        },
+        {
+          label: 'Guides',
+          autogenerate: { directory: 'guides' },
+        },
+        typeDocSidebarGroup,
+      ],
+    }),
+  ],
+});

apps/docs/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@hctv/docs",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/starlight": "^0.38.4",
+    "@catppuccin/starlight": "^2.0.1",
+    "astro": "^6.3.3",
+    "astro-mermaid": "^2.0.1",
+    "mermaid": "^11.14.0",
+    "sharp": "^0.34.5",
+    "starlight-typedoc": "^0.21.5",
+    "typedoc": "^0.28.19",
+    "typedoc-plugin-markdown": "^4.11.0"
+  }
+}

apps/docs/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M81 36 64 0 47 36l-1 2-9-10a6 6 0 0 0-9 9l10 10h-2L0 64l36 17h2L28 91a6 6 0 1 0 9 9l9-10 1 2 17 36 17-36v-2l9 10a6 6 0 1 0 9-9l-9-9 2-1 36-17-36-17-2-1 9-9a6 6 0 1 0-9-9l-9 10v-2Zm-17 2-2 5c-4 8-11 15-19 19l-5 2 5 2c8 4 15 11 19 19l2 5 2-5c4-8 11-15 19-19l5-2-5-2c-8-4-15-11-19-19l-2-5Z" clip-rule="evenodd"/><path d="M118 19a6 6 0 0 0-9-9l-3 3a6 6 0 1 0 9 9l3-3Zm-96 4c-2 2-6 2-9 0l-3-3a6 6 0 1 1 9-9l3 3c3 2 3 6 0 9Zm0 82c-2-2-6-2-9 0l-3 3a6 6 0 1 0 9 9l3-3c3-2 3-6 0-9Zm96 4a6 6 0 0 1-9 9l-3-3a6 6 0 1 1 9-9l3 3Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>

apps/docs/src/content.config.ts

@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};

apps/docs/src/content/docs/api/chat.mdx

@@ -0,0 +1,353 @@
+---
+title: Chat
+description: Chat websocket
+---
+
+import { Aside } from '@astrojs/starlight/components';
+
+The chat system is powered by a websocket server. Please read the entire page before implementing anything, as there are some important notes.
+
+## Connection and messages
+
+The websocket server is located at `wss://hackclub.tv/api/chat/ws/:username`, where `:username` is the channel you want to connect to.
+
+You'll need to provide authentication, which can be done by providing an `auth_session` cookie, just like the REST API.
+
+<Aside type="tip">
+Bot accounts are now supported. You can choose to connect as a bot by providing a bot account's API key in one of two ways:
+- Using the `Authorization` header: `Bearer hctvb_xxxxxxx`
+- Using the `?botAuth=hctvb_xxxxxxx` query parameter
+
+**Security Note:** When using the `?botAuth=` query parameter, be aware that query parameters may be logged in server logs, and/or proxy logs. Use the `Authorization` header method whenever possible. The query parameter method should only be used when connecting from an environment where headers cannot be set.
+
+It is highly advised to use a bot account for any automated task, and to implement anything pointed out in this page.
+
+</Aside>
+
+Once connected, you must implement a subroutine in your code to send ping messages every about 5 seconds. This is because of Cloudflare limitations.
+
+Messages are sent and received in JSON format. The following message types are supported:
+
+- `session`: sent by the server immediately upon connection.
+  - received by client:
+
+    ```json
+    {
+      "type": "session",
+      "viewer": {
+        "id": "user_id",
+        "username": "your_username"
+      },
+      "permissions": {
+        "canModerate": false
+      },
+      "moderation": {
+        "hasBlockedTerms": false,
+        "slowModeSeconds": 0,
+        "maxMessageLength": 400
+      }
+    }
+    ```
+
+    `viewer` is `null` for unauthenticated (grant-only) connections. `canModerate` is `true` for channel owners, managers, moderators, and platform admins.
+
+- `chatAccess`: sent by the server on connect (for authenticated non-bot users) and whenever a user's restriction state changes.
+  - received by client:
+
+    ```json
+    {
+      "type": "chatAccess",
+      "canSend": true,
+      "restriction": null
+    }
+    ```
+
+    When the user is restricted, `canSend` is `false` and `restriction` contains:
+
+    ```json
+    {
+      "type": "timeout",
+      "reason": "Timed out by moderator",
+      "expiresAt": "2026-01-01T00:00:00.000Z"
+    }
+    ```
+
+    `type` is either `"timeout"` or `"ban"`. `expiresAt` is an ISO 8601 string for timeouts, or `null` for permanent bans.
+
+- `ping`: a ping message to keep the connection alive.
+  - sent by client:
+
+    ```json
+    {
+      "type": "ping"
+    }
+    ```
+
+  - received by client:
+
+    ```json
+    {
+      "type": "pong"
+    }
+    ```
+
+- `message`: a chat message.
+  - sent by client:
+
+    ```json
+    {
+      "type": "message",
+      "message": "Hello, world!"
+    }
+    ```
+
+  - received by client (broadcast to all viewers of the channel):
+
+    ```json
+    {
+      "type": "message",
+      "msgId": "uuid-v4",
+      "user": {
+        "id": "user_id",
+        "username": "user_who_sent_message",
+        "pfpUrl": "https://example.com/avatar.png",
+        "displayName": "Display Name",
+        "isBot": false,
+        "isPlatformAdmin": false,
+        "channelRole": null
+      },
+      "message": "Hello, world!"
+    }
+    ```
+
+    `channelRole` is one of `"owner"`, `"manager"`, `"chatModerator"`, `"botModerator"`, or `null`. `displayName` may be `undefined` for regular users.
+
+- `history`: the recent chat history, sent upon connection.
+  - received by client:
+
+    ```json
+    {
+      "type": "history",
+      "messages": [
+        {
+          "type": "message",
+          "msgId": "uuid-v4",
+          "user": {
+            "id": "user_id",
+            "username": "user_who_sent_message",
+            "pfpUrl": "https://example.com/avatar.png",
+            "displayName": "Display Name",
+            "isBot": false,
+            "isPlatformAdmin": false,
+            "channelRole": null
+          },
+          "message": "Hello, world!"
+        }
+      ]
+    }
+    ```
+
+    Up to 100 messages are returned. Each message has the same shape as a received `message` event.
+
+- `systemMsg`: a system notification broadcast to all viewers, e.g. when a user is banned or unbanned.
+  - received by client:
+
+    ```json
+    {
+      "type": "systemMsg",
+      "message": "username was banned."
+    }
+    ```
+
+- `moderationError`: sent to the acting client when a message or moderation action is rejected.
+  - received by client:
+
+    ```json
+    {
+      "type": "moderationError",
+      "code": "RATE_LIMIT",
+      "message": "You are sending messages too fast.",
+      "restriction": null
+    }
+    ```
+
+    `restriction` is only present (non-null) for `TIMED_OUT` and `BANNED` codes, and has the same shape as the `restriction` field in `chatAccess`. Possible codes:
+
+  | Code               | Trigger                                        |
+  | ------------------ | ---------------------------------------------- |
+  | `FORBIDDEN`        | Not permitted to perform the action            |
+  | `RATE_LIMIT`       | Too many messages in the rate limit window     |
+  | `SLOW_MODE`        | Sent before the slow mode cooldown expired     |
+  | `TIMED_OUT`        | User is currently timed out                    |
+  | `BANNED`           | User is permanently banned                     |
+  | `MESSAGE_TOO_LONG` | Message exceeds `maxMessageLength`             |
+  | `BLOCKED_TERM`     | Message contains a blocked term                |
+  | `INVALID_TARGET`   | Moderation target is invalid or does not exist |
+  | `INVALID_REQUEST`  | Malformed moderation command                   |
+  | `NOT_FOUND`        | Target message not found (delete)              |
+
+## Moderation commands
+
+moderation commands are only available to authenticated users with the `canModerate` permission (`owner`, `manager`, `chatModerator`, `botModerator`, or platform admin). sending any of these without permission returns a `moderationError` with code `FORBIDDEN`.
+
+obviously, role hierarchy is enforced: a `chatModerator` cannot moderate a `manager` or `owner`. Platform admins bypass hierarchy checks entirely.
+
+- `mod:deleteMessage`: delete a message from the chat history and broadcast its removal.
+  - sent by client:
+
+    ```json
+    {
+      "type": "mod:deleteMessage",
+      "msgId": "uuid-of-message-to-delete"
+    }
+    ```
+
+  - received by all clients on success:
+
+    ```json
+    {
+      "type": "messageDeleted",
+      "msgId": "uuid-of-message-to-delete"
+    }
+    ```
+
+- `mod:timeoutUser`: temporarily restrict a user from sending messages.
+  - sent by client:
+
+    ```json
+    {
+      "type": "mod:timeoutUser",
+      "targetUserId": "user_id",
+      "durationSeconds": 300,
+      "reason": "Optional reason"
+    }
+    ```
+
+    `durationSeconds` is clamped between 10 and 86400 (24 hours). Defaults to 300 if omitted. On success, a `systemMsg` is broadcast and the target receives a `chatAccess` update.
+
+- `mod:banUser`: permanently ban a user from sending messages.
+  - sent by client:
+
+    ```json
+    {
+      "type": "mod:banUser",
+      "targetUserId": "user_id",
+      "reason": "Optional reason"
+    }
+    ```
+
+    On success, a `systemMsg` is broadcast and the target receives a `chatAccess` update.
+
+- `mod:liftTimeout` / `mod:unbanUser`: remove an active timeout or ban.
+  - sent by client:
+
+    ```json
+    {
+      "type": "mod:liftTimeout",
+      "targetUserId": "user_id"
+    }
+    ```
+
+    Both types behave identically and remove any active restriction for the target user. On success, a `systemMsg` is broadcast and the target receives a `chatAccess` update with `canSend: true`.
+
+## Emoji handling
+
+_diagram source: devin deepwiki_
+
+```mermaid
+graph TB
+    subgraph "Emoji Processing Pipeline"
+        CHAT_MSG["Chat Message"]
+        PATTERN_MATCH["Regex :emoji: Pattern"]
+        EMOJI_REQUEST["emojiMsg WebSocket"]
+        REDIS_LOOKUP["Redis HGET emojis"]
+        FUZZY_SEARCH["uFuzzy"]
+        EMOJI_RESPONSE["emojiMsgResponse"]
+    end
+
+    subgraph "Redis Storage"
+        EMOJI_HASH["emojis hash key"]
+        EMOJI_PREFIXED["emoji:{name} url"]
+        EMOJIS_PREFIXED["emojis:{name} url"]
+    end
+
+    CHAT_MSG --> PATTERN_MATCH
+    PATTERN_MATCH --":emojiname:"--> EMOJI_REQUEST
+    EMOJI_REQUEST --> REDIS_LOOKUP
+
+    REDIS_LOOKUP --> EMOJI_HASH
+    REDIS_LOOKUP --> EMOJI_PREFIXED
+    REDIS_LOOKUP --> EMOJIS_PREFIXED
+
+    REDIS_LOOKUP --> EMOJI_RESPONSE
+
+    FUZZY_SEARCH --> EMOJI_HASH
+    FUZZY_SEARCH --"search results"--> EMOJI_RESPONSE
+```
+
+When a chat message is sent, the server looks for patterns in the format `:emojiname:` using regex. For each match, it sends a request to the `emojiMsg` WebSocket.  
+The server then checks Redis for the emoji URL and returns it.
+
+When a user wants to look up an emoji (by typing `:(partial name)`), the server uses uFuzzy to find matching emojis in the Redis `emojis` hash key and returns the results.
+
+<Aside type="caution">
+  `emojiMsg` and `emojiSearch` require an authenticated connection. They are not available to
+  grant-only (OBS) viewers.
+</Aside>
+
+Here's what gets sent on the websocket:
+
+- `emojiMsg`: Looks up emojis
+  - sent by client:
+
+    ```json
+    {
+      "type": "emojiMsg",
+      "emojis": ["aga", "yapa", "heavysob", "yay", "yay-bounce"]
+    }
+    ```
+
+  - received by client:
+
+    ```json
+    {
+      "type": "emojiMsgResponse",
+      "emojis": {
+        "aga": "https://emoji.slack-edge.com/aga.png",
+        "yapa": "https://emoji.slack-edge.com/yapa.png",
+        "heavysob": "https://emoji.slack-edge.com/heavysob.png",
+        "yay": "https://emoji.slack-edge.com/yay.png",
+        "yay-bounce": "https://emoji.slack-edge.com/yay-bounce.png"
+      }
+    }
+    ```
+
+- `emojiSearch`: Searches for emojis
+  - sent by client:
+
+    ```json
+    {
+      "type": "emojiSearch",
+      "searchTerm": "aga"
+    }
+    ```
+
+  - received by client:
+
+    ```json
+    {
+      "type": "emojiSearchResponse",
+      "results": [
+        "aga",
+        "aga-brick-throw",
+        "aga-dance",
+        "aga-transparent",
+        "a-aga",
+        "a-aga-transparent",
+        "agaban",
+        "agaboing",
+        "agabounce",
+        "agabusiness"
+      ]
+    }
+    ```

apps/docs/src/content/docs/api/index.mdx

@@ -0,0 +1,19 @@
+---
+title: API Documentation
+description: Documented API endpoints for hackclub.tv
+---
+
+hctv is meant to be one of the most hackable streaming platforms out there. to that end, we have a (currently limited) public API that you can use to interact with the platform.
+
+since this is beta software, the API is subject to change. additionally, many endpoints are yet not implemented or not fun to implement. please send a message in #hctv on the Hack Club Slack if you have any requests.
+
+## Base url
+
+base url for all endpoints is `https://hackclub.tv/api`.
+
+## Authentication
+
+most endpoints require authentication. this will be pointed out in the documentation.  
+for now, it is done via a cookie called `auth_session` (as per lucia auth). this will change in the future as bot accounts are planned.
+
+you'll need your user account to authenticate. as a recommendation, open an incognito window, log in to hctv, and copy the `auth_session` cookie from there.

apps/docs/src/content/docs/api/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "API",
+  "description": "Documented API endpoints for hackclub.tv"
+}

apps/docs/src/content/docs/api/rtmp.mdx

@@ -0,0 +1,12 @@
+---
+title: RTMP
+description: RTMP related endpoint group
+---
+
+## POST `/rtmp/streamKey`
+regenerates your stream key. **authentication required**.  
+body parameters (json):
+- `channel`: string - the channel name you want to regenerate the key for. must be one of your channels.
+
+response (json):
+- `key`: string - the new stream key

apps/docs/src/content/docs/api/stream.mdx

@@ -0,0 +1,47 @@
+---
+title: Stream
+description: Stream related endpoint group
+---
+
+## GET `/stream/follow`
+checks if **authenticated user** is following a certain channel.  
+query parameters:
+- `username`: string - the channel name you want to check.
+
+response (json):
+- `following`: boolean - whether the authenticated user is following the channel or not.
+
+## POST `/stream/follow`
+cycle through follow or unfollow a channel. **authentication required**.  
+body parameters (json):
+- `channel`: string - the channel name you want to make the action. must be one of your channels.
+
+response (json):
+- `success`: boolean - whether the operation was successful or not.
+
+## GET `/stream/followers/:channel`
+gets the followcount of a channel.
+path parameters:
+- `channel`: string - the channel name you want to get the followcount of.
+
+response (json):
+- `count`: integer - the number of followers the channel has.
+- `success`: boolean - whether the operation was successful or not. (true if 200 status code)
+
+## GET `/stream/info`
+get stream info of certain channels by filtering. **authentication on some**.
+query parameters:
+- `owned`: boolean (optional) - if true, only returns channels owned by the authenticated user. requires authentication.
+- `personal`: boolean (optional) - if true, only returns personal channels. requires authentication.
+- `live`: boolean (optional) - if true, only returns channels that are currently live.
+
+response (json):
+- StreamInfo[] (check database schema for all returned data or just try it out!)
+
+## GET `/stream/thumb/:channel`
+gets the preview thumbnail of a channel's livestream. **authentication required**
+
+path parameters:
+- `channel`: string - the channel name you want to get the thumbnail of.
+
+response: image (webp)

apps/docs/src/content/docs/guides/dev.mdx

@@ -0,0 +1,54 @@
+---
+title: Development Setup
+description: Instructions to set up a local development environment for hackclub.tv
+---
+
+Follow these steps to run hackclub.tv locally:
+
+1. Clone the repository.
+2. Install dependencies:
+
+```
+pnpm install
+```
+
+3. Create environment files:
+
+```
+cp apps/web/.env.example apps/web/.env && cp packages/db/.env.example packages/db/.env
+```
+
+4. Fill in the required values in both .env files.
+5. Start the development servers:
+
+```
+pnpm dev
+```
+
+6. Run database migrations (after environment variables are set):
+
+```
+pnpm db:migrate
+```
+
+- Slack notifier app manifest:
+```
+display_information:
+  # Please change the name to something linked to you.
+  name: hctv notifier dev
+features:
+  bot_user:
+    # Same here.
+    display_name: hctv notifier dev
+    always_online: false
+oauth_config:
+  scopes:
+    bot:
+      - chat:write
+      - users:read
+      - channels:join
+settings:
+  org_deploy_enabled: false
+  socket_mode_enabled: false
+  token_rotation_enabled: false
+```

apps/docs/src/content/docs/guides/meta.json

@@ -0,0 +1,4 @@
+{
+  "title": "Guides",
+  "description": "Useful guides to help you get started with hackclub.tv"
+}

apps/docs/src/content/docs/guides/python-wrapper.mdx

@@ -0,0 +1,333 @@
+---
+title: Python wrapper
+description: How to use hctv's unofficial Python wrapper.
+---
+
+A Pycord-style Python wrapper for [hackclub.tv](https://hackclub.tv), made by [Christian](https://github.com/christianwell). Build chat bots with decorators and minimal boilerplate.
+
+Check it out on PyPI: https://pypi.org/project/hctvwrapper/
+You can take a look at the code [here](https://github.com/christianwell/hctvwrapper)
+
+```
+pip install hctvwrapper
+```
+
+## Quick Start
+
+```python
+import os
+from hctvwrapper import Bot
+
+bot = Bot(command_prefix="!")
+
+@bot.event
+async def on_ready(session):
+    print(f"Logged in as {session.viewer.username}")
+
+@bot.event
+async def on_message(message):
+    print(f"{message.author.username}: {message.content}")
+
+@bot.command()
+async def ping(ctx):
+    await ctx.reply("pong!")
+
+bot.run(os.environ['BOT_TOKEN'], channel="bot-playground")
+```
+
+### Getting a Bot Token
+
+1. Go to [hackclub.tv](https://hackclub.tv)
+2. Create a bot account and get your API key (starts with `hctvb_`)
+3. Set it as an environment variable: `export BOT_TOKEN=hctvb_xxx`
+
+## Guide
+
+### Events
+
+Register event handlers with `@bot.event`. The function name determines which event it handles.
+
+```python
+@bot.event
+async def on_ready(session):
+    """Fired when the bot connects and receives session info."""
+    print(f"Logged in as {session.viewer.username}")
+    print(f"Can moderate: {session.permissions.can_moderate}")
+    print(f"Max message length: {session.moderation.max_message_length}")
+
+@bot.event
+async def on_message(message):
+    """Fired on every chat message."""
+    print(f"[{message.channel}] {message.author.username}: {message.content}")
+    # message.author.id, .pfp_url, .display_name, .is_bot,
+    # .is_platform_admin, .channel_role
+    # message.msg_id, .timestamp, .type
+
+@bot.event
+async def on_history(messages):
+    """Fired once on connect with up to 100 recent messages."""
+    print(f"Got {len(messages)} historical messages")
+
+@bot.event
+async def on_system_message(message):
+    """Fired on system notifications (bans, unbans, etc.)."""
+    print(f"System: {message.content}")
+
+@bot.event
+async def on_message_deleted(event):
+    """Fired when a message is deleted by a moderator."""
+    print(f"Message {event.msg_id} deleted in {event.channel}")
+
+@bot.event
+async def on_chat_access(access, channel):
+    """Fired when chat permissions change (timeouts, bans)."""
+    print(f"Can send in {channel}: {access.can_send}")
+    if access.restriction:
+        print(f"  Restriction: {access.restriction.type}")
+
+@bot.event
+async def on_moderation_error(error, channel):
+    """Fired when a moderation action or message is rejected."""
+    print(f"Error in {channel}: {error.code} — {error.message}")
+    # error.code is one of: FORBIDDEN, RATE_LIMIT, SLOW_MODE,
+    # TIMED_OUT, BANNED, MESSAGE_TOO_LONG, BLOCKED_TERM,
+    # INVALID_TARGET, INVALID_REQUEST, NOT_FOUND
+```
+
+### Commands
+
+Register commands with `@bot.command()`. The bot automatically parses messages starting with the prefix.
+
+```python
+bot = Bot(command_prefix="!")
+
+# Simple command, no arguments
+@bot.command()
+async def ping(ctx):
+    await ctx.reply("pong!")
+
+# Named command with aliases
+@bot.command(name="say", aliases=["echo", "repeat"])
+async def say_cmd(ctx, *, text):
+    await ctx.send(text)
+
+# Positional arguments (split by whitespace)
+@bot.command()
+async def greet(ctx, name, greeting="hello"):
+    await ctx.reply(f"{greeting}, {name}!")
+
+# Keyword-only (rest of message)
+# Use *, text to capture everything after the command as a single string:
+@bot.command()
+async def echo(ctx, *, text):
+    await ctx.reply(text)
+# !echo hello world foo  →  text = "hello world foo"
+```
+
+> The bot automatically ignores its own messages to prevent loops.
+
+### Context
+
+The `ctx` object passed to commands gives you everything you need:
+
+```python
+@bot.command()
+async def info(ctx):
+    ctx.message     # the full Message object
+    ctx.author      # shortcut to ctx.message.author (Author)
+    ctx.channel     # channel name (str)
+    ctx.bot         # reference to the Bot
+
+    await ctx.reply("text")   # sends "@username text"
+    await ctx.send("text")    # sends "text" without mention
+    await ctx.delete()        # deletes the triggering message (needs mod perms)
+```
+
+### Sending Messages
+
+```python
+# Inside a command
+await ctx.reply("mentioned reply")
+await ctx.send("plain message")
+
+# Anywhere (if you have a reference to the bot)
+await bot.send("hello!", channel="bot-playground")
+```
+
+### Multi-Channel
+
+Connect to multiple channels at once:
+
+```python
+bot.run("hctvb_xxx", channels=["channel1", "channel2", "bot-playground"])
+```
+
+Messages and commands work across all channels. Use `ctx.channel` or `message.channel` to know which channel a message came from.
+
+```python
+@bot.event
+async def on_message(message):
+    print(f"[{message.channel}] {message.author.username}: {message.content}")
+
+@bot.command()
+async def where(ctx):
+    await ctx.reply(f"you're in {ctx.channel}")
+```
+
+### Moderation
+
+Bots with moderation permissions can manage users:
+
+```python
+# Timeout a user for 5 minutes (default)
+await bot.timeout_user("channel", user_id="user123", duration=300, reason="spam")
+
+# Ban a user
+await bot.ban_user("channel", user_id="user123", reason="repeated violations")
+
+# Remove a timeout
+await bot.lift_timeout("channel", user_id="user123")
+
+# Unban a user
+await bot.unban_user("channel", user_id="user123")
+
+# Delete a specific message
+await bot.delete_message("channel", msg_id="msg-uuid")
+```
+
+### Emojis
+
+Look up or search emojis from the Slack. Results come back via events.
+
+```python
+# Look up emoji URLs
+await bot.lookup_emojis(["yay", "aga"])
+
+# Search emojis
+await bot.search_emojis("yay")
+
+# Handle results
+@bot.event
+async def on_emoji_response(emojis):
+    # emojis = {"yay": "https://...", "aga": "https://..."}
+    print(emojis)
+
+@bot.event
+async def on_emoji_search(results):
+    # results = ["yay", "yay-bounce", "yay-spin", ...]
+    print(results)
+```
+
+### Async Entry Point
+
+If you manage your own event loop:
+
+```python
+import asyncio
+
+async def main():
+    bot = Bot(command_prefix="!")
+
+    @bot.event
+    async def on_ready(session):
+        print("Connected!")
+
+    await bot.start("hctvb_xxx", channel="bot-playground")
+
+asyncio.run(main())
+```
+
+## Examples
+
+### Echo Bot
+
+```python
+from hctvwrapper import Bot
+import os
+
+bot = Bot(command_prefix="!")
+
+@bot.event
+async def on_ready(session):
+    print(f"✅ Logged in as {session.viewer}")
+
+@bot.command()
+async def ping(ctx):
+    await ctx.reply("pong! 🏓")
+
+@bot.command(name="echo", aliases=["say"])
+async def echo_cmd(ctx, *, text):
+    await ctx.send(text)
+
+bot.run(os.environ["BOT_TOKEN"], channel="bot-playground")
+```
+
+### AI Bot
+
+```python
+from hctvwrapper import Bot
+import aiohttp, os
+
+bot = Bot(command_prefix="/")
+
+@bot.command(name="ai")
+async def ai_cmd(ctx, *, prompt):
+    async with aiohttp.ClientSession() as http:
+        resp = await http.post(
+            "https://ai.hackclub.com/proxy/v1/chat/completions",
+            headers={"Authorization": f"Bearer {os.environ['AI_TOKEN']}"},
+            json={
+                "model": "google/gemini-3-flash-preview",
+                "messages": [{"role": "user", "content": prompt}],
+            },
+        )
+        data = await resp.json()
+    answer = data["choices"][0]["message"]["content"]
+    await ctx.reply(answer)
+
+bot.run(os.environ["BOT_TOKEN"], channel="bot-playground")
+```
+
+### Moderation Bot
+
+```python
+from hctvwrapper import Bot
+import os
+
+bot = Bot(command_prefix="!")
+
+@bot.command()
+async def timeout(ctx, user_id, seconds="300"):
+    await bot.timeout_user(ctx.channel, user_id, duration=int(seconds))
+    await ctx.send(f"⏰ Timed out for {seconds}s")
+
+@bot.event
+async def on_moderation_error(error, channel):
+    print(f"⚠️ {error.code}: {error.message}")
+
+bot.run(os.environ["BOT_TOKEN"], channel="my-channel")
+```
+
+## Models Reference
+
+| Model | Fields |
+|---|---|
+| `Message` | `content`, `author`, `channel`, `msg_id`, `timestamp`, `type`, `is_bot` |
+| `Author` | `id`, `username`, `pfp_url`, `display_name`, `is_bot`, `is_platform_admin`, `channel_role` |
+| `Session` | `viewer` (Author), `permissions`, `moderation` |
+| `Permissions` | `can_moderate` |
+| `ModerationSettings` | `has_blocked_terms`, `slow_mode_seconds`, `max_message_length` |
+| `SystemMessage` | `type`, `channel`, `content`, `timestamp` |
+| `ChatAccess` | `can_send`, `restriction` |
+| `Restriction` | `type` (timeout/ban), `reason`, `expires_at` |
+| `ModerationError` | `code`, `message`, `restriction` |
+| `ModerationEvent` | `type`, `msg_id`, `channel` |
+
+## Requirements
+
+- Python 3.10+
+- `websockets` (only dependency)
+
+## License
+
+Copyright (c) 2026 Christian Well - [MIT License](https://github.com/christianwell/hctvwrapper/blob/main/LICENSE)

apps/docs/src/content/docs/guides/start-stream.mdx

@@ -0,0 +1,51 @@
+---
+title: How to stream
+description: Get started with OBS and streaming on hackclub.tv
+---
+import { Steps } from '@astrojs/starlight/components';
+import { Aside } from '@astrojs/starlight/components';
+
+_This guide demonstrates how to stream with hackclub.tv via OBS Studio. For other streaming software, you will need to adapt these steps for your chosen software._
+
+<Steps>
+1. Open OBS Studio.
+   (_If it is not installed, head to [this webpage](https://obsproject.com/) to download the installer._)
+
+   ![OBS in Windows start menu](../../../assets/obs.png)
+
+2. In OBS, click `File > Settings` in the top navigation bar.
+
+   <img alt="Animated GIF of opening the settings page" src="/guides/obs-open-settings-op.gif" />
+
+3. In the Settings popup, open `Stream` from the sidebar.
+
+4. Set `Service` to `Custom...`.
+
+   <img
+     alt="Animated GIF of opening 'Stream' settings and changing to 'Custom'"
+     src="/guides/obs-changing-settings-op.gif"
+   />
+
+5. Go to https://hackclub.tv/settings/channel/ in your web browser.
+
+   (_If you are not logged in, you may have to log in again and then try again._)
+
+6. Under `Stream Settings`, you will find your `Stream Key` and `Stream URL`. Copy the `Stream URL` and paste it into OBS.
+
+   ![Hack Club TV Stream Settings](../../../assets/hctv-settings.png)
+
+7. Go back to the website and copy the streaming key and paste it into the `Stream Key` box in OBS.
+   <Aside type="caution">You must keep your stream key secret and never share it with anyone.</Aside>
+
+   <Aside type="tip">
+    You can regenerate your stream key at any time if compromised! Just click the key icon and copy the new key. Remember to update your streaming software with the new key if you do this.
+   </Aside>
+
+   ![OBS Stream Settings with data filled in](../../../assets/obs-custom.png)
+
+   (_Your OBS settings should now look like this_)
+
+8. You can now safely apply the changes in OBS and start streaming.
+</Steps>
+
+Thanks for using this guide and happy streaming!

apps/docs/src/content/docs/index.mdx

@@ -0,0 +1,8 @@
+---
+title: About hctv docs
+description: Index documentation page!
+---
+
+Welcome to the hackclub.tv docs! Here you'll find tips and tricks to get the most out of hackclub.tv and its features.
+
+Additionally, some useful guides are available to help you get started with common tasks.

apps/docs/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "ignoreDeprecations": "6.0"
+  },
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}

apps/web/.env.example

@@ -0,0 +1,34 @@
+DATABASE_URL=postgresql://postgres:skbiditoilet@localhost:5555/postgres
+
+# make a slack app here: https://api.slack.com/apps
+SLACK_NOTIFIER_TOKEN=<make a bot for this, check app manifest below>
+
+# invite your bot to the channel you created. below is #hctv-dev, so use that if you want!
+NOTIFICATION_CHANNEL_ID=C08M3MGE6PJ
+
+REDIS_URL=redis://localhost:6379
+
+# get from https://uploadthing.com/
+UPLOADTHING_TOKEN=<get from uploadthing>
+
+# enable oauth mode on your hca account and make an app: https://auth.hackclub.com/identity/edit
+HCID_CLIENT=<auth.hackclub.com client>
+HCID_SECRET=<auth.hackclub.com secret>
+# make sure to put this as one of the redirect uri
+HCID_REDIRECT_URI=http://localhost:3000/auth/hackclub/callback
+
+# mediamtx settings
+NEXT_PUBLIC_MEDIAMTX_URL_HQ=http://localhost:8891
+MEDIAMTX_API_HQ=http://localhost:9997
+NEXT_PUBLIC_MEDIAMTX_INGEST_ROUTE_HQ=localhost:8890
+NEXT_PUBLIC_MEDIAMTX_WHIP_ROUTE_HQ=http://localhost:8889
+
+# optional EU mirror
+# NEXT_PUBLIC_MEDIAMTX_URL_ETHANDE=https://hls-eu.example.com
+# MEDIAMTX_API_ETHANDE=https://mediamtx-api-eu.example.com
+# NEXT_PUBLIC_MEDIAMTX_INGEST_ROUTE_ETHANDE=ingest-eu.example.com:8890
+# NEXT_PUBLIC_MEDIAMTX_WHIP_ROUTE_ETHANDE=https://webrtc-eu.example.com
+
+# generate with `openssl rand -base64 20`
+MEDIAMTX_PUBLISH_KEY=
+MEDIAMTX_API_KEY=

apps/web/Dockerfile

@@ -1,13 +1,16 @@
-FROM node:lts-alpine AS base
+FROM node:22-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME/bin:$PATH"
+RUN corepack enable
 
 FROM base AS builder
-RUN apk update
-RUN apk add --no-cache libc6-compat git
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
 # Set working directory
 WORKDIR /app
-# Replace <your-major-version> with the major version installed in your repository. For example:
-# RUN yarn global add turbo@^2
-RUN yarn global add turbo@^2
+RUN pnpm add -g turbo@^2
 COPY . .
 
 # Get the git commit hash before pruning (since .git might be removed)
@@ -19,40 +22,76 @@ RUN turbo prune @hctv/web --docker
  
 # Add lockfile and package.json's of isolated subworkspace
 FROM base AS installer
-RUN apk update
-RUN apk add --no-cache libc6-compat git
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    git \
+    curl \
+    libvips-dev \
+    python3 \
+    make \
+    g++ \
+    ca-certificates \
+    && rm -rf /var/lib/apt/lists/*
 # Get the commit hash from the builder stage
 COPY --from=builder /tmp/commit_hash /tmp/commit_hash
-# Read commit hash and set as build arg
-ARG COMMIT_HASH_FILE=/tmp/commit_hash
-RUN COMMIT_HASH=$(cat /tmp/commit_hash 2>/dev/null || echo "unknown") && \
-    echo "COMMIT_HASH=$COMMIT_HASH" > /tmp/build_env
 WORKDIR /app
 
 # First install the dependencies (as they change less often)
 COPY --from=builder /app/out/json/ .
-RUN yarn install --frozen-lockfile
+RUN pnpm install --frozen-lockfile
+
+# Install a standalone Prisma CLI for runtime migrations (no pnpm symlinks).
+RUN mkdir -p /opt/prisma-cli && cd /opt/prisma-cli && npm init -y && npm install prisma@6.5.0
 
 COPY --from=builder /app/out/full/ .
-RUN --mount=type=secret,id=TURBO_TOKEN --mount=type=secret,id=TURBO_TEAM \
-    . /tmp/build_env && \
-    export commit=$COMMIT_HASH && \
-    TURBO_TOKEN=$(cat /run/secrets/TURBO_TOKEN) TURBO_TEAM=$(cat /run/secrets/TURBO_TEAM) yarn turbo run build --env-mode=loose
+
+# Generate latest emojis.json during image build.
+RUN ARCH=$(dpkg --print-architecture) && \
+    if [ "$ARCH" = "amd64" ]; then EMOJI_ARCH="x86_64"; \
+    elif [ "$ARCH" = "arm64" ]; then EMOJI_ARCH="aarch64"; \
+    else EMOJI_ARCH=""; fi && \
+    RELEASE_JSON=$(curl -fsSL https://api.github.com/repos/srizan10/hctv/releases/latest || true) && \
+    RELEASE_URL=$(printf '%s' "$RELEASE_JSON" | grep "browser_download_url.*slack-import-emojis-linux-${EMOJI_ARCH}" | cut -d '"' -f 4 || true) && \
+    if [ -n "$RELEASE_URL" ] && \
+      curl -fsSL -o /tmp/slack-import-emojis-bin "$RELEASE_URL" && \
+      chmod +x /tmp/slack-import-emojis-bin && \
+      /tmp/slack-import-emojis-bin default; then \
+      cp /app/emojis.json /app/apps/web/emojis.json; \
+    else \
+      cp /app/apps/web/src/lib/instrumentation/emojis.json /app/apps/web/emojis.json; \
+    fi
+
+RUN --mount=type=secret,id=TURBO_TOKEN --mount=type=secret,id=TURBO_TEAM --mount=type=secret,id=SENTRY_AUTH_TOKEN \
+    COMMIT=$(cat /tmp/commit_hash 2>/dev/null || echo "unknown") && \
+    TURBO_TOKEN=$(cat /run/secrets/TURBO_TOKEN) TURBO_TEAM=$(cat /run/secrets/TURBO_TEAM) \
+    SENTRY_AUTH_TOKEN=$(cat /run/secrets/SENTRY_AUTH_TOKEN) \
+    commit=$COMMIT pnpm turbo run build --env-mode=loose
  
 FROM base AS runner
 WORKDIR /app
 
-RUN apk add --no-cache ffmpeg
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ffmpeg \
+    libvips42 \
+    && rm -rf /var/lib/apt/lists/*
 
-# Don't run production as root
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
+RUN groupadd --system --gid 1001 nodejs
+RUN useradd --system --uid 1001 nextjs --create-home
+
+# Ensure home directory and cache directories have proper permissions
+RUN mkdir -p /home/nextjs/.cache && \
+    chown -R nextjs:nodejs /home/nextjs
 
-# Get the commit hash from the installer stage and create a startup script
 COPY --from=installer /tmp/commit_hash /tmp/commit_hash
 RUN COMMIT_VALUE=$(cat /tmp/commit_hash 2>/dev/null || echo "unknown") && \
     echo "#!/bin/sh" > /usr/local/bin/start.sh && \
+    echo "set -e" >> /usr/local/bin/start.sh && \
+    echo "export COREPACK_ENABLE_DOWNLOAD_PROMPT=0" >> /usr/local/bin/start.sh && \
+    echo "export HOME=/home/nextjs" >> /usr/local/bin/start.sh && \
+    echo "echo 'Running database migrations...'" >> /usr/local/bin/start.sh && \
+    echo "node /opt/prisma-cli/node_modules/prisma/build/index.js migrate deploy --schema /app/packages/db/prisma/schema.prisma" >> /usr/local/bin/start.sh && \
+    echo "cd /app" >> /usr/local/bin/start.sh && \
     echo "export commit=$COMMIT_VALUE" >> /usr/local/bin/start.sh && \
+    echo "echo 'Starting Next.js application...'" >> /usr/local/bin/start.sh && \
     echo "exec node apps/web/server.js" >> /usr/local/bin/start.sh && \
     chmod +x /usr/local/bin/start.sh
 
@@ -63,5 +102,10 @@ USER nextjs
 COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
 COPY --from=installer --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
 COPY --from=installer --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
- 
-CMD ["/usr/local/bin/start.sh"]
+COPY --from=installer --chown=nextjs:nodejs /app/apps/web/emojis.json ./emojis.json
+
+# Copy Prisma schema and migrations for prisma migrate deploy
+COPY --from=installer --chown=nextjs:nodejs /app/packages/db/prisma ./packages/db/prisma
+COPY --from=installer --chown=nextjs:nodejs /opt/prisma-cli /opt/prisma-cli
+
+CMD ["/usr/local/bin/start.sh"]

apps/web/components.json

@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.ts",
+    "config": "tailwind.config.mts",
     "css": "src/app/globals.css",
     "baseColor": "slate",
     "cssVariables": true,
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

apps/web/next.config.mjs

@@ -1,3 +1,4 @@
+import {withSentryConfig} from '@sentry/nextjs';
 import * as path from 'node:path';
 import { fileURLToPath } from 'url';
 import { readFileSync } from 'node:fs';
@@ -8,7 +9,7 @@ const __dirname = path.dirname(__filename);
 
 const LIVE_SERVER_URL =
   process.env.NODE_ENV === 'production'
-    ? 'https://backend.hctv.srizan.dev'
+    ? 'http://nginx-rtmp:8888'
     : 'http://localhost:8888';
 
 const packageJson = JSON.parse(readFileSync('./package.json', 'utf8'));
@@ -27,6 +28,16 @@ const nextConfig = {
       },
       {
         hostname: 'emoji.slack-edge.com',
+      },
+      {
+        hostname: 'cdn.jsdelivr.net',
+        pathname: '/npm/emoji-datasource-twitter@15.1.2/img/twitter/64/*',
+      },
+      {
+        hostname: 'eoceqrx2r7.ufs.sh'
+      },
+      {
+        hostname: 'thesvg.org',
       }
     ],
     minimumCacheTTL: 120,
@@ -39,6 +50,7 @@ const nextConfig = {
   reactStrictMode: false,
   output: 'standalone',
   outputFileTracingRoot: path.join(__dirname, '../../'),
+  serverExternalPackages: ['bullmq'],
   async rewrites() {
     return [
       {
@@ -47,6 +59,46 @@ const nextConfig = {
       },
     ];
   },
+  logging: {
+    incomingRequests: false,
+  },
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+  org: "sr-izan",
+
+  project: "hctv",
+
+  // Auth token for uploading source maps
+  authToken: process.env.SENTRY_AUTH_TOKEN,
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
+  tunnelRoute: "/monitoring",
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: true,
+});

apps/web/package.json

@@ -1,91 +1,99 @@
 {
   "name": "@hctv/web",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dd": "docker compose --file ../../dev/docker-compose.yml up -d",
-    "dev": "next dev --turbo",
+    "dev": "next dev --turbo -H 0.0.0.0",
     "donly": "docker compose --file ../../dev/docker-compose.yml up",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "ui:add": "shadcn add",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "genMtxTypes": "bunx openapi-typescript https://github.com/bluenviron/mediamtx/raw/refs/tags/v1.15.5/api/openapi.yaml -o ./src/lib/types/mediamtx.d.ts"
   },
   "dependencies": {
-    "@hctv/auth": "*",
-    "@hctv/db": "*",
-    "@hookform/resolvers": "^3.9.1",
-    "@livekit/components-react": "^2.7.0",
+    "@hctv/auth": "workspace:*",
+    "@hctv/db": "workspace:*",
+    "@hookform/resolvers": "^5.2.2",
     "@lucia-auth/adapter-prisma": "^4.0.1",
     "@node-rs/argon2": "^2.0.2",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-dialog": "^1.1.5",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-hover-card": "^1.1.14",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-popover": "^1.1.5",
-    "@radix-ui/react-select": "^2.1.5",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@slack/web-api": "^7.9.1",
+    "@omit/react-confirm-dialog": "^2.0.0",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@scalar/api-reference-react": "^0.9.32",
+    "@sentry/nextjs": "^10.51.0",
+    "@slack/web-api": "^7.15.1",
     "@uidotdev/usehooks": "^2.4.1",
-    "@uploadthing/react": "^7.3.1",
+    "@uploadthing/react": "^7.3.3",
+    "ajv": "^8.20.0",
     "arctic": "^3.7.0",
-    "bullmq": "^5.45.2",
-    "cheerio": "^1.0.0",
+    "bullmq": "^5.76.4",
+    "cheerio": "^1.2.0",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.0",
-    "cmdk": "1.0.0",
-    "hls-video-element": "^1.5.0",
-    "ioredis": "^5.6.0",
-    "livekit-client": "^2.8.0",
-    "livekit-server-sdk": "^2.9.7",
+    "clsx": "^2.1.1",
+    "cmdk": "1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "hls-video-element": "^1.5.11",
+    "hls.js": "^1.6.16",
     "lucia": "^3.2.2",
-    "lucide-react": "^0.473.0",
-    "media-chrome": "^4.8.0",
-    "next": "^15.3.4",
-    "next-themes": "^0.4.4",
-    "node-cron": "^3.0.3",
-    "nuqs": "^2.4.3",
-    "pg": "^8.14.1",
-    "pg-boss": "^10.1.6",
-    "react": "19",
-    "react-dom": "19",
-    "react-hook-form": "^7.54.2",
+    "lucide-react": "^1.14.0",
+    "media-chrome": "^4.19.0",
+    "next": "^16.2.6",
+    "next-themes": "^0.4.6",
+    "node-cron": "^4.2.1",
+    "nuqs": "^2.8.9",
+    "pg": "^8.20.0",
+    "pg-boss": "^12.18.1",
+    "prom-client": "^15.1.3",
+    "react": "^19.2.5",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19.2.5",
+    "react-hook-form": "^7.74.0",
     "rehype-raw": "^7.0.0",
     "rehype-react": "^8.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
-    "sharp": "^0.34.2",
-    "sonner": "^1.4.41",
-    "swr": "^2.3.0",
-    "tailwind-merge": "^2.2.2",
-    "tailwindcss-animate": "^1.0.7",
+    "sharp": "^0.34.5",
+    "sonner": "^2.0.7",
+    "swr": "^2.4.1",
+    "tailwind-merge": "^3.5.0",
     "unified": "^11.0.5",
-    "uploadthing": "^7.7.2",
+    "uploadthing": "^7.7.4",
     "util-utils": "^1.0.3",
-    "valtio": "^2.1.2",
-    "ws": "^8.18.1",
-    "zod": "^3.24.1"
+    "valtio": "^2.3.2",
+    "ws": "^8.20.0",
+    "zod": "^4.4.2"
   },
   "devDependencies": {
-    "@types/node": "^20",
+    "@types/node": "^25.6.0",
     "@types/node-cron": "^3.0.11",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/ws": "^8.18.0",
-    "eslint": "^8",
-    "eslint-config-next": "15.1.3",
-    "postcss": "^8",
-    "shadcn": "^2.7.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@types/ws": "^8.18.1",
+    "@tailwindcss/postcss": "^4.2.4",
+    "eslint": "^10.3.0",
+    "eslint-config-next": "16.2.4",
+    "postcss": "^8.5.13",
+    "shadcn": "^4.6.0",
+    "tailwindcss": "^4.2.4",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^6.0.3"
   }
 }

apps/web/postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
 

apps/web/public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

apps/web/public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

apps/web/sentry.edge.config.ts

@@ -0,0 +1,20 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://f3c26671c39af48406c6e23702a4f3dd@o4506961023860736.ingest.us.sentry.io/4509895816773632",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+  enabled: process.env.NODE_ENV === 'production',
+});

apps/web/src/app/(ui)/(protected)/[username]/page.tsx

@@ -1,16 +1,49 @@
-import LiveStream from "@/components/app/Livestream/Livestream";
+import LiveStream from '@/components/app/Livestream/Livestream';
+import { validateRequest } from '@/lib/auth/validate';
 import { prisma } from '@hctv/db';
 
 export default async function Page({ params }: { params: Promise<{ username: string }> }) {
   const { username } = await params;
+  const { user } = await validateRequest();
   const streamInfo = await prisma.streamInfo.findUnique({
     where: { username },
-    include: { channel: true },
+    include: {
+      channel: {
+        include: {
+          restriction: true,
+        },
+      },
+    },
   });
   if (!streamInfo) {
     return <div>Stream not found</div>;
   }
+
+  const hasActiveRestriction = streamInfo.channel.restriction
+    ? !streamInfo.channel.restriction.expiresAt ||
+      new Date(streamInfo.channel.restriction.expiresAt) >= new Date()
+    : false;
+  const canBypassRestriction = Boolean(user?.isAdmin);
+
+  if (hasActiveRestriction && !canBypassRestriction) {
+    return (
+      <div className="flex flex-col items-center justify-center h-[calc(100vh-64px)] p-4">
+        <h1 className="text-2xl font-bold text-destructive mb-2">Channel Restricted</h1>
+        <p className="text-muted-foreground text-center max-w-md">
+          This channel has been restricted by a moderator and is not currently available for
+          viewing.
+        </p>
+      </div>
+    );
+  }
+
   return (
-    <LiveStream username={username} streamInfo={streamInfo} />
+    <LiveStream
+      username={username}
+      streamInfo={streamInfo}
+      canViewRestrictedStream={canBypassRestriction}
+      initialRestrictionActive={hasActiveRestriction}
+      initialRestrictionExpiresAt={streamInfo.channel.restriction?.expiresAt?.toISOString() ?? null}
+    />
   );
 }

apps/web/src/app/(ui)/(protected)/admin/page.tsx

@@ -0,0 +1,17 @@
+import { validateRequest } from '@/lib/auth/validate';
+import { redirect } from 'next/navigation';
+import AdminPanelClient from './page.client';
+
+export default async function AdminPage() {
+  const { user } = await validateRequest();
+
+  if (!user) {
+    redirect('/auth/hackclub');
+  }
+
+  if (!user.isAdmin) {
+    redirect('/');
+  }
+
+  return <AdminPanelClient currentUser={user} />;
+}

apps/web/src/app/(ui)/(protected)/admin/reports/[reportId]/page.client.tsx

@@ -0,0 +1,559 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { format, formatDistanceToNow } from 'date-fns';
+import { toast } from 'sonner';
+import {
+  ArrowLeft,
+  Gavel,
+  Flag,
+  User,
+  MessageSquare,
+  Clock,
+  ShieldAlert,
+  ShieldOff,
+  ShieldCheck,
+  Trash2,
+  CheckCircle2,
+  XCircle,
+  AlertTriangle,
+  Timer,
+  Ban,
+  Unlock,
+  Info,
+} from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+
+type ReportModerationAction =
+  | 'review'
+  | 'dismiss'
+  | 'delete_reported_message'
+  | 'timeout_10m'
+  | 'timeout_1h'
+  | 'ban_chat'
+  | 'lift_chat_ban'
+  | 'ban_platform'
+  | 'unban_platform';
+
+type ActionSeverity = 'info' | 'moderate' | 'severe';
+
+interface ActionOption {
+  value: ReportModerationAction;
+  label: string;
+  description: string;
+  severity: ActionSeverity;
+  requiresNote?: boolean;
+  icon: React.ReactNode;
+}
+
+const ACTION_OPTIONS: ActionOption[] = [
+  {
+    value: 'review',
+    label: 'Mark as reviewed',
+    description: 'Acknowledge the report without further action.',
+    severity: 'info',
+    icon: <CheckCircle2 className="h-4 w-4" />,
+  },
+  {
+    value: 'dismiss',
+    label: 'Dismiss',
+    description: 'Close this report as unfounded or resolved.',
+    severity: 'info',
+    icon: <XCircle className="h-4 w-4" />,
+  },
+  {
+    value: 'delete_reported_message',
+    label: 'Delete message',
+    description: 'Remove the reported message from the chat.',
+    severity: 'moderate',
+    requiresNote: true,
+    icon: <Trash2 className="h-4 w-4" />,
+  },
+  {
+    value: 'timeout_10m',
+    label: 'Timeout 10 minutes',
+    description: 'Prevent user from chatting for 10 minutes.',
+    severity: 'moderate',
+    requiresNote: true,
+    icon: <Timer className="h-4 w-4" />,
+  },
+  {
+    value: 'timeout_1h',
+    label: 'Timeout 1 hour',
+    description: 'Prevent user from chatting for 1 hour.',
+    severity: 'moderate',
+    requiresNote: true,
+    icon: <Timer className="h-4 w-4" />,
+  },
+  {
+    value: 'ban_chat',
+    label: 'Ban from chat',
+    description: 'Permanently ban user from chat.',
+    severity: 'severe',
+    requiresNote: true,
+    icon: <Ban className="h-4 w-4" />,
+  },
+  {
+    value: 'lift_chat_ban',
+    label: 'Lift chat ban',
+    description: 'Restore chat access for this user.',
+    severity: 'info',
+    requiresNote: true,
+    icon: <Unlock className="h-4 w-4" />,
+  },
+  {
+    value: 'ban_platform',
+    label: 'Ban from platform',
+    description: 'Permanently ban user from the entire platform.',
+    severity: 'severe',
+    requiresNote: true,
+    icon: <ShieldOff className="h-4 w-4" />,
+  },
+  {
+    value: 'unban_platform',
+    label: 'Unban from platform',
+    description: 'Restore platform access for this user.',
+    severity: 'info',
+    requiresNote: true,
+    icon: <ShieldCheck className="h-4 w-4" />,
+  },
+];
+
+const SEVERITY_STYLES: Record<
+  ActionSeverity,
+  { card: string; selected: string; icon: string; ring: string }
+> = {
+  info: {
+    card: 'border-border hover:border-muted-foreground/40 hover:bg-muted/30',
+    selected: 'border-primary bg-primary/5',
+    icon: 'text-muted-foreground',
+    ring: 'ring-primary/30',
+  },
+  moderate: {
+    card: 'border-border hover:border-amber-500/40 hover:bg-amber-500/5',
+    selected: 'border-amber-500 bg-amber-500/5',
+    icon: 'text-amber-500',
+    ring: 'ring-amber-500/30',
+  },
+  severe: {
+    card: 'border-border hover:border-destructive/40 hover:bg-destructive/5',
+    selected: 'border-destructive bg-destructive/5',
+    icon: 'text-destructive',
+    ring: 'ring-destructive/30',
+  },
+};
+
+const STATUS_CONFIG = {
+  OPEN: { label: 'Open', variant: 'destructive' as const, icon: <Flag className="h-3 w-3" /> },
+  REVIEWED: {
+    label: 'Reviewed',
+    variant: 'secondary' as const,
+    icon: <CheckCircle2 className="h-3 w-3" />,
+  },
+  DISMISSED: {
+    label: 'Dismissed',
+    variant: 'outline' as const,
+    icon: <XCircle className="h-3 w-3" />,
+  },
+};
+
+const ACTION_LABELS: Record<NonNullable<ChatReportCase['lastAction']>, string> = {
+  REVIEW: 'Marked as reviewed',
+  DISMISS: 'Dismissed',
+  DELETE_REPORTED_MESSAGE: 'Message deleted',
+  TIMEOUT_10M: 'User timed out (10m)',
+  TIMEOUT_1H: 'User timed out (1h)',
+  BAN_CHAT: 'Chat banned',
+  LIFT_CHAT_BAN: 'Chat ban lifted',
+  BAN_PLATFORM: 'Platform banned',
+  UNBAN_PLATFORM: 'Platform ban lifted',
+};
+
+function InfoRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
+        {label}
+      </span>
+      <span className="text-sm">{children}</span>
+    </div>
+  );
+}
+
+function SectionLabel({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2 mb-3">
+      <span className="text-muted-foreground">{icon}</span>
+      <span className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+        {children}
+      </span>
+    </div>
+  );
+}
+
+export default function ReportCasePageClient({ report }: ReportCasePageClientProps) {
+  const router = useRouter();
+  const [selectedAction, setSelectedAction] = useState<ReportModerationAction>('review');
+  const [note, setNote] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const selectedMeta = ACTION_OPTIONS.find((o) => o.value === selectedAction)!;
+  const requiresNote = Boolean(selectedMeta?.requiresNote);
+  const isSevere = selectedMeta?.severity === 'severe';
+
+  const statusConfig = STATUS_CONFIG[report.status];
+
+  const submitAction = async () => {
+    if (requiresNote && note.trim().length < 10) {
+      toast.error('Please include at least 10 characters for enforcement context.');
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const res = await fetch('/api/admin/reports', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          reportId: report.id,
+          action: selectedAction,
+          note: note.trim() || undefined,
+        }),
+      });
+
+      if (!res.ok) {
+        const errorText = await res.text();
+        toast.error(errorText || 'Failed to apply action');
+        return;
+      }
+
+      toast.success('Report action applied');
+      setNote('');
+      router.refresh();
+    } catch {
+      toast.error('Failed to apply action');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const actionGroups: Array<{ label: string; actions: ActionOption[] }> = [
+    {
+      label: 'Informational',
+      actions: ACTION_OPTIONS.filter((a) => a.severity === 'info'),
+    },
+    {
+      label: 'Moderation',
+      actions: ACTION_OPTIONS.filter((a) => a.severity === 'moderate'),
+    },
+    {
+      label: 'Severe',
+      actions: ACTION_OPTIONS.filter((a) => a.severity === 'severe'),
+    },
+  ];
+
+  return (
+    <div className="container max-w-5xl mx-auto py-8 px-4">
+      <div className="flex items-start justify-between gap-4 mb-8">
+        <div className="space-y-1">
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold tracking-tight">Report Case</h1>
+            <Badge
+              variant={statusConfig.variant}
+              className="flex items-center gap-1.5 text-xs px-2 py-0.5"
+            >
+              {statusConfig.icon}
+              {statusConfig.label}
+            </Badge>
+          </div>
+          <p className="text-xs text-muted-foreground font-mono">{report.id}</p>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => router.push(`/admin?tab=reports&reportId=${report.id}`)}
+          className="shrink-0 gap-1.5"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Back to reports
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-5 gap-6">
+        <div className="md:col-span-3 space-y-5">
+          {report.reportedMessage ? (
+            <div className="rounded-lg border border-border bg-muted/20 overflow-hidden">
+              <div className="px-4 py-3 border-b border-border bg-muted/30 flex items-center gap-2">
+                <MessageSquare className="h-3.5 w-3.5 text-muted-foreground" />
+                <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                  Reported message
+                </span>
+              </div>
+              <div className="px-4 py-4">
+                <p className="text-sm leading-relaxed break-words">{report.reportedMessage}</p>
+              </div>
+            </div>
+          ) : (
+            <div className="rounded-lg border border-dashed border-border px-4 py-5 flex items-center gap-3 text-muted-foreground">
+              <Info className="h-4 w-4 shrink-0" />
+              <span className="text-sm">No message content was captured with this report.</span>
+            </div>
+          )}
+
+          <div className="rounded-lg border border-border overflow-hidden">
+            <div className="px-4 py-3 border-b border-border bg-muted/20">
+              <SectionLabel icon={<User className="h-3.5 w-3.5" />}>Parties</SectionLabel>
+            </div>
+            <div className="px-4 py-4 grid grid-cols-2 gap-x-6 gap-y-4">
+              <InfoRow label="Reporter">
+                <span className="font-medium">{report.reporter}</span>
+              </InfoRow>
+              <InfoRow label="Target">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <span className="font-medium">{report.target}</span>
+                  {report.targetIsAdmin && (
+                    <Badge
+                      variant="outline"
+                      className="text-[10px] py-0 px-1.5 text-amber-500 border-amber-500/40"
+                    >
+                      Admin
+                    </Badge>
+                  )}
+                  {report.targetIsPlatformBanned && (
+                    <Badge
+                      variant="outline"
+                      className="text-[10px] py-0 px-1.5 text-destructive border-destructive/40"
+                    >
+                      Platform banned
+                    </Badge>
+                  )}
+                </div>
+              </InfoRow>
+              <InfoRow label="Channel">
+                <span className="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">
+                  {report.channelName}
+                </span>
+              </InfoRow>
+              <InfoRow label="Reason">
+                <span>{report.reason}</span>
+              </InfoRow>
+            </div>
+          </div>
+
+          <div className="rounded-lg border border-border overflow-hidden">
+            <div className="px-4 py-3 border-b border-border bg-muted/20">
+              <SectionLabel icon={<Clock className="h-3.5 w-3.5" />}>Timeline</SectionLabel>
+            </div>
+            <div className="px-4 py-4 space-y-4">
+              <InfoRow label="Filed">
+                <span>
+                  {format(new Date(report.createdAt), 'PPP p')}{' '}
+                  <span className="text-muted-foreground text-xs">
+                    ({formatDistanceToNow(new Date(report.createdAt), { addSuffix: true })})
+                  </span>
+                </span>
+              </InfoRow>
+              {report.handledAt ? (
+                <InfoRow label="Last handled">
+                  <span>
+                    {format(new Date(report.handledAt), 'PPP p')}{' '}
+                    <span className="text-muted-foreground text-xs">
+                      ({formatDistanceToNow(new Date(report.handledAt), { addSuffix: true })})
+                    </span>
+                  </span>
+                </InfoRow>
+              ) : null}
+              <InfoRow label="Last action">
+                {report.lastAction ? (
+                  <span className="font-medium">{ACTION_LABELS[report.lastAction]}</span>
+                ) : (
+                  <span className="text-muted-foreground">None</span>
+                )}
+              </InfoRow>
+              <InfoRow label="Handled by">
+                {report.handledBy ? (
+                  <span className="font-medium">{report.handledBy}</span>
+                ) : (
+                  <span className="text-muted-foreground">—</span>
+                )}
+              </InfoRow>
+              {report.handlingNote ? (
+                <div className="pt-1">
+                  <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground block mb-1.5">
+                    Last note
+                  </span>
+                  <p className="text-sm bg-muted/40 rounded-md px-3 py-2.5 leading-relaxed border border-border">
+                    {report.handlingNote}
+                  </p>
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          {report.targetIsAdmin && (
+            <div className="flex items-start gap-3 rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3">
+              <AlertTriangle className="h-4 w-4 text-amber-500 shrink-0 mt-0.5" />
+              <div className="text-sm text-amber-700 dark:text-amber-400 leading-snug">
+                <span className="font-semibold">Caution:</span> The reported user is a platform
+                admin. Enforcement actions will still apply.
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="md:col-span-2">
+          <div className="rounded-lg border border-border overflow-hidden sticky top-6">
+            <div className="px-4 py-3 border-b border-border bg-muted/20 flex items-center gap-2">
+              <Gavel className="h-3.5 w-3.5 text-muted-foreground" />
+              <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                Enforcement
+              </span>
+            </div>
+
+            <div className="px-4 py-4 space-y-5">
+              {/* Action selector */}
+              <div className="space-y-3">
+                {actionGroups.map((group) => (
+                  <div key={group.label}>
+                    <p className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground mb-2">
+                      {group.label}
+                    </p>
+                    <div className="space-y-1.5">
+                      {group.actions.map((action) => {
+                        const isSelected = selectedAction === action.value;
+                        const styles = SEVERITY_STYLES[action.severity];
+                        return (
+                          <button
+                            key={action.value}
+                            type="button"
+                            onClick={() => setSelectedAction(action.value)}
+                            className={cn(
+                              'w-full flex items-start gap-3 rounded-md border px-3 py-2.5 text-left transition-all cursor-pointer',
+                              isSelected ? `${styles.selected} ring-1 ${styles.ring}` : styles.card
+                            )}
+                          >
+                            <span
+                              className={cn(
+                                'mt-0.5 shrink-0',
+                                isSelected ? styles.icon : 'text-muted-foreground'
+                              )}
+                            >
+                              {action.icon}
+                            </span>
+                            <div className="min-w-0">
+                              <p
+                                className={cn(
+                                  'text-sm font-medium leading-tight',
+                                  isSelected && action.severity === 'severe' && 'text-destructive',
+                                  isSelected &&
+                                    action.severity === 'moderate' &&
+                                    'text-amber-600 dark:text-amber-400'
+                                )}
+                              >
+                                {action.label}
+                              </p>
+                              <p className="text-[11px] text-muted-foreground mt-0.5 leading-snug">
+                                {action.description}
+                              </p>
+                            </div>
+                          </button>
+                        );
+                      })}
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <Label htmlFor="note" className="text-xs">
+                  Moderator note
+                  {requiresNote ? (
+                    <span className="text-destructive ml-1">*</span>
+                  ) : (
+                    <span className="text-muted-foreground ml-1">(optional)</span>
+                  )}
+                </Label>
+                <Textarea
+                  id="note"
+                  value={note}
+                  onChange={(e) => setNote(e.target.value)}
+                  placeholder="Explain why this action is being taken."
+                  rows={3}
+                  className="text-sm resize-none"
+                />
+                {requiresNote && (
+                  <p className="text-[11px] text-muted-foreground">Min. 10 characters required.</p>
+                )}
+              </div>
+
+              {isSevere && (
+                <div className="flex items-start gap-2.5 rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2.5">
+                  <ShieldAlert className="h-4 w-4 text-destructive shrink-0 mt-0.5" />
+                  <p className="text-[12px] text-destructive leading-snug">
+                    This is a severe action may often not be easily undone. Double-check before
+                    applying.
+                  </p>
+                </div>
+              )}
+
+              <Button
+                onClick={submitAction}
+                disabled={isSubmitting}
+                variant={isSevere ? 'destructive' : 'default'}
+                className="w-full gap-2"
+                size="sm"
+              >
+                <Gavel className="h-3.5 w-3.5" />
+                {isSubmitting ? 'Applying…' : 'Apply action'}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface ReportCasePageClientProps {
+  report: ChatReportCase;
+}
+
+interface ChatReportCase {
+  id: string;
+  status: 'OPEN' | 'REVIEWED' | 'DISMISSED';
+  reason: string;
+  reportedMessage: string | null;
+  reportedMessageId: string | null;
+  targetUsername: string | null;
+  channelName: string;
+  createdAt: string;
+  handledAt: string | null;
+  handlingNote: string | null;
+  lastAction:
+    | 'REVIEW'
+    | 'DISMISS'
+    | 'DELETE_REPORTED_MESSAGE'
+    | 'TIMEOUT_10M'
+    | 'TIMEOUT_1H'
+    | 'BAN_CHAT'
+    | 'LIFT_CHAT_BAN'
+    | 'BAN_PLATFORM'
+    | 'UNBAN_PLATFORM'
+    | null;
+  reporter: string;
+  target: string;
+  targetUserId: string | null;
+  targetIsAdmin: boolean;
+  targetIsPlatformBanned: boolean;
+  handledBy: string | null;
+}

apps/web/src/app/(ui)/(protected)/admin/reports/[reportId]/page.tsx

@@ -0,0 +1,96 @@
+import { validateRequest } from '@/lib/auth/validate';
+import { prisma } from '@hctv/db';
+import { notFound, redirect } from 'next/navigation';
+import ReportCasePageClient from './page.client';
+
+export default async function ReportCasePage({ params }: ReportCasePageProps) {
+  const { reportId } = await params;
+  const { user } = await validateRequest();
+
+  if (!user) {
+    redirect('/auth/hackclub');
+  }
+
+  if (!user.isAdmin) {
+    redirect('/');
+  }
+
+  const report = await prisma.chatUserReport.findUnique({
+    where: {
+      id: reportId,
+    },
+    include: {
+      channel: {
+        select: {
+          name: true,
+        },
+      },
+      reporter: {
+        include: {
+          personalChannel: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
+      targetUser: {
+        include: {
+          personalChannel: {
+            select: {
+              name: true,
+            },
+          },
+          ban: true,
+        },
+      },
+      handledBy: {
+        include: {
+          personalChannel: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  if (!report) {
+    notFound();
+  }
+
+  return (
+    <ReportCasePageClient
+      report={{
+        id: report.id,
+        status: report.status,
+        reason: report.reason,
+        reportedMessage: report.reportedMessage,
+        reportedMessageId: report.reportedMessageId,
+        targetUsername: report.targetUsername,
+        channelName: report.channel.name,
+        createdAt: report.createdAt.toISOString(),
+        handledAt: report.handledAt?.toISOString() ?? null,
+        handlingNote: report.handlingNote,
+        lastAction: report.lastAction,
+        reporter: report.reporter.personalChannel?.name ?? report.reporter.slack_id,
+        target:
+          report.targetUser?.personalChannel?.name ??
+          report.targetUsername ??
+          report.targetUserId ??
+          'unknown',
+        targetUserId: report.targetUserId,
+        targetIsAdmin: Boolean(report.targetUser?.isAdmin),
+        targetIsPlatformBanned: Boolean(report.targetUser?.ban),
+        handledBy: report.handledBy?.personalChannel?.name ?? report.handledBy?.slack_id ?? null,
+      }}
+    />
+  );
+}
+
+interface ReportCasePageProps {
+  params: Promise<{
+    reportId: string;
+  }>;
+}

apps/web/src/app/(ui)/(protected)/api/admin/audit/route.ts

@@ -0,0 +1,189 @@
+import { validateRequest } from '@/lib/auth/validate';
+import { prisma } from '@hctv/db';
+import { NextRequest } from 'next/server';
+
+function getDeletedMessageContent(details: unknown): string | null {
+  if (!details || typeof details !== 'object' || Array.isArray(details)) {
+    return null;
+  }
+
+  const messageContent = (details as { messageContent?: unknown }).messageContent;
+  return typeof messageContent === 'string' && messageContent.length > 0 ? messageContent : null;
+}
+
+export async function GET(request: NextRequest) {
+  const { user } = await validateRequest();
+  if (!user?.isAdmin) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  const searchParams = request.nextUrl.searchParams;
+  const take = Math.min(Math.max(Number(searchParams.get('take') ?? 100), 10), 250);
+
+  const [adminLogs, chatLogs] = await Promise.all([
+    prisma.adminAuditLog.findMany({
+      orderBy: { createdAt: 'desc' },
+      take,
+      include: {
+        actor: {
+          select: {
+            id: true,
+            isAdmin: true,
+            slack_id: true,
+            personalChannel: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        },
+      },
+    }),
+    prisma.chatModerationEvent.findMany({
+      orderBy: { createdAt: 'desc' },
+      take,
+      include: {
+        channel: {
+          select: {
+            id: true,
+            name: true,
+          },
+        },
+        moderator: {
+          select: {
+            id: true,
+            isAdmin: true,
+            slack_id: true,
+            personalChannel: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        },
+        targetUser: {
+          select: {
+            id: true,
+            isAdmin: true,
+            slack_id: true,
+            personalChannel: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        },
+      },
+    }),
+  ]);
+
+  const targetUserIds = [
+    ...new Set(adminLogs.map((log) => log.targetUserId).filter(Boolean)),
+  ] as string[];
+  const targetUsers =
+    targetUserIds.length > 0
+      ? await prisma.user.findMany({
+          where: {
+            id: {
+              in: targetUserIds,
+            },
+          },
+          include: {
+            personalChannel: {
+              select: {
+                name: true,
+              },
+            },
+          },
+        })
+      : [];
+  const targetUserMap = new Map(
+    targetUsers.map((targetUser) => [
+      targetUser.id,
+      targetUser.personalChannel?.name ?? targetUser.slack_id,
+    ])
+  );
+  const targetUserAdminMap = new Map(
+    targetUsers.map((targetUser) => [targetUser.id, targetUser.isAdmin])
+  );
+
+  const actorIds = [
+    ...new Set([
+      ...adminLogs.map((log) => log.actorId),
+      ...chatLogs.map((log) => log.moderatorId),
+      ...chatLogs.map((log) => log.targetUserId).filter(Boolean),
+      ...targetUserIds,
+    ]),
+  ] as string[];
+
+  const modRoleUsers =
+    actorIds.length > 0
+      ? await prisma.user.findMany({
+          where: {
+            id: { in: actorIds },
+            OR: [
+              { ownedChannels: { some: {} } },
+              { managedChannels: { some: {} } },
+              { chatModeratedChannels: { some: {} } },
+            ],
+          },
+          select: {
+            id: true,
+          },
+        })
+      : [];
+  const channelModSet = new Set(modRoleUsers.map((user) => user.id));
+
+  const normalizedAdminLogs = adminLogs.map((log) => ({
+    id: log.id,
+    source: 'platform' as const,
+    action: log.action,
+    createdAt: log.createdAt,
+    actor: log.actor.personalChannel?.name ?? log.actor.slack_id,
+    target:
+      log.targetChannel ??
+      (log.targetUserId ? (targetUserMap.get(log.targetUserId) ?? log.targetUserId) : null),
+    reason: log.reason,
+    details: log.details,
+    deletedMessageContent: getDeletedMessageContent(log.details),
+    actorMeta: {
+      isPlatformAdmin: log.actor.isAdmin,
+      isChannelModerator: channelModSet.has(log.actorId),
+    },
+    targetMeta: log.targetUserId
+      ? {
+          isPlatformAdmin: Boolean(targetUserAdminMap.get(log.targetUserId)),
+          isChannelModerator: channelModSet.has(log.targetUserId),
+        }
+      : null,
+  }));
+
+  const normalizedChatLogs = chatLogs.map((log) => ({
+    id: log.id,
+    source: 'chat' as const,
+    action: log.action,
+    createdAt: log.createdAt,
+    actor: log.moderator.personalChannel?.name ?? log.moderator.slack_id,
+    target: log.targetUser?.personalChannel?.name ?? log.channel.name,
+    reason: log.reason,
+    details: log.details,
+    deletedMessageContent: getDeletedMessageContent(log.details),
+    channelName: log.channel.name,
+    actorMeta: {
+      isPlatformAdmin: log.moderator.isAdmin,
+      isChannelModerator: true,
+    },
+    targetMeta: log.targetUser
+      ? {
+          isPlatformAdmin: log.targetUser.isAdmin,
+          isChannelModerator: channelModSet.has(log.targetUser.id),
+        }
+      : null,
+  }));
+
+  const logs = [...normalizedAdminLogs, ...normalizedChatLogs]
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+    .slice(0, take);
+
+  return Response.json(logs);
+}

apps/web/src/app/(ui)/(protected)/api/admin/channels/route.ts

@@ -0,0 +1,142 @@
+import { validateRequest } from '@/lib/auth/validate';
+import { AdminAuditAction, prisma } from '@hctv/db';
+import { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const { user } = await validateRequest();
+  if (!user?.isAdmin) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  const searchParams = request.nextUrl.searchParams;
+  const search = searchParams.get('search') || '';
+
+  const channels = await prisma.channel.findMany({
+    where: search
+      ? {
+          OR: [
+            { name: { contains: search, mode: 'insensitive' } },
+            { description: { contains: search, mode: 'insensitive' } },
+          ],
+        }
+      : undefined,
+    include: {
+      restriction: true,
+      owner: {
+        select: {
+          id: true,
+          slack_id: true,
+          pfpUrl: true,
+          personalChannel: { select: { name: true } },
+        },
+      },
+      personalFor: {
+        select: {
+          id: true,
+        },
+      },
+    },
+    take: 50,
+  });
+  return Response.json(channels);
+}
+
+export async function POST(request: NextRequest) {
+  const { user } = await validateRequest();
+  if (!user?.isAdmin) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  let body: {
+    channelId: string;
+    action: 'restrict' | 'unrestrict';
+    reason?: string;
+    expiresAt?: string;
+  };
+
+  try {
+    body = await request.json();
+  } catch {
+    return new Response('Invalid JSON body', { status: 400 });
+  }
+
+  const { channelId, action, reason, expiresAt } = body;
+
+  if (!channelId || !action) {
+    return new Response('Missing required fields', { status: 400 });
+  }
+
+  let expiresAtDate: Date | null = null;
+  if (expiresAt !== undefined && expiresAt !== null && expiresAt !== '') {
+    expiresAtDate = new Date(expiresAt);
+    if (isNaN(expiresAtDate.getTime())) {
+      return new Response('Invalid expiresAt date', { status: 400 });
+    }
+    if (expiresAtDate <= new Date()) {
+      return new Response('expiresAt must be a future date', { status: 400 });
+    }
+  }
+
+  const channel = await prisma.channel.findUnique({ where: { id: channelId } });
+  if (!channel) {
+    return new Response('Channel not found', { status: 404 });
+  }
+
+  if (action === 'restrict') {
+    if (!reason) {
+      return new Response('Reason is required for restricting', { status: 400 });
+    }
+
+    await prisma.channelRestriction.upsert({
+      where: { channelId },
+      update: {
+        reason,
+        restrictedBy: user.id,
+        expiresAt: expiresAtDate,
+      },
+      create: {
+        channelId,
+        reason,
+        restrictedBy: user.id,
+        expiresAt: expiresAtDate,
+      },
+    });
+
+    await prisma.adminAuditLog.create({
+      data: {
+        action: AdminAuditAction.CHANNEL_RESTRICTED,
+        actorId: user.id,
+        targetChannel: channel.name,
+        reason,
+        details: {
+          channelId,
+          expiresAt: expiresAtDate?.toISOString() ?? null,
+        } as any,
+      },
+    });
+
+    return Response.json({ success: true, message: 'Channel restricted' });
+  }
+
+  if (action === 'unrestrict') {
+    const deleted = await prisma.channelRestriction.deleteMany({ where: { channelId } });
+    if (deleted.count === 0) {
+      return new Response('Channel does not have an active restriction', { status: 400 });
+    }
+
+    await prisma.adminAuditLog.create({
+      data: {
+        action: AdminAuditAction.CHANNEL_UNRESTRICTED,
+        actorId: user.id,
+        targetChannel: channel.name,
+        details: {
+          channelId,
+        } as any,
+      },
+    });
+
+    return Response.json({ success: true, message: 'Channel unrestricted' });
+  }
+
+  return new Response('Invalid action', { status: 400 });
+}

apps/web/src/app/(ui)/(protected)/api/admin/reports/route.ts

@@ -0,0 +1,531 @@
+import { validateRequest } from '@/lib/auth/validate';
+import {
+  AdminAuditAction,
+  ChatModerationAction,
+  ChatReportAction,
+  ChatReportStatus,
+  getRedisConnection,
+  prisma,
+} from '@hctv/db';
+import { NextRequest } from 'next/server';
+
+const redis = getRedisConnection();
+const REPORT_ALREADY_HANDLED_ERROR = 'REPORT_ALREADY_HANDLED';
+const NO_ACTIVE_CHAT_BAN_ERROR = 'NO_ACTIVE_CHAT_BAN';
+const NO_ACTIVE_PLATFORM_BAN_ERROR = 'NO_ACTIVE_PLATFORM_BAN';
+
+export async function GET(request: NextRequest) {
+  const { user } = await validateRequest();
+  if (!user?.isAdmin) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  const searchParams = request.nextUrl.searchParams;
+  const take = Math.min(Math.max(Number(searchParams.get('take') ?? 100), 10), 250);
+  const reportId = searchParams.get('reportId')?.trim();
+
+  const reports = await prisma.chatUserReport.findMany({
+    orderBy: { createdAt: 'desc' },
+    take,
+    include: {
+      channel: {
+        select: {
+          name: true,
+        },
+      },
+      reporter: {
+        include: {
+          personalChannel: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
+      targetUser: {
+        include: {
+          personalChannel: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
+      handledBy: {
+        include: {
+          personalChannel: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const normalizedReports = reports.map((report) => ({
+    id: report.id,
+    status: report.status,
+    reason: report.reason,
+    reportedMessage: report.reportedMessage,
+    reportedMessageId: report.reportedMessageId,
+    targetUsername: report.targetUsername,
+    channelName: report.channel.name,
+    createdAt: report.createdAt,
+    handledAt: report.handledAt,
+    handlingNote: report.handlingNote,
+    lastAction: report.lastAction,
+    reporter: report.reporter.personalChannel?.name ?? report.reporter.slack_id,
+    handledBy: report.handledBy?.personalChannel?.name ?? report.handledBy?.slack_id ?? null,
+    target:
+      report.targetUser?.personalChannel?.name ??
+      report.targetUsername ??
+      report.targetUserId ??
+      'unknown',
+  }));
+
+  return Response.json({
+    reports: normalizedReports,
+    reportId,
+  });
+}
+
+export async function POST(request: NextRequest) {
+  const { user } = await validateRequest();
+  if (!user?.isAdmin) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  let body: {
+    reportId?: string;
+    action?:
+      | 'review'
+      | 'dismiss'
+      | 'delete_reported_message'
+      | 'timeout_10m'
+      | 'timeout_1h'
+      | 'ban_chat'
+      | 'lift_chat_ban'
+      | 'ban_platform'
+      | 'unban_platform';
+    note?: string;
+  };
+
+  try {
+    body = await request.json();
+  } catch {
+    return new Response('Invalid JSON body', { status: 400 });
+  }
+
+  const reportId = body.reportId?.trim();
+  const action = body.action;
+  const note = body.note?.trim() || null;
+
+  if (!reportId || !action) {
+    return new Response('Missing required fields', { status: 400 });
+  }
+
+  const report = await prisma.chatUserReport.findUnique({
+    where: { id: reportId },
+    include: {
+      channel: {
+        select: {
+          id: true,
+          name: true,
+        },
+      },
+      targetUser: {
+        select: {
+          id: true,
+          isAdmin: true,
+        },
+      },
+    },
+  });
+
+  if (!report) {
+    return new Response('Report not found', { status: 404 });
+  }
+
+  const targetUserId = report.targetUserId ?? report.targetUser?.id ?? null;
+  const isTargetAdmin = Boolean(report.targetUser?.isAdmin);
+
+  if (
+    (action === 'ban_platform' ||
+      action === 'ban_chat' ||
+      action === 'timeout_10m' ||
+      action === 'timeout_1h') &&
+    isTargetAdmin
+  ) {
+    return new Response('Cannot enforce this action on an admin user', { status: 400 });
+  }
+
+  const reportPatchBase = {
+    handledById: user.id,
+    handledAt: new Date(),
+    handlingNote: note,
+  };
+
+  if (action === 'review') {
+    try {
+      await prisma.$transaction(async (tx) => {
+        const claimed = await tx.chatUserReport.updateMany({
+          where: { id: reportId, status: ChatReportStatus.OPEN },
+          data: {
+            ...reportPatchBase,
+            status: ChatReportStatus.REVIEWED,
+            lastAction: ChatReportAction.REVIEW,
+          },
+        });
+        if (claimed.count === 0) {
+          throw new Error(REPORT_ALREADY_HANDLED_ERROR);
+        }
+
+        await tx.adminAuditLog.create({
+          data: {
+            action: AdminAuditAction.REPORT_REVIEWED,
+            actorId: user.id,
+            targetUserId,
+            targetChannel: report.channel.name,
+            reason: note,
+            details: {
+              reportId,
+            } as any,
+          },
+        });
+      });
+    } catch (error) {
+      if (error instanceof Error && error.message === REPORT_ALREADY_HANDLED_ERROR) {
+        return new Response('Report has already been handled', { status: 409 });
+      }
+      throw error;
+    }
+
+    return Response.json({ success: true });
+  }
+
+  if (action === 'dismiss') {
+    try {
+      await prisma.$transaction(async (tx) => {
+        const claimed = await tx.chatUserReport.updateMany({
+          where: { id: reportId, status: ChatReportStatus.OPEN },
+          data: {
+            ...reportPatchBase,
+            status: ChatReportStatus.DISMISSED,
+            lastAction: ChatReportAction.DISMISS,
+          },
+        });
+        if (claimed.count === 0) {
+          throw new Error(REPORT_ALREADY_HANDLED_ERROR);
+        }
+
+        await tx.adminAuditLog.create({
+          data: {
+            action: AdminAuditAction.REPORT_DISMISSED,
+            actorId: user.id,
+            targetUserId,
+            targetChannel: report.channel.name,
+            reason: note,
+            details: {
+              reportId,
+            } as any,
+          },
+        });
+      });
+    } catch (error) {
+      if (error instanceof Error && error.message === REPORT_ALREADY_HANDLED_ERROR) {
+        return new Response('Report has already been handled', { status: 409 });
+      }
+      throw error;
+    }
+
+    return Response.json({ success: true });
+  }
+
+  if (action === 'delete_reported_message') {
+    if (!report.reportedMessageId) {
+      return new Response('No reported message id available for this report', { status: 400 });
+    }
+
+    const channelKey = `chat:history:${report.channel.name}`;
+    const history = await redis.zrange(channelKey, 0, -1);
+    let deleted = false;
+
+    for (const entry of history) {
+      try {
+        const parsed = JSON.parse(entry) as { msgId?: string };
+        if (parsed.msgId === report.reportedMessageId) {
+          await redis.zrem(channelKey, entry);
+          deleted = true;
+          break;
+        }
+      } catch {
+        continue;
+      }
+    }
+
+    if (!deleted) {
+      return new Response('Reported message was not found in chat history', { status: 404 });
+    }
+
+    try {
+      await prisma.$transaction(async (tx) => {
+        const claimed = await tx.chatUserReport.updateMany({
+          where: { id: reportId, status: ChatReportStatus.OPEN },
+          data: {
+            ...reportPatchBase,
+            status: ChatReportStatus.REVIEWED,
+            lastAction: ChatReportAction.DELETE_REPORTED_MESSAGE,
+          },
+        });
+        if (claimed.count === 0) {
+          throw new Error(REPORT_ALREADY_HANDLED_ERROR);
+        }
+
+        await tx.chatModerationEvent.create({
+          data: {
+            action: ChatModerationAction.MESSAGE_DELETED,
+            channelId: report.channel.id,
+            moderatorId: user.id,
+            targetUserId,
+            reason: note ?? 'Message deleted from report review',
+            details: {
+              reportId,
+              msgId: report.reportedMessageId,
+              messageContent: report.reportedMessage,
+            } as any,
+          },
+        });
+
+        await tx.adminAuditLog.create({
+          data: {
+            action: AdminAuditAction.REPORT_ENFORCEMENT,
+            actorId: user.id,
+            targetUserId,
+            targetChannel: report.channel.name,
+            reason: note,
+            details: {
+              reportId,
+              enforcement: 'DELETE_REPORTED_MESSAGE',
+              msgId: report.reportedMessageId,
+              messageContent: report.reportedMessage,
+            } as any,
+          },
+        });
+      });
+    } catch (error) {
+      if (error instanceof Error && error.message === REPORT_ALREADY_HANDLED_ERROR) {
+        return new Response('Report has already been handled', { status: 409 });
+      }
+      throw error;
+    }
+
+    return Response.json({ success: true });
+  }
+
+  if (!targetUserId) {
+    return new Response('Report target is unavailable', { status: 400 });
+  }
+
+  if (
+    action === 'timeout_10m' ||
+    action === 'timeout_1h' ||
+    action === 'ban_chat' ||
+    action === 'lift_chat_ban'
+  ) {
+    const timeoutSeconds = action === 'timeout_10m' ? 600 : action === 'timeout_1h' ? 3600 : null;
+    try {
+      await prisma.$transaction(async (tx) => {
+        const claimed = await tx.chatUserReport.updateMany({
+          where: { id: reportId, status: ChatReportStatus.OPEN },
+          data: {
+            ...reportPatchBase,
+            status: ChatReportStatus.REVIEWED,
+            lastAction:
+              action === 'timeout_10m'
+                ? ChatReportAction.TIMEOUT_10M
+                : action === 'timeout_1h'
+                  ? ChatReportAction.TIMEOUT_1H
+                  : action === 'ban_chat'
+                    ? ChatReportAction.BAN_CHAT
+                    : ChatReportAction.LIFT_CHAT_BAN,
+          },
+        });
+        if (claimed.count === 0) {
+          throw new Error(REPORT_ALREADY_HANDLED_ERROR);
+        }
+
+        if (action === 'lift_chat_ban') {
+          const deleted = await tx.chatUserBan.deleteMany({
+            where: {
+              channelId: report.channel.id,
+              userId: targetUserId,
+            },
+          });
+          if (deleted.count === 0) {
+            throw new Error(NO_ACTIVE_CHAT_BAN_ERROR);
+          }
+        } else {
+          await tx.chatUserBan.upsert({
+            where: {
+              channelId_userId: {
+                channelId: report.channel.id,
+                userId: targetUserId,
+              },
+            },
+            create: {
+              channelId: report.channel.id,
+              userId: targetUserId,
+              bannedById: user.id,
+              reason: note ?? report.reason,
+              expiresAt: timeoutSeconds ? new Date(Date.now() + timeoutSeconds * 1000) : null,
+            },
+            update: {
+              bannedById: user.id,
+              reason: note ?? report.reason,
+              expiresAt: timeoutSeconds ? new Date(Date.now() + timeoutSeconds * 1000) : null,
+            },
+          });
+        }
+
+        await tx.chatModerationEvent.create({
+          data: {
+            action:
+              action === 'lift_chat_ban'
+                ? ChatModerationAction.USER_UNBANNED
+                : action === 'ban_chat'
+                  ? ChatModerationAction.USER_BANNED
+                  : ChatModerationAction.USER_TIMEOUT,
+            channelId: report.channel.id,
+            moderatorId: user.id,
+            targetUserId,
+            reason: note ?? report.reason,
+            details:
+              timeoutSeconds === null
+                ? ({ reportId } as any)
+                : ({ reportId, durationSeconds: timeoutSeconds } as any),
+          },
+        });
+
+        await tx.adminAuditLog.create({
+          data: {
+            action: AdminAuditAction.REPORT_ENFORCEMENT,
+            actorId: user.id,
+            targetUserId,
+            targetChannel: report.channel.name,
+            reason: note,
+            details: {
+              reportId,
+              enforcement:
+                action === 'timeout_10m'
+                  ? 'TIMEOUT_10M'
+                  : action === 'timeout_1h'
+                    ? 'TIMEOUT_1H'
+                    : action === 'ban_chat'
+                      ? 'BAN_CHAT'
+                      : 'LIFT_CHAT_BAN',
+            } as any,
+          },
+        });
+      });
+    } catch (error) {
+      if (error instanceof Error && error.message === REPORT_ALREADY_HANDLED_ERROR) {
+        return new Response('Report has already been handled', { status: 409 });
+      }
+      if (error instanceof Error && error.message === NO_ACTIVE_CHAT_BAN_ERROR) {
+        return new Response('User does not have an active chat ban for this channel', {
+          status: 400,
+        });
+      }
+      throw error;
+    }
+
+    return Response.json({ success: true });
+  }
+
+  if (action === 'ban_platform' || action === 'unban_platform') {
+    try {
+      await prisma.$transaction(async (tx) => {
+        const claimed = await tx.chatUserReport.updateMany({
+          where: { id: reportId, status: ChatReportStatus.OPEN },
+          data: {
+            ...reportPatchBase,
+            status: ChatReportStatus.REVIEWED,
+            lastAction:
+              action === 'ban_platform'
+                ? ChatReportAction.BAN_PLATFORM
+                : ChatReportAction.UNBAN_PLATFORM,
+          },
+        });
+        if (claimed.count === 0) {
+          throw new Error(REPORT_ALREADY_HANDLED_ERROR);
+        }
+
+        if (action === 'ban_platform') {
+          await tx.userBan.upsert({
+            where: { userId: targetUserId },
+            update: {
+              reason: note ?? report.reason,
+              bannedBy: user.id,
+              expiresAt: null,
+            },
+            create: {
+              userId: targetUserId,
+              reason: note ?? report.reason,
+              bannedBy: user.id,
+              expiresAt: null,
+            },
+          });
+        } else {
+          const deleted = await tx.userBan.deleteMany({ where: { userId: targetUserId } });
+          if (deleted.count === 0) {
+            throw new Error(NO_ACTIVE_PLATFORM_BAN_ERROR);
+          }
+        }
+
+        await tx.adminAuditLog.create({
+          data: {
+            action:
+              action === 'ban_platform'
+                ? AdminAuditAction.USER_BANNED
+                : AdminAuditAction.USER_UNBANNED,
+            actorId: user.id,
+            targetUserId,
+            targetChannel: report.channel.name,
+            reason: note,
+            details: {
+              reportId,
+              source: 'CHAT_REPORT',
+            } as any,
+          },
+        });
+
+        await tx.adminAuditLog.create({
+          data: {
+            action: AdminAuditAction.REPORT_ENFORCEMENT,
+            actorId: user.id,
+            targetUserId,
+            targetChannel: report.channel.name,
+            reason: note,
+            details: {
+              reportId,
+              enforcement: action === 'ban_platform' ? 'BAN_PLATFORM' : 'UNBAN_PLATFORM',
+            } as any,
+          },
+        });
+      });
+    } catch (error) {
+      if (error instanceof Error && error.message === REPORT_ALREADY_HANDLED_ERROR) {
+        return new Response('Report has already been handled', { status: 409 });
+      }
+      if (error instanceof Error && error.message === NO_ACTIVE_PLATFORM_BAN_ERROR) {
+        return new Response('User does not have an active platform ban', { status: 400 });
+      }
+      throw error;
+    }
+
+    return Response.json({ success: true });
+  }
+
+  return new Response('Invalid action', { status: 400 });
+}

apps/web/src/app/(ui)/(protected)/api/admin/users/route.ts

@@ -0,0 +1,247 @@
+import { validateRequest } from '@/lib/auth/validate';
+import { AdminAuditAction, getRedisConnection, prisma } from '@hctv/db';
+import { NextRequest } from 'next/server';
+
+export async function GET(request: NextRequest) {
+  const { user } = await validateRequest();
+  if (!user?.isAdmin) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  const searchParams = request.nextUrl.searchParams;
+  const search = searchParams.get('search') || '';
+
+  const users = await prisma.user.findMany({
+    where: search
+      ? {
+          OR: [
+            { slack_id: { contains: search, mode: 'insensitive' } },
+            { email: { contains: search, mode: 'insensitive' } },
+            { personalChannel: { name: { contains: search, mode: 'insensitive' } } },
+          ],
+          hasOnboarded: true,
+        }
+      : undefined,
+    select: {
+      id: true,
+      slack_id: true,
+      email: true,
+      pfpUrl: true,
+      isAdmin: true,
+      bypassVerification: true,
+      ban: true,
+      personalChannel: { select: { name: true } },
+    },
+    take: 50,
+  });
+  return Response.json(users);
+}
+
+export async function POST(request: NextRequest) {
+  const { user, session } = await validateRequest();
+  if (!user?.isAdmin) {
+    return new Response('Forbidden', { status: 403 });
+  }
+
+  let body: {
+    userId?: string;
+    action: 'ban' | 'unban' | 'promote' | 'demote' | 'logout_others' | 'toggle_bypass_verification';
+    reason?: string;
+    expiresAt?: string;
+  };
+
+  try {
+    body = await request.json();
+  } catch {
+    return new Response('Invalid JSON body', { status: 400 });
+  }
+
+  const { userId, action, reason, expiresAt } = body;
+
+  if (action === 'logout_others') {
+    if (!session) {
+      return new Response('No active session found', { status: 400 });
+    }
+
+    const sessionsToDelete = await prisma.session.findMany({
+      where: {
+        id: {
+          not: session.id,
+        },
+      },
+      select: {
+        id: true,
+      },
+    });
+
+    if (sessionsToDelete.length > 0) {
+      const redis = getRedisConnection();
+      await prisma.session.deleteMany({
+        where: {
+          id: {
+            in: sessionsToDelete.map((existingSession) => existingSession.id),
+          },
+        },
+      });
+      await redis.unlink(
+        ...sessionsToDelete.map((existingSession) => `sessions:${existingSession.id}`)
+      );
+    }
+
+    return Response.json({
+      success: true,
+      invalidatedSessions: sessionsToDelete.length,
+    });
+  }
+
+  if (!userId || !action) {
+    return new Response('Missing required fields', { status: 400 });
+  }
+
+  let expiresAtDate: Date | null = null;
+  if (expiresAt !== undefined && expiresAt !== null && expiresAt !== '') {
+    expiresAtDate = new Date(expiresAt);
+    if (isNaN(expiresAtDate.getTime())) {
+      return new Response('Invalid expiresAt date', { status: 400 });
+    }
+    if (expiresAtDate <= new Date()) {
+      return new Response('expiresAt must be a future date', { status: 400 });
+    }
+  }
+
+  const targetUser = await prisma.user.findUnique({ where: { id: userId } });
+  if (!targetUser) {
+    return new Response('User not found', { status: 404 });
+  }
+
+  if (action === 'ban') {
+    if (targetUser.isAdmin) {
+      return new Response('Cannot ban an admin', { status: 400 });
+    }
+
+    if (!reason) {
+      return new Response('Reason is required for banning', { status: 400 });
+    }
+
+    await prisma.userBan.upsert({
+      where: { userId },
+      update: {
+        reason,
+        bannedBy: user.id,
+        expiresAt: expiresAtDate,
+      },
+      create: {
+        userId,
+        reason,
+        bannedBy: user.id,
+        expiresAt: expiresAtDate,
+      },
+    });
+
+    await prisma.adminAuditLog.create({
+      data: {
+        action: AdminAuditAction.USER_BANNED,
+        actorId: user.id,
+        targetUserId: userId,
+        reason,
+        details: {
+          expiresAt: expiresAtDate?.toISOString() ?? null,
+        } as any,
+      },
+    });
+
+    return Response.json({ success: true, message: 'User banned' });
+  }
+
+  if (action === 'unban') {
+    const deleted = await prisma.userBan.deleteMany({ where: { userId } });
+    if (deleted.count === 0) {
+      return new Response('User does not have an active platform ban', { status: 400 });
+    }
+
+    await prisma.adminAuditLog.create({
+      data: {
+        action: AdminAuditAction.USER_UNBANNED,
+        actorId: user.id,
+        targetUserId: userId,
+      },
+    });
+
+    return Response.json({ success: true, message: 'User unbanned' });
+  }
+
+  if (action === 'promote') {
+    if (targetUser.isAdmin) {
+      return new Response('User is already an admin', { status: 400 });
+    }
+
+    await prisma.user.update({
+      where: { id: userId },
+      data: { isAdmin: true },
+    });
+
+    await prisma.adminAuditLog.create({
+      data: {
+        action: AdminAuditAction.USER_PROMOTED,
+        actorId: user.id,
+        targetUserId: userId,
+      },
+    });
+
+    return Response.json({ success: true, message: 'User promoted to admin' });
+  }
+
+  if (action === 'demote') {
+    if (!targetUser.isAdmin) {
+      return new Response('User is not an admin', { status: 400 });
+    }
+
+    if (targetUser.id === user.id) {
+      return new Response('Cannot demote yourself', { status: 400 });
+    }
+
+    await prisma.user.update({
+      where: { id: userId },
+      data: { isAdmin: false },
+    });
+
+    await prisma.adminAuditLog.create({
+      data: {
+        action: AdminAuditAction.USER_DEMOTED,
+        actorId: user.id,
+        targetUserId: userId,
+      },
+    });
+
+    return Response.json({ success: true, message: 'User demoted from admin' });
+  }
+
+  if (action === 'toggle_bypass_verification') {
+    const newBypassStatus = !targetUser.bypassVerification;
+
+    await prisma.user.update({
+      where: { id: userId },
+      data: { bypassVerification: newBypassStatus },
+    });
+
+    await prisma.adminAuditLog.create({
+      data: {
+        action: newBypassStatus
+          ? AdminAuditAction.BYPASS_VERIFICATION_ENABLED
+          : AdminAuditAction.BYPASS_VERIFICATION_DISABLED,
+        actorId: user.id,
+        targetUserId: userId,
+      },
+    });
+
+    return Response.json({
+      success: true,
+      message: newBypassStatus
+        ? 'Email verification bypass enabled'
+        : 'Email verification bypass disabled',
+      bypassVerification: newBypassStatus,
+    });
+  }
+
+  return new Response('Invalid action', { status: 400 });
+}

apps/web/src/app/(ui)/(protected)/api/mediamtx/publish/route.ts

@@ -0,0 +1,116 @@
+import { prisma, getRedisConnection } from '@hctv/db';
+import { recordMediamtxAuth } from '@/lib/metrics';
+import { NextRequest } from 'next/server';
+import { z } from 'zod';
+
+export async function POST(request: NextRequest) {
+  const startedAt = performance.now();
+  let action = 'invalid';
+  let protocol = 'invalid';
+
+  const finish = (body: string, status: number, outcome: string) => {
+    recordMediamtxAuth(action, protocol, outcome, (performance.now() - startedAt) / 1000);
+    return new Response(body, { status });
+  };
+
+  const redis = getRedisConnection();
+  const body = await request.json();
+
+  if (process.env.NODE_ENV !== 'production') {
+    console.log('Mediamtx publish auth request:', JSON.stringify(body, null, 2));
+  }
+  const parsed = schema.safeParse(body);
+
+  if (!parsed.success) {
+    if (process.env.NODE_ENV !== 'production') {
+      console.error('Invalid MediaMTX auth request:', parsed.error.flatten());
+    }
+
+    return finish('invalid request', 400, 'invalid_request');
+  }
+  const { action: parsedAction, protocol: parsedProtocol, path, password, token } = parsed.data;
+  action = parsedAction;
+  protocol = parsedProtocol || 'none';
+
+  if (parsedAction === 'publish' && (parsedProtocol === 'srt' || parsedProtocol === 'webrtc')) {
+    const channelKey = await redis.get(`streamKey:${path}`);
+
+    if (channelKey) {
+      if (channelKey !== password) {
+        return finish('invalid stream key', 403, 'invalid_stream_key');
+      }
+
+      const channel = await prisma.channel.findUnique({
+        where: { name: path },
+        include: {
+          restriction: true,
+          owner: {
+            include: { ban: true },
+          },
+          streamInfo: true,
+        },
+      });
+
+      if (channel?.restriction) {
+        const isExpired =
+          channel.restriction.expiresAt && new Date(channel.restriction.expiresAt) < new Date();
+        if (!isExpired) {
+          return finish('channel restricted', 403, 'channel_restricted');
+        }
+      }
+
+      if (channel?.owner?.ban) {
+        const isExpired =
+          channel.owner.ban.expiresAt && new Date(channel.owner.ban.expiresAt) < new Date();
+        if (!isExpired) {
+          return finish('user banned', 403, 'user_banned');
+        }
+      }
+
+      if (channel?.streamInfo[0].isLive) {
+        return finish('stream already live', 403, 'stream_already_live');
+      }
+
+      return finish('youre in yay', 200, 'authorized_publish');
+    }
+  }
+  if (parsedAction === 'read' && parsedProtocol === 'hls') {
+    if (password === process.env.MEDIAMTX_PUBLISH_KEY) {
+      return finish('authorized (hls read key for thumbs)', 200, 'authorized_thumbnail');
+    }
+    const sessionExists = await redis.exists(`sessions:${password}`);
+    if (!sessionExists) {
+      return finish('unauthorized', 401, 'unauthorized_session');
+    }
+    return finish('authorized', 200, 'authorized_read');
+  }
+  if (parsedAction === 'api') {
+    if (password === process.env.MEDIAMTX_API_KEY || token === process.env.MEDIAMTX_API_KEY) {
+      return finish('authorized api', 200, 'authorized_api');
+    }
+
+    return finish('unauthorized api', 401, 'unauthorized_api');
+  }
+
+  return finish('uhh', 401, 'unauthorized');
+}
+
+const emptyableString = z
+  .string()
+  .nullish()
+  .transform((value) => value ?? '');
+
+const schema = z.object({
+  user: emptyableString,
+  password: emptyableString,
+  token: emptyableString,
+  ip: emptyableString,
+  action: z.enum(['publish', 'read', 'playback', 'api', 'metrics', 'pprof']),
+  path: emptyableString,
+  protocol: z
+    .union([z.enum(['rtsp', 'rtmp', 'hls', 'webrtc', 'srt']), z.literal('')])
+    .nullish()
+    .transform((value) => value ?? ''),
+  id: z.string().nullable().default(null),
+  query: emptyableString,
+});

apps/web/src/app/(ui)/(protected)/api/rtmp/hls/[path]/route.ts

@@ -1,32 +0,0 @@
-import fsP from 'fs/promises';
-import fs from 'fs'; 
-import { getRedisConnection } from '@hctv/db';
-import { cookies } from 'next/headers';
-
-export async function GET(request: Request, { params }: { params: Promise<{ path: string }> }) {
-  const { path } = await params;
-  const c = await cookies();
-  if (!getRedisConnection().exists(`sessions:${c.get('auth_session')?.value}`)) {
-    return new Response("Unauthorized", { status: 401 });
-  }
-  if (path.includes('..')) {
-    return new Response("nuh uh", { status: 403 });
-  }
-
-  const basePath = '/dev/shm/hls';
-  const filePath = `${basePath}/${path}`;
-  const exists = fs.existsSync(filePath);
-
-  if (!exists) {
-    return new Response("Not Found", { status: 404 });
-  }
-
-  const file = await fsP.readFile(filePath);
-  return new Response(file, {
-    headers: {
-      'Content-Type': 'application/octet-stream',
-      'Access-Control-Allow-Origin': '*',
-      'Access-Control-Allow-Methods': 'GET',
-    },
-  });
-}

apps/web/src/app/(ui)/(protected)/api/rtmp/publish/route.ts

@@ -3,14 +3,26 @@ import { NextRequest } from 'next/server';
 
 export async function POST(request: NextRequest) {
   const formData = await request.formData();
-  const streamKey = formData.get('name')?.toString() || '';
+  const streamKey = formData.get('name');
+  if (typeof streamKey !== 'string') {
+    return new Response('bad request', {
+      status: 400,
+    });
+  }
 
   const key = await prisma.streamKey.findFirst({
     where: {
       key: streamKey,
     },
     include: {
-      channel: true,
+      channel: {
+        include: {
+          restriction: true,
+          owner: {
+            include: { ban: true },
+          },
+        },
+      },
     },
   });
 
@@ -20,11 +32,26 @@ export async function POST(request: NextRequest) {
     });
   }
 
-  const headers = new Headers();
-  headers.append('Location', `rtmp://127.0.0.1/channel-live/${key.channel.name}`);
-  
-  return new Response(null, {
+  if (key.channel.restriction) {
+    const isExpired = key.channel.restriction.expiresAt &&
+      new Date(key.channel.restriction.expiresAt) < new Date();
+    if (!isExpired) {
+      return new Response('channel restricted', { status: 403 });
+    }
+  }
+
+  if (key.channel.owner?.ban) {
+    const isExpired = key.channel.owner.ban.expiresAt &&
+      new Date(key.channel.owner.ban.expiresAt) < new Date();
+    if (!isExpired) {
+      return new Response('user banned', { status: 403 });
+    }
+  }
+
+  return new Response('', {
     status: 302,
-    headers: headers,
+    headers: {
+      'Location': key.channel.name,
+    },
   });
 }

apps/web/src/app/(ui)/(protected)/api/rtmp/streamKey/route.ts

@@ -1,52 +1,106 @@
+import { NextRequest } from 'next/server';
 import { validateRequest } from '@/lib/auth/validate';
+import { regenerateStreamKey } from '@/lib/db/streamKey';
 import { prisma } from '@hctv/db';
-import { NextRequest } from "next/server";
 
 export async function POST(request: NextRequest) {
+  const channelName = await readChannelNameFromBody(request);
+
+  if (!channelName) {
+    return badRequestResponse();
+  }
+
+  const result = await getAuthorizedChannel(channelName);
+  if ('response' in result) {
+    return result.response;
+  }
+
+  const streamKey = await regenerateStreamKey(result.channel.id, channelName);
+  return Response.json({ key: streamKey.key });
+}
+
+export async function GET(request: NextRequest) {
+  const channelName = request.nextUrl.searchParams.get('channel');
+
+  if (!isValidChannelName(channelName)) {
+    return badRequestResponse();
+  }
+
+  const result = await getAuthorizedChannel(channelName);
+  if ('response' in result) {
+    return result.response;
+  }
+
+  const streamKey = await prisma.streamKey.findUnique({
+    where: { channelId: result.channel.id },
+    select: { key: true },
+  });
+
+  if (!streamKey) {
+    return new Response('Stream key not found', { status: 404 });
+  }
+
+  return Response.json({ key: streamKey.key });
+}
+
+async function getAuthorizedChannel(channelName: string): Promise<AuthorizedChannelResult> {
   const { user } = await validateRequest();
-  const body = await request.json();
-  const { channel } = body;
 
   if (!user) {
-    return new Response('Unauthorized', { status: 401 });
+    return { response: unauthorizedResponse() };
   }
 
-  const channelInfo = await prisma.channel.findUnique({
-    where: { name: channel },
-    include: {
-      owner: true,
-      managers: true
-    }
+  const channel = await prisma.channel.findUnique({
+    where: { name: channelName },
+    select: {
+      id: true,
+      ownerId: true,
+      managers: {
+        where: { id: user.id },
+        select: { id: true },
+      },
+    },
   });
 
-  if (!channelInfo) {
-    return new Response('Channel not found', { status: 404 });
+  if (!channel) {
+    return { response: new Response('Channel not found', { status: 404 }) };
   }
 
-  const isBroadcaster = 
-    channelInfo.ownerId === user.id || 
-    channelInfo.managers.some(m => m.id === user.id);
+  const isBroadcaster = channel.ownerId === user.id || channel.managers.length > 0;
   if (!isBroadcaster) {
-    return new Response('Unauthorized', { status: 401 });
+    return { response: unauthorizedResponse() };
   }
 
-  const dbUpdate = await prisma.streamKey.upsert({
-    create: {
-      key: crypto.randomUUID(),
-      channelId: channelInfo.id
-    },
-    update: {
-      key: crypto.randomUUID()
-    },
-    where: {
-      channelId: channelInfo.id
-    }
-  })
+  return { channel: { id: channel.id } };
+}
 
-  return new Response(JSON.stringify({ key: dbUpdate.key }), {
-    status: 200,
-    headers: {
-      'Content-Type': 'application/json'
+async function readChannelNameFromBody(request: NextRequest) {
+  try {
+    const body = await request.json();
+    return isValidChannelName(body?.channel) ? body.channel : null;
+  } catch {
+    return null;
+  }
+}
+
+function isValidChannelName(channelName: unknown): channelName is string {
+  return typeof channelName === 'string' && channelName.length > 0;
+}
+
+function badRequestResponse() {
+  return new Response('Bad Request', { status: 400 });
+}
+
+function unauthorizedResponse() {
+  return new Response('Unauthorized', { status: 401 });
+}
+
+type AuthorizedChannelResult =
+  | {
+      channel: {
+        id: string;
+      };
     }
-  });
-}
+  | {
+      response: Response;
+    };

apps/web/src/app/(ui)/(protected)/api/settings/bot/[slug]/apiKey/route.ts

@@ -0,0 +1,130 @@
+import { validateRequest } from "@/lib/auth/validate";
+import { prisma } from "@hctv/db";
+import { NextRequest } from "next/server";
+import { z } from "zod";
+
+type Params = Promise<{ slug: string }>;
+
+export async function POST(request: NextRequest, segmentData: { params: Params }) {
+  const { slug } = await segmentData.params;
+  const { user } = await validateRequest();
+  if (!user) {
+    return new Response(JSON.stringify({ success: false, error: 'Unauthorized' }), { status: 401 });
+  }
+
+  const bodySchema = z.object({
+    action: z.enum(['revoke', 'regenerate', 'create']),
+    name: z.string().min(3, 'Name must be at least 3 characters long').max(50, 'Name must be at most 50 characters long'),
+  });
+  const body = await request.json();
+  const parsedBody = bodySchema.safeParse(body);
+  if (!parsedBody.success) {
+    return new Response(
+      JSON.stringify({
+        success: false,
+        error: parsedBody.error.issues.map((issue) => issue.message).join(', '),
+      }),
+      { status: 400 }
+    );
+  }
+
+  const { action, name } = parsedBody.data;
+
+  if (action === 'create') {
+    const exists = await prisma.botApiKey.findFirst({
+      where: {
+        name,
+        botAccount: {
+          ownerId: user.id,
+          slug,
+        }
+      }
+    });
+    if (exists) {
+      return new Response(JSON.stringify({ success: false, error: 'API Key with this name already exists' }), { status: 400 });
+    }
+    const newKey = await prisma.botApiKey.create({
+      data: {
+        name,
+        botAccount: {
+          connect: {
+            ownerId: user.id,
+            slug,
+          }
+        },
+        key: generateApiKey(),
+      }
+    });
+    return new Response(JSON.stringify({ success: true, apiKey: newKey.key, id: newKey.id }));
+  }
+  if (action === 'regenerate') {
+    const existingKey = await prisma.botApiKey.findFirst({
+      where: {
+        name,
+        botAccount: {
+          ownerId: user.id,
+          slug,
+        }
+      }
+    });
+    if (!existingKey) {
+      return new Response(JSON.stringify({ success: false, error: 'API Key not found' }), { status: 404 });
+    }
+    const newKey = generateApiKey();
+    await prisma.botApiKey.update({
+      where: { id: existingKey.id },
+      data: { key: newKey },
+    });
+    return new Response(JSON.stringify({ success: true, apiKey: newKey, id: existingKey.id }));
+  }
+  if (action === 'revoke') {
+    const existingKey = await prisma.botApiKey.findFirst({
+      where: {
+        name,
+        botAccount: {
+          ownerId: user.id,
+          slug,
+        }
+      }
+    });
+    if (!existingKey) {
+      return new Response(JSON.stringify({ success: false, error: 'API Key not found' }), { status: 404 });
+    }
+    await prisma.botApiKey.delete({
+      where: { id: existingKey.id },
+    });
+    return new Response(JSON.stringify({ success: true }));
+  }
+  return new Response(JSON.stringify({ success: false, error: 'Invalid action' }), { status: 400 });
+}
+
+export async function GET(request: NextRequest, segmentData: { params: Params }) {
+  const { slug } = await segmentData.params;
+  const { user } = await validateRequest();
+  if (!user) {
+    return new Response(JSON.stringify({ success: false, error: 'Unauthorized' }), { status: 401 });
+  }
+
+  const apiKeys = await prisma.botApiKey.findMany({
+    where: {
+      botAccount: {
+        ownerId: user.id,
+        slug,
+      }
+    },
+    select: {
+      id: true,
+      name: true,
+      createdAt: true,
+    },
+    orderBy: {
+      createdAt: 'desc',
+    }
+  });
+  return new Response(JSON.stringify({ success: true, apiKeys }));
+}
+
+function generateApiKey() {
+  const uuid = crypto.randomUUID().replace(/-/g, '');
+  return `hctvb_${uuid}`;
+}

apps/web/src/app/(ui)/(protected)/api/stream/chat/report/route.ts

@@ -0,0 +1,107 @@
+import { validateRequest } from '@/lib/auth/validate';
+import { prisma, getRedisConnection } from '@hctv/db';
+import { NextRequest } from 'next/server';
+
+const RATE_LIMIT_WINDOW_SECONDS = 10 * 60;
+const RATE_LIMIT_MAX_REPORTS = 5;
+
+export async function POST(request: NextRequest) {
+  const { user } = await validateRequest();
+  if (!user) {
+    return new Response('Unauthorized', { status: 401 });
+  }
+
+  let body: {
+    channelName?: string;
+    targetUserId?: string;
+    targetUsername?: string;
+    msgId?: string;
+    message?: string;
+    reason?: string;
+  };
+
+  try {
+    body = await request.json();
+  } catch {
+    return new Response('Invalid JSON body', { status: 400 });
+  }
+
+  const channelName = body.channelName?.trim();
+  const targetUserId = body.targetUserId?.trim();
+  const reason = body.reason?.trim();
+
+  if (!channelName || !targetUserId || !reason) {
+    return new Response('Missing required fields', { status: 400 });
+  }
+
+  if (targetUserId === user.id) {
+    return new Response('You cannot report yourself', { status: 400 });
+  }
+
+  if (reason.length < 10 || reason.length > 1000) {
+    return new Response('Reason must be between 10 and 1000 characters', { status: 400 });
+  }
+
+  const redis = getRedisConnection();
+  const rateLimitKey = `report_rl:${user.id}`;
+  const currentCount = await redis.incr(rateLimitKey);
+  if (currentCount === 1) {
+    await redis.expire(rateLimitKey, RATE_LIMIT_WINDOW_SECONDS);
+  }
+  if (currentCount > RATE_LIMIT_MAX_REPORTS) {
+    return new Response('Too many reports submitted. Please wait before submitting more.', {
+      status: 429,
+    });
+  }
+
+  const [channel, targetUser] = await Promise.all([
+    prisma.channel.findUnique({
+      where: { name: channelName },
+      select: { id: true },
+    }),
+    prisma.user.findUnique({
+      where: { id: targetUserId },
+      select: { id: true, personalChannel: { select: { name: true } } },
+    }),
+  ]);
+
+  if (!channel) {
+    return new Response('Channel not found', { status: 404 });
+  }
+
+  if (!targetUser) {
+    return new Response('Target user not found', { status: 404 });
+  }
+
+  const msgId = body.msgId?.trim() || null;
+  const duplicateCheck = await prisma.chatUserReport.findFirst({
+    where: {
+      channelId: channel.id,
+      reporterId: user.id,
+      targetUserId: targetUser.id,
+      reportedMessageId: msgId,
+      status: 'OPEN',
+    },
+    select: { id: true },
+  });
+
+  if (duplicateCheck) {
+    return new Response('You have already submitted an open report for this message.', {
+      status: 409,
+    });
+  }
+
+  await prisma.chatUserReport.create({
+    data: {
+      channelId: channel.id,
+      reporterId: user.id,
+      targetUserId: targetUser.id,
+      targetUsername: body.targetUsername?.trim() || targetUser.personalChannel?.name || null,
+      reportedMessageId: msgId,
+      reportedMessage: body.message?.trim().slice(0, 1000) || null,
+      reason,
+    },
+  });
+
+  return Response.json({ success: true });
+}

apps/web/src/app/(ui)/(protected)/api/stream/follow/route.ts

@@ -103,7 +103,7 @@ export async function POST(request: NextRequest) {
     });
 
     await queue.add(`newFollow:${username}`, {
-      text: `You started following \`${username}\`!\n_Stream notifications are enabled by default. If you want to disable them, you can do so in \`Profile > Notifications\`._`,
+      text: `You started following \`${username}\`!\n_Stream notifications are disabled by default. If you want to enable them, you can do so in \`Profile > Notifications\`._`,
       channel: user.slack_id,
     });
   }

apps/web/src/app/(ui)/(protected)/api/stream/info/route.ts

@@ -9,6 +9,7 @@ export async function GET(request: NextRequest) {
   const shouldGetOwned = searchParams.get('owned') === 'true';
   const allPersonalChannels = searchParams.get('personal') === 'true';
   const isLive = searchParams.get('live') === 'true';
+  const username = searchParams.get('username');
   const { user } = await validateRequest();
 
   if ((shouldGetOwned || allPersonalChannels) && !user) {
@@ -18,15 +19,20 @@ export async function GET(request: NextRequest) {
   const where: Prisma.StreamInfoWhereInput = {};
   const channelConditions: Prisma.ChannelWhereInput[] = [];
 
+  if (username) {
+    where.username = username;
+  }
+
   if (shouldGetOwned && user) {
     channelConditions.push({ ownerId: user.id });
+    channelConditions.push({ managers: { some: { id: user.id } } });
   }
 
   if (allPersonalChannels) {
-    channelConditions.push({ 
-      personalFor: { 
-        isNot: null 
-      } 
+    channelConditions.push({
+      personalFor: {
+        isNot: null,
+      },
     });
   }
 
@@ -35,9 +41,8 @@ export async function GET(request: NextRequest) {
   }
 
   if (channelConditions.length > 0) {
-    where.channel = channelConditions.length === 1 
-      ? channelConditions[0]
-      : { OR: channelConditions };
+    where.channel =
+      channelConditions.length === 1 ? channelConditions[0] : { OR: channelConditions };
   }
 
   const db = await prisma.streamInfo.findMany({
@@ -46,10 +51,42 @@ export async function GET(request: NextRequest) {
       channel: {
         include: {
           personalFor: true,
-        }
+          restriction: {
+            select: {
+              id: true,
+              expiresAt: true,
+            },
+          },
+        },
       },
     },
   });
 
+  db.forEach((obj) => {
+    if (obj.channel.personalFor) {
+      // @ts-ignore
+      delete obj.channel.personalFor.email;
+    }
+    // @ts-ignore
+    delete obj.channel.obsChatGrantToken;
+
+    if (obj.channel.restriction) {
+      const isExpired =
+        obj.channel.restriction.expiresAt &&
+        new Date(obj.channel.restriction.expiresAt) < new Date();
+      if (isExpired) {
+        // @ts-ignore
+        obj.channel.restriction = null;
+      } else {
+        // @ts-ignore
+        obj.channel.isRestricted = true;
+        // @ts-ignore
+        obj.channel.restrictionExpiresAt = obj.channel.restriction.expiresAt;
+        // @ts-ignore
+        delete obj.channel.restriction;
+      }
+    }
+  });
+
   return Response.json(db);
-}
+}

apps/web/src/app/(ui)/(protected)/layout.tsx

@@ -1,13 +1,42 @@
 import { validateRequest } from '@/lib/auth/validate';
 import { redirect, RedirectType } from 'next/navigation';
+import { prisma } from '@hctv/db';
 
 export default async function Layout({ children }: { children: React.ReactNode }) {
   const { user } = await validateRequest();
   if (!user) {
-    return redirect('/auth/slack');
+    return redirect('/auth/hackclub');
   }
   if (!user.hasOnboarded) {
     return redirect(`/onboarding`, RedirectType.push);
   }
+
+  const ban = await prisma.userBan.findUnique({
+    where: { userId: user.id },
+  });
+
+  if (ban) {
+    const isExpired = ban.expiresAt && new Date(ban.expiresAt) < new Date();
+    if (!isExpired) {
+      return (
+        <div className="flex flex-col items-center justify-center min-h-screen">
+          <h1 className="text-3xl font-bold text-destructive mb-4">Account Suspended</h1>
+          <p className="text-muted-foreground text-center max-w-md mb-4">
+            Your account has been suspended from hackclub.tv.
+          </p>
+          <div className="bg-muted p-4 rounded-lg max-w-md">
+            <p className="text-sm font-medium">Reason:</p>
+            <p className="text-sm text-muted-foreground">{ban.reason}</p>
+          </div>
+          {ban.expiresAt && (
+            <p className="text-sm text-muted-foreground mt-4">
+              Expires: {new Date(ban.expiresAt).toLocaleDateString()}
+            </p>
+          )}
+        </div>
+      );
+    }
+  }
+
   return children;
 }

apps/web/src/app/(ui)/(protected)/settings/bot/[slug]/apikeys.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Skeleton } from '@/components/ui/skeleton';
+import { fetcher } from '@/lib/services/swr';
+import { useConfirm } from '@omit/react-confirm-dialog';
+import { Plus, RefreshCcw, Trash } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import useSWR from 'swr';
+import useSWRMutation from 'swr/mutation';
+
+export function ApiKeys({ slug }: { slug: string }) {
+  const confirm = useConfirm();
+  const [newApiKeyName, setNewApiKeyName] = useState('');
+  const { data, error, isLoading, mutate } = useSWR<GetResponse>(
+    `/api/settings/bot/${slug}/apiKey`,
+    fetcher
+  );
+  const { trigger } = useSWRMutation(`/api/settings/bot/${slug}/apiKey`, createApiKey);
+
+  const apiKeyCreate = () => {
+    if (newApiKeyName.trim().length < 3) {
+      toast.error('API Key name must be at least 3 characters long');
+      return;
+    }
+    if (newApiKeyName.trim().length > 50) {
+      toast.error('API Key name must be at most 50 characters long');
+      return;
+    }
+    trigger({ action: 'create', name: newApiKeyName }).then(
+      async (res: PostResponse) => {
+        if (res.success) {
+          setNewApiKeyName('');
+          await navigator.clipboard
+            .writeText(res.apiKey || '')
+            .then(() => toast.success('API key copied to clipboard'))
+            .catch(() => {
+              alert('Failed to copy API key to clipboard, here it is: ' + res.apiKey);
+            });
+          await mutate();
+        } else {
+          toast.error(res.error || 'Error creating API key');
+        }
+      }
+    );
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>API Keys</CardTitle>
+        <CardDescription>Manage your API keys</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {isLoading && <ApiKeysSkeleton />}
+        {error && <p>Error loading API keys</p>}
+        {data && !data.success && <p>Error: Could not fetch API keys</p>}
+        {data && (
+          <div className="flex">
+            <Input
+              placeholder="New API Key Name"
+              className="flex-1 mr-2"
+              value={newApiKeyName}
+              onChange={(e) => setNewApiKeyName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  apiKeyCreate();
+                }
+              }}
+            />
+            <Button
+              size="icon"
+              onClick={apiKeyCreate}
+            >
+              <Plus />
+            </Button>
+          </div>
+        )}
+        {data && data.success && data.apiKeys.length === 0 && <p>No API keys found</p>}
+        {data && data.success && data.apiKeys.length > 0 && (
+          <ul className="space-y-2 pt-4">
+            {data.apiKeys.map((key) => (
+              <li
+                key={key.id}
+                className="flex items-center justify-between p-3 bg-mantle/50 rounded-md"
+              >
+                <div className="flex-1">
+                  <strong className="text-sm font-medium">{key.name}</strong>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={async () => {
+                      const confirmation = await confirm({
+                        title: 'Regenerate API Key',
+                        description:
+                          'Are you sure you want to regenerate this API key? The old key will stop working.',
+                        confirmText: 'Regenerate',
+                        cancelText: 'Cancel',
+                      });
+                      if (!confirmation) return;
+
+                      trigger({ action: 'regenerate', name: key.name }).then(
+                        async (res: PostResponse) => {
+                          if (res.success) {
+                            await navigator.clipboard
+                              .writeText(res.apiKey || '')
+                              .then(() => {
+                                toast.success('API key copied to clipboard');
+                              })
+                              .catch(() => {
+                                alert(
+                                  'Failed to copy API key to clipboard, here it is: ' + res.apiKey
+                                );
+                              });
+                            mutate();
+                          } else {
+                            toast.error(res.error || 'Error regenerating API key');
+                          }
+                        }
+                      );
+                    }}
+                  >
+                    <RefreshCcw className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={async () => {
+                      const confirmation = await confirm({
+                        title: 'Revoke API Key',
+                        description:
+                          'Are you sure you want to revoke this API key? This action cannot be undone.',
+                        confirmText: 'Revoke',
+                        cancelText: 'Cancel',
+                      });
+                      if (!confirmation) return;
+                      trigger({ action: 'revoke', name: key.name }).then(
+                        async (res: PostResponse) => {
+                          if (res.success) {
+                            await mutate();
+                          } else {
+                            toast.error(res.error || 'Error revoking API key');
+                          }
+                        }
+                      );
+                    }}
+                  >
+                    <Trash className="h-4 w-4" />
+                  </Button>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+function ApiKeysSkeleton() {
+  return (
+    <>
+      <div className='flex'>
+        <Skeleton className='h-10 flex-1 mr-2' />
+        <Skeleton className='h-10 w-10' />
+      </div>
+      <div className='space-y-2 pt-4'>
+        {[1, 2, 3].map((i) => (
+          <div key={i} className='flex items-center justify-between p-3 bg-mantle/50 rounded-md'>
+            <div className='flex-1'>
+              <Skeleton className='h-4 w-1/2' />
+            </div>
+            <div className='flex items-center space-x-2'>
+              <Skeleton className='h-8 w-8' />
+              <Skeleton className='h-8 w-8' />
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+async function createApiKey(url: string, { arg }: { arg: PostRequest }) {
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(arg),
+  });
+  return res.json();
+}
+
+interface GetResponse {
+  success: boolean;
+  apiKeys: Array<{ id: string; name: string; createdAt: string }>;
+}
+
+interface PostRequest {
+  action: 'revoke' | 'regenerate' | 'create';
+  name: string;
+}
+interface PostResponse {
+  success: boolean;
+  apiKey?: string;
+  id?: string;
+  error?: string;
+}

apps/web/src/app/(ui)/(protected)/settings/bot/[slug]/gensettings.tsx

@@ -0,0 +1,151 @@
+'use client';
+import { UniversalForm } from '@/components/app/UniversalForm/UniversalForm';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { editBot } from '@/lib/form/actions';
+import { BotAccount } from '@hctv/db';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+import { UploadButton } from '@/lib/uploadthing';
+import { toast } from 'sonner';
+import React from 'react';
+
+export function GeneralSettings(props: BotAccount) {
+  const router = useRouter();
+  const [isUploading, setIsUploading] = React.useState(false);
+  const [uploadError, setUploadError] = React.useState<string | null>(null);
+  const formRef = React.useRef<HTMLFormElement>(null);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>General Settings</CardTitle>
+        <CardDescription>Edit your bot settings!</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <UniversalForm
+          formRef={formRef}
+          fields={[
+            {
+              name: 'from',
+              type: 'hidden',
+              value: props.id,
+              required: true,
+            },
+            {
+              name: 'name',
+              type: 'text',
+              label: 'Bot Name',
+              placeholder: 'Enter bot name',
+              required: true,
+              value: props.displayName,
+            },
+            {
+              name: 'slug',
+              type: 'text',
+              label: 'Bot Slug',
+              placeholder: 'Enter bot slug',
+              required: true,
+              value: props.slug,
+            },
+            {
+              name: 'description',
+              type: 'textarea',
+              label: 'Description',
+              placeholder: 'Enter bot description',
+              value: props.description,
+              textArea: true,
+            },
+            {
+              name: 'pfpUrl',
+              label: 'Profile Picture',
+              type: 'url',
+              value: props.pfpUrl,
+              component: ({ field }) => {
+                return (
+                  <div className="space-y-4">
+                    <input type="hidden" {...field} />
+
+                    {field.value && (
+                      <div className="flex items-center space-x-4">
+                        <Avatar className="h-16 w-16">
+                          <AvatarImage src={field.value} alt="Current profile picture" />
+                          <AvatarFallback>{props.displayName[0]?.toUpperCase()}</AvatarFallback>
+                        </Avatar>
+                        <div className="flex-1">
+                          <p className="text-sm font-medium">Current profile picture</p>
+                          <p className="text-xs text-muted-foreground">
+                            Click &quot;Upload new image&quot; to replace
+                          </p>
+                        </div>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() => {
+                            field.onChange('');
+                            setUploadError(null);
+                          }}
+                        >
+                          Remove
+                        </Button>
+                      </div>
+                    )}
+
+                    <div>
+                      <UploadButton
+                        endpoint="pfpUpload"
+                        className="mt-2 ut-button:bg-mantle ut-button:text-mantle-foreground ut-allowed-content:text-muted-foreground/70"
+                        content={{
+                          button: field.value ? 'Upload new image' : 'Upload profile picture',
+                          allowedContent: 'Image (1MB max)',
+                        }}
+                        onUploadBegin={() => {
+                          setIsUploading(true);
+                          setUploadError(null);
+                        }}
+                        onClientUploadComplete={(res) => {
+                          setIsUploading(false);
+                          if (res && res[0]) {
+                            field.onChange(res[0].ufsUrl);
+                            toast.success('Profile picture uploaded successfully!');
+                            setTimeout(() => {
+                              formRef.current?.requestSubmit();
+                            }, 0);
+                          }
+                        }}
+                        onUploadError={(error) => {
+                          setIsUploading(false);
+                          setUploadError(error.message);
+                          toast.error(`Upload failed: ${error.message}`);
+                        }}
+                        disabled={isUploading}
+                      />
+
+                      {isUploading && <p className="mt-2 text-sm text-primary">Uploading...</p>}
+
+                      {uploadError && <p className="mt-2 text-sm text-red-600">{uploadError}</p>}
+
+                      {!field.value && !isUploading && !uploadError && (
+                        <p className="mt-2 text-sm text-muted-foreground">
+                          Upload a profile picture for your channel.
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                );
+              },
+            },
+          ]}
+          schemaName={'editBot'}
+          action={editBot}
+          onActionComplete={(result) => {
+            if (result?.success) {
+              router.refresh();
+            }
+          }}
+        />
+      </CardContent>
+    </Card>
+  );
+}

apps/web/src/app/(ui)/(protected)/settings/bot/[slug]/page.tsx

@@ -0,0 +1,46 @@
+import { getBotBySlug } from '@/lib/db/resolve';
+import { validateRequest } from '@/lib/auth/validate';
+import { can } from '@/lib/auth/abac';
+import { redirect } from 'next/navigation';
+import Image from 'next/image';
+import { GeneralSettings } from '@/app/(ui)/(protected)/settings/bot/[slug]/gensettings';
+import { ApiKeys } from '@/app/(ui)/(protected)/settings/bot/[slug]/apikeys';
+import Link from 'next/link';
+import { ArrowLeft } from 'lucide-react';
+
+export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
+  const { user } = await validateRequest();
+  const { slug } = await params;
+  const bot = await getBotBySlug(slug);
+
+  if (!user || !bot || !can(user, 'update', 'bot', { bot })) {
+    redirect('/settings/bot');
+  }
+
+  return (
+    <div className={'container mx-auto py-6 space-y-6'}>
+      <Link href={'/settings/bot'} className="text-sm text-muted-foreground hover:underline flex items-center gap-2">
+        <ArrowLeft className='size-4' /> Back to Bot Accounts
+      </Link>
+      <div className="flex items-center justify-between">
+        <div className={'flex items-center space-x-4'}>
+          <Image
+            src={bot.pfpUrl}
+            alt={'Bot Avatar'}
+            width={48}
+            height={48}
+            className="rounded-full"
+          />
+          <div className={'flex flex-col'}>
+            <h1 className="text-3xl font-bold tracking-tight">{bot.displayName}</h1>
+            <p className="text-muted-foreground">Manage your bot account settings</p>
+          </div>
+        </div>
+      </div>
+      <div className="flex w-full gap-4 flex-col md:flex-row *:w-1/2">
+        <GeneralSettings {...bot} />
+        <ApiKeys slug={slug} />
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(ui)/(protected)/settings/bot/create/page.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import { UniversalForm } from '@/components/app/UniversalForm/UniversalForm';
+import { createBot } from '@/lib/form/actions';
+import { Bot } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+export default function Page() {
+  const router = useRouter();
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="flex h-full w-full flex-col items-center justify-center px-4 py-12">
+        <div className="mb-8 text-center">
+          <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary shadow-lg">
+            <Bot className="h-8 w-8 text-primary-foreground" />
+          </div>
+          <h1 className="mb-2 text-3xl font-bold text-foreground">Create Bot Account</h1>
+          <p className="text-muted-foreground max-w-xl">
+            Create an automated bot account to provide custom functionality for your community.
+          </p>
+        </div>
+
+        <div className="w-full max-w-md bg-card rounded-xl p-8 border border-border">
+          <UniversalForm
+            fields={[
+              {
+                name: 'name',
+                type: 'text',
+                label: 'Bot Name',
+                placeholder: 'Enter bot name',
+                required: true,
+              },
+              {
+                name: 'slug',
+                type: 'text',
+                label: 'Bot Slug',
+                placeholder: 'Enter bot slug',
+                required: true,
+              },
+              {
+                name: 'description',
+                type: 'textarea',
+                label: 'Description',
+                placeholder: 'Enter bot description',
+              },
+            ]}
+            schemaName={'createBot'}
+            action={createBot}
+            onActionComplete={(res) => {
+              router.push(`/settings/bot/${res.slug}`);
+            }}
+          />
+        </div>
+
+        {/*
+          <p className="mt-6 text-sm text-muted-foreground text-center max-w-md">
+            Your bot will be created with chat permissions. You can configure advanced settings and
+            permissions after creation.
+          </p>
+        */}
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(ui)/(protected)/settings/bot/page.tsx

@@ -0,0 +1,88 @@
+import { validateRequest } from '@/lib/auth/validate';
+import { prisma } from '@hctv/db';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import Link from 'next/link';
+import { Plus, Bot, Calendar, Hash } from 'lucide-react';
+import { redirect } from 'next/navigation';
+import Image from 'next/image';
+
+export default async function Page() {
+  const { user } = await validateRequest();
+  if (!user) {
+    redirect('/');
+  }
+
+  const bots = await prisma.user.findFirst({
+    where: { id: user.id },
+    select: {
+      botAccounts: true,
+    },
+  });
+
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Bot Accounts</h1>
+          <p className="text-muted-foreground">Manage your automated bot accounts</p>
+        </div>
+        <Link href="/settings/bot/create">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            Create Bot
+          </Button>
+        </Link>
+      </div>
+
+      <Separator />
+
+      {bots?.botAccounts.length ? (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {bots.botAccounts.map((bot) => (
+            <Link href={`/settings/bot/${bot.slug}`} key={bot.id}>
+              <Card key={bot.id} className="hover:shadow-md transition-shadow">
+                <CardHeader className="pb-3">
+                  <div className="flex items-center space-x-2">
+                    <Image src={bot.pfpUrl} alt={'Bot Avatar'} width={32} height={32} className="rounded-full" />
+                    <CardTitle className="text-lg">{bot.displayName}</CardTitle>
+                  </div>
+                </CardHeader>
+                <CardContent className="space-y-3">
+                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+                    <Hash className="h-4 w-4" />
+                    <span>{bot.slug}</span>
+                  </div>
+                  <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+                    <Calendar className="h-4 w-4" />
+                    <span>{new Date(bot.createdAt).toLocaleDateString()}</span>
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      ) : (
+        <Card className="text-center py-8">
+          <CardContent className="space-y-4">
+            <Bot className="mx-auto h-12 w-12 text-muted-foreground" />
+            <div>
+              <CardTitle>No bot accounts yet</CardTitle>
+              <CardDescription className="mt-2">
+                Get started by creating your first bot account
+              </CardDescription>
+            </div>
+            <Link href="/settings/bot/create">
+              <Button>
+                <Plus className="mr-2 h-4 w-4" />
+                Create Your First Bot
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

apps/web/src/app/(ui)/(protected)/settings/channel/[channelName]/page.tsx

@@ -3,6 +3,7 @@ import { prisma } from '@hctv/db';
 import { redirect } from 'next/navigation';
 import ChannelSettingsClient from './page.client';
 import { resolvePersonalChannel } from '@/lib/auth/resolve';
+import { can } from '@/lib/auth/abac';
 
 export default async function ChannelSettingsPage({
   params,
@@ -13,7 +14,7 @@ export default async function ChannelSettingsPage({
   const { user } = await validateRequest();
 
   if (!user) {
-    redirect('/auth/slack');
+    redirect('/auth/hackclub');
   }
 
   const channel = await prisma.channel.findUnique({
@@ -21,8 +22,11 @@ export default async function ChannelSettingsPage({
     include: {
       owner: true,
       managers: true,
+      chatModerators: true,
+      chatModeratorBots: true,
       streamInfo: true,
       streamKey: true,
+      chatSettings: true,
       followers: {
         include: {
           user: {
@@ -42,9 +46,8 @@ export default async function ChannelSettingsPage({
   }
 
   const isOwner = channel.ownerId === user.id;
-  const isManager = channel.managers.some((manager) => manager.id === user.id);
 
-  if (!isOwner && !isManager) {
+  if (!can(user, 'update', 'channel', { channel })) {
     redirect('/');
   }
 
@@ -52,17 +55,38 @@ export default async function ChannelSettingsPage({
   const managerPersonalChannels = await Promise.all(
     channel.managers.map((manager) => resolvePersonalChannel(manager.id))
   );
+  const managerIds = new Set(channel.managers.map((manager) => manager.id));
+  const extraChatModerators = channel.chatModerators.filter(
+    (moderator) => moderator.id !== channel.ownerId && !managerIds.has(moderator.id)
+  );
+  const chatModeratorPersonalChannels = await Promise.all(
+    extraChatModerators.map((moderator) => resolvePersonalChannel(moderator.id))
+  );
   const followerPersonalChannels = await Promise.all(
     channel.followers.map((follower) => resolvePersonalChannel(follower.user.id))
   );
+  const allBotAccounts = await prisma.botAccount.findMany({
+    select: {
+      id: true,
+      displayName: true,
+      slug: true,
+      pfpUrl: true,
+    },
+    orderBy: {
+      slug: 'asc',
+    },
+  });
 
   return (
     <ChannelSettingsClient
       channel={{
         ...channel,
+        chatModerators: extraChatModerators,
         ownerPersonalChannel,
         managerPersonalChannels,
+        chatModeratorPersonalChannels,
         followerPersonalChannels,
+        allBotAccounts,
       }}
       isOwner={isOwner}
       currentUser={user}

apps/web/src/app/(ui)/(protected)/settings/channel/create/page.tsx

@@ -32,8 +32,7 @@ function CreateChannelPage() {
             schemaName="createChannel"
             action={createChannel}
             onActionComplete={(r) => {
-              // @ts-expect-error
-              const channelName = r?.channel;
+              const channelName = r.channel;
               if (channelName) {
                 router.push(`/${channelName}`);
               }

apps/web/src/app/(ui)/(protected)/stream/page.tsx

@@ -0,0 +1,411 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import {
+  AlertTriangle,
+  CircleAlert,
+  Globe,
+  LoaderCircle,
+  Monitor,
+  Radio,
+  RefreshCw,
+  Square,
+  Video,
+} from 'lucide-react';
+import { ChannelSelect } from '@/components/app/ChannelSelect/ChannelSelect';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent } from '@/components/ui/card';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { useChannelStreamKey } from '@/lib/hooks/useChannelStreamKey';
+import { useOwnedChannels } from '@/lib/hooks/useUserList';
+import { useScreensharePublisher } from '@/lib/hooks/useScreensharePublisher';
+import { getMediamtxClientRegionOptions } from '@/lib/utils/mediamtx/client';
+import type { MediaMTXRegion } from '@/lib/utils/mediamtx/regions';
+
+export default function Page() {
+  const serverOptions = getMediamtxClientRegionOptions();
+  const whipEnabledServerOptions = serverOptions.filter((server) => server.whipEnabled);
+  const defaultRegion = whipEnabledServerOptions[0]?.value ?? 'hq';
+  const [selectedChannel, setSelectedChannel] = useState('');
+  const [selectedRegion, setSelectedRegion] = useState<MediaMTXRegion>(defaultRegion);
+  const { channels, isLoading: isLoadingChannels } = useOwnedChannels();
+  const ownedChannels = channels.map(({ channel }) => channel);
+  const {
+    streamKey,
+    error: streamKeyError,
+    isLoading: isLoadingStreamKey,
+  } = useChannelStreamKey(selectedChannel || undefined);
+  const {
+    browserWarning,
+    changeSource,
+    hasPreview,
+    issue,
+    isLive,
+    isPreviewReady,
+    isPreviewingSource,
+    isSessionActive,
+    isStarting,
+    isSwitchingSource,
+    previewRef,
+    previewSource,
+    startPublishing,
+    stopPublishing,
+  } = useScreensharePublisher({
+    channelName: selectedChannel,
+    region: selectedRegion,
+    streamKey,
+  });
+
+  const hasChannels = ownedChannels.length > 0;
+  const selectedServer = whipEnabledServerOptions.find((server) => server.value === selectedRegion);
+  const hasWhipEnabledServerOptions = whipEnabledServerOptions.length > 0;
+  const canStartPublishing =
+    !isSessionActive &&
+    !isPreviewingSource &&
+    Boolean(selectedChannel) &&
+    Boolean(streamKey) &&
+    Boolean(selectedServer?.whipEnabled) &&
+    !isLoadingStreamKey;
+  const channelPlaceholder = isLoadingChannels ? 'Loading channels...' : 'Select a channel';
+  const primaryIssue = issue ?? browserWarning;
+
+  useEffect(() => {
+    if (isSessionActive) {
+      return;
+    }
+
+    if (!ownedChannels.some((channel) => channel.name === selectedChannel)) {
+      setSelectedChannel(ownedChannels[0]?.name ?? '');
+    }
+  }, [isSessionActive, ownedChannels, selectedChannel]);
+
+  useEffect(() => {
+    if (!isLive) {
+      return;
+    }
+
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      event.preventDefault();
+      event.returnValue = '';
+    };
+
+    window.addEventListener('beforeunload', handleBeforeUnload);
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+    };
+  }, [isLive]);
+
+  const statusLabel = isLive
+    ? 'LIVE'
+    : isSwitchingSource
+      ? 'Switching'
+      : isStarting
+        ? 'Connecting'
+        : isPreviewingSource
+          ? hasPreview
+            ? 'Updating Preview'
+            : 'Preparing Preview'
+          : isPreviewReady
+            ? 'Preview'
+            : 'Ready';
+
+  return (
+    <div className="relative flex min-h-[calc(100vh-4rem)] flex-col">
+      {/* Video Stage */}
+      <div className="flex flex-1 items-center justify-center px-4 py-4 md:px-6">
+        <div className="w-full max-w-6xl">
+          <div className="relative overflow-hidden rounded-3xl border border-border/60 bg-black shadow-2xl">
+            <div className="relative aspect-video w-full bg-black">
+              <video
+                ref={previewRef}
+                autoPlay
+                muted
+                playsInline
+                className="h-full w-full object-contain"
+              />
+
+              {!hasPreview && (
+                <div className="absolute inset-0 flex flex-col items-center justify-center gap-5 px-6 text-muted-foreground">
+                  <div className="flex h-24 w-24 items-center justify-center rounded-full border border-secondary bg-secondary/80">
+                    <Monitor className="h-10 w-10 text-primary/80" />
+                  </div>
+                  <div className="max-w-md text-center space-y-1.5">
+                    <p className="text-lg font-medium text-zinc-200">
+                      Ready to livestream
+                    </p>
+                    <p className="text-sm text-zinc-400">
+                      Select a tab, window, or display to preview.
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {(isPreviewingSource || isStarting || isSwitchingSource) && (
+                <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/60 text-white backdrop-blur-sm">
+                  <LoaderCircle className="h-8 w-8 animate-spin" />
+                  <p className="text-sm font-medium">
+                    {isPreviewingSource
+                      ? hasPreview
+                        ? 'Updating preview...'
+                        : 'Preparing preview...'
+                      : isStarting
+                        ? 'Starting broadcast...'
+                        : 'Switching source...'}
+                  </p>
+                </div>
+              )}
+
+              <div className="absolute left-6 top-6">
+                <Badge
+                  variant={isLive ? 'default' : hasPreview ? 'secondary' : 'outline'}
+                  className={cn(
+                    'gap-2 px-3 py-1 text-xs font-semibold shadow-lg backdrop-blur-md transition-all',
+                    isLive && 'bg-red-500 text-white hover:bg-red-600',
+                    !isLive && !hasPreview && 'border-zinc-800 bg-black/50 text-zinc-400'
+                  )}
+                >
+                  {isLive && <span className="h-2 w-2 animate-pulse rounded-full bg-white shadow-[0_0_8px_rgba(255,255,255,0.8)]" />}
+                  {statusLabel}
+                </Badge>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {(streamKeyError || primaryIssue) && (
+        <div className="absolute inset-x-0 top-4 z-10 mx-auto max-w-xl px-4 md:top-6">
+          {streamKeyError ? (
+            <AlertCard
+              actions={
+                <Button onClick={() => window.location.reload()} size="sm" variant="outline">
+                  <RefreshCw className="mr-2 h-4 w-4" />
+                  Reload page
+                </Button>
+              }
+              description={getStreamKeyErrorDescription(streamKeyError.message)}
+              icon={CircleAlert}
+              title="Could not load the stream key"
+              tone="destructive"
+            />
+          ) : null}
+
+          {primaryIssue ? (
+            <AlertCard
+              actions={
+                <div className="flex flex-wrap gap-2">
+                  {!isSessionActive && primaryIssue.context === 'preview' ? (
+                    <Button
+                      onClick={previewSource}
+                      disabled={isPreviewingSource}
+                      loading={isPreviewingSource}
+                      size="sm"
+                    >
+                      Preview again
+                    </Button>
+                  ) : null}
+
+                  {!isSessionActive &&
+                  primaryIssue.context !== 'warning' &&
+                  primaryIssue.context !== 'preview' ? (
+                    <Button onClick={startPublishing} disabled={!canStartPublishing} size="sm">
+                      Try again
+                    </Button>
+                  ) : null}
+
+                  {primaryIssue.context === 'switch' && isLive ? (
+                    <Button
+                      onClick={changeSource}
+                      disabled={isSwitchingSource}
+                      loading={isSwitchingSource}
+                      size="sm"
+                    >
+                      Try switching again
+                    </Button>
+                  ) : null}
+
+                  {isSessionActive && primaryIssue.context !== 'warning' ? (
+                    <Button onClick={stopPublishing} size="sm" variant="outline">
+                      Stop stream
+                    </Button>
+                  ) : null}
+                </div>
+              }
+              description={primaryIssue.description}
+              icon={primaryIssue.tone === 'warning' ? AlertTriangle : CircleAlert}
+              title={primaryIssue.title}
+              tone={primaryIssue.tone}
+            />
+          ) : null}
+        </div>
+      )}
+
+      <div className="shrink-0 border-t border-border/50 bg-background/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="mx-auto flex max-w-6xl flex-col items-stretch gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex flex-wrap items-center gap-5">
+            <div className="flex items-center gap-3">
+              <Video className="h-4 w-4 text-muted-foreground" />
+              <ChannelSelect
+                channelList={ownedChannels}
+                disabled={isSessionActive || isLoadingChannels || !hasChannels}
+                placeholder={channelPlaceholder}
+                value={selectedChannel || undefined}
+                onSelect={setSelectedChannel}
+                triggerClassName="w-48"
+              />
+            </div>
+
+            <div className="flex items-center gap-3">
+              <Globe className="h-4 w-4 text-muted-foreground" />
+              <Select
+                value={selectedRegion}
+                onValueChange={(value) => setSelectedRegion(value as MediaMTXRegion)}
+                disabled={isSessionActive || !hasWhipEnabledServerOptions}
+              >
+                <SelectTrigger className="w-44">
+                  <SelectValue placeholder="Select server" />
+                </SelectTrigger>
+                <SelectContent>
+                  {whipEnabledServerOptions.map((server) => (
+                    <SelectItem key={server.value} value={server.value}>
+                      {server.label} {server.emoji}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {!hasChannels && !isLoadingChannels ? (
+              <p className="text-xs text-muted-foreground">Create a channel to stream.</p>
+            ) : null}
+          </div>
+
+          {/* Right: Actions */}
+          <div className="flex flex-wrap items-center justify-end gap-2">
+            {!isSessionActive ? (
+              <div className="flex flex-wrap items-center gap-2">
+                <Button
+                  variant="secondary"
+                  onClick={previewSource}
+                  disabled={isPreviewingSource}
+                  loading={isPreviewingSource}
+                  size="default"
+                >
+                  <Monitor className="mr-2 h-4 w-4" />
+                  {hasPreview ? 'Change Preview' : 'Preview'}
+                </Button>
+
+                {hasPreview ? (
+                  <Button
+                    onClick={stopPublishing}
+                    disabled={isPreviewingSource}
+                    variant="outline"
+                    size="default"
+                  >
+                    <Square className="mr-2 h-4 w-4" />
+                    Clear Preview
+                  </Button>
+                ) : null}
+
+                <Button
+                  onClick={startPublishing}
+                  disabled={!canStartPublishing || isSwitchingSource}
+                  loading={isStarting}
+                  size="default"
+                >
+                  <Radio className="mr-2 h-4 w-4" />
+                  Start
+                </Button>
+              </div>
+            ) : (
+              <div className="flex flex-wrap items-center gap-2">
+                <Button
+                  variant="secondary"
+                  onClick={changeSource}
+                  disabled={!isLive}
+                  loading={isSwitchingSource}
+                  size="default"
+                >
+                  <RefreshCw className="mr-2 h-4 w-4" />
+                  Switch
+                </Button>
+
+                <Button
+                  onClick={stopPublishing}
+                  disabled={isPreviewingSource || isSwitchingSource}
+                  variant="outline"
+                  size="default"
+                >
+                  <Square className="mr-2 h-4 w-4" />
+                  Stop
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AlertCard({ actions, description, icon: Icon, title, tone }: AlertCardProps) {
+  const isWarning = tone === 'warning';
+
+  return (
+    <Card
+      className={cn(
+        'overflow-hidden border-l-4 shadow-xl backdrop-blur-md',
+        isWarning
+          ? 'border-l-amber-500 bg-amber-500/[0.03]'
+          : 'border-l-destructive bg-destructive/[0.03]'
+      )}
+    >
+      <CardContent className="flex flex-col gap-4 p-4 md:flex-row md:items-start md:justify-between">
+        <div className="flex items-start gap-3">
+          <Icon
+            className={cn(
+              'mt-0.5 h-5 w-5 shrink-0',
+              isWarning ? 'text-amber-500' : 'text-destructive'
+            )}
+          />
+          <div className="space-y-1">
+            <p className="text-sm font-semibold">{title}</p>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+        {actions ? <div className="flex flex-wrap gap-2 md:shrink-0">{actions}</div> : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+function getStreamKeyErrorDescription(message: string) {
+  if (message.toLowerCase().includes('unauthorized')) {
+    return 'You no longer have permission to stream to this channel. Try another channel or sign in again.';
+  }
+
+  if (message.toLowerCase().includes('not found')) {
+    return 'This channel does not have a valid stream key yet. Regenerate it in channel settings, then retry.';
+  }
+
+  return 'Refresh the page and try again. If it keeps failing, check channel settings and server config.';
+}
+
+type AlertCardProps = {
+  actions?: ReactNode;
+  description: string;
+  icon: LucideIcon;
+  title: string;
+  tone: 'warning' | 'destructive';
+};

apps/web/src/app/(ui)/(public)/auth/hackclub/callback/route.ts

@@ -0,0 +1,218 @@
+import slackNotifier from '@/lib/services/slackNotifier';
+import { hackClub, lucia, HCID_TOKEN_URL, HCID_USER_INFO_URL } from '@hctv/auth';
+import { cookies as nextCookies } from 'next/headers';
+import { OAuth2RequestError } from 'arctic';
+import { generateIdFromEntropySize } from 'lucia';
+import { prisma } from '@hctv/db';
+import { getRedisConnection } from '@hctv/db';
+
+export async function GET(request: Request): Promise<Response> {
+  const cookies = await nextCookies();
+  const url = new URL(request.url);
+  const code = url.searchParams.get('code');
+  const state = url.searchParams.get('state');
+  const storedState = cookies.get('hackclub_oauth_state')?.value ?? null;
+  if (!code || !state || !storedState || state !== storedState) {
+    console.log('invalid state stuff');
+    return new Response(null, {
+      status: 400,
+    });
+  }
+
+  try {
+    const tokens = await hackClub.validateAuthorizationCode(HCID_TOKEN_URL, code, null);
+    const accessToken = tokens.accessToken();
+    const userResponse = await fetch(HCID_USER_INFO_URL, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (!userResponse.ok) {
+      return new Response('Unable to verify your Hack Club identity right now. Please try again.', {
+        status: 502,
+      });
+    }
+
+    const userResult: HackClubUserResponse = await userResponse.json();
+    const identity = userResult.identity;
+    const bypass = await checkIfBypass(identity.primary_email);
+
+    if (identity.verification_status !== 'verified') {
+      if (!bypass) {
+        return new Response(getVerificationErrorMessage(identity.verification_status), {
+          status: 403,
+        });
+      }
+    }
+
+    const slackId = identity.slack_id;
+    if (!slackId) {
+      return new Response('Please make sure to have a Slack account before continuing.', {
+        status: 400,
+      });
+    }
+
+    const slackValidation = await validateSlackUser(slackId);
+    if (!slackValidation.success) {
+      if (!bypass) {
+        return new Response(slackValidation.message, {
+          status: slackValidation.status,
+        });
+      }
+    }
+
+    const existingUser = await prisma.user.findFirst({
+      where: {
+        slack_id: slackId,
+      },
+    });
+
+    if (existingUser) {
+      // Update email if it's missing or changed
+      if (existingUser.email !== identity.primary_email) {
+        await prisma.user.update({
+          where: { id: existingUser.id },
+          data: { email: identity.primary_email },
+        });
+      }
+
+      const session = await lucia.createSession(existingUser.id, {});
+      const sessionCookie = lucia.createSessionCookie(session.id);
+      await getRedisConnection().set(`sessions:${session.id}`, '');
+      cookies.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: '/',
+        },
+      });
+    }
+
+    const userId = generateIdFromEntropySize(10);
+
+    await prisma.user.create({
+      data: {
+        id: userId,
+        slack_id: slackId,
+        email: identity.primary_email,
+        pfpUrl: identity.slack_id
+          ? `https://cachet.dunkirk.sh/users/${identity.slack_id}/r`
+          : 'https://github.com/hackclub.png',
+        hasOnboarded: false,
+      },
+    });
+
+    const session = await lucia.createSession(userId, {});
+    const sessionCookie = lucia.createSessionCookie(session.id);
+    await getRedisConnection().set(`sessions:${session.id}`, '');
+    cookies.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
+    return new Response(null, {
+      status: 302,
+      headers: {
+        Location: '/',
+      },
+    });
+  } catch (e) {
+    console.error(e);
+    // the specific error message depends on the provider
+    if (e instanceof OAuth2RequestError) {
+      // invalid code
+      return new Response(null, {
+        status: 400,
+      });
+    }
+    return new Response(null, {
+      status: 500,
+    });
+  }
+}
+
+interface HackClubIdentity {
+  id: string;
+  slack_id?: string;
+  first_name: string;
+  last_name: string;
+  primary_email: string;
+  verification_status: VerificationStatus;
+}
+
+interface HackClubUserResponse {
+  identity: HackClubIdentity;
+}
+
+type VerificationStatus = 'needs_submission' | 'pending' | 'verified' | 'ineligible';
+
+type SlackValidationResult =
+  | {
+      success: true;
+    }
+  | {
+      success: false;
+      message: string;
+      status: number;
+    };
+
+function getVerificationErrorMessage(status: VerificationStatus): string {
+  switch (status) {
+    case 'needs_submission':
+      return 'Please complete Hack Club Identity verification before signing in to hackclub.tv.';
+    case 'pending':
+      return 'Your Hack Club Identity verification is still being reviewed. Please try again once it is approved.';
+    case 'ineligible':
+      return 'Your Hack Club Identity verification was rejected, so you cannot access hackclub.tv right now.';
+    case 'verified':
+      return 'Verified users can continue.';
+  }
+}
+
+async function validateSlackUser(slackId: string): Promise<SlackValidationResult> {
+  if (!process.env.SLACK_NOTIFIER_TOKEN) {
+    return {
+      success: false,
+      message: 'Slack verification is not configured right now. Please try again later.',
+      status: 503,
+    };
+  }
+
+  try {
+    const response = await slackNotifier.users.info({ user: slackId });
+    if (!response.ok || !response.user) {
+      return {
+        success: false,
+        message: 'Unable to verify your Slack account right now. Please try again later.',
+        status: 502,
+      };
+    }
+
+    if (response.user.deleted) {
+      return {
+        success: false,
+        message: 'Your Slack account is deactivated, so you cannot access hackclub.tv.',
+        status: 403,
+      };
+    }
+
+    if (response.user.is_restricted || response.user.is_ultra_restricted) {
+      return {
+        success: false,
+        message:
+          'Guest Slack accounts cannot access hackclub.tv. Please sign in with a full Hack Club Slack account.',
+        status: 403,
+      };
+    }
+
+    return { success: true };
+  } catch {
+    return {
+      success: false,
+      message: 'Unable to verify your Slack account right now. Please try again later.',
+      status: 502,
+    };
+  }
+}
+
+async function checkIfBypass(email: string): Promise<boolean> {
+  const user = await prisma.user.findFirst({ where: { email } });
+  return user?.bypassVerification ?? false;
+}

apps/web/src/app/(ui)/(public)/auth/hackclub/route.ts

@@ -1,12 +1,12 @@
 import { generateState } from "arctic";
-import { slack } from '@hctv/auth';
+import { hackClub, HCID_AUTH_URL } from '@hctv/auth';
 import { cookies } from "next/headers";
 
 export async function GET(): Promise<Response> {
 	const state = generateState();
-	const url = slack.createAuthorizationURL(state, ['openid', 'profile']);
+	const url = hackClub.createAuthorizationURL(HCID_AUTH_URL, state, ['slack_id', 'verification_status', 'email']);
 
-	(await cookies()).set("slack_oauth_state", state, {
+	(await cookies()).set("hackclub_oauth_state", state, {
 		path: "/",
 		secure: process.env.NODE_ENV === "production",
 		httpOnly: true,

apps/web/src/app/(ui)/(public)/auth/slack/callback/route.ts

@@ -1,122 +0,0 @@
-import { slack, lucia } from '@hctv/auth';
-import { cookies as nextCookies } from 'next/headers';
-import { decodeIdToken, OAuth2RequestError } from 'arctic';
-import { generateIdFromEntropySize } from 'lucia';
-import { prisma } from '@hctv/db';
-import { getRedisConnection } from '@hctv/db';
-
-export async function GET(request: Request): Promise<Response> {
-  const cookies = await nextCookies();
-  const url = new URL(request.url);
-	const code = url.searchParams.get("code");
-	const state = url.searchParams.get("state");
-	const storedState = cookies.get("slack_oauth_state")?.value ?? null;
-	if (!code || !state || !storedState || state !== storedState) {
-    console.log('invalid state stuff');
-		return new Response(null, {
-			status: 400
-		});
-	}
-
-  try {
-    const tokens = await slack.validateAuthorizationCode(code);
-    const accessToken = tokens.accessToken()
-    const slackUserResponse = await fetch('https://slack.com/api/openid.connect.userInfo', {
-      headers: {
-        'Authorization': `Bearer ${accessToken}`,
-      },
-    });
-    const slackUser: SlackUserInfo = await slackUserResponse.json();
-
-    const existingUser = await prisma.user.findFirst({
-      where: {
-        slack_id: slackUser.sub,
-      },
-    });
-
-    if (existingUser) {
-      const session = await lucia.createSession(existingUser.id, {});
-      const sessionCookie = lucia.createSessionCookie(session.id);
-      await getRedisConnection().set(`sessions:${session.id}`, '');
-      cookies.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
-      return new Response(null, {
-        status: 302,
-        headers: {
-          Location: '/',
-        },
-      });
-    }
-
-    const userId = generateIdFromEntropySize(10);
-
-    await prisma.user.create({
-      data: {
-        id: userId,
-        slack_id: slackUser.sub,
-        pfpUrl: `https://cachet.dunkirk.sh/users/${slackUser.sub}/r`,
-        hasOnboarded: false,
-      },
-    });
-
-    const session = await lucia.createSession(userId, {});
-    const sessionCookie = lucia.createSessionCookie(session.id);
-    await getRedisConnection().set(`sessions:${session.id}`, '');
-    cookies.set(sessionCookie.name, sessionCookie.value, sessionCookie.attributes);
-    return new Response(null, {
-      status: 302,
-      headers: {
-        Location: '/',
-      },
-    });
-  } catch (e) {
-    console.error(e);
-    // the specific error message depends on the provider
-    if (e instanceof OAuth2RequestError) {
-      // invalid code
-      return new Response(null, {
-        status: 400,
-      });
-    }
-    return new Response(null, {
-      status: 500,
-    });
-  }
-}
-
-interface SlackUserInfo {
-  // OpenID Connect standard fields
-  ok: boolean;
-  sub: string;
-  email: string;
-  email_verified: boolean;
-  date_email_verified: number;
-  name: string;
-  picture: string;
-  given_name: string;
-  family_name: string;
-  locale: string;
-
-  // Slack-specific fields
-  ['https://slack.com/user_id']: string;
-  ['https://slack.com/team_id']: string;
-  ['https://slack.com/team_name']: string;
-  ['https://slack.com/team_domain']: string;
-
-  // User image URLs
-  ['https://slack.com/user_image_24']: string;
-  ['https://slack.com/user_image_32']: string;
-  ['https://slack.com/user_image_48']: string;
-  ['https://slack.com/user_image_72']: string;
-  ['https://slack.com/user_image_192']: string;
-  ['https://slack.com/user_image_512']: string;
-
-  // Team image URLs
-  ['https://slack.com/team_image_34']?: string;
-  ['https://slack.com/team_image_44']?: string;
-  ['https://slack.com/team_image_68']?: string;
-  ['https://slack.com/team_image_88']?: string;
-  ['https://slack.com/team_image_102']?: string;
-  ['https://slack.com/team_image_132']?: string;
-  ['https://slack.com/team_image_230']?: string;
-  ['https://slack.com/team_image_default']?: boolean;
-}

apps/web/src/app/(ui)/(public)/onboarding/page.client.tsx

@@ -4,32 +4,130 @@ import { UniversalForm } from '@/components/app/UniversalForm/UniversalForm';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
 import { onboard } from '@/lib/form/actions';
 import { useSession } from '@/lib/providers/SessionProvider';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { User, Tv, Heart, MessageSquare } from 'lucide-react';
+import Image from 'next/image';
+import BlahajHeart from '@/lib/assets/blahaj-heart.webp';
 
 export default function OnboardingClient() {
   const { user } = useSession();
   
   return (
-    <Card className="mx-auto max-w-sm border-0 shadow-none">
-      <CardHeader className="space-y-1">
-        <CardTitle>Welcome to hackclub.tv!</CardTitle>
-        <CardDescription>
-          To get started, please enter the username of your personal channel.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <p>join #hctv! you will get welcomed to the channel after submitting the form!</p>
-        <UniversalForm
-          fields={[
-            { name: 'userId', label: 'User ID', type: 'hidden', value: user?.id },
-            { name: 'username', label: 'Username', type: 'text' },
-          ]}
-          schemaName="onboard"
-          action={onboard}
-          onActionComplete={() => {
-            window.location.href = '/';
-          }}
-        />
-      </CardContent>
-    </Card>
+    <div className="min-h-[93vh] flex items-center justify-center p-4">
+      <div className="w-full max-w-2xl space-y-8">
+        {/* welcome header */}
+        <div className="text-center space-y-2">
+          <div className="flex justify-center">
+            <div className="relative">
+              <Avatar className="h-20 w-20 border-4 border-primary/20">
+                <AvatarImage src={user?.pfpUrl} alt={`@${user?.id}`} />
+                <AvatarFallback className="text-2xl font-bold">
+                  {user?.id?.charAt(0)?.toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+            </div>
+          </div>
+          <div className="space-y-2">
+            <h1 className="text-3xl font-bold tracking-tight">
+              Welcome to hackclub.tv!
+            </h1>
+            <p className="text-lg text-muted-foreground flex gap-2 justify-center">
+              Let&apos;s get you set up <Image src={BlahajHeart} alt=":blahaj-heart:" height={28} />
+            </p>
+          </div>
+        </div>
+
+        {/* explanation */}
+        <Card className="border-2 border-primary/10 bg-primary/5">
+          <CardHeader className="pb-4">
+            <CardTitle className="flex items-center gap-2 text-xl">
+              <User className="h-5 w-5 text-primary" />
+              Why do you need a personal channel?
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-4 md:grid-cols-3">
+              <div className="flex items-start gap-3">
+                <div className="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
+                  <Tv className="w-4 h-4 text-primary" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-sm">Stream content</h3>
+                  <p className="text-xs text-muted-foreground">
+                    Share your coding sessions and projects!
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
+                  <MessageSquare className="w-4 h-4 text-primary" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-sm">Chat with others</h3>
+                  <p className="text-xs text-muted-foreground">
+                    Connect with other Hack Clubbers and grow your audience
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="flex-shrink-0 w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
+                  <Heart className="w-4 h-4 text-primary" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-sm">Follow Hack Clubbers</h3>
+                  <p className="text-xs text-muted-foreground">
+                    Stay updated with your favorite creators and streams
+                  </p>
+                </div>
+              </div>
+            </div>
+            
+            <div className="mt-6 p-4 bg-secondary/50 rounded-lg border border-muted">
+              <p className="text-sm text-muted-foreground">
+                <strong>Your personal channel</strong> is your home base on hctv. 
+                It&apos;s where your profile, streams, and content will live. You can always create 
+                additional channels later for different types of content!
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* form */}
+        <Card className="shadow-lg">
+          <CardHeader className="text-center">
+            <CardTitle className="text-xl">Choose Your Channel Username</CardTitle>
+            <CardDescription>
+              This will be your unique identifier on hctv. Choose something memorable!
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <UniversalForm
+              fields={[
+                { name: 'userId', label: 'User ID', type: 'hidden', value: user?.id },
+                { 
+                  name: 'username', 
+                  label: 'Channel Username', 
+                  type: 'text',
+                  placeholder: 'e.g., yourname or yourname-codes',
+                  maxChars: 20,
+                  inputFilter: /[^a-z0-9_-]/g,
+                },
+              ]}
+              schemaName="onboard"
+              action={onboard}
+              onActionComplete={() => {
+                window.location.href = '/';
+              }}
+            />
+            <div className="mt-4 p-3 bg-muted/30 rounded-md">
+              <p className="text-xs text-muted-foreground">
+                <strong>Username rules:</strong> Only lowercase letters (a-z), numbers (0-9), 
+                underscores (_), and dashes (-) are allowed. Up to 20 characters. Must be unique across the platform.
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
   );
-}
+}

apps/web/src/app/(ui)/(public)/onboarding/page.tsx

@@ -4,7 +4,10 @@ import OnboardingClient from "./page.client";
 
 export default async function Page() {
   const { user } = await validateRequest();
-  if (user!.hasOnboarded) {
+  if (!user) {
+    return redirect('/');
+  }
+  if (user.hasOnboarded) {
     return redirect('/');
   }
   return <OnboardingClient />;

apps/web/src/app/(ui)/(public)/page.tsx

@@ -1,10 +1,8 @@
 import LandingPage from '@/components/app/LandingPage/LandingPage';
-import { Card, CardContent } from '@/components/ui/card';
+import StreamGrid from '@/components/app/StreamGrid/StreamGrid';
 import ConfusedDino from '@/components/ui/confuseddino';
 import { validateRequest } from '@/lib/auth/validate';
 import { prisma } from '@hctv/db';
-import { Avatar, AvatarImage, AvatarFallback } from '@radix-ui/react-avatar';
-import Image from 'next/image';
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
@@ -13,66 +11,45 @@ export default async function Home() {
   if (user && !user?.hasOnboarded) {
     redirect('/onboarding');
   }
-  const streams = await prisma.streamInfo.findMany({
-    where: {
-      isLive: true,
-    },
-    include: {
-      channel: true,
-    },
-  });
+
+  const [liveStreams, offlineStreams] = await Promise.all([
+    prisma.streamInfo.findMany({
+      where: { isLive: true },
+      include: { channel: true },
+    }),
+    prisma.streamInfo.findMany({
+      where: { isLive: false },
+      include: { channel: true },
+    }),
+  ]);
+
   if (!user) {
     return <LandingPage />;
   }
-  if (!streams.length) {
+
+  if (!liveStreams.length && !offlineStreams.length) {
     return (
-      <div className="flex justify-center items-center text-center flex-col pt-4 gap-2">
-        <h2>No streams found!</h2>
-        <p>...maybe start one?</p>
-        <ConfusedDino className='w-40 h-40' />
+      <div className="flex min-h-[60vh] flex-col items-center justify-center gap-5 px-4 text-center">
+        <ConfusedDino className="h-28 w-28 opacity-80" />
+        <div className="space-y-1.5">
+          <h2 className="pb-0 text-2xl font-semibold tracking-tight">Nothing live right now</h2>
+          <p className="text-sm text-muted-foreground">
+            Nobody&apos;s streaming yet — why not be the first?
+          </p>
+        </div>
+        <Link
+          href="/settings/channel"
+          className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-5 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          Start streaming
+        </Link>
       </div>
     );
   }
 
   return (
-    <div className="p-4">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        {streams.map((stream) => (
-          <Link href={`/${stream.username}`} key={stream.id}>
-            <Card className="overflow-hidden hover:shadow-lg transition-shadow">
-              <CardContent className="p-0">
-                <div className="relative">
-                  <Image
-                    src={`/api/stream/thumb/${stream.channel.name}`}
-                    width={512}
-                    height={512}
-                    alt={stream.title}
-                    className="w-full h-48 object-cover"
-                  />
-                  <div className="absolute bottom-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded">
-                    LIVE
-                  </div>
-                  <div className="absolute bottom-2 right-2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded">
-                    {stream.viewers} viewers
-                  </div>
-                </div>
-                <div className="p-4">
-                  <div className="flex items-start">
-                    <Avatar className="h-10 w-10 mr-3">
-                      <AvatarImage src={stream.channel.pfpUrl} />
-                      <AvatarFallback>{stream.channel.name}</AvatarFallback>
-                    </Avatar>
-                    <div>
-                      <h3 className="font-semibold line-clamp-1">{stream.title}</h3>
-                      <p className="text-sm text-muted-foreground">{stream.category}</p>
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          </Link>
-        ))}
-      </div>
+    <div className="p-3 md:p-6">
+      <StreamGrid liveStreams={liveStreams} offlineStreams={offlineStreams} />
     </div>
   );
 }

apps/web/src/app/(ui)/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { cookies } from 'next/headers';
 import '../globals.css';
 import Navbar from '@/components/app/NavBar/NavBar';
 import { SessionProvider } from '@/lib/providers/SessionProvider';
@@ -8,7 +8,6 @@ import { Toaster } from '@/components/ui/sonner';
 import { ThemeProvider } from '@/lib/providers/ThemeProvider';
 import { SidebarProvider } from '@/components/ui/sidebar';
 import Sidebar from '@/components/app/Sidebar/Sidebar';
-import { cn } from '@/lib/utils';
 import EditLivestream from '@/components/app/EditLivestream/EditLivestream';
 import { StreamInfoProvider } from '@/lib/providers/StreamInfoProvider';
 import { NextSSRPlugin } from "@uploadthing/react/next-ssr-plugin";
@@ -16,8 +15,7 @@ import { extractRouterConfig } from 'uploadthing/server';
 import { ourFileRouter } from '@/lib/services/uploadthing/fileRouter';
 import { NuqsAdapter } from 'nuqs/adapters/next/app'
 import SonnerNewVersion from '@/components/app/SonnerNewVersion/SonnerNewVersion';
-
-const inter = Inter({ subsets: ['latin'] });
+import ConfirmDialogProvider from '@/lib/providers/ConfirmProvider';
 
 export const metadata: Metadata = {
   title: 'hackclub.tv',
@@ -30,9 +28,12 @@ export default async function RootLayout({
   children: React.ReactNode;
 }>) {
   const sessionData = await validateRequest();
+  const cookieStore = await cookies();
+  const defaultOpen = cookieStore.get('sidebar:state')?.value === 'true';
+
   return (
     <html lang="en">
-      <body className={cn('flex flex-col h-screen', inter.className)}>
+      <body className="flex h-screen flex-col">
         <SessionProvider value={sessionData}>
           <ThemeProvider
             attribute="class"
@@ -44,20 +45,26 @@ export default async function RootLayout({
             <NextSSRPlugin
               routerConfig={extractRouterConfig(ourFileRouter)}
             />
-            <NuqsAdapter>
-              <SidebarProvider>
-                <StreamInfoProvider>
-                  {/* this promise is ugly but i'm lazy to fix the type errors */}
-                  <Navbar editLivestream={Promise.resolve(<EditLivestream />)} />
-                  <div className="flex flex-1 pt-16">
-                    {/* pt-16 for navbar height */}
-                    <Sidebar className="pt-16" />
-                    <main className="flex-1 overflow-auto">{children}</main>
-                  </div>
-                  <Toaster />
-                </StreamInfoProvider>
-              </SidebarProvider>
-            </NuqsAdapter>
+            <ConfirmDialogProvider defaultOptions={{
+              cancelButton: {
+                variant: 'outline',
+              },
+            }}>
+              <NuqsAdapter>
+                <SidebarProvider defaultOpen={defaultOpen}>
+                  <StreamInfoProvider>
+                    {/* this promise is ugly but i'm lazy to fix the type errors */}
+                    <Navbar editLivestream={Promise.resolve(<EditLivestream />)} />
+                    <div className="flex flex-1 pt-16 min-h-0 min-w-0">
+                      {/* pt-16 for navbar height */}
+                      <Sidebar className="pt-16" />
+                      <main className="flex-1 min-w-0">{children}</main>
+                    </div>
+                    <Toaster />
+                  </StreamInfoProvider>
+                </SidebarProvider>
+              </NuqsAdapter>
+            </ConfirmDialogProvider>
           </ThemeProvider>
         </SessionProvider>
       </body>

apps/web/src/app/api/metrics/route.ts

@@ -0,0 +1,58 @@
+import { webMetricsRegistry } from '@/lib/metrics';
+import { NextRequest, NextResponse } from 'next/server';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+export async function GET(req: NextRequest) {
+  if (process.env.NODE_ENV === 'production' && !isAuthenticated(req)) {
+    return new NextResponse('Authentication required', {
+      status: 401,
+      headers: { 'WWW-Authenticate': 'Basic' },
+    });
+  }
+  return new Response(await webMetricsRegistry.metrics(), {
+    headers: {
+      'Content-Type': webMetricsRegistry.contentType,
+      'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
+    },
+  });
+}
+
+// source: https://vancelucas.com/blog/how-to-add-http-basic-auth-to-next-js/
+function isAuthenticated(req: NextRequest) {
+  const authheader = req.headers.get('authorization') ?? req.headers.get('Authorization');
+
+  if (!authheader) {
+    return false;
+  }
+
+  const parts = authheader.split(' ');
+  if (parts.length !== 2) {
+    return false;
+  }
+
+  const scheme = parts[0];
+  const encoded = parts[1];
+
+  if (scheme !== 'Basic' || !encoded) {
+    return false;
+  }
+
+  let decoded: string;
+  try {
+    decoded = Buffer.from(encoded, 'base64').toString();
+  } catch {
+    return false;
+  }
+
+  const separatorIndex = decoded.indexOf(':');
+  if (separatorIndex === -1) {
+    return false;
+  }
+
+  const user = decoded.substring(0, separatorIndex);
+  const pass = decoded.substring(separatorIndex + 1);
+
+  return user === process.env.METRICS_USER && pass === process.env.METRICS_PASSWORD;
+}

apps/web/src/app/global-error.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}

apps/web/src/app/globals.css

@@ -1,114 +1,163 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "tw-animate-css";
 
-@layer base {
-  :root {
-    --background: 220 23.077% 94.902%;
-    --foreground: 233.793 16.022% 35.49%;
+@config "../../tailwind.config.mts";
+@custom-variant dark (&:is(.dark *));
 
-    --muted: 222.857 15.909% 82.745%;
-    --muted-foreground: 233.333 12.796% 41.373%;
+@font-face {
+  font-family: 'Phantom Sans';
+  src:
+    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff2') format('woff2'),
+    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
 
-    --popover: 220 23.077% 94.902%;
-    --popover-foreground: 233.793 16.022% 35.49%;
+@font-face {
+  font-family: 'Phantom Sans';
+  src:
+    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Italic.woff2') format('woff2'),
+    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Italic.woff') format('woff');
+  font-weight: normal;
+  font-style: italic;
+  font-display: swap;
+}
 
-    --card: 220 23.077% 94.902%;
-    --card-foreground: 233.793 16.022% 35.49%;
+@font-face {
+  font-family: 'Phantom Sans';
+  src:
+    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff2') format('woff2'),
+    url('https://assets.hackclub.com/fonts/Phantom_Sans_0.7/Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
 
-    --border: 225 13.559% 76.863%;
-    --input: 225 13.559% 76.863%;
+:root {
+  --background: hsl(350 59% 98%);
+  --foreground: hsl(351 34% 30%);
+  --muted: hsl(350 40% 93%);
+  --muted-foreground: hsl(350 30% 45%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(351 34% 30%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(351 34% 30%);
+  --border: hsl(350 30% 85%);
+  --input: hsl(350 30% 85%);
+  --primary: hsl(350 70% 50%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(350 40% 93%);
+  --secondary-foreground: hsl(351 34% 30%);
+  --accent: hsl(350 70% 40%);
+  --accent-foreground: hsl(0 0% 100%);
+  --destructive: hsl(350 70% 55%);
+  --destructive-foreground: hsl(0 0% 100%);
+  --ring: hsl(350 70% 50%);
+  --surface-1: hsl(350 40% 93%);
+  --surface-2: hsl(350 35% 88%);
+  --mantle: hsl(350 59% 98%);
+  --mantle-foreground: hsl(351 34% 30%);
+  --radius: 0.5rem;
+  --sidebar-background: hsl(350 59% 98%);
+  --sidebar-foreground: hsl(351 34% 30%);
+  --sidebar-primary: hsl(350 70% 50%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(350 40% 93%);
+  --sidebar-accent-foreground: hsl(351 34% 30%);
+  --sidebar-border: hsl(350 30% 85%);
+  --sidebar-ring: hsl(350 70% 50%);
+}
 
-    --primary: 219.907 91.489% 53.922%;
-    --primary-foreground: 220 23.077% 94.902%;
+.dark {
+  --background: hsl(350 20% 15%);
+  --foreground: hsl(350 30% 92%);
+  --muted: hsl(350 20% 25%);
+  --muted-foreground: hsl(350 30% 75%);
+  --popover: hsl(350 20% 15%);
+  --popover-foreground: hsl(350 30% 92%);
+  --card: hsl(350 20% 15%);
+  --card-foreground: hsl(350 30% 92%);
+  --border: hsl(350 20% 35%);
+  --input: hsl(350 20% 35%);
+  --primary: hsl(350 100% 75%);
+  --primary-foreground: hsl(350 20% 15%);
+  --secondary: hsl(350 20% 25%);
+  --secondary-foreground: hsl(350 30% 92%);
+  --accent: hsl(350 100% 80%);
+  --accent-foreground: hsl(350 20% 15%);
+  --destructive: hsl(350 100% 70%);
+  --destructive-foreground: hsl(350 20% 15%);
+  --ring: hsl(350 100% 75%);
+  --surface-1: hsl(350 20% 25%);
+  --surface-2: hsl(350 20% 35%);
+  --mantle: hsl(350 20% 12%);
+  --mantle-foreground: hsl(350 30% 92%);
+  --sidebar-background: hsl(350 20% 12%);
+  --sidebar-foreground: hsl(350 30% 92%);
+  --sidebar-primary: hsl(350 100% 75%);
+  --sidebar-primary-foreground: hsl(350 20% 15%);
+  --sidebar-accent: hsl(350 20% 25%);
+  --sidebar-accent-foreground: hsl(350 30% 92%);
+  --sidebar-border: hsl(350 20% 35%);
+  --sidebar-ring: hsl(350 100% 75%);
+}
 
-    --secondary: 222.857 15.909% 82.745%;
-    --secondary-foreground: 233.793 16.022% 35.49%;
+@theme inline {
+  --font-sans: 'Phantom Sans', ui-sans-serif, system-ui, sans-serif;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-ring: var(--ring);
+  --color-surface1: var(--surface-1);
+  --color-surface2: var(--surface-2);
+  --color-mantle: var(--mantle);
+  --color-mantle-foreground: var(--mantle-foreground);
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}
 
-    --accent: 222.857 15.909% 82.745%;
-    --accent-foreground: 233.793 16.022% 35.49%;
-
-    --destructive: 347.077 86.667% 44.118%;
-    --destructive-foreground: 220 21.951% 91.961%;
-
-    --ring: 233.793 16.022% 35.49%;
-
-    --surface-1: 225 14% 77%;
-    --surface-2: 227 12% 71%;
-
-    --mantle: 220 22% 92%;
-
-    --radius: 0.5rem;
-
-    --sidebar-background: 0 0% 98%;
-
-    --sidebar-foreground: 240 5.3% 26.1%;
-
-    --sidebar-primary: 240 5.9% 10%;
-
-    --sidebar-primary-foreground: 0 0% 98%;
-
-    --sidebar-accent: 240 4.8% 95.9%;
-
-    --sidebar-accent-foreground: 240 5.9% 10%;
-
-    --sidebar-border: 220 13% 91%;
-
-    --sidebar-ring: 217.2 91.2% 59.8%;
+@keyframes accordion-down {
+  from {
+    height: 0;
   }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
 
-  .dark {
-    --background: 240 21.053% 14.902%;
-    --foreground: 226.154 63.934% 88.039%;
-
-    --muted: 240 12% 19%;
-    --muted-foreground: 240 12% 69%;
-
-    --popover: 240 21.053% 14.902%;
-    --popover-foreground: 226.154 63.934% 88.039%;
-
-    --card: 240 21.053% 14.902%;
-    --card-foreground: 226.154 63.934% 88.039%;
-
-    --border: 234.286 13.208% 31.176%;
-    --input: 234.286 13.208% 31.176%;
-
-    --primary: 267 84% 81%;
-    --primary-foreground: 267 84% 21%;
-
-    --secondary: 236.842 16.239% 22.941%;
-    --secondary-foreground: 226.154 63.934% 88.039%;
-
-    --accent: 236.842 16.239% 22.941%;
-    --accent-foreground: 226.154 63.934% 88.039%;
-
-    --destructive: 343.269 81.25% 74.902%;
-    --destructive-foreground: 240 21.311% 11.961%;
-
-    --ring: 226.154 63.934% 88.039%;
-
-    --surface-1: 234 13% 31%;
-    --surface-2: 233 12% 39%;
-
-    --mantle: 240 21.311% 11.961%;
-
-    --radius: 0.5rem;
-
-    --sidebar-background: 240 21.311% 11.961%;     /* crust - matches mantle var */
-    
-    --sidebar-foreground: 226.154 63.934% 88.039%; /* matches main foreground */
-    
-    --sidebar-primary: 217.168 91.87% 75.882%;     /* matches primary */
-    
-    --sidebar-primary-foreground: 240 21.053% 14.902%; /* matches primary-foreground */
-    
-    --sidebar-accent: 236.842 16.239% 22.941%;     /* matches accent */
-    
-    --sidebar-accent-foreground: 226.154 63.934% 88.039%; /* matches accent-foreground */
-    
-    --sidebar-border: 234.286 13.208% 31.176%;     /* matches border */
-    
-    --sidebar-ring: 217.168 91.87% 75.882%;        /* matches primary */
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
   }
 }
 
@@ -117,72 +166,113 @@
     @apply border-border;
   }
   body {
+    font-family: 'Phantom Sans', ui-sans-serif, system-ui, sans-serif;
     @apply bg-background text-foreground;
   }
-  .scrollbar-hide::-webkit-scrollbar { display: none; }
-  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
-}
-h1 {
-  @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
-}
-h2 {
-  @apply scroll-m-20 pb-2 text-3xl font-semibold tracking-tight first:mt-0;
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
 }
 
 media-controller {
   --media-primary-color: #ffffff;
-  --media-secondary-color: hsla(var(--background), 0.85);
-  --media-control-hover-background: hsla(var(--accent), 0.85);
-  --media-control-background: hsla(var(--secondary), 0.85);
-  --media-loading-icon-color: #ffffff;
-  border-radius: var(--radius);
+  --media-secondary-color: transparent;
+  --media-control-background: transparent;
+  --media-control-hover-background: color-mix(in oklab, var(--primary) 40%, transparent);
+  
+  /* Range colors */
+  --media-range-track-background: hsla(0, 0%, 100%, 0.3);
+  --media-range-bar-color: var(--primary);
+  --media-range-thumb-background: var(--primary);
+  --media-range-thumb-border-radius: 50%;
+  --media-range-thumb-height: 12px;
+  --media-range-thumb-width: 12px;
+  --media-range-track-height: 4px;
+  
+  /* Layout & structure */
+  border-radius: calc(var(--radius) * 1.5);
   overflow: hidden;
-  border: 1px solid hsl(var(--border));
+  border: 1px solid color-mix(in oklab, var(--border) 20%, transparent);
+  background-color: #000;
+  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.3);
 }
 
 media-control-bar {
-  background-color: hsla(var(--background), 0.8);
-  backdrop-filter: blur(8px);
+  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
+  backdrop-filter: blur(4px);
+  -webkit-mask-image: linear-gradient(to top, black 50%, transparent 100%);
+  mask-image: linear-gradient(to top, black 50%, transparent 100%);
   width: 100%;
   box-sizing: border-box;
   justify-content: space-between;
+  padding: 2rem 0.75rem 0.75rem;
+  align-items: center;
 }
 
 media-time-range {
-  --media-range-track-height: 6px;
-  --media-range-thumb-height: 14px;
-  --media-range-thumb-width: 14px;
-  --media-range-thumb-border-radius: 50%;
-  --media-range-bar-color: #ffffff;
-  --media-range-thumb-background: #ffffff;
-  --media-preview-background: hsla(var(--card), 0.9);
+  --media-preview-background: color-mix(in oklab, var(--card) 95%, transparent);
   --media-preview-border-radius: var(--radius);
+  --media-time-display-color: var(--foreground);
 }
 
 media-time-display {
-  --media-text-color: #ffffff; 
+  --media-text-color: #ffffff;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.5px;
 }
 
 media-controller::part(centered-layer) {
-  background-color: hsla(var(--background), 0.2);
-  transition: opacity 0.3s ease;
+  background-color: transparent;
+  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 media-controller:not([mediapaused])[userinactive]::part(centered-layer) {
   opacity: 0;
-  transition: opacity 1s ease;
+  transition: opacity 0.8s ease;
 }
 
 media-loading-indicator {
-  --media-loading-icon-width: 48px;
-  --media-loading-icon-height: 48px;
-  --media-loading-icon-color: #ffffff;
+  --media-loading-icon-width: 56px;
+  --media-loading-icon-height: 56px;
+  --media-loading-icon-color: var(--primary);
+  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--primary) 40%, transparent));
+}
+
+media-play-button,
+media-mute-button,
+media-fullscreen-button,
+media-chrome-button {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: var(--radius);
+  margin: 0 2px;
 }
 
 media-play-button:hover,
 media-mute-button:hover,
 media-fullscreen-button:hover,
-media-seek-backward-button:hover,
-media-seek-forward-button:hover {
-  --media-control-hover-background: rgba(255, 255, 255, 0.2);
-}
+media-chrome-button:hover {
+  transform: scale(1.1);
+  --media-control-background: color-mix(in oklab, var(--primary) 85%, transparent);
+  --media-button-icon-color: #ffffff;
+}
+
+/* A pulse animation for the live/retry indicator if needed */
+@keyframes stream-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+.stream-live-indicator {
+  animation: stream-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+media-volume-range {
+  width: 90px;
+  height: 40px; /* Aligns with standard media button heights */
+}

apps/web/src/app/layout.tsx

@@ -2,8 +2,22 @@ import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import './globals.css';
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const publicEnv = Object.keys(process.env).reduce((acc, key) => {
+    if (key.startsWith('NEXT_PUBLIC_')) {
+      acc[key] = process.env[key];
+    }
+    return acc;
+  }, {} as Record<string, string | undefined>);
+
   return (
     <html lang="en">
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.__ENV = ${JSON.stringify(publicEnv)}`,
+          }}
+        />
+      </head>
       <NuqsAdapter>
         <body>
           <main>{children}</main>

apps/web/src/app/manifest.json

@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/web/src/components/app/BotCombobox/BotCombobox.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import type { BotAccount } from '@hctv/db';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+export function BotCombobox({ bots, filter, value, modal, onValueChange }: Props) {
+  const [open, setOpen] = React.useState(false);
+
+  const selectedBot = bots.find((bot) => bot.id === value);
+  const availableBots = bots.filter((bot) => !filter?.includes(bot.id));
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={modal}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between"
+        >
+          {selectedBot ? (
+            <div className="flex items-center gap-2 overflow-hidden">
+              <Avatar className="h-8 w-8 shrink-0">
+                <AvatarImage
+                  src={selectedBot.pfpUrl}
+                  alt={selectedBot.displayName}
+                  loading="lazy"
+                  decoding="async"
+                />
+                <AvatarFallback>{selectedBot.displayName[0]?.toUpperCase()}</AvatarFallback>
+              </Avatar>
+              <span className="truncate">{selectedBot.displayName}</span>
+            </div>
+          ) : (
+            'Select bot...'
+          )}
+          <ChevronsUpDown className="opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+        <Command>
+          <CommandInput placeholder="Search bot..." className="h-9" />
+          <CommandList>
+            <CommandEmpty>No bot found.</CommandEmpty>
+            <CommandGroup>
+              {availableBots.map((bot) => (
+                <CommandItem
+                  key={bot.id}
+                  value={bot.id}
+                  keywords={[bot.displayName, bot.slug]}
+                  onSelect={(currentValue) => {
+                    onValueChange(currentValue === value ? '' : currentValue);
+                    setOpen(false);
+                  }}
+                >
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage
+                      src={bot.pfpUrl}
+                      alt={bot.displayName}
+                      loading="lazy"
+                      decoding="async"
+                    />
+                    <AvatarFallback>{bot.displayName[0]?.toUpperCase()}</AvatarFallback>
+                  </Avatar>
+                  <div className="flex flex-col">
+                    <span>{bot.displayName}</span>
+                    <span className="text-xs text-mantle-foreground">@{bot.slug}</span>
+                  </div>
+                  <Check
+                    className={cn('ml-auto', value === bot.id ? 'opacity-100' : 'opacity-0')}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+type BotLookupAccount = Pick<BotAccount, 'id' | 'displayName' | 'slug' | 'pfpUrl'>;
+
+type Props = {
+  bots: BotLookupAccount[];
+  filter?: string[];
+  value: string;
+  modal?: boolean;
+  onValueChange: (value: string) => void;
+};

apps/web/src/components/app/ChannelSelect/ChannelSelect.tsx

@@ -1,8 +1,7 @@
-'use client'
+'use client';
 
-import type { Channel } from "@hctv/db";
-import * as React from 'react';
 import { Plus } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import {
   Select,
   SelectContent,
@@ -11,13 +10,21 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
+import type { Channel } from '@hctv/db';
 
 export function ChannelSelect(props: Props) {
-  const { channelList } = props;
+  const {
+    channelList,
+    disabled = false,
+    includeCreate = false,
+    placeholder = 'Channel',
+    triggerClassName,
+  } = props;
+
   return (
-    <Select onValueChange={props.onSelect} value={props.value}>
-      <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder="Channel" />
+    <Select disabled={disabled} onValueChange={props.onSelect} value={props.value}>
+      <SelectTrigger className={cn('w-[180px]', triggerClassName)}>
+        <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>
         {channelList.map((channel) => (
@@ -25,15 +32,22 @@ export function ChannelSelect(props: Props) {
             <div className="flex items-center gap-3">
               <Avatar className="h-8 w-8">
                 <AvatarImage src={channel.pfpUrl} alt={channel.name} />
-                <AvatarFallback>{channel.name[0]}</AvatarFallback>
+                <AvatarFallback>{channel.name[0]?.toUpperCase()}</AvatarFallback>
               </Avatar>
               <div className="font-medium">{channel.name}</div>
             </div>
           </SelectItem>
         ))}
-        <SelectItem key="create" value="create" icon={<Plus className="h-4 w-4" />} className='h-11'>
-          Create Channel
-        </SelectItem>
+        {includeCreate ? (
+          <SelectItem
+            key="create"
+            value="create"
+            icon={<Plus className="h-4 w-4" />}
+            className="h-11"
+          >
+            Create Channel
+          </SelectItem>
+        ) : null}
       </SelectContent>
     </Select>
   );
@@ -42,5 +56,9 @@ export function ChannelSelect(props: Props) {
 interface Props {
   channelList: Channel[];
   value?: string;
+  disabled?: boolean;
+  includeCreate?: boolean;
   onSelect: (value: string) => void;
-}
+  placeholder?: string;
+  triggerClassName?: string;
+}

apps/web/src/components/app/ChatPanel/ChatPanel.tsx

@@ -9,9 +9,11 @@ import { Message } from './message';
 import { useMap } from '@uidotdev/usehooks';
 import { EmojiSearch } from './EmojiSearch';
 import { useQueryState } from 'nuqs';
+import { toast } from 'sonner';
 
 export default function ChatPanel(props: Props) {
   const { username } = useParams();
+  const channelName = (Array.isArray(username) ? username[0] : username) ?? '';
   const [grant, setGrant] = useQueryState('grant');
   const [message, setMessage] = useState('');
   const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
@@ -21,13 +23,19 @@ export default function ChatPanel(props: Props) {
   const [emojisToReq, setEmojisToReq] = useState<string[]>([]);
   const [cursorPosition, setCursorPosition] = useState(0);
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [viewer, setViewer] = useState<{ id: string; username: string } | null>(null);
+  const [canModerate, setCanModerate] = useState(false);
+  const [chatAccess, setChatAccess] = useState<ChatAccessState>({
+    canSend: true,
+    restriction: null,
+  });
 
   useEffect(() => {
     console.log('Initializing WebSocket connection for user:', username);
     const socket = new WebSocket(
       `ws${window.location.protocol === 'https:' ? 's' : ''}://${
         window.location.host
-      }/api/stream/chat/ws/${username}?grant=${grant}`
+      }/api/stream/chat/ws/${channelName}?grant=${grant}`
     );
     socketRef.current = socket;
 
@@ -50,6 +58,35 @@ export default function ChatPanel(props: Props) {
           return;
         }
 
+        if (data.type === 'session') {
+          setViewer(data.viewer ?? null);
+          setCanModerate(Boolean(data.permissions?.canModerate));
+          return;
+        }
+
+        if (data.type === 'chatAccess') {
+          setChatAccess({
+            canSend: Boolean(data.canSend),
+            restriction: data.restriction ?? null,
+          });
+          return;
+        }
+
+        if (data.type === 'systemMsg') {
+          setChatMessages((prev) => [...prev, { message: data.message, type: 'systemMsg' }]);
+          return;
+        }
+
+        if (data.type === 'messageDeleted') {
+          setChatMessages((prev) => prev.filter((message) => message.msgId !== data.msgId));
+          return;
+        }
+
+        if (data.type === 'moderationError') {
+          toast.error(data.message || 'Message blocked by moderation rules.');
+          return;
+        }
+
         if (data.type === 'message') {
           console.log('Adding new chat message:', data);
           setChatMessages((prev) => [...prev, data]);
@@ -72,7 +109,7 @@ export default function ChatPanel(props: Props) {
     return () => {
       socket.close();
     };
-  }, [username]);
+  }, [channelName]);
 
   useEffect(() => {
     if (scrollRef.current) {
@@ -84,6 +121,14 @@ export default function ChatPanel(props: Props) {
   }, [chatMessages]);
 
   const sendMessage = () => {
+    if (!chatAccess.canSend) {
+      toast.error(
+        chatAccess.restriction?.type === 'timeout'
+          ? 'You are currently timed out in this chat.'
+          : 'You are currently banned from this chat.'
+      );
+      return;
+    }
     if (!message.trim()) return;
 
     if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
@@ -93,7 +138,7 @@ export default function ChatPanel(props: Props) {
       const socket = new WebSocket(
         `ws${window.location.protocol === 'https:' ? 's' : ''}://${
           window.location.host
-        }/api/stream/chat/ws/${username}?grant=${grant}`
+        }/api/stream/chat/ws/${channelName}?grant=${grant}`
       );
       socket.onopen = () => {
         socket.send(JSON.stringify({ type: 'message', message }));
@@ -102,6 +147,15 @@ export default function ChatPanel(props: Props) {
     }
   };
 
+  const sendModerationCommand = (command: ChatModerationCommand) => {
+    if (!socketRef.current || socketRef.current.readyState !== WebSocket.OPEN) {
+      toast.error('Chat connection is offline.');
+      return;
+    }
+
+    socketRef.current.send(JSON.stringify(command));
+  };
+
   useEffect(() => {
     const interval = setInterval(() => {
       if (socketRef.current && socketRef.current.readyState === WebSocket.OPEN) {
@@ -146,7 +200,7 @@ export default function ChatPanel(props: Props) {
       const socket = new WebSocket(
         `ws${window.location.protocol === 'https:' ? 's' : ''}://${
           window.location.host
-        }/api/stream/chat/ws/${username}?grant=${grant}`
+        }/api/stream/chat/ws/${channelName}?grant=${grant}`
       );
 
       socket.onopen = () => {
@@ -209,7 +263,7 @@ export default function ChatPanel(props: Props) {
         setEmojisToReq([]);
       };
     }
-  }, [emojisToReq, emojiMap, username]);
+  }, [emojisToReq, emojiMap, channelName]);
 
   const handleEmojiSelect = (emojiName: string) => {
     if (!textareaRef.current) return;
@@ -245,9 +299,14 @@ export default function ChatPanel(props: Props) {
   };
 
   return (
-    <div className={`${props.isObsPanel ? 'w-full text-white' : 'md:border bg-mantle w-[350px] max-w-[350px]'} flex flex-col h-full`}>
-      <div ref={scrollRef} className={`flex-1 p-4 ${props.isObsPanel ? 'scrollbar-hide' : ''} overflow-y-auto flex flex-col`}>
-        <div className="space-y-4 flex-1">
+    <div
+      className={`${props.isObsPanel ? 'w-full text-white' : 'w-full max-w-none md:w-[350px] md:max-w-[350px] md:border-l border-border bg-mantle'} flex flex-col h-full min-w-0`}
+    >
+      <div
+        ref={scrollRef}
+        className={`flex-1 px-4 py-2 ${props.isObsPanel ? 'scrollbar-hide' : 'scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent'} overflow-y-auto overflow-x-hidden`}
+      >
+        <div className="space-y-1 min-h-full flex flex-col justify-end">
           {chatMessages.map((msg, i) => (
             <Message
               key={i}
@@ -255,13 +314,25 @@ export default function ChatPanel(props: Props) {
               message={msg.message}
               type={msg.type}
               emojiMap={emojiMap}
+              msgId={msg.msgId}
+              canModerate={canModerate && Boolean(viewer?.id)}
+              viewerId={viewer?.id}
+              channelName={channelName}
+              onModerationCommand={sendModerationCommand}
             />
           ))}
         </div>
       </div>
       {!props.isObsPanel && (
-        <div className="p-4 border-t relative">
-          <div className="flex space-x-2">
+        <div className="p-3 border-t border-border relative">
+          {!chatAccess.canSend && (
+            <p className="mb-2 text-xs text-destructive">
+              {chatAccess.restriction?.type === 'timeout'
+                ? `Timed out${chatAccess.restriction.expiresAt ? ` until ${new Date(chatAccess.restriction.expiresAt).toLocaleTimeString()}` : ''}.`
+                : 'You are banned from sending messages in this chat.'}
+            </p>
+          )}
+          <div className="flex gap-2">
             <Textarea
               ref={textareaRef}
               value={message}
@@ -281,11 +352,17 @@ export default function ChatPanel(props: Props) {
               onClick={(e) => {
                 setCursorPosition(e.currentTarget.selectionStart || 0);
               }}
-              placeholder="Type a message"
-              className="flex-1 bg-transparent focus-visible:ring-offset-0 min-h-[40px] max-h-[120px] resize-none py-2"
+              placeholder="Send a message..."
+              className="flex-1 bg-background/50 border-border focus-visible:ring-1 focus-visible:ring-primary focus-visible:ring-offset-0 min-h-[40px] max-h-[100px] resize-none py-2 text-sm"
               rows={1}
+              disabled={!chatAccess.canSend}
             />
-            <Button size="icon" className="text-black transition-colors" onClick={sendMessage}>
+            <Button
+              size="icon"
+              className="shrink-0 transition-colors"
+              onClick={sendMessage}
+              disabled={!message.trim() || !chatAccess.canSend}
+            >
               <Send className="h-4 w-4" />
             </Button>
           </div>
@@ -307,12 +384,42 @@ export interface ChatMessage {
   user?: User;
   message: string;
   type: 'message' | 'systemMsg';
+  msgId?: string;
+}
+
+export interface ChatModerationCommand {
+  type:
+    | 'mod:deleteMessage'
+    | 'mod:timeoutUser'
+    | 'mod:banUser'
+    | 'mod:unbanUser'
+    | 'mod:liftTimeout';
+  msgId?: string;
+  targetUserId?: string;
+  targetUsername?: string;
+  durationSeconds?: number;
+  reason?: string;
+}
+
+interface ChatAccessState {
+  canSend: boolean;
+  restriction: ChatRestriction | null;
+}
+
+interface ChatRestriction {
+  type: 'timeout' | 'ban';
+  reason?: string;
+  expiresAt?: string | null;
 }
 
 export interface User {
   id: string;
   username: string;
   pfpUrl: string;
+  isBot: boolean;
+  displayName?: string;
+  isPlatformAdmin?: boolean;
+  channelRole?: 'owner' | 'manager' | 'chatModerator' | 'botModerator' | null;
 }
 
 interface Props {

apps/web/src/components/app/ChatPanel/EmojiSearch.tsx

@@ -9,7 +9,7 @@ interface EmojiSearchProps {
   onSelect: (emoji: string) => void;
   socket: WebSocket | null;
   emojiMap: Map<string, string>;
-  textareaRef: React.RefObject<HTMLTextAreaElement>;
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 export function EmojiSearch({
@@ -28,25 +28,27 @@ export function EmojiSearch({
   useEffect(() => {
     const beforeCursor = message.substring(0, cursorPosition);
     const match = beforeCursor.match(/:[\w\-+]*$/);
-    
+
     if (match) {
       const term = match[0].substring(1);
       setSearchTerm(term);
-      
+
       if (term.length > 0) {
         const localResults = Array.from(emojiMap.keys())
-          .filter(name => name.toLowerCase().includes(term.toLowerCase()))
+          .filter((name) => name.toLowerCase().includes(term.toLowerCase()))
           .slice(0, 5);
-        
+
         if (localResults.length > 0) {
           setSearchResults(localResults);
         }
-        
+
         if (socket && socket.readyState === WebSocket.OPEN) {
-          socket.send(JSON.stringify({
-            type: 'emojiSearch',
-            searchTerm: term
-          }));
+          socket.send(
+            JSON.stringify({
+              type: 'emojiSearch',
+              searchTerm: term,
+            })
+          );
         }
       } else {
         setSearchResults([]);
@@ -63,22 +65,22 @@ export function EmojiSearch({
     const handleEmojiSearchResponse = (event: MessageEvent) => {
       try {
         const data = JSON.parse(event.data);
-        
+
         if (data.type === 'emojiSearchResponse') {
           const serverResults = data.results || [];
-          
+
           const localResults = Array.from(emojiMap.keys())
-            .filter(name => searchTerm && name.toLowerCase().includes(searchTerm.toLowerCase()))
+            .filter((name) => searchTerm && name.toLowerCase().includes(searchTerm.toLowerCase()))
             .slice(0, 5);
-            
+
           const combinedResults = [...serverResults];
-          
-          localResults.forEach(name => {
+
+          localResults.forEach((name) => {
             if (!combinedResults.includes(name)) {
               combinedResults.push(name);
             }
           });
-          
+
           setSearchResults(combinedResults.slice(0, 10));
           setSelectedIndex(0);
         }
@@ -95,18 +97,18 @@ export function EmojiSearch({
 
   useEffect(() => {
     if (!textareaRef.current) return;
-    
+
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!searchTerm || searchResults.length === 0) return;
-      
+
       switch (e.key) {
         case 'ArrowDown':
           e.preventDefault();
-          setSelectedIndex(prev => (prev + 1) % searchResults.length);
+          setSelectedIndex((prev) => (prev + 1) % searchResults.length);
           break;
         case 'ArrowUp':
           e.preventDefault();
-          setSelectedIndex(prev => (prev - 1 + searchResults.length) % searchResults.length);
+          setSelectedIndex((prev) => (prev - 1 + searchResults.length) % searchResults.length);
           break;
         case 'Enter':
           if (searchResults[selectedIndex]) {
@@ -127,10 +129,10 @@ export function EmojiSearch({
           break;
       }
     };
-    
+
     const textarea = textareaRef.current;
     textarea.addEventListener('keydown', handleKeyDown);
-    
+
     return () => {
       textarea.removeEventListener('keydown', handleKeyDown);
     };
@@ -150,25 +152,25 @@ export function EmojiSearch({
   }
 
   return (
-    <div className="absolute bottom-16 left-4 bg-mantle border rounded-md shadow-lg max-h-60 overflow-y-auto z-10 min-w-[200px] max-w-[300px]">
+    <div className="absolute bottom-full left-0 right-0 mb-2 mx-0 bg-mantle border border-border rounded-lg shadow-lg max-h-60 overflow-y-auto z-10">
       <div ref={resultsRef} className="py-1">
         {searchResults.map((emojiName, index) => {
           const isSelected = index === selectedIndex;
           const emojiUrl = emojiMap.get(emojiName);
-          
+
           return (
             <div
               key={emojiName}
-              className={`px-3 py-1.5 flex items-center gap-2 cursor-pointer ${
+              className={`px-3 py-2 flex items-center gap-3 cursor-pointer transition-colors ${
                 isSelected ? 'bg-primary/10' : 'hover:bg-primary/5'
               }`}
               onClick={() => onSelect(emojiName)}
             >
               {emojiUrl && (
-                <Image src={emojiUrl} alt={emojiName} width={20} height={20} className="w-5 h-5" />
+                <Image src={emojiUrl} alt={emojiName} width={24} height={24} className="w-6 h-6" />
               )}
-              <span className="flex-grow text-sm">{emojiName}</span>
-              {isSelected && <Check className="h-4 w-4 text-blue-500" />}
+              <span className="flex-grow text-sm font-medium">{emojiName}</span>
+              {isSelected && <Check className="h-4 w-4 text-primary" />}
             </div>
           );
         })}