@cybermem/dashboard 0.1.0 → 0.4.0

package/components/dashboard/settings-modal.tsx

@@ -4,19 +4,19 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { useDashboard } from "@/lib/data/dashboard-context"
-import { Check, Copy, Eye, EyeOff, Key, Save, Server, Settings, Shield, X } from "lucide-react"
+import { Check, Copy, Eye, EyeOff, Key, Server, Settings, Shield, X } from "lucide-react"
 import { useEffect, useState } from "react"
 
 export default function SettingsModal({ onClose }: { onClose: () => void }) {
   const [apiKey, setApiKey] = useState("")
   const [endpoint, setEndpoint] = useState("")
+  const [isManaged, setIsManaged] = useState(false)
   const [adminPassword, setAdminPassword] = useState(localStorage.getItem("adminPassword") || "admin")
   const [isLoading, setIsLoading] = useState(true)
 
   const { isDemo, toggleDemo } = useDashboard()
   const [showApiKey, setShowApiKey] = useState(false)
   const [showAdminPassword, setShowAdminPassword] = useState(false)
-  /* Demo mode controlled by context now */
 
   const [showRegenConfirm, setShowRegenConfirm] = useState(false)
   const [regenInputValue, setRegenInputValue] = useState("")
@@ -30,46 +30,35 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
 
   // Fetch settings from server
   useEffect(() => {
-    // Try to get key from local storage first (simulating persistence)
+    setIsLoading(true)
     const localKey = localStorage.getItem("om_api_key")
-    if (localKey) {
-        setApiKey(localKey)
-        fetch("/api/settings")
-            .then(res => res.json())
-            .then(data => {
-                let srvEndpoint = data.endpoint
-                if (srvEndpoint.includes('localhost') && typeof window !== "undefined" && !window.location.hostname.includes('localhost')) {
-                   srvEndpoint = `${window.location.protocol}//${window.location.hostname}:8080`
-                }
-                setEndpoint(srvEndpoint)
-                setIsLoading(false)
-            })
-            .catch(err => setIsLoading(false))
-    } else {
-        fetch("/api/settings")
-          .then(res => res.json())
-          .then(data => {
+
+    fetch("/api/settings")
+      .then(res => res.json())
+      .then(data => {
+        // Enforce Local Mode if server says so
+        setIsManaged(data.isManaged || false)
+
+        if (localKey && !data.isManaged) {
+            setApiKey(localKey)
+        } else {
             setApiKey(data.apiKey !== 'not-set' ? data.apiKey : '')
-            let srvEndpoint = data.endpoint
-            if (srvEndpoint.includes('localhost') && typeof window !== "undefined" && !window.location.hostname.includes('localhost')) {
-               srvEndpoint = `${window.location.protocol}//${window.location.hostname}:8080`
-            }
-            setEndpoint(srvEndpoint)
-            setIsLoading(false)
-          })
-          .catch(err => {
-            console.error("Failed to fetch settings:", err)
-            setIsLoading(false)
-          })
-    }
+        }
+
+        let srvEndpoint = data.endpoint
+        if (srvEndpoint.includes('localhost') && typeof window !== "undefined" && !window.location.hostname.includes('localhost')) {
+            const port = srvEndpoint.split(':').pop()?.split('/')[0] || '8626'
+            srvEndpoint = `${window.location.protocol}//${window.location.hostname}:${port}/mcp`
+        }
+        setEndpoint(srvEndpoint)
+        setIsLoading(false)
+      })
+      .catch(err => {
+        console.error("Failed to fetch settings:", err)
+        setIsLoading(false)
+      })
   }, [])
 
-  const generateApiKey = () => {
-    // Legacy direct generation - now just triggers the confirmation flow if button linked here
-    // But the button in UI calls setShowRegenConfirm(true) directly.
-    // We can keep this empty or redirect.
-  }
-
   const confirmRegenerate = async () => {
     try {
         const res = await fetch('/api/settings/regenerate', { method: 'POST' })
@@ -91,7 +80,6 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
   const [saved, setSaved] = useState(false)
 
   const handleSave = () => {
-    // Save admin password to localStorage
     localStorage.setItem("adminPassword", adminPassword)
     setSaved(true)
     setTimeout(() => setSaved(false), 2000)
@@ -99,31 +87,18 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
 
   return (
     <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-      <div
-        className="bg-[#0B1116]/80 backdrop-blur-xl border border-emerald-500/20 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto relative overflow-hidden"
-        style={{
-          backgroundImage: `
-            radial-gradient(circle at 0% 0%, oklch(0.7 0 0 / 0.05) 0%, transparent 50%),
-            radial-gradient(circle at 100% 0%, oklch(0.6 0 0 / 0.05) 0%, transparent 50%),
-            radial-gradient(circle at 100% 100%, oklch(0.65 0 0 / 0.05) 0%, transparent 50%),
-            radial-gradient(circle at 0% 100%, oklch(0.6 0 0 / 0.05) 0%, transparent 50%)
-          `
-        }}
-      >
+      <div className="bg-[#0B1116]/80 backdrop-blur-xl border border-emerald-500/20 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto relative overflow-hidden"
+           style={{ backgroundImage: `radial-gradient(circle at 0% 0%, oklch(0.7 0 0 / 0.05) 0%, transparent 50%), radial-gradient(circle at 100% 0%, oklch(0.6 0 0 / 0.05) 0%, transparent 50%), radial-gradient(circle at 100% 100%, oklch(0.65 0 0 / 0.05) 0%, transparent 50%), radial-gradient(circle at 0% 100%, oklch(0.6 0 0 / 0.05) 0%, transparent 50%)` }}>
+
         {/* Header */}
         <div className="flex items-center justify-between px-6 pt-6 pb-2">
           <div className="flex items-center gap-3">
             <div className="p-2 bg-white/5 rounded-lg border border-white/10 shadow-inner">
-              <Settings className="w-5 h-5 text-white drop-shadow-[0_0_5px_rgba(255,255,255,0.3)]" />
+              <Settings className="w-5 h-5 text-white shadow-lg" />
             </div>
-            <h2 className="text-xl font-semibold text-white text-shadow-sm">Settings</h2>
+            <h2 className="text-xl font-semibold text-white">Settings</h2>
           </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            onClick={onClose}
-            className="text-neutral-400 hover:text-white hover:bg-white/10 rounded-full"
-          >
+          <Button variant="ghost" size="icon" onClick={onClose} className="text-neutral-400 hover:text-white rounded-full">
             <X className="w-5 h-5" />
           </Button>
         </div>
@@ -132,188 +107,91 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
         <div className="p-6 space-y-6">
           {/* Security */}
           <section>
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2 text-shadow-sm">
-              <Shield className="w-5 h-5 text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]" />
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+              <Shield className="w-5 h-5" />
               Security
             </h3>
             <div className="bg-white/5 border border-white/10 rounded-lg p-5 space-y-4 shadow-[inset_0_0_20px_rgba(255,255,255,0.02)] backdrop-blur-sm">
               <div className="space-y-2">
-                <Label htmlFor="admin-password" className="text-neutral-200">Admin Password</Label>
-                <div className="flex gap-2">
-                  <div className="relative flex-1">
-                    <Input
-                      id="admin-password"
-                      value={adminPassword}
-                      onChange={(e) => setAdminPassword(e.target.value)}
-                      className="bg-black/40 border-white/10 text-white focus-visible:border-emerald-500/30 focus-visible:ring-emerald-500/10 placeholder:text-neutral-600 shadow-inner pr-10"
-                      type={showAdminPassword ? "text" : "password"}
-                    />
-                    <button
-                      type="button"
-                      onClick={() => setShowAdminPassword(!showAdminPassword)}
-                      className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white transition-colors"
-                    >
-                      {showAdminPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
-                    </button>
-                  </div>
+                <Label htmlFor="admin-password">Admin Password</Label>
+                <div className="relative">
+                  <Input id="admin-password" value={adminPassword} onChange={(e) => setAdminPassword(e.target.value)} className="bg-black/40 border-white/10 text-white" type={showAdminPassword ? "text" : "password"} />
+                  <button onClick={() => setShowAdminPassword(!showAdminPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white">
+                    {showAdminPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  </button>
                 </div>
-                <p className="text-xs text-neutral-500">Used to access the dashboard</p>
               </div>
             </div>
           </section>
 
           {/* API Configuration */}
+          {!isManaged ? (
           <section>
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2 text-shadow-sm">
-              <Key className="w-5 h-5 text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]" />
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+              <Key className="w-5 h-5" />
               API Configuration
             </h3>
             <div className="bg-white/5 border border-white/10 rounded-lg p-5 space-y-4 shadow-[inset_0_0_20px_rgba(255,255,255,0.02)] backdrop-blur-sm">
               <div className="space-y-2">
-                <Label htmlFor="api-key" className="text-neutral-200">Master API Key</Label>
+                <Label htmlFor="api-key">Master API Key</Label>
                 <div className="flex gap-2">
                   <div className="relative flex-1">
-                    <Input
-                      id="api-key"
-                      value={apiKey || "sk-not-generated-yet"}
-                      readOnly
-                      className="bg-black/40 border-white/10 text-white focus-visible:border-emerald-500/30 focus-visible:ring-emerald-500/10 placeholder:text-neutral-600 shadow-inner pr-10 font-mono"
-                      type={showApiKey ? "text" : "password"}
-                    />
-                     <button
-                        type="button"
-                        onClick={() => setShowApiKey(!showApiKey)}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white transition-colors"
-                      >
-                        {showApiKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                    <Input id="api-key" value={apiKey || "sk-not-generated-yet"} readOnly className="bg-black/40 border-white/10 text-white font-mono" type={showApiKey ? "text" : "password"} />
+                    <button onClick={() => setShowApiKey(!showApiKey)} className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white">
+                      {showApiKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
                     </button>
                   </div>
-                  <Button
-                      size="icon"
-                      variant="ghost"
-                      className="h-10 w-10 border border-white/10 bg-white/5 hover:bg-white/10 text-neutral-400 hover:text-white"
-                      onClick={() => copyToClipboard(apiKey, "apikey")}
-                      title="Copy API Key"
-                    >
-                      {copiedId === "apikey" ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
+                  <Button size="icon" variant="ghost" onClick={() => copyToClipboard(apiKey, "apikey")}>
+                    {copiedId === "apikey" ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
                   </Button>
                 </div>
-
-                {/* Regeneration Controls */}
                 <div className="flex justify-end pt-2">
-                   {showRegenConfirm ? (
-                       <div className="flex items-center gap-2 animate-in fade-in slide-in-from-right-4 duration-200">
-                           <span className="text-xs text-red-400 font-medium">Warning: This will disconnect all existing clients.</span>
-                           <Input
-                                value={regenInputValue}
-                                onChange={(e) => setRegenInputValue(e.target.value)}
-                                placeholder="Type 'agree'"
-                                className="h-8 w-28 bg-red-500/10 border-red-500/30 text-red-200 text-xs placeholder:text-red-500/30 focus-visible:border-red-500/50"
-                           />
-                           <Button
-                                size="sm"
-                                variant="ghost"
-                                className="h-8 px-3 text-neutral-400 hover:text-white hover:bg-white/10"
-                                onClick={() => {
-                                    setShowRegenConfirm(false)
-                                    setRegenInputValue("")
-                                }}
-                           >
-                               Cancel
-                           </Button>
-                           <Button
-                                size="sm"
-                                disabled={regenInputValue !== 'agree'}
-                                className="h-8 px-3 bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/20 disabled:opacity-50 disabled:cursor-not-allowed"
-                                onClick={confirmRegenerate}
-                           >
-                               Confirm
-                           </Button>
-                       </div>
-                   ) : (
-                        <Button
-                            size="sm"
-                            variant="ghost"
-                            className="h-8 px-2 text-neutral-400 hover:text-white hover:bg-white/10"
-                            onClick={() => setShowRegenConfirm(true)}
-                        >
-                            Regenerate Key
-                        </Button>
-                   )}
+                  {showRegenConfirm ? (
+                    <div className="flex items-center gap-2">
+                      <Input value={regenInputValue} onChange={(e) => setRegenInputValue(e.target.value)} placeholder="Type 'agree'" className="h-8 w-24 text-xs" />
+                      <Button size="sm" variant="ghost" onClick={() => setShowRegenConfirm(false)}>Cancel</Button>
+                      <Button size="sm" disabled={regenInputValue !== 'agree'} onClick={confirmRegenerate}>Confirm</Button>
+                    </div>
+                  ) : (
+                    <Button size="sm" variant="ghost" onClick={() => setShowRegenConfirm(true)}>Regenerate Key</Button>
+                  )}
                 </div>
-                <p className="text-xs text-neutral-500">Your master secret key for all MCP clients</p>
               </div>
 
               <div className="space-y-2">
-                <Label htmlFor="endpoint" className="text-neutral-200">Server Endpoint</Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="endpoint"
-                    value={endpoint}
-                    onChange={(e) => setEndpoint(e.target.value)}
-                    className="bg-black/40 border-white/10 text-white focus-visible:border-emerald-500/30 focus-visible:ring-emerald-500/10 placeholder:text-neutral-600 shadow-inner"
-                  />
-                </div>
-                <p className="text-xs text-neutral-500">URL of the OpenMemory backend instance</p>
+                <Label htmlFor="endpoint">Server Endpoint</Label>
+                <Input id="endpoint" value={endpoint} onChange={(e) => setEndpoint(e.target.value)} className="bg-black/40 border-white/10 text-white" />
               </div>
+            </div>
+          </section>
+          ) : (
+          <section>
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+              <Shield className="w-5 h-5 text-emerald-400" />
+              API Security
+            </h3>
+            <div className="bg-emerald-500/5 border border-emerald-500/20 rounded-lg p-5 space-y-2 backdrop-blur-sm">
+              <p className="text-sm font-medium text-emerald-300">Local Mode Active</p>
+              <p className="text-xs text-emerald-200/60">No API key required for connection from your laptop. Key management is hidden.</p>
 
-              <div className="pt-2 border-t border-white/10">
-                  <Button
-                    variant="destructive"
-                    className="w-full bg-red-500/10 hover:bg-red-500/20 text-red-400 border border-red-500/20"
-                    onClick={async () => {
-                        if(!confirm("Are you sure you want to restart the OpenMemory server?")) return;
-                        try {
-                            const res = await fetch('/api/system/restart', { method: 'POST' })
-                            if(res.ok) alert("Server restarting... Please wait a moment.")
-                            else alert("Failed to restart server")
-                        } catch(e) {
-                            alert("Error triggering restart")
-                        }
-                    }}
-                  >
-                      Restart Server
-                  </Button>
+              <div className="mt-4 pt-4 border-t border-white/10">
+                <Label htmlFor="endpoint" className="text-xs text-neutral-500 mb-2 block">System Endpoint</Label>
+                <Input id="endpoint" value={endpoint} readOnly className="h-9 bg-black/40 border-white/10 text-neutral-400 text-sm" />
               </div>
             </div>
           </section>
+          )}
 
           {/* System Info */}
           <section>
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2 text-shadow-sm">
-              <Server className="w-5 h-5 text-white drop-shadow-[0_0_8px_rgba(255,255,255,0.5)]" />
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+              <Server className="w-5 h-5" />
               System
             </h3>
             <div className="bg-white/5 border border-white/10 rounded-lg p-5 shadow-[inset_0_0_20px_rgba(255,255,255,0.02)] backdrop-blur-sm">
               <div className="grid grid-cols-2 gap-4">
-                <div>
-                    <span className="text-xs uppercase tracking-wider text-neutral-500 font-semibold">Version</span>
-                    <p className="text-neutral-200 font-mono mt-1">v0.1.0-beta</p>
-                </div>
-                <div>
-                    <span className="text-xs uppercase tracking-wider text-neutral-500 font-semibold">Environment</span>
-                    <p className="text-emerald-400 font-mono mt-1 text-shadow-emerald">Production</p>
-                </div>
-              </div>
-              <div className="mt-4 pt-4 border-t border-white/10 flex items-center justify-between">
-                 <div>
-                    <label htmlFor="demo-mode" className="text-neutral-200 font-medium block">Demo Mode</label>
-                    <p className="text-xs text-neutral-500 mt-1">Generate simulated traffic for demonstration</p>
-                 </div>
-                 <div className="relative inline-block w-12 h-6 transition duration-200 ease-in-out rounded-full border border-white/10">
-                     <input
-                        type="checkbox"
-                        id="demo-mode"
-                        className="peer absolute w-0 h-0 opacity-0"
-                        checked={isDemo}
-                        onChange={toggleDemo}
-                    />
-                    <label
-                        htmlFor="demo-mode"
-                        className={`block w-full h-full rounded-full cursor-pointer transition-colors duration-300 ${isDemo ? "bg-emerald-500/30" : "bg-black/40"}`}
-                    ></label>
-                    <div className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full shadow-md transform transition-transform duration-300 ${isDemo ? "translate-x-6 bg-emerald-100" : "translate-x-0 bg-neutral-400"}`}></div>
-                 </div>
+                <div><span className="text-xs uppercase text-neutral-500 font-semibold">Version</span><p className="text-neutral-200 font-mono mt-1">v0.2.0</p></div>
+                <div><span className="text-xs uppercase text-neutral-500 font-semibold">Environment</span><p className="text-emerald-400 font-mono mt-1">Production</p></div>
               </div>
             </div>
           </section>
@@ -321,21 +199,8 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
 
         {/* Footer */}
         <div className="sticky bottom-0 bg-[#0B1116]/80 backdrop-blur-md border-t border-emerald-500/20 px-6 py-4 flex justify-end gap-3 z-10">
-          <Button
-            onClick={onClose}
-            className="bg-white/5 hover:bg-white/10 border border-white/10 text-neutral-300 transition-colors"
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSave}
-            className={`border font-medium transition-colors gap-2 ${
-              saved
-                ? "bg-emerald-500/30 border-emerald-500/30 text-emerald-300"
-                : "bg-emerald-500/20 hover:bg-emerald-500/30 border-emerald-500/20 text-emerald-400"
-            }`}
-          >
-            <Save className="w-4 h-4" />
+          <Button onClick={onClose} variant="ghost">Cancel</Button>
+          <Button onClick={handleSave} className="bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-400 border border-emerald-500/20">
             {saved ? "Saved!" : "Save Changes"}
           </Button>
         </div>

package/e2e/audit-export.spec.ts

@@ -0,0 +1,111 @@
+/**
+ * E2E Tests for Audit Log Export
+ *
+ * These tests verify that the audit log export functionality works correctly.
+ * Run with: npx playwright test or npm run test:e2e
+ */
+
+import { expect, test } from '@playwright/test';
+
+test.describe('Audit Log Export', () => {
+  test.beforeEach(async ({ page }) => {
+    // Navigate to dashboard
+    await page.goto('http://localhost:3000');
+
+    // Handle login if redirected or modal visible
+    const passwordInput = page.getByPlaceholder('Enter admin password');
+    if (await passwordInput.isVisible()) {
+      await passwordInput.fill('admin');
+      await page.keyboard.press('Enter');
+    }
+
+    // Handle Password Alert Modal (if it appears on default password)
+    const dontShowAgainButton = page.locator('button:has-text("Don\'t show again")');
+    if (await dontShowAgainButton.isVisible({ timeout: 2000 }).catch(() => false)) {
+        await dontShowAgainButton.click();
+    }
+
+    // Wait for dashboard to fully load
+    await expect(page.getByRole('heading', { name: 'CyberMem' })).toBeVisible({ timeout: 15000 });
+
+    // Force scroll to bottom or click tab to ensure Audit Log is active
+    const auditHeader = page.locator('h3:has-text("Audit Log")');
+    await auditHeader.scrollIntoViewIfNeeded();
+  });
+
+  test('should display export button in audit log table', async ({ page }) => {
+    // Wait for audit log table headers to ensure content failed
+    await expect(page.locator('th:has-text("Timestamp")')).toBeVisible({ timeout: 10000 });
+
+    // Check export button exists
+    const exportButton = page.locator('button:has-text("Export")');
+    await expect(exportButton).toBeVisible();
+  });
+
+  test('should show export dropdown with CSV and JSON options', async ({ page }) => {
+    // Wait for table
+    await page.waitForSelector('text=Audit Log');
+
+    // Click export button
+    const exportButton = page.locator('button:has-text("Export")');
+    await exportButton.click();
+
+    // Verify dropdown options
+    await expect(page.locator('button:has-text("Export CSV")')).toBeVisible();
+    await expect(page.locator('button:has-text("Export JSON")')).toBeVisible();
+  });
+
+  test('should download CSV file when clicking Export CSV', async ({ page }) => {
+    await page.waitForSelector('text=Audit Log');
+
+    // Click export button
+    await page.click('button:has-text("Export")');
+
+    // Set up download listener
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      page.click('button:has-text("Export CSV")'),
+    ]);
+
+    // Verify download
+    expect(download.suggestedFilename()).toMatch(/cybermem-audit-.*\.csv/);
+  });
+
+  test('should download JSON file when clicking Export JSON', async ({ page }) => {
+    await page.waitForSelector('text=Audit Log');
+
+    // Click export button
+    await page.click('button:has-text("Export")');
+
+    // Set up download listener
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      page.click('button:has-text("Export JSON")'),
+    ]);
+
+    // Verify download
+    expect(download.suggestedFilename()).toMatch(/cybermem-audit-.*\.json/);
+  });
+
+  test('CSV export should contain correct headers', async ({ page }) => {
+    await page.waitForSelector('text=Audit Log');
+    await page.click('button:has-text("Export")');
+
+    const [download] = await Promise.all([
+      page.waitForEvent('download'),
+      page.click('button:has-text("Export CSV")'),
+    ]);
+
+    // Read file content
+    const content = await download.path();
+    const fs = await import('fs');
+    const csvContent = fs.readFileSync(content!, 'utf-8');
+
+    // Verify headers
+    expect(csvContent).toContain('Timestamp');
+    expect(csvContent).toContain('Client');
+    expect(csvContent).toContain('Operation');
+    expect(csvContent).toContain('Status');
+    expect(csvContent).toContain('Description');
+  });
+});

package/e2e/auth.spec.ts

@@ -0,0 +1,37 @@
+
+import { expect, test } from '@playwright/test';
+
+test.describe('Dashboard Authentication', () => {
+
+    test('should allow login with correct password', async ({ page }) => {
+        await page.goto('/');
+
+        // If already logged in, clear cookies (shouldn't happen in incognito/test env usually, but good practice if state is preserved)
+        // Check for login input
+        const loginInput = page.getByPlaceholder('Enter admin password');
+
+        if (await loginInput.isVisible()) {
+            await loginInput.fill('admin');
+            await page.getByRole('button', { name: 'Login' }).click();
+        }
+
+        // Verification
+        await expect(page.getByRole('heading', { name: 'CyberMem' })).toBeVisible({ timeout: 10000 });
+        await expect(page.getByText('Memory Records')).toBeVisible();
+    });
+
+    test('should show error on wrong password', async ({ page }) => {
+        await page.goto('/');
+
+        // Ensure we are logged out or looking at login screen.
+        // Note: This assumes clean state for each test if fullyParallel is true but workers separate context.
+        // Playwright creates fresh context for each test by default.
+
+        const loginInput = page.getByPlaceholder('Enter password');
+        if (await loginInput.isVisible()) {
+            await loginInput.fill('wrongpassword');
+            await page.getByRole('button', { name: 'Login' }).click();
+            await expect(page.getByText('Invalid password')).toBeVisible();
+        }
+    });
+});

package/e2e/config-ui.spec.ts

@@ -0,0 +1,98 @@
+import { expect, test } from '@playwright/test';
+
+// Shared mock setup - mocks BEFORE page load
+async function setupMocksForLocalMode(page: any) {
+  await page.route('**/api/settings', async (route: any) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        apiKey: 'not-set',
+        endpoint: 'http://localhost:8626',
+        isManaged: true
+      })
+    });
+  });
+  await page.route('**/api/metrics*', async (route: any) => {
+    await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({}) });
+  });
+  await page.route('**/api/audit-logs*', async (route: any) => {
+    await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ logs: [] }) });
+  });
+}
+
+async function setupMocksForRemoteMode(page: any) {
+  await page.route('**/api/settings', async (route: any) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        apiKey: 'sk-remote-key-123',
+        endpoint: 'https://remote-rpi.local/mcp',
+        isManaged: false
+      })
+    });
+  });
+  await page.route('**/api/metrics*', async (route: any) => {
+    await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({}) });
+  });
+  await page.route('**/api/audit-logs*', async (route: any) => {
+    await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ logs: [] }) });
+  });
+}
+
+async function login(page: any) {
+  const passwordInput = page.getByPlaceholder('Enter admin password');
+  await expect(passwordInput).toBeVisible();
+  await passwordInput.fill('admin');
+  await page.keyboard.press('Enter');
+  await expect(page.getByRole('heading', { name: 'CyberMem' })).toBeVisible();
+
+  // Dismiss password warning modal if it appears
+  const dontShowAgainButton = page.getByRole('button', { name: "Don't show again" });
+  if (await dontShowAgainButton.isVisible({ timeout: 1500 }).catch(() => false)) {
+    await dontShowAgainButton.click();
+    await page.waitForTimeout(500);
+  }
+}
+
+test.describe('Dashboard Configuration UI', () => {
+
+  test('Local Mode: shows Local Mode Active and hides API Key', async ({ page }) => {
+    await setupMocksForLocalMode(page);
+    await page.goto('http://localhost:3000');
+    await login(page);
+
+    // Open MCP Config Modal
+    await page.getByRole('button', { name: 'Connect MCP' }).click();
+
+    // Check for Local Mode indicator
+    await expect(page.getByText('Local Mode Active')).toBeVisible();
+
+    // Master API Key should NOT be visible in local mode
+    await expect(page.getByText('Master API Key')).not.toBeVisible();
+
+    // Code block should show stdio command with npx @cybermem/mcp-core
+    await page.getByRole('button', { name: 'Gemini CLI' }).click();
+    const codeBlock = page.locator('pre');
+    await expect(codeBlock).toContainText('gemini mcp add cybermem npx @cybermem/mcp-core');
+  });
+
+  test('Remote Mode: shows API Key management', async ({ page }) => {
+    await setupMocksForRemoteMode(page);
+    await page.goto('http://localhost:3000');
+    await login(page);
+
+    // Open MCP Config Modal
+    await page.getByRole('button', { name: 'Connect MCP' }).click();
+
+    // Master API Key should be visible
+    await expect(page.getByText('Master API Key')).toBeVisible();
+
+    // Gemini CLI should have header with API key
+    await page.getByRole('button', { name: 'Gemini CLI' }).click();
+    const codeBlock = page.locator('pre');
+    await expect(codeBlock).toContainText('--header');
+    await expect(codeBlock).toContainText('x-api-key');
+  });
+});