Add priv/frontend/js/app.js

priv/frontend/js/app.js

@@ -0,0 +1,170 @@
+// HyperKitty Chromium -- control-center frontend.
+//
+// Deliberately framework-free: this is the visibility/control
+// surface described in the architecture, not a product UI. It
+// talks to the six API domains over plain fetch() and consumes the
+// live event stream over one WebSocket -- every view here is driven
+// by the same data any other API client could read, nothing is
+// frontend-only state.
+
+(() => {
+  "use strict";
+
+  const $ = (sel) => document.querySelector(sel);
+  const $$ = (sel) => Array.from(document.querySelectorAll(sel));
+
+  // ---- navigation --------------------------------------------------
+  $$("#nav button").forEach((btn) => {
+    btn.addEventListener("click", () => {
+      $$("#nav button").forEach((b) => b.classList.remove("active"));
+      $$(".view").forEach((v) => v.classList.remove("active"));
+      btn.classList.add("active");
+      $(`#view-${btn.dataset.view}`).classList.add("active");
+    });
+  });
+
+  // ---- API helpers ---------------------------------------------------
+  async function api(method, path, body) {
+    const res = await fetch(path, {
+      method,
+      headers: { "content-type": "application/json", "x-request-id": crypto.randomUUID() },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    const data = await res.json().catch(() => ({}));
+    return { ok: res.ok, status: res.status, data };
+  }
+
+  // ---- dashboard -------------------------------------------------------
+  async function refreshDashboard() {
+    const { data } = await api("GET", "/api/health");
+    $("#status-dot").className = data.status === "healthy" ? "up" : "down";
+    $("#dash-status").textContent = data.status || "unknown";
+    $("#dash-agents").textContent = data.counts?.active_agents ?? 0;
+    $("#dash-sessions").textContent = data.counts?.active_browser_sessions ?? 0;
+    $("#dash-jobs").textContent = data.counts?.active_search_jobs ?? 0;
+    $("#dash-uptime").textContent = Math.round((data.uptime_ms || 0) / 1000) + "s";
+    const rows = Object.entries(data.subsystems || {})
+      .map(([name, st]) => `<tr><td>${name}</td><td><span class="pill ${st === "up" ? "ok" : "err"}">${st}</span></td></tr>`)
+      .join("");
+    $("#dash-subsystems").innerHTML = rows;
+  }
+
+  // ---- agent console -----------------------------------------------------
+  let selectedAgent = null;
+
+  async function refreshAgents() {
+    const { data } = await api("GET", "/api/agents");
+    const rows = (data.agents || []).map((a) => `
+      <tr data-agent="${a.agent_id}" style="cursor:pointer">
+        <td>${a.agent_id}</td>
+        <td><span class="pill">${a.state}</span></td>
+        <td>${a.action_count}</td>
+        <td class="muted">${(a.capabilities || []).join(", ")}</td>
+      </tr>`).join("");
+    $("#agents-table").innerHTML = rows;
+    $$("#agents-table tr").forEach((tr) => {
+      tr.addEventListener("click", () => { selectedAgent = tr.dataset.agent; });
+    });
+  }
+
+  $("#agent-create").addEventListener("click", async () => {
+    await api("POST", "/api/agents", { capabilities: ["create_session", "open_tab", "navigate",
+      "read_page", "click", "type", "scroll", "screenshot", "extract_links", "close_session",
+      { search: "start" }] });
+    refreshAgents();
+  });
+
+  // ---- browser -----------------------------------------------------------
+  async function refreshSessions() {
+    const { data } = await api("GET", "/api/browser/sessions");
+    $("#sessions-table").innerHTML = (data.sessions || []).map((s) => `
+      <tr><td>${s.session_id}</td><td><span class="pill ${s.status === 'ready' ? 'ok' : ''}">${s.status}</span></td>
+      <td>${(s.tabs || []).length}</td><td class="muted">${s.owner_agent_id ?? "--"}</td></tr>`).join("");
+  }
+  $("#browser-create").addEventListener("click", async () => {
+    await api("POST", "/api/browser/sessions", { profile: "manual" });
+    refreshSessions();
+  });
+
+  // ---- search --------------------------------------------------------------
+  async function refreshJobs() {
+    const { data } = await api("GET", "/api/search");
+    $("#jobs-table").innerHTML = (data.jobs || []).map((j) => `
+      <tr><td>${j.job_id}</td><td><span class="pill">${j.stage}</span></td>
+      <td>${j.iteration}</td><td class="muted">${j.query}</td></tr>`).join("");
+  }
+  $("#search-start").addEventListener("click", async () => {
+    const query = $("#search-query-input").value.trim();
+    if (!query) return;
+    await api("POST", "/api/search", { query });
+    refreshJobs();
+  });
+
+  // ---- messages --------------------------------------------------------------
+  async function refreshMessages() {
+    const conv = $("#msg-conversation").value.trim();
+    if (!conv) return;
+    const { data } = await api("GET", `/api/messages?conversation_id=${encodeURIComponent(conv)}`);
+    $("#messages-table").innerHTML = (data.messages || []).map((m) => `
+      <tr><td class="muted">${new Date(m.timestamp).toLocaleTimeString()}</td>
+      <td>${m.sender}</td><td>${m.recipient}</td><td><span class="pill">${m.status}</span></td>
+      <td>${JSON.stringify(m.payload)}</td></tr>`).join("");
+  }
+  $("#msg-send").addEventListener("click", async () => {
+    const conversation_id = $("#msg-conversation").value.trim() || crypto.randomUUID();
+    $("#msg-conversation").value = conversation_id;
+    await api("POST", "/api/messages", {
+      sender: $("#msg-sender").value || "operator",
+      recipient: $("#msg-recipient").value || "system",
+      conversation_id,
+      message_type: "user_to_agent",
+      payload: { text: $("#msg-text").value },
+    });
+    refreshMessages();
+  });
+
+  // ---- audit -----------------------------------------------------------------
+  async function refreshAudit() {
+    const { data } = await api("GET", "/api/events/recent?limit=200");
+    $("#audit-table").innerHTML = (data.events || []).map((e) => `
+      <tr><td class="muted">${e.event_id}</td><td>${e.category}</td>
+      <td class="muted">${e.subject ? `${e.subject.type}:${e.subject.id}` : "--"}</td>
+      <td class="muted">${e.operation_id ?? "--"}</td>
+      <td class="muted">${new Date(e.emitted_at_ms).toLocaleTimeString()}</td></tr>`).join("");
+  }
+  $("#audit-refresh").addEventListener("click", refreshAudit);
+
+  // ---- live event stream -----------------------------------------------------
+  function connectEventStream() {
+    const proto = location.protocol === "https:" ? "wss" : "ws";
+    const ws = new WebSocket(`${proto}://${location.host}/api/events/stream`);
+    ws.onmessage = (msg) => {
+      let parsed;
+      try { parsed = JSON.parse(msg.data); } catch { return; }
+      if (parsed.type !== "event") return;
+      const e = parsed.event;
+      const row = document.createElement("div");
+      row.className = "row";
+      row.innerHTML = `<span class="ts">${new Date(e.emitted_at_ms).toLocaleTimeString()}</span> ` +
+        `<span class="cat">${e.category}</span> ${JSON.stringify(e.data)}`;
+      const log = $("#event-log");
+      log.prepend(row);
+      while (log.children.length > 500) log.removeChild(log.lastChild);
+      // Live-refresh whichever views this event is relevant to.
+      if (e.category.startsWith("agent.")) refreshAgents();
+      if (e.category.startsWith("browser.")) refreshSessions();
+      if (e.category.startsWith("search.")) refreshJobs();
+      refreshDashboard();
+    };
+    ws.onclose = () => setTimeout(connectEventStream, 2000);
+  }
+
+  // ---- boot ---------------------------------------------------------------------
+  refreshDashboard();
+  refreshAgents();
+  refreshSessions();
+  refreshJobs();
+  refreshAudit();
+  connectEventStream();
+  setInterval(refreshDashboard, 5000);
+})();