@cybermem/dashboard 0.9.12 → 0.13.4

package/middleware.ts

@@ -11,25 +11,43 @@ import { NextResponse } from "next/server";
 export async function middleware(request: NextRequest) {
   const host = request.headers.get("host") || "";
 
-  // LOCAL BYPASS: Skip auth for local development and trusted networks
+  // 1. LOCAL BYPASS: Skip auth for local development and trusted networks
+  const authMethod = request.headers.get("x-auth-method");
+  const userId = request.headers.get("x-user-id");
+
+  // Check if host is a private IP address (10.x.x.x)
+  const isPrivateIP = /^10\.\d{1,3}\.\d{1,3}\.\d{1,3}(:\d+)?$/.test(host);
+  
   const isLocal =
     host.includes("localhost") ||
     host.includes("127.0.0.1") ||
-    host.includes("raspberrypi.local");
+    host.includes("raspberrypi.local") ||
+    isPrivateIP ||
+    authMethod === "local" ||
+    userId === "local";
 
-  if (!isLocal) {
-    // REMOTE: Check cookie token
-    const token = request.cookies.get("cybermem_token")?.value;
+  if (isLocal) {
+    const responseHeaders = new Headers(request.headers);
+    responseHeaders.set("X-User-Id", "local");
+    return NextResponse.next({
+      request: {
+        headers: responseHeaders,
+      },
+    });
+  }
 
-    if (!token) {
-      // Redirect to token auth page with error
-      const authUrl = new URL("/api/auth/token", request.url);
-      authUrl.searchParams.set("error", "no_token");
-      return NextResponse.redirect(authUrl);
-    }
+  // REMOTE: Check cookie token
+  const token = request.cookies.get("cybermem_token")?.value;
 
-    // Note: Full token verification happens in the token endpoint
-    // Cookie existence is enough for middleware (token was validated when set)
+  // We do NOT redirect here anymore to avoid 307 loops and respect Law #6.
+  // Unauthorized requests will simply not have the X-User-Id header,
+  // and the UI (app/page.tsx) will render the LoginModal with a 200 OK.
+  if (
+    !token &&
+    !userId &&
+    !request.nextUrl.pathname.startsWith("/api/auth")
+  ) {
+    console.log("MiddleWare: No token/userId found for remote request");
   }
 
   // CSRF Protection for mutating requests

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cybermem/dashboard",
-  "version": "0.9.12",
+  "version": "0.13.4",
   "description": "CyberMem Monitoring Dashboard",
   "homepage": "https://cybermem.dev",
   "repository": {
@@ -15,6 +15,7 @@
   "scripts": {
     "build": "next build --webpack",
     "dev": "next dev --webpack",
+    "dev:turbo": "next dev --turbopack",
     "lint": "eslint .",
     "start": "next start",
     "test:e2e": "playwright test"
@@ -76,7 +77,9 @@
     "react-day-picker": "9.8.0",
     "react-dom": "19.2.0",
     "react-hook-form": "^7.60.0",
+    "react-remove-scroll-bar": "2.3.8",
     "react-resizable-panels": "^2.1.7",
+    "react-style-singleton": "2.2.3",
     "recharts": "2.15.4",
     "recharts-scale": "^0.4.5",
     "sonner": "^1.7.4",
@@ -85,6 +88,8 @@
     "ssh2": "^1.17.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
+    "use-callback-ref": "1.3.3",
+    "use-sidecar": "1.1.3",
     "vaul": "^1.1.2",
     "zod": "3.25.76"
   },

package/playwright.config.ts

@@ -1,70 +1,35 @@
 import { defineConfig, devices } from "@playwright/test";
-import fs from "fs";
-import path from "path";
-
-// Load clients to pick a random one for realistic testing
-// This ensures E2E tests generate traffic that looks like real clients (Claude, VS Code, etc.)
-const clientsPath = path.join(__dirname, "public", "clients.json");
-let randomClient = { name: "Playwright Desktop", match: "playwright" };
-
-try {
-  if (fs.existsSync(clientsPath)) {
-    const clients = JSON.parse(fs.readFileSync(clientsPath, "utf-8"));
-    const validClients = clients.filter(
-      (c: any) => c.match && c.match !== "other",
-    );
-    if (validClients.length > 0) {
-      randomClient =
-        validClients[Math.floor(Math.random() * validClients.length)];
-      // Handle regex matchers (take first option)
-      if (randomClient.match.includes("|")) {
-        randomClient.match = randomClient.match.split("|")[0];
-      }
-    }
-  }
-} catch (e) {
-  console.warn("Failed to load clients.json, using default.");
-}
-
-console.log(
-  `🤖 E2E Test Identity: ${randomClient.name} (UA: ${randomClient.match})`,
-);
 
 export default defineConfig({
   testDir: "./e2e",
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: 3,
-  timeout: 10000, // 10s max per test
-  expect: {
-    timeout: 5000, // 5s for assertions
-  },
-  workers: process.env.CI ? 1 : undefined,
+  outputDir: "./test-results",
   reporter: "html",
   use: {
-    baseURL: process.env.BASE_URL || "http://127.0.0.1:3000",
-    trace: "on-first-retry",
-    ignoreHTTPSErrors: true,
-    userAgent: `${randomClient.match}/1.0 (E2E Test)`,
-    extraHTTPHeaders: {
-      "X-Client-Name": randomClient.name,
-    },
+    baseURL: process.env.DASHBOARD_URL || "http://localhost:3000",
+    screenshot: "only-on-failure",
   },
+  webServer: process.env.DASHBOARD_URL
+    ? undefined
+    : {
+        command: "npm run dev",
+        port: 3000,
+        reuseExistingServer: !process.env.CI,
+        stdout: "ignore",
+        stderr: "pipe",
+      },
   projects: [
     {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+      name: "api",
+      testMatch: ["api.spec.ts", "routing.spec.ts"],
+    },
+    {
+      name: "ui",
+      testMatch: "ui.spec.ts",
+      use: {
+        ...devices["Desktop Chrome"],
+        trace: "on",
+        screenshot: "on",
+      },
     },
   ],
-  webServer: {
-    // In CI: dashboard runs via docker-compose, no need to start new server
-    // Locally: starts dev server if not already running
-    command:
-      "lsof -ti:3000 | xargs kill -9 2>/dev/null || true; npm run dev -- -p 3000 -H 127.0.0.1",
-    url: "http://127.0.0.1:3000",
-    reuseExistingServer: true, // Always reuse - docker-compose provides in CI
-    stdout: "pipe",
-    stderr: "pipe",
-    timeout: 60000,
-  },
 });

package/public/clients.json

@@ -5,6 +5,7 @@
     "match": "claude|antigravity",
     "color": "#e65c40",
     "icon": "/icons/claude.png",
+    "filename": "claude_desktop_config.json",
     "description": "Configure Claude Desktop to use CyberMem for persistent memory across conversations.",
     "steps": [
       "Open Claude Desktop",
@@ -54,6 +55,7 @@
     "match": "windsurf",
     "color": "#3b82f6",
     "icon": "/icons/windsurf.png",
+    "filename": "mcp_config.json",
     "description": "Windsurf (Codeium) supports MCP via a dedicated config file.",
     "steps": [
       "Open the config file: `~/.codeium/windsurf/mcp_config.json`",
@@ -116,6 +118,7 @@
     "match": "codex",
     "color": "#6366f1",
     "icon": "/icons/codex.png",
+    "filename": "config.toml",
     "description": "Codex CLI uses TOML format for MCP configuration.",
     "steps": [
       "Edit `~/.codex/config.toml`",
@@ -165,9 +168,8 @@
     "icon": null,
     "description": "For any other MCP-compliant client, use the following connection details:",
     "steps": [
-      "**Transport**: stdio (via npx command)",
-      "**Command**: `npx @cybermem/mcp` with `--url {{ENDPOINT}}` and `--token {{TOKEN}}` args",
-      "Refer to your client's documentation for config file location"
+      "Locate the configuration file for your client",
+      "Insert the following JSON configuration:"
     ],
     "configType": "json"
   }

package/lib/data/demo-strategy.ts

@@ -1,110 +0,0 @@
-
-import { DashboardData, DataSourceStrategy, TimeSeriesData } from "./types"
-
-export class DemoDataSource implements DataSourceStrategy {
-  async fetchGlobalStats(): Promise<DashboardData> {
-    // 1. Generate full time-series history for sparklines
-    const generateSeries = (start: number, count: number, variance: number) => {
-      const series = [start]
-      for (let i = 1; i < count; i++) {
-        const change = (Math.random() - 0.5) * variance
-        series.push(Math.max(0, series[i - 1] + change))
-      }
-      return series
-    }
-
-    const exactData = {
-      memory: generateSeries(12000, 20, 500),
-      clients: generateSeries(40, 20, 2),
-      success: generateSeries(98, 20, 0.5).map((v) => Math.min(100, v)),
-      requests: generateSeries(85000, 20, 1000),
-    }
-
-    // 2. Generate stable, rich Audit Log history
-    const mockClients = ["Antigravity", "Claude", "Cursor", "ChatGPT", "Copilot"]
-    const mockOps = ["Create", "Read", "Update", "Delete"]
-    const demoLogs = Array.from({ length: 50 }).map((_, i) => ({
-      id: i,
-      date: new Date(Date.now() - i * 1000 * 60 * 5),
-      client: mockClients[i % mockClients.length],
-      operation: mockOps[i % mockOps.length],
-      status: i % 10 === 0 ? "Error" : "Success",
-      description:
-        i % 10 === 0 ? "Rate limit exceeded" : "Operation completed successfully",
-      timestamp: Date.now() - i * 1000 * 60 * 5,
-    }))
-
-    return {
-      stats: {
-        memoryRecords: Math.round(exactData.memory[exactData.memory.length - 1]),
-        totalClients: Math.round(exactData.clients[exactData.clients.length - 1]),
-        successRate: Number(
-          exactData.success[exactData.success.length - 1].toFixed(1)
-        ),
-        totalRequests: Math.round(
-          exactData.requests[exactData.requests.length - 1]
-        ),
-        topWriter: { name: "Antigravity", count: 4200 },
-        topReader: { name: "Claude", count: 3100 },
-        lastWriter: { name: "VS Code", timestamp: Date.now() - 1000 * 60 * 2 },
-        lastReader: { name: "Cursor", timestamp: Date.now() - 1000 * 30 },
-      },
-      trends: {
-        memory: {
-          change: "+450",
-          trend: "up",
-          hasData: true,
-          data: exactData.memory,
-        },
-        clients: {
-          change: "+5",
-          trend: "up",
-          hasData: true,
-          data: exactData.clients,
-        },
-        success: {
-          change: "+0.5%",
-          trend: "up",
-          hasData: true,
-          data: exactData.success,
-        },
-        requests: {
-          change: "+1.2k",
-          trend: "up",
-          hasData: true,
-          data: exactData.requests,
-        },
-      },
-      logs: demoLogs,
-    }
-  }
-
-  async getChartData(period: string): Promise<TimeSeriesData> {
-    const clients = ["Antigravity", "Claude", "Cursor", "ChatGPT"]
-    const now = Math.floor(Date.now() / 1000)
-    // Generate 20 points
-    const points = 20
-    const interval = 300 // 5 mins
-
-    const generateSeries = () => {
-      return Array.from({ length: points }).map((_, i) => {
-        const time = now - (points - 1 - i) * interval
-        const point: any = { time }
-        clients.forEach(c => {
-           // Random value between 0 and 10
-           point[c] = Math.floor(Math.random() * 10)
-        })
-        return point
-      })
-    }
-
-    return {
-      creates: generateSeries(),
-      reads: generateSeries(),
-      updates: generateSeries(),
-      deletes: generateSeries(),
-      // Metadata is now handled globally via clients.json, so we don't return partial overrides here
-      metadata: {}
-    }
-  }
-}

package/lib/data/production-strategy.ts

@@ -1,191 +0,0 @@
-import { DashboardData, DataSourceStrategy, TimeSeriesData } from "./types";
-
-export class ProductionDataSource implements DataSourceStrategy {
-  async fetchGlobalStats(): Promise<DashboardData> {
-    const res = await fetch(`/api/metrics`);
-    if (!res.ok) throw new Error("Failed to fetch metrics");
-    const data = await res.json();
-
-    const logsRes = await fetch(`/api/audit-logs`);
-    const logsData = logsRes.ok ? await logsRes.json() : { logs: [] };
-
-    // Helper to resolve logs
-    const resolveOperation = (log: any) => {
-      const normalizedOp = (log.operation || "").toString().toLowerCase();
-      if (normalizedOp === "read") return "Read";
-      if (normalizedOp === "write" || normalizedOp === "create") return "Write";
-      if (normalizedOp === "update") return "Update";
-      if (normalizedOp === "delete") return "Delete";
-      const method = (log.method || "").toString().toUpperCase();
-      if (method === "GET") return "Read";
-      if (method === "DELETE") return "Delete";
-      if (method === "PATCH" || method === "PUT") return "Update";
-      return "Write";
-    };
-
-    const mappedLogs = (logsData.logs || []).map((log: any, index: number) => {
-      const operation = resolveOperation(log);
-      // Use rawStatus if available (from our API), otherwise fallback to status
-      const statusCode = parseInt(log.rawStatus || log.status);
-      let status = "Success";
-      let description = "";
-      if (statusCode >= 500) {
-        status = "Error";
-        description = "Server error";
-      } else if (statusCode >= 400) {
-        status = "Error";
-        description =
-          statusCode === 401
-            ? "Unauthorized"
-            : statusCode === 403
-              ? "Forbidden"
-              : "Client error";
-      } else if (statusCode >= 300) {
-        status = "Warning";
-        description = "Redirect";
-      } else if (log.status === "Error") {
-        status = "Error";
-        description = "Error";
-      }
-
-      return {
-        id: index,
-        date: new Date(log.timestamp),
-        client: log.client || "Unknown",
-        operation,
-        status,
-        description,
-        timestamp: new Date(log.timestamp).getTime(),
-      };
-    });
-
-    // Calculate Latest & Tops from logs if available
-    const sortedByDate = [...mappedLogs].sort(
-      (a, b) => b.timestamp - a.timestamp,
-    );
-
-    // Writers
-    const wLog = sortedByDate.find((l) =>
-      ["Write", "Update", "Delete", "Create"].includes(l.operation),
-    );
-    const lastWriter = wLog
-      ? { name: wLog.client, timestamp: wLog.timestamp }
-      : { name: "N/A", timestamp: 0 };
-
-    // Readers
-    const rLog = sortedByDate.find((l) => l.operation === "Read");
-    const lastReader = rLog
-      ? { name: rLog.client, timestamp: rLog.timestamp }
-      : { name: "N/A", timestamp: 0 };
-
-    // Tops
-    const writerCounts: Record<string, number> = {};
-    const readerCounts: Record<string, number> = {};
-    mappedLogs.forEach((log: any) => {
-      if (["Write", "Update", "Delete", "Create"].includes(log.operation)) {
-        writerCounts[log.client] = (writerCounts[log.client] || 0) + 1;
-      } else if (log.operation === "Read") {
-        readerCounts[log.client] = (readerCounts[log.client] || 0) + 1;
-      }
-    });
-    const getTop = (counts: Record<string, number>) => {
-      const entries = Object.entries(counts);
-      if (entries.length === 0) return { name: "N/A", count: 0 };
-      entries.sort((a, b) => b[1] - a[1]);
-      return { name: entries[0][0], count: entries[0][1] };
-    };
-
-    const topWriter = logsRes.ok
-      ? getTop(writerCounts)
-      : (data.stats.topWriter ?? { name: "N/A", count: 0 });
-    const topReader = logsRes.ok
-      ? getTop(readerCounts)
-      : (data.stats.topReader ?? { name: "N/A", count: 0 });
-
-    // Trends calculation
-    const calculateTrend = (series: number[]) => {
-      if (!series || series.length < 2)
-        return {
-          change: "0",
-          trend: "neutral" as const,
-          hasData: false,
-          data: [],
-        };
-      const first = series[0];
-      const last = series[series.length - 1];
-      const diff = last - first;
-      const prefix = diff > 0 ? "+" : "";
-      return {
-        change: `${prefix}${diff.toLocaleString()}`,
-        trend: (diff > 0 ? "up" : diff < 0 ? "down" : "neutral") as
-          | "up"
-          | "down"
-          | "neutral",
-        hasData: true,
-        data: series,
-      };
-    };
-
-    // Success Rate Trend
-    let successTrend = {
-      change: "0%",
-      trend: "neutral" as "neutral" | "up" | "down",
-      hasData: false,
-      data: [] as number[],
-    };
-    if (data.sparklines?.successRate) {
-      const sData = data.sparklines.successRate;
-      const sFirst = sData[0] || 0;
-      const sLast = sData[sData.length - 1] || 0;
-      const sDiff = sLast - sFirst;
-      successTrend = {
-        change: `${sDiff > 0 ? "+" : ""}${sDiff.toFixed(1)}%`,
-        trend: sDiff >= 0 ? "up" : "down",
-        hasData: true,
-        data: sData,
-      };
-    }
-
-    return {
-      stats: {
-        memoryRecords: data.stats.memoryRecords ?? 0,
-        totalClients: data.stats.totalClients ?? 0,
-        successRate: data.stats.successRate ?? 0,
-        totalRequests: data.stats.totalRequests ?? 0,
-        topWriter,
-        topReader,
-        lastWriter,
-        lastReader,
-      },
-      trends: {
-        memory: calculateTrend(data.sparklines?.memoryRecords || []),
-        clients: calculateTrend(data.sparklines?.totalClients || []),
-        success: successTrend,
-        requests: calculateTrend(data.sparklines?.totalRequests || []),
-      },
-      logs: mappedLogs,
-    };
-  }
-
-  async getChartData(period: string): Promise<TimeSeriesData> {
-    const res = await fetch(`/api/metrics?period=${period}`);
-    if (!res.ok) throw new Error("Failed to fetch chart data");
-    const apiData = await res.json();
-
-    // Fetch clients metadata separately or use what's in apiData
-    // Ideally we merge them here
-    let metadata = {};
-    if (apiData.metadata) {
-      metadata = apiData.metadata;
-    }
-
-    // apiData.timeSeries needs to be returned.
-    return {
-      creates: apiData.timeSeries?.creates || [],
-      reads: apiData.timeSeries?.reads || [],
-      updates: apiData.timeSeries?.updates || [],
-      deletes: apiData.timeSeries?.deletes || [],
-      metadata,
-    };
-  }
-}

package/lib/prometheus/client.ts

@@ -1,58 +0,0 @@
-// Prefer explicit PROMETHEUS_URL, fall back to NEXT_PUBLIC, then local Prometheus default port (mapped to 9092 in docker-compose)
-export const PROMETHEUS_URL = process.env.PROMETHEUS_URL || process.env.NEXT_PUBLIC_PROMETHEUS_URL || 'http://localhost:9092'
-
-export interface PrometheusQueryResult {
-  status: string
-  data: {
-    resultType: string
-    result: Array<{
-      metric: Record<string, string>
-      value?: [number, string]
-      values?: Array<[number, string]>
-    }>
-  }
-}
-
-export async function query(promql: string): Promise<PrometheusQueryResult> {
-  try {
-    const controller = new AbortController()
-    const id = setTimeout(() => controller.abort(), 1500)
-
-    const response = await fetch(`${PROMETHEUS_URL}/api/v1/query?query=${encodeURIComponent(promql)}`, {
-      signal: controller.signal,
-      cache: 'no-store'
-    })
-    clearTimeout(id)
-
-    if (!response.ok) {
-      throw new Error(`Prometheus query failed: ${response.statusText}`)
-    }
-    return response.json()
-  } catch (error) {
-    console.error('Prometheus query failed:', error)
-    return { status: 'error', data: { resultType: 'vector', result: [] } }
-  }
-}
-
-export async function queryRange(promql: string, start: number, end: number, step: string = '1m'): Promise<PrometheusQueryResult> {
-  try {
-    const url = `${PROMETHEUS_URL}/api/v1/query_range?query=${encodeURIComponent(promql)}&start=${start}&end=${end}&step=${step}`
-
-    const controller = new AbortController()
-    const id = setTimeout(() => controller.abort(), 1500)
-
-    const response = await fetch(url, {
-      signal: controller.signal,
-      cache: 'no-store'
-    })
-    clearTimeout(id)
-
-    if (!response.ok) {
-       throw new Error(`Prometheus range query failed: ${response.statusText}`)
-    }
-    return response.json()
-  } catch (error) {
-    console.error('Prometheus range query failed:', error)
-    return { status: 'error', data: { resultType: 'matrix', result: [] } }
-  }
-}

package/lib/prometheus/index.ts

@@ -1,6 +0,0 @@
-export * from './client'
-export * from './metrics'
-export * from './sparklines'
-export * from './timeseries'
-export * from './utils'
-