clawfire 0.6.1 → 0.6.3

package/dist/dev.js

@@ -1778,7 +1778,48 @@ function generateDashboardHtml(options) {
       </div>
     </div>
 
-    <!-- Section 3: Config Overview -->
+    <!-- Section 3: Database -->
+    <div style="margin-bottom:32px;">
+      <h2 style="font-size:18px;font-weight:700;color:#f97316;margin-bottom:16px;">Database</h2>
+      <div id="db-card" style="padding:20px;border-radius:12px;border:1px solid #2a2a2a;background:#141414;">
+        <!-- Mode Toggle -->
+        <div style="display:flex;align-items:center;gap:16px;margin-bottom:16px;">
+          <span style="font-size:13px;color:#a3a3a3;font-weight:600;">Mode:</span>
+          <label id="db-mode-memory" style="display:flex;align-items:center;gap:6px;cursor:pointer;" onclick="switchDbMode('memory')">
+            <span id="db-radio-memory" style="width:16px;height:16px;border-radius:50%;border:2px solid #f97316;display:inline-flex;align-items:center;justify-content:center;">
+              <span style="width:8px;height:8px;border-radius:50%;background:#f97316;"></span>
+            </span>
+            <span style="color:#e5e5e5;font-size:13px;">In-Memory</span>
+          </label>
+          <label id="db-mode-firestore" style="display:flex;align-items:center;gap:6px;cursor:pointer;" onclick="switchDbMode('firestore')">
+            <span id="db-radio-firestore" style="width:16px;height:16px;border-radius:50%;border:2px solid #666;display:inline-flex;align-items:center;justify-content:center;">
+            </span>
+            <span style="color:#a3a3a3;font-size:13px;">Firestore</span>
+          </label>
+        </div>
+
+        <!-- Connect to Firestore panel -->
+        <div id="db-connect-panel" style="padding:16px;border-radius:8px;background:#0a0a0a;border:1px solid #2a2a2a;">
+          <div style="font-weight:600;color:#e5e5e5;font-size:14px;margin-bottom:6px;">Connect to Firestore</div>
+          <div style="font-size:13px;color:#a3a3a3;margin-bottom:12px;">Creates database, deploys open security rules, and enables Firestore mode.</div>
+          <button id="db-connect-btn" onclick="connectFirestore()" style="padding:8px 20px;background:#f97316;color:#000;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;">
+            Connect to Firestore
+          </button>
+          <div style="margin-top:10px;font-size:12px;color:#eab308;">
+            &#9888; Open rules (allow all) for dev only. Use /clawfire-model for production rules.
+          </div>
+          <div id="db-connect-status" style="display:none;margin-top:10px;font-size:13px;padding:10px 14px;border-radius:6px;"></div>
+        </div>
+
+        <!-- Firestore Connected banner -->
+        <div id="db-connected-banner" style="display:none;padding:16px;border-radius:8px;background:#0a1a0a;border:1px solid #22c55e;text-align:center;">
+          <div style="font-size:14px;color:#22c55e;font-weight:700;">Firestore Connected</div>
+          <div style="font-size:12px;color:#a3a3a3;margin-top:4px;">Data persists across server restarts.</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Section 4: Config Overview -->
     <div style="margin-bottom:32px;">
       <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>
@@ -1874,11 +1915,13 @@ function generateDashboardHtml(options) {
       fetch(API + '/__dev/config').then(function(r) { return r.json(); }),
       fetch(API + '/__dev/env').then(function(r) { return r.json(); }),
       fetch(API + '/__dev/setup/status').then(function(r) { return r.json(); }),
+      fetch(API + '/__dev/db-mode').then(function(r) { return r.json(); }),
     ]).then(function(results) {
       renderFirebaseStatus(results[0]);
       renderConfig(results[1]);
       renderEnvVars(results[2]);
       renderSetupWizard(results[3]);
+      renderDbMode(results[4].mode || 'memory');
       document.getElementById('dash-loading').style.display = 'none';
       document.getElementById('dash-loaded').style.display = 'block';
     }).catch(function(err) {
@@ -2663,6 +2706,100 @@ function generateDashboardHtml(options) {
     });
   };
 
+  // \u2500\u2500\u2500 Database Mode \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 loadDbMode() {
+    fetch(API + '/__dev/db-mode')
+    .then(function(r) { return r.json(); })
+    .then(function(data) { renderDbMode(data.mode || 'memory'); })
+    .catch(function() { renderDbMode('memory'); });
+  }
+
+  function renderDbMode(mode) {
+    var radioMem = document.getElementById('db-radio-memory');
+    var radioFs = document.getElementById('db-radio-firestore');
+    var connectPanel = document.getElementById('db-connect-panel');
+    var connectedBanner = document.getElementById('db-connected-banner');
+    var memLabel = document.getElementById('db-mode-memory');
+    var fsLabel = document.getElementById('db-mode-firestore');
+
+    if (mode === 'firestore') {
+      radioMem.innerHTML = '';
+      radioMem.style.borderColor = '#666';
+      radioFs.innerHTML = '<span style="width:8px;height:8px;border-radius:50%;background:#f97316;"></span>';
+      radioFs.style.borderColor = '#f97316';
+      memLabel.querySelector('span:last-child').style.color = '#a3a3a3';
+      fsLabel.querySelector('span:last-child').style.color = '#e5e5e5';
+      connectPanel.style.display = 'none';
+      connectedBanner.style.display = 'block';
+    } else {
+      radioMem.innerHTML = '<span style="width:8px;height:8px;border-radius:50%;background:#f97316;"></span>';
+      radioMem.style.borderColor = '#f97316';
+      radioFs.innerHTML = '';
+      radioFs.style.borderColor = '#666';
+      memLabel.querySelector('span:last-child').style.color = '#e5e5e5';
+      fsLabel.querySelector('span:last-child').style.color = '#a3a3a3';
+      connectPanel.style.display = 'block';
+      connectedBanner.style.display = 'none';
+    }
+  }
+
+  window.switchDbMode = function(mode) {
+    var status = document.getElementById('db-connect-status');
+    status.style.display = 'none';
+
+    fetch(API + '/__dev/db-mode', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ mode: mode })
+    })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.success) {
+        renderDbMode(data.mode);
+      } else {
+        status.textContent = data.message;
+        status.style.cssText = 'display:block;margin-top:10px;font-size:13px;padding:10px 14px;border-radius:6px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+      }
+    })
+    .catch(function(err) {
+      status.textContent = 'Error: ' + err.message;
+      status.style.cssText = 'display:block;margin-top:10px;font-size:13px;padding:10px 14px;border-radius:6px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+    });
+  };
+
+  window.connectFirestore = function() {
+    var btn = document.getElementById('db-connect-btn');
+    var status = document.getElementById('db-connect-status');
+    btn.disabled = true;
+    btn.textContent = 'Connecting...';
+    status.textContent = 'Creating Firestore database... This may take a minute.';
+    status.style.cssText = 'display:block;margin-top:10px;font-size:13px;padding:10px 14px;border-radius:6px;background:#0a0a1a;border:1px solid #3b82f6;color:#3b82f6;';
+
+    fetch(API + '/__dev/setup/create-firestore', { method: 'POST' })
+    .then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.success) {
+        status.textContent = data.message;
+        status.style.cssText = 'display:block;margin-top:10px;font-size:13px;padding:10px 14px;border-radius:6px;background:#0a1a0a;border:1px solid #22c55e;color:#22c55e;';
+        // Switch UI to firestore mode
+        setTimeout(function() { renderDbMode('firestore'); }, 1500);
+        // Refresh firebase status
+        fetch(API + '/__dev/firebase-status').then(function(r) { return r.json(); }).then(function(d) { renderFirebaseStatus(d); }).catch(function(){});
+      } else {
+        status.textContent = data.message;
+        status.style.cssText = 'display:block;margin-top:10px;font-size:13px;padding:10px 14px;border-radius:6px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+      }
+      btn.disabled = false;
+      btn.textContent = 'Connect to Firestore';
+    })
+    .catch(function(err) {
+      status.textContent = 'Error: ' + err.message;
+      status.style.cssText = 'display:block;margin-top:10px;font-size:13px;padding:10px 14px;border-radius:6px;background:#1c0808;border:1px solid #ef4444;color:#ef4444;';
+      btn.disabled = false;
+      btn.textContent = 'Connect to Firestore';
+    });
+  };
+
   // \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 || [];
@@ -3239,6 +3376,51 @@ var FirebaseSetup = class {
     writeFileSync2(firebaseJsonPath, JSON.stringify(config, null, 2) + "\n", "utf-8");
     return { success: true, message: `${service} enabled in firebase.json.` };
   }
+  // ─── Firestore Database Automation ──────────────────────────────────
+  /**
+   * Create Firestore database via CLI.
+   * Handles "ALREADY_EXISTS" gracefully — returns success.
+   */
+  async createFirestoreDatabase(location = "nam5") {
+    try {
+      await this.execTimeout(
+        "firebase",
+        ["firestore:databases:create", "(default)", "--location", location, "--json"],
+        6e4
+      );
+      return { success: true, message: `Firestore database created (location: ${location}).` };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Unknown error";
+      if (msg.includes("ALREADY_EXISTS") || msg.includes("already exists")) {
+        return { success: true, message: "Firestore database already exists." };
+      }
+      return { success: false, message: `Failed to create Firestore database: ${msg}` };
+    }
+  }
+  /**
+   * Deploy open Firestore security rules for dev testing.
+   * Writes `allow read, write: if true` rules and deploys them.
+   */
+  async deployFirestoreRules(openForDev = true) {
+    const rulesPath = resolve5(this.projectDir, "firestore.rules");
+    try {
+      if (openForDev) {
+        writeFileSync2(
+          rulesPath,
+          "rules_version = '2';\nservice cloud.firestore {\n  match /databases/{database}/documents {\n    match /{document=**} {\n      allow read, write: if true;\n    }\n  }\n}\n"
+        );
+      }
+      await this.execTimeout(
+        "firebase",
+        ["deploy", "--only", "firestore:rules", "--json"],
+        6e4
+      );
+      return { success: true, message: "Firestore rules deployed." };
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Unknown error";
+      return { success: false, message: `Failed to deploy Firestore rules: ${msg}` };
+    }
+  }
   // ─── Helpers ───────────────────────────────────────────────────────
   execTimeout(command, args, timeoutMs) {
     return new Promise((resolve7, reject) => {
@@ -3575,6 +3757,19 @@ var DevServer = class {
   }
   // ─── Route Loading ─────────────────────────────────────────────────
   async loadRoutes() {
+    const setupState = this.firebaseSetup.loadState();
+    if (setupState.dbMode === "firestore") {
+      const config = this.readProjectConfig();
+      const firebaseConfig = {};
+      for (const field of config.fields) {
+        if (!field.isPlaceholder) firebaseConfig[field.key] = field.value;
+      }
+      if (firebaseConfig.apiKey && firebaseConfig.projectId) {
+        process.env.CLAWFIRE_FIREBASE_CONFIG = JSON.stringify(firebaseConfig);
+      }
+    } else {
+      delete process.env.CLAWFIRE_FIREBASE_CONFIG;
+    }
     this.router.destroy();
     this.router = createRouter({
       cors: ["*"],
@@ -4285,6 +4480,69 @@ ${liveReloadScript}
       });
       return;
     }
+    if (url.pathname === "/__dev/db-mode" && req.method === "GET") {
+      const state = this.firebaseSetup.loadState();
+      sendJson({ mode: state.dbMode || "memory" });
+      return;
+    }
+    if (url.pathname === "/__dev/db-mode" && req.method === "POST") {
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk;
+      });
+      req.on("end", async () => {
+        try {
+          const data = JSON.parse(body);
+          const mode = data.mode;
+          if (mode !== "memory" && mode !== "firestore") {
+            sendJson({ success: false, message: "Invalid mode. Use: memory, firestore" }, 400);
+            return;
+          }
+          this.firebaseSetup.saveState({ dbMode: mode });
+          await this.loadRoutes();
+          this.regeneratePlayground();
+          sendJson({ success: true, mode, message: `Database mode switched to "${mode}".` });
+        } catch (err) {
+          sendJson({ success: false, message: err instanceof Error ? err.message : "Failed" }, 400);
+        }
+      });
+      return;
+    }
+    if (url.pathname === "/__dev/setup/create-firestore" && req.method === "POST") {
+      (async () => {
+        try {
+          const createResult = await this.firebaseSetup.createFirestoreDatabase();
+          if (!createResult.success) {
+            sendJson(createResult);
+            return;
+          }
+          const enableResult = this.firebaseSetup.enableService("firestore");
+          if (!enableResult.success) {
+            sendJson(enableResult);
+            return;
+          }
+          const rulesResult = await this.firebaseSetup.deployFirestoreRules(true);
+          if (!rulesResult.success) {
+            sendJson(rulesResult);
+            return;
+          }
+          this.firebaseSetup.saveState({ dbMode: "firestore" });
+          await this.loadRoutes();
+          this.regeneratePlayground();
+          clearFirebaseStatusCache();
+          sendJson({
+            success: true,
+            message: "Firestore connected! Database created, rules deployed, mode switched to Firestore."
+          });
+        } catch (err) {
+          sendJson({
+            success: false,
+            message: err instanceof Error ? err.message : "Failed to setup Firestore"
+          }, 500);
+        }
+      })();
+      return;
+    }
     if (url.pathname === "/__dev/setup/select-web-app" && req.method === "POST") {
       let body = "";
       req.on("data", (chunk) => {