clawfire 0.4.3 → 0.5.0

package/dist/dev.js

@@ -1456,39 +1456,106 @@ async function checkCli(projectDir) {
   }
   return result;
 }
-async function fetchFirebaseSdkConfig(projectDir) {
-  const output = await execWithTimeout(
-    "firebase",
-    ["apps:sdkconfig", "web", "--json"],
-    projectDir,
-    15e3
-  );
-  const data = JSON.parse(output);
-  if (data?.result?.sdkConfig) {
-    return data.result.sdkConfig;
-  }
-  if (data?.result?.fileContents) {
-    const contents = data.result.fileContents;
-    const config = {};
-    const extract = (key) => {
-      const match = contents.match(new RegExp(`"${key}"\\s*:\\s*"([^"]+)"`));
-      return match ? match[1] : void 0;
-    };
-    config.apiKey = extract("apiKey");
-    config.authDomain = extract("authDomain");
-    config.projectId = extract("projectId");
-    config.storageBucket = extract("storageBucket");
-    config.messagingSenderId = extract("messagingSenderId");
-    config.appId = extract("appId");
-    return config;
+async function fetchFirebaseSdkConfig(projectDir, appId) {
+  if (appId) {
+    try {
+      const output = await execWithTimeout(
+        "firebase",
+        ["apps:sdkconfig", "web", appId, "--json"],
+        projectDir,
+        15e3
+      );
+      const config = parseSdkConfigOutput(output);
+      if (config) return config;
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Unknown error";
+      throw new Error(`Failed to fetch config for web app ${appId}: ${msg}`);
+    }
+    throw new Error("Could not parse Firebase SDK config from CLI output");
+  }
+  try {
+    const output = await execWithTimeout(
+      "firebase",
+      ["apps:sdkconfig", "web", "--json"],
+      projectDir,
+      15e3
+    );
+    const config = parseSdkConfigOutput(output);
+    if (config) return config;
+  } catch {
+  }
+  let webApps = [];
+  try {
+    const appsOutput = await execWithTimeout(
+      "firebase",
+      ["apps:list", "--json"],
+      projectDir,
+      15e3
+    );
+    const appsData = JSON.parse(appsOutput);
+    const allApps = appsData?.result || [];
+    webApps = allApps.filter((a) => a.platform === "WEB").map((a) => ({
+      appId: String(a.appId || ""),
+      displayName: String(a.displayName || "")
+    })).filter((a) => a.appId);
+  } catch {
+    throw new Error(
+      "Failed to fetch Firebase SDK config. Make sure you are logged in and have an active project selected."
+    );
+  }
+  if (webApps.length === 0) {
+    throw new Error(
+      "No web app registered in this Firebase project. Go to Firebase Console > Project Settings > General > Your apps > Add app (Web) to create one, then click Auto-fill again."
+    );
+  }
+  const firstAppId = webApps[0].appId;
+  try {
+    const output = await execWithTimeout(
+      "firebase",
+      ["apps:sdkconfig", "web", firstAppId, "--json"],
+      projectDir,
+      15e3
+    );
+    const config = parseSdkConfigOutput(output);
+    if (config) return config;
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : "Unknown error";
+    throw new Error(`Failed to fetch config for web app ${firstAppId}: ${msg}`);
   }
   throw new Error("Could not parse Firebase SDK config from CLI output");
 }
+function parseSdkConfigOutput(output) {
+  try {
+    const data = JSON.parse(output);
+    if (data?.result?.sdkConfig) {
+      return data.result.sdkConfig;
+    }
+    if (data?.result?.fileContents) {
+      const contents = data.result.fileContents;
+      const config = {};
+      const extract = (key) => {
+        const match = contents.match(new RegExp(`"${key}"\\s*:\\s*"([^"]+)"`));
+        return match ? match[1] : void 0;
+      };
+      config.apiKey = extract("apiKey");
+      config.authDomain = extract("authDomain");
+      config.projectId = extract("projectId");
+      config.storageBucket = extract("storageBucket");
+      config.messagingSenderId = extract("messagingSenderId");
+      config.appId = extract("appId");
+      if (config.apiKey || config.projectId) return config;
+    }
+  } catch {
+  }
+  return null;
+}
 function execWithTimeout(command, args, cwd, timeoutMs) {
   return new Promise((resolve7, reject) => {
-    const proc = execFile(command, args, { cwd, timeout: timeoutMs }, (err, stdout) => {
+    const proc = execFile(command, args, { cwd, timeout: timeoutMs }, (err, stdout, stderr) => {
       if (err) {
-        reject(err);
+        const detail = stderr?.trim() || stdout?.trim() || "";
+        const enriched = new Error(`${err.message}${detail ? "\n" + detail : ""}`);
+        reject(enriched);
       } else {
         resolve7(stdout);
       }
@@ -1522,17 +1589,20 @@ function generateDashboardHtml(options) {
 
         <!-- Step indicators -->
         <div id="setup-steps" style="display:flex;gap:0;margin-bottom:20px;overflow:hidden;border-radius:8px;border:1px solid #2a2a2a;">
-          <div id="step-ind-1" class="step-ind" style="flex:1;padding:8px 12px;text-align:center;font-size:12px;font-weight:600;background:#1a1a2e;color:#f97316;border-right:1px solid #2a2a2a;">
-            1. CLI Install
+          <div id="step-ind-1" class="step-ind" style="flex:1;padding:8px 12px;text-align:center;font-size:11px;font-weight:600;background:#1a1a2e;color:#f97316;border-right:1px solid #2a2a2a;">
+            1. CLI
           </div>
-          <div id="step-ind-2" class="step-ind" style="flex:1;padding:8px 12px;text-align:center;font-size:12px;font-weight:600;background:#0a0a0a;color:#666;border-right:1px solid #2a2a2a;">
+          <div id="step-ind-2" class="step-ind" style="flex:1;padding:8px 12px;text-align:center;font-size:11px;font-weight:600;background:#0a0a0a;color:#666;border-right:1px solid #2a2a2a;">
             2. Login
           </div>
-          <div id="step-ind-3" class="step-ind" style="flex:1;padding:8px 12px;text-align:center;font-size:12px;font-weight:600;background:#0a0a0a;color:#666;border-right:1px solid #2a2a2a;">
-            3. Select Project
+          <div id="step-ind-3" class="step-ind" style="flex:1;padding:8px 12px;text-align:center;font-size:11px;font-weight:600;background:#0a0a0a;color:#666;border-right:1px solid #2a2a2a;">
+            3. Project
           </div>
-          <div id="step-ind-4" class="step-ind" style="flex:1;padding:8px 12px;text-align:center;font-size:12px;font-weight:600;background:#0a0a0a;color:#666;">
-            4. Auto-fill
+          <div id="step-ind-4" class="step-ind" style="flex:1;padding:8px 12px;text-align:center;font-size:11px;font-weight:600;background:#0a0a0a;color:#666;border-right:1px solid #2a2a2a;">
+            4. Web App
+          </div>
+          <div id="step-ind-5" class="step-ind" style="flex:1;padding:8px 12px;text-align:center;font-size:11px;font-weight:600;background:#0a0a0a;color:#666;">
+            5. Auto-fill
           </div>
         </div>
 
@@ -1607,16 +1677,54 @@ function generateDashboardHtml(options) {
           </div>
         </div>
 
-        <!-- Step 4: Done / Auto-fill -->
+        <!-- Step 4: Web App -->
         <div id="step-4" style="display:none;">
           <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
             <span id="step4-icon" style="font-size:20px;">&#9898;</span>
+            <div>
+              <div style="font-weight:600;color:#e5e5e5;font-size:15px;">Web App</div>
+              <div id="step4-detail" style="font-size:13px;color:#a3a3a3;">Checking web apps...</div>
+            </div>
+          </div>
+          <div id="step4-action" style="display:none;">
+            <!-- Existing web apps list -->
+            <div id="webapp-list" style="display:none;">
+              <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+                <select id="webapp-select" style="padding:8px 12px;background:#0a0a0a;border:1px solid #2a2a2a;border-radius:6px;color:#e5e5e5;font-size:13px;font-family:monospace;min-width:280px;outline:none;">
+                  <option value="">Loading web apps...</option>
+                </select>
+                <button id="select-webapp-btn" onclick="selectWebApp()" style="padding:8px 20px;background:#22c55e;color:#000;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;">
+                  Use This App
+                </button>
+                <button onclick="showCreateWebApp()" style="padding:8px 12px;background:transparent;border:1px solid #2a2a2a;border-radius:6px;color:#a3a3a3;font-size:13px;cursor:pointer;">
+                  + Create New
+                </button>
+              </div>
+            </div>
+            <!-- Create new web app form -->
+            <div id="webapp-create" style="display:none;">
+              <div style="font-size:13px;color:#a3a3a3;margin-bottom:8px;">No web app found. Create one to get Firebase SDK config:</div>
+              <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+                <input id="webapp-name" type="text" placeholder="My Web App" style="padding:8px 12px;background:#0a0a0a;border:1px solid #2a2a2a;border-radius:6px;color:#e5e5e5;font-size:13px;min-width:220px;outline:none;" />
+                <button id="create-webapp-btn" onclick="createWebApp()" style="padding:8px 20px;background:#f97316;color:#000;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;">
+                  Create Web App
+                </button>
+              </div>
+            </div>
+            <div id="webapp-status" style="display:none;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;"></div>
+          </div>
+        </div>
+
+        <!-- Step 5: Done / Auto-fill -->
+        <div id="step-5" style="display:none;">
+          <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px;">
+            <span id="step5-icon" style="font-size:20px;">&#9898;</span>
             <div>
               <div style="font-weight:600;color:#e5e5e5;font-size:15px;">Auto-fill Config</div>
-              <div id="step4-detail" style="font-size:13px;color:#a3a3a3;">Ready to auto-fill your clawfire.config.ts</div>
+              <div id="step5-detail" style="font-size:13px;color:#a3a3a3;">Ready to auto-fill your clawfire.config.ts</div>
             </div>
           </div>
-          <div id="step4-action">
+          <div id="step5-action">
             <button id="autofill-wizard-btn" onclick="autoFillConfig()" style="padding:8px 20px;background:#f97316;color:#000;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;">
               Auto-fill Config Now
             </button>
@@ -1761,7 +1869,7 @@ function generateDashboardHtml(options) {
   // \u2500\u2500\u2500 Setup Wizard \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
   function setStepIndicator(activeStep) {
-    for (var i = 1; i <= 4; i++) {
+    for (var i = 1; i <= 5; i++) {
       var el = document.getElementById('step-ind-' + i);
       if (i < activeStep) {
         el.style.background = '#0a1a0a';
@@ -1783,7 +1891,7 @@ function generateDashboardHtml(options) {
     var CIRCLE = '\\u26AA';
 
     // Hide all steps first
-    for (var i = 1; i <= 4; i++) {
+    for (var i = 1; i <= 5; i++) {
       document.getElementById('step-' + i).style.display = 'none';
     }
     document.getElementById('setup-done').style.display = 'none';
@@ -1793,10 +1901,13 @@ function generateDashboardHtml(options) {
 
     if (status.nextStep === 'done') {
       // All done!
-      setStepIndicator(5);
+      setStepIndicator(6);
       document.getElementById('setup-done').style.display = 'block';
-      document.getElementById('setup-done-detail').textContent =
-        'Logged in as ' + status.auth.user + ' | Project: ' + status.project.id;
+      var detail = 'Logged in as ' + status.auth.user + ' | Project: ' + status.project.id;
+      if (status.webApp && status.webApp.displayName) {
+        detail += ' | App: ' + status.webApp.displayName;
+      }
+      document.getElementById('setup-done-detail').textContent = detail;
       return;
     }
 
@@ -1863,11 +1974,32 @@ function generateDashboardHtml(options) {
       return;
     }
 
-    // Step 4: Auto-fill
+    // Step 4: Web App
     var step4 = document.getElementById('step-4');
     step4.style.display = 'block';
-    document.getElementById('step4-icon').textContent = CIRCLE;
-    setStepIndicator(4);
+    if (status.webApp && status.webApp.appId) {
+      document.getElementById('step4-icon').textContent = GREEN;
+      document.getElementById('step4-detail').textContent = 'Web app: ' + (status.webApp.displayName || status.webApp.appId);
+      document.getElementById('step4-action').style.display = 'block';
+      // Show list with current selection
+      loadWebAppList(status.webApp.appId);
+    } else {
+      document.getElementById('step4-icon').textContent = YELLOW;
+      document.getElementById('step4-detail').textContent = 'No web app selected';
+      document.getElementById('step4-action').style.display = 'block';
+      loadWebAppList('');
+    }
+
+    if (status.nextStep === 'create-web-app') {
+      setStepIndicator(4);
+      return;
+    }
+
+    // Step 5: Auto-fill
+    var step5 = document.getElementById('step-5');
+    step5.style.display = 'block';
+    document.getElementById('step5-icon').textContent = CIRCLE;
+    setStepIndicator(5);
   }
 
   // \u2500\u2500\u2500 Step 1: Install CLI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
@@ -2062,6 +2194,148 @@ function generateDashboardHtml(options) {
     });
   };
 
+  // \u2500\u2500\u2500 Step 4: Web App \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function loadWebAppList(currentAppId, retryCount) {
+    retryCount = retryCount || 0;
+    var listDiv = document.getElementById('webapp-list');
+    var createDiv = document.getElementById('webapp-create');
+    var select = document.getElementById('webapp-select');
+
+    fetch(API + '/__dev/setup/web-apps')
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.error) {
+        if (retryCount < 2) {
+          setTimeout(function() { loadWebAppList(currentAppId, retryCount + 1); }, 3000);
+          return;
+        }
+        createDiv.style.display = 'block';
+        listDiv.style.display = 'none';
+        document.getElementById('webapp-create').querySelector('div').textContent = 'Error loading apps: ' + data.error;
+        return;
+      }
+      if (!data.apps || data.apps.length === 0) {
+        // No web apps \u2014 show create form
+        createDiv.style.display = 'block';
+        listDiv.style.display = 'none';
+        return;
+      }
+
+      // Show list
+      listDiv.style.display = 'block';
+      createDiv.style.display = 'none';
+      select.innerHTML = '<option value="">-- Select a web app --</option>';
+      data.apps.forEach(function(app) {
+        var opt = document.createElement('option');
+        opt.value = app.appId;
+        opt.setAttribute('data-name', app.displayName || '');
+        opt.textContent = (app.displayName || 'Unnamed') + ' (' + app.appId.slice(-12) + ')';
+        if (app.appId === currentAppId) opt.selected = true;
+        select.appendChild(opt);
+      });
+      select.disabled = false;
+    })
+    .catch(function() {
+      if (retryCount < 2) {
+        setTimeout(function() { loadWebAppList(currentAppId, retryCount + 1); }, 3000);
+        return;
+      }
+      createDiv.style.display = 'block';
+      listDiv.style.display = 'none';
+    });
+  }
+
+  window.showCreateWebApp = function() {
+    document.getElementById('webapp-list').style.display = 'none';
+    document.getElementById('webapp-create').style.display = 'block';
+    document.getElementById('webapp-name').focus();
+  };
+
+  window.selectWebApp = function() {
+    var select = document.getElementById('webapp-select');
+    var status = document.getElementById('webapp-status');
+    var appId = select.value;
+    if (!appId) {
+      status.textContent = 'Please select a web app first.';
+      status.style.cssText = 'display:block;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;background:#1a1a0a;border:1px solid #eab308;color:#eab308;';
+      return;
+    }
+    var selectedOption = select.options[select.selectedIndex];
+    var displayName = selectedOption.getAttribute('data-name') || '';
+
+    var btn = document.getElementById('select-webapp-btn');
+    btn.disabled = true;
+    btn.textContent = 'Saving...';
+
+    fetch(API + '/__dev/setup/select-web-app', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ appId: appId, displayName: displayName })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.success) {
+        status.textContent = data.message;
+        status.style.cssText = 'display:block;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;background:#0a1a0a;border:1px solid #22c55e;color:#22c55e;';
+        setTimeout(refreshSetupStatus, 1000);
+      } else {
+        status.textContent = data.message;
+        status.style.cssText = 'display:block;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+        btn.disabled = false;
+        btn.textContent = 'Use This App';
+      }
+    })
+    .catch(function(err) {
+      status.textContent = 'Error: ' + err.message;
+      status.style.cssText = 'display:block;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+      btn.disabled = false;
+      btn.textContent = 'Use This App';
+    });
+  };
+
+  window.createWebApp = function() {
+    var nameInput = document.getElementById('webapp-name');
+    var btn = document.getElementById('create-webapp-btn');
+    var status = document.getElementById('webapp-status');
+    var displayName = nameInput.value.trim();
+
+    if (!displayName) {
+      status.textContent = 'Please enter a name for the web app.';
+      status.style.cssText = 'display:block;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;background:#1a1a0a;border:1px solid #eab308;color:#eab308;';
+      return;
+    }
+
+    btn.disabled = true;
+    btn.textContent = 'Creating...';
+    status.textContent = 'Creating web app... This may take a moment.';
+    status.style.cssText = 'display:block;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;background:#0a0a1a;border:1px solid #3b82f6;color:#3b82f6;';
+
+    fetch(API + '/__dev/setup/create-web-app', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ displayName: displayName })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.success) {
+        status.textContent = data.message;
+        status.style.cssText = 'display:block;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;background:#0a1a0a;border:1px solid #22c55e;color:#22c55e;';
+        setTimeout(refreshSetupStatus, 1000);
+      } else {
+        status.textContent = data.message;
+        status.style.cssText = 'display:block;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+        btn.disabled = false;
+        btn.textContent = 'Create Web App';
+      }
+    })
+    .catch(function(err) {
+      status.textContent = 'Error: ' + err.message;
+      status.style.cssText = 'display:block;margin-top:8px;font-size:13px;padding:8px 12px;border-radius:6px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+      btn.disabled = false;
+      btn.textContent = 'Create Web App';
+    });
+  };
+
   // \u2500\u2500\u2500 Refresh Setup Status \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   function refreshSetupStatus() {
     fetch(API + '/__dev/setup/status')
@@ -2237,7 +2511,12 @@ function generateDashboardHtml(options) {
     if (wizStatus) wizStatus.style.display = 'none';
 
     fetch(API + '/__dev/firebase-sdk-config')
-    .then(function(r) { return r.json(); })
+    .then(function(r) {
+      if (!r.ok) {
+        return r.json().catch(function() { return { error: 'Server error (' + r.status + ')' }; });
+      }
+      return r.json();
+    })
     .then(function(data) {
       if (data.error) {
         showAutoFillResult(false, data.error);
@@ -2451,15 +2730,34 @@ import { resolve as resolve5, join as join4 } from "path";
 import { tmpdir, platform } from "os";
 var FirebaseSetup = class {
   projectDir;
+  stateFilePath;
   constructor(projectDir) {
     this.projectDir = projectDir;
+    this.stateFilePath = resolve5(projectDir, ".clawfire-setup.json");
+  }
+  // ─── State Persistence ────────────────────────────────────────────
+  loadState() {
+    try {
+      if (existsSync6(this.stateFilePath)) {
+        return JSON.parse(readFileSync4(this.stateFilePath, "utf-8"));
+      }
+    } catch {
+    }
+    return {};
+  }
+  saveState(partial) {
+    const current = this.loadState();
+    const merged = { ...current, ...partial, lastUpdated: (/* @__PURE__ */ new Date()).toISOString() };
+    writeFileSync2(this.stateFilePath, JSON.stringify(merged, null, 2) + "\n", "utf-8");
   }
   // ─── Status Check ──────────────────────────────────────────────────
   async getStatus() {
+    const savedState = this.loadState();
     const status = {
       cli: { installed: false, version: "" },
       auth: { authenticated: false, user: "" },
       project: { id: "", hasFirebaserc: false },
+      webApp: { appId: savedState.webAppId || "", displayName: savedState.webAppDisplayName || "" },
       ready: false,
       nextStep: "install-cli"
     };
@@ -2501,6 +2799,10 @@ var FirebaseSetup = class {
       status.nextStep = "select-project";
       return status;
     }
+    if (!status.webApp.appId) {
+      status.nextStep = "create-web-app";
+      return status;
+    }
     status.ready = true;
     status.nextStep = "done";
     return status;
@@ -2654,6 +2956,12 @@ var FirebaseSetup = class {
     if (!projectId || !/^[a-z0-9-]+$/.test(projectId)) {
       return { success: false, message: "Invalid project ID format." };
     }
+    const savedState = this.loadState();
+    if (savedState.projectId && savedState.projectId !== projectId) {
+      this.saveState({ projectId, webAppId: void 0, webAppDisplayName: void 0 });
+    } else {
+      this.saveState({ projectId });
+    }
     try {
       await this.execTimeout(
         "firebase",
@@ -2689,6 +2997,52 @@ var FirebaseSetup = class {
       }
     }
   }
+  // ─── Web App Management ───────────────────────────────────────────
+  async listWebApps() {
+    try {
+      const output = await this.execTimeout(
+        "firebase",
+        ["apps:list", "--json"],
+        15e3
+      );
+      const data = JSON.parse(output);
+      const allApps = data?.result || [];
+      const webApps = allApps.filter((a) => a.platform === "WEB").map((a) => ({
+        appId: String(a.appId || ""),
+        displayName: String(a.displayName || "")
+      })).filter((a) => a.appId);
+      return { apps: webApps };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Unknown error";
+      return { apps: [], error: msg };
+    }
+  }
+  async createWebApp(displayName) {
+    if (!displayName || displayName.length < 1) {
+      return { success: false, message: "Display name is required." };
+    }
+    try {
+      const output = await this.execTimeout(
+        "firebase",
+        ["apps:create", "web", displayName, "--json"],
+        3e4
+      );
+      const data = JSON.parse(output);
+      const appId = data?.result?.appId || "";
+      if (appId) {
+        this.saveState({ webAppId: appId, webAppDisplayName: displayName });
+        return { success: true, appId, message: `Web app "${displayName}" created successfully.` };
+      }
+      return { success: false, message: "App created but could not retrieve app ID." };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Unknown error";
+      return { success: false, message: `Failed to create web app: ${msg}` };
+    }
+  }
+  selectWebApp(appId, displayName) {
+    this.saveState({ webAppId: appId, webAppDisplayName: displayName });
+    return { success: true, message: `Web app "${displayName}" selected.` };
+  }
   // ─── Helpers ───────────────────────────────────────────────────────
   execTimeout(command, args, timeoutMs) {
     return new Promise((resolve7, reject) => {
@@ -3578,7 +3932,8 @@ ${liveReloadScript}
       return;
     }
     if (url.pathname === "/__dev/firebase-sdk-config" && req.method === "GET") {
-      fetchFirebaseSdkConfig(this.options.projectDir).then((config) => sendJson(config)).catch((err) => sendJson({ error: err instanceof Error ? err.message : "Failed to fetch SDK config" }, 500));
+      const savedState = this.firebaseSetup.loadState();
+      fetchFirebaseSdkConfig(this.options.projectDir, savedState.webAppId).then((config) => sendJson(config)).catch((err) => sendJson({ error: err instanceof Error ? err.message : "Failed to fetch SDK config" }, 500));
       return;
     }
     if (url.pathname === "/__dev/env" && req.method === "GET") {
@@ -3663,6 +4018,53 @@ ${liveReloadScript}
       });
       return;
     }
+    if (url.pathname === "/__dev/setup/web-apps" && req.method === "GET") {
+      this.firebaseSetup.listWebApps().then((result) => sendJson(result)).catch((err) => sendJson({ apps: [], error: err instanceof Error ? err.message : "Failed" }, 500));
+      return;
+    }
+    if (url.pathname === "/__dev/setup/create-web-app" && req.method === "POST") {
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk;
+      });
+      req.on("end", () => {
+        try {
+          const data = JSON.parse(body);
+          if (!data.displayName) {
+            sendJson({ success: false, message: "displayName is required" }, 400);
+            return;
+          }
+          this.firebaseSetup.createWebApp(data.displayName).then((result) => {
+            clearFirebaseStatusCache();
+            sendJson(result);
+          }).catch((err) => sendJson({ success: false, message: err instanceof Error ? err.message : "Failed" }, 500));
+        } catch {
+          sendJson({ success: false, message: "Invalid JSON body" }, 400);
+        }
+      });
+      return;
+    }
+    if (url.pathname === "/__dev/setup/select-web-app" && req.method === "POST") {
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk;
+      });
+      req.on("end", () => {
+        try {
+          const data = JSON.parse(body);
+          if (!data.appId) {
+            sendJson({ success: false, message: "appId is required" }, 400);
+            return;
+          }
+          const result = this.firebaseSetup.selectWebApp(data.appId, data.displayName || "");
+          clearFirebaseStatusCache();
+          sendJson(result);
+        } catch {
+          sendJson({ success: false, message: "Invalid JSON body" }, 400);
+        }
+      });
+      return;
+    }
     res.writeHead(404);
     res.end("Not found");
   }