Layer 0 — Foundation: - Dark mode palette (30+ CSS var pairs in [data-theme='dark']) - CSS-first theme engine in styles.css (@theme + CSS vars) - UseTheme hook with light/dark/system support + localStorage persistence - Fixed animation keyframes (shimmer 1.5s canonical, glowPulse moved to CSS) - Smooth theme switch transitions via .theme-transitioning class Layer 1 — Shared UI Components: - Badge: success/warning variants now use CSS vars (bg-success-soft text-success) - Toast: rewritten with CSS vars, z-index fixed (40), repositioned top-right - Skeleton: added variant prop (rounded/circular/rectangular) - EmptyState: new component with icon + title + description + action - Button: added tertiary variant + icon-sm size - Card: added elevated/bordered variants - Input: added soft variant Layer 2 — Layout & Navigation: - TabStrip: new horizontal tab navigation with spring underline indicator (z-30) - Sidebar: expanded by default (w-64), brand assets always visible - Header: simplified brand bar, removed redundant page titles, added ThemeToggle - MobileTabBar: enhanced with spring dot indicator + glass bg + safe area - DashboardLayout: integrated TabStrip between Header and content - ParticleBackground: lazy render, skips on mobile/reduced-motion Layer 3 — Feature Components: - MessageCard: 30+ hardcoded hex replacements → semantic CSS vars - MessagesPanel: stat badges use Badge component variants - DashboardStats: StatCard with variant system (primary/success/warning/destructive) - UserSummaryList/UserProfileDetail/ChannelProfileDetail: all hardcoded colors → CSS vars - AudioVisualizer: reads --primary CSS var at paint time - ActiveSpeakers/RecordingsSubPanel: hardcoded colors → CSS vars Layer 4 — Polish: - EmptyState integrated across messages/dashboard/live panels - Theme toggle wired in Header + App root - Hover state audit for consistency - Entry animations verified (cardStagger/cardItem pattern in all panels) Resolves DESIGN_TOKENS.md §13.x issues: hardcoded colors, shimmer mismatch, glow-pulse fragmentation, z-index collisions, toast positioning.
Discord Moderation Watcher Bot
Bot monitoring Discord yang merekam voice channel, menangkap pesan teks, menyimpan attachment, menjalankan analisis opsional, dan menyediakan dashboard web real-time.
Stack utama: Node.js, pnpm, TypeScript, discord.js-selfbot-v13, @discordjs/voice, Express, WebSocket, Drizzle ORM, SQLite/PostgreSQL, React, Vite, Vitest, dan Biome.
Prasyarat
- Node.js versi modern yang kompatibel dengan TypeScript dan Vite.
- pnpm 10.x. Repo ini dipin ke
pnpm@10.25.0. - FFmpeg tersedia di
PATHuntuk proses muxing audio dan playback media. yt-dlptersedia diPATHuntuk resolve audio YouTube, search result YouTube, dan Spotify track.- Native audio dependencies dapat dibuild di mesin lokal (
@discordjs/opus,better-sqlite3,sodium-native).
Install FFmpeg:
# Ubuntu/Debian
sudo apt install ffmpeg
# Arch
sudo pacman -S ffmpeg
Install yt-dlp:
pnpm run install:yt-dlp
Script installer akan memakai package manager yang tersedia (pacman, apt-get, dnf, brew) atau fallback ke pipx/pip.
Setup
pnpm install
cp .env.example .env
Edit .env sesuai server yang dimonitor:
DISCORD_TOKEN=your_token_here
MONITOR_GUILD_ID=your_guild_id_here
RECORDINGS_DIR=./recordings
WEBSERVER_PORT=3000
DATABASE_TYPE=sqlite
Catatan: project ini memakai selfbot library, bukan bot token Discord standar. Pastikan penggunaan sesuai risiko dan aturan platform yang berlaku.
Menjalankan
# Bot/server utama dengan auto-restart
pnpm run dev
# Production-style start
pnpm run start
# Dashboard frontend dev server
pnpm run dev:web
Dashboard build production disajikan dari public/app setelah menjalankan:
pnpm run build:web
Command Development
# Type checking
pnpm run typecheck
# Lint
pnpm run lint
# Format
pnpm run format
# Test
pnpm run test
# Build frontend + TypeScript
pnpm run build
# Install external yt-dlp CLI for YouTube/search/Spotify track playback
pnpm run install:yt-dlp
Database
Default database adalah SQLite di .muxer-queue.db. PostgreSQL dapat dipakai dengan DATABASE_TYPE=postgres dan konfigurasi DATABASE_URL atau variabel POSTGRES_*.
Jika aplikasi dijalankan di PostgreSQL production, migrasi dapat dijalankan otomatis saat startup dengan AUTO_MIGRATE_ON_STARTUP=true. Jalur ini memakai advisory lock supaya hanya satu instance yang memigrasi schema pada satu waktu.
# Generate migration Drizzle
pnpm run db:generate
# Jalankan migration via drizzle-kit
pnpm run db:migrate
# Jalankan migration programmatic
pnpm run db:migrate:programmatic
# Buka Drizzle Studio
pnpm run db:studio
Fitur
- Voice recording ke segment
.oggper user. - Metadata JSON per segment audio.
- Text message capture untuk pesan baru, edit, dan delete.
- Attachment capture dan upload ke endpoint Picser.
- SQLite/PostgreSQL via Drizzle ORM.
- REST API dan WebSocket untuk dashboard.
- Dashboard React untuk pesan, gambar, voice, media playback, dan moderation review.
- Media playback dari direct URL, file lokal, YouTube URL, search terms, dan Spotify track URL.
- Metrics Prometheus di endpoint server.
- Retry dengan backoff untuk operasi eksternal.
- AI moderation analysis opsional via konfigurasi
AI_*.
Struktur Rekaman
recordings/
<user-id>/
<user-id>-<session-start>-0.ogg
<user-id>-<session-start>-0.json
<user-id>-<session-start>-1.ogg
<user-id>-<session-start>-1.json
Segment duration dikontrol oleh RECORDING_SEGMENT_MS.
Struktur Proyek
src/
index.ts Entry point Discord client dan server
recorder.ts Voice recording pipeline
recorder/ Audio stream, decoder, segment metadata
moderation/ Message capture, storage, uploads, AI review
database/ Drizzle setup, schema, migrations
routes/ Express route modules
webserver.ts Express + WebSocket server
retry.ts Retry helper berbasis p-retry
audio/ffmpegProcess.ts Direct ffmpeg process wrapper
frontend/ React dashboard source
public/app/ Dashboard build output
tests/ Vitest tests
drizzle/migrations/ Database migrations
Konfigurasi Penting
Lihat .env.example untuk daftar lengkap. Variabel utama:
DISCORD_TOKEN— token akun/client yang dipakai selfbot.MONITOR_GUILD_ID— guild yang dimonitor untuk moderation capture.RECORDINGS_DIR— direktori output audio.WEBSERVER_PORT— port HTTP/WebSocket.DATABASE_TYPE—sqliteataupostgres.PICSER_UPLOAD_URL— endpoint upload attachment.AI_ANALYSIS_ENABLED— aktifkan/nonaktifkan analisis AI.AI_LLM_API_KEY,AI_LLM_BASE_URL,AI_LLM_MODEL— konfigurasi provider LLM.
Verifikasi Setelah Perubahan
Sebelum menjalankan lama atau deploy, jalankan:
pnpm install
pnpm run typecheck
pnpm run lint
pnpm run test
pnpm run build
Catatan Library Modernization
Project memakai Zod untuk validasi runtime, Drizzle untuk database, dan wrapper node:child_process langsung untuk FFmpeg. Library lama class-transformer, class-validator, dan fluent-ffmpeg sudah tidak dipakai.