@cybermem/dashboard 0.5.14 → 0.8.5

package/lib/data/dashboard-context.tsx

@@ -1,118 +1,165 @@
+"use client";
 
-"use client"
-
-import React, { createContext, useContext, useEffect, useState } from "react"
-import { DemoDataSource } from "./demo-strategy"
-import { ProductionDataSource } from "./production-strategy"
-import { DataSourceStrategy } from "./types"
+import React, { createContext, useContext, useEffect, useState } from "react";
+import { DemoDataSource } from "./demo-strategy";
+import { ProductionDataSource } from "./production-strategy";
+import { DataSourceStrategy } from "./types";
 
 interface ClientConfig {
-  id: string
-  name: string
-  match: string
-  color: string
-  icon: string | null
-  description: string
-  steps: string[]
-  configType: string
+  id: string;
+  name: string;
+  match: string;
+  color: string;
+  icon: string | null;
+  description: string;
+  steps: string[];
+  configType: string;
 }
 
 interface ServiceStatus {
-  name: string
-  status: 'ok' | 'error' | 'warning'
-  message?: string
-  latencyMs?: number
+  name: string;
+  status: "ok" | "error" | "warning";
+  message?: string;
+  latencyMs?: number;
 }
 
 interface SystemHealth {
-  overall: 'ok' | 'degraded' | 'error'
-  services: ServiceStatus[]
-  timestamp: string
+  overall: "ok" | "degraded" | "error";
+  services: ServiceStatus[];
+  timestamp: string;
 }
 
 interface DashboardContextType {
-  strategy: DataSourceStrategy
-  isDemo: boolean
-  toggleDemo: () => void
-  refreshSignal: number
-  clientConfigs: ClientConfig[]
-  systemHealth: SystemHealth | null
+  strategy: DataSourceStrategy;
+  isDemo: boolean;
+  toggleDemo: () => void;
+  refreshSignal: number;
+  clientConfigs: ClientConfig[];
+  systemHealth: SystemHealth | null;
+  isAuthenticated: boolean;
+  login: () => void;
 }
 
-const DashboardContext = createContext<DashboardContextType | undefined>(undefined)
+const DashboardContext = createContext<DashboardContextType | undefined>(
+  undefined,
+);
 
-export function DashboardProvider({ children }: { children: React.ReactNode }) {
-  const [isDemo, setIsDemo] = useState(false)
-  const [strategy, setStrategy] = useState<DataSourceStrategy>(new ProductionDataSource())
-  const [refreshSignal, setRefreshSignal] = useState(0)
-  const [clientConfigs, setClientConfigs] = useState<ClientConfig[]>([])
-  const [systemHealth, setSystemHealth] = useState<SystemHealth | null>(null)
+export function DashboardProvider({
+  children,
+  initialAuth = false,
+}: {
+  children: React.ReactNode;
+  initialAuth?: boolean;
+}) {
+  const [isDemo, setIsDemo] = useState(false);
+  const [strategy, setStrategy] = useState<DataSourceStrategy>(
+    new ProductionDataSource(),
+  );
+  const [refreshSignal, setRefreshSignal] = useState(0);
+  const [clientConfigs, setClientConfigs] = useState<ClientConfig[]>([]);
+  const [systemHealth, setSystemHealth] = useState<SystemHealth | null>(null);
+  const [isAuthenticated, setIsAuthenticated] = useState(initialAuth);
 
   // Load configuration on mount
   useEffect(() => {
     // Load client config
     fetch("/clients.json")
-        .then(res => res.json())
-        .then(data => setClientConfigs(data))
-        .catch(err => console.error("Failed to load client configs:", err))
-  }, [])
+      .then((res) => res.json())
+      .then((data) => setClientConfigs(data))
+      .catch((err) => console.error("Failed to load client configs:", err));
+
+    // Check session storage
+    if (sessionStorage.getItem("authenticated") === "true") {
+      setIsAuthenticated(true);
+    }
+  }, []);
 
   // Check system health
   useEffect(() => {
     const checkHealth = async () => {
       try {
-        const res = await fetch("/api/health", { signal: AbortSignal.timeout(5000) })
+        const res = await fetch("/api/health", {
+          signal: AbortSignal.timeout(5000),
+        });
         if (res.ok) {
-          const data = await res.json()
-          setSystemHealth(data)
+          const data = await res.json();
+          setSystemHealth(data);
         } else {
           setSystemHealth({
-            overall: 'error',
-            services: [{ name: 'Dashboard API', status: 'error', message: `HTTP ${res.status}` }],
-            timestamp: new Date().toISOString()
-          })
+            overall: "error",
+            services: [
+              {
+                name: "Dashboard API",
+                status: "error",
+                message: `HTTP ${res.status}`,
+              },
+            ],
+            timestamp: new Date().toISOString(),
+          });
         }
       } catch (error: any) {
         setSystemHealth({
-          overall: 'error',
-          services: [{ name: 'Dashboard API', status: 'error', message: error.message || 'Connection failed' }],
-          timestamp: new Date().toISOString()
-        })
+          overall: "error",
+          services: [
+            {
+              name: "Dashboard API",
+              status: "error",
+              message: error.message || "Connection failed",
+            },
+          ],
+          timestamp: new Date().toISOString(),
+        });
       }
-    }
-    checkHealth()
-    const interval = setInterval(checkHealth, 30000) // Check every 30s
-    return () => clearInterval(interval)
-  }, [])
+    };
+    checkHealth();
+    const interval = setInterval(checkHealth, 30000); // Check every 30s
+    return () => clearInterval(interval);
+  }, []);
 
   const toggleDemo = () => {
-    const newState = !isDemo
-    setIsDemo(newState)
-    setStrategy(newState ? new DemoDataSource() : new ProductionDataSource())
-    setRefreshSignal(prev => prev + 1)
-  }
+    const newState = !isDemo;
+    setIsDemo(newState);
+    setStrategy(newState ? new DemoDataSource() : new ProductionDataSource());
+    setRefreshSignal((prev) => prev + 1);
+  };
+
+  const login = () => {
+    setIsAuthenticated(true);
+    sessionStorage.setItem("authenticated", "true");
+  };
 
   // Refresh data periodically (centralized trigger)
   useEffect(() => {
-      if (isDemo) return // No auto-refresh in Demo Mode (static data)
+    if (isDemo) return; // No auto-refresh in Demo Mode (static data)
 
-      const interval = setInterval(() => {
-         setRefreshSignal(prev => prev + 1)
-      }, 5000)
-      return () => clearInterval(interval)
-  }, [isDemo])
+    const interval = setInterval(() => {
+      setRefreshSignal((prev) => prev + 1);
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [isDemo]);
 
   return (
-    <DashboardContext.Provider value={{ strategy, isDemo, toggleDemo, refreshSignal, clientConfigs, systemHealth }}>
+    <DashboardContext.Provider
+      value={{
+        strategy,
+        isDemo,
+        toggleDemo,
+        refreshSignal,
+        clientConfigs,
+        systemHealth,
+        isAuthenticated,
+        login,
+      }}
+    >
       {children}
     </DashboardContext.Provider>
-  )
+  );
 }
 
 export function useDashboard() {
-  const context = useContext(DashboardContext)
+  const context = useContext(DashboardContext);
   if (context === undefined) {
-    throw new Error("useDashboard must be used within a DashboardProvider")
+    throw new Error("useDashboard must be used within a DashboardProvider");
   }
-  return context
+  return context;
 }

package/lib/data/production-strategy.ts

@@ -1,39 +1,52 @@
-
-import { DashboardData, DataSourceStrategy, TimeSeriesData } from "./types"
+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 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: [] }
+    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 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)
+      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" }
+      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,
@@ -42,69 +55,95 @@ export class ProductionDataSource implements DataSourceStrategy {
         operation,
         status,
         description,
-        timestamp: new Date(log.timestamp).getTime()
-      }
-    })
+        timestamp: new Date(log.timestamp).getTime(),
+      };
+    });
 
     // Calculate Latest & Tops from logs if available
-    const sortedByDate = [...mappedLogs].sort((a, b) => b.timestamp - a.timestamp)
+    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 }
+    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 }
+    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> = {}
+    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
+        writerCounts[log.client] = (writerCounts[log.client] || 0) + 1;
       } else if (log.operation === "Read") {
-        readerCounts[log.client] = (readerCounts[log.client] || 0) + 1
+        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 })
+      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
-       }
-    }
+      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[] }
+    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
-        }
+      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 {
@@ -119,34 +158,34 @@ export class ProductionDataSource implements DataSourceStrategy {
         lastReader,
       },
       trends: {
-        memory: calculateTrend(data.sparklines?.memoryRecords),
-        clients: calculateTrend(data.sparklines?.totalClients),
+        memory: calculateTrend(data.sparklines?.memoryRecords || []),
+        clients: calculateTrend(data.sparklines?.totalClients || []),
         success: successTrend,
-        requests: calculateTrend(data.sparklines?.totalRequests),
+        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()
+    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 = {}
+    let metadata = {};
     if (apiData.metadata) {
-        metadata = 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
-    }
+      creates: apiData.timeSeries?.creates || [],
+      reads: apiData.timeSeries?.reads || [],
+      updates: apiData.timeSeries?.updates || [],
+      deletes: apiData.timeSeries?.deletes || [],
+      metadata,
+    };
   }
 }

package/middleware.ts

@@ -1,43 +1,65 @@
-import { NextResponse } from 'next/server'
-import type { NextRequest } from 'next/server'
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+/**
+ * Dashboard Middleware
+ *
+ * 1. LOCAL BYPASS: localhost, 127.0.0.1, raspberrypi.local skip auth
+ * 2. REMOTE: Check cybermem_token cookie
+ * 3. CSRF Protection for mutations
+ */
+export async function middleware(request: NextRequest) {
+  const host = request.headers.get("host") || "";
+
+  // LOCAL BYPASS: Skip auth for local development and trusted networks
+  const isLocal =
+    host.includes("localhost") ||
+    host.includes("127.0.0.1") ||
+    host.includes("raspberrypi.local");
+
+  if (!isLocal) {
+    // REMOTE: Check cookie token
+    const token = request.cookies.get("cybermem_token")?.value;
+
+    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);
+    }
+
+    // Note: Full token verification happens in the token endpoint
+    // Cookie existence is enough for middleware (token was validated when set)
+  }
 
-export function middleware(request: NextRequest) {
   // CSRF Protection for mutating requests
-  if (['POST', 'PUT', 'DELETE', 'PATCH'].includes(request.method)) {
-    const origin = request.headers.get('origin')
-    const referer = request.headers.get('referer')
-    const host = request.headers.get('host')
-
-    // If no origin/referer, or they don't match the host, block it.
-    // NOTE: This is a strict check. For local dev, internal API calls might need bypass if no origin set.
-    // Browsers ALWAYS send Origin for cross-origin POSTs.
-    // For same-origin, they usually send it too, but we can fall back to Referer.
-    
-    // Allow server-side calls (no origin/referer) ONLY if coming from trusted internal network? 
-    // Actually, for a dashboard, we expect browser interaction.
-    // If strict compliance is needed: logic below.
-    
+  if (["POST", "PUT", "DELETE", "PATCH"].includes(request.method)) {
+    const origin = request.headers.get("origin");
+    const referer = request.headers.get("referer");
+
     if (origin) {
-      const originHost = origin.replace(/^https?:\/\//, '')
+      const originHost = origin.replace(/^https?:\/\//, "");
       if (originHost !== host) {
-         return new NextResponse('CSRF Validation Failed', { status: 403 })
+        return new NextResponse("CSRF Validation Failed", { status: 403 });
       }
     } else if (referer) {
-       const refererHost = new URL(referer).host
-       if (refererHost !== host) {
-          return new NextResponse('CSRF Validation Failed', { status: 403 })
-       }
-    } else {
-       // Ideally we block requests without Origin/Referer in modern browsers for mutations
-       // But to be safe for non-browser tooling (if used): header check
-       // We'll enforce that the request must have come from our UI
-       // return new NextResponse('Missing Origin/Referer', { status: 403 })
+      const refererHost = new URL(referer).host;
+      if (refererHost !== host) {
+        return new NextResponse("CSRF Validation Failed", { status: 403 });
+      }
     }
   }
 
-  return NextResponse.next()
+  return NextResponse.next();
 }
 
 export const config = {
-  matcher: '/api/:path*',
-}
+  matcher: [
+    // Match all routes except:
+    // - API auth routes
+    // - Next.js internals
+    // - Static files
+    // - Health check (for monitoring)
+    "/((?!api/auth|api/health|_next|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+  ],
+};

package/next.config.mjs

@@ -1,36 +1,28 @@
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  typescript: {
-    ignoreBuildErrors: true,
-  },
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
   images: {
     unoptimized: true,
   },
-  output: 'standalone',
-  transpilePackages: ['recharts'],
-  serverExternalPackages: ['dockerode', 'ssh2'],
-  experimental: {
-  },
+  output: "standalone",
+  transpilePackages: ["recharts"],
+  serverExternalPackages: ["dockerode", "ssh2"],
+  experimental: {},
   webpack: (config) => {
-    config.externals = [...(config.externals || []), 'ssh2', 'dockerode'];
+    config.externals = [...(config.externals || []), "ssh2", "dockerode"];
     return config;
   },
   async rewrites() {
     return [
       {
-        source: '/docs',
-        destination: '/docs/index.html',
+        source: "/docs",
+        destination: "/docs/index.html",
       },
       {
-        source: '/docs/:slug',
-        destination: '/docs/:slug.html',
+        source: "/docs/:slug",
+        destination: "/docs/:slug.html",
       },
-    ]
+    ];
   },
-}
+};
 
-export default nextConfig
+export default nextConfig;