2 files changed, 58 insertions, 0 deletions
diff --git a/frontend/src/components/Settings.tsx b/frontend/src/components/Settings.tsx
index b218775..ec432ba 100644
--- a/frontend/src/components/Settings.tsx
+++ b/frontend/src/components/Settings.tsx
@@ -111,6 +111,25 @@ export default function Settings({ fontTheme, setFontTheme }: SettingsProps) {
       });
   };
 
+  const handleCrawl = () => {
+    setLoading(true);
+    apiFetch('/api/crawl', {
+      method: 'POST',
+    })
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to start crawl');
+        return res.json();
+      })
+      .then(() => {
+        setLoading(false);
+        alert('Crawl started!');
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  };
+
   return (
     <div className="settings-page variant-glass">
       <h2>Settings</h2>
@@ -178,6 +197,13 @@ export default function Settings({ fontTheme, setFontTheme }: SettingsProps) {
             <a href="/api/export/json" className="export-btn">JSON</a>
           </div>
         </div>
+
+        <div className="crawl-section">
+          <h3>Actions</h3>
+          <button onClick={handleCrawl} disabled={loading} className="crawl-btn">
+            Crawl All Feeds Now
+          </button>
+        </div>
       </div>
 
       {error && <p className="error-message">{error}</p>}
diff --git a/frontend/tests/crawl.spec.ts b/frontend/tests/crawl.spec.ts
new file mode 100644
index 0000000..175a764
--- /dev/null
+++ b/frontend/tests/crawl.spec.ts
@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Crawl Integration', () => {
+    test('should add a feed and see items after crawl', async ({ page }) => {
+        const mockFeedUrl = 'http://localhost:9090/mock_feed.xml';
+
+        // 1. Login and go to Settings
+        await page.goto('/v2/settings');
+
+        // 2. Add the mock feed
+        await page.fill('input[type="url"]', mockFeedUrl);
+        await page.click('text=Add Feed');
+
+        // Wait for feed to be added
+        await expect(page.getByText(mockFeedUrl)).toBeVisible({ timeout: 5000 });
+
+        // 3. Trigger Crawl
+        const crawlButton = page.getByRole('button', { name: /crawl/i });
+        await expect(crawlButton).toBeVisible();
+
+        // Handle the alert
+        page.on('dialog', dialog => dialog.accept());
+        await crawlButton.click();
+
+        // 4. Go to Home and check for items
+        await page.goto('/v2/');
+
+        // The mock feed has "Mock Item 1" and "Mock Item 2"
+        await expect(page.getByText('Mock Item 1')).toBeVisible({ timeout: 10000 });
+        await expect(page.getByText('Mock Item 2')).toBeVisible({ timeout: 10000 });
+    });
+});