chore: initialize project repository with core extension files

- Add .gitignore to exclude node_modules, dist, logs, and system files - Add comprehensive project documentation including README, deployment guide, and development setup - Add .kiro project specifications for amazon-product-bar-extension, appwrite-cloud-storage, appwrite-userid-repair, blacklist-feature, and enhanced-item-management - Add .kiro steering documents for product, structure, styling, and tech guidelines - Add VSCode settings configuration for consistent development environment - Add manifest.json and babel/vite configuration for extension build setup - Add complete source code implementation including AppWrite integration, storage managers, UI components, and services - Add comprehensive test suite with Jest configuration and 30+ test files covering all major modules - Add test HTML files for integration testing and validation - Add coverage reports and build validation scripts - Add AppWrite setup and repair documentation for database schema management - Add migration guides and responsive accessibility implementation documentation - Establish foundation for Amazon product bar extension with full feature set including blacklist management, enhanced item workflows, and real-time synchronization
2026-01-12 17:46:42 +01:00
commit 216a972fef
180 changed files with 88019 additions and 0 deletions
--- a/.kiro/specs/enhanced-item-management/design.md
+++ b/.kiro/specs/enhanced-item-management/design.md
@@ -0,0 +1,787 @@
+# Design Document: Enhanced Item Management
+
+## Overview
+
+Diese Erweiterung baut auf der bestehenden Amazon Product Bar Extension auf und fügt automatische Produktdatenextraktion, KI-basierte Titel-Customization mit Mistral-AI und erweiterte Item-Verwaltung hinzu. Das System extrahiert automatisch Titel und Preis von Amazon-Produkten, generiert drei KI-Titelvorschläge über Mistral-AI und ermöglicht die Auswahl per Klick. Titel und Preis werden als Fremdschlüssel für weitere Aktionen bereitgestellt.
+
+## Architecture
+
+```mermaid
+graph TD
+    A[Enhanced Item Management] --> B[Settings Panel]
+    A --> C[Product Extractor]
+    A --> D[Mistral AI Service]
+    A --> E[Title Selection UI]
+    A --> F[Enhanced Storage]
+    
+    B --> H[API Key Manager]
+    C --> I[Amazon Page Parser]
+    C --> J[Price Extractor]
+    C --> K[Title Extractor]
+    
+    D --> L[API Client]
+    D --> M[Response Parser]
+    D --> N[Error Handler]
+    
+    E --> O[Suggestion Renderer]
+    E --> P[Selection Handler]
+    
+    F --> Q[Enhanced Item Model]
+    F --> R[Local Storage Manager]
+    
+    H --> R
+    I --> J
+    I --> K
+    L --> M
+    M --> O
+    P --> Q
+    Q --> R
+```
+
+Die Architektur erweitert die bestehende Extension um:
+1. **Settings Panel** - API-Key-Verwaltung und Konfiguration
+2. **Product Extractor** - Automatische Datenextraktion von Amazon
+3. **Mistral AI Service** - KI-Integration für Titel-Generierung
+4. **Title Selection UI** - Interface für Titelauswahl
+5. **Enhanced Storage** - Erweiterte Datenspeicherung
+
+## Components and Interfaces
+
+### 1. Enhanced Item Model
+
+```typescript
+interface EnhancedItem {
+  id: string;                    // Eindeutige Item-ID
+  amazonUrl: string;             // Amazon-Produkt-URL
+  originalTitle: string;         // Ursprünglich extrahierter Titel
+  customTitle: string;           // Ausgewählter KI-generierter Titel
+  price: string;                 // Extrahierter Preis
+  currency: string;              // Währung (EUR, USD, etc.)
+  titleSuggestions: string[];    // Drei KI-generierte Vorschläge
+  createdAt: Date;               // Erstellungszeitpunkt
+  updatedAt: Date;               // Letzte Aktualisierung
+}
+```
+
+### 2. Product Extractor
+
+```typescript
+interface ProductExtractor {
+  extractProductData(url: string): Promise<ProductData>;
+  extractTitle(htmlContent: string): string | null;
+  extractPrice(htmlContent: string): PriceData | null;
+  validateAmazonUrl(url: string): boolean;
+}
+
+interface ProductData {
+  title: string;
+  price: string;
+  currency: string;
+  imageUrl?: string;
+  asin?: string;
+}
+
+interface PriceData {
+  amount: string;
+  currency: string;
+  formatted: string;
+}
+```
+
+### 3. Mistral AI Service
+
+```typescript
+interface MistralAIService {
+  generateTitleSuggestions(originalTitle: string, apiKey: string): Promise<string[]>;
+  validateApiKey(apiKey: string): Promise<boolean>;
+  testConnection(apiKey: string): Promise<ConnectionStatus>;
+}
+
+interface ConnectionStatus {
+  isValid: boolean;
+  error?: string;
+  responseTime?: number;
+}
+
+interface MistralRequest {
+  model: string;
+  messages: MistralMessage[];
+  max_tokens: number;
+  temperature: number;
+}
+
+interface MistralMessage {
+  role: 'system' | 'user';
+  content: string;
+}
+
+interface MistralResponse {
+  choices: {
+    message: {
+      content: string;
+    };
+  }[];
+}
+```
+
+### 4. Settings Panel Manager
+
+```typescript
+interface SettingsPanelManager {
+  createSettingsPanel(): HTMLElement;
+  showSettings(): void;
+  hideSettings(): void;
+  saveApiKey(apiKey: string): Promise<void>;
+  getApiKey(): Promise<string | null>;
+  testApiKey(apiKey: string): Promise<boolean>;
+  maskApiKey(apiKey: string): string;
+}
+
+interface SettingsData {
+  mistralApiKey?: string;
+  autoExtractEnabled: boolean;
+  defaultTitleSelection: 'first' | 'original';
+  maxRetries: number;
+  timeoutSeconds: number;
+}
+```
+
+### 5. Title Selection UI Manager
+
+```typescript
+interface TitleSelectionManager {
+  createSelectionUI(suggestions: string[], originalTitle: string): HTMLElement;
+  showTitleSelection(container: HTMLElement): void;
+  hideTitleSelection(): void;
+  onTitleSelected(callback: (selectedTitle: string) => void): void;
+  highlightSelection(index: number): void;
+}
+
+interface TitleOption {
+  text: string;
+  type: 'ai-generated' | 'original';
+  index: number;
+  isSelected: boolean;
+}
+```
+
+### 6. Enhanced Storage Manager
+
+```typescript
+interface EnhancedStorageManager {
+  saveEnhancedItem(item: EnhancedItem): Promise<void>;
+  getEnhancedItems(): Promise<EnhancedItem[]>;
+  getEnhancedItem(id: string): Promise<EnhancedItem | null>;
+  updateEnhancedItem(id: string, updates: Partial<EnhancedItem>): Promise<void>;
+  deleteEnhancedItem(id: string): Promise<void>;
+  findItemByTitleAndPrice(title: string, price: string): Promise<EnhancedItem | null>;
+  migrateFromBasicItems(): Promise<void>;
+}
+```
+
+### 7. Enhanced Storage Manager
+
+### Enhanced Item Storage Structure
+
+```json
+{
+  "enhancedItems": {
+    "item_12345": {
+      "id": "item_12345",
+      "amazonUrl": "https://amazon.de/dp/B08N5WRWNW",
+      "originalTitle": "Samsung Galaxy S21 Ultra 5G Smartphone 128GB",
+      "customTitle": "Samsung Galaxy S21 Ultra - Premium 5G Flagship",
+      "price": "899.99",
+      "currency": "EUR",
+      "titleSuggestions": [
+        "Samsung Galaxy S21 Ultra - Premium 5G Flagship",
+        "Galaxy S21 Ultra: High-End Android Smartphone",
+        "Samsung S21 Ultra - Professional Mobile Device"
+      ],
+      "createdAt": "2024-01-15T10:30:00Z",
+      "updatedAt": "2024-01-15T10:30:00Z"
+    }
+  },
+  "settings": {
+    "mistralApiKey": "encrypted_api_key_here",
+    "autoExtractEnabled": true,
+    "defaultTitleSelection": "first",
+    "maxRetries": 3,
+    "timeoutSeconds": 10
+  }
+}
+```
+
+### Mistral AI Integration
+
+```typescript
+// Prompt Template für Titel-Generierung
+const TITLE_GENERATION_PROMPT = `
+Du bist ein Experte für E-Commerce-Produkttitel. 
+Erstelle 3 alternative, prägnante Produkttitel für folgendes Amazon-Produkt:
+
+Original-Titel: "{originalTitle}"
+
+Anforderungen:
+- Maximal 60 Zeichen pro Titel
+- Klar und beschreibend
+- Für deutsche Kunden optimiert
+- Keine Sonderzeichen oder Emojis
+- Fokus auf wichtigste Produktmerkmale
+
+Antworte nur mit den 3 Titeln, getrennt durch Zeilenwechsel.
+`;
+
+// API-Konfiguration
+const MISTRAL_CONFIG = {
+  baseUrl: 'https://api.mistral.ai/v1',
+  model: 'mistral-small-latest',
+  maxTokens: 200,
+  temperature: 0.7,
+  timeout: 10000
+};
+```
+
+### UI Components Structure
+
+```html
+<!-- Settings Panel -->
+<div class="enhanced-settings-panel">
+  <div class="settings-header">
+    <h2>Enhanced Item Management Settings</h2>
+    <button class="close-btn">×</button>
+  </div>
+  
+  <div class="settings-content">
+    <div class="api-key-section">
+      <label for="mistral-api-key">Mistral AI API Key:</label>
+      <div class="api-key-input-group">
+        <input type="password" id="mistral-api-key" placeholder="API Key eingeben...">
+        <button class="test-key-btn">Test</button>
+      </div>
+      <div class="api-key-status"></div>
+    </div>
+    
+    <div class="extraction-settings">
+      <label>
+        <input type="checkbox" id="auto-extract"> 
+        Automatische Extraktion aktivieren
+      </label>
+    </div>
+    
+    <div class="title-settings">
+      <label for="default-selection">Standard-Titelauswahl:</label>
+      <select id="default-selection">
+        <option value="first">Erster KI-Vorschlag</option>
+        <option value="original">Original-Titel</option>
+      </select>
+    </div>
+  </div>
+  
+  <div class="settings-footer">
+    <button class="save-settings-btn">Speichern</button>
+    <button class="cancel-btn">Abbrechen</button>
+  </div>
+</div>
+
+<!-- Title Selection UI -->
+<div class="title-selection-container">
+  <div class="title-selection-header">
+    <h3>Titel auswählen:</h3>
+    <div class="loading-indicator" style="display: none;">
+      <span>KI generiert Vorschläge...</span>
+    </div>
+  </div>
+  
+  <div class="title-options">
+    <div class="title-option ai-suggestion selected" data-index="0">
+      <span class="option-label">KI-Vorschlag 1:</span>
+      <span class="option-text">Samsung Galaxy S21 Ultra - Premium 5G Flagship</span>
+    </div>
+    <div class="title-option ai-suggestion" data-index="1">
+      <span class="option-label">KI-Vorschlag 2:</span>
+      <span class="option-text">Galaxy S21 Ultra: High-End Android Smartphone</span>
+    </div>
+    <div class="title-option ai-suggestion" data-index="2">
+      <span class="option-label">KI-Vorschlag 3:</span>
+      <span class="option-text">Samsung S21 Ultra - Professional Mobile Device</span>
+    </div>
+    <div class="title-option original-title" data-index="3">
+      <span class="option-label">Original:</span>
+      <span class="option-text">Samsung Galaxy S21 Ultra 5G Smartphone 128GB</span>
+    </div>
+  </div>
+  
+  <div class="selection-actions">
+    <button class="confirm-selection-btn">Auswahl bestätigen</button>
+    <button class="skip-ai-btn">Ohne KI fortfahren</button>
+  </div>
+</div>
+
+<!-- Enhanced Item List -->
+<div class="enhanced-item-list">
+  <div class="item-header">
+    <h2>Gespeicherte Items</h2>
+    <div class="add-item-form">
+      <input type="url" placeholder="Amazon-URL eingeben...">
+      <button class="extract-btn">Extrahieren</button>
+    </div>
+  </div>
+  
+  <div class="items-container">
+    <div class="enhanced-item" data-item-id="item_12345">
+      <div class="item-image">
+        <img src="product-image.jpg" alt="Product">
+      </div>
+      <div class="item-details">
+        <div class="item-title">Samsung Galaxy S21 Ultra - Premium 5G Flagship</div>
+        <div class="item-price">€899.99</div>
+        <div class="item-url">
+          <a href="https://amazon.de/dp/B08N5WRWNW" target="_blank">Amazon Link</a>
+        </div>
+        <div class="item-meta">
+          <span class="original-title-toggle">Original anzeigen</span>
+          <span class="created-date">15.01.2024</span>
+        </div>
+      </div>
+      <div class="item-actions">
+        <button class="edit-btn">Bearbeiten</button>
+        <button class="delete-btn">Löschen</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### CSS Styling
+
+```css
+/* Settings Panel */
+.enhanced-settings-panel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 500px;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  color: white;
+  z-index: 10000;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+}
+
+.settings-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid #333;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.api-key-input-group {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
+.api-key-input-group input {
+  flex: 1;
+  padding: 0.75rem;
+  background: #2a2a2a;
+  border: 1px solid #444;
+  border-radius: 4px;
+  color: white;
+}
+
+.test-key-btn {
+  padding: 0.75rem 1rem;
+  background: #007acc;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* Title Selection */
+.title-selection-container {
+  background: #f8f9fa;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin: 1rem 0;
+}
+
+.title-option {
+  padding: 1rem;
+  border: 2px solid #e9ecef;
+  border-radius: 6px;
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.title-option:hover {
+  border-color: #007acc;
+  background: #f0f8ff;
+}
+
+.title-option.selected {
+  border-color: #007acc;
+  background: #e3f2fd;
+}
+
+.title-option .option-label {
+  font-weight: 600;
+  color: #666;
+  display: block;
+  margin-bottom: 0.25rem;
+}
+
+.title-option .option-text {
+  font-size: 1.1rem;
+  color: #333;
+}
+
+.ai-suggestion .option-label {
+  color: #007acc;
+}
+
+.original-title .option-label {
+  color: #28a745;
+}
+
+/* Enhanced Item List */
+.enhanced-item {
+  display: flex;
+  gap: 1rem;
+  padding: 1.5rem;
+  border: 1px solid #333;
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  background: #2a2a2a;
+}
+
+.item-image img {
+  width: 80px;
+  height: 80px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.item-details {
+  flex: 1;
+}
+
+.item-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: white;
+  margin-bottom: 0.5rem;
+}
+
+.item-price {
+  font-size: 1.1rem;
+  color: #ff9900;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.item-url a {
+  color: #007acc;
+  text-decoration: none;
+}
+
+.item-meta {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: #aaa;
+}
+
+.original-title-toggle {
+  color: #007acc;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.item-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.item-actions button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+
+.edit-btn {
+  background: #007acc;
+  color: white;
+}
+
+.delete-btn {
+  background: #dc3545;
+  color: white;
+}
+
+/* Loading States */
+.loading-indicator {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: #007acc;
+}
+
+.loading-indicator::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  border: 2px solid #007acc;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Error States */
+.error-message {
+  background: #f8d7da;
+  color: #721c24;
+  padding: 0.75rem;
+  border-radius: 4px;
+  border: 1px solid #f5c6cb;
+  margin: 0.5rem 0;
+}
+
+.success-message {
+  background: #d4edda;
+  color: #155724;
+  padding: 0.75rem;
+  border-radius: 4px;
+  border: 1px solid #c3e6cb;
+  margin: 0.5rem 0;
+}
+```
+
+## Correctness Properties
+
+*A property is a characteristic or behavior that should hold true across all valid executions of a system—essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*
+
+### Property 1: Product Data Extraction Completeness
+*For any* valid Amazon product URL, the Product_Extractor should successfully extract both title and price data or return appropriate error messages for inaccessible content.
+**Validates: Requirements 1.1, 1.2, 1.3, 1.4, 1.5**
+
+### Property 2: API Key Validation Consistency
+*For any* API key input, the Settings_Panel should correctly validate the format and provide appropriate feedback (save for valid keys, error for invalid keys).
+**Validates: Requirements 2.2, 2.3, 2.4, 2.6**
+
+### Property 3: Mistral-AI Integration Reliability
+*For any* extracted product title with a valid API key, the Extension should either receive exactly three title suggestions from Mistral-AI or gracefully handle failures with appropriate fallbacks.
+**Validates: Requirements 3.1, 3.2, 3.3, 3.4, 3.5, 3.6**
+
+### Property 4: Title Selection Mechanism
+*For any* set of title suggestions (including original), the UI should display all options as selectable items and correctly handle user selection with visual feedback.
+**Validates: Requirements 4.1, 4.2, 4.3, 4.4, 4.5, 4.6**
+
+### Property 5: Enhanced Item Storage Completeness
+*For any* item being saved, the Extension should store all required data (URL, custom title, original title, price) and validate completeness before saving.
+**Validates: Requirements 5.1, 5.2, 5.3, 5.4, 5.5**
+
+### Property 6: Item List Display Completeness
+*For any* collection of saved items, the display should show all required information (custom title, price, URL, original title access) in chronological order.
+**Validates: Requirements 6.1, 6.2, 6.3, 6.4, 6.5**
+
+### Property 7: Error Handling and Fallback Robustness
+*For any* system failure (AI unavailable, extraction failure, network error), the Extension should provide appropriate fallbacks and never lose user data.
+**Validates: Requirements 7.1, 7.2, 7.3, 7.4, 7.5, 7.6**
+
+### Property 8: Beautiful User Interface Design
+*For any* user interface element, the system should display modern glassmorphism design with consistent styling, smooth animations, and proper visual hierarchy.
+**Validates: Requirements 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7, 8.8**
+
+### Property 9: Enhanced Interactivity and User Guidance
+*For any* user interaction, the system should provide clear visual feedback, contextual help, and intuitive navigation with proper accessibility support.
+**Validates: Requirements 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7, 9.8**
+
+### Property 10: Responsive Design and Accessibility
+*For any* screen size or accessibility preference, the interface should adapt appropriately and provide full functionality with proper accessibility features.
+**Validates: Requirements 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7, 10.8**
+
+## Interface Design Enhancements
+
+### Modern Glassmorphism Design System
+
+The interface uses a modern glassmorphism design approach with:
+
+**Color Palette:**
+- Primary: Amazon Orange (#ff9900) with gradients
+- Secondary: Tech Blue (#007acc) for links and actions
+- Success: Green (#28a745) for positive actions
+- Error: Red (#dc3545) for warnings and errors
+- Background: Dark theme with glass effects
+
+**Glass Effect Implementation:**
+```css
+/* Glass morphism base */
+background: rgba(255, 255, 255, 0.08);
+border: 1px solid rgba(255, 255, 255, 0.15);
+backdrop-filter: blur(10px);
+border-radius: 12px;
+
+/* Hover states */
+background: rgba(255, 255, 255, 0.12);
+border-color: rgba(255, 255, 255, 0.25);
+```
+
+**Typography Hierarchy:**
+- Headers: 1.8rem, font-weight 700, letter-spacing -0.5px
+- Subheaders: 1.25rem, font-weight 600
+- Body text: 1rem, line-height 1.5
+- Small text: 0.85rem for meta information
+- Monospace: For URLs and technical data
+
+### Enhanced Visual Components
+
+**Progress Indicator Design:**
+- Step-by-step visual progress with icons (🔍📦🤖✏️💾)
+- Smooth transitions between states (active, completed, error)
+- Color-coded status indicators with animations
+- Contextual help text for each step
+
+**Item Card Layout:**
+```
+┌─────────────────────────────────────────────────────┐
+│ [Custom Title]                           [€29.99]   │
+│ 🔗 amazon.de/dp/...                                 │
+│ Erstellt: 11.01.2026, 13:58  [KI-Titel]           │
+│ ┌─────────────────────────────────────────────────┐ │
+│ │ Original: ROCKBROS Balaclava Herbst/Winter...  │ │
+│ └─────────────────────────────────────────────────┘ │
+│                                    [👁️] [✏️] [🗑️] │
+└─────────────────────────────────────────────────────┘
+```
+
+**Interactive Elements:**
+- Hover effects with subtle transformations (translateY(-2px))
+- Button gradients with glow effects on hover
+- Smooth transitions (0.2s ease) for all interactions
+- Focus indicators for keyboard navigation
+
+### Animation and Transition System
+
+**Micro-interactions:**
+- Button hover: Scale and glow effect
+- Card hover: Lift effect with shadow
+- Form focus: Border color transition with glow
+- Loading states: Pulse animation for progress indicators
+
+**Page Transitions:**
+- Slide-in animations for new content (slideInUp, slideInDown)
+- Fade transitions for state changes
+- Stagger animations for list items
+
+**Performance Considerations:**
+- CSS transforms for animations (GPU accelerated)
+- Respect prefers-reduced-motion for accessibility
+- Optimized animation timing (60fps target)
+
+### Responsive Breakpoints
+
+**Mobile (≤ 480px):**
+- Single column layout
+- Full-width buttons
+- Larger touch targets (44px minimum)
+- Simplified navigation
+
+**Tablet (481px - 768px):**
+- Optimized spacing for medium screens
+- Flexible grid layouts
+- Touch-friendly interactions
+
+**Desktop (≥ 769px):**
+- Multi-column layouts where appropriate
+- Hover states and detailed interactions
+- Keyboard navigation support
+
+### Accessibility Features
+
+**Screen Reader Support:**
+- Semantic HTML structure with proper headings
+- ARIA labels for interactive elements
+- Live regions for dynamic content updates
+- Descriptive alt text for icons
+
+**Keyboard Navigation:**
+- Logical tab order through all interactive elements
+- Visible focus indicators with high contrast
+- Keyboard shortcuts for common actions
+- Skip links for navigation
+
+**Visual Accessibility:**
+- High contrast mode support
+- Scalable text (up to 200% zoom)
+- Color-blind friendly palette
+- Sufficient color contrast ratios (WCAG AA)
+
+## Error Handling
+
+| Scenario | Handling |
+|----------|----------|
+| Mistral-AI API unavailable | Use original title, continue with saving |
+| Invalid API key | Display clear error with setup instructions |
+| Product extraction failure | Allow manual title/price input |
+| Network timeout | Retry up to 3 times, then use fallback |
+| Malformed Amazon URL | Show validation error, prevent processing |
+| Missing title or price data | Use fallback values, log warning |
+| Local storage quota exceeded | Show warning, suggest cleanup |
+| Corrupted item data | Remove invalid entries, preserve valid data |
+| AI response parsing error | Use original title, log error |
+
+## Testing Strategy
+
+### Unit Tests
+- Amazon URL validation with various formats
+- Product data extraction from mock HTML content
+- API key format validation and masking
+- Title selection UI interactions and state management
+- Local storage operations (save, load, delete, update)
+- Error message display and user feedback
+- Settings panel functionality and persistence
+
+### Property-Based Tests
+- **Property 1**: Generate random valid/invalid Amazon URLs, test extraction completeness
+- **Property 2**: Generate various API key formats, test validation consistency
+- **Property 3**: Test Mistral-AI integration with random titles and API states
+- **Property 4**: Test title selection with various suggestion sets
+- **Property 5**: Test item storage with random complete/incomplete data
+- **Property 6**: Test display rendering with random item collections
+- **Property 7**: Test error handling with simulated failure conditions
+
+### Integration Tests
+- End-to-end workflow: URL input → extraction → AI processing → selection → saving
+- Settings configuration and API key management
+- Real Mistral-AI API integration (with test key)
+- Cross-component data flow and state synchronization
+- Migration from basic items to enhanced items
+
+### Testing Framework
+- Jest für Unit Tests
+- fast-check für Property-Based Tests
+- JSDOM für DOM-Simulation
+- Mock Service Worker für API-Simulation
+- Chrome Extension Testing Utils für Browser-spezifische Features
+
+### Test Configuration
+- Minimum 100 Iterationen pro Property Test
+- Tag-Format: **Feature: enhanced-item-management, Property {number}: {property_text}**
+- Jede Correctness Property wird durch einen einzelnen Property-Based Test implementiert
+- Test API key: GP1CD0e0TrGJvt6ERDyjhaUy5w4Q4Wqr (für Mistral-AI Integration Tests)
--- a/.kiro/specs/enhanced-item-management/requirements.md
+++ b/.kiro/specs/enhanced-item-management/requirements.md
@@ -0,0 +1,152 @@
+# Requirements Document
+
+## Introduction
+
+Eine Erweiterung der bestehenden Amazon Product Bar Extension, die automatische Produktdatenextraktion, KI-basierte Titel-Customization mit Mistral-AI und erweiterte Item-Verwaltung implementiert. Die Extension soll Titel und Preis automatisch extrahieren, drei KI-generierte Titelvorschläge anbieten und diese Daten als Fremdschlüssel für weitere Aktionen bereitstellen.
+
+## Glossary
+
+- **Enhanced_Item**: Erweiterte Produktdaten mit Amazon-Link, extrahiertem Titel, Preis und customisiertem Titel
+- **Mistral_AI**: KI-Service für Titel-Generierung und -Customization
+- **Title_Suggestions**: Drei von Mistral-AI generierte alternative Titel für ein Produkt
+- **Settings_Panel**: Konfigurationsbereich für API-Keys und andere Einstellungen
+- **Product_Extractor**: Komponente zur automatischen Extraktion von Titel und Preis aus Amazon-Produktseiten
+- **API_Key**: Authentifizierungsschlüssel für Mistral-AI-Service
+- **Custom_Title**: Vom Nutzer ausgewählter, KI-generierter Titel
+- **Original_Title**: Ursprünglicher, von Amazon extrahierter Produkttitel
+- **Product_Price**: Aktueller Preis des Produkts auf Amazon
+
+## Requirements
+
+### Requirement 1: Automatische Produktdatenextraktion
+
+**User Story:** Als Nutzer möchte ich, dass Titel und Preis automatisch aus Amazon-Produkten extrahiert werden, damit ich diese Informationen nicht manuell eingeben muss.
+
+#### Acceptance Criteria
+
+1. WHEN a valid Amazon product URL is provided, THE Product_Extractor SHALL automatically extract the product title
+2. WHEN a valid Amazon product URL is provided, THE Product_Extractor SHALL automatically extract the current product price
+3. WHEN the product page cannot be accessed, THE Product_Extractor SHALL return an error message
+4. WHEN the title or price cannot be found, THE Product_Extractor SHALL return appropriate fallback values
+5. THE Product_Extractor SHALL handle different Amazon page layouts and product types
+
+### Requirement 2: Settings Panel für API-Key-Verwaltung
+
+**User Story:** Als Nutzer möchte ich meinen Mistral-AI API-Key in den Einstellungen speichern können, damit die KI-Funktionen verfügbar sind.
+
+#### Acceptance Criteria
+
+1. WHEN the user opens the settings, THE Settings_Panel SHALL display an input field for the Mistral-AI API key
+2. WHEN a valid API key is entered, THE Settings_Panel SHALL save it securely in local storage
+3. WHEN an invalid API key format is entered, THE Settings_Panel SHALL display a validation error
+4. WHEN the settings are opened, THE Settings_Panel SHALL display the currently saved API key (masked for security)
+5. THE Settings_Panel SHALL provide a test button to verify API key functionality
+6. WHEN the API key is tested, THE Settings_Panel SHALL show success or failure status
+
+### Requirement 3: Mistral-AI Integration für Titel-Generierung
+
+**User Story:** Als Nutzer möchte ich drei KI-generierte Titelvorschläge erhalten, damit ich einen passenden customisierten Titel auswählen kann.
+
+#### Acceptance Criteria
+
+1. WHEN a product title is extracted, THE Extension SHALL send it to Mistral-AI for customization
+2. WHEN Mistral-AI processes the title, THE Extension SHALL receive exactly three alternative title suggestions
+3. WHEN the API key is missing or invalid, THE Extension SHALL display an error message and skip AI processing
+4. WHEN the Mistral-AI service is unavailable, THE Extension SHALL handle the error gracefully
+5. THE Extension SHALL use the original title as fallback if AI processing fails
+6. WHEN AI processing takes longer than 10 seconds, THE Extension SHALL timeout and use fallback
+
+### Requirement 4: Titel-Auswahl Interface
+
+**User Story:** Als Nutzer möchte ich aus drei Titelvorschlägen per Klick auswählen können, damit ich den besten Titel für mein Item verwende.
+
+#### Acceptance Criteria
+
+1. WHEN title suggestions are available, THE Extension SHALL display all three options in a selectable list
+2. WHEN a title suggestion is clicked, THE Extension SHALL select it as the custom title
+3. WHEN a title is selected, THE Extension SHALL visually highlight the chosen option
+4. WHEN no title is explicitly selected, THE Extension SHALL use the first suggestion as default
+5. THE Extension SHALL also display the original extracted title as a fourth option
+6. WHEN the original title is selected, THE Extension SHALL use it without AI customization
+
+### Requirement 5: Erweiterte Item-Speicherung
+
+**User Story:** Als Nutzer möchte ich Items mit Amazon-Link, Titel und Preis speichern können, damit alle relevanten Produktinformationen verfügbar sind.
+
+#### Acceptance Criteria
+
+1. WHEN an item is saved, THE Extension SHALL store the Amazon product URL
+2. WHEN an item is saved, THE Extension SHALL store the selected custom title
+3. WHEN an item is saved, THE Extension SHALL store the extracted product price
+4. WHEN an item is saved, THE Extension SHALL store the original extracted title for reference
+5. THE Extension SHALL validate that all required data (URL, title, price) is present before saving
+
+### Requirement 6: Erweiterte Item-Liste Anzeige
+
+**User Story:** Als Nutzer möchte ich in der Item-Liste alle gespeicherten Informationen sehen können, damit ich einen vollständigen Überblick habe.
+
+#### Acceptance Criteria
+
+1. WHEN the item list is displayed, THE Extension SHALL show the custom title for each item
+2. WHEN the item list is displayed, THE Extension SHALL show the extracted price for each item
+3. WHEN the item list is displayed, THE Extension SHALL show the Amazon product URL
+4. THE Extension SHALL provide a way to view the original extracted title
+5. THE Extension SHALL display items in chronological order (newest first)
+
+### Requirement 7: Fehlerbehandlung und Fallbacks
+
+**User Story:** Als Nutzer möchte ich, dass die Extension auch bei Fehlern funktioniert, damit ich meine Items trotzdem verwalten kann.
+
+#### Acceptance Criteria
+
+1. WHEN Mistral-AI is unavailable, THE Extension SHALL use the original title and continue with item saving
+2. WHEN product extraction fails, THE Extension SHALL allow manual title and price input
+3. WHEN the API key is invalid, THE Extension SHALL display a clear error message with instructions
+4. WHEN network errors occur, THE Extension SHALL retry operations up to 3 times
+5. WHEN critical errors occur, THE Extension SHALL log them for debugging purposes
+6. THE Extension SHALL never lose user data due to API or network failures
+
+### Requirement 8: Schöne Benutzeroberfläche und Benutzererfahrung
+
+**User Story:** Als Nutzer möchte ich eine schöne, intuitive und moderne Benutzeroberfläche haben, damit die Verwendung der Enhanced Item Management Funktionen angenehm und effizient ist.
+
+#### Acceptance Criteria
+
+1. WHEN the Enhanced Items Panel is displayed, THE Interface SHALL use modern glassmorphism design with subtle transparency and blur effects
+2. WHEN users interact with elements, THE Interface SHALL provide smooth animations and visual feedback with hover states and transitions
+3. WHEN displaying progress during extraction, THE Interface SHALL show an elegant step-by-step progress indicator with icons and status updates
+4. WHEN showing item cards, THE Interface SHALL display them with beautiful card layouts including shadows, rounded corners, and proper spacing
+5. WHEN users hover over interactive elements, THE Interface SHALL provide clear visual feedback with color changes and subtle transformations
+6. THE Interface SHALL use a consistent color scheme with Amazon orange (#ff9900) as primary color and proper contrast ratios
+7. WHEN displaying text and content, THE Interface SHALL use proper typography hierarchy with readable fonts and appropriate sizing
+8. WHEN showing different states (loading, success, error), THE Interface SHALL use distinct visual indicators with appropriate colors and icons
+
+### Requirement 9: Verbesserte Interaktivität und Benutzerführung
+
+**User Story:** Als Nutzer möchte ich eine intuitive Benutzerführung und klare Interaktionsmöglichkeiten haben, damit ich die Funktionen leicht verstehen und verwenden kann.
+
+#### Acceptance Criteria
+
+1. WHEN users enter an Amazon URL, THE Interface SHALL provide real-time validation feedback with clear success/error indicators
+2. WHEN the extraction process runs, THE Interface SHALL show contextual help text explaining each step to the user
+3. WHEN title selection is required, THE Interface SHALL highlight the recommended option and provide clear selection guidance
+4. WHEN users interact with item cards, THE Interface SHALL provide contextual action buttons with clear icons and tooltips
+5. WHEN errors occur, THE Interface SHALL display helpful error messages with suggested next steps and recovery options
+6. THE Interface SHALL provide keyboard navigation support for all interactive elements
+7. WHEN displaying long content, THE Interface SHALL implement proper text truncation with expand/collapse functionality
+8. WHEN users complete actions, THE Interface SHALL provide clear success feedback with appropriate animations
+
+### Requirement 10: Responsive Design und Accessibility
+
+**User Story:** Als Nutzer möchte ich, dass die Interface auf verschiedenen Bildschirmgrößen gut funktioniert und barrierefrei ist, damit ich sie überall verwenden kann.
+
+#### Acceptance Criteria
+
+1. WHEN viewed on mobile devices, THE Interface SHALL adapt layout to smaller screens with stacked elements and touch-friendly buttons
+2. WHEN viewed on tablets, THE Interface SHALL optimize spacing and sizing for medium-sized screens
+3. WHEN users have accessibility needs, THE Interface SHALL provide proper ARIA labels and semantic HTML structure
+4. WHEN users prefer reduced motion, THE Interface SHALL respect prefers-reduced-motion settings and minimize animations
+5. WHEN users have high contrast preferences, THE Interface SHALL provide sufficient color contrast and alternative styling
+6. THE Interface SHALL support screen readers with proper heading structure and descriptive text
+7. WHEN users navigate with keyboard only, THE Interface SHALL provide visible focus indicators and logical tab order
+8. WHEN content overflows, THE Interface SHALL provide accessible scrolling with proper scrollbar styling
--- a/.kiro/specs/enhanced-item-management/tasks.md
+++ b/.kiro/specs/enhanced-item-management/tasks.md
@@ -0,0 +1,152 @@
+# Implementation Plan: Enhanced Item Management
+
+## Overview
+
+Implementierung der erweiterten Item-Verwaltung für die Amazon Product Bar Extension mit automatischer Produktdatenextraktion, Mistral-AI Integration für Titel-Customization und erweiterte Speicherfunktionen. Die Implementierung erfolgt in JavaScript und erweitert die bestehende Extension-Architektur. Titel und Preis werden direkt als Fremdschlüssel verwendet (keine Hash-Generierung).
+
+## Tasks
+
+- [x] 1. Setup Enhanced Item Data Model und Storage
+  - Erstelle EnhancedItem-Datenmodell mit allen erforderlichen Feldern
+  - Implementiere EnhancedStorageManager für erweiterte Datenpersistierung
+  - Erstelle Migration von bestehenden Basic Items zu Enhanced Items
+  - _Requirements: 5.1, 5.2, 5.3, 5.4, 5.5, 5.6_
+
+- [ ]* 1.1 Write property test for Enhanced Item Storage
+  - **Property 5: Enhanced Item Storage Completeness**
+  - **Validates: Requirements 5.1, 5.2, 5.3, 5.4, 5.5**
+
+- [x] 2. Implement Product Data Extractor
+  - Erstelle ProductExtractor-Klasse für Amazon-Produktdatenextraktion
+  - Implementiere Titel-Extraktion aus verschiedenen Amazon-Seitenlayouts
+  - Implementiere Preis-Extraktion mit Währungserkennung
+  - Füge URL-Validierung und Fehlerbehandlung hinzu
+  - _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5_
+
+- [ ]* 2.1 Write property test for Product Data Extraction
+  - **Property 1: Product Data Extraction Completeness**
+  - **Validates: Requirements 1.1, 1.2, 1.3, 1.4, 1.5**
+
+- [x] 3. Create Settings Panel for API Key Management
+  - Erstelle SettingsPanelManager für Konfigurationsoberfläche
+  - Implementiere API-Key-Eingabe mit Maskierung und Validierung
+  - Füge Test-Button für API-Key-Verifikation hinzu
+  - Implementiere sichere Speicherung in Local Storage
+  - _Requirements: 2.1, 2.2, 2.3, 2.4, 2.5, 2.6_
+
+- [ ]* 3.1 Write property test for API Key Validation
+  - **Property 2: API Key Validation Consistency**
+  - **Validates: Requirements 2.2, 2.3, 2.4, 2.6**
+
+- [x] 4. Checkpoint - Core Infrastructure Complete
+  - Ensure all tests pass, ask the user if questions arise.
+
+- [x] 5. Implement Mistral-AI Service Integration
+  - Erstelle MistralAIService-Klasse für API-Kommunikation
+  - Implementiere Titel-Generierung mit drei Vorschlägen
+  - Füge Timeout-Handling und Retry-Logik hinzu
+  - Implementiere Fehlerbehandlung und Fallback-Mechanismen
+  - _Requirements: 3.1, 3.2, 3.3, 3.4, 3.5, 3.6_
+
+- [ ]* 5.1 Write property test for Mistral-AI Integration
+  - **Property 3: Mistral-AI Integration Reliability**
+  - **Validates: Requirements 3.1, 3.2, 3.3, 3.4, 3.5, 3.6**
+
+- [x] 6. Create Title Selection UI
+  - Erstelle TitleSelectionManager für Titelauswahl-Interface
+  - Implementiere Anzeige von drei KI-Vorschlägen plus Original-Titel
+  - Füge Klick-Auswahl mit visueller Hervorhebung hinzu
+  - Implementiere Standard-Auswahl und Fallback-Verhalten
+  - _Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6_
+
+- [ ]* 6.1 Write property test for Title Selection Mechanism
+  - **Property 4: Title Selection Mechanism**
+  - **Validates: Requirements 4.1, 4.2, 4.3, 4.4, 4.5, 4.6**
+
+- [x] 7. Create Enhanced Item List UI
+  - Erweitere bestehende Item-Liste um neue Datenfelder
+  - Implementiere Anzeige von Custom Title, Preis und URL
+  - Füge Original-Titel-Toggle und chronologische Sortierung hinzu
+  - Erstelle erweiterte Item-Aktionen (Bearbeiten, Löschen)
+  - _Requirements: 6.1, 6.2, 6.3, 6.4, 6.5_
+
+- [ ]* 7.1 Write property test for Item List Display
+  - **Property 6: Item List Display Completeness**
+  - **Validates: Requirements 6.1, 6.2, 6.3, 6.4, 6.5**
+
+- [x] 8. Checkpoint - Core Functionality Complete
+  - Ensure all tests pass, ask the user if questions arise.
+
+- [x] 9. Implement Enhanced Add Item Workflow
+  - Integriere alle Komponenten in vollständigen Add-Item-Workflow
+  - Verbinde URL-Eingabe → Extraktion → AI-Processing → Auswahl → Speicherung
+  - Implementiere Fortschrittsanzeige und Benutzer-Feedback
+  - Füge manuelle Eingabe-Fallback für Extraktionsfehler hinzu
+  - _Requirements: 1.1, 3.1, 4.1, 5.1_
+
+- [x] 10. Implement Comprehensive Error Handling
+  - Erstelle zentrales Error-Handling für alle Komponenten
+  - Implementiere Fallback-Mechanismen für AI- und Netzwerkfehler
+  - Füge Retry-Logik und Datenerhaltung hinzu
+  - Erstelle benutzerfreundliche Fehlermeldungen
+  - _Requirements: 7.1, 7.2, 7.3, 7.4, 7.5, 7.6_
+
+- [ ]* 10.1 Write property test for Error Handling
+  - **Property 7: Error Handling and Fallback Robustness**
+  - **Validates: Requirements 7.1, 7.2, 7.3, 7.4, 7.5, 7.6**
+
+- [x] 11. Integration and CSS Styling
+  - Integriere Enhanced Item Management in bestehende Extension
+  - Erstelle CSS-Styles für alle neuen UI-Komponenten
+  - Implementiere responsive Design und Dark/Light Theme Support
+  - Teste Integration mit bestehender StaggeredMenu-Architektur
+  - _Requirements: 2.1, 4.1, 6.1_
+
+- [ ]* 11.1 Write integration tests for complete workflow
+  - Test End-to-End-Workflow von URL-Eingabe bis Item-Speicherung
+  - Test Settings-Konfiguration und API-Key-Management
+  - Test Migration von Basic Items zu Enhanced Items
+  - _Requirements: 1.1, 2.1, 3.1, 4.1, 5.1_
+
+- [x] 12. Final Checkpoint - Complete System Test
+  - Ensure all tests pass, ask the user if questions arise.
+  - Test mit echtem Mistral-AI API-Key: GP1CD0e0TrGJvt6ERDyjhaUy5w4Q4Wqr
+  - Validiere alle Correctness Properties
+  - Prüfe Performance und Benutzerfreundlichkeit
+
+- [x] 13. Implement Beautiful Interface Enhancements
+  - Verbessere CSS-Styling mit modernem Glassmorphism-Design
+  - Implementiere smooth Animationen und Hover-Effekte
+  - Füge elegante Progress-Indikatoren mit Icons hinzu
+  - Erstelle schöne Item-Card-Layouts mit Schatten und Rundungen
+  - _Requirements: 8.1, 8.2, 8.3, 8.4, 8.5, 8.6, 8.7, 8.8_
+
+- [x] 14. Enhance User Interactivity and Guidance
+  - Implementiere Real-time URL-Validierung mit visuellen Feedback
+  - Füge kontextuelle Hilfe-Texte für jeden Workflow-Schritt hinzu
+  - Verbessere Title-Selection mit besserer visueller Führung
+  - Implementiere Keyboard-Navigation und Accessibility-Features
+  - _Requirements: 9.1, 9.2, 9.3, 9.4, 9.5, 9.6, 9.7, 9.8_
+
+- [x] 15. Implement Responsive Design and Accessibility
+  - Erstelle responsive Layouts für Mobile, Tablet und Desktop
+  - Implementiere Accessibility-Features (ARIA, Screen Reader Support)
+  - Füge High-Contrast und Reduced-Motion Support hinzu
+  - Teste und optimiere für verschiedene Bildschirmgrößen
+  - _Requirements: 10.1, 10.2, 10.3, 10.4, 10.5, 10.6, 10.7, 10.8_
+
+- [x] 16. Final Interface Polish and Testing
+  - Teste alle Interface-Verbesserungen auf verschiedenen Geräten
+  - Validiere Accessibility mit Screen Reader und Keyboard-Navigation
+  - Optimiere Performance und Animationen
+  - Führe User Experience Testing durch
+
+## Notes
+
+- Tasks marked with `*` are optional and can be skipped for faster MVP
+- Each task references specific requirements for traceability
+- Checkpoints ensure incremental validation
+- Property tests validate universal correctness properties
+- Integration tests validate end-to-end functionality
+- Real Mistral-AI API key provided for testing: GP1CD0e0TrGJvt6ERDyjhaUy5w4Q4Wqr
+- Hash generation removed - title and price will be used directly as foreign keys