leedab 0.1.0

package/dist/dashboard/static/app.js

@@ -0,0 +1,351 @@
+// Fetch status, vault, and allowlist on load
+document.addEventListener("DOMContentLoaded", () => {
+  refreshStatus();
+  loadVault();
+  loadAllowlist();
+});
+
+async function refreshStatus() {
+  try {
+    const res = await fetch("/api/status");
+    const status = await res.json();
+
+    for (const [key, info] of Object.entries(status)) {
+      const card = document.getElementById(`card-${key}`);
+      const statusEl = document.getElementById(`status-${key}`);
+      const btn = card?.querySelector(".btn");
+
+      if (info.connected) {
+        card?.classList.add("connected");
+        if (statusEl) {
+          statusEl.innerHTML = '<span class="dot"></span> Connected';
+        }
+        if (btn) {
+          btn.textContent = "Connected";
+          btn.className = "btn btn-connected";
+          btn.disabled = true;
+          btn.onclick = null;
+        }
+      }
+    }
+  } catch (err) {
+    console.error("Failed to fetch status:", err);
+  }
+}
+
+// --- WhatsApp ---
+
+function connectWhatsApp() {
+  const panel = document.getElementById("whatsapp-panel");
+  panel.classList.remove("hidden");
+  const qr = document.getElementById("whatsapp-qr");
+  qr.innerHTML = `<p>Generating QR code...</p>`;
+
+  fetch("/api/whatsapp/connect", { method: "POST" })
+    .then((r) => r.json())
+    .then((data) => {
+      if (data.error) {
+        qr.innerHTML = `<p style="color:#ef4444">${escapeHtml(data.error)}</p>`;
+        return;
+      }
+      if (data.qr) {
+        const lines = data.qr.split("\n").filter(
+          (l) => l.includes("\u2588") || l.includes("\u2584") || l.includes("\u2580")
+        );
+        const qrText = lines.join("\n");
+        qr.innerHTML = `<pre style="
+          font-family: monospace;
+          font-size: 4px;
+          line-height: 4px;
+          letter-spacing: 0px;
+          background: white;
+          color: black;
+          padding: 16px;
+          display: inline-block;
+          border-radius: 8px;
+          transform: scale(2);
+          transform-origin: center;
+          margin: 40px 0;
+        ">${escapeHtml(qrText)}</pre>`;
+        pollWhatsAppStatus();
+      } else {
+        qr.innerHTML = `<p>Waiting for QR code... try again in a moment.</p>`;
+      }
+    })
+    .catch(() => {
+      qr.innerHTML = `<p style="color:#ef4444">Connection failed. Try again.</p>`;
+    });
+}
+
+function pollWhatsAppStatus() {
+  const interval = setInterval(async () => {
+    const res = await fetch("/api/status");
+    const status = await res.json();
+    if (status.whatsapp.connected) {
+      clearInterval(interval);
+      hideWhatsAppPanel();
+      showToast("WhatsApp connected!", "success");
+      refreshStatus();
+    }
+  }, 3000);
+
+  setTimeout(() => clearInterval(interval), 120000);
+}
+
+function hideWhatsAppPanel() {
+  document.getElementById("whatsapp-panel").classList.add("hidden");
+}
+
+// --- Telegram ---
+
+function showTelegramForm() {
+  document.getElementById("telegram-form").classList.remove("hidden");
+}
+
+function hideTelegramForm() {
+  document.getElementById("telegram-form").classList.add("hidden");
+}
+
+async function connectTelegram() {
+  const token = document.getElementById("telegram-token").value.trim();
+  if (!token) {
+    showToast("Bot token is required", "error");
+    return;
+  }
+
+  try {
+    const res = await fetch("/api/telegram/connect", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ token }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      showToast(data.error, "error");
+    } else {
+      hideTelegramForm();
+      showToast("Telegram connected!", "success");
+      refreshStatus();
+    }
+  } catch {
+    showToast("Connection failed", "error");
+  }
+}
+
+// --- Teams ---
+
+function showTeamsForm() {
+  document.getElementById("teams-form").classList.remove("hidden");
+}
+
+function hideTeamsForm() {
+  document.getElementById("teams-form").classList.add("hidden");
+}
+
+async function connectTeams() {
+  const appId = document.getElementById("teams-app-id").value.trim();
+  const tenantId = document.getElementById("teams-tenant-id").value.trim();
+
+  if (!appId || !tenantId) {
+    showToast("All fields are required", "error");
+    return;
+  }
+
+  try {
+    const res = await fetch("/api/teams/connect", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ appId, tenantId }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      showToast(data.error, "error");
+    } else {
+      hideTeamsForm();
+      showToast("Teams credentials saved!", "success");
+      refreshStatus();
+    }
+  } catch {
+    showToast("Connection failed", "error");
+  }
+}
+
+// --- Vault ---
+
+async function loadVault() {
+  const container = document.getElementById("vault-list");
+  if (!container) return;
+
+  try {
+    const res = await fetch("/api/vault");
+    const entries = await res.json();
+
+    if (!entries.length) {
+      container.innerHTML = '<div class="vault-empty">No credentials stored yet.</div>';
+      return;
+    }
+
+    container.innerHTML = `
+      <table class="vault-table">
+        <thead>
+          <tr><th>Service</th><th>URL</th><th>Username</th><th></th></tr>
+        </thead>
+        <tbody>
+          ${entries.map(e => `
+            <tr>
+              <td>${escapeHtml(e.service)}</td>
+              <td>${e.url ? escapeHtml(e.url) : '<span style="color:var(--text-faint)">—</span>'}</td>
+              <td>${e.username ? escapeHtml(e.username) : '<span style="color:var(--text-faint)">—</span>'}</td>
+              <td><button class="btn btn-danger" onclick="removeVaultEntry('${escapeHtml(e.service)}')">Remove</button></td>
+            </tr>
+          `).join("")}
+        </tbody>
+      </table>`;
+  } catch {
+    container.innerHTML = '<div class="vault-empty">Could not load vault.</div>';
+  }
+}
+
+async function addVaultEntry() {
+  const service = document.getElementById("vault-service").value.trim();
+  const url = document.getElementById("vault-url").value.trim();
+  const username = document.getElementById("vault-username").value.trim();
+  const password = document.getElementById("vault-password").value;
+  const notes = document.getElementById("vault-notes").value.trim();
+
+  if (!service) {
+    showToast("Service name is required", "error");
+    return;
+  }
+
+  try {
+    await fetch("/api/vault", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ service, url, username, password, notes }),
+    });
+
+    // Clear form
+    document.getElementById("vault-service").value = "";
+    document.getElementById("vault-url").value = "";
+    document.getElementById("vault-username").value = "";
+    document.getElementById("vault-password").value = "";
+    document.getElementById("vault-notes").value = "";
+
+    showToast(`Added ${service} to vault`, "success");
+    loadVault();
+  } catch {
+    showToast("Failed to add credential", "error");
+  }
+}
+
+async function removeVaultEntry(service) {
+  try {
+    await fetch(`/api/vault?service=${encodeURIComponent(service)}`, {
+      method: "DELETE",
+    });
+    showToast(`Removed ${service}`, "success");
+    loadVault();
+  } catch {
+    showToast("Failed to remove credential", "error");
+  }
+}
+
+// --- Allowlist ---
+
+async function loadAllowlist() {
+  const container = document.getElementById("allowlist-entries");
+  const channelSelect = document.getElementById("allowlist-channel");
+  if (!container || !channelSelect) return;
+
+  const channel = channelSelect.value;
+
+  try {
+    const res = await fetch(`/api/allowlist?channel=${encodeURIComponent(channel)}`);
+    const data = await res.json();
+
+    if (!data.allowFrom || data.allowFrom.length === 0) {
+      container.innerHTML = `<div class="vault-empty">No users in ${channel} allowlist. Policy: ${data.dmPolicy}</div>`;
+      return;
+    }
+
+    container.innerHTML = `
+      <table class="vault-table">
+        <thead>
+          <tr><th>User ID</th><th>Policy</th><th></th></tr>
+        </thead>
+        <tbody>
+          ${data.allowFrom.map(id => `
+            <tr>
+              <td>${escapeHtml(id)}</td>
+              <td style="color:var(--text-dim)">${data.dmPolicy}</td>
+              <td><button class="btn btn-danger" onclick="removeAllowlistEntry('${escapeHtml(channel)}', '${escapeHtml(id)}')">Remove</button></td>
+            </tr>
+          `).join("")}
+        </tbody>
+      </table>`;
+  } catch {
+    container.innerHTML = '<div class="vault-empty">Could not load allowlist.</div>';
+  }
+}
+
+async function addAllowlistEntry() {
+  const channel = document.getElementById("allowlist-channel").value;
+  const userId = document.getElementById("allowlist-userid").value.trim();
+
+  if (!userId) {
+    showToast("User ID is required", "error");
+    return;
+  }
+
+  try {
+    const res = await fetch("/api/allowlist", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ channel, userId }),
+    });
+    const data = await res.json();
+    if (data.error) {
+      showToast(data.error, "error");
+    } else {
+      document.getElementById("allowlist-userid").value = "";
+      showToast(`Added ${userId} to ${channel}.`, "success");
+      loadAllowlist();
+    }
+  } catch {
+    showToast("Failed to add user", "error");
+  }
+}
+
+async function removeAllowlistEntry(channel, userId) {
+  try {
+    await fetch(`/api/allowlist?channel=${encodeURIComponent(channel)}&userId=${encodeURIComponent(userId)}`, {
+      method: "DELETE",
+    });
+    showToast(`Removed ${userId}.`, "success");
+    loadAllowlist();
+  } catch {
+    showToast("Failed to remove user", "error");
+  }
+}
+
+// --- Helpers ---
+
+function showToast(message, type = "success") {
+  const toast = document.getElementById("toast");
+  if (!toast) return;
+  toast.textContent = message;
+  toast.className = `toast ${type}`;
+
+  setTimeout(() => {
+    toast.classList.add("hidden");
+  }, 4000);
+}
+
+function escapeHtml(str) {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}

package/dist/dashboard/static/console.html

@@ -0,0 +1,252 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" type="image/png" href="/favicon.png">
+  <title>LeedAB — Console</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <style>
+    .console-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      height: 52px;
+      border-bottom: 1px solid var(--border);
+      background: var(--bg);
+    }
+    .console-header-left {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .console-header-title {
+      font-size: 14px;
+      font-weight: 600;
+      letter-spacing: -0.01em;
+    }
+    .console-badge {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 3px 8px;
+      border-radius: 20px;
+      font-size: 11px;
+      font-weight: 500;
+    }
+    .console-badge.on { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
+    .console-badge.on .bdot { background: #22c55e; }
+    .console-badge.off { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
+    .console-badge.off .bdot { background: #ef4444; }
+    .bdot { width: 6px; height: 6px; border-radius: 50%; }
+    .console-nav {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+    }
+    .console-nav a {
+      color: var(--text-dim);
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      padding: 6px 12px;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 450;
+      transition: all 0.15s;
+    }
+    .console-nav a:hover {
+      color: var(--text-secondary);
+      background: var(--surface-raised);
+    }
+  </style>
+
+  <div class="console-header">
+    <div class="console-header-left">
+      <span class="console-header-title">LeedAB</span>
+      <div class="console-badge off" id="agent-badge">
+        <span class="bdot"></span>
+        <span id="agent-status-text">...</span>
+      </div>
+    </div>
+    <div class="console-nav">
+      <a href="/">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4 20-7Z"/><path d="M22 2 11 13"/></svg>
+        Chat
+      </a>
+      <a href="/team.html">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
+        Team
+      </a>
+      <button onclick="toggleTheme()" title="Toggle theme" style="background:none;border:1px solid var(--border);border-radius:8px;padding:5px 8px;cursor:pointer;color:var(--text-dim);display:flex;align-items:center;transition:all 0.15s">
+        <svg id="theme-icon-sun" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+        <svg id="theme-icon-moon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:none"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      </button>
+    </div>
+  </div>
+
+  <div class="container">
+    <main>
+      <!-- Channel Health -->
+      <section class="section">
+        <div style="display:flex;align-items:center;justify-content:space-between">
+          <h2 class="section-title">Channels</h2>
+          <a href="/settings.html" style="font-size:12px;color:var(--text-faint);text-decoration:none;transition:color 0.15s" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-faint)'">Settings</a>
+        </div>
+        <p class="section-desc">How your team talks to the agent.</p>
+        <div class="cards" id="channel-cards">
+          <div class="card" id="card-telegram">
+            <div class="card-icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="m22 2-7 20-4-9-9-4 20-7Z"/><path d="M22 2 11 13"/>
+              </svg>
+            </div>
+            <div class="card-body">
+              <h3>Telegram <span style="font-size:0.75rem;color:var(--success);font-weight:400">recommended</span></h3>
+              <div class="card-status" id="status-telegram">
+                <span class="dot"></span> <span>Checking...</span>
+              </div>
+            </div>
+          </div>
+          <div class="card" id="card-whatsapp">
+            <div class="card-icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+              </svg>
+            </div>
+            <div class="card-body">
+              <h3>WhatsApp</h3>
+              <div class="card-status" id="status-whatsapp">
+                <span class="dot"></span> <span>Checking...</span>
+              </div>
+            </div>
+          </div>
+          <div class="card" id="card-teams">
+            <div class="card-icon">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
+                <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
+              </svg>
+            </div>
+            <div class="card-body">
+              <h3>Microsoft Teams</h3>
+              <div class="card-status" id="status-teams">
+                <span class="dot"></span> <span>Checking...</span>
+              </div>
+            </div>
+          </div>
+          <div class="card" style="border-style:dashed;opacity:0.5">
+            <div class="card-icon" style="background:var(--surface-raised);color:var(--text-faint)">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>
+              </svg>
+            </div>
+            <div class="card-body">
+              <h3 style="color:var(--text-dim)">More coming soon</h3>
+              <div class="card-status"><span style="color:var(--text-faint)">Slack, Discord, Email</span></div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- Vault Summary -->
+      <section class="section">
+        <div style="display:flex;align-items:center;justify-content:space-between">
+          <h2 class="section-title">Credential Vault</h2>
+          <a href="/settings.html" style="font-size:12px;color:var(--text-faint);text-decoration:none;transition:color 0.15s" onmouseover="this.style.color='var(--accent)'" onmouseout="this.style.color='var(--text-faint)'">Manage</a>
+        </div>
+        <p class="section-desc">Services the agent can access via browser.</p>
+        <div id="vault-summary" class="info-grid">
+          <div class="info-item">
+            <span class="info-label">Stored</span>
+            <span class="info-value" id="vault-count">...</span>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <p>Your files, credentials, and memory stay on this device.</p>
+    </footer>
+  </div>
+
+  <script>
+    // Theme toggle
+    function initTheme() {
+      const saved = localStorage.getItem("leedab-theme") || "dark";
+      document.documentElement.setAttribute("data-theme", saved);
+      updateThemeIcon(saved);
+    }
+    function toggleTheme() {
+      const current = document.documentElement.getAttribute("data-theme") || "dark";
+      const next = current === "dark" ? "light" : "dark";
+      document.documentElement.setAttribute("data-theme", next);
+      localStorage.setItem("leedab-theme", next);
+      updateThemeIcon(next);
+    }
+    function updateThemeIcon(theme) {
+      const sun = document.getElementById("theme-icon-sun");
+      const moon = document.getElementById("theme-icon-moon");
+      if (sun && moon) {
+        sun.style.display = theme === "dark" ? "block" : "none";
+        moon.style.display = theme === "light" ? "block" : "none";
+      }
+    }
+    initTheme();
+
+    document.addEventListener("DOMContentLoaded", () => {
+      refreshStatus();
+      refreshVault();
+      setInterval(refreshStatus, 30000);
+    });
+
+    async function refreshStatus() {
+      try {
+        const res = await fetch("/api/status");
+        const status = await res.json();
+
+        const badge = document.getElementById("agent-badge");
+        const statusText = document.getElementById("agent-status-text");
+
+        // If we got a response, agent/dashboard is running
+        badge.className = "console-badge on";
+        statusText.textContent = "On";
+
+        for (const [key, info] of Object.entries(status)) {
+          const card = document.getElementById(`card-${key}`);
+          const statusEl = document.getElementById(`status-${key}`);
+          if (!card || !statusEl) continue;
+
+          if (info.connected) {
+            card.classList.add("connected");
+            statusEl.innerHTML = '<span class="dot"></span> Connected';
+          } else {
+            card.classList.remove("connected");
+            statusEl.innerHTML = '<span class="dot"></span> Not connected';
+          }
+        }
+      } catch {
+        const badge = document.getElementById("agent-badge");
+        const statusText = document.getElementById("agent-status-text");
+        badge.className = "console-badge off";
+        statusText.textContent = "Off";
+      }
+    }
+
+    async function refreshVault() {
+      try {
+        const res = await fetch("/api/vault");
+        const entries = await res.json();
+        document.getElementById("vault-count").textContent =
+          entries.length > 0 ? `${entries.length} service(s)` : "None";
+      } catch {
+        document.getElementById("vault-count").textContent = "—";
+      }
+    }
+  </script>
+</body>
+</html>