stream-capture/spec/logging_feature.md

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.