fix: image watcher now uses relative path for subdirectory images

- Added relativePath field to ImageDetectedEvent - Compute relative path from working directory in image-watcher - Use relativePath in frontend URL (fixes 'Failed to load image' for subdirs) - Minor CLAUDE.md improvements chore: bump version to 0.1461
2026-10-05 06:59:42 +02:00 · 2026-01-31 14:32:20 +01:00
parent c7488c4a56
commit b655d2e29e
13 changed files with 278 additions and 18 deletions
@@ -0,0 +1,179 @@
+#!/usr/bin/env node
+/**
+ * Take mobile screenshots of Claudeman using Playwright
+ * Emulates iPhone 15 Pro (closest to iPhone 17 Pro)
+ * Includes keyboard simulation
+ */
+
+import { chromium, devices } from 'playwright';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { mkdirSync } from 'fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const BASE_URL = 'http://localhost:3000';
+const OUTPUT_DIR = join(__dirname, '..', 'docs', 'screenshots');
+
+// Ensure output directory exists
+try { mkdirSync(OUTPUT_DIR, { recursive: true }); } catch {}
+
+// iPhone 15 Pro specs (closest to requested iPhone 17 Pro)
+// Screen: 393 x 852 at 3x = 1179 x 2556 physical pixels
+const VIEWPORT_WIDTH = 393;
+const VIEWPORT_HEIGHT = 852;
+const KEYBOARD_HEIGHT = 336; // Typical iOS keyboard height
+
+const iPhone15Pro = {
+  ...devices['iPhone 14 Pro'],
+  viewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT },
+  deviceScaleFactor: 3,
+  userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+};
+
+async function takeScreenshots() {
+  console.log('Launching browser with iPhone 15 Pro emulation...');
+  console.log('Output directory:', OUTPUT_DIR);
+
+  const browser = await chromium.launch({ headless: true });
+  const context = await browser.newContext({
+    ...iPhone15Pro,
+    hasTouch: true,
+    isMobile: true,
+  });
+
+  const page = await context.newPage();
+
+  try {
+    // Screenshot 1: Main view (no keyboard)
+    console.log('Loading main page...');
+    await page.goto(BASE_URL, { waitUntil: 'domcontentloaded', timeout: 10000 });
+    await page.waitForTimeout(2000);
+
+    await page.screenshot({
+      path: join(OUTPUT_DIR, 'mobile-no-keyboard.png'),
+      fullPage: false
+    });
+    console.log('✓ Saved: mobile-no-keyboard.png');
+
+    // Screenshot 2: Simulate keyboard appearing
+    console.log('Simulating virtual keyboard...');
+
+    // Resize viewport to simulate keyboard taking up space
+    await page.setViewportSize({
+      width: VIEWPORT_WIDTH,
+      height: VIEWPORT_HEIGHT - KEYBOARD_HEIGHT
+    });
+
+    // Trigger the keyboard handler manually
+    await page.evaluate((keyboardHeight) => {
+      // Add keyboard-visible class
+      document.body.classList.add('keyboard-visible');
+
+      // Move toolbar up by keyboard height
+      const toolbar = document.querySelector('.toolbar');
+      if (toolbar) {
+        toolbar.style.transform = `translateY(${-keyboardHeight}px)`;
+      }
+    }, KEYBOARD_HEIGHT);
+
+    await page.waitForTimeout(300);
+
+    // Take screenshot of the reduced viewport (simulating keyboard up)
+    await page.screenshot({
+      path: join(OUTPUT_DIR, 'mobile-keyboard-visible.png'),
+      fullPage: false
+    });
+    console.log('✓ Saved: mobile-keyboard-visible.png');
+
+    // Screenshot 3: Full view with keyboard overlay visualization
+    // Reset viewport but keep toolbar position to show the effect
+    await page.setViewportSize({
+      width: VIEWPORT_WIDTH,
+      height: VIEWPORT_HEIGHT
+    });
+
+    // Add a visual keyboard overlay
+    await page.evaluate((keyboardHeight) => {
+      const overlay = document.createElement('div');
+      overlay.id = 'keyboard-overlay';
+      overlay.style.cssText = `
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: ${keyboardHeight}px;
+        background: linear-gradient(to bottom, #2a2a2a 0%, #1a1a1a 100%);
+        border-top: 1px solid #444;
+        z-index: 9999;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        padding: 8px 4px;
+        gap: 4px;
+      `;
+
+      // Add fake keyboard keys
+      const rows = [
+        'Q W E R T Y U I O P',
+        'A S D F G H J K L',
+        '⇧ Z X C V B N M ⌫',
+        '123 🌐 space return'
+      ];
+
+      rows.forEach((row, rowIndex) => {
+        const rowDiv = document.createElement('div');
+        rowDiv.style.cssText = 'display: flex; width: 100%; justify-content: center; gap: 4px;';
+
+        row.split(' ').forEach(key => {
+          const keyEl = document.createElement('div');
+          const isSpecial = ['⇧', '⌫', '123', '🌐', 'space', 'return'].includes(key);
+          const isSpace = key === 'space';
+          const isReturn = key === 'return';
+
+          keyEl.style.cssText = `
+            background: ${isSpecial ? '#3a3a3a' : '#505050'};
+            color: #fff;
+            border-radius: 5px;
+            padding: ${isSpace ? '10px 60px' : isReturn ? '10px 20px' : '10px 8px'};
+            font-size: ${rowIndex === 3 ? '12px' : '14px'};
+            min-width: ${isSpace ? '120px' : isReturn ? '60px' : '28px'};
+            text-align: center;
+            box-shadow: 0 1px 0 #222;
+          `;
+          keyEl.textContent = isSpace ? '' : key;
+          rowDiv.appendChild(keyEl);
+        });
+
+        overlay.appendChild(rowDiv);
+      });
+
+      document.body.appendChild(overlay);
+    }, KEYBOARD_HEIGHT);
+
+    await page.waitForTimeout(200);
+
+    await page.screenshot({
+      path: join(OUTPUT_DIR, 'mobile-with-keyboard.png'),
+      fullPage: false
+    });
+    console.log('✓ Saved: mobile-with-keyboard.png');
+
+    // Screenshot 4: Toolbar close-up with keyboard
+    const toolbar = page.locator('.toolbar');
+    if (await toolbar.count() > 0) {
+      await toolbar.screenshot({
+        path: join(OUTPUT_DIR, 'mobile-toolbar-above-keyboard.png')
+      });
+      console.log('✓ Saved: mobile-toolbar-above-keyboard.png');
+    }
+
+    console.log('\n✅ All screenshots saved to:', OUTPUT_DIR);
+
+  } catch (error) {
+    console.error('Error taking screenshots:', error.message);
+  } finally {
+    await browser.close();
+  }
+}
+
+takeScreenshots();