Rewrite dashboard and overlay, single /events stream, static client served by the backend

Backend: one SSE stream for messages, selection, poll and connection status; reconnect with backoff; no on-disk Innertube session cache; mock only with MOCK_CHAT=1; binds to 127.0.0.1; serves client/out so production runs on one port. Full URLs for links YouTube truncates in chat.

Client: components split out, Lucide icons, stream title and status, on-air strip, search, pause, keyboard shortcuts, overlay settings dialog. Overlay themes, position, size, animation and auto-hide via URL, sized for 1080p and scaled with the source. New blueprint theme for the brand background.

Removed Tailwind, better-sqlite3, zod, the timezone helpers, Cline memory bank and AGENTS.md. Added ESLint, node:test tests and CI.

client/components/Badges.tsx

@@ -0,0 +1,36 @@
+import { BadgeCheck, Crown, Shield, Star, Tv } from 'lucide-react';
+import type { ChatMessage } from '@shared/chat';
+import { proxyImageUrl } from '../lib/imageProxy';
+
+const ICONS = {
+  moderator: Shield,
+  member: Star,
+  verified: BadgeCheck,
+  owner: Tv,
+  custom: null
+} as const;
+
+export function Badges({ message }: { message: ChatMessage }) {
+  return (
+    <>
+      {message.leaderboardRank && (
+        <span className="badge badge--rank" title={`#${message.leaderboardRank} on the chat leaderboard`}>
+          <Crown size={11} strokeWidth={2.5} />
+          {message.leaderboardRank}
+        </span>
+      )}
+      {message.badges?.map((badge, i) => {
+        if (badge.imageUrl) {
+          return <img key={i} src={proxyImageUrl(badge.imageUrl)} alt={badge.label ?? badge.type} title={badge.label} className="badge badge--image" />;
+        }
+        const Icon = ICONS[badge.type];
+        if (!Icon) return null;
+        return (
+          <span key={i} className={`badge badge--${badge.type}`} title={badge.label}>
+            <Icon size={12} strokeWidth={2.5} />
+          </span>
+        );
+      })}
+    </>
+  );
+}

client/components/ChatList.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { ArrowDown } from 'lucide-react';
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import type { ChatMessage } from '@shared/chat';
+
+type Props = {
+  messages: ChatMessage[];
+  paused?: boolean;
+  render: (message: ChatMessage) => ReactNode;
+  empty: string;
+};
+
+const BOTTOM_THRESHOLD = 80;
+
+/**
+ * Scroll container that follows new messages while the user is at the bottom.
+ * Scrolling up stops following and shows a jump button with the unseen count.
+ * While paused the list is frozen at its current contents.
+ */
+export function ChatList({ messages, paused = false, render, empty }: Props) {
+  const scroller = useRef<HTMLDivElement>(null);
+  const following = useRef(true);
+  const [unseen, setUnseen] = useState(0);
+  const [frozen, setFrozen] = useState<ChatMessage[] | null>(null);
+
+  useEffect(() => {
+    setFrozen(paused ? messages : null);
+    // Only the pause flag should snapshot; message updates while paused must not refresh the snapshot.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paused]);
+
+  const shown = frozen ?? messages;
+
+  useLayoutEffect(() => {
+    const node = scroller.current;
+    if (!node) return;
+    if (following.current) {
+      node.scrollTop = node.scrollHeight;
+      setUnseen(0);
+    } else {
+      setUnseen((count) => count + 1);
+    }
+  }, [shown]);
+
+  const onScroll = () => {
+    const node = scroller.current;
+    if (!node) return;
+    const atBottom = node.scrollHeight - node.scrollTop - node.clientHeight <= BOTTOM_THRESHOLD;
+    following.current = atBottom;
+    if (atBottom) setUnseen(0);
+  };
+
+  const jump = () => {
+    const node = scroller.current;
+    if (!node) return;
+    following.current = true;
+    node.scrollTop = node.scrollHeight;
+    setUnseen(0);
+  };
+
+  return (
+    <div className="list">
+      <div className="list__scroll" ref={scroller} onScroll={onScroll}>
+        {shown.length ? shown.map(render) : <p className="list__empty">{empty}</p>}
+      </div>
+      {unseen > 0 && !following.current && (
+        <button type="button" className="list__jump" onClick={jump}>
+          <ArrowDown size={14} />
+          {unseen} new
+        </button>
+      )}
+      {paused && frozen && messages.length > frozen.length && (
+        <span className="list__paused">Paused, {messages.length - frozen.length} waiting</span>
+      )}
+    </div>
+  );
+}

client/components/ConnectForm.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Radio } from 'lucide-react';
+import { useState, type FormEvent } from 'react';
+
+type Props = {
+  busy: boolean;
+  error?: string | null;
+  onConnect: (liveId: string) => void;
+};
+
+export function ConnectForm({ busy, error, onConnect }: Props) {
+  const [value, setValue] = useState('');
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (value.trim()) onConnect(value.trim());
+  };
+
+  return (
+    <div className="connect">
+      <form className="connect__card" onSubmit={submit}>
+        <span className="connect__icon">
+          <Radio size={22} />
+        </span>
+        <h1>Connect to a live stream</h1>
+        <p>Paste the video URL or the 11 character video id of a stream that is live now.</p>
+        <input
+          autoFocus
+          value={value}
+          onChange={(event) => setValue(event.target.value)}
+          placeholder="https://youtube.com/watch?v=…"
+          disabled={busy}
+          spellCheck={false}
+        />
+        {error && <p className="connect__error">{error}</p>}
+        <button type="submit" className="btn btn--primary" disabled={busy || !value.trim()}>
+          {busy ? 'Connecting…' : 'Connect'}
+        </button>
+      </form>
+    </div>
+  );
+}

client/components/MessageBody.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import type { ChatMessage, MessageRun } from '@shared/chat';
+import { proxyImageUrl } from '../lib/imageProxy';
+import { splitLinks } from '../lib/format';
+
+type Props = {
+  message: ChatMessage;
+  className?: string;
+  /** When given, links are clickable and call this instead of navigating. When omitted links render as text. */
+  onLink?: (url: string) => void;
+};
+
+function runsOf(message: ChatMessage): MessageRun[] {
+  if (message.runs?.length) return message.runs;
+  if (message.text && message.text !== 'N/A') return [{ text: message.text }];
+  return [];
+}
+
+export function MessageBody({ message, className, onLink }: Props) {
+  const runs = runsOf(message);
+  if (!runs.length) return null;
+
+  const link = (url: string, label: string, key: number) =>
+    onLink ? (
+      <a
+        key={key}
+        href={url}
+        className="link"
+        title={url}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          onLink(url);
+        }}
+      >
+        {label}
+      </a>
+    ) : (
+      <span key={key} className="link">{label}</span>
+    );
+
+  return (
+    <p className={className}>
+      {runs.map((run, i) => {
+        if (run.emojiUrl) {
+          return <img key={i} src={proxyImageUrl(run.emojiUrl)} alt={run.emojiAlt || 'emoji'} className="emoji" loading="lazy" />;
+        }
+        if (run.url) return link(run.url, run.text || run.url, i);
+        return splitLinks(run.text ?? '').map((part, j) =>
+          part.type === 'link' ? link(part.content, part.content, i * 1000 + j) : <span key={i * 1000 + j}>{part.content}</span>
+        );
+      })}
+    </p>
+  );
+}

client/components/MessageCard.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { Gift } from 'lucide-react';
+import type { ChatMessage } from '@shared/chat';
+import { proxyImageUrl } from '../lib/imageProxy';
+import { formatAmount, formatTime } from '../lib/format';
+import { Badges } from './Badges';
+import { MessageBody } from './MessageBody';
+
+type Props = {
+  message: ChatMessage;
+  selected: boolean;
+  wasSelected: boolean;
+  onSelect: (message: ChatMessage) => void;
+  onLink: (url: string) => void;
+};
+
+function membershipLabel(message: ChatMessage): string {
+  if (message.membershipGiftPurchase && message.giftCount) {
+    return `Gifted ${message.giftCount} membership${message.giftCount > 1 ? 's' : ''}`;
+  }
+  return message.membershipLevel || 'New member';
+}
+
+export function MessageCard({ message, selected, wasSelected, onSelect, onLink }: Props) {
+  const kind = message.superChat ? 'super' : message.membershipGift || message.membershipGiftPurchase ? 'member' : 'chat';
+  const className = ['card', `card--${kind}`, selected && 'card--selected', wasSelected && 'card--seen'].filter(Boolean).join(' ');
+  const accent = message.superChat?.color;
+
+  return (
+    <button type="button" className={className} onClick={() => onSelect(message)} style={accent ? { ['--accent' as string]: accent } : undefined}>
+      <div className="card__head">
+        {message.authorPhoto ? (
+          <img src={proxyImageUrl(message.authorPhoto)} alt="" className="avatar" loading="lazy" />
+        ) : (
+          <span className="avatar avatar--empty">{message.author.slice(0, 1)}</span>
+        )}
+        <span className="card__author">{message.author}</span>
+        <Badges message={message} />
+        {message.superChat && <span className="card__amount">{formatAmount(message.superChat.amount, message.superChat.currency)}</span>}
+        {kind === 'member' && (
+          <span className="card__level">
+            <Gift size={11} strokeWidth={2.5} />
+            {membershipLabel(message)}
+          </span>
+        )}
+        <time className="card__time">{formatTime(message.publishedAt)}</time>
+      </div>
+      <MessageBody message={message} className="card__text" onLink={onLink} />
+      {message.superChat?.stickerUrl && (
+        <img
+          src={proxyImageUrl(message.superChat.stickerUrl)}
+          alt={message.superChat.stickerAlt || 'Super Sticker'}
+          className="sticker"
+          onError={(event) => {
+            event.currentTarget.hidden = true;
+          }}
+        />
+      )}
+    </button>
+  );
+}

client/components/OnAir.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { X } from 'lucide-react';
+import type { ChatMessage } from '@shared/chat';
+import { proxyImageUrl } from '../lib/imageProxy';
+import { formatAmount } from '../lib/format';
+import { MessageBody } from './MessageBody';
+
+type Props = { selection: ChatMessage | null; onClear: () => void };
+
+/** Mirrors what the OBS overlay is showing right now, so the operator never has to guess. */
+export function OnAir({ selection, onClear }: Props) {
+  return (
+    <section className={`onair ${selection ? 'onair--live' : ''}`}>
+      <span className="onair__label">On air</span>
+      {selection ? (
+        <>
+          {selection.authorPhoto && <img src={proxyImageUrl(selection.authorPhoto)} alt="" className="avatar avatar--sm" />}
+          <span className="onair__author">{selection.author}</span>
+          {selection.superChat && (
+            <span className="card__amount" style={{ background: selection.superChat.color }}>
+              {formatAmount(selection.superChat.amount, selection.superChat.currency)}
+            </span>
+          )}
+          <MessageBody message={selection} className="onair__text" />
+          <button type="button" className="btn btn--sm" onClick={onClear} title="Clear the overlay (Esc)">
+            <X size={13} />
+            Clear
+          </button>
+        </>
+      ) : (
+        <span className="onair__hint">Nothing on the overlay. Click a message to show it, click again to hide it.</span>
+      )}
+    </section>
+  );
+}

client/components/OverlaySettings.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { Check, Copy, ExternalLink, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { ANIMATIONS, buildOverlayUrl, DEFAULT_OPTIONS, POSITIONS, SIZES, THEMES, type OverlayOptions } from '../lib/overlayOptions';
+
+const STORAGE_KEY = 'ytchathub.overlay';
+
+const LABELS: Record<string, string> = {
+  bl: 'Bottom left', bc: 'Bottom center', br: 'Bottom right',
+  tl: 'Top left', tc: 'Top center', tr: 'Top right',
+  s: 'Small', m: 'Medium', l: 'Large', xl: 'Extra large',
+  dark: 'Dark', light: 'Light', blueprint: 'Blueprint (light, brand)', glass: 'Glass', youtube: 'YouTube red',
+  fade: 'Fade', slide: 'Slide', none: 'None'
+};
+
+function load(): OverlayOptions {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) return { ...DEFAULT_OPTIONS, ...JSON.parse(raw) };
+  } catch {
+    // storage unavailable or corrupt
+  }
+  return DEFAULT_OPTIONS;
+}
+
+export function OverlaySettings({ onClose }: { onClose: () => void }) {
+  const [options, setOptions] = useState<OverlayOptions>(DEFAULT_OPTIONS);
+  const [origin, setOrigin] = useState('');
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    setOptions(load());
+    setOrigin(window.location.origin);
+  }, []);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(options));
+    } catch {
+      // storage unavailable
+    }
+  }, [options]);
+
+  const url = buildOverlayUrl(origin, options);
+  const set = <K extends keyof OverlayOptions>(key: K, value: OverlayOptions[K]) => setOptions((prev) => ({ ...prev, [key]: value }));
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // clipboard blocked; the URL is still selectable in the field
+    }
+  };
+
+  const select = <K extends 'theme' | 'pos' | 'size' | 'anim'>(key: K, label: string, values: readonly OverlayOptions[K][]) => (
+    <label className="field">
+      <span>{label}</span>
+      <select value={options[key]} onChange={(event) => set(key, event.target.value as OverlayOptions[K])}>
+        {values.map((value) => (
+          <option key={value} value={value}>{LABELS[value] ?? value}</option>
+        ))}
+      </select>
+    </label>
+  );
+
+  return (
+    <div className="modal" onClick={onClose}>
+      <div className="modal__card modal__card--wide" onClick={(event) => event.stopPropagation()}>
+        <div className="modal__head">
+          <h2>Overlay for OBS</h2>
+          <button type="button" className="btn btn--icon" onClick={onClose} aria-label="Close">
+            <X size={16} />
+          </button>
+        </div>
+        <p className="muted">Add the URL below as a Browser Source. Settings are stored in the URL, so one source can have its own look.</p>
+        <div className="fields">
+          {select('theme', 'Theme', THEMES)}
+          {select('pos', 'Position', POSITIONS)}
+          {select('size', 'Text size', SIZES)}
+          {select('anim', 'Animation', ANIMATIONS)}
+          <label className="field">
+            <span>Hide after (seconds, 0 = never)</span>
+            <input type="number" min={0} max={600} value={options.hide} onChange={(event) => set('hide', Math.max(0, Number(event.target.value) || 0))} />
+          </label>
+          <label className="field">
+            <span>Max width (px on a 1080p canvas, scales with source size)</span>
+            <input type="number" min={240} max={1920} step={20} value={options.width} onChange={(event) => set('width', Math.max(240, Number(event.target.value) || 240))} />
+          </label>
+        </div>
+        <div className="urlbox">
+          <input readOnly value={url} onFocus={(event) => event.target.select()} />
+          <button type="button" className="btn" onClick={copy}>
+            {copied ? <Check size={14} /> : <Copy size={14} />}
+            {copied ? 'Copied' : 'Copy'}
+          </button>
+          <a className="btn" href={url} target="_blank" rel="noopener noreferrer">
+            <ExternalLink size={14} />
+            Open
+          </a>
+        </div>
+        <p className="muted">Recommended Browser Source size: 1920 × 1080, with “Shutdown source when not visible” off so the connection stays warm.</p>
+      </div>
+    </div>
+  );
+}

client/components/TopBar.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { BarChart3, MonitorPlay, Pause, Play, Search, Unplug } from 'lucide-react';
+import type { RefObject } from 'react';
+import type { ConnectionStatus, Poll } from '@shared/chat';
+import type { StreamState } from '../lib/useEvents';
+
+type Props = {
+  status: ConnectionStatus;
+  stream: StreamState;
+  poll: Poll | null;
+  counts: { chat: number; super: number; members: number };
+  search: string;
+  searchRef: RefObject<HTMLInputElement | null>;
+  onSearch: (value: string) => void;
+  paused: boolean;
+  onTogglePause: () => void;
+  onOverlaySettings: () => void;
+  onDisconnect: () => void;
+};
+
+function statusLabel(status: ConnectionStatus, stream: StreamState): { text: string; tone: string } {
+  if (stream === 'error') return { text: 'Backend unreachable', tone: 'danger' };
+  if (stream === 'connecting') return { text: 'Connecting to backend', tone: 'muted' };
+  switch (status.state) {
+    case 'live':
+      return { text: 'Live', tone: 'live' };
+    case 'connecting':
+      return { text: 'Connecting', tone: 'warn' };
+    case 'reconnecting':
+      return { text: 'Reconnecting', tone: 'warn' };
+    default:
+      return { text: status.error ? `Disconnected: ${status.error}` : 'Disconnected', tone: 'danger' };
+  }
+}
+
+export function TopBar({ status, stream, poll, counts, search, searchRef, onSearch, paused, onTogglePause, onOverlaySettings, onDisconnect }: Props) {
+  const label = statusLabel(status, stream);
+  return (
+    <header className="topbar">
+      <div className="topbar__stream">
+        <span className={`dot dot--${label.tone}`} />
+        <span className="topbar__title" title={status.liveId ?? undefined}>{status.title || status.liveId || 'No stream'}</span>
+        <span className={`chip chip--${label.tone}`}>{label.text}</span>
+        {poll?.active && (
+          <span className="chip chip--poll" title="A poll is running on YouTube">
+            <BarChart3 size={12} />
+            Poll
+          </span>
+        )}
+      </div>
+
+      <label className="search">
+        <Search size={14} />
+        <input ref={searchRef} value={search} onChange={(event) => onSearch(event.target.value)} placeholder="Search author or text  ( / )" spellCheck={false} />
+      </label>
+
+      <div className="topbar__stats">
+        <span title="Chat messages kept">{counts.chat} chat</span>
+        <span title="Super Chats this session">{counts.super} super</span>
+        <span title="Memberships this session">{counts.members} members</span>
+      </div>
+
+      <div className="topbar__actions">
+        <button type="button" className={`btn btn--icon ${paused ? 'btn--active' : ''}`} onClick={onTogglePause} title={paused ? 'Resume chat (P)' : 'Pause chat (P)'}>
+          {paused ? <Play size={16} /> : <Pause size={16} />}
+        </button>
+        <button type="button" className="btn" onClick={onOverlaySettings} title="Overlay URL and look">
+          <MonitorPlay size={15} />
+          Overlay
+        </button>
+        <button type="button" className="btn btn--icon btn--danger" onClick={onDisconnect} title="Disconnect from this stream">
+          <Unplug size={16} />
+        </button>
+      </div>
+    </header>
+  );
+}