@cybermem/dashboard 0.1.0 → 0.5.1

package/README.md

@@ -0,0 +1,5 @@
+# @cybermem/dashboard
+
+Monitoring dashboard for CyberMem.
+
+🌐 [cybermem.dev](https://cybermem.dev) · 📖 [Docs](https://docs.cybermem.dev) · 📦 [GitHub](https://github.com/mikhailkogan17/cybermem)

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

@@ -2,6 +2,9 @@ import { NextResponse } from 'next/server'
 
 export const dynamic = 'force-dynamic'
 
+// Use env var for db-exporter URL (Docker internal vs local dev)
+const DB_EXPORTER_URL = process.env.DB_EXPORTER_URL || 'http://localhost:8000'
+
 const CLIENTS = ["Claude Code", "v0", "Cursor", "GitHub Copilot", "Windsurf"]
 const OPERATIONS = ["Read", "Write", "Update", "Delete", "Create"]
 const STATUSES = ["Success", "Success", "Success", "Warning", "Error"]
@@ -18,7 +21,7 @@ export async function GET(request: Request) {
     const controller = new AbortController()
     const timeoutId = setTimeout(() => controller.abort(), 2000)
 
-    const res = await fetch('http://db-exporter:8000/api/logs?limit=100', {
+    const res = await fetch(`${DB_EXPORTER_URL}/api/logs?limit=100`, {
       signal: controller.signal,
       cache: 'no-store'
     })

package/app/api/health/route.ts

@@ -0,0 +1,94 @@
+import { checkRateLimit, rateLimitResponse } from '@/lib/rate-limit'
+import { NextRequest, NextResponse } from 'next/server'
+
+export const dynamic = 'force-dynamic'
+
+interface ServiceStatus {
+  name: string
+  status: 'ok' | 'error' | 'warning'
+  message?: string
+  latencyMs?: number
+}
+
+interface SystemHealth {
+  overall: 'ok' | 'degraded' | 'error'
+  services: ServiceStatus[]
+  timestamp: string
+}
+
+async function checkService(name: string, url: string, timeout = 3000): Promise<ServiceStatus> {
+  const start = Date.now()
+  try {
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), timeout)
+
+    const res = await fetch(url, {
+      signal: controller.signal,
+      cache: 'no-store',
+      headers: {
+        'X-Client-Name': 'CyberMem-Dashboard'
+      }
+    })
+    clearTimeout(timeoutId)
+
+    const latencyMs = Date.now() - start
+
+    if (res.ok) {
+      return { name, status: 'ok', latencyMs }
+    }
+    return {
+      name,
+      status: 'warning',
+      message: `HTTP ${res.status}`,
+      latencyMs
+    }
+  } catch (error: any) {
+    return {
+      name,
+      status: 'error',
+      message: error.name === 'AbortError' ? 'Timeout' : (error.message || 'Connection failed')
+    }
+  }
+}
+
+export async function GET(request: NextRequest) {
+  // Rate limiting
+  const rateLimit = checkRateLimit(request)
+  if (!rateLimit.allowed) {
+    return rateLimitResponse(rateLimit.resetIn)
+  }
+
+  // Use environment variables with sensible defaults for local Docker stack
+  const prometheusUrl = process.env.PROMETHEUS_URL || 'http://localhost:9092'
+  const openMemoryUrl = process.env.CYBERMEM_URL || 'http://localhost:8626'
+  const vectorUrl = process.env.VECTOR_URL // Vector is optional
+
+  const checks: Promise<ServiceStatus>[] = [
+    checkService('OpenMemory API', `${openMemoryUrl}/health`),
+    checkService('Prometheus', `${prometheusUrl}/-/ready`),
+  ]
+
+  // Only check Vector if configured
+  if (vectorUrl) {
+    checks.push(checkService('Vector', `${vectorUrl}/health`))
+  }
+
+  const services = await Promise.all(checks)
+
+  // Determine overall status
+  const hasError = services.some(s => s.status === 'error')
+  const hasWarning = services.some(s => s.status === 'warning')
+
+  const health: SystemHealth = {
+    overall: hasError ? 'error' : hasWarning ? 'degraded' : 'ok',
+    services,
+    timestamp: new Date().toISOString()
+  }
+
+  return NextResponse.json(health, {
+    headers: {
+      'Cache-Control': 'no-cache, no-store, must-revalidate',
+      'X-RateLimit-Remaining': String(rateLimit.remaining)
+    }
+  })
+}

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

@@ -1,18 +1,47 @@
+import { checkRateLimit, rateLimitResponse } from '@/lib/rate-limit'
 import crypto from 'crypto'
 import fs from 'fs'
-import { NextResponse } from 'next/server'
+import { NextRequest, NextResponse } from 'next/server'
 
 export const dynamic = 'force-dynamic'
 
-export async function POST(req: Request) {
+export async function POST(req: NextRequest) {
+  // Rate limiting check
+  const rateLimit = checkRateLimit(req);
+  if (!rateLimit.allowed) {
+    return rateLimitResponse(rateLimit.resetIn);
+  }
+
   try {
     const apiKey = `sk-${crypto.randomBytes(16).toString('hex')}`
     const sharedEnvPath = '/app/shared.env'
+    const configPath = '/data/config.json'
 
     // 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 })
+    // Also persist to config.json
+    let config: Record<string, any> = {}
+    try {
+      if (fs.existsSync(configPath)) {
+        config = JSON.parse(fs.readFileSync(configPath, 'utf-8'))
+      }
+    } catch {}
+    config.api_key = apiKey
+    fs.mkdirSync('/data', { recursive: true })
+    fs.writeFileSync(configPath, JSON.stringify(config, null, 2))
+
+    // Create response with HttpOnly cookie
+    const response = NextResponse.json({ success: true, apiKey })
+    response.cookies.set('cybermem_api_key', apiKey, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'strict',
+      path: '/',
+      maxAge: 60 * 60 * 24 * 365 // 1 year
+    })
+
+    return response
   } 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

@@ -1,25 +1,51 @@
+import { checkRateLimit, rateLimitResponse } from '@/lib/rate-limit'
 import fs from 'fs'
-import { NextResponse } from 'next/server'
+import { NextRequest, NextResponse } from 'next/server'
 
 export const dynamic = 'force-dynamic'
 
 const CONFIG_PATH = '/data/config.json'
 
-export async function GET() {
+export async function GET(request: NextRequest) {
+  // Rate limiting check
+  const rateLimit = checkRateLimit(request);
+  if (!rateLimit.allowed) {
+    return rateLimitResponse(rateLimit.resetIn);
+  }
+
   let apiKey = process.env.OM_API_KEY || 'not-set'
 
+  // Try to read from HttpOnly cookie first
+  const cookieKey = request.cookies.get('cybermem_api_key')?.value
+  if (cookieKey) {
+    apiKey = cookieKey
+  }
+
+  // Fallback to config file
   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
+        if (conf.api_key && apiKey === 'not-set') apiKey = conf.api_key
      }
   } catch (e) {
       // ignore
   }
 
+  // Endpoint resolution:
+  // 1. Env var CYBERMEM_URL
+  // 2. Default to localhost:8088/memory (Managed Mode)
+  const rawEndpoint = process.env.CYBERMEM_URL;
+  const endpoint = rawEndpoint || 'http://localhost:8088/memory';
+  const isManaged = !rawEndpoint;
+
   return NextResponse.json({
     apiKey: apiKey,
-    endpoint: process.env.CYBERMEM_URL || 'http://localhost:8080'
+    endpoint,
+    isManaged
+  }, {
+    headers: {
+      'X-RateLimit-Remaining': String(rateLimit.remaining)
+    }
   })
 }

package/app/client-connect/page.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import LoginModal from "@/components/dashboard/login-modal"
+import MCPConfigModal from "@/components/dashboard/mcp-config-modal"
+import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+
+export default function ClientConnectPage() {
+  const router = useRouter()
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null)
+
+  // Check auth on mount
+  useEffect(() => {
+    const auth = sessionStorage.getItem("authenticated")
+    setIsAuthenticated(auth === "true")
+  }, [])
+
+  const handleLogin = () => {
+    sessionStorage.setItem("authenticated", "true")
+    setIsAuthenticated(true)
+    // Mark that we came from /client-connect for first-run experience
+    sessionStorage.setItem("fromClientConnect", "true")
+  }
+
+  const handleClose = () => {
+    router.push("/")
+  }
+
+  // Loading state
+  if (isAuthenticated === null) {
+    return <div className="min-h-screen bg-[#0a0a0a]" />
+  }
+
+  // Not authenticated - show login
+  if (!isAuthenticated) {
+    return <LoginModal onLogin={handleLogin} />
+  }
+
+  // Authenticated - show MCP modal
+  return (
+    <div className="min-h-screen bg-[#0a0a0a]">
+      <MCPConfigModal onClose={handleClose} />
+    </div>
+  )
+}

package/app/page.tsx

@@ -6,6 +6,7 @@ import DashboardHeader from "@/components/dashboard/header"
 import LoginModal from "@/components/dashboard/login-modal"
 import MCPConfigModal from "@/components/dashboard/mcp-config-modal"
 import MetricsGrid from "@/components/dashboard/metrics-grid"
+import PasswordAlertModal from "@/components/dashboard/password-alert-modal"
 import SettingsModal from "@/components/dashboard/settings-modal"
 import { useDashboard } from "@/lib/data/dashboard-context"
 import { DashboardData } from "@/lib/data/types"
@@ -19,6 +20,8 @@ export default function Dashboard() {
 
   const [showMCPConfig, setShowMCPConfig] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
+  const [showPasswordAlert, setShowPasswordAlert] = useState(false)
+  const [focusPasswordField, setFocusPasswordField] = useState(false)
   const [isAuthenticated, setIsAuthenticated] = useState(false)
 
   // Data State
@@ -53,6 +56,24 @@ export default function Dashboard() {
   const handleLogin = (password: string) => {
     sessionStorage.setItem("authenticated", "true")
     setIsAuthenticated(true)
+
+    // Check if using default password and warning not dismissed
+    const hasCustomPassword = localStorage.getItem("adminPassword") !== null
+    const warningDismissed = localStorage.getItem("hidePasswordWarning") === "true"
+
+    if (!hasCustomPassword && !warningDismissed) {
+      setShowPasswordAlert(true)
+    }
+  }
+
+  const handlePasswordAlertChange = () => {
+    setShowPasswordAlert(false)
+    setFocusPasswordField(true)
+    setShowSettings(true)
+  }
+
+  const handlePasswordAlertDismiss = () => {
+    setShowPasswordAlert(false)
   }
 
   // Fetch Data Effect - Reacts to strategy change or refresh signal
@@ -144,7 +165,13 @@ export default function Dashboard() {
       </main>
 
       {showMCPConfig && <MCPConfigModal onClose={() => setShowMCPConfig(false)} />}
-      {showSettings && <SettingsModal onClose={() => { setShowSettings(false); }} />}
+      {showSettings && <SettingsModal onClose={() => { setShowSettings(false); setFocusPasswordField(false); }} />}
+      {showPasswordAlert && (
+        <PasswordAlertModal
+          onChangePassword={handlePasswordAlertChange}
+          onDismiss={handlePasswordAlertDismiss}
+        />
+      )}
     </div>
   )
 }

package/components/dashboard/audit-log-table.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, ChevronLeft, ChevronRight, RefreshCw } from "lucide-react"
+import { useDashboard } from "@/lib/data/dashboard-context"
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown, ChevronLeft, ChevronRight, Download, RefreshCw } from "lucide-react"
 import { useState } from "react"
 
 interface AuditLogTableProps {
@@ -40,6 +41,61 @@ export default function AuditLogTable({
   onSort
 }: AuditLogTableProps) {
   const [period, setPeriod] = useState("all")
+  const [showExportMenu, setShowExportMenu] = useState(false)
+  const { clientConfigs } = useDashboard()
+
+  const getClientConfig = (rawName: string) => {
+    if (!rawName) return undefined
+    const nameLower = rawName.toLowerCase()
+    return clientConfigs.find((c: any) => nameLower.includes(c.match))
+  }
+
+  const getClientDisplayName = (rawName: string) => {
+    const config = getClientConfig(rawName)
+    return config ? config.name : rawName
+  }
+
+  const exportToCSV = () => {
+    const headers = ['Timestamp', 'Client', 'Operation', 'Status', 'Description']
+    const csvContent = [
+      headers.join(','),
+      ...logs.map(log => [
+        `"${log.date}"`,
+        `"${getClientDisplayName(log.client)}"`,
+        `"${log.operation}"`,
+        `"${log.status}"`,
+        `"${log.description}"`
+      ].join(','))
+    ].join('\n')
+
+    const blob = new Blob([csvContent], { type: 'text/csv' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `cybermem-audit-${new Date().toISOString().split('T')[0]}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+    setShowExportMenu(false)
+  }
+
+  const exportToJSON = () => {
+    const jsonContent = JSON.stringify(logs.map(log => ({
+      timestamp: log.date,
+      client: getClientDisplayName(log.client),
+      operation: log.operation,
+      status: log.status,
+      description: log.description
+    })), null, 2)
+
+    const blob = new Blob([jsonContent], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `cybermem-audit-${new Date().toISOString().split('T')[0]}.json`
+    a.click()
+    URL.revokeObjectURL(url)
+    setShowExportMenu(false)
+  }
 
   return (
     <div className="group relative overflow-hidden rounded-2xl bg-white/5 border border-white/10 backdrop-blur-md shadow-lg p-6 transition-all duration-300">
@@ -80,11 +136,9 @@ export default function AuditLogTable({
       </div>
 
       <div className="relative z-10">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-3">
-            <h3 className="text-lg font-semibold text-white">Audit Log</h3>
-            {loading && <RefreshCw className="w-4 h-4 text-emerald-500 animate-spin" />}
-          </div>
+        <div className="flex items-center gap-3 mb-6">
+          <h3 className="text-lg font-semibold text-white">Audit Log</h3>
+          {loading && <RefreshCw className="w-4 h-4 text-emerald-500 animate-spin" />}
         </div>
 
 
@@ -137,10 +191,19 @@ export default function AuditLogTable({
               ) : (
                 logs.map((log) => {
                     const config = statusConfig[log.status] || statusConfig.Success
+                    const clientConf = getClientConfig(log.client)
+                    const displayName = clientConf ? clientConf.name : log.client
+                    const icon = clientConf?.icon
+
                     return (
                         <tr key={log.id} className="border-b border-white/5 hover:bg-white/10 transition-colors even:bg-white/[0.02] group/row">
                             <td className="py-4 px-4 text-neutral-300 group-hover/row:text-white transition-colors">{log.date}</td>
-                            <td className="py-4 px-4 text-white font-medium">{log.client}</td>
+                            <td className="py-4 px-4 text-white font-medium">
+                              <div className="flex items-center gap-2">
+                                {icon && <img src={icon} alt={displayName} className="w-5 h-5 object-contain" />}
+                                <span>{displayName}</span>
+                              </div>
+                            </td>
                             <td className="py-4 px-4 text-neutral-300">{log.operation}</td>
                             <td className="py-4 px-4">
                             <span
@@ -166,10 +229,40 @@ export default function AuditLogTable({
           </table>
         </div>
 
-        <div className="mt-6 flex items-center justify-between">
-          <p className="text-sm text-neutral-500">
+        <div className="mt-6 flex items-center justify-between relative">
+          {/* Export Button (Left) */}
+          <div className="relative">
+            <button
+              onClick={() => setShowExportMenu(!showExportMenu)}
+              className="h-8 px-3 rounded-lg bg-white/5 border border-white/10 hover:bg-white/10 text-neutral-400 hover:text-white text-xs font-medium flex items-center gap-2 transition-all"
+            >
+              <Download className="w-3 h-3" />
+              Export
+              <ChevronDown className="w-3 h-3" />
+            </button>
+
+            {showExportMenu && (
+              <div className="absolute left-0 bottom-full mb-2 w-32 bg-[#0B1116]/95 border border-white/10 rounded-lg shadow-xl z-30 backdrop-blur-xl overflow-hidden">
+                <button
+                  onClick={exportToCSV}
+                  className="w-full text-left px-3 py-2 text-xs text-neutral-300 hover:bg-white/5 hover:text-white transition-colors"
+                >
+                  Export CSV
+                </button>
+                <button
+                  onClick={exportToJSON}
+                  className="w-full text-left px-3 py-2 text-xs text-neutral-300 hover:bg-white/5 hover:text-white transition-colors"
+                >
+                  Export JSON
+                </button>
+              </div>
+            )}
+          </div>
+
+          <p className="absolute left-1/2 -translate-x-1/2 text-sm text-neutral-500">
             Page {currentPage} of {Math.max(1, totalPages)}
           </p>
+
           <div className="flex gap-2">
             <button
                 onClick={() => onPageChange(Math.max(1, currentPage - 1))}

package/components/dashboard/chart-card.tsx

@@ -4,7 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useDashboard } from "@/lib/data/dashboard-context";
 import { ChevronDown } from "lucide-react";
 import dynamic from "next/dynamic";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 // Dynamic import with SSR disabled
 const MetricsChart = dynamic(() => import("./metrics-chart"), { ssr: false });
@@ -44,11 +44,11 @@ export default function ChartCard({ service }: ChartCardProps) {
   const [clientMetadata, setClientMetadata] = useState<Record<string, any>>({})
   const [loading, setLoading] = useState(true)
 
+  const isInitialLoad = useRef(true)
   useEffect(() => {
     async function fetchData() {
-      // Only show loading state on initial load or period change, not background refresh
-      // We check if data is empty to determine initial load
-      if (data.length === 0) setLoading(true)
+      // Only show loading state on initial load, not background refresh
+      if (isInitialLoad.current) setLoading(true)
 
       try {
         const timeSeriesData = await strategy.getChartData(period)
@@ -120,6 +120,7 @@ export default function ChartCard({ service }: ChartCardProps) {
         console.error("Failed to fetch chart data:", e)
       } finally {
         setLoading(false)
+        isInitialLoad.current = false
       }
     }
     fetchData()

package/components/dashboard/header.tsx

@@ -1,7 +1,9 @@
 "use client"
 
 import { Button } from "@/components/ui/button";
-import { Book, Settings } from "lucide-react";
+import { useDashboard } from "@/lib/data/dashboard-context";
+import { AlertCircle, Book, CheckCircle2, Loader2, Settings, XCircle } from "lucide-react";
+import Image from "next/image";
 import { useEffect, useState } from "react";
 
 export default function DashboardHeader({
@@ -12,6 +14,8 @@ export default function DashboardHeader({
   onShowSettings: () => void;
 }) {
   const [isScrolled, setIsScrolled] = useState(false)
+  const [showHealthPopup, setShowHealthPopup] = useState(false)
+  const { systemHealth } = useDashboard()
 
   useEffect(() => {
     // Check initial scroll position on mount
@@ -24,6 +28,23 @@ export default function DashboardHeader({
     return () => window.removeEventListener("scroll", handleScroll)
   }, [])
 
+  const getStatusConfig = () => {
+    if (!systemHealth) {
+      return { bg: "bg-neutral-500/10", text: "text-neutral-400", border: "border-neutral-500/20", icon: Loader2, label: "Checking..." }
+    }
+    switch (systemHealth.overall) {
+      case 'ok':
+        return { bg: "bg-emerald-500/10", text: "text-emerald-400", border: "border-emerald-500/20", icon: CheckCircle2, label: "All Systems OK" }
+      case 'degraded':
+        return { bg: "bg-amber-500/10", text: "text-amber-400", border: "border-amber-500/20", icon: AlertCircle, label: "Degraded" }
+      case 'error':
+        return { bg: "bg-red-500/10", text: "text-red-400", border: "border-red-500/20", icon: XCircle, label: "System Error" }
+    }
+  }
+
+  const statusConfig = getStatusConfig()
+  const StatusIcon = statusConfig.icon
+
   return (
     <header className={`sticky top-0 z-50 transition-all duration-300 ${
       isScrolled
@@ -34,22 +55,76 @@ export default function DashboardHeader({
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
             <div className="relative w-10 h-10 flex-shrink-0">
-              <img src="/logo.svg" alt="CyberMem Logo" className="w-full h-full object-contain" />
+              <Image src="/logo.svg" alt="CyberMem Logo" width={40} height={40} className="object-contain" />
             </div>
             <div>
-              <h1 className="text-3xl font-bold tracking-tight text-white leading-none font-exo">CyberMem</h1>
+              <div className="flex items-center gap-3">
+                <h1 className="text-3xl font-bold tracking-tight text-white leading-none font-exo">CyberMem</h1>
+
+                {/* System Health Status Badge with Hover Popup */}
+                <div
+                  className="relative mt-1.5"
+                  onMouseEnter={() => setShowHealthPopup(true)}
+                  onMouseLeave={() => setShowHealthPopup(false)}
+                >
+                  <div className={`px-2 py-[2px] rounded-full text-[10px] font-medium flex items-center gap-1 cursor-pointer ${statusConfig.bg} ${statusConfig.text} border ${statusConfig.border}`}>
+                    <StatusIcon className={`w-3 h-3 ${!systemHealth ? 'animate-spin' : ''}`} />
+                    {statusConfig.label}
+                  </div>
+
+                  {/* Hover Popup */}
+                  {showHealthPopup && systemHealth && (
+                    <div className="absolute top-full left-0 mt-2 w-64 bg-[#0B1116]/95 border border-white/10 rounded-lg shadow-xl z-50 backdrop-blur-xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
+                      <div className="p-3 border-b border-white/5">
+                        <p className="text-xs text-neutral-400">System Health</p>
+                        <p className="text-[10px] text-neutral-500 mt-0.5">Updated: {new Date(systemHealth.timestamp).toLocaleTimeString()}</p>
+                      </div>
+                      <div className="p-2 space-y-1">
+                        {systemHealth.services.map((service, i) => (
+                          <div key={i} className="flex items-center justify-between px-2 py-1.5 rounded hover:bg-white/5">
+                            <span className="text-xs text-neutral-300">{service.name}</span>
+                            <div className="flex items-center gap-2">
+                              {service.latencyMs && (
+                                <span className="text-[10px] text-neutral-500">{service.latencyMs}ms</span>
+                              )}
+                              {service.status === 'ok' ? (
+                                <CheckCircle2 className="w-3 h-3 text-emerald-400" />
+                              ) : service.status === 'warning' ? (
+                                <AlertCircle className="w-3 h-3 text-amber-400" />
+                              ) : (
+                                <XCircle className="w-3 h-3 text-red-400" />
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                        {systemHealth.services.some(s => s.status !== 'ok' && s.message) && (
+                          <div className="mt-2 p-2 rounded bg-red-500/10 border border-red-500/20">
+                            <p className="text-xs text-red-300 font-medium">Issues:</p>
+                            {systemHealth.services.filter(s => s.status !== 'ok' && s.message).map((s, i) => (
+                              <p key={i} className="text-[10px] text-red-400 mt-1">• {s.name}: {s.message}</p>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
               <p className="text-sm text-neutral-400 mt-1">Memory MCP Server</p>
             </div>
+
           </div>
 
           <div className="flex items-center gap-3">
+
+
             <Button
               variant="ghost"
               size="sm"
               onClick={onShowMCPConfig}
               className="hidden md:flex h-10 px-4 text-sm font-medium bg-emerald-500/10 text-emerald-400 hover:text-emerald-300 hover:bg-emerald-500/20 border border-emerald-500/20 hover:border-emerald-500/40 rounded-lg"
             >
-              <img src="/icons/mcp.png" alt="MCP" className="w-4 h-4 mr-2" />
+              <Image src="/icons/mcp.png" alt="MCP" width={16} height={16} className="mr-2" />
               Connect MCP
             </Button>
 
@@ -79,4 +154,3 @@ export default function DashboardHeader({
     </header>
   )
 }
-

package/components/dashboard/login-modal.tsx

@@ -76,10 +76,6 @@ export default function LoginModal({ onLogin }: LoginModalProps) {
             <LogIn className="w-4 h-4" />
             Login
           </Button>
-
-          <p className="text-xs text-neutral-500 text-center mt-4">
-            Default password: <code className="text-emerald-400 bg-emerald-500/10 px-1 py-0.5 rounded">admin</code>
-          </p>
         </form>
       </div>
     </div>