clawfire 0.2.1 → 0.3.0

package/dist/dev.js

@@ -1,7 +1,7 @@
 // src/dev/dev-server.ts
 import http from "http";
-import { resolve as resolve3, relative as relative3, extname as extname3 } from "path";
-import { existsSync as existsSync4, readFileSync as readFileSync2 } from "fs";
+import { resolve as resolve5, relative as relative3, extname as extname3 } from "path";
+import { existsSync as existsSync6, readFileSync as readFileSync4 } from "fs";
 import { pathToFileURL } from "url";
 
 // src/core/schema.ts
@@ -1192,6 +1192,627 @@ ${html}
   }
 };
 
+// src/dev/env-manager.ts
+import { readFileSync as readFileSync2, writeFileSync, existsSync as existsSync4 } from "fs";
+import { resolve as resolve3 } from "path";
+var KEY_PATTERN = /^[A-Z_][A-Z0-9_]*$/i;
+var PLACEHOLDER_PATTERNS = [
+  /^YOUR_/i,
+  /^CHANGE_ME$/i,
+  /^TODO$/i,
+  /^REPLACE_/i,
+  /^XXX/i,
+  /^$/
+];
+var EnvManager = class {
+  envPath;
+  descriptionsPath;
+  constructor(projectDir) {
+    this.envPath = resolve3(projectDir, ".env");
+    this.descriptionsPath = resolve3(projectDir, ".env.descriptions.json");
+  }
+  /** Read all env variables with descriptions and placeholder detection */
+  read() {
+    const descriptions = this.readDescriptions();
+    const variables = [];
+    if (!existsSync4(this.envPath)) {
+      return { variables, descriptions };
+    }
+    const content = readFileSync2(this.envPath, "utf-8");
+    const lines = content.split("\n");
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i].trim();
+      if (!line || line.startsWith("#")) continue;
+      const eqIdx = line.indexOf("=");
+      if (eqIdx === -1) continue;
+      const key = line.slice(0, eqIdx).trim();
+      const value = line.slice(eqIdx + 1).trim();
+      if (!KEY_PATTERN.test(key)) continue;
+      variables.push({
+        key,
+        value,
+        description: descriptions[key] || "",
+        isPlaceholder: isPlaceholder(value),
+        line: i + 1
+      });
+    }
+    return { variables, descriptions };
+  }
+  /** Set or update an env variable */
+  set(key, value, description) {
+    if (!KEY_PATTERN.test(key)) {
+      throw new Error(`Invalid key: "${key}" \u2014 must match ${KEY_PATTERN}`);
+    }
+    let lines = [];
+    if (existsSync4(this.envPath)) {
+      lines = readFileSync2(this.envPath, "utf-8").split("\n");
+    }
+    let found = false;
+    for (let i = 0; i < lines.length; i++) {
+      const trimmed = lines[i].trim();
+      if (trimmed.startsWith("#") || !trimmed) continue;
+      const eqIdx = trimmed.indexOf("=");
+      if (eqIdx === -1) continue;
+      const existingKey = trimmed.slice(0, eqIdx).trim();
+      if (existingKey === key) {
+        lines[i] = `${key}=${value}`;
+        found = true;
+        break;
+      }
+    }
+    if (!found) {
+      if (lines.length > 0 && lines[lines.length - 1].trim() !== "") {
+        lines.push(`${key}=${value}`);
+      } else {
+        lines.push(`${key}=${value}`);
+      }
+    }
+    writeFileSync(this.envPath, lines.join("\n"), "utf-8");
+    if (description !== void 0) {
+      const descriptions = this.readDescriptions();
+      descriptions[key] = description;
+      this.writeDescriptions(descriptions);
+    }
+  }
+  /** Delete an env variable */
+  delete(key) {
+    if (!existsSync4(this.envPath)) return;
+    const lines = readFileSync2(this.envPath, "utf-8").split("\n");
+    const filtered = lines.filter((line) => {
+      const trimmed = line.trim();
+      if (trimmed.startsWith("#") || !trimmed) return true;
+      const eqIdx = trimmed.indexOf("=");
+      if (eqIdx === -1) return true;
+      return trimmed.slice(0, eqIdx).trim() !== key;
+    });
+    writeFileSync(this.envPath, filtered.join("\n"), "utf-8");
+    const descriptions = this.readDescriptions();
+    if (key in descriptions) {
+      delete descriptions[key];
+      this.writeDescriptions(descriptions);
+    }
+  }
+  // ─── Private ─────────────────────────────────────────────────────
+  readDescriptions() {
+    if (!existsSync4(this.descriptionsPath)) return {};
+    try {
+      return JSON.parse(readFileSync2(this.descriptionsPath, "utf-8"));
+    } catch {
+      return {};
+    }
+  }
+  writeDescriptions(descriptions) {
+    writeFileSync(
+      this.descriptionsPath,
+      JSON.stringify(descriptions, null, 2) + "\n",
+      "utf-8"
+    );
+  }
+};
+function isPlaceholder(value) {
+  return PLACEHOLDER_PATTERNS.some((pattern) => pattern.test(value));
+}
+
+// src/dev/firebase-status.ts
+import { existsSync as existsSync5, readFileSync as readFileSync3 } from "fs";
+import { resolve as resolve4 } from "path";
+import { execFile } from "child_process";
+var cachedStatus = null;
+var cacheTime = 0;
+var CACHE_TTL = 3e4;
+async function checkFirebaseStatus(projectDir) {
+  const now = Date.now();
+  if (cachedStatus && now - cacheTime < CACHE_TTL) {
+    return cachedStatus;
+  }
+  const [fileStatus, cliStatus] = await Promise.all([
+    checkFiles(projectDir),
+    checkCli(projectDir)
+  ]);
+  const status = {
+    cli: cliStatus,
+    project: fileStatus.project,
+    services: fileStatus.services,
+    configWarnings: fileStatus.configWarnings,
+    timestamp: now
+  };
+  cachedStatus = status;
+  cacheTime = now;
+  return status;
+}
+function clearFirebaseStatusCache() {
+  cachedStatus = null;
+  cacheTime = 0;
+}
+function checkFiles(projectDir) {
+  const services = [];
+  const configWarnings = [];
+  const firebaseJsonPath = resolve4(projectDir, "firebase.json");
+  let hasFirebaseJson = false;
+  let firebaseConfig = {};
+  if (existsSync5(firebaseJsonPath)) {
+    hasFirebaseJson = true;
+    try {
+      firebaseConfig = JSON.parse(readFileSync3(firebaseJsonPath, "utf-8"));
+    } catch {
+    }
+  }
+  if (firebaseConfig.hosting) {
+    services.push({ name: "Hosting", status: "configured", detail: "firebase.json" });
+  } else {
+    services.push({ name: "Hosting", status: "missing" });
+  }
+  const firestoreRulesPath = resolve4(projectDir, "firestore.rules");
+  if (firebaseConfig.firestore) {
+    if (existsSync5(firestoreRulesPath)) {
+      services.push({ name: "Firestore", status: "configured", detail: "Rules file found" });
+    } else {
+      services.push({ name: "Firestore", status: "placeholder", detail: "Configured but no rules file" });
+    }
+  } else {
+    services.push({ name: "Firestore", status: "missing" });
+  }
+  const functionsIndexPath = resolve4(projectDir, "functions/index.ts");
+  if (firebaseConfig.functions) {
+    if (existsSync5(functionsIndexPath)) {
+      services.push({ name: "Functions", status: "configured", detail: "functions/index.ts found" });
+    } else {
+      services.push({ name: "Functions", status: "placeholder", detail: "Configured but no entry file" });
+    }
+  } else {
+    services.push({ name: "Functions", status: "missing" });
+  }
+  const storageRulesPath = resolve4(projectDir, "storage.rules");
+  if (firebaseConfig.storage) {
+    if (existsSync5(storageRulesPath)) {
+      services.push({ name: "Storage", status: "configured", detail: "Rules file found" });
+    } else {
+      services.push({ name: "Storage", status: "placeholder", detail: "Configured but no rules file" });
+    }
+  } else {
+    services.push({ name: "Storage", status: "missing" });
+  }
+  const indexesPath = resolve4(projectDir, "firestore.indexes.json");
+  if (existsSync5(indexesPath)) {
+    services.push({ name: "Indexes", status: "configured", detail: "firestore.indexes.json" });
+  } else if (firebaseConfig.firestore) {
+    services.push({ name: "Indexes", status: "placeholder", detail: "No indexes file" });
+  }
+  const configPath = resolve4(projectDir, "clawfire.config.ts");
+  if (existsSync5(configPath)) {
+    try {
+      const configContent = readFileSync3(configPath, "utf-8");
+      const placeholderMatches = configContent.match(/YOUR_[A-Z_]+/g);
+      if (placeholderMatches) {
+        for (const match of new Set(placeholderMatches)) {
+          configWarnings.push(`Placeholder found: ${match}`);
+        }
+      }
+    } catch {
+    }
+  }
+  let projectId = "";
+  const firebasercPath = resolve4(projectDir, ".firebaserc");
+  if (existsSync5(firebasercPath)) {
+    try {
+      const rc = JSON.parse(readFileSync3(firebasercPath, "utf-8"));
+      projectId = rc?.projects?.default || "";
+    } catch {
+    }
+  }
+  return {
+    project: { id: projectId, hasFirebaseJson },
+    services,
+    configWarnings
+  };
+}
+async function checkCli(projectDir) {
+  const result = {
+    installed: false,
+    version: "",
+    authenticated: false,
+    user: ""
+  };
+  try {
+    const version = await execWithTimeout("firebase", ["--version"], projectDir, 5e3);
+    result.installed = true;
+    result.version = version.trim();
+  } catch {
+    return result;
+  }
+  try {
+    const loginOutput = await execWithTimeout(
+      "firebase",
+      ["login:list", "--json"],
+      projectDir,
+      5e3
+    );
+    const loginData = JSON.parse(loginOutput);
+    if (loginData?.result && Array.isArray(loginData.result) && loginData.result.length > 0) {
+      result.authenticated = true;
+      result.user = loginData.result[0]?.user?.email || loginData.result[0]?.email || "";
+    }
+  } catch {
+  }
+  return result;
+}
+function execWithTimeout(command, args, cwd, timeoutMs) {
+  return new Promise((resolve6, reject) => {
+    const proc = execFile(command, args, { cwd, timeout: timeoutMs }, (err, stdout) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve6(stdout);
+      }
+    });
+    const timer = setTimeout(() => {
+      proc.kill("SIGTERM");
+      reject(new Error("Timeout"));
+    }, timeoutMs + 500);
+    proc.on("exit", () => clearTimeout(timer));
+  });
+}
+
+// src/dev/dashboard-html.ts
+function generateDashboardHtml(options) {
+  const { apiPort } = options;
+  return `
+<div id="dashboard-content" style="padding:24px;max-width:1200px;margin:0 auto;font-family:var(--font, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);">
+
+  <!-- Loading State -->
+  <div id="dash-loading" style="text-align:center;padding:60px 0;color:#a3a3a3;">
+    <div style="font-size:24px;margin-bottom:8px;">Loading dashboard...</div>
+  </div>
+
+  <!-- Dashboard Sections (hidden until loaded) -->
+  <div id="dash-loaded" style="display:none;">
+
+    <!-- Section 1: Firebase Status -->
+    <div style="margin-bottom:32px;">
+      <h2 style="font-size:18px;font-weight:700;color:#f97316;margin-bottom:16px;">Firebase Status</h2>
+
+      <!-- CLI Banner -->
+      <div id="cli-banner" style="padding:12px 16px;border-radius:8px;border:1px solid #2a2a2a;background:#141414;margin-bottom:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
+        <span id="cli-dot" style="width:10px;height:10px;border-radius:50%;background:#666;display:inline-block;flex-shrink:0;"></span>
+        <span id="cli-text" style="color:#e5e5e5;font-size:14px;">Checking CLI...</span>
+        <span id="cli-project" style="color:#a3a3a3;font-size:12px;margin-left:auto;font-family:monospace;"></span>
+      </div>
+
+      <!-- Service Cards Grid -->
+      <div id="service-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;"></div>
+    </div>
+
+    <!-- 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 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>
+      </div>
+    </div>
+
+    <!-- Section 3: Environment Variables -->
+    <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;">Environment Variables</h2>
+        <button id="env-add-btn" onclick="showEnvModal()" style="padding:6px 14px;background:#f97316;color:#000;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;">+ Add Variable</button>
+      </div>
+      <div id="env-table-wrap" style="border-radius:8px;border:1px solid #2a2a2a;background:#141414;overflow:hidden;">
+        <table id="env-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;">Key</th>
+              <th style="padding:10px 16px;text-align:left;color:#a3a3a3;font-weight:500;">Value</th>
+              <th style="padding:10px 16px;text-align:left;color:#a3a3a3;font-weight:500;">Description</th>
+              <th style="padding:10px 16px;text-align:right;color:#a3a3a3;font-weight:500;width:120px;">Actions</th>
+            </tr>
+          </thead>
+          <tbody id="env-tbody"></tbody>
+        </table>
+        <div id="env-empty" style="display:none;padding:32px;text-align:center;color:#666;">
+          No environment variables found. Click "+ Add Variable" to create one.
+        </div>
+      </div>
+    </div>
+  </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 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;">
+        <label style="display:block;font-size:12px;color:#a3a3a3;margin-bottom:4px;">Key</label>
+        <input id="modal-key" type="text" placeholder="API_KEY" style="width:100%;padding:8px 12px;background:#0a0a0a;border:1px solid #2a2a2a;border-radius:6px;color:#e5e5e5;font-family:monospace;font-size:14px;outline:none;" />
+      </div>
+      <div style="margin-bottom:12px;">
+        <label style="display:block;font-size:12px;color:#a3a3a3;margin-bottom:4px;">Value</label>
+        <input id="modal-value" type="text" placeholder="your-value-here" style="width:100%;padding:8px 12px;background:#0a0a0a;border:1px solid #2a2a2a;border-radius:6px;color:#e5e5e5;font-family:monospace;font-size:14px;outline:none;" />
+      </div>
+      <div style="margin-bottom:20px;">
+        <label style="display:block;font-size:12px;color:#a3a3a3;margin-bottom:4px;">Description (optional)</label>
+        <input id="modal-desc" type="text" placeholder="What this variable is for" style="width:100%;padding:8px 12px;background:#0a0a0a;border:1px solid #2a2a2a;border-radius:6px;color:#e5e5e5;font-size:14px;outline:none;" />
+      </div>
+      <div id="modal-error" style="display:none;padding:8px 12px;background:#1c0808;border:1px solid #ef4444;border-radius:6px;color:#ef4444;font-size:12px;margin-bottom:12px;"></div>
+      <div style="display:flex;gap:8px;justify-content:flex-end;">
+        <button onclick="hideEnvModal()" style="padding:8px 16px;background:transparent;border:1px solid #2a2a2a;border-radius:6px;color:#a3a3a3;cursor:pointer;font-size:13px;">Cancel</button>
+        <button id="modal-save-btn" onclick="saveEnvVar()" style="padding:8px 16px;background:#f97316;border:none;border-radius:6px;color:#000;font-weight:600;cursor:pointer;font-size:13px;">Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+(function() {
+  var API = 'http://localhost:${apiPort}';
+  var envData = [];
+  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
+  window._loadDashboard = function() {
+    if (window._dashboardLoaded) return;
+    window._dashboardLoaded = true;
+    Promise.all([
+      fetch(API + '/__dev/firebase-status').then(function(r) { return r.json(); }),
+      fetch(API + '/__dev/config').then(function(r) { return r.json(); }),
+      fetch(API + '/__dev/env').then(function(r) { return r.json(); }),
+    ]).then(function(results) {
+      renderFirebaseStatus(results[0]);
+      renderConfig(results[1]);
+      renderEnvVars(results[2]);
+      document.getElementById('dash-loading').style.display = 'none';
+      document.getElementById('dash-loaded').style.display = 'block';
+    }).catch(function(err) {
+      document.getElementById('dash-loading').innerHTML =
+        '<div style="color:#ef4444;">Failed to load dashboard data</div>' +
+        '<div style="color:#666;font-size:13px;margin-top:8px;">' + err.message + '</div>';
+    });
+  };
+
+  // \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');
+
+    if (!data.cli.installed) {
+      dot.style.background = '#ef4444';
+      text.textContent = 'Firebase CLI not installed';
+    } else if (!data.cli.authenticated) {
+      dot.style.background = '#eab308';
+      text.textContent = 'Firebase CLI v' + data.cli.version + ' \u2014 Not logged in';
+    } else {
+      dot.style.background = '#22c55e';
+      text.textContent = 'Firebase CLI v' + data.cli.version + ' \u2014 ' + data.cli.user;
+    }
+
+    if (data.project.id) {
+      proj.textContent = 'Project: ' + data.project.id;
+    } else {
+      proj.textContent = 'No active project';
+      proj.style.color = '#eab308';
+    }
+
+    // Service Cards
+    var grid = document.getElementById('service-grid');
+    grid.innerHTML = '';
+    var statusColors = { configured: '#22c55e', placeholder: '#eab308', missing: '#666' };
+    var statusLabels = { configured: 'Ready', placeholder: 'Needs Setup', missing: 'Not Configured' };
+
+    data.services.forEach(function(svc) {
+      var card = document.createElement('div');
+      card.style.cssText = 'padding:16px;border-radius:8px;border:1px solid #2a2a2a;background:#141414;';
+      card.innerHTML =
+        '<div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">' +
+          '<span style="width:8px;height:8px;border-radius:50%;background:' + statusColors[svc.status] + ';display:inline-block;"></span>' +
+          '<span style="font-weight:600;color:#e5e5e5;">' + svc.name + '</span>' +
+        '</div>' +
+        '<div style="font-size:12px;color:' + statusColors[svc.status] + ';">' + statusLabels[svc.status] + '</div>' +
+        (svc.detail ? '<div style="font-size:11px;color:#666;margin-top:4px;">' + svc.detail + '</div>' : '');
+      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;';
+      warningCard.innerHTML =
+        '<div style="font-weight:600;color:#eab308;margin-bottom:6px;">Config Warnings</div>' +
+        data.configWarnings.map(function(w) {
+          return '<div style="font-size:12px;color:#eab308;font-family:monospace;">' + escHtml(w) + '</div>';
+        }).join('');
+      grid.appendChild(warningCard);
+    }
+  }
+
+  // \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
+  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>';
+      return;
+    }
+    var html = '';
+    data.fields.forEach(function(field) {
+      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>';
+    });
+    el.innerHTML = html;
+  }
+
+  // \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 || [];
+    var tbody = document.getElementById('env-tbody');
+    var empty = document.getElementById('env-empty');
+    var table = document.getElementById('env-table');
+
+    if (envData.length === 0) {
+      table.style.display = 'none';
+      empty.style.display = 'block';
+      return;
+    }
+
+    table.style.display = 'table';
+    empty.style.display = 'none';
+    tbody.innerHTML = '';
+
+    envData.forEach(function(v) {
+      var tr = document.createElement('tr');
+      tr.style.borderBottom = '1px solid #2a2a2a';
+      var maskedVal = v.value ? v.value.slice(0, 3) + '...' + v.value.slice(-2) : '';
+      if (v.value.length <= 5) maskedVal = '***';
+      var placeholderBadge = v.isPlaceholder ? ' <span style="background:#eab30822;color:#eab308;padding:1px 6px;border-radius:4px;font-size:10px;">PLACEHOLDER</span>' : '';
+      tr.innerHTML =
+        '<td style="padding:10px 16px;color:#e5e5e5;font-family:monospace;white-space:nowrap;">' + escHtml(v.key) + placeholderBadge + '</td>' +
+        '<td style="padding:10px 16px;color:#a3a3a3;font-family:monospace;">' +
+          '<span class="env-val" data-key="' + escAttr(v.key) + '" data-masked="' + escAttr(maskedVal) + '" data-full="' + escAttr(v.value) + '">' + escHtml(maskedVal) + '</span>' +
+          ' <button onclick="toggleReveal(this)" style="background:none;border:none;color:#666;cursor:pointer;font-size:11px;padding:2px 4px;">reveal</button>' +
+        '</td>' +
+        '<td style="padding:10px 16px;color:#666;font-size:12px;">' + escHtml(v.description || '') + '</td>' +
+        '<td style="padding:10px 16px;text-align:right;white-space:nowrap;">' +
+          '<button onclick="editEnvVar(\\'' + escAttr(v.key) + '\\')" style="background:none;border:none;color:#3b82f6;cursor:pointer;font-size:12px;padding:4px 8px;">Edit</button>' +
+          '<button onclick="deleteEnvVar(\\'' + escAttr(v.key) + '\\')" style="background:none;border:none;color:#ef4444;cursor:pointer;font-size:12px;padding:4px 8px;">Delete</button>' +
+        '</td>';
+      tbody.appendChild(tr);
+    });
+  }
+
+  // \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
+  window.showEnvModal = function(key) {
+    editingKey = key || null;
+    var modal = document.getElementById('env-modal');
+    var title = document.getElementById('modal-title');
+    var keyInput = document.getElementById('modal-key');
+    var valInput = document.getElementById('modal-value');
+    var descInput = document.getElementById('modal-desc');
+    var errorEl = document.getElementById('modal-error');
+    errorEl.style.display = 'none';
+
+    if (editingKey) {
+      title.textContent = 'Edit Variable';
+      keyInput.value = editingKey;
+      keyInput.readOnly = true;
+      keyInput.style.opacity = '0.5';
+      var existing = envData.find(function(v) { return v.key === editingKey; });
+      valInput.value = existing ? existing.value : '';
+      descInput.value = existing ? existing.description : '';
+    } else {
+      title.textContent = 'Add Variable';
+      keyInput.value = '';
+      keyInput.readOnly = false;
+      keyInput.style.opacity = '1';
+      valInput.value = '';
+      descInput.value = '';
+    }
+
+    modal.style.display = 'flex';
+    (editingKey ? valInput : keyInput).focus();
+  };
+
+  window.hideEnvModal = function() {
+    document.getElementById('env-modal').style.display = 'none';
+    editingKey = null;
+  };
+
+  window.editEnvVar = function(key) {
+    showEnvModal(key);
+  };
+
+  window.saveEnvVar = function() {
+    var key = document.getElementById('modal-key').value.trim();
+    var value = document.getElementById('modal-value').value;
+    var desc = document.getElementById('modal-desc').value.trim();
+    var errorEl = document.getElementById('modal-error');
+
+    if (!key) {
+      errorEl.textContent = 'Key is required';
+      errorEl.style.display = 'block';
+      return;
+    }
+    if (!/^[A-Z_][A-Z0-9_]*$/i.test(key)) {
+      errorEl.textContent = 'Invalid key format. Use UPPER_SNAKE_CASE.';
+      errorEl.style.display = 'block';
+      return;
+    }
+
+    fetch(API + '/__dev/env', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'set', key: key, value: value, description: desc || undefined })
+    }).then(function(r) { return r.json(); })
+    .then(function(data) {
+      if (data.error) {
+        errorEl.textContent = data.error;
+        errorEl.style.display = 'block';
+        return;
+      }
+      hideEnvModal();
+      return fetch(API + '/__dev/env').then(function(r) { return r.json(); });
+    })
+    .then(function(data) { if (data) renderEnvVars(data); })
+    .catch(function(err) {
+      errorEl.textContent = err.message;
+      errorEl.style.display = 'block';
+    });
+  };
+
+  window.deleteEnvVar = function(key) {
+    if (!confirm('Delete ' + key + '?')) return;
+    fetch(API + '/__dev/env', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ action: 'delete', key: key })
+    }).then(function() {
+      return fetch(API + '/__dev/env').then(function(r) { return r.json(); });
+    }).then(function(data) { renderEnvVars(data); })
+    .catch(function() {});
+  };
+
+  window.toggleReveal = function(btn) {
+    var span = btn.previousElementSibling;
+    var masked = span.getAttribute('data-masked');
+    var full = span.getAttribute('data-full');
+    if (span.textContent === masked) {
+      span.textContent = full;
+      btn.textContent = 'hide';
+    } else {
+      span.textContent = masked;
+      btn.textContent = 'reveal';
+    }
+  };
+
+  // \u2500\u2500\u2500 Helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\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 escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
+  function escAttr(s) { return String(s).replace(/&/g,'&amp;').replace(/'/g,"\\\\'").replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
+})();
+</script>`;
+}
+
 // src/dev/dev-server.ts
 var MIME_TYPES = {
   html: "text/html; charset=utf-8",
@@ -1436,6 +2057,7 @@ var DevServer = class {
   importCounter = 0;
   isReloading = false;
   pageCompiler;
+  envManager;
   constructor(options = {}) {
     this.options = {
       projectDir: options.projectDir || process.cwd(),
@@ -1447,12 +2069,13 @@ var DevServer = class {
       onSetupRoutes: options.onSetupRoutes || (() => {
       })
     };
-    this.routesDir = resolve3(this.options.projectDir, "app/routes");
-    this.schemasDir = resolve3(this.options.projectDir, "app/schemas");
-    this.publicDir = resolve3(this.options.projectDir, "public");
-    this.pagesDir = resolve3(this.options.projectDir, "app/pages");
-    this.componentsDir = resolve3(this.options.projectDir, "app/components");
+    this.routesDir = resolve5(this.options.projectDir, "app/routes");
+    this.schemasDir = resolve5(this.options.projectDir, "app/schemas");
+    this.publicDir = resolve5(this.options.projectDir, "public");
+    this.pagesDir = resolve5(this.options.projectDir, "app/pages");
+    this.componentsDir = resolve5(this.options.projectDir, "app/components");
     this.pageCompiler = new PageCompiler(this.options.projectDir);
+    this.envManager = new EnvManager(this.options.projectDir);
     this.router = createRouter({
       cors: ["*"],
       rateLimit: 0,
@@ -1468,12 +2091,12 @@ var DevServer = class {
     if (this.options.hotReload) {
       this.startWatcher();
     }
-    await new Promise((resolve4, reject) => {
-      this.apiServer.listen(this.options.apiPort, () => resolve4());
+    await new Promise((resolve6, reject) => {
+      this.apiServer.listen(this.options.apiPort, () => resolve6());
       this.apiServer.on("error", reject);
     });
-    await new Promise((resolve4, reject) => {
-      this.frontendServer.listen(this.options.port, () => resolve4());
+    await new Promise((resolve6, reject) => {
+      this.frontendServer.listen(this.options.port, () => resolve6());
       this.frontendServer.on("error", reject);
     });
     this.printStartupBanner();
@@ -1487,13 +2110,13 @@ var DevServer = class {
     this.apiSseClients = [];
     this.router.destroy();
     if (this.apiServer) {
-      await new Promise((resolve4) => {
-        this.apiServer.close(() => resolve4());
+      await new Promise((resolve6) => {
+        this.apiServer.close(() => resolve6());
       });
     }
     if (this.frontendServer) {
-      await new Promise((resolve4) => {
-        this.frontendServer.close(() => resolve4());
+      await new Promise((resolve6) => {
+        this.frontendServer.close(() => resolve6());
       });
     }
   }
@@ -1509,11 +2132,11 @@ var DevServer = class {
       await this.options.onSetupRoutes(this.router);
       if (this.router.getRoutes().length > 0) return;
     }
-    if (!existsSync4(this.routesDir)) return;
+    if (!existsSync6(this.routesDir)) return;
     const discovered = discoverRoutes(this.routesDir);
     for (const route of discovered) {
       try {
-        const fullPath = resolve3(this.routesDir, route.filePath);
+        const fullPath = resolve5(this.routesDir, route.filePath);
         const fileUrl = pathToFileURL(fullPath).href;
         const mod = await import(`${fileUrl}?v=${++this.importCounter}`);
         const contract = mod.default;
@@ -1536,6 +2159,7 @@ var DevServer = class {
     try {
       await this.loadRoutes();
       this.regeneratePlayground();
+      clearFirebaseStatusCache();
       const routeCount = this.router.getRoutes().length;
       console.log(`  \x1B[32m\u2713\x1B[0m ${routeCount} routes loaded`);
       this.broadcastSSE(this.apiSseClients, {
@@ -1588,23 +2212,23 @@ var DevServer = class {
   // ─── File Watcher ──────────────────────────────────────────────────
   startWatcher() {
     this.watcher = new FileWatcher(this.options.debounceMs);
-    if (existsSync4(this.routesDir)) {
+    if (existsSync6(this.routesDir)) {
       this.watcher.watchDir(this.routesDir, "route-change");
     }
-    if (existsSync4(this.schemasDir)) {
+    if (existsSync6(this.schemasDir)) {
       this.watcher.watchDir(this.schemasDir, "schema-change");
     }
-    const configFile = resolve3(this.options.projectDir, "clawfire.config.ts");
-    if (existsSync4(configFile)) {
+    const configFile = resolve5(this.options.projectDir, "clawfire.config.ts");
+    if (existsSync6(configFile)) {
       this.watcher.watchFile(configFile, "config-change");
     }
-    if (existsSync4(this.publicDir)) {
+    if (existsSync6(this.publicDir)) {
       this.watcher.watchDirFrontend(this.publicDir);
     }
-    if (existsSync4(this.pagesDir)) {
+    if (existsSync6(this.pagesDir)) {
       this.watcher.watchDir(this.pagesDir, "page-change");
     }
-    if (existsSync4(this.componentsDir)) {
+    if (existsSync6(this.componentsDir)) {
       this.watcher.watchDir(this.componentsDir, "component-change");
     }
     this.watcher.on("route-change", (event) => this.reloadRoutes(event));
@@ -1651,6 +2275,41 @@ var DevServer = class {
       title: "Clawfire Dev Playground",
       apiBaseUrl: `http://localhost:${this.options.apiPort}`
     });
+    const dashboardHtml = generateDashboardHtml({
+      apiPort: this.options.apiPort
+    });
+    const tabBar = `
+<div id="clawfire-tab-bar" style="position:sticky;top:0;z-index:9999;background:#0a0a0a;border-bottom:1px solid #2a2a2a;padding:0 16px;display:flex;gap:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
+  <button onclick="switchTab('apis')" id="tab-btn-apis" style="padding:10px 20px;background:transparent;border:none;border-bottom:2px solid #f97316;color:#f97316;font-size:14px;font-weight:600;cursor:pointer;">APIs</button>
+  <button onclick="switchTab('dashboard')" id="tab-btn-dashboard" style="padding:10px 20px;background:transparent;border:none;border-bottom:2px solid transparent;color:#a3a3a3;font-size:14px;font-weight:600;cursor:pointer;">Dashboard</button>
+</div>`;
+    const tabScript = `
+<script>
+function switchTab(tab) {
+  var apis = document.getElementById('tab-apis');
+  var dashboard = document.getElementById('tab-dashboard');
+  var btnApis = document.getElementById('tab-btn-apis');
+  var btnDash = document.getElementById('tab-btn-dashboard');
+
+  if (tab === 'apis') {
+    apis.style.display = 'block';
+    dashboard.style.display = 'none';
+    btnApis.style.borderBottomColor = '#f97316';
+    btnApis.style.color = '#f97316';
+    btnDash.style.borderBottomColor = 'transparent';
+    btnDash.style.color = '#a3a3a3';
+  } else {
+    apis.style.display = 'none';
+    dashboard.style.display = 'block';
+    btnApis.style.borderBottomColor = 'transparent';
+    btnApis.style.color = '#a3a3a3';
+    btnDash.style.borderBottomColor = '#f97316';
+    btnDash.style.color = '#f97316';
+    // Lazy-load dashboard data on first click
+    if (window._loadDashboard) window._loadDashboard();
+  }
+}
+</script>`;
     const liveReloadScript = `
 <script>
 (function() {
@@ -1692,7 +2351,28 @@ var DevServer = class {
   connect();
 })();
 </script>`;
-    this.playgroundHtml = baseHtml.replace("</body>", liveReloadScript + "\n</body>");
+    let html = baseHtml;
+    html = html.replace(/<body[^>]*>/, (match) => `${match}
+${tabBar}`);
+    const bodyOpenMatch = html.match(/<body[^>]*>/);
+    if (bodyOpenMatch) {
+      const bodyOpenEnd = html.indexOf(bodyOpenMatch[0]) + bodyOpenMatch[0].length;
+      const tabBarEnd = html.indexOf("</div>", bodyOpenEnd) + "</div>".length;
+      const bodyClose = html.lastIndexOf("</body>");
+      const beforeTabBar = html.slice(0, tabBarEnd);
+      const playgroundContent = html.slice(tabBarEnd, bodyClose);
+      const afterBody = html.slice(bodyClose);
+      html = beforeTabBar + `
+<div id="tab-apis">${playgroundContent}</div>
+<div id="tab-dashboard" style="display:none;">${dashboardHtml}</div>
+${tabScript}
+${liveReloadScript}
+` + afterBody;
+    } else {
+      html = html.replace("</body>", `${liveReloadScript}
+</body>`);
+    }
+    this.playgroundHtml = html;
   }
   // ─── Script Injection ──────────────────────────────────────────────
   /**
@@ -1709,9 +2389,9 @@ var DevServer = class {
   }
   // ─── Static File Serving ──────────────────────────────────────────
   serveStaticFile(filePath, res) {
-    if (!existsSync4(filePath)) return false;
+    if (!existsSync6(filePath)) return false;
     try {
-      const content = readFileSync2(filePath);
+      const content = readFileSync4(filePath);
       const ext = extname3(filePath).slice(1).toLowerCase();
       const mime = MIME_TYPES[ext] || "application/octet-stream";
       if (ext === "html") {
@@ -1769,7 +2449,7 @@ var DevServer = class {
     }
     const ext = extname3(url.pathname);
     if (ext && STATIC_EXTENSIONS.has(ext)) {
-      const filePath2 = resolve3(this.publicDir, url.pathname.slice(1));
+      const filePath2 = resolve5(this.publicDir, url.pathname.slice(1));
       if (filePath2.startsWith(this.publicDir) && this.serveStaticFile(filePath2, res)) {
         return;
       }
@@ -1820,7 +2500,7 @@ var DevServer = class {
       }
     }
     const requestedPath = url.pathname === "/" ? "index.html" : url.pathname.slice(1);
-    const filePath = resolve3(this.publicDir, requestedPath);
+    const filePath = resolve5(this.publicDir, requestedPath);
     if (!filePath.startsWith(this.publicDir)) {
       res.writeHead(403);
       res.end("Forbidden");
@@ -1829,8 +2509,8 @@ var DevServer = class {
     if (this.serveStaticFile(filePath, res)) {
       return;
     }
-    const indexPath = resolve3(this.publicDir, "index.html");
-    if (existsSync4(indexPath)) {
+    const indexPath = resolve5(this.publicDir, "index.html");
+    if (existsSync6(indexPath)) {
       this.serveStaticFile(indexPath, res);
       return;
     }
@@ -1906,6 +2586,10 @@ var DevServer = class {
       });
       return;
     }
+    if (url.pathname.startsWith("/__dev/")) {
+      this.handleDevEndpoint(req, res, url);
+      return;
+    }
     res.writeHead(404);
     res.end("Not found");
   }
@@ -1941,6 +2625,83 @@ var DevServer = class {
   \x1B[2mPress Ctrl+C to stop\x1B[0m
 `);
   }
+  // ─── Dev Dashboard Endpoints ──────────────────────────────────────
+  handleDevEndpoint(req, res, url) {
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+    res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+    if (req.method === "OPTIONS") {
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    const sendJson = (data, status = 200) => {
+      res.writeHead(status, { "Content-Type": "application/json" });
+      res.end(JSON.stringify(data));
+    };
+    if (url.pathname === "/__dev/firebase-status" && req.method === "GET") {
+      checkFirebaseStatus(this.options.projectDir).then((status) => sendJson(status)).catch((err) => sendJson({ error: err.message }, 500));
+      return;
+    }
+    if (url.pathname === "/__dev/config" && req.method === "GET") {
+      sendJson(this.readProjectConfig());
+      return;
+    }
+    if (url.pathname === "/__dev/env" && req.method === "GET") {
+      try {
+        sendJson(this.envManager.read());
+      } catch (err) {
+        sendJson({ error: err instanceof Error ? err.message : "Read failed" }, 500);
+      }
+      return;
+    }
+    if (url.pathname === "/__dev/env" && req.method === "POST") {
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk;
+      });
+      req.on("end", () => {
+        try {
+          const data = JSON.parse(body);
+          if (data.action === "set") {
+            this.envManager.set(data.key, data.value, data.description);
+            sendJson({ ok: true });
+          } else if (data.action === "delete") {
+            this.envManager.delete(data.key);
+            sendJson({ ok: true });
+          } else {
+            sendJson({ error: "Invalid action" }, 400);
+          }
+        } catch (err) {
+          sendJson({ error: err instanceof Error ? err.message : "Failed" }, 400);
+        }
+      });
+      return;
+    }
+    res.writeHead(404);
+    res.end("Not found");
+  }
+  // ─── Config Reader ────────────────────────────────────────────────
+  readProjectConfig() {
+    const configPath = resolve5(this.options.projectDir, "clawfire.config.ts");
+    const fields = [];
+    if (!existsSync6(configPath)) {
+      return { fields };
+    }
+    try {
+      const content = readFileSync4(configPath, "utf-8");
+      const kvPattern = /(\w+)\s*:\s*["'`]([^"'`]*)["'`]/g;
+      let match;
+      while ((match = kvPattern.exec(content)) !== null) {
+        const key = match[1];
+        const value = match[2];
+        const isPlaceholder2 = /^YOUR_/i.test(value) || /^CHANGE_ME$/i.test(value) || /^TODO$/i.test(value);
+        fields.push({ key, value, isPlaceholder: isPlaceholder2 });
+      }
+    } catch {
+    }
+    return { fields };
+  }
 };
 async function startDevServer(options) {
   const server = new DevServer(options);