Delete .kiro directory

.kiro/hooks/code-quality-analyzer.kiro.hook

@@ -1,21 +0,0 @@
-{
-  "enabled": true,
-  "name": "Code Quality Analyzer",
-  "description": "Monitors source code files for changes and analyzes modified code for potential improvements including code smells, design patterns, and best practices. Generates actionable suggestions for improving code quality while maintaining existing functionality.",
-  "version": "1",
-  "when": {
-    "type": "userTriggered",
-    "patterns": [
-      "scripts/*.js",
-      "styles/*.css",
-      "index.html",
-      "*.js",
-      "*.css",
-      "*.html"
-    ]
-  },
-  "then": {
-    "type": "askAgent",
-    "prompt": "A source code file has been modified. Please analyze the changed code for potential improvements focusing on:\n\n1. **Code Smells & Anti-patterns**: Identify any code smells, duplicated code, overly complex functions, or anti-patterns\n2. **Design Patterns**: Suggest appropriate design patterns that could improve the code structure\n3. **Best Practices**: Check adherence to JavaScript/CSS/HTML best practices and modern standards\n4. **Readability**: Evaluate code clarity, naming conventions, and documentation\n5. **Maintainability**: Assess how easy the code is to modify and extend\n6. **Performance**: Identify potential performance optimizations without breaking functionality\n\nFor each issue found, provide:\n- Clear description of the problem\n- Specific code location/line references\n- Concrete improvement suggestion with example code if helpful\n- Explanation of why the change improves quality\n\nFocus on actionable suggestions that maintain existing functionality while improving code quality. Consider the project context as a YouTube downloader web application with vanilla JavaScript, Tailwind CSS, and HTML5."
-  }
-}

.kiro/hooks/docs-sync-hook.kiro.hook

@@ -1,20 +0,0 @@
-{
-  "enabled": true,
-  "name": "Documentation Sync",
-  "description": "Monitors all source files (HTML, CSS, JavaScript) and assets in the repository and triggers documentation updates in README.md when changes are detected",
-  "version": "1",
-  "when": {
-    "type": "userTriggered",
-    "patterns": [
-      "*.html",
-      "styles/*.css",
-      "scripts/*.js",
-      "assets/**/*.svg",
-      "*.md"
-    ]
-  },
-  "then": {
-    "type": "askAgent",
-    "prompt": "Source files have been modified in this web application project. Please review the changes and update the README.md file to reflect any new features, API changes, or architectural modifications. Ensure the documentation accurately describes the current state of the application, including any new components, styling changes, or functionality updates. Focus on keeping the user-facing documentation clear and up-to-date."
-  }
-}

.kiro/specs/youtube-downloader-app/design.md

@@ -1,192 +0,0 @@
-# Design Document
-
-## Overview
-
-The YouTube Downloader App is a standalone desktop application built with Electron that allows users to download YouTube videos with a comprehensive interface for managing multiple downloads. The application provides native system integration for file management, binary execution (yt-dlp/ffmpeg), and desktop-native user experience. The design follows a dark theme with a professional video management interface similar to GrabZilla, featuring a header, input section, video list, and control panel.
-
-## Architecture
-
-### Component Structure
-```
-VideoDownloader (Main Container)
-├── Header (App branding and window controls)
-├── InputSection (URL input and configuration)
-├── VideoList (Table-style list of videos)
-└── ControlPanel (Action buttons and status)
-```
-
-### Technology Stack
-- **Desktop Framework**: Electron (main process + renderer process)
-- **Frontend**: HTML5, Tailwind CSS, Vanilla JavaScript
-- **System Integration**: Node.js APIs for file system, process management
-- **Binary Integration**: yt-dlp and ffmpeg local binaries
-- **IPC**: Secure Inter-Process Communication between main and renderer
-- **Styling**: Tailwind CSS with custom color variables from Figma
-- **Layout**: CSS Grid and Flexbox for responsive design
-- **Icons**: SVG icons as provided in Figma design
-
-## Components and Interfaces
-
-### 1. Header Component
-- **Purpose**: App branding and window controls
-- **Elements**:
-  - App logo with blue background (`#155dfc`)
-  - App title "GrabZilla 2.0.0" (customizable for YouTube Downloader)
-  - Window control buttons (minimize, maximize, close)
-- **Styling**: Dark header (`#0f172b`) with bottom border
-
-### 2. Input Section Component
-- **Purpose**: URL input and download configuration
-- **Elements**:
-  - Large textarea for YouTube URLs (placeholder: "Paste YouTube/Vimeo URLs here (one per line)...")
-  - "Add Video" button (primary blue `#155dfc`)
-  - "Import URLs" button (secondary with border)
-  - Save path selector
-  - Default quality dropdown (1080p, 720p, 4K options)
-  - Conversion format dropdown (None, H264, ProRes, DNxHR, Audio only)
-  - Filename pattern input
-- **Styling**: Dark background (`#314158`) with rounded corners
-
-### 3. Video List Component
-- **Purpose**: Display and manage video queue
-- **Structure**: Grid-based table layout with columns:
-  - Checkbox for selection
-  - Drag handle icon
-  - Video thumbnail (64x48px, rounded corners)
-  - Video title (truncated with ellipsis)
-  - Duration
-  - Quality selector dropdown
-  - Conversion format dropdown
-  - Status badge (Ready, Downloading, Converting, Completed, Error)
-- **Interactive Elements**:
-  - Dropdown menus for quality and format selection
-  - Status badges with integrated progress display:
-    - Ready: Green badge (`#00a63e`)
-    - Downloading: Green badge with progress percentage (e.g., "Downloading 65%")
-    - Converting: Blue badge (`#155dfc`) with progress percentage (e.g., "Converting 42%")
-    - Completed: Gray badge (`#4a5565`)
-    - Error: Red badge (`#e7000b`)
-
-### 4. Control Panel Component
-- **Purpose**: Bulk actions and download management
-- **Elements**:
-  - "Clear List" button (secondary)
-  - "Update Dependencies" button (secondary)
-  - "Cancel Downloads" button (red `#e7000b`)
-  - "Download Videos" button (primary green `#00a63e`)
-  - Status message area
-
-## Data Models
-
-### Video Object
-```javascript
-{
-  id: string,
-  url: string,
-  title: string,
-  thumbnail: string,
-  duration: string,
-  quality: string, // "720p", "1080p", "4K", etc.
-  format: string, // "None", "H264", "ProRes", "DNxHR", "Audio only"
-  status: string, // "ready", "downloading", "converting", "completed", "error"
-  progress: number, // 0-100 for downloading/converting
-  filename: string
-}
-```
-
-### App State
-```javascript
-{
-  videos: Video[],
-  savePath: string,
-  defaultQuality: string,
-  defaultFormat: string,
-  filenamePattern: string,
-  isDownloading: boolean
-}
-```
-
-## Design System Variables
-
-### Colors (Exact Figma Values)
-- **Primary Blue**: `#155dfc`
-- **Success Green**: `#00a63e`
-- **Error Red**: `#e7000b`
-- **Background Dark**: `#1d293d`
-- **Header Dark**: `#0f172b`
-- **Card Background**: `#314158`
-- **Border Color**: `#45556c`
-- **Text Primary**: `#ffffff`
-- **Text Secondary**: `#cad5e2`
-- **Text Muted**: `#90a1b9`
-- **Text Disabled**: `#62748e`
-
-### Typography
-- **Font Family**: Inter (Regular, Medium)
-- **Sizes**: 
-  - Headers: 16px (Medium)
-  - Body: 14px (Regular)
-  - Small: 12px (Regular/Medium)
-- **Line Heights**: 16px, 20px, 24px
-- **Letter Spacing**: -0.1504px, -0.3125px
-
-### Spacing & Layout
-- **Container Padding**: 16px
-- **Component Gaps**: 8px, 12px, 16px
-- **Border Radius**: 4px (small), 6px (medium), 8px (large)
-- **Grid Columns**: Auto-fit layout for video list
-- **Video Item Height**: 64px
-
-## Error Handling
-
-### URL Validation
-- Validate YouTube/Vimeo URL format
-- Display inline error messages for invalid URLs
-- Prevent duplicate URLs in the list
-
-### Download Errors
-- Network connectivity issues
-- Video unavailable/private
-- Format not supported
-- Insufficient storage space
-- Display error badges and detailed error messages
-
-### User Feedback
-- Loading states for all async operations
-- Progress indicators for downloads
-- Success/error notifications
-- Status messages in the bottom panel
-
-## Testing Strategy
-
-### Unit Tests
-- URL validation functions
-- Video object manipulation
-- State management functions
-- Format conversion utilities
-
-### Integration Tests
-- Complete download workflow
-- UI component interactions
-- Error handling scenarios
-- Progress tracking accuracy
-
-### User Interface Tests
-- Responsive design across screen sizes
-- Keyboard navigation
-- Accessibility compliance (ARIA labels, focus management)
-- Visual regression testing against Figma design
-
-### Performance Tests
-- Multiple simultaneous downloads
-- Large video file handling
-- Memory usage optimization
-- UI responsiveness during operations
-
-## Accessibility Considerations
-
-- **Keyboard Navigation**: Full keyboard support for all interactive elements
-- **Screen Readers**: Proper ARIA labels and descriptions
-- **Color Contrast**: Ensure sufficient contrast ratios for all text
-- **Focus Management**: Clear focus indicators and logical tab order
-- **Status Announcements**: Live regions for download progress updates

.kiro/specs/youtube-downloader-app/requirements.md

@@ -1,63 +0,0 @@
-# Requirements Document
-
-## Introduction
-
-This feature involves creating a standalone desktop YouTube downloader application using Electron, HTML, and Tailwind CSS. The application will allow users to download YouTube videos by entering a URL, with full system integration for file management and binary execution. The design will be based on the provided Figma file, using exact variables and maintaining visual consistency with the design system.
-
-## Requirements
-
-### Requirement 1
-
-**User Story:** As a user, I want to enter a YouTube URL and download the video, so that I can save videos for offline viewing.
-
-#### Acceptance Criteria
-
-1. WHEN a user enters a valid YouTube URL THEN the system SHALL validate the URL format
-2. WHEN a user clicks the download button THEN the system SHALL initiate the download process
-3. WHEN the download is in progress THEN the system SHALL display a progress indicator
-4. WHEN the download completes THEN the system SHALL provide the downloaded file to the user
-5. IF an invalid URL is entered THEN the system SHALL display an appropriate error message
-
-### Requirement 2
-
-**User Story:** As a user, I want the application to have an intuitive and visually appealing interface, so that I can easily navigate and use the downloader.
-
-#### Acceptance Criteria
-
-1. WHEN the application loads THEN the system SHALL display a clean, responsive interface matching the Figma design
-2. WHEN viewed on different screen sizes THEN the system SHALL maintain proper layout and usability
-3. WHEN interactive elements are hovered or focused THEN the system SHALL provide appropriate visual feedback
-4. WHEN the application is used THEN the system SHALL use exact color variables and spacing from the Figma design
-
-### Requirement 3
-
-**User Story:** As a user, I want to see download options and quality settings, so that I can choose the appropriate format for my needs.
-
-#### Acceptance Criteria
-
-1. WHEN a valid URL is entered THEN the system SHALL display available download formats and quality options
-2. WHEN a user selects a format THEN the system SHALL update the download configuration accordingly
-3. WHEN multiple quality options are available THEN the system SHALL present them in a clear, organized manner
-4. IF no formats are available THEN the system SHALL display an informative message
-
-### Requirement 4
-
-**User Story:** As a user, I want real-time feedback during the download process, so that I know the status of my download.
-
-#### Acceptance Criteria
-
-1. WHEN a download starts THEN the system SHALL display a progress bar or loading indicator
-2. WHEN download progress updates THEN the system SHALL reflect the current progress percentage
-3. WHEN an error occurs during download THEN the system SHALL display a clear error message
-4. WHEN the download completes successfully THEN the system SHALL show a success confirmation
-
-### Requirement 5
-
-**User Story:** As a developer, I want the application to use exact Figma design variables, so that the implementation matches the design specifications perfectly.
-
-#### Acceptance Criteria
-
-1. WHEN implementing colors THEN the system SHALL use exact color values from Figma variables
-2. WHEN implementing spacing THEN the system SHALL use exact spacing values from Figma variables
-3. WHEN implementing typography THEN the system SHALL use exact font specifications from Figma variables
-4. WHEN implementing components THEN the system SHALL match exact dimensions and styling from Figma

.kiro/specs/youtube-downloader-app/tasks.md

@@ -1,118 +0,0 @@
-# Implementation Plan
-
-- [x] 1. Set up project structure and core HTML foundation
-  - Create index.html with semantic structure for the main application layout
-  - Set up Tailwind CSS integration and custom CSS variables from Figma design
-  - Create basic HTML structure for header, input section, video list, and control panel
-  - _Requirements: 2.1, 5.1, 5.2, 5.3_
-
-- [x] 2. Implement header component with exact Figma styling
-  - Create header HTML structure with app logo, title, and window controls
-  - Apply exact Figma color values and typography using Tailwind classes
-  - Add SVG icons for logo and window control buttons
-  - _Requirements: 2.1, 5.1, 5.2, 5.3, 5.4_
-
-- [x] 3. Build URL input section with interactive elements
-  - Create textarea for YouTube URL input with placeholder text
-  - Implement "Add Video" and "Import URLs" buttons with proper styling
-  - Add save path selector, quality dropdown, and format dropdown components
-  - Apply exact spacing, colors, and border radius from Figma design
-  - _Requirements: 1.1, 2.1, 3.1, 5.1, 5.2, 5.3, 5.4_
-
-- [x] 4. Create video list table structure and styling
-  - Build grid-based table layout with proper column structure
-  - Create video item component template with thumbnail, title, duration, and controls
-  - Implement responsive grid system matching Figma layout specifications
-  - Add proper spacing and alignment for all table elements
-  - _Requirements: 2.1, 3.1, 5.1, 5.2, 5.3, 5.4_
-
-- [x] 5. Implement status badges with integrated progress display
-  - Create status badge component with color-coded states (Ready, Downloading, Converting, Completed, Error)
-  - Integrate progress percentage directly into status badges for downloading/converting states
-  - Apply exact color values from Figma for each status state
-  - Add proper typography and spacing for status text and progress percentages
-  - _Requirements: 1.4, 4.1, 4.2, 4.3, 5.1, 5.2, 5.3, 5.4_
-
-- [x] 6. Build control panel with action buttons
-  - Create bottom control panel with "Clear List", "Update Dependencies", "Cancel Downloads" buttons
-  - Implement "Download Videos" primary action button
-  - Add status message area for user feedback
-  - Apply exact button styling, colors, and spacing from Figma
-  - _Requirements: 1.2, 2.1, 4.4, 5.1, 5.2, 5.3, 5.4_
-
-- [x] 7. Implement JavaScript state management and data models
-  - Create Video object model with all required properties (id, url, title, thumbnail, etc.)
-  - Implement application state management for videos array and configuration
-  - Add functions for adding, removing, and updating video objects
-  - Create utility functions for URL validation and format handling
-  - _Requirements: 1.1, 1.5, 3.1, 3.2_
-
-- [x] 8. Add URL validation and video addition functionality
-  - Implement YouTube/Vimeo URL validation with regex patterns
-  - Create function to extract video information from URLs
-  - Add video to list functionality with proper error handling
-  - Display validation errors for invalid URLs
-  - _Requirements: 1.1, 1.5, 3.1, 4.3_
-
-- [x] 9. Implement interactive dropdown menus for quality and format selection
-  - Create dropdown components for quality selection (720p, 1080p, 4K, etc.)
-  - Build format selection dropdown (None, H264, ProRes, DNxHR, Audio only)
-  - Add event handlers for dropdown value changes
-  - Update video object properties when selections change
-  - _Requirements: 3.1, 3.2, 3.3_
-
-- [x] 10. Integrate Electron IPC for desktop app functionality
-  - Connect renderer process to main process via secure IPC channels
-  - Implement file system operations (save directory selection, cookie file selection)
-  - Add binary version checking and management through main process
-  - Create secure communication layer for video download operations
-  - _Requirements: 1.1, 1.2, 3.1, 4.1_
-
-- [x] 11. Implement real video download functionality with yt-dlp integration
-  - Connect to yt-dlp binary through main process for actual video downloads
-  - Implement progress tracking with real download progress from yt-dlp output
-  - Add status transitions (Ready → Downloading → Converting → Completed)
-  - Handle video metadata extraction and thumbnail fetching
-  - _Requirements: 1.2, 1.4, 4.1, 4.2_
-
-- [x] 12. Add format conversion with ffmpeg integration
-  - Integrate ffmpeg binary for video format conversion (H264, ProRes, DNxHR)
-  - Implement audio-only extraction functionality
-  - Add conversion progress tracking and status updates
-  - Handle format-specific encoding parameters and quality settings
-  - _Requirements: 3.2, 3.3, 4.1, 4.2_
-
-- [x] 13. Implement desktop-native file operations and error handling
-  - Add native file dialogs for save directory and cookie file selection
-  - Implement error states for failed downloads with proper error messages
-  - Create desktop notification system for download completion
-  - Handle binary missing scenarios and dependency management
-  - _Requirements: 1.5, 4.3, 4.4_
-
-- [x] 14. Add bulk actions and desktop app features
-  - Implement "Clear List" functionality to remove all videos
-  - Create "Cancel Downloads" feature to stop active download processes
-  - Add video selection with checkboxes for bulk operations
-  - Implement drag-and-drop reordering functionality for video list
-  - _Requirements: 1.2, 4.4_
-
-- [x] 15. Add desktop app accessibility and keyboard navigation
-  - Implement full keyboard navigation for all interactive elements
-  - Add proper ARIA labels and descriptions for screen readers
-  - Create focus management system with visible focus indicators
-  - Add live regions for status announcements during downloads
-  - _Requirements: 2.2, 2.3_
-
-- [ ] 16. Create comprehensive test suite and final integration
-  - Write unit tests for URL validation and desktop app functions
-  - Create integration tests for complete download workflow with binaries
-  - Add Electron main/renderer process communication tests
-  - Test cross-platform compatibility (macOS, Windows, Linux)
-  - _Requirements: 1.1, 1.2, 1.4, 1.5, 3.1, 3.2, 3.3, 4.1, 4.2, 4.3, 4.4_
-
-- [ ] 17. Final desktop app polish and distribution
-  - Integrate all components into cohesive Electron application
-  - Apply final styling adjustments to match Figma design exactly
-  - Optimize performance for desktop environment
-  - Prepare app for distribution (code signing, packaging)
-  - _Requirements: 1.1, 1.2, 1.4, 1.5, 2.1, 2.2, 2.3, 3.1, 3.2, 3.3, 4.1, 4.2, 4.3, 4.4, 5.1, 5.2, 5.3, 5.4_

.kiro/steering/Browser-MCP.md

@@ -1,61 +0,0 @@
----
-inclusion: manual
----
-
-# Browser MCP Integration Guide
-
-## When to Use Browser MCP
-
-**Useful for development tasks:**
-- Testing web-based components locally
-- Validating responsive design behavior
-- Debugging UI issues in browser environment
-- Automated testing of web interfaces
-- Research and documentation gathering
-
-**YouTube Downloader App Context:**
-- Test local development server (http://localhost:8000)
-- Validate responsive behavior across screen sizes
-- Debug JavaScript functionality in browser
-- Test drag-and-drop URL functionality
-- Validate accessibility features
-
-## Tool Usage Protocol
-
-1. **navigate**: Open local development server or test URLs
-2. **get_clickable_elements**: Identify interactive elements for testing
-3. **click/hover/form_input_fill**: Simulate user interactions
-4. **screenshot**: Capture visual states for validation
-5. **get_markdown/get_text**: Extract content for analysis
-6. **close**: Clean up browser sessions
-
-## Development Workflow Integration
-
-**Local Testing:**
-```javascript
-// Start local server first
-python3 -m http.server 8000
-// Then use browser MCP to test
-navigate('http://localhost:8000')
-```
-
-**Testing Scenarios:**
-- URL paste and validation functionality
-- Video queue management interactions
-- Download progress visualization
-- Error state handling
-- Mobile responsive behavior
-
-## Security Considerations
-
-- Only navigate to trusted local development URLs
-- Avoid testing with real credentials or sensitive data
-- Use browser MCP for UI testing, not production interactions
-- Close browser sessions after testing
-
-## Performance Guidelines
-
-- Take screenshots for visual regression testing
-- Use `get_clickable_elements` sparingly (can be slow)
-- Close browser when testing is complete
-- Limit concurrent browser sessions

.kiro/steering/Context7 MCP.md

@@ -1,72 +0,0 @@
----
-inclusion: always
----
-
-# Context7 MCP Integration Guide
-
-## Mandatory Documentation Lookup
-
-**MUST use Context7 MCP before implementing:**
-- Binary execution (`child_process.spawn`, `execFile`)
-- Electron IPC patterns (main ↔ renderer communication)
-- File system operations (downloads, path validation)
-- Video processing (yt-dlp/ffmpeg command construction)
-- URL parsing and validation logic
-- Error handling patterns for async operations
-
-## Library Resolution
-
-**Required Context7 library searches:**
-- **Electron**: Search "electron" → Use exact library ID for IPC/security docs
-- **Node.js**: Search "node" → Core modules (fs, child_process, path, url, stream)
-- **yt-dlp**: Search "yt-dlp" → Command options, output formats, error codes
-- **ffmpeg**: Search "ffmpeg" → Codec parameters, conversion options
-
-## Implementation Protocol
-
-1. **Documentation first**: Query Context7 before writing any code
-2. **Security validation**: Look up input sanitization patterns
-3. **Error boundaries**: Research exception handling for subprocess operations
-4. **Platform compatibility**: Verify cross-platform behavior (Windows/macOS/Linux)
-5. **Performance patterns**: Check async/await best practices
-
-## Critical Documentation Areas
-
-### Process Management
-- `spawn()` vs `execFile()` selection criteria
-- stdio pipe configuration (`['pipe', 'pipe', 'pipe']`)
-- Process lifecycle (spawn → monitor → cleanup)
-- Signal handling and graceful termination
-- Command injection prevention
-
-### Electron Architecture
-- Preload script security (`contextIsolation`, `nodeIntegration: false`)
-- IPC channel design (`ipcMain.handle`, `ipcRenderer.invoke`)
-- Renderer sandboxing and privilege escalation prevention
-- File access through main process only
-
-### Binary Integration
-- yt-dlp format codes (`-f "best[height<=720]"`)
-- ffmpeg codec selection (`-c:v libx264`, `-c:a aac`)
-- Progress monitoring (stdout parsing, regex patterns)
-- Metadata extraction (`--dump-json`, `--no-download`)
-- Cookie file handling for authentication
-
-### Error Handling
-- Process exit codes and stderr parsing
-- Network timeout handling (5s max for API calls)
-- Graceful degradation when binaries missing
-- User-friendly error message mapping
-
-## Query Optimization
-
-**Effective searches:**
-- "electron contextIsolation preload security"
-- "child_process spawn stdio error handling node"
-- "yt-dlp format selection quality options"
-- "ffmpeg mp4 conversion parameters"
-
-**Avoid generic terms:**
-- "electron basics"
-- "node subprocess"
-- "video download"

.kiro/steering/Figma-MCP.md

@@ -1,56 +0,0 @@
----
-inclusion: manual
----
-
-# Figma MCP Integration Guide
-
-## When to Use Figma MCP
-
-**Mandatory for UI implementation:**
-- Converting Figma designs to code
-- Extracting design tokens and variables
-- Getting component specifications
-- Implementing responsive layouts
-- Ensuring design-code consistency
-
-**Use with YouTube Downloader App:**
-- Reference existing UI design at node ID `5:461` (GrabZilla2.0_UI)
-- Extract exact color values and spacing
-- Get component dimensions and layouts
-- Validate implementation against design
-
-## Tool Usage Protocol
-
-1. **get_metadata**: Get overview of design structure and node IDs
-2. **get_code**: Generate implementation code for specific components
-3. **get_variable_defs**: Extract design tokens (colors, spacing, typography)
-4. **get_screenshot**: Visual reference for implementation validation
-
-## Design System Integration
-
-**Extract from Figma:**
-- Color variables (--primary-blue: #155dfc, --bg-dark: #1d293d)
-- Component dimensions and spacing
-- Typography scales and weights
-- Icon specifications and SVG exports
-
-**Implementation Guidelines:**
-- Always use `get_code` after `get_metadata` for implementation
-- Reference specific node IDs for targeted component extraction
-- Validate responsive behavior against Figma breakpoints
-- Maintain exact color values from design system
-
-## Node ID Reference (GrabZilla 2.0)
-
-- Main Frame: `5:461` (GrabZilla2.0_UI)
-- Header: `5:463` (Container with logo and title)
-- Input Section: `5:483` (URL input and controls)
-- Video List: `5:537` (Table with video items)
-- Control Panel: `5:825` (Action buttons)
-
-## Quality Checkpoints
-
-- Visual output matches Figma design exactly
-- All design tokens are extracted and used
-- Responsive behavior follows design specifications
-- Component hierarchy matches Figma structure

.kiro/steering/Memory.md

@@ -1,54 +0,0 @@
----
-inclusion: always
----
-
-# Memory Management Protocol
-
-## Interaction Workflow
-
-### 1. Session Initialization
-- Begin each interaction with "Remembering..." and retrieve relevant context from memory
-- Identify the user (assume JoPa unless specified otherwise)
-- Load project-specific preferences and development patterns
-
-### 2. Context Tracking
-Monitor and capture information relevant to the YouTube downloader project:
-
-**Technical Preferences:**
-- Code style preferences (formatting, naming conventions)
-- Architecture decisions and rationale
-- Binary management approaches (yt-dlp/ffmpeg)
-- Testing strategies and debugging methods
-
-**Project Context:**
-- Feature requirements and acceptance criteria
-- Implementation decisions and trade-offs
-- Performance optimization preferences
-- Security considerations and patterns
-
-**Development Workflow:**
-- Preferred development tools and commands
-- File organization patterns
-- Documentation standards
-- Error handling approaches
-
-### 3. Memory Updates
-Create and maintain entities for:
-- **Components**: UI components, utilities, and their relationships
-- **Decisions**: Architecture choices, technology selections, design patterns
-- **Issues**: Bugs encountered, solutions applied, lessons learned
-- **Preferences**: User's coding style, preferred approaches, workflow patterns
-
-### 4. Relationship Mapping
-Connect entities with meaningful relations:
-- Component dependencies and interactions
-- Decision impact on implementation
-- Issue resolution patterns
-- Preference influence on code structure
-
-### 5. Context Retrieval
-After updates, refresh memory context to ensure:
-- Latest project state is available
-- User preferences are current
-- Technical decisions are consistent
-- Development patterns are maintained

.kiro/steering/Sequential-Thinking-MCP.md

@@ -1,125 +0,0 @@
----
-inclusion: always
----
-
-# Sequential Thinking MCP Integration Guide
-
-## Mandatory Use Cases for GrabZilla 2.1
-
-**ALWAYS use sequential thinking for:**
-
-### Binary Management Decisions
-- Local vs system binary execution patterns
-- Cross-platform binary path resolution (`./binaries/yt-dlp` vs `./binaries/yt-dlp.exe`)
-- Binary existence validation and fallback strategies
-- Command injection prevention in subprocess execution
-
-### Electron Security Architecture
-- IPC channel design between main and renderer processes
-- Preload script security patterns (`contextIsolation`, `nodeIntegration: false`)
-- File system access restrictions and sandboxing
-- User input sanitization before binary execution
-
-### Video Processing Workflows
-- yt-dlp + ffmpeg integration patterns
-- Quality/format selection logic with intelligent fallbacks
-- Progress monitoring and error handling for long-running processes
-- Concurrent download management (max 3 parallel)
-
-### Code Organization Decisions
-- File splitting when approaching 300-line limit
-- Module dependency resolution and circular dependency prevention
-- Component communication patterns (event-driven vs direct calls)
-- State management architecture for video queue
-
-## Decision Frameworks
-
-### Binary Execution Security Pattern
-```
-Thought 1: Analyze user input and identify potential injection vectors
-Thought 2: Design sanitization strategy for URLs, paths, and arguments
-Thought 3: Evaluate subprocess execution options (spawn vs execFile)
-Thought 4: Plan error handling for binary failures and timeouts
-Thought 5: Implement validation and testing strategy
-```
-
-### Performance Optimization Strategy
-```
-Thought 1: Identify performance bottlenecks (UI blocking, memory usage)
-Thought 2: Analyze async/await patterns and Promise handling
-Thought 3: Design non-blocking startup sequence
-Thought 4: Plan progress feedback and UI responsiveness
-Thought 5: Validate against performance benchmarks (2s startup, 100ms response)
-```
-
-### File Organization Analysis
-```
-Thought 1: Assess current file size and complexity
-Thought 2: Identify logical separation boundaries
-Thought 3: Design module export/import patterns
-Thought 4: Plan dependency injection and testing
-Thought 5: Validate against 300-line limit and maintainability
-```
-
-## Project-Specific Thought Patterns
-
-### URL Validation Architecture
-- Start with regex pattern analysis for YouTube/Vimeo URLs
-- Consider edge cases (playlists, age-restricted content, private videos)
-- Design validation pipeline with yt-dlp metadata fetching
-- Plan error handling for invalid/inaccessible URLs
-- End with testable validation functions
-
-### State Management Design
-- Begin with data flow analysis (user input → processing → UI updates)
-- Evaluate centralized vs distributed state patterns
-- Consider event-driven updates vs direct state mutation
-- Plan persistence and recovery strategies
-- Conclude with implementation and testing approach
-
-### Error Handling Strategy
-- Start with error categorization (network, binary, user input, system)
-- Design user-friendly error message mapping
-- Plan graceful degradation when dependencies unavailable
-- Consider retry strategies and exponential backoff
-- End with comprehensive error boundary implementation
-
-## Quality Gates
-
-### Security Validation
-- All user inputs sanitized before subprocess execution
-- File paths validated against directory traversal attacks
-- Binary execution uses relative paths only (`./binaries/`)
-- IPC channels implement proper privilege separation
-
-### Performance Standards
-- UI remains interactive during all operations
-- Background tasks use async patterns with proper error handling
-- Memory usage scales linearly with video queue size
-- Network operations timeout within 5 seconds
-
-### Code Quality Metrics
-- Functions under 50 lines with single responsibility
-- Files under 300 lines with logical module boundaries
-- All async operations wrapped in try-catch blocks
-- JSDoc documentation for all public functions
-
-## Integration with Development Workflow
-
-### Before Implementation
-1. Use sequential thinking to analyze requirements
-2. Design architecture with security and performance considerations
-3. Plan testing strategy and edge case handling
-4. Validate against project conventions and file size limits
-
-### During Development
-- Question assumptions about binary availability and permissions
-- Consider cross-platform compatibility at each step
-- Validate error handling paths and user experience
-- Ensure code organization follows modular patterns
-
-### After Implementation
-- Review solution against original problem requirements
-- Test edge cases and failure scenarios
-- Validate performance against benchmarks
-- Document decisions and rationale for future reference

.kiro/steering/break_300lines.md

@@ -1,227 +0,0 @@
----
-inclusion: always
----
-
-# Code Organization and Documentation Standards
-
-## File Size and Modularity Rules
-
-### Maximum File Length
-- **Hard limit**: 300 lines of code per file (excluding comments and whitespace)
-- **Recommended**: 200 lines or fewer for optimal maintainability
-- **Exception**: Configuration files and data structures may exceed this limit
-
-### File Splitting Strategy
-When a file exceeds 300 lines, split using these patterns:
-
-#### JavaScript Files
-```javascript
-// Original: scripts/app.js (400+ lines)
-// Split into:
-scripts/
-├── app.js              // Main application entry (< 100 lines)
-├── components/
-│   ├── header.js       // Header component logic
-│   ├── inputSection.js // URL input and configuration
-│   ├── videoList.js    // Video queue management
-│   └── controlPanel.js // Download controls
-├── utils/
-│   ├── urlParser.js    // URL validation and extraction
-│   ├── binaryManager.js // yt-dlp/ffmpeg execution
-│   └── stateManager.js // Application state management
-└── constants/
-    └── config.js       // Application constants
-```
-
-#### CSS Files
-```css
-/* Original: styles/main.css (500+ lines) */
-/* Split into: */
-styles/
-├── main.css           // Import all other files
-├── variables.css      // CSS custom properties
-├── components/
-│   ├── header.css     // Header component styles
-│   ├── input.css      // Input section styles
-│   └── video-list.css // Video list styles
-└── utilities/
-    └── helpers.css    // Utility classes
-```
-
-### Module Export Patterns
-```javascript
-// Use consistent export patterns for split modules
-// utils/urlParser.js
-export const validateYouTubeUrl = (url) => { /* ... */ };
-export const extractVideoId = (url) => { /* ... */ };
-export default { validateYouTubeUrl, extractVideoId };
-
-// Import in main file
-import urlParser, { validateYouTubeUrl } from './utils/urlParser.js';
-```
-
-## Documentation Requirements
-
-### Function Documentation
-Every function MUST include JSDoc comments:
-
-```javascript
-/**
- * Downloads a video using yt-dlp binary with specified quality and format
- * @param {Object} video - Video object containing url, quality, format
- * @param {string} video.url - YouTube/Vimeo URL to download
- * @param {string} video.quality - Video quality (480p, 720p, 1080p, 4K)
- * @param {string} video.format - Output format (mp4, m4a, mp3)
- * @param {string} savePath - Directory path for downloaded file
- * @param {Function} progressCallback - Called with download progress (0-100)
- * @returns {Promise<Object>} Download result with success status and file path
- * @throws {Error} When binary not found or download fails
- */
-async function downloadVideo(video, savePath, progressCallback) {
-  // Implementation...
-}
-```
-
-### Class Documentation
-```javascript
-/**
- * Manages video download queue and state
- * Handles adding, removing, and processing video downloads
- */
-class VideoManager {
-  /**
-   * Creates new VideoManager instance
-   * @param {Object} config - Configuration object
-   * @param {string} config.defaultQuality - Default video quality
-   * @param {string} config.defaultFormat - Default output format
-   */
-  constructor(config) {
-    // Implementation...
-  }
-}
-```
-
-### Component Documentation
-Each UI component must have header documentation:
-
-```javascript
-/**
- * INPUT SECTION COMPONENT
- * 
- * Handles URL input, configuration settings, and file selection
- * 
- * Features:
- * - Multi-line URL textarea with validation
- * - Quality/format dropdown selectors
- * - Save path selection with file browser
- * - Cookie file selection for authentication
- * 
- * Dependencies:
- * - urlParser.js for URL validation
- * - binaryManager.js for yt-dlp integration
- * 
- * State Management:
- * - Updates appState.config on setting changes
- * - Validates URLs before adding to queue
- */
-```
-
-### File Header Documentation
-Every JavaScript file must start with:
-
-```javascript
-/**
- * @fileoverview Brief description of file purpose
- * @author GrabZilla Development Team
- * @version 2.1.0
- * @since 2024-01-01
- */
-```
-
-## Code Quality Standards
-
-### Naming Conventions
-- **Functions**: camelCase with descriptive verbs (`downloadVideo`, `validateUrl`)
-- **Variables**: camelCase with descriptive nouns (`videoQueue`, `downloadProgress`)
-- **Constants**: UPPER_SNAKE_CASE (`MAX_CONCURRENT_DOWNLOADS`, `DEFAULT_QUALITY`)
-- **Classes**: PascalCase (`VideoManager`, `DownloadQueue`)
-- **Files**: kebab-case (`video-manager.js`, `url-parser.js`)
-
-### Error Handling Documentation
-```javascript
-/**
- * Error handling strategy for binary execution
- * 
- * @throws {BinaryNotFoundError} When yt-dlp/ffmpeg binary missing
- * @throws {InvalidUrlError} When URL format is invalid
- * @throws {NetworkError} When download fails due to network issues
- * @throws {PermissionError} When insufficient file system permissions
- */
-```
-
-### Performance Documentation
-Include performance considerations:
-
-```javascript
-/**
- * Processes video queue with configurable concurrency
- * 
- * Performance Notes:
- * - Maximum 3 concurrent downloads to prevent system overload
- * - Uses streaming for large file downloads
- * - Implements exponential backoff for failed downloads
- * - Memory usage scales linearly with queue size
- */
-```
-
-## Architecture Documentation
-
-### State Management Documentation
-```javascript
-/**
- * APPLICATION STATE STRUCTURE
- * 
- * Central state object managing all application data
- * 
- * Structure:
- * - videos: Array of video objects in download queue
- * - config: User preferences and settings
- * - ui: Interface state and user interactions
- * 
- * Mutation Rules:
- * - Only modify state through designated functions
- * - Emit events on state changes for UI updates
- * - Validate all state changes before applying
- */
-```
-
-### Component Interaction Documentation
-```javascript
-/**
- * COMPONENT COMMUNICATION PATTERN
- * 
- * Event-driven architecture using custom events:
- * 
- * Events Emitted:
- * - 'video-added': When new video added to queue
- * - 'download-progress': Progress updates during download
- * - 'download-complete': When video download finishes
- * 
- * Events Listened:
- * - 'config-changed': Update component when settings change
- * - 'queue-updated': Refresh display when queue modified
- */
-```
-
-## Implementation Checklist
-
-When adding new code, ensure:
-
-- [ ] Function has complete JSDoc documentation
-- [ ] File size remains under 300 lines
-- [ ] Error handling is documented and implemented
-- [ ] Performance implications are considered
-- [ ] Component interactions are documented
-- [ ] Naming conventions are followed
-- [ ] Code is split into logical modules
-- [ ] Dependencies are clearly documented

.kiro/steering/macOS UI Guidelines.md

@@ -1,94 +0,0 @@
----
-inclusion: fileMatch
-fileMatchPattern: ['index.html', 'styles/**/*.css', 'scripts/**/*.js']
----
-
-# macOS UI Design System
-
-## Required Color Variables
-
-Always use these exact CSS custom properties - never hardcode colors:
-
-```css
-/* Primary Colors */
---primary-blue: #155dfc;
---success-green: #00a63e;
---error-red: #e7000b;
-
-/* Backgrounds */
---bg-dark: #1d293d;
---header-dark: #0f172b;
---card-bg: #314158;
---border-color: #45556c;
-
-/* Text */
---text-primary: #ffffff;
---text-secondary: #cad5e2;
---text-muted: #90a1b9;
---text-disabled: #62748e;
-```
-
-## Layout Standards
-
-- **Header**: 60px height, dark background (#0f172b)
-- **Spacing**: 16px base unit, 8px tight, 24px sections
-- **Grid**: CSS Grid for layout, Flexbox for alignment
-- **Minimum width**: 800px
-- **Border radius**: 8px buttons, 6px inputs
-
-## Component Specifications
-
-### Buttons
-- **Primary**: Blue bg, white text, 36px height, 16px horizontal padding
-- **Secondary**: Transparent bg, blue border and text
-- **Destructive**: Red bg, white text
-- **Hover**: 10% darker, 150ms transition
-
-### Form Elements
-- **Inputs**: Card background (#314158), border (#45556c), 6px radius
-- **Focus**: Blue border (#155dfc)
-- **Placeholders**: Muted text (#90a1b9)
-
-### Status Indicators
-- **Success**: Green (#00a63e) + checkmark
-- **Error**: Red (#e7000b) + warning icon
-- **Progress**: Blue (#155dfc) + spinner
-- **Pending**: Muted (#90a1b9) + clock
-
-## Typography
-- **Base size**: 14px
-- **Headers**: 18px sections, 24px page titles
-- **Small text**: 12px helpers, 10px labels
-- **Weights**: 400 regular, 500 medium, 600 semibold
-
-## Code Style Rules
-
-### CSS
-- Use CSS custom properties for all colors and spacing
-- Mobile-first responsive design
-- BEM naming for custom components
-- Tailwind utilities preferred over custom CSS
-
-### HTML
-- Semantic HTML5 elements (header, main, section)
-- Proper ARIA labels for accessibility
-- Data attributes for JavaScript hooks (not classes)
-
-### JavaScript
-- Separate styling from behavior logic
-- Progressive enhancement patterns
-- Handle reduced motion preferences
-- Use semantic event delegation
-
-## Animation Standards
-- **Micro-interactions**: 100-150ms (hover, focus)
-- **Transitions**: 200-300ms (modals, dropdowns)
-- **Ease-out**: For entrances and hovers
-- **Ease-in**: For exits and dismissals
-
-## Accessibility Requirements
-- 4.5:1 color contrast minimum
-- Visible focus indicators
-- Logical tab order
-- ARIA labels for complex elements
-- Keyboard navigation support (Enter, Space, Escape, Arrows)

.kiro/steering/product.md

@@ -1,112 +0,0 @@
----
-inclusion: always
----
-
-# GrabZilla 2.1 - Product Conventions
-
-Electron-based YouTube/Vimeo downloader with professional video management interface.
-
-## CRITICAL RULES (Must Follow)
-
-### Binary Management
-- **ALWAYS use relative paths**: `./binaries/yt-dlp` and `./binaries/ffmpeg`
-- **NEVER use system binaries**: No global `yt-dlp` or `ffmpeg` commands
-- **Platform detection**: Append `.exe` on Windows: `process.platform === 'win32' ? '.exe' : ''`
-- **Existence check**: Verify binary files exist before spawning processes
-- **Error handling**: Graceful fallback when binaries are missing
-
-### Security Requirements
-- **URL validation**: Regex validation before passing URLs to yt-dlp
-- **Command injection prevention**: Sanitize all user inputs and file paths
-- **Cookie file validation**: Check file format and permissions
-- **Path sanitization**: Validate download paths and prevent directory traversal
-
-### Performance Standards
-- **Non-blocking startup**: UI interactive immediately, background tasks async
-- **Network timeouts**: 5-second maximum for API calls and version checks
-- **Offline functionality**: Core features work without internet
-- **UI responsiveness**: Progress updates every 500ms maximum
-- **Memory efficiency**: Handle large video queues without memory leaks
-
-## Architecture Patterns
-
-### Component Structure
-```
-App (scripts/app.js)
-├── Header Component (branding, window controls)
-├── InputSection Component (URL input, configuration)
-├── VideoList Component (queue display, status management)
-└── ControlPanel Component (bulk actions, download controls)
-```
-
-### Required State Management
-```javascript
-// Mandatory state structure - do not deviate
-const appState = {
-  videos: [],              // Array of video objects with id, url, title, status
-  config: {
-    quality: '720p',       // Default quality setting
-    format: 'mp4',         // Default output format
-    savePath: '',          // User-selected download directory
-    cookieFile: null       // Path to cookie file for auth
-  },
-  ui: {
-    isDownloading: false,  // Global download state
-    selectedVideos: [],    // Currently selected video IDs
-    updateAvailable: false // Binary update status
-  }
-};
-```
-
-### Code Style Enforcement
-- **Vanilla JavaScript ONLY**: No React, Vue, or other frameworks
-- **Event delegation**: Use `addEventListener` on parent elements
-- **Async/await pattern**: For all Promise-based operations
-- **Error boundaries**: Try-catch blocks around all async operations
-- **Function modularity**: Single responsibility, pure functions when possible
-- **ES6+ syntax**: Use modern JavaScript features (const/let, arrow functions, destructuring)
-
-## Binary Execution Standards
-```javascript
-// REQUIRED pattern for all binary execution
-const getBinaryPath = (name) => {
-  const ext = process.platform === 'win32' ? '.exe' : '';
-  return `./binaries/${name}${ext}`;
-};
-
-// Always use this pattern for spawning processes
-const { spawn } = require('child_process');
-const process = spawn(getBinaryPath('yt-dlp'), args, {
-  stdio: ['pipe', 'pipe', 'pipe'],
-  cwd: process.cwd() // Ensure correct working directory
-});
-```
-
-## URL Processing Rules
-- **Supported sources**: YouTube, Vimeo (primary), YouTube playlists
-- **URL patterns**: Use regex validation before processing
-- **Multi-line parsing**: Extract URLs from pasted text blocks
-- **Deduplication**: Remove duplicate URLs automatically
-- **Metadata fetching**: Get title, duration, thumbnail via yt-dlp --dump-json
-
-## Quality & Format Standards
-- **Default quality**: 720p (best balance of size/quality)
-- **Quality options**: 480p, 720p, 1080p, 4K with intelligent fallback
-- **Default format**: MP4 (H.264 codec for compatibility)
-- **Format options**: MP4, M4A (audio only), MP3 (converted audio)
-- **Fallback strategy**: If requested quality unavailable, use best available
-
-## UI/UX Requirements
-- **Design system**: Dark theme with exact Figma color variables
-- **Responsive layout**: CSS Grid and Flexbox, mobile-first approach
-- **Accessibility**: ARIA labels, keyboard navigation, screen reader support
-- **Visual feedback**: Loading spinners, progress bars, status badges
-- **Error handling**: User-friendly error messages with actionable solutions
-- **Drag & drop**: Reorder videos in queue, drop URLs to add
-
-## Performance Benchmarks
-- **Startup time**: UI interactive within 2 seconds
-- **UI responsiveness**: All interactions respond within 100ms
-- **Memory management**: Efficient handling of 100+ video queues
-- **Download optimization**: Parallel downloads with configurable concurrency
-- **Background tasks**: Version checks and updates run asynchronously

.kiro/steering/structure.md

@@ -1,101 +0,0 @@
-# Project Structure
-
-## Directory Organization
-
-```
-/
-├── .kiro/                      # Kiro configuration and specs
-│   ├── specs/                  # Feature specifications
-│   │   └── youtube-downloader-app/
-│   │       ├── requirements.md # User stories and acceptance criteria
-│   │       ├── design.md      # Architecture and component design
-│   │       └── tasks.md       # Implementation tasks breakdown
-│   └── steering/              # AI assistant guidance documents
-├── src/                       # Electron main process files
-│   ├── main.js               # Electron main process
-│   └── preload.js            # Preload script for secure IPC
-├── binaries/                  # Local executable binaries
-│   ├── yt-dlp                # YouTube downloader binary (macOS/Linux)
-│   ├── yt-dlp.exe            # YouTube downloader binary (Windows)
-│   ├── ffmpeg                # Video conversion binary (macOS/Linux)
-│   ├── ffmpeg.exe            # Video conversion binary (Windows)
-│   └── README.md             # Binary installation instructions
-├── index.html                # Main application entry point
-├── styles/                   # CSS and styling files
-│   └── main.css             # Custom styles and Tailwind overrides
-├── scripts/                  # JavaScript application logic
-│   └── app.js               # Main application JavaScript (renderer process)
-├── assets/                   # Static assets
-│   └── icons/               # SVG icons and images
-├── tests/                    # Test files
-├── package.json              # Node.js dependencies and scripts
-└── vitest.config.js          # Test configuration
-```
-
-## Component Architecture
-
-### Main Application Components
-
-1. **Header Component**
-   - App branding and title
-   - Window control buttons (minimize, maximize, close)
-   - Dark header styling with blue accent
-
-2. **InputSection Component**
-   - URL textarea for YouTube/Vimeo links
-   - Action buttons (Add Video, Import URLs)
-   - Configuration controls (save path, quality, format)
-   - Filename pattern input
-
-3. **VideoList Component**
-   - Grid-based table layout
-   - Video items with thumbnails, titles, duration
-   - Interactive dropdowns for quality/format selection
-   - Status badges and progress indicators
-   - Drag-and-drop reordering
-
-4. **ControlPanel Component**
-   - Bulk action buttons (Clear List, Cancel Downloads)
-   - Primary download action button
-   - Status message area
-
-## File Naming Conventions
-
-- **HTML**: Use semantic, descriptive names (index.html)
-- **CSS**: Kebab-case for files (main.css, components.css)
-- **JavaScript**: Camel-case for files (app.js, videoManager.js)
-- **Assets**: Descriptive names with format (logo.svg, download-icon.svg)
-
-## Code Organization Patterns
-
-### HTML Structure
-- Semantic HTML5 elements (header, main, section, article)
-- BEM-style class naming for custom components
-- Tailwind utility classes for styling
-- Proper ARIA labels for accessibility
-
-### CSS Organization
-- Custom CSS variables for Figma design tokens
-- Component-specific styles grouped together
-- Responsive design with mobile-first approach
-- Tailwind utility classes preferred over custom CSS
-
-### JavaScript Structure
-- Modular functions for different features
-- State management with plain JavaScript objects
-- Event-driven architecture with proper event delegation
-- Clear separation of concerns (data, UI, business logic)
-
-## Development Workflow
-
-1. **Specs First**: All features defined in `.kiro/specs/` before implementation
-2. **Component-Based**: Build individual components before integration
-3. **Design System**: Use exact Figma variables and measurements
-4. **Progressive Enhancement**: Core functionality works without JavaScript
-5. **Testing**: Manual testing in multiple browsers and screen sizes
-
-## Configuration Files
-
-- **`.vscode/settings.json`**: VSCode workspace configuration
-- **`.kiro/specs/`**: Feature specifications and requirements
-- **`.kiro/steering/`**: AI assistant guidance documents

.kiro/steering/tech.md

@@ -1,270 +0,0 @@
-# Technology Stack
-
-## Frontend Technologies
-
-- **HTML5**: Semantic structure with modern web standards
-- **Tailwind CSS**: Utility-first CSS framework for styling
-- **Vanilla JavaScript**: Pure JavaScript for application logic and DOM manipulation
-- **CSS Grid & Flexbox**: Layout systems for responsive design
-- **SVG Icons**: Vector graphics for UI elements
-
-## Backend/System Dependencies
-
-- **yt-dlp**: Primary tool for downloading YouTube/Vimeo videos (local binary)
-- **ffmpeg**: Video conversion and processing engine (local binary)
-- **Node.js/Electron**: For system integration and subprocess management
-- **Local Binary Management**: Both yt-dlp and ffmpeg must be bundled with the app, not system-wide
-
-## Styling & Design System
-
-- **Tailwind CSS**: Primary styling framework
-- **Custom CSS Variables**: Exact color values from Figma design system
-- **Dark Theme**: Professional dark UI with specific color palette
-- **Responsive Design**: Mobile-first approach with breakpoints
-
-## Key Design Variables
-
-```css
-/* Primary Colors */
---primary-blue: #155dfc
---success-green: #00a63e
---error-red: #e7000b
-
-/* Background Colors */
---bg-dark: #1d293d
---header-dark: #0f172b
---card-bg: #314158
---border-color: #45556c
-
-/* Text Colors */
---text-primary: #ffffff
---text-secondary: #cad5e2
---text-muted: #90a1b9
---text-disabled: #62748e
-```
-
-## Architecture Patterns
-
-- **Component-Based Structure**: Modular components (Header, InputSection, VideoList, ControlPanel)
-- **State Management**: Centralized application state with JavaScript objects
-- **Event-Driven**: DOM event handling for user interactions
-- **Progressive Enhancement**: Core functionality works without JavaScript
-
-## Data Models
-
-- **Video Object**: Structured data for video items with properties like id, url, title, status, progress
-- **App State**: Global application state management for videos array and configuration
-
-## URL Parsing Requirements
-
-- **Multi-line Text Processing**: Parse pasted text containing multiple URLs mixed with other content
-- **URL Extraction**: Regex patterns to identify YouTube and Vimeo URLs from text blocks
-- **Supported URL Formats**:
-  - YouTube: `youtube.com/watch?v=`, `youtu.be/`, `youtube.com/playlist?list=`
-  - Vimeo: `vimeo.com/[video-id]`, `player.vimeo.com/video/[video-id]`
-- **Text Cleaning**: Remove non-URL content and extract only valid video links
-
-## Cookie File Integration
-
-- **Age-Restricted Content**: Cookie files enable downloading of age-restricted YouTube videos
-- **Authentication**: Use browser cookies to authenticate with YouTube/Vimeo accounts
-- **File Selection**: "Select File" button allows users to choose cookie files (.txt format)
-- **Cookie Formats**: Support Netscape cookie format (exported from browsers)
-- **Security**: Store cookie file path securely, validate file format before use
-
-## Local Binary Management
-
-### Binary Distribution Strategy
-- **Portable Binaries**: Include yt-dlp and ffmpeg executables in app directory
-- **Platform-Specific**: Bundle appropriate binaries for Windows, macOS, Linux
-- **Version Management**: Track current versions and check for updates
-- **Auto-Update**: "Update Dependencies" button downloads latest versions
-
-### Directory Structure for Binaries
-```
-/
-├── binaries/
-│   ├── yt-dlp          # or yt-dlp.exe on Windows
-│   ├── ffmpeg          # or ffmpeg.exe on Windows
-│   └── versions.json   # Track current binary versions
-```
-
-### Version Checking
-```bash
-# Check yt-dlp version (local binary)
-./binaries/yt-dlp --version
-
-# Check ffmpeg version (local binary)  
-./binaries/ffmpeg -version
-
-# Compare with latest releases via GitHub API
-# yt-dlp: https://api.github.com/repos/yt-dlp/yt-dlp/releases/latest
-# ffmpeg: https://api.github.com/repos/FFmpeg/FFmpeg/releases/latest
-```
-
-## Development Commands
-
-```bash
-# Serve locally (using Python's built-in server)
-python3 -m http.server 8000
-
-# Or using Node.js http-server (if installed)
-npx http-server
-
-# Open in browser
-open http://localhost:8000
-
-# Test yt-dlp installation
-yt-dlp --version
-
-# Test ffmpeg installation
-ffmpeg -version
-```
-
-## Key Integration Commands (Local Binaries)
-
-```bash
-# yt-dlp: Download video with specific quality (using local binary)
-./binaries/yt-dlp -f "best[height<=720]" [URL]
-
-# yt-dlp: Download with cookie file for age-restricted content
-./binaries/yt-dlp --cookies [COOKIE_FILE_PATH] -f "best[height<=720]" [URL]
-
-# yt-dlp: Get video info without downloading
-./binaries/yt-dlp --dump-json [URL]
-
-# yt-dlp: Get video info with cookies
-./binaries/yt-dlp --cookies [COOKIE_FILE_PATH] --dump-json [URL]
-
-# ffmpeg: Convert video format (using local binary)
-./binaries/ffmpeg -i input.mp4 -c:v libx264 output.mp4
-
-# ffmpeg: Extract audio only
-./binaries/ffmpeg -i input.mp4 -vn -acodec copy output.m4a
-```
-
-## Dependency Update System
-
-### Startup Version Check (Non-Blocking)
-- **Background Check**: Automatically check for updates on app startup
-- **Async Operation**: Version checking runs in background without blocking UI
-- **Graceful Fallback**: App remains fully functional even if version check fails
-- **Cache Strategy**: Use cached version info if network is unavailable
-- **Timeout Handling**: 5-second timeout for version check requests
-
-### Update Dependencies Button Behavior
-- **Visual Indicator**: Highlight button when updates are available
-- **Manual Updates**: User-initiated download and replacement of binaries
-- **Update Process**: Download and replace binaries when user clicks update
-- **Progress Feedback**: Show download progress for binary updates
-
-### Version Tracking
-```json
-// versions.json example
-{
-  "yt-dlp": {
-    "current": "2023.12.30",
-    "latest": "2024.01.15",
-    "updateAvailable": true,
-    "lastChecked": "2024-01-16T10:30:00Z"
-  },
-  "ffmpeg": {
-    "current": "6.0",
-    "latest": "6.1", 
-    "updateAvailable": true,
-    "lastChecked": "2024-01-16T10:30:00Z"
-  },
-  "checkFrequency": "daily"
-}
-```
-
-### Implementation Strategy
-```javascript
-// Non-blocking startup check
-async function checkVersionsOnStartup() {
-  try {
-    // Don't await - let it run in background
-    checkForUpdates().then(updateUI).catch(handleError);
-    
-    // App continues loading immediately
-    initializeApp();
-  } catch (error) {
-    // App works normally even if version check fails
-    console.warn('Version check failed:', error);
-    initializeApp();
-  }
-}
-```
-
-## File Structure
-
-```
-/
-├── index.html          # Main application file
-├── styles/
-│   └── main.css       # Custom CSS and Tailwind overrides
-├── scripts/
-│   └── app.js         # Main application JavaScript
-├── assets/
-│   └── icons/         # SVG icons and images
-├── binaries/          # Local executable binaries
-│   ├── yt-dlp         # YouTube downloader binary
-│   ├── ffmpeg         # Video conversion binary
-│   └── versions.json  # Version tracking file
-└── downloads/         # Default download directory
-```
-
-## URL Parsing Implementation
-
-### Regex Patterns for URL Extraction
-
-```javascript
-// YouTube URL patterns
-const youtubeRegex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/g;
-
-// Vimeo URL patterns  
-const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?(?:vimeo\.com\/|player\.vimeo\.com\/video\/)(\d+)/g;
-
-// Playlist patterns
-const playlistRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/playlist\?list=([a-zA-Z0-9_-]+)/g;
-```
-
-### Text Processing Strategy
-
-1. **Split by lines**: Process pasted content line by line
-2. **Extract URLs**: Use regex to find all video URLs in each line
-3. **Validate URLs**: Ensure extracted URLs are accessible via yt-dlp
-4. **Deduplicate**: Remove duplicate URLs from the list
-5. **Metadata Fetch**: Use yt-dlp to get video title, duration, thumbnail
-
-## Browser Support
-
-- Modern browsers with ES6+ support
-- Chrome 60+, Firefox 55+, Safari 12+, Edge 79+
-- Mobile browsers (iOS Safari, Chrome Mobile)
-
-## Application Startup Behavior
-
-### Non-Blocking Initialization
-1. **Immediate UI Load**: App interface loads and becomes interactive immediately
-2. **Background Tasks**: Version checking runs asynchronously in background
-3. **Progressive Enhancement**: Update notifications appear when background check completes
-4. **Offline Resilience**: App works fully even without internet connection
-5. **Error Tolerance**: Network failures don't prevent app from starting
-
-### Startup Sequence
-```javascript
-// App startup flow
-1. Load UI components → User can interact immediately
-2. Initialize local binaries → Check if yt-dlp/ffmpeg exist
-3. Background version check → Async API calls (with timeout)
-4. Update UI indicators → Show update button if needed
-5. Cache results → Store version info for next startup
-```
-
-## System Integration Notes
-
-- **Desktop App**: Consider Electron wrapper for better system integration
-- **Web App**: Use backend API to interface with yt-dlp and ffmpeg
-- **Security**: Validate all URLs before processing to prevent command injection
-- **Performance**: Prioritize UI responsiveness over background operations