add dev server health check and offline detection to extension

Features:
- Check server health on popup init (dev mode only)
- Show 'server offline' state with setup instructions
- 'Check Again' button to retry connection
- Display target server URL for debugging
- 3-second timeout for health checks

Fixes port 8888 conflict workflow - extension now prompts user
to start dev server instead of hanging silently.

packages/extension/src/lib/api-client.ts

···
 export function getExtensionVersion(): string {
   return chrome.runtime.getManifest().version;
 }
+
+/**
+ * Check if ATlast server is running
+ * Returns true if server is reachable, false otherwise
+ */
+export async function checkServerHealth(): Promise<boolean> {
+  try {
+    // Try to fetch the root URL with a short timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 3000);
+
+    const response = await fetch(ATLAST_API_URL, {
+      method: 'HEAD',
+      signal: controller.signal
+    });
+
+    clearTimeout(timeoutId);
+
+    // Any response (even 404) means server is running
+    return true;
+  } catch (error) {
+    console.error('[API Client] Server health check failed:', error);
+    return false;
+  }
+}
+
+/**
+ * Get the API URL (for display purposes)
+ */
+export function getApiUrl(): string {
+  return ATLAST_API_URL;
+}

packages/extension/src/popup/popup.css

···
   box-sizing: border-box;
 }
 
+code {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 11px;
+  display: inline-block;
+  margin: 8px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  code {
+    background: rgba(255, 255, 255, 0.1);
+  }
+}
+
 body {
   width: 350px;
   min-height: 400px;

packages/extension/src/popup/popup.html

···
         <p id="error-message" class="error-message"></p>
         <button id="btn-retry" class="btn-secondary">Try Again</button>
       </div>
+
+      <!-- Server offline state -->
+      <div id="state-offline" class="state hidden">
+        <div class="icon">🔌</div>
+        <p class="message">ATlast server not running</p>
+        <p class="error-message">
+          Start the dev server:<br>
+          <code>npx netlify-cli dev --filter @atlast/web</code>
+        </p>
+        <p class="hint" id="server-url"></p>
+        <button id="btn-check-server" class="btn-primary">Check Again</button>
+      </div>
     </main>
 
     <footer>

packages/extension/src/popup/popup.ts

···
   scraping: document.getElementById('state-scraping')!,
   complete: document.getElementById('state-complete')!,
   uploading: document.getElementById('state-uploading')!,
-  error: document.getElementById('state-error')!
+  error: document.getElementById('state-error')!,
+  offline: document.getElementById('state-offline')!
 };
 
 const elements = {
···
   finalCount: document.getElementById('final-count')!,
   statusMessage: document.getElementById('status-message')!,
   errorMessage: document.getElementById('error-message')!,
+  serverUrl: document.getElementById('server-url')!,
   progressFill: document.getElementById('progress-fill')! as HTMLElement,
   btnStart: document.getElementById('btn-start')! as HTMLButtonElement,
   btnUpload: document.getElementById('btn-upload')! as HTMLButtonElement,
-  btnRetry: document.getElementById('btn-retry')! as HTMLButtonElement
+  btnRetry: document.getElementById('btn-retry')! as HTMLButtonElement,
+  btnCheckServer: document.getElementById('btn-check-server')! as HTMLButtonElement
 };
 
 /**
···
 }
 
 /**
+ * Check server health and show offline state if needed
+ */
+async function checkServer(): Promise<boolean> {
+  console.log('[Popup] 🏥 Checking server health...');
+
+  // Import health check function
+  const { checkServerHealth, getApiUrl } = await import('../lib/api-client.js');
+
+  const isOnline = await checkServerHealth();
+
+  if (!isOnline) {
+    console.log('[Popup] ❌ Server is offline');
+    showState('offline');
+    elements.serverUrl.textContent = `Trying to reach: ${getApiUrl()}`;
+    return false;
+  }
+
+  console.log('[Popup] ✅ Server is online');
+  return true;
+}
+
+/**
  * Initialize popup
  */
 async function init(): Promise<void> {
   console.log('[Popup] 🚀 Initializing popup...');
+
+  // Check server health first (only in dev mode)
+  const { getApiUrl } = await import('../lib/api-client.js');
+  const isDev = getApiUrl().includes('127.0.0.1') || getApiUrl().includes('localhost');
+
+  if (isDev) {
+    const serverOnline = await checkServer();
+    if (!serverOnline) {
+      // Set up retry button
+      elements.btnCheckServer.addEventListener('click', async () => {
+        elements.btnCheckServer.disabled = true;
+        elements.btnCheckServer.textContent = 'Checking...';
+
+        const online = await checkServer();
+        if (online) {
+          // Server is back online, re-initialize
+          init();
+        } else {
+          elements.btnCheckServer.disabled = false;
+          elements.btnCheckServer.textContent = 'Check Again';
+        }
+      });
+      return;
+    }
+  }
 
   // Get current state
   console.log('[Popup] 📡 Requesting state from background...');