@highflame/overwatch 1.0.0

package/dist/ui/views/dashboard.js

@@ -0,0 +1,785 @@
+/**
+ * Dashboard Client-Side Logic
+ *
+ * This module handles all client-side interactivity for the Guardian dashboard.
+ * It's designed to be easily testable - all functions are pure or have clear side effects.
+ *
+ * Debug Mode: Add ?debug=1 to URL to enable console logging
+ *
+ * @module DashboardClient
+ */
+
+(function (window) {
+  "use strict";
+
+  // ============================================================
+  // Configuration & State
+  // ============================================================
+
+  const DEBUG = new URLSearchParams(window.location.search).has("debug");
+
+  /** @type {object} Centralized state - avoids globals scattered everywhere */
+  const state = {
+    sessions: [],
+    sessionsWithEvents: [],
+    rawData: { threats: [], commands: [], events: [] },
+    activeTab: "overview",
+    chart: null,
+  };
+
+  // ============================================================
+  // Debug Utilities
+  // ============================================================
+
+  function log(...args) {
+    if (DEBUG) console.log("[Dashboard]", ...args);
+  }
+
+  function logTable(label, data) {
+    if (DEBUG) {
+      console.group(`[Dashboard] ${label}`);
+      console.table(data);
+      console.groupEnd();
+    }
+  }
+
+  /** Expose state for debugging in console */
+  function exposeDebugAPI() {
+    window.__DASHBOARD_DEBUG__ = {
+      getState: () => state,
+      getSessions: () => state.sessions,
+      getEvents: () => state.rawData.events,
+      getThreats: () => state.rawData.threats,
+      getCommands: () => state.rawData.commands,
+      inspectSession: (id) => state.sessions.find((s) => s.id === id),
+      inspectEvent: (type, idx) => state.rawData[type]?.[idx],
+      logState: () => console.log(JSON.parse(JSON.stringify(state))),
+    };
+    log("Debug API exposed at window.__DASHBOARD_DEBUG__");
+  }
+
+  // ============================================================
+  // Data Initialization
+  // ============================================================
+
+  /**
+   * Initialize state with server-provided data
+   * Called once on page load with pre-escaped JSON from server
+   */
+  function initializeData(sessions, rawData, sessionsWithEvents) {
+    state.sessions = sessions || [];
+    state.sessionsWithEvents = sessionsWithEvents || [];
+    state.rawData = rawData || { threats: [], commands: [], events: [] };
+
+    log("State initialized:", {
+      sessions: state.sessions.length,
+      sessionsWithEvents: state.sessionsWithEvents.length,
+      events: state.rawData.events.length,
+      threats: state.rawData.threats.length,
+      commands: state.rawData.commands.length,
+    });
+
+    logTable("Sessions", state.sessions);
+  }
+
+  // ============================================================
+  // DOM Utilities
+  // ============================================================
+
+  const $ = (sel) => document.querySelector(sel);
+  const $$ = (sel) => document.querySelectorAll(sel);
+
+  function createElement(tag, attrs = {}, children = []) {
+    const el = document.createElement(tag);
+    Object.entries(attrs).forEach(([key, val]) => {
+      if (key === "className") el.className = val;
+      else if (key === "textContent") el.textContent = val;
+      else if (key.startsWith("on"))
+        el.addEventListener(key.slice(2).toLowerCase(), val);
+      else el.setAttribute(key, val);
+    });
+    children.forEach((child) => {
+      if (typeof child === "string")
+        el.appendChild(document.createTextNode(child));
+      else if (child) el.appendChild(child);
+    });
+    return el;
+  }
+
+  // ============================================================
+  // Escape Utilities (Security)
+  // ============================================================
+
+  const HTML_ENTITIES = {
+    "&": "&",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;",
+  };
+
+  function escapeHtml(text) {
+    if (typeof text !== "string") return String(text);
+    return text.replace(/[&<>"']/g, (m) => HTML_ENTITIES[m]);
+  }
+
+  function escapeAttr(str) {
+    return escapeHtml(str).replace(/\n/g, "&#10;");
+  }
+
+  // ============================================================
+  // Tab Navigation
+  // ============================================================
+
+  const TAB_TITLES = {
+    overview: "Overview",
+    sessions: "Sessions Explorer",
+    threats: "Security Threats",
+    commands: "Command Analysis",
+    events: "Event Log",
+    scans: "MCP Scans",
+  };
+
+  function showTab(tabId) {
+    log("Switching to tab:", tabId);
+    state.activeTab = tabId;
+
+    $$(".tab-content").forEach((tab) => tab.classList.remove("active"));
+    $("#" + tabId)?.classList.add("active");
+
+    $$(".tab-btn").forEach((btn) => btn.classList.remove("active"));
+    $(`.tab-btn[data-tab="${tabId}"]`)?.classList.add("active");
+
+    const titleEl = $("#view-title");
+    if (titleEl) titleEl.textContent = TAB_TITLES[tabId] || tabId;
+  }
+
+  // ============================================================
+  // Table Filtering
+  // ============================================================
+
+  function filterTable(tableId, source) {
+    log("Filtering table:", tableId, "by source:", source || "all");
+    const table = $("#" + tableId);
+    if (!table) return;
+
+    const rows = table.querySelectorAll("tbody tr");
+    rows.forEach((row) => {
+      const rowSource = row.getAttribute("data-source");
+      row.style.display = !source || rowSource === source ? "" : "none";
+    });
+  }
+
+  // ============================================================
+  // Modal System
+  // ============================================================
+
+  function openModal() {
+    $("#modal-container")?.classList.remove("hidden");
+  }
+
+  function closeModal() {
+    $("#modal-container")?.classList.add("hidden");
+    log("Modal closed");
+  }
+
+  function setModalContent(contentElement) {
+    const body = $("#modal-body");
+    if (body) {
+      body.innerHTML = "";
+      body.appendChild(contentElement);
+    }
+  }
+
+  function openEventDetailModal() {
+    $("#modal-event-detail")?.classList.remove("hidden");
+  }
+
+  function closeEventDetailModal() {
+    $("#modal-event-detail")?.classList.add("hidden");
+    log("Event detail modal closed");
+  }
+
+  function setEventDetailModalContent(contentElement) {
+    const body = $("#modal-body-event");
+    if (body) {
+      body.innerHTML = "";
+      body.appendChild(contentElement);
+    }
+  }
+
+  // ============================================================
+  // Session Detail View
+  // ============================================================
+
+  function openSession(sessionId) {
+    log("Opening session:", sessionId);
+    const session = state.sessions.find((s) => s.id === sessionId);
+    if (!session) {
+      log("Session not found:", sessionId);
+      return;
+    }
+
+    let sessionEvents = [];
+    const full = state.sessionsWithEvents.find((s) => s.id === sessionId);
+    if (full && Array.isArray(full.events)) {
+      sessionEvents = full.events;
+      log("Session events (server):", sessionEvents.length);
+    } else {
+      const payload = (e) =>
+        (e.input && e.input.input != null ? e.input.input : e.input) || {};
+      const sessionKey = (p) =>
+        p.conversation_id ??
+        p.conversationId ??
+        p.session_id ??
+        p.sessionId ??
+        "unknown";
+      const [sid, src] = sessionId.includes("::")
+        ? sessionId.split("::")
+        : [sessionId, null];
+      sessionEvents = state.rawData.events.filter((e) => {
+        const p = payload(e);
+        const k =
+          (typeof sessionKey(p) === "string" && sessionKey(p)) || "unknown";
+        const matchId = k === sid;
+        const matchSource = !src || e.source === src;
+        return matchId && matchSource;
+      });
+      // Sort in reverse chronological order
+      sessionEvents.sort(
+        (a, b) =>
+          new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime(),
+      );
+      log("Session events (client filter):", sessionEvents.length);
+    }
+
+    const container = buildSessionModal(session, sessionEvents);
+    setModalContent(container);
+    openModal();
+  }
+
+  function buildSessionModal(session, events) {
+    const container = createElement("div", {
+      className: "h-full flex flex-col",
+    });
+
+    // Header
+    const header = createElement(
+      "div",
+      {
+        className:
+          "p-6 pr-16 border-b border-zinc-800 flex justify-between items-start bg-zinc-950",
+      },
+      [
+        createElement("div", {}, [
+          createElement("div", { className: "flex items-center gap-3 mb-2" }, [
+            createElement("span", {
+              className:
+                "text-[10px] font-bold px-2 py-1 rounded bg-zinc-800 uppercase tracking-widest",
+              textContent: session.source,
+            }),
+            createElement("span", {
+              className: "text-xs text-zinc-500 font-mono",
+              textContent: session.id,
+            }),
+          ]),
+          createElement("h2", {
+            className: "text-xl font-bold text-white",
+            textContent: "Session Transcript",
+          }),
+        ]),
+        createElement("div", { className: "text-right" }, [
+          createElement("div", {
+            className: "text-xs text-zinc-400 mb-1",
+            textContent: "Started",
+          }),
+          createElement("div", {
+            className: "font-mono text-sm",
+            textContent: new Date(session.startTime).toLocaleString(),
+          }),
+        ]),
+      ],
+    );
+
+    // Timeline
+    const timeline = createElement("div", {
+      className:
+        "flex-1 overflow-y-auto custom-scrollbar p-6 space-y-6 bg-black",
+    });
+    events.forEach((event) => {
+      timeline.appendChild(buildEventBubble(event));
+    });
+
+    container.appendChild(header);
+    container.appendChild(timeline);
+    return container;
+  }
+
+  function buildEventBubble(event) {
+    const isUser =
+      event.event === "beforeSubmitPrompt" ||
+      event.event === "UserPromptSubmit" ||
+      event.event === "userPromptSubmitted";
+
+    const payload =
+      (event.input && event.input.input != null
+        ? event.input.input
+        : event.input) || {};
+    const wrapper = createElement("div", {
+      className: `flex flex-col ${isUser ? "items-end" : "items-start"} w-full group`,
+    });
+
+    const label = isUser
+      ? "User"
+      : (payload.tool_name ?? payload.toolName ?? payload.name ?? event.event);
+    const time = new Date(event.timestamp).toLocaleTimeString();
+    wrapper.appendChild(
+      createElement(
+        "div",
+        { className: "text-[10px] text-zinc-500 mb-1 px-1 flex gap-2" },
+        [
+          createElement("span", {
+            className: "font-bold uppercase tracking-wider",
+            textContent: String(label),
+          }),
+          createElement("span", { className: "font-mono", textContent: time }),
+        ],
+      ),
+    );
+
+    let content =
+      payload.prompt ??
+      payload.command ??
+      payload.tool_name ??
+      payload.toolName ??
+      payload.toolArgs ??
+      `Event: ${event.event}`;
+    if (typeof content !== "string") content = JSON.stringify(content, null, 2);
+    const bubbleClass = isUser
+      ? "bg-zinc-800 text-zinc-100 user rounded-tr-none"
+      : "bg-zinc-900 border border-zinc-800 text-zinc-300 agent rounded-tl-none";
+
+    const bubble = createElement("div", {
+      className: `chat-bubble ${bubbleClass} p-4 rounded-xl shadow-sm text-sm leading-relaxed max-w-[80%] cursor-pointer hover:ring-1 hover:ring-zinc-600 transition-all`,
+    });
+
+    if (
+      !isUser &&
+      (payload.tool_input ?? payload.toolArgs ?? payload.command)
+    ) {
+      const code = createElement("code", {
+        className: "font-mono text-xs block whitespace-pre-wrap",
+        textContent: content,
+      });
+      bubble.appendChild(code);
+    } else {
+      bubble.textContent = content;
+    }
+
+    // Threat badge
+    if (event.threat_summary?.total_count > 0) {
+      const badge = createElement("div", {
+        className:
+          "mt-2 text-[10px] font-bold text-orange-500 bg-orange-500/10 px-2 py-1 rounded inline-block border border-orange-500/20",
+        textContent: `⚠️ ${event.threat_summary.total_count} Threat(s) Detected`,
+      });
+      bubble.appendChild(badge);
+    }
+
+    // Click to inspect
+    bubble.addEventListener("click", () => showJsonInspector(event));
+    wrapper.appendChild(bubble);
+
+    return wrapper;
+  }
+
+  // ============================================================
+  // JSON Inspector
+  // ============================================================
+
+  function openEventDetail(type, index) {
+    const eventData = state.rawData[type]?.[index];
+    if (!eventData) {
+      log("Event not found:", type, index);
+      return;
+    }
+    showJsonInspector(eventData);
+  }
+
+  function showJsonInspector(data) {
+    log("Inspecting JSON:", data);
+
+    const container = createElement("div", {
+      className: "h-full flex flex-col bg-zinc-950",
+    });
+
+    // Header
+    const header = createElement(
+      "div",
+      {
+        className:
+          "p-4 pr-16 border-b border-zinc-800 bg-zinc-900/50 flex justify-between items-center",
+      },
+      [
+        createElement("h3", {
+          className: "font-bold text-sm text-zinc-200",
+          textContent: "Event Details",
+        }),
+        createElement("div", { className: "flex gap-2" }, [
+          createElement("button", {
+            className:
+              "text-xs bg-zinc-800 hover:bg-zinc-700 px-3 py-1.5 rounded transition-colors",
+            textContent: "Copy JSON",
+            onClick: () => {
+              navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+              log("JSON copied to clipboard");
+            },
+          }),
+        ]),
+      ],
+    );
+
+    // JSON content with syntax highlighting
+    const content = createElement("div", {
+      className: "flex-1 overflow-auto custom-scrollbar p-4 bg-[#0d0d0d]",
+    });
+    const pre = createElement("pre", {
+      className: "font-mono text-xs text-green-400 whitespace-pre-wrap",
+    });
+    pre.innerHTML = syntaxHighlight(data);
+    content.appendChild(pre);
+
+    container.appendChild(header);
+    container.appendChild(content);
+
+    setEventDetailModalContent(container);
+    openEventDetailModal();
+  }
+
+  function syntaxHighlight(json) {
+    const str = typeof json === "string" ? json : JSON.stringify(json, null, 2);
+    return escapeHtml(str).replace(
+      /("(\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g,
+      (match) => {
+        let cls = "text-orange-300"; // number
+        if (/^"/.test(match)) {
+          cls = /:$/.test(match) ? "text-blue-300" : "text-green-300"; // key or string
+        } else if (/true|false/.test(match)) {
+          cls = "text-purple-300";
+        } else if (/null/.test(match)) {
+          cls = "text-gray-400";
+        }
+        return `<span class="${cls}">${match}</span>`;
+      },
+    );
+  }
+
+  // ============================================================
+  // Chart Initialization
+  // ============================================================
+
+  function initializeChart(labels, cursorData, claudeData, githubCopilotData) {
+    const ctx = $("#activityChart")?.getContext("2d");
+    if (!ctx) {
+      log("Chart canvas not found");
+      return;
+    }
+
+    log("Initializing chart with", labels.length, "data points");
+
+    const isDark = getTheme() === "dark";
+    const cursorColor = "#2563eb"; // Blue - works in both themes
+    const claudeColor = isDark ? "#ffffff" : "#09090b"; // White in dark, black in light
+    const copilotColor = "#8b5cf6"; // Violet - works in both themes
+
+    state.chart = new Chart(ctx, {
+      type: "line",
+      data: {
+        labels,
+        datasets: [
+          {
+            label: "Cursor",
+            data: cursorData,
+            borderColor: cursorColor,
+            backgroundColor: isDark
+              ? "rgba(37, 99, 235, 0.1)"
+              : "rgba(37, 99, 235, 0.05)",
+            borderWidth: 2,
+            tension: 0.4,
+            fill: true,
+            pointRadius: 0,
+            pointHoverRadius: 4,
+          },
+          {
+            label: "Claude",
+            data: claudeData,
+            borderColor: claudeColor,
+            backgroundColor: isDark
+              ? "rgba(255, 255, 255, 0.05)"
+              : "rgba(9, 9, 11, 0.05)",
+            borderWidth: 2,
+            tension: 0.4,
+            fill: true,
+            pointRadius: 0,
+            pointHoverRadius: 4,
+          },
+          {
+            label: "GitHub Copilot",
+            data: githubCopilotData || [],
+            borderColor: copilotColor,
+            backgroundColor: isDark
+              ? "rgba(139, 92, 246, 0.1)"
+              : "rgba(139, 92, 246, 0.05)",
+            borderWidth: 2,
+            tension: 0.4,
+            fill: true,
+            pointRadius: 0,
+            pointHoverRadius: 4,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        interaction: { mode: "index", intersect: false },
+        plugins: {
+          legend: { display: false },
+          tooltip: {
+            backgroundColor: isDark ? "#181818" : "#ffffff",
+            titleColor: isDark ? "#fff" : "#09090b",
+            bodyColor: isDark ? "#a1a1aa" : "#52525b",
+            borderColor: isDark ? "#27272a" : "#e4e4e7",
+            borderWidth: 1,
+            padding: 10,
+            displayColors: true,
+          },
+        },
+        scales: {
+          x: {
+            grid: { display: false },
+            ticks: {
+              color: "#71717a",
+              font: { size: 10 },
+              maxTicksLimit: 7,
+              autoSkip: true,
+            },
+          },
+          y: {
+            beginAtZero: true,
+            grid: { color: isDark ? "#27272a" : "#e4e4e7" },
+            ticks: { color: "#71717a", font: { size: 10 }, stepSize: 5 },
+          },
+        },
+      },
+    });
+  }
+
+  // ============================================================
+  // Event Delegation (Single Handler)
+  // ============================================================
+
+  function setupEventDelegation() {
+    document.addEventListener("click", (e) => {
+      // Session row click
+      const sessionRow = e.target.closest(".session-row");
+      if (sessionRow) {
+        const sessionId = sessionRow.getAttribute("data-session-id");
+        if (sessionId) openSession(sessionId);
+        return;
+      }
+
+      // Event row click
+      const eventRow = e.target.closest(".event-row");
+      if (eventRow) {
+        const eventType = eventRow.getAttribute("data-event-type");
+        const eventIndex = parseInt(
+          eventRow.getAttribute("data-event-index"),
+          10,
+        );
+        if (eventType && !isNaN(eventIndex))
+          openEventDetail(eventType, eventIndex);
+        return;
+      }
+
+      // Tab button click
+      const tabBtn = e.target.closest(".tab-btn");
+      if (tabBtn) {
+        const tabId = tabBtn.getAttribute("data-tab");
+        if (tabId) showTab(tabId);
+        return;
+      }
+
+      // Modal close on overlay click
+      if (e.target.id === "modal-container") {
+        closeModal();
+      }
+      if (e.target.id === "modal-event-detail") {
+        closeEventDetailModal();
+      }
+    });
+
+    // Keyboard: Escape to close modal
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") closeEventDetailModal();
+      if (e.key === "Escape") closeModal();
+    });
+
+    log("Event delegation set up");
+  }
+
+  // ============================================================
+  // Theme Management
+  // ============================================================
+
+  function getTheme() {
+    return localStorage.getItem("theme") || "dark";
+  }
+
+  function setTheme(theme) {
+    const html = document.documentElement;
+    if (theme === "dark") {
+      html.classList.add("dark");
+    } else {
+      html.classList.remove("dark");
+    }
+    localStorage.setItem("theme", theme);
+    updateThemeIcon(theme);
+    updateChartTheme(theme);
+  }
+
+  function toggleTheme() {
+    const currentTheme = getTheme();
+    const newTheme = currentTheme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+    log("Theme toggled to:", newTheme);
+  }
+
+  function updateThemeIcon(theme) {
+    const lightIcon = $("#theme-icon-light");
+    const darkIcon = $("#theme-icon-dark");
+    if (lightIcon && darkIcon) {
+      if (theme === "dark") {
+        lightIcon.classList.remove("hidden");
+        lightIcon.classList.add("block");
+        darkIcon.classList.remove("block");
+        darkIcon.classList.add("hidden");
+      } else {
+        lightIcon.classList.remove("block");
+        lightIcon.classList.add("hidden");
+        darkIcon.classList.remove("hidden");
+        darkIcon.classList.add("block");
+      }
+    }
+  }
+
+  function updateChartTheme(theme) {
+    if (!state.chart) return;
+
+    const isDark = theme === "dark";
+    const claudeColor = isDark ? "#ffffff" : "#09090b";
+
+    // Update Claude dataset color
+    if (state.chart.data.datasets[1]) {
+      state.chart.data.datasets[1].borderColor = claudeColor;
+      state.chart.data.datasets[1].backgroundColor = isDark
+        ? "rgba(255, 255, 255, 0.05)"
+        : "rgba(9, 9, 11, 0.05)";
+    }
+
+    // Update tooltip colors
+    state.chart.options.plugins.tooltip.backgroundColor = isDark
+      ? "#181818"
+      : "#ffffff";
+    state.chart.options.plugins.tooltip.titleColor = isDark
+      ? "#fff"
+      : "#09090b";
+    state.chart.options.plugins.tooltip.bodyColor = isDark
+      ? "#a1a1aa"
+      : "#52525b";
+    state.chart.options.plugins.tooltip.borderColor = isDark
+      ? "#27272a"
+      : "#e4e4e7";
+
+    // Update scales
+    state.chart.options.scales.x.ticks.color = "#71717a";
+    state.chart.options.scales.y.grid.color = isDark ? "#27272a" : "#e4e4e7";
+    state.chart.options.scales.y.ticks.color = "#71717a";
+
+    state.chart.update("none");
+  }
+
+  // ============================================================
+  // Page Initialization
+  // ============================================================
+
+  function initializePage() {
+    // Initialize theme
+    const savedTheme = getTheme();
+    setTheme(savedTheme);
+
+    // Set up theme toggle button
+    const themeToggle = $("#theme-toggle");
+    if (themeToggle) {
+      themeToggle.addEventListener("click", toggleTheme);
+    }
+
+    // Set current date
+    const dateEl = $("#current-date");
+    if (dateEl) {
+      dateEl.textContent = new Date().toLocaleDateString(undefined, {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
+    }
+
+    // Mark initial active tab
+    const activeTabBtn = $(`.tab-btn[data-tab="${state.activeTab}"]`);
+    if (activeTabBtn) activeTabBtn.classList.add("active");
+
+    log("Page initialized");
+  }
+
+  // ============================================================
+  // Public API
+  // ============================================================
+
+  window.Dashboard = {
+    // Core initialization
+    init: function (sessions, rawData, chartConfig, sessionsWithEvents) {
+      log("Dashboard.init() called");
+      initializeData(sessions, rawData, sessionsWithEvents);
+      setupEventDelegation();
+      initializePage();
+
+      if (chartConfig) {
+        initializeChart(
+          chartConfig.labels,
+          chartConfig.cursor,
+          chartConfig.claude,
+          chartConfig.github_copilot,
+        );
+        // Update chart theme after initialization
+        updateChartTheme(getTheme());
+      }
+
+      if (DEBUG) exposeDebugAPI();
+      log("Dashboard ready");
+    },
+
+    // Exposed for inline handlers if needed (prefer data-tab attributes)
+    showTab,
+    filterTable,
+    closeModal,
+    closeEventDetailModal,
+
+    // For testing
+    __test__: {
+      escapeHtml,
+      syntaxHighlight,
+      buildEventBubble,
+      getState: () => state,
+    },
+  };
+})(window);