clawfire 0.3.0 → 0.3.2

package/dist/dev.cjs

@@ -1494,6 +1494,34 @@ 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;
+  }
+  throw new Error("Could not parse Firebase SDK config from CLI output");
+}
 function execWithTimeout(command, args, cwd, timeoutMs) {
   return new Promise((resolve6, reject) => {
     const proc = (0, import_node_child_process.execFile)(command, args, { cwd, timeout: timeoutMs }, (err, stdout) => {
@@ -1542,9 +1570,25 @@ function generateDashboardHtml(options) {
 
     <!-- Section 2: Config Overview -->
     <div style="margin-bottom:32px;">
-      <h2 style="font-size:18px;font-weight:700;color:#f97316;margin-bottom:16px;">Config Overview</h2>
+      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
+        <h2 style="font-size:18px;font-weight:700;color:#f97316;">Config Overview</h2>
+        <button id="autofill-btn" onclick="autoFillConfig()" style="padding:6px 14px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;">Auto-fill from Firebase</button>
+      </div>
+      <div id="autofill-status" style="display:none;padding:8px 12px;border-radius:6px;margin-bottom:12px;font-size:13px;"></div>
       <div id="config-section" style="border-radius:8px;border:1px solid #2a2a2a;background:#141414;overflow:hidden;">
-        <div id="config-content" style="padding:16px;font-family:monospace;font-size:13px;line-height:1.8;"></div>
+        <table id="config-table" style="width:100%;border-collapse:collapse;font-size:13px;">
+          <thead>
+            <tr style="border-bottom:1px solid #2a2a2a;">
+              <th style="padding:10px 16px;text-align:left;color:#a3a3a3;font-weight:500;width:180px;">Key</th>
+              <th style="padding:10px 16px;text-align:left;color:#a3a3a3;font-weight:500;">Value</th>
+              <th style="padding:10px 16px;text-align:right;color:#a3a3a3;font-weight:500;width:80px;">Action</th>
+            </tr>
+          </thead>
+          <tbody id="config-tbody"></tbody>
+        </table>
+        <div id="config-empty" style="display:none;padding:32px;text-align:center;color:#666;">
+          No clawfire.config.ts found.
+        </div>
       </div>
     </div>
 
@@ -1574,7 +1618,7 @@ function generateDashboardHtml(options) {
   </div>
 
   <!-- Env Modal -->
-  <div id="env-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000;display:none;align-items:center;justify-content:center;">
+  <div id="env-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000;align-items:center;justify-content:center;">
     <div style="background:#1e1e1e;border:1px solid #2a2a2a;border-radius:12px;padding:24px;width:440px;max-width:90vw;">
       <h3 id="modal-title" style="font-size:16px;font-weight:700;color:#e5e5e5;margin-bottom:16px;">Add Variable</h3>
       <div style="margin-bottom:12px;">
@@ -1602,6 +1646,7 @@ function generateDashboardHtml(options) {
 (function() {
   var API = 'http://localhost:${apiPort}';
   var envData = [];
+  var configData = [];
   var editingKey = null;
 
   // \u2500\u2500\u2500 Load Dashboard Data \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
@@ -1627,7 +1672,6 @@ function generateDashboardHtml(options) {
 
   // \u2500\u2500\u2500 Firebase 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\u2500\u2500\u2500\u2500
   function renderFirebaseStatus(data) {
-    // CLI Banner
     var dot = document.getElementById('cli-dot');
     var text = document.getElementById('cli-text');
     var proj = document.getElementById('cli-project');
@@ -1669,7 +1713,6 @@ function generateDashboardHtml(options) {
       grid.appendChild(card);
     });
 
-    // Config Warnings
     if (data.configWarnings && data.configWarnings.length > 0) {
       var warningCard = document.createElement('div');
       warningCard.style.cssText = 'padding:16px;border-radius:8px;border:1px solid #eab308;background:#1a1a0a;grid-column:1/-1;';
@@ -1682,26 +1725,167 @@ function generateDashboardHtml(options) {
     }
   }
 
-  // \u2500\u2500\u2500 Config Overview \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 Config Overview (editable) \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 renderConfig(data) {
-    var el = document.getElementById('config-content');
-    if (!data || !data.fields || data.fields.length === 0) {
-      el.innerHTML = '<span style="color:#666;">No clawfire.config.ts found or config is empty.</span>';
+    var tbody = document.getElementById('config-tbody');
+    var empty = document.getElementById('config-empty');
+    var table = document.getElementById('config-table');
+
+    configData = (data && data.fields) ? data.fields : [];
+
+    if (configData.length === 0) {
+      table.style.display = 'none';
+      empty.style.display = 'block';
       return;
     }
-    var html = '';
-    data.fields.forEach(function(field) {
+
+    table.style.display = 'table';
+    empty.style.display = 'none';
+    tbody.innerHTML = '';
+
+    configData.forEach(function(field) {
+      var tr = document.createElement('tr');
+      tr.style.borderBottom = '1px solid #2a2a2a';
+      tr.id = 'cfg-row-' + field.key;
       var color = field.isPlaceholder ? '#eab308' : '#a3a3a3';
       var badge = field.isPlaceholder ? ' <span style="background:#eab30822;color:#eab308;padding:1px 6px;border-radius:4px;font-size:10px;">PLACEHOLDER</span>' : '';
-      html += '<div style="padding:4px 0;display:flex;gap:8px;align-items:center;">';
-      html += '<span style="color:#e5e5e5;min-width:180px;">' + escHtml(field.key) + '</span>';
-      html += '<span style="color:' + color + ';">' + escHtml(field.value) + '</span>';
-      html += badge;
-      html += '</div>';
+      tr.innerHTML =
+        '<td style="padding:10px 16px;color:#e5e5e5;font-family:monospace;white-space:nowrap;">' + escHtml(field.key) + '</td>' +
+        '<td style="padding:10px 16px;font-family:monospace;">' +
+          '<span id="cfg-val-' + field.key + '" style="color:' + color + ';">' + escHtml(field.value) + '</span>' +
+          badge +
+          '<input id="cfg-input-' + field.key + '" type="text" value="' + escHtml(field.value) + '" style="display:none;width:100%;padding:4px 8px;background:#0a0a0a;border:1px solid #2a2a2a;border-radius:4px;color:#e5e5e5;font-family:monospace;font-size:13px;outline:none;" />' +
+        '</td>' +
+        '<td style="padding:10px 16px;text-align:right;white-space:nowrap;">' +
+          '<button id="cfg-edit-' + field.key + '" onclick="editConfigField(\\'' + escHtml(field.key) + '\\')" style="background:none;border:none;color:#3b82f6;cursor:pointer;font-size:12px;padding:4px 8px;">Edit</button>' +
+          '<button id="cfg-save-' + field.key + '" onclick="saveConfigField(\\'' + escHtml(field.key) + '\\')" style="display:none;background:none;border:none;color:#22c55e;cursor:pointer;font-size:12px;padding:4px 8px;">Save</button>' +
+          '<button id="cfg-cancel-' + field.key + '" onclick="cancelConfigEdit(\\'' + escHtml(field.key) + '\\')" style="display:none;background:none;border:none;color:#a3a3a3;cursor:pointer;font-size:12px;padding:4px 8px;">Cancel</button>' +
+        '</td>';
+      tbody.appendChild(tr);
     });
-    el.innerHTML = html;
   }
 
+  window.editConfigField = function(key) {
+    var valSpan = document.getElementById('cfg-val-' + key);
+    var input = document.getElementById('cfg-input-' + key);
+    var editBtn = document.getElementById('cfg-edit-' + key);
+    var saveBtn = document.getElementById('cfg-save-' + key);
+    var cancelBtn = document.getElementById('cfg-cancel-' + key);
+    if (!valSpan || !input) return;
+    // Hide all badges in this cell
+    var badges = valSpan.parentNode.querySelectorAll('span[style*="PLACEHOLDER"]');
+    for (var i = 0; i < badges.length; i++) badges[i].style.display = 'none';
+    valSpan.style.display = 'none';
+    input.style.display = 'block';
+    input.focus();
+    input.select();
+    editBtn.style.display = 'none';
+    saveBtn.style.display = 'inline';
+    cancelBtn.style.display = 'inline';
+  };
+
+  window.cancelConfigEdit = function(key) {
+    var valSpan = document.getElementById('cfg-val-' + key);
+    var input = document.getElementById('cfg-input-' + key);
+    var editBtn = document.getElementById('cfg-edit-' + key);
+    var saveBtn = document.getElementById('cfg-save-' + key);
+    var cancelBtn = document.getElementById('cfg-cancel-' + key);
+    if (!valSpan || !input) return;
+    var badges = valSpan.parentNode.querySelectorAll('span[style*="border-radius"]');
+    for (var i = 0; i < badges.length; i++) badges[i].style.display = '';
+    valSpan.style.display = '';
+    input.style.display = 'none';
+    input.value = valSpan.textContent;
+    editBtn.style.display = 'inline';
+    saveBtn.style.display = 'none';
+    cancelBtn.style.display = 'none';
+  };
+
+  window.saveConfigField = function(key) {
+    var input = document.getElementById('cfg-input-' + key);
+    var saveBtn = document.getElementById('cfg-save-' + key);
+    if (!input) return;
+    var value = input.value;
+    saveBtn.textContent = '...';
+    fetch(API + '/__dev/config', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'set', key: key, value: value })
+    }).then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.error) { alert('Error: ' + data.error); saveBtn.textContent = 'Save'; return; }
+      // Reload config
+      return fetch(API + '/__dev/config').then(function(r) { return r.json(); });
+    })
+    .then(function(data) { if (data) renderConfig(data); })
+    .catch(function(err) { alert('Failed: ' + err.message); saveBtn.textContent = 'Save'; });
+  };
+
+  // \u2500\u2500\u2500 Auto-fill from Firebase \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
+  window.autoFillConfig = function() {
+    var btn = document.getElementById('autofill-btn');
+    var status = document.getElementById('autofill-status');
+    btn.disabled = true;
+    btn.textContent = 'Fetching...';
+    status.style.display = 'none';
+
+    fetch(API + '/__dev/firebase-sdk-config')
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.error) {
+        status.textContent = data.error;
+        status.style.cssText = 'display:block;padding:8px 12px;border-radius:6px;margin-bottom:12px;font-size:13px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+        btn.disabled = false;
+        btn.textContent = 'Auto-fill from Firebase';
+        return;
+      }
+
+      // Map SDK config keys to clawfire.config.ts keys
+      var fields = {};
+      if (data.apiKey) fields.apiKey = data.apiKey;
+      if (data.authDomain) fields.authDomain = data.authDomain;
+      if (data.projectId) fields.projectId = data.projectId;
+      if (data.storageBucket) fields.storageBucket = data.storageBucket;
+      if (data.appId) fields.appId = data.appId;
+
+      var count = Object.keys(fields).length;
+      if (count === 0) {
+        status.textContent = 'No web app config found. Create a Web app in Firebase Console first.';
+        status.style.cssText = 'display:block;padding:8px 12px;border-radius:6px;margin-bottom:12px;font-size:13px;background:#1a1a0a;border:1px solid #eab308;color:#eab308;';
+        btn.disabled = false;
+        btn.textContent = 'Auto-fill from Firebase';
+        return;
+      }
+
+      // Save all fields at once
+      return fetch(API + '/__dev/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ action: 'set-multiple', fields: fields })
+      }).then(function(r) { return r.json(); })
+      .then(function(result) {
+        if (result.error) {
+          status.textContent = 'Error saving: ' + result.error;
+          status.style.cssText = 'display:block;padding:8px 12px;border-radius:6px;margin-bottom:12px;font-size:13px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+        } else {
+          status.textContent = count + ' fields updated from Firebase project!';
+          status.style.cssText = 'display:block;padding:8px 12px;border-radius:6px;margin-bottom:12px;font-size:13px;background:#0a1a0a;border:1px solid #22c55e;color:#22c55e;';
+          // Reload config view
+          return fetch(API + '/__dev/config').then(function(r) { return r.json(); })
+          .then(function(cfg) { renderConfig(cfg); });
+        }
+      });
+    })
+    .catch(function(err) {
+      status.textContent = 'Failed: ' + err.message;
+      status.style.cssText = 'display:block;padding:8px 12px;border-radius:6px;margin-bottom:12px;font-size:13px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+    })
+    .finally(function() {
+      btn.disabled = false;
+      btn.textContent = 'Auto-fill from Firebase';
+    });
+  };
+
   // \u2500\u2500\u2500 Environment Variables \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 renderEnvVars(data) {
     envData = data.variables || [];
@@ -1740,7 +1924,7 @@ function generateDashboardHtml(options) {
     });
   }
 
-  // \u2500\u2500\u2500 Modal \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\u2500\u2500\u2500\u2500\u2500\u2500
+  // \u2500\u2500\u2500 Env Modal \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\u2500\u2500
   window.showEnvModal = function(key) {
     editingKey = key || null;
     var modal = document.getElementById('env-modal');
@@ -2685,6 +2869,37 @@ ${liveReloadScript}
       sendJson(this.readProjectConfig());
       return;
     }
+    if (url.pathname === "/__dev/config" && req.method === "POST") {
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk;
+      });
+      req.on("end", () => {
+        try {
+          const data = JSON.parse(body);
+          if (data.action === "set" && data.key && data.value !== void 0) {
+            this.updateProjectConfig(data.key, String(data.value));
+            clearFirebaseStatusCache();
+            sendJson({ ok: true });
+          } else if (data.action === "set-multiple" && data.fields) {
+            for (const [key, value] of Object.entries(data.fields)) {
+              this.updateProjectConfig(key, String(value));
+            }
+            clearFirebaseStatusCache();
+            sendJson({ ok: true });
+          } else {
+            sendJson({ error: "Invalid action" }, 400);
+          }
+        } catch (err) {
+          sendJson({ error: err instanceof Error ? err.message : "Failed" }, 400);
+        }
+      });
+      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));
+      return;
+    }
     if (url.pathname === "/__dev/env" && req.method === "GET") {
       try {
         sendJson(this.envManager.read());
@@ -2740,6 +2955,25 @@ ${liveReloadScript}
     }
     return { fields };
   }
+  /** Update a single key's value in clawfire.config.ts */
+  updateProjectConfig(key, value) {
+    const configPath = (0, import_node_path4.resolve)(this.options.projectDir, "clawfire.config.ts");
+    if (!(0, import_node_fs4.existsSync)(configPath)) {
+      throw new Error("clawfire.config.ts not found");
+    }
+    let content = (0, import_node_fs4.readFileSync)(configPath, "utf-8");
+    const pattern = new RegExp(
+      `(${this.escapeRegex(key)}\\s*:\\s*)["'\`][^"'\`]*["'\`]`
+    );
+    if (!pattern.test(content)) {
+      throw new Error(`Key "${key}" not found in config`);
+    }
+    content = content.replace(pattern, `$1"${value.replace(/"/g, '\\"')}"`);
+    (0, import_node_fs4.writeFileSync)(configPath, content, "utf-8");
+  }
+  escapeRegex(s) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
 };
 async function startDevServer(options) {
   const server = new DevServer(options);