diff --git a/AI_INIT.md b/AI_INIT.md index 1afc5bc..0d4ac73 100644 --- a/AI_INIT.md +++ b/AI_INIT.md @@ -3,57 +3,88 @@ Welcome to the KoalaSync project. This file is the primary entry point for any developer or AI agent working on this codebase. It defines the architecture, non-negotiables, and workflows required to maintain the stability and security of the system. > [!IMPORTANT] -> **Privacy & Data Sovereignty**: KoalaSync follows a strict **Zero-External-Requests Policy**: The extension and website must not make requests to any third-party domains. All assets must be self-hosted. -> - **Font Stack**: Use a modern system font stack to maintain a premium look without external dependencies. +> **Privacy & Data Sovereignty**: KoalaSync follows a strict **Zero-External-Requests Policy**: The extension and website must not make requests to any third-party domains (Google Fonts, CDNs, etc.). All assets (fonts, icons, scripts) must be self-hosted or use system defaults. +> - **Font Stack**: Use a modern system font stack (e.g., -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif) to maintain a premium look without external dependencies. Prohibit the use of `@import` or `` for external font services. --- ## 1. Project Overview -KoalaSync is a specialized tool for **synchronized video playback** across multiple remote peers. -- **Workflow**: A user creates a room, shares an invitation link, and all peers are synchronized via a Node.js relay server. +KoalaSync is a specialized tool for **synchronized video playback** across multiple remote peers. It supports YouTube, Twitch, and native HTML5 video elements. +- **Users**: Friends or groups wanting to watch synchronized content together. +- **Workflow**: A user creates a room, shares an invitation link, and all peers in that room are synchronized via a Node.js relay server. - **Identity**: Users are identified by a unique hex `peerId` combined with a customizable `username`. ## 2. Repository Structure -- `extension/`: Chrome Extension (Manifest V3). +- `extension/`: Chrome Extension (Manifest V3). Contains background service worker, content scripts, and popup UI. - `server/`: Node.js Relay Server using Socket.IO (WebSocket-only). -- `website/`: Landing Page & Invitation Bridge. -- `shared/`: Single Source of Truth for protocol constants and event names. +- `website/`: **Landing Page** & Invitation Bridge (Marketing, Tutorials, and Downloads). +- `shared/`: **Single Source of Truth** for protocol constants and event names. +- `scripts/`: Utility scripts (e.g., `sync-constants.sh`). +- `docker-compose.yml`: Root-level orchestration for the relay server. + +> [!IMPORTANT] +> `shared/constants.js` and `shared/blacklist.js` must be synchronized to the `extension/shared/` directory after every modification by running `./scripts/sync-constants.sh` or `.\scripts\sync-constants.bat`. ## 3. Mandatory Reading -1. [ARCHITECTURE.md](ARCHITECTURE.md) – Communication flows and Dual Heartbeat protocol. -2. [extension/README.md](extension/README.md) – UI structure and component overview. +Before touching any code, you MUST read the following documents in order: +1. [ARCHITECTURE.md](ARCHITECTURE.md) – Detailed communication flows, Dual Heartbeat, and two-phase sync protocol. +2. [extension/README.md](extension/README.md) – Extension components, tab structure, and loading process. +3. [SYNC_GUIDE.md](SYNC_GUIDE.md) – Protocol constants and synchronization requirements. ## 4. Design Guidelines +The popup UI follows a strict design system. Do not modify these variables or the layout structure without explicit approval. +- **Font**: System font stack. **MANDATORY**: No external CDNs or Google Fonts to ensure 100% privacy. - **Popup Width**: Fixed at `320px`. -- **Tab Structure**: **Room**, **Sync**, **Settings**, and **Dev**. -- **CSS Variables**: Uses the CSS variables defined in `popup.html` for a consistent Dark Mode / Glassmorphic look. +- **Tab Structure**: Must maintain the **Room**, **Sync**, **Settings**, and **Dev** tabs. +- **CSS Variables**: + | Variable | Value | Purpose | + | :--- | :--- | :--- | + | `--bg` | `#0f172a` | Main background | + | `--card` | `#1e293b` | Form and info cards | + | `--accent` | `#6366f1` | Primary actions and branding | + | `--success` | `#22c55e` | Success states / Online dot | + | `--error` | `#ef4444` | Errors / Offline dot | ## 5. Non-Negotiables (Core Logic) -- **Two-Phase Force Sync**: `Prepare` → `ACK` → `Execute` flow for frame-perfect sync. +The following features are critical and must not be removed or fundamentally altered: +- **Two-Phase Force Sync**: The `Prepare` → `ACK` → `Execute` flow ensures all peers are buffered before playback resumes. - **Dual Heartbeat**: - - **Background Heartbeat (30s)**: Keeps the session alive even without a video. - - **Content Heartbeat (15s)**: Transmits current video metadata (title, time). -- **Dead Peer Pruning**: Server automatically disconnects peers after 5 minutes of total silence. -- **Deduplication**: Server kills old sockets if a user re-joins with the same `peerId`. + - **Background Heartbeat (30s)**: Ensures session persistence even without a video element. + - **Content Heartbeat (15s)**: Transmits current video metadata (time, title). +- **Dead Peer Pruning**: Server "Reaper" disconnects peers after 5 minutes of total silence (no heartbeats or events). +- **Deduplication**: Server kills old sockets if a user re-joins with the same `peerId` to prevent ghosts. +- **Platform Specifics**: Specialized click-logic for YouTube (`.ytp-play-button`) and Twitch. +- **pollSeekReady()**: Polling mechanism that checks `video.readyState` before acknowledging sync. +- **SW Keep-alive**: Use of `chrome.alarms` to prevent the Manifest V3 Service Worker from suspending. - **Diagnostics**: The "Dev" tab provides real-time access to the underlying `