# Feature Request: Real-time Logging & UI Refinement ## 1. Context & Objective Users currently experience download failures without sufficient context or error details, making troubleshooting difficult. The objective is to introduce a dedicated **Logs System** within the application to capture, display, and persist detailed execution logs from the `yt-dlp` process. Additionally, the application's sidebar layout requires balancing for better UX. ## 2. Requirements ### 2.1. Backend (Rust) - Logging Infrastructure * **Stream Capture**: The `downloader` module must capture both `STDOUT` (progress) and `STDERR` (errors/warnings) from the `yt-dlp` process. * **Event Emission**: Emit a new Tauri event `download-log` to the frontend in real-time. * Payload: `{ id: String, message: String, level: 'info' | 'error' | 'debug' }` * **Persistence (Optional but Recommended)**: Ideally, write logs to a local file (e.g., `logs/{date}.log` or `logs/{task_id}.log`) for post-mortem analysis. *For this iteration, real-time event emission is priority.* ### 2.2. Frontend - Logs View * **New Route**: `/logs` * **UI Layout**: * A dedicated **Logs Tab** in the main navigation. * A console-like view displaying a stream of log messages. * Filters: Filter by "Task ID" or "Level" (Error/Info). * **Real-time**: The view must update automatically as new log events arrive. * **Detail**: Failed downloads must show the specific error message returned by `yt-dlp` (e.g., "Sign in required", "Video unavailable"). ### 2.3. UI/UX - Sidebar Refactoring * **Reordering**: * **Top Section**: Home (Downloader), History. * **Bottom Section**: Logs, Settings. * **Removal**: Remove the "Version Number" text from the bottom of the sidebar (it can be moved to the Settings page if needed, or just removed as requested). ## 3. Implementation Steps ### Step 1: Rust Backend Updates * Modify `src-tauri/src/downloader.rs`: * Update `download_video` to spawn the process with `Stdio::piped()` for both stdout and stderr. * Use `tokio::select!` or separate tasks to read both streams concurrently. * Emit `download-log` events for every line read. * Ensure the final error message (if exit code != 0) is explicitly captured and returned/logged. ### Step 2: Frontend Store & Logic * Create `src/stores/logs.ts`: * State: `logs: LogEntry[]`. * Action: `addLog(entry)`. * Listener: Listen for `download-log` events globally. ### Step 3: Frontend UI * Create `src/views/Logs.vue`: * Display logs in a scrollable container. * Style error logs in red, info in gray/white. * Update `src/App.vue`: * Add the `FileText` (or similar) icon for Logs. * Refactor the sidebar Flexbox layout to push Logs and Settings to the bottom. * Remove the version footer. * Update `src/router/index.ts` to include the new route. ## 4. Success Criteria * When a download fails, the user can go to the "Logs" tab and see the exact error output from `yt-dlp`. * The sidebar looks balanced with navigation items split between top and bottom.