fix: extension dark mode and build mode messaging

- Changed darkMode from 'class' to 'media' for automatic system preference detection
- Made server offline message conditional on build mode (dev vs prod)
- Hide dev server instructions in production builds

docs/git-history.json

···
 [
   {
-    "hash": "fe29bb3e5faa0151f63c14724f7509af669860de",
-    "short_hash": "fe29bb3",
+    "hash": "d07180cd3a19328b82b35118e525b59d4e2e060b",
+    "short_hash": "d07180c",
     "author": "Ariel M. Lighty",
-    "date": "2025-12-27T16:02:10-05:00",
-    "message": "docs: update all .md files to reflect current project status\n\nUpdated 4 markdown files with current state:\n\nEXTENSION_STATUS.md:\n- Changed status from DEBUGGING to COMPLETE\n- Updated decision graph count (295 → 332 nodes)\n- Added recently completed section (nodes 296-332)\n- Marked all extension bugs as resolved\n\nCONTRIBUTING.md:\n- Replaced npm with pnpm throughout\n- Added monorepo structure documentation\n- Updated development commands (netlify-cli dev --filter)\n- Added extension development workflow\n\nPLAN.md:\n- Updated status to Phase 1 COMPLETE\n- Added all recent fixes to completion list\n- Updated decision graph count to 332 nodes\n- Added changelog entries for latest work\n\npackages/extension/README.md:\n- Added prerequisites section (dev server + login required)\n- Updated build commands with dev/prod distinction\n- Added Step 0: Start ATlast Dev Server\n- Added common issues for auth and server states\n\nAll files now accurately reflect completion status and use pnpm.",
-    "files_changed": 6
+    "date": "2025-12-27T18:38:39-05:00",
+    "message": "feat: add Tailwind CSS to extension\n\nReplaced 299 lines of vanilla CSS with Tailwind for design consistency with web app. Production build minified to 13KB.",
+    "files_changed": 9
+  },
+  {
+    "hash": "6ac877ee6d1990bdab4ef3b03ac59f4682afe0a5",
+    "short_hash": "6ac877e",
+    "author": "Ariel M. Lighty",
+    "date": "2025-12-27T16:03:56-05:00",
+    "message": "docs: update decision graph after markdown updates",
+    "files_changed": 2
   },
   {
     "hash": "fe29bb3e5faa0151f63c14724f7509af669860de",
···
     "files_changed": 4
   },
   {
-    "hash": "e04934ffb5e2d78791fcd23bc3afeb4d438a5546",
-    "short_hash": "e04934f",
+    "hash": "46bab1202f69d8d03093a20bc8ada5ad6d365401",
+    "short_hash": "46bab12",
     "author": "Ariel M. Lighty",
-    "date": "2025-12-26T21:57:05-05:00",
-    "message": "perf: optimize Vite dev server startup\n\nAdded explicit optimizeDeps.include to pre-bundle common dependencies:\n- React ecosystem (react, react-dom, react-router-dom)\n- Icon libraries (@icons-pack/react-simple-icons, lucide-react)\n- Other deps (date-fns, jszip, zustand, @tanstack/react-virtual)\n\nAlso added server.fs.allow config for monorepo file serving.\n\nThis should speed up subsequent dev server starts by ensuring these\ndependencies are consistently pre-bundled.",
-    "files_changed": 1
+    "date": "2025-12-26T22:10:11-05:00",
+    "message": "docs: update decision graph after Vite optimization",
+    "files_changed": 2
   },
   {
     "hash": "e04934ffb5e2d78791fcd23bc3afeb4d438a5546",
···
     "files_changed": 3
   },
   {
-    "hash": "32cdee3aeac7ef986df47e0fff786b5f7471e55b",
-    "short_hash": "32cdee3",
+    "hash": "ba29fd68872913ba0a587aa7f29f97b3d373a732",
+    "short_hash": "ba29fd6",
     "author": "Ariel M. Lighty",
     "date": "2025-12-25T13:22:32-05:00",
     "message": "configure Netlify dev for monorepo with --filter flag\n\nFixed Netlify CLI monorepo detection issue by using --filter flag:\n- Updated root package.json scripts to use 'npx netlify-cli dev --filter @atlast/web'\n- Updated netlify.toml [dev] section to use npm with --prefix for framework command\n- Added monorepo development instructions to CLAUDE.md\n- Documented Windows Git Bash compatibility issue with netlify command\n\nSolution: Use 'npx netlify-cli dev --filter @atlast/web' to bypass monorepo\nproject selection prompt and specify which workspace package to run.\n\nDev server now runs successfully at http://localhost:8888 with all backend\nfunctions loaded.",
-    "files_changed": 4
+    "files_changed": 5
   },
   {
-    "hash": "ba29fd68872913ba0a587aa7f29f97b3d373a732",
-    "short_hash": "ba29fd6",
+    "hash": "32cdee3aeac7ef986df47e0fff786b5f7471e55b",
+    "short_hash": "32cdee3",
     "author": "Ariel M. Lighty",
     "date": "2025-12-25T13:22:32-05:00",
     "message": "configure Netlify dev for monorepo with --filter flag\n\nFixed Netlify CLI monorepo detection issue by using --filter flag:\n- Updated root package.json scripts to use 'npx netlify-cli dev --filter @atlast/web'\n- Updated netlify.toml [dev] section to use npm with --prefix for framework command\n- Added monorepo development instructions to CLAUDE.md\n- Documented Windows Git Bash compatibility issue with netlify command\n\nSolution: Use 'npx netlify-cli dev --filter @atlast/web' to bypass monorepo\nproject selection prompt and specify which workspace package to run.\n\nDev server now runs successfully at http://localhost:8888 with all backend\nfunctions loaded.",
-    "files_changed": 5
+    "files_changed": 4
   },
   {
     "hash": "c3e7afad396d130791d801a85cbfc9643bcd6309",

docs/graph-data.json

···
       "created_at": "2025-12-27T18:07:49.869572400-05:00",
       "updated_at": "2025-12-27T18:07:52.136827400-05:00",
       "metadata_json": "{\"branch\":\"master\",\"confidence\":95}"
+    },
+    {
+      "id": 351,
+      "change_id": "9468bcb3-78ec-4dae-8d8f-968ba6f5b3fe",
+      "node_type": "outcome",
+      "title": "Committed Tailwind CSS integration to git",
+      "description": null,
+      "status": "completed",
+      "created_at": "2025-12-27T18:38:55.689869700-05:00",
+      "updated_at": "2025-12-27T18:39:01.013284600-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"commit\":\"d07180c\",\"confidence\":95}"
+    },
+    {
+      "id": 352,
+      "change_id": "b852ce18-1747-4c26-a65e-acfbbed2b1a5",
+      "node_type": "goal",
+      "title": "Fix extension dark mode and dev/prod detection issues",
+      "description": null,
+      "status": "completed",
+      "created_at": "2025-12-27T22:05:50.675487800-05:00",
+      "updated_at": "2025-12-27T22:09:32.111749500-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":90,\"prompt\":\"there now seems to be an issue with dark mode not activating, and either an issue with detecting dev vs prod or the copy is just wrong. analyze and fix.\"}"
+    },
+    {
+      "id": 353,
+      "change_id": "eaed6e9b-9f16-4b45-8783-44ea2ea1f2a9",
+      "node_type": "observation",
+      "title": "Found two issues: 1) darkMode: 'class' requires manual .dark class addition, 2) Dev/prod detection may be incorrect",
+      "description": null,
+      "status": "completed",
+      "created_at": "2025-12-27T22:06:19.509001-05:00",
+      "updated_at": "2025-12-27T22:06:23.515277300-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":90}"
+    },
+    {
+      "id": 354,
+      "change_id": "d66fc83e-9737-4047-8ce2-e2ba857aeea9",
+      "node_type": "decision",
+      "title": "Choose dark mode strategy: media queries vs class-based with JS",
+      "description": null,
+      "status": "completed",
+      "created_at": "2025-12-27T22:07:01.587088200-05:00",
+      "updated_at": "2025-12-27T22:07:07.798171700-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":85}"
+    },
+    {
+      "id": 355,
+      "change_id": "76e2a379-7803-4c82-8013-be6b62f2d360",
+      "node_type": "outcome",
+      "title": "Chose media queries - simpler and matches original behavior",
+      "description": null,
+      "status": "completed",
+      "created_at": "2025-12-27T22:07:04.660558100-05:00",
+      "updated_at": "2025-12-27T22:07:07.897193100-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":90}"
+    },
+    {
+      "id": 356,
+      "change_id": "df681aa8-e470-4ead-a0d2-a4095febfa3d",
+      "node_type": "action",
+      "title": "Fixing dark mode config to use media queries",
+      "description": null,
+      "status": "completed",
+      "created_at": "2025-12-27T22:07:24.774976300-05:00",
+      "updated_at": "2025-12-27T22:07:30.392290200-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":90}"
+    },
+    {
+      "id": 357,
+      "change_id": "57060303-5a30-4f11-a752-a02376df5ea7",
+      "node_type": "action",
+      "title": "Making server offline message conditional on build mode",
+      "description": null,
+      "status": "completed",
+      "created_at": "2025-12-27T22:07:49.952419800-05:00",
+      "updated_at": "2025-12-27T22:09:00.514201500-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":90}"
+    },
+    {
+      "id": 358,
+      "change_id": "fc211ac7-7a1a-4b69-835a-992c354e8237",
+      "node_type": "outcome",
+      "title": "Successfully fixed dark mode and dev/prod messaging",
+      "description": null,
+      "status": "completed",
+      "created_at": "2025-12-27T22:09:28.843864300-05:00",
+      "updated_at": "2025-12-27T22:09:32.017503200-05:00",
+      "metadata_json": "{\"branch\":\"master\",\"confidence\":95}"
     }
   ],
   "edges": [
···
       "weight": 1.0,
       "rationale": "Final outcome of Tailwind integration",
       "created_at": "2025-12-27T18:07:51.011406300-05:00"
+    },
+    {
+      "id": 351,
+      "from_node_id": 344,
+      "to_node_id": 351,
+      "from_change_id": "2a06900e-ea62-4adf-81d5-7f0cf1a29b31",
+      "to_change_id": "9468bcb3-78ec-4dae-8d8f-968ba6f5b3fe",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Git commit for Tailwind integration",
+      "created_at": "2025-12-27T18:38:58.347778400-05:00"
+    },
+    {
+      "id": 352,
+      "from_node_id": 352,
+      "to_node_id": 353,
+      "from_change_id": "b852ce18-1747-4c26-a65e-acfbbed2b1a5",
+      "to_change_id": "eaed6e9b-9f16-4b45-8783-44ea2ea1f2a9",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Initial analysis of issues",
+      "created_at": "2025-12-27T22:06:21.516165300-05:00"
+    },
+    {
+      "id": 353,
+      "from_node_id": 352,
+      "to_node_id": 354,
+      "from_change_id": "b852ce18-1747-4c26-a65e-acfbbed2b1a5",
+      "to_change_id": "d66fc83e-9737-4047-8ce2-e2ba857aeea9",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Need to decide dark mode approach",
+      "created_at": "2025-12-27T22:07:03.103941500-05:00"
+    },
+    {
+      "id": 354,
+      "from_node_id": 354,
+      "to_node_id": 355,
+      "from_change_id": "d66fc83e-9737-4047-8ce2-e2ba857aeea9",
+      "to_change_id": "76e2a379-7803-4c82-8013-be6b62f2d360",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Decision outcome",
+      "created_at": "2025-12-27T22:07:06.239151500-05:00"
+    },
+    {
+      "id": 355,
+      "from_node_id": 352,
+      "to_node_id": 356,
+      "from_change_id": "b852ce18-1747-4c26-a65e-acfbbed2b1a5",
+      "to_change_id": "df681aa8-e470-4ead-a0d2-a4095febfa3d",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Implementation of dark mode fix",
+      "created_at": "2025-12-27T22:07:26.713411300-05:00"
+    },
+    {
+      "id": 356,
+      "from_node_id": 352,
+      "to_node_id": 357,
+      "from_change_id": "b852ce18-1747-4c26-a65e-acfbbed2b1a5",
+      "to_change_id": "57060303-5a30-4f11-a752-a02376df5ea7",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Implementation of server message fix",
+      "created_at": "2025-12-27T22:07:51.662925600-05:00"
+    },
+    {
+      "id": 357,
+      "from_node_id": 352,
+      "to_node_id": 358,
+      "from_change_id": "b852ce18-1747-4c26-a65e-acfbbed2b1a5",
+      "to_change_id": "fc211ac7-7a1a-4b69-835a-992c354e8237",
+      "edge_type": "leads_to",
+      "weight": 1.0,
+      "rationale": "Final outcome of fixes",
+      "created_at": "2025-12-27T22:09:30.425884400-05:00"
     }
   ]
 }

packages/extension/src/popup/popup.html

···
                 <!-- Server offline state -->
                 <div id="state-offline" class="w-full text-center hidden">
                     <div class="text-5xl mb-4">🔌</div>
-                    <p class="text-base font-semibold mb-3 text-slate-700 dark:text-cyan-50">ATlast server not running</p>
-                    <p class="text-[13px] text-red-600 dark:text-red-400 mt-2 p-3 bg-red-50 dark:bg-red-950/50 rounded border-l-[3px] border-red-600">
+                    <p class="text-base font-semibold mb-3 text-slate-700 dark:text-cyan-50">Server not available</p>
+                    <p id="dev-instructions" class="text-[13px] text-red-600 dark:text-red-400 mt-2 p-3 bg-red-50 dark:bg-red-950/50 rounded border-l-[3px] border-red-600">
                         Start the dev server:<br />
                         <code class="bg-black/10 dark:bg-white/10 px-2 py-1 rounded font-mono text-[11px] inline-block my-2">npx netlify-cli dev --filter @atlast/web</code>
                     </p>

packages/extension/src/popup/popup.ts

···
   type ExtensionState
 } from '../lib/messaging.js';
 
+// Build mode injected at build time
+declare const __BUILD_MODE__: string;
+
 /**
  * DOM elements
  */
···
   statusMessage: document.getElementById('status-message')!,
   errorMessage: document.getElementById('error-message')!,
   serverUrl: document.getElementById('server-url')!,
+  devInstructions: document.getElementById('dev-instructions')!,
   progressFill: document.getElementById('progress-fill')! as HTMLElement,
   btnStart: document.getElementById('btn-start')! as HTMLButtonElement,
   btnUpload: document.getElementById('btn-upload')! as HTMLButtonElement,
···
   if (!isOnline) {
     console.log('[Popup] ❌ Server is offline');
     showState('offline');
-    elements.serverUrl.textContent = `Trying to reach: ${getApiUrl()}`;
+
+    // Show appropriate message based on build mode
+    const apiUrl = getApiUrl();
+    const isDev = __BUILD_MODE__ === 'development';
+
+    // Hide dev instructions in production
+    if (!isDev) {
+      elements.devInstructions.classList.add('hidden');
+    }
+
+    elements.serverUrl.textContent = isDev
+      ? `Development server at ${apiUrl}`
+      : `Cannot reach ${apiUrl}`;
+
     return false;
   }
 

packages/extension/tailwind.config.js

···
 /** @type {import('tailwindcss').Config} */
 export default {
-  // Use class-based dark mode to match web app
-  darkMode: "class",
+  // Use media query dark mode to automatically respect system preference
+  darkMode: "media",
 
   // Scan popup HTML and TypeScript files
   content: [