@cybermem/dashboard 0.1.0

package/.dockerignore

@@ -0,0 +1,11 @@
+node_modules
+.next
+.git
+.gitignore
+README.md
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+.DS_Store
+*.pem
+.env*.local

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

package/Dockerfile

@@ -0,0 +1,48 @@
+# Base stage for both dev and prod
+FROM node:20-alpine AS base
+WORKDIR /app
+
+# Use corepack to get the pnpm version from the lockfile and speed up installs via cache
+RUN corepack enable
+
+# Copy package files
+COPY package*.json ./
+COPY pnpm-lock.yaml* ./
+
+# Install dependencies (cache pnpm store). Lock is not frozen in repo, so allow updates.
+RUN --mount=type=cache,target=/root/.pnpm-store pnpm install --no-frozen-lockfile
+
+# Copy source code
+COPY . .
+
+# Development stage - skips build, runs dev server
+FROM base AS dev
+ENV NODE_ENV=development
+CMD ["pnpm", "dev"]
+
+# Builder stage - runs build (slow)
+FROM base AS builder
+RUN --mount=type=cache,target=/root/.pnpm-store \
+    --mount=type=cache,target=/app/.next/cache \
+    pnpm build
+
+# Production stage
+FROM node:20-alpine AS production
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Copy necessary files from builder
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+# Expose port
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+# Start the application
+CMD ["node", "server.js"]

package/app/api/audit-logs/route.ts

@@ -0,0 +1,60 @@
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+const CLIENTS = ["Claude Code", "v0", "Cursor", "GitHub Copilot", "Windsurf"]
+const OPERATIONS = ["Read", "Write", "Update", "Delete", "Create"]
+const STATUSES = ["Success", "Success", "Success", "Warning", "Error"]
+const DESCRIPTIONS = {
+  "Success": ["Operation completed successfully", "Resource accessed", "Data synchronized"],
+  "Warning": ["High latency detected", "Rate limit approaching", "Deprecation warning"],
+  "Error": ["Unauthorized access", "Internal server error", "Timeout exceeded", "Validation failed"]
+}
+
+export async function GET(request: Request) {
+  try {
+    // Fetch logs from db-exporter service
+    // timeout 2s to not hang
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 2000)
+
+    const res = await fetch('http://db-exporter:8000/api/logs?limit=100', {
+      signal: controller.signal,
+      cache: 'no-store'
+    })
+    clearTimeout(timeoutId)
+
+    if (!res.ok) {
+        throw new Error(`Failed to fetch logs: ${res.statusText}`)
+    }
+
+    const data = await res.json()
+    const rawLogs = data.logs || []
+
+    const logs = rawLogs.map((log: any) => {
+        const statusCode = parseInt(log.status) || 0
+        let status = "Success"
+        if (statusCode === 0 || statusCode >= 400) status = "Error"
+        else if (statusCode >= 300) status = "Warning"
+
+        // Capitalize operation
+        const operation = log.operation.charAt(0).toUpperCase() + log.operation.slice(1)
+
+        return {
+            timestamp: log.timestamp,
+            client: log.client_name || "Unknown",
+            operation: operation,
+            status: status,
+            method: log.method,
+            description: log.endpoint,
+            rawStatus: log.status
+        }
+    })
+
+    return NextResponse.json({ logs })
+  } catch (error) {
+    console.error("Error fetching audit logs:", error)
+    // Return empty list on error to avoid breaking UI with 500
+    return NextResponse.json({ logs: [] })
+  }
+}

package/app/api/metrics/route.ts

@@ -0,0 +1,141 @@
+import {
+    getClientCount,
+    getCreatesByClient,
+    getDeletesByClient,
+    getErrorsByClient,
+    getLastReader,
+    getLastWriter,
+    getMemoryRecordsCount,
+    getMemoryRecordsSparkline,
+    getReadsByClient,
+    getRequestsByClient,
+    getRequestsByMethod,
+    getRequestsTimeSeries,
+    getRequestsTimeSeriesByMethod,
+    getResponseTimeTimeSeries,
+    getSuccessRate,
+    getSuccessRateByClient,
+    getSuccessRateSparkline,
+    getSuccessRateTimeSeries,
+    getSuccessRateTimeSeriesByClient,
+    getTopReader,
+    getTopWriter,
+    getTotalClientsSparkline,
+    getTotalRequests,
+    getTotalRequestsSparkline,
+    getUpdatesByClient
+} from '@/lib/prometheus'
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+export const revalidate = 0
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const period = searchParams.get('period') || '15m'
+
+    const [
+      totalRequests,
+      requestsByClient,
+      requestsByMethod,
+      successRate,
+      requestsTimeSeries,
+      responseTimeTimeSeries,
+      successRateTimeSeries,
+      writesTimeSeries,
+      memoryRecords,
+      clientCount,
+      memoryRecordsSparkline,
+      totalRequestsSparkline,
+      totalClientsSparkline,
+      successRateSparkline,
+      successRateByClient,
+      successRateTimeSeriesByClient,
+      topWriter,
+      topReader,
+      lastWriter,
+      lastReader,
+      createsTimeSeries,
+      readsTimeSeries,
+      updatesTimeSeries,
+      deletesTimeSeries,
+      errorsTimeSeries
+    ] = await Promise.all([
+      getTotalRequests(period),
+      getRequestsByClient(period),
+      getRequestsByMethod(period),
+      getSuccessRate(),
+      getRequestsTimeSeries(period),
+      getResponseTimeTimeSeries(period),
+      getSuccessRateTimeSeries(period),
+      getRequestsTimeSeriesByMethod('POST', period),
+      getMemoryRecordsCount(),
+      getClientCount(),
+      getMemoryRecordsSparkline(period),
+      getTotalRequestsSparkline(period),
+      getTotalClientsSparkline(period),
+      getSuccessRateSparkline(period),
+      getSuccessRateByClient(),
+      getSuccessRateTimeSeriesByClient(period),
+      getTopWriter(),
+      getTopReader(),
+      getLastWriter(),
+      getLastReader(),
+      getCreatesByClient(period),
+      getReadsByClient(period),
+      getUpdatesByClient(period),
+      getDeletesByClient(period),
+      getErrorsByClient(period)
+    ])
+
+    // Sort clients by total requests
+    const clientStats = Object.entries(requestsByClient)
+      .map(([client, total]) => ({
+        client,
+        total,
+        reads: requestsByMethod.reads[client] || 0,
+        writes: requestsByMethod.writes[client] || 0
+      }))
+      .sort((a, b) => b.total - a.total)
+
+    return NextResponse.json({
+      stats: {
+        memoryRecords,
+        totalClients: clientCount,
+        successRate,
+        totalRequests,
+        topWriter,
+        topReader,
+        lastWriter,
+        lastReader
+      },
+      timeSeries: {
+        requests: requestsTimeSeries,
+        responseTime: responseTimeTimeSeries,
+        successRate: successRateTimeSeries,
+        successRateByClient: successRateTimeSeriesByClient,
+        writes: writesTimeSeries,
+        creates: createsTimeSeries,
+        reads: readsTimeSeries,
+        updates: updatesTimeSeries,
+        deletes: deletesTimeSeries,
+        errors: errorsTimeSeries
+      },
+      clientStats: {
+        reads: requestsByMethod.reads,
+        writes: requestsByMethod.writes,
+        successRate: successRateByClient
+      },
+      sparklines: {
+        memoryRecords: memoryRecordsSparkline,
+        totalRequests: totalRequestsSparkline,
+        totalClients: totalClientsSparkline,
+        successRate: successRateSparkline
+      }
+    })
+  } catch (error) {
+    console.error('Failed to fetch metrics:', error)
+    return NextResponse.json({ error: 'Failed to fetch metrics' }, { status: 500 })
+  }
+}

package/app/api/prometheus/route.ts

@@ -0,0 +1,65 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const PROMETHEUS_URL = process.env.PROMETHEUS_URL || 'http://localhost:9090'
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('query')
+
+  if (!query) {
+    return NextResponse.json({ error: 'Query parameter is required' }, { status: 400 })
+  }
+
+  try {
+    const prometheusResponse = await fetch(
+      `${PROMETHEUS_URL}/api/v1/query?query=${encodeURIComponent(query)}`
+    )
+
+    if (!prometheusResponse.ok) {
+      throw new Error(`Prometheus returned ${prometheusResponse.status}`)
+    }
+
+    const data = await prometheusResponse.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error('Error fetching from Prometheus:', error)
+    return NextResponse.json(
+      { error: 'Failed to fetch data from Prometheus' },
+      { status: 500 }
+    )
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { query, start, end, step } = body
+
+    if (!query) {
+      return NextResponse.json({ error: 'Query parameter is required' }, { status: 400 })
+    }
+
+    const params = new URLSearchParams({
+      query,
+      ...(start && { start: start.toString() }),
+      ...(end && { end: end.toString() }),
+      ...(step && { step: step.toString() }),
+    })
+
+    const endpoint = start && end ? 'query_range' : 'query'
+    const prometheusResponse = await fetch(`${PROMETHEUS_URL}/api/v1/${endpoint}?${params}`)
+
+    if (!prometheusResponse.ok) {
+      throw new Error(`Prometheus returned ${prometheusResponse.status}`)
+    }
+
+    const data = await prometheusResponse.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error('Error fetching from Prometheus:', error)
+    return NextResponse.json(
+      { error: 'Failed to fetch data from Prometheus' },
+      { status: 500 }
+    )
+  }
+}

package/app/api/settings/regenerate/route.ts

@@ -0,0 +1,20 @@
+import crypto from 'crypto'
+import fs from 'fs'
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(req: Request) {
+  try {
+    const apiKey = `sk-${crypto.randomBytes(16).toString('hex')}`
+    const sharedEnvPath = '/app/shared.env'
+
+    // Write OM_API_KEY=... to shared file mounted at /.env in OpenMemory
+    fs.writeFileSync(sharedEnvPath, `OM_API_KEY=${apiKey}\n`)
+
+    return NextResponse.json({ success: true, apiKey })
+  } catch (error) {
+    console.error('[Settings] Failed to regenerate API Key:', error)
+    return NextResponse.json({ error: 'Failed to regenerate API Key' }, { status: 500 })
+  }
+}

package/app/api/settings/route.ts

@@ -0,0 +1,25 @@
+import fs from 'fs'
+import { NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+const CONFIG_PATH = '/data/config.json'
+
+export async function GET() {
+  let apiKey = process.env.OM_API_KEY || 'not-set'
+
+  try {
+     if (fs.existsSync(CONFIG_PATH)) {
+        const raw = fs.readFileSync(CONFIG_PATH, 'utf-8')
+        const conf = JSON.parse(raw)
+        if (conf.api_key) apiKey = conf.api_key
+     }
+  } catch (e) {
+      // ignore
+  }
+
+  return NextResponse.json({
+    apiKey: apiKey,
+    endpoint: process.env.CYBERMEM_URL || 'http://localhost:8080'
+  })
+}

package/app/api/system/restart/route.ts

@@ -0,0 +1,18 @@
+const Docker = require('dockerode');
+import { NextResponse } from 'next/server';
+
+export const dynamic = 'force-dynamic'
+
+export async function POST(req: Request) {
+  try {
+    const docker = new Docker({ socketPath: '/var/run/docker.sock' });
+    const container = docker.getContainer('cybermem-openmemory');
+
+    await container.restart();
+
+    return NextResponse.json({ success: true, message: 'Container restarting...' })
+  } catch (error) {
+    console.error('[Dashboard] Failed to restart server:', error)
+    return NextResponse.json({ error: 'Failed to restart server' }, { status: 500 })
+  }
+}

package/app/globals.css

@@ -0,0 +1,148 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(0.1 0.02 240);
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(0.15 0.02 240);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.15 0.02 240);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.6 0.18 150);
+  --primary-foreground: oklch(0.08 0 0);
+  --secondary: oklch(0.2 0.02 240);
+  --secondary-foreground: oklch(0.95 0 0);
+  --muted: oklch(0.3 0.02 240);
+  --muted-foreground: oklch(0.7 0 0);
+  --accent: oklch(0.6 0.18 150);
+  --accent-foreground: oklch(0.08 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.977 0.008 71.098);
+  --border: oklch(0.2 0.02 240);
+  --input: oklch(0.2 0.02 240);
+  --ring: oklch(0.6 0.18 150);
+  --chart-1: oklch(0.6 0.18 150);
+  --chart-2: oklch(0.62 0.18 210);
+  --chart-3: oklch(0.65 0.14 45);
+  --chart-4: oklch(0.45 0.18 300);
+  --chart-5: oklch(0.58 0.15 190);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.15 0.02 240);
+  --sidebar-foreground: oklch(0.95 0 0);
+  --sidebar-primary: oklch(0.6 0.18 150);
+  --sidebar-primary-foreground: oklch(0.08 0 0);
+  --sidebar-accent: oklch(0.3 0.02 240);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.2 0.02 240);
+  --sidebar-ring: oklch(0.6 0.18 150);
+}
+
+.dark {
+  --background: oklch(0.1 0.02 240);
+  --foreground: oklch(0.95 0 0);
+  --card: oklch(0.15 0.02 240);
+  --card-foreground: oklch(0.95 0 0);
+  --popover: oklch(0.15 0.02 240);
+  --popover-foreground: oklch(0.95 0 0);
+  --primary: oklch(0.6 0.18 150);
+  --primary-foreground: oklch(0.08 0 0);
+  --secondary: oklch(0.2 0.02 240);
+  --secondary-foreground: oklch(0.95 0 0);
+  --muted: oklch(0.3 0.02 240);
+  --muted-foreground: oklch(0.7 0 0);
+  --accent: oklch(0.6 0.18 150);
+  --accent-foreground: oklch(0.08 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.2 0.02 240);
+  --input: oklch(0.2 0.02 240);
+  --ring: oklch(0.6 0.18 150);
+  --chart-1: oklch(0.6 0.18 150);
+  --chart-2: oklch(0.48 0.16 255);
+  --chart-3: oklch(0.65 0.14 45);
+  --chart-4: oklch(0.45 0.18 300);
+  --chart-5: oklch(0.58 0.15 190);
+  --sidebar: oklch(0.15 0.02 240);
+  --sidebar-foreground: oklch(0.95 0 0);
+  --sidebar-primary: oklch(0.6 0.18 150);
+  --sidebar-primary-foreground: oklch(0.08 0 0);
+  --sidebar-accent: oklch(0.3 0.02 240);
+  --sidebar-accent-foreground: oklch(0.95 0 0);
+  --sidebar-border: oklch(0.2 0.02 240);
+  --sidebar-ring: oklch(0.6 0.18 150);
+}
+
+@theme inline {
+  --font-sans: "Geist", "Geist Fallback";
+  --font-mono: "Geist Mono", "Geist Mono Fallback";
+  --font-exo: var(--font-exo2);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+}
+
+html {
+  background-color: #000000;
+  min-height: 100%;
+
+  background-image:
+    radial-gradient(circle at 0% 50%, oklch(72.399% 0.12193 187.358 / 0.02) 0%, transparent 70%),
+    radial-gradient(circle at 100% 50%, oklch(0.75 0.1257 215.22 / 0.02) 0%, transparent 70%),
+    radial-gradient(circle at 25% 25%, oklch(68.073% 0.11257 209.377 / 0.06) 0%, transparent 60%),
+    radial-gradient(circle at 75% 25%, oklch(0.71 0.1491 162.48 / 0.04) 0%, transparent 60%),
+    radial-gradient(circle at 65% 65%, oklch(59.83% 0.10619 177.492 / 0.03) 0%, transparent 60%),
+    radial-gradient(circle at 50% 55%, oklch(0.75 0.1257 215.22 / 0.02) 0%, transparent 65%),
+    radial-gradient(circle at 25% 85%, oklch(0.77 0.09845 196.726 / 0.05) 0%, transparent 60%),
+    radial-gradient(circle at 95% 95%, oklch(66.101% 0.11198 215.999 / 0.03) 0%, transparent 60%);
+
+  background-size: 100% 100%;
+  background-attachment: fixed;
+  overscroll-behavior: none;
+}
+
+body {
+  background-color: transparent;
+  color: #ffffff;
+  min-height: 100vh;
+}

package/app/layout.tsx

@@ -0,0 +1,37 @@
+import { DashboardProvider } from "@/lib/data/dashboard-context"
+import { Analytics } from "@vercel/analytics/next"
+import type { Metadata } from "next"
+import { Exo_2, Geist, Geist_Mono } from "next/font/google"
+import type React from "react"
+import "./globals.css"
+
+const _geist = Geist({ subsets: ["latin"] })
+const _geistMono = Geist_Mono({ subsets: ["latin"] })
+const exo2 = Exo_2({ subsets: ["latin"], variable: "--font-exo2" })
+
+export const metadata: Metadata = {
+  title: "CyberMem",
+  description: "Real-time memory operations dashboard",
+  icons: {
+    icon: '/favicon-dark.svg',
+    shortcut: '/favicon-dark.svg',
+    apple: '/favicon-dark.svg',
+  },
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning className="relative">
+      <body className={`font-sans antialiased relative z-10 ${exo2.variable}`}>
+        <DashboardProvider>
+          {children}
+        </DashboardProvider>
+        <Analytics />
+      </body>
+    </html>
+  )
+}