Add music bot for self-hosted Stoat with web control panel

Plays audio into Stoat voice channels over LiveKit and exposes the same
player through both chat commands and a browser panel, so the two never
drift apart: everything routes through a single MusicManager.

- core: per-server GuildPlayer (queue, loop, shuffle, seek, volume,
  idle auto-leave) driving revoice.js/@livekit/rtc-node and ffmpeg
- sources: yt-dlp for YouTube/SoundCloud, direct media URLs and internet
  radio, optional local library with path-traversal guards
- bot: 18 chat commands with aliases, plus !panel one-time login links
- api: Fastify REST + WebSocket, sessions authenticated against the
  instance's own /auth/session/login (TOTP supported), permissions
  re-checked against Stoat membership and roles on every request
- web: React panel with search, queue editing, seek and volume
- deploy: Dockerfile, compose.override.yml and Caddyfile snippets for
  dropping the service into an existing /opt/stoat stack

Verified with npm run typecheck, both builds, and scripts/smoke-api.mjs
(9 API checks). Voice playback itself needs a live instance to test.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/src/components/SearchPanel.tsx

@@ -0,0 +1,117 @@
+import { useState, type FormEvent } from "react";
+import { api, formatDuration } from "../api";
+import type { Track } from "../types";
+
+const SOURCE_BADGE: Record<Track["source"], string> = {
+  youtube: "YouTube",
+  soundcloud: "SoundCloud",
+  direct: "Ссылка",
+  local: "Медиатека",
+};
+
+interface Props {
+  serverId: string;
+  canControl: boolean;
+  localLibrary: boolean;
+  onError(message: string | null): void;
+}
+
+export function SearchPanel({ serverId, canControl, localLibrary, onError }: Props) {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState<Track[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [lastAdded, setLastAdded] = useState<string | null>(null);
+
+  async function submit(event: FormEvent) {
+    event.preventDefault();
+    const value = query.trim();
+    if (!value) return;
+    setBusy(true);
+    onError(null);
+    try {
+      if (/^https?:\/\//i.test(value)) {
+        await api.play(serverId, { query: value });
+        setLastAdded(value);
+        setResults([]);
+        setQuery("");
+        return;
+      }
+      const { tracks } = await api.search(serverId, value);
+      setResults(tracks);
+    } catch (err) {
+      onError(err instanceof Error ? err.message : "Поиск не удался");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function enqueue(track: Track, mode: "append" | "next" | "now") {
+    onError(null);
+    try {
+      await api.play(serverId, { trackIds: [track.id], mode });
+      setLastAdded(track.title);
+    } catch (err) {
+      onError(err instanceof Error ? err.message : "Не удалось добавить трек");
+    }
+  }
+
+  return (
+    <div className="card">
+      <h2>Поиск</h2>
+      <form className="search-form" onSubmit={submit}>
+        <input
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder="Название трека или ссылка…"
+          disabled={!canControl}
+        />
+        <button className="primary" type="submit" disabled={busy || !canControl}>
+          {busy ? "…" : "Найти"}
+        </button>
+      </form>
+
+      {results.length === 0 ? (
+        <div className="empty">
+          {lastAdded ? `Добавлено: ${lastAdded}` : "Введите запрос или вставьте ссылку — плейлисты тоже поддерживаются."}
+        </div>
+      ) : (
+        <ul className="track-list">
+          {results.map((track, index) => (
+            <li className="track" key={track.id}>
+              <span className="idx">{index + 1}</span>
+              {track.thumbnail ? <img className="thumb" src={track.thumbnail} alt="" /> : <div className="thumb" />}
+              <div className="info">
+                <div className="title">{track.title}</div>
+                <div className="sub">
+                  {[track.author, track.isLive ? "LIVE" : formatDuration(track.duration)].filter(Boolean).join(" · ")}
+                </div>
+              </div>
+              <span className="badge">{SOURCE_BADGE[track.source]}</span>
+              <div className="actions">
+                <button onClick={() => enqueue(track, "now")} disabled={!canControl} title="Играть сейчас">
+                  ▶
+                </button>
+                <button onClick={() => enqueue(track, "next")} disabled={!canControl} title="Следующим">
+                  ⤴
+                </button>
+                <button onClick={() => enqueue(track, "append")} disabled={!canControl} title="В очередь">
+                  ＋
+                </button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <p className="hint">
+        Префиксы: <code>sc:</code> — искать в SoundCloud, <code>yt:</code> — в YouTube
+        {localLibrary ? (
+          <>
+            , <code>local:</code> — в локальной медиатеке
+          </>
+        ) : null}
+        .
+      </p>
+    </div>
+  );
+}