@cybermem/dashboard 0.5.16 → 0.8.7

package/components/ui/confirmation-modal.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { TintButton } from "@/components/ui/tint-button";
+import { AlertTriangle, X } from "lucide-react";
+import { useState } from "react";
+
+interface ConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  description: string;
+  confirmText?: string;
+  confirmWord?: string;
+  tint?: "red" | "yellow";
+  isLoading?: boolean;
+}
+
+export function ConfirmationModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmText = "Confirm",
+  confirmWord,
+  tint = "red",
+  isLoading = false,
+}: ConfirmationModalProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  if (!isOpen) return null;
+
+  const canConfirm = confirmWord ? inputValue === confirmWord : true;
+
+  const handleConfirm = () => {
+    if (canConfirm) {
+      onConfirm();
+      setInputValue("");
+    }
+  };
+
+  const handleClose = () => {
+    setInputValue("");
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+        onClick={handleClose}
+      />
+
+      {/* Modal */}
+      <div className="relative bg-[#0B1116]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl max-w-md w-full mx-4 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-start gap-4 p-5">
+          <div
+            className={`p-2 rounded-lg ${tint === "red" ? "bg-red-500/10" : "bg-yellow-500/10"}`}
+          >
+            <AlertTriangle
+              className={`w-5 h-5 ${tint === "red" ? "text-red-400" : "text-yellow-400"}`}
+            />
+          </div>
+          <div className="flex-1">
+            <h3 className="text-lg font-semibold text-white">{title}</h3>
+            <p className="text-sm text-neutral-400 mt-1">{description}</p>
+          </div>
+          <button
+            onClick={handleClose}
+            className="text-neutral-400 hover:text-white transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Confirmation Input */}
+        {confirmWord && (
+          <div className="px-5 pb-4">
+            <Input
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              placeholder={`Type "${confirmWord}" to confirm`}
+              className="bg-black/40 border-white/10 text-white text-center font-mono placeholder:text-neutral-600"
+              autoFocus
+            />
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex gap-3 p-5 pt-0">
+          <TintButton
+            tint="neutral"
+            variant="outline"
+            className="flex-1"
+            onClick={handleClose}
+          >
+            Cancel
+          </TintButton>
+          <TintButton
+            tint={tint}
+            variant="solid"
+            className="flex-1"
+            onClick={handleConfirm}
+            disabled={!canConfirm || isLoading}
+          >
+            {isLoading ? "Processing..." : confirmText}
+          </TintButton>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/ui/tint-button.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { forwardRef } from "react";
+
+type TintColor = "emerald" | "yellow" | "red" | "sky" | "neutral";
+
+interface TintButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  tint?: TintColor;
+  variant?: "solid" | "outline" | "ghost";
+  size?: "sm" | "md" | "lg" | "icon";
+  children: React.ReactNode;
+}
+
+const tintStyles: Record<TintColor, Record<string, string>> = {
+  emerald: {
+    solid:
+      "bg-emerald-500/20 hover:bg-emerald-500/30 border-emerald-500/20 text-emerald-400",
+    outline:
+      "bg-transparent hover:bg-emerald-500/10 border-emerald-500/20 text-emerald-400",
+    ghost:
+      "bg-transparent hover:bg-emerald-500/10 border-transparent text-emerald-400",
+  },
+  yellow: {
+    solid:
+      "bg-yellow-500/20 hover:bg-yellow-500/30 border-yellow-500/20 text-yellow-400",
+    outline:
+      "bg-transparent hover:bg-yellow-500/10 border-yellow-500/20 text-yellow-400",
+    ghost:
+      "bg-transparent hover:bg-yellow-500/10 border-transparent text-yellow-400",
+  },
+  red: {
+    solid: "bg-red-500/20 hover:bg-red-500/30 border-red-500/20 text-red-400",
+    outline:
+      "bg-transparent hover:bg-red-500/10 border-red-500/20 text-red-400",
+    ghost: "bg-transparent hover:bg-red-500/10 border-transparent text-red-400",
+  },
+  sky: {
+    solid: "bg-sky-500/20 hover:bg-sky-500/30 border-sky-500/20 text-sky-400",
+    outline:
+      "bg-transparent hover:bg-sky-500/10 border-sky-500/20 text-sky-400",
+    ghost: "bg-transparent hover:bg-sky-500/10 border-transparent text-sky-400",
+  },
+  neutral: {
+    solid: "bg-white/10 hover:bg-white/20 border-white/10 text-white",
+    outline: "bg-transparent hover:bg-white/5 border-white/10 text-neutral-300",
+    ghost:
+      "bg-transparent hover:bg-white/5 border-transparent text-neutral-400 hover:text-white",
+  },
+};
+
+const sizeStyles = {
+  sm: "h-8 px-3 text-xs",
+  md: "h-10 px-4 text-sm",
+  lg: "h-11 px-6 text-base",
+  icon: "h-9 w-9 p-0",
+};
+
+export const TintButton = forwardRef<HTMLButtonElement, TintButtonProps>(
+  (
+    {
+      tint = "emerald",
+      variant = "solid",
+      size = "md",
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          "inline-flex items-center justify-center gap-2 rounded-lg border font-medium transition-all",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0B1116]",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          "[&_svg]:shrink-0",
+          tintStyles[tint][variant],
+          sizeStyles[size],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+
+TintButton.displayName = "TintButton";

package/e2e/crud-happy-path.spec.ts

@@ -7,208 +7,278 @@
  * Run with: npm run test:e2e -- crud-happy-path.spec.ts
  */
 
-import { expect, test } from '@playwright/test';
-import { execSync } from 'child_process';
+import { expect, test } from "@playwright/test";
+import { execSync } from "child_process";
 
-const MCP_URL = 'http://127.0.0.1:8626/mcp';
+const MCP_URL = "http://127.0.0.1:8626/mcp";
 const CLIENT_NAME = `e2e-crud-${Date.now()}`;
 
 // Helpers
 const RPC = (method: string, params: any = {}, id: number) => ({
-    jsonrpc: "2.0",
-    id,
-    method,
-    params
+  jsonrpc: "2.0",
+  id,
+  method,
+  params,
 });
 
 const resetDB = async () => {
+  try {
+    // Remove database files
     try {
-        // Remove database files
-        try {
-            execSync("docker exec cybermem-openmemory sh -c 'rm -f /data/openmemory.sqlite*'", { stdio: 'ignore' });
-        } catch (e) { /* ignore - container might not be running */ }
-
-        // Fix permissions on data directory to prevent SQLITE_READONLY after restart
-        try {
-            execSync("docker run --rm -v cybermem-openmemory-data:/data alpine sh -c 'chown -R 1001:1001 /data && chmod 777 /data'", { stdio: 'ignore' });
-        } catch (e) { /* ignore */ }
-
-        // Restart container
-        execSync('docker restart cybermem-openmemory', { stdio: 'ignore' });
-
-        // Poll for health AND MCP routing (up to 60s)
-        const start = Date.now();
-        while (Date.now() - start < 60000) {
-            try {
-                const healthRes = await fetch('http://127.0.0.1:8626/health');
-                if (healthRes.ok) {
-                    // Also verify MCP routing is working (405 is fine for GET, 404 means not ready)
-                    const mcpRes = await fetch('http://127.0.0.1:8626/mcp');
-                    if (mcpRes.status !== 404) {
-                        // Give additional time for MCP to stabilize
-                        await new Promise(r => setTimeout(r, 3000));
-                        return true;
-                    }
-                }
-            } catch (e) { /* retry */ }
-            await new Promise(r => setTimeout(r, 1000));
-        }
-        console.log('⚠️ DB reset timeout, but proceeding');
-        return true;
+      execSync(
+        "docker exec cybermem-mcp sh -c 'rm -f /data/openmemory.sqlite*'",
+        { stdio: "ignore" },
+      );
+    } catch (e) {
+      /* ignore - container might not be running */
+    }
+
+    // Fix permissions on data directory to prevent SQLITE_READONLY after restart
+    try {
+      execSync(
+        "docker run --rm -v cybermem-openmemory-data:/data alpine sh -c 'chown -R 1001:1001 /data && chmod 777 /data'",
+        { stdio: "ignore" },
+      );
     } catch (e) {
-        console.error('DB Reset failed:', e);
-        return false;
+      /* ignore */
     }
+
+    // Restart container
+    execSync("docker restart cybermem-mcp", { stdio: "ignore" });
+
+    // Poll for health (up to 60s)
+    const start = Date.now();
+    while (Date.now() - start < 60000) {
+      try {
+        const healthRes = await fetch("http://127.0.0.1:8626/health");
+        if (healthRes.ok) {
+          const body = await healthRes.json();
+          if (body.ok || body.ready) {
+            // Give additional time for MCP to stabilize
+            await new Promise((r) => setTimeout(r, 3000));
+            return true;
+          }
+        }
+      } catch (e) {
+        // ignore
+      }
+      await new Promise((r) => setTimeout(r, 1000));
+    }
+    console.log("⚠️ DB reset timeout, but proceeding");
+    return true;
+  } catch (e) {
+    console.error("DB Reset failed:", e);
+    return false;
+  }
 };
 
+let sessionId: string | null = null;
+
 const mcpCall = async (method: string, params: any, id: number) => {
-    const res = await fetch(MCP_URL, {
-        method: 'POST',
-        headers: {
-            'Content-Type': 'application/json',
-            'Accept': 'application/json, text/event-stream',
-            'X-Client-Name': CLIENT_NAME
-        },
-        body: JSON.stringify(RPC(method, params, id))
-    });
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    return res.json();
+  const headers: any = {
+    "Content-Type": "application/json",
+    Accept: "application/json, text/event-stream",
+    "X-Client-Name": CLIENT_NAME,
+  };
+
+  if (sessionId) {
+    headers["Mcp-Session-Id"] = sessionId;
+  }
+
+  const res = await fetch(MCP_URL, {
+    method: "POST",
+    headers,
+    body: JSON.stringify(RPC(method, params, id)),
+  });
+
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+  // Capture session ID from headers or body if available
+  const hSessionId = res.headers.get("Mcp-Session-Id");
+  if (hSessionId) {
+    sessionId = hSessionId;
+  }
+
+  const text = await res.text();
+  // Handle SSE response if the transport forces it
+  if (text.includes("event: message") && text.includes("data: ")) {
+    const dataLine = text.split("\n").find((l) => l.startsWith("data: "));
+    if (dataLine) {
+      return JSON.parse(dataLine.replace("data: ", ""));
+    }
+  }
+  return JSON.parse(text);
 };
 
 // Skip DB reset if SKIP_DB_RESET=true (for faster runs when stack is clean)
-const SKIP_DB_RESET = process.env.SKIP_DB_RESET === 'true';
+const SKIP_DB_RESET = process.env.SKIP_DB_RESET === "true";
 
 // Run tests in serial mode since they share state (memoryId)
-test.describe.configure({ mode: 'serial' });
-
-test.describe('CRUD Happy Path with X-Client-Name', () => {
-    let memoryId: string;
+test.describe.configure({ mode: "serial" });
 
-    test.beforeAll(async () => {
-        if (SKIP_DB_RESET) {
-            console.log('⏭️ Skipping DB reset (SKIP_DB_RESET=true)');
-            return;
-        }
-        console.log(`🧹 Resetting DB before test suite...`);
-        await resetDB();
-    });
+test.describe("CRUD Happy Path with X-Client-Name", () => {
+  let memoryId: string;
 
-    test.afterAll(async () => {
-        if (SKIP_DB_RESET) {
-            console.log('⏭️ Skipping DB reset (SKIP_DB_RESET=true)');
-            return;
-        }
-        console.log(`🧹 Resetting DB after test suite...`);
-        await resetDB();
-    });
-
-    test('1. Initialize MCP connection', async () => {
-        const initRes: any = await mcpCall("initialize", {
-            protocolVersion: "2024-11-05",
-            capabilities: { roots: { listChanged: true } },
-            clientInfo: { name: "e2e-crud-tester", version: "1.0.0" }
-        }, 1);
-
-        expect(initRes.result?.serverInfo?.name).toBe("openmemory-mcp");
-        await mcpCall("notifications/initialized", {}, 2);
-    });
-
-    test('2. CREATE - Store memory', async () => {
-        const storeRes: any = await mcpCall("tools/call", {
-            name: "openmemory_store",
-            arguments: {
-                content: `CRUD Happy Path Test Memory ${CLIENT_NAME}`,
-                tags: ["e2e", "crud-test"]
-            }
-        }, 3);
-
-        expect(storeRes.error).toBeUndefined();
-        const payload = JSON.parse(storeRes.result.content[1].text);
-        memoryId = payload.id;
-        expect(memoryId).toBeTruthy();
-        console.log(`   ✅ Created memory: ${memoryId}`);
-    });
-
-    test('3. READ - Get memory by ID', async () => {
-        const getRes: any = await mcpCall("tools/call", {
-            name: "openmemory_get",
-            arguments: { id: memoryId }
-        }, 4);
-
-        expect(getRes.error).toBeUndefined();
-        const payload = JSON.parse(getRes.result.content[0].text);
-        expect(payload.content).toContain('CRUD Happy Path Test Memory');
+  test.beforeAll(async () => {
+    if (SKIP_DB_RESET) {
+      console.log("⏭️ Skipping DB reset (SKIP_DB_RESET=true)");
+      return;
+    }
+    console.log(`🧹 Resetting DB before test suite...`);
+    await resetDB();
+  });
+
+  test.afterAll(async () => {
+    if (SKIP_DB_RESET) {
+      console.log("⏭️ Skipping DB reset (SKIP_DB_RESET=true)");
+      return;
+    }
+    console.log(`🧹 Resetting DB after test suite...`);
+    await resetDB();
+  });
+
+  test("1. Initialize MCP connection", async () => {
+    const initRes: any = await mcpCall(
+      "initialize",
+      {
+        protocolVersion: "2024-11-05",
+        capabilities: { roots: { listChanged: true } },
+        clientInfo: { name: "e2e-crud-tester", version: "1.0.0" },
+      },
+      1,
+    );
+
+    expect(initRes.result?.serverInfo?.name).toBe("cybermem");
+
+    // Notifications MUST NOT have an id
+    await fetch(MCP_URL, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Client-Name": CLIENT_NAME,
+      },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "notifications/initialized",
+        params: {},
+      }),
     });
+  });
+
+  test("2. CREATE - Store memory", async () => {
+    const storeRes: any = await mcpCall(
+      "tools/call",
+      {
+        name: "add_memory",
+        arguments: {
+          content: `CRUD Happy Path Test Memory ${CLIENT_NAME}`,
+          tags: ["e2e", "crud-test"],
+        },
+      },
+      3,
+    );
+
+    expect(storeRes.result?.content?.[0]?.text).toBeDefined();
+    const data = JSON.parse(storeRes.result.content[0].text);
+    memoryId = data.id;
+    expect(memoryId).toBeDefined();
+    console.log(`✅ Created memory with ID: ${memoryId}`);
+  });
+
+  test("3. READ - List memories", async () => {
+    const listRes: any = await mcpCall(
+      "tools/call",
+      {
+        name: "list_memories",
+        arguments: { limit: 10 },
+      },
+      4,
+    );
+
+    const memories = JSON.parse(listRes.result.content[0].text);
+    const found = memories.some((m: any) => m.id === memoryId);
+    expect(found).toBe(true);
+    console.log(`✅ Verified memory exists in list`);
+  });
+
+  test("4. QUERY - Semantic search", async () => {
+    const queryRes: any = await mcpCall(
+      "tools/call",
+      {
+        name: "query_memory",
+        arguments: {
+          query: `Happy Path Test ${CLIENT_NAME}`,
+          k: 1,
+        },
+      },
+      5,
+    );
+
+    const results = JSON.parse(queryRes.result.content[0].text);
+    expect(results.length).toBeGreaterThan(0);
+    expect(results[0].id).toBe(memoryId);
+    console.log(`✅ Verified semantic search returns the memory`);
+  });
+
+  test("5. DELETE - Remove memory", async () => {
+    const delRes: any = await mcpCall(
+      "tools/call",
+      {
+        name: "delete_memory",
+        arguments: { id: memoryId },
+      },
+      6,
+    );
+
+    expect(delRes.result?.content?.[0]?.text).toContain("deleted");
+    console.log(`✅ Deleted memory`);
+  });
+
+  test("7. Verify client appears in Dashboard", async ({ page }) => {
+    // Navigate to dashboard
+    await page.goto("http://localhost:3000");
+
+    // Login if needed
+    const passwordInput = page.getByPlaceholder("Enter admin password");
+    if (await passwordInput.isVisible()) {
+      await passwordInput.fill("admin");
+      await page.keyboard.press("Enter");
+    }
 
-    test('4. READ - List memories', async () => {
-        const listRes: any = await mcpCall("tools/call", {
-            name: "openmemory_list",
-            arguments: { limit: 10 }
-        }, 5);
+    // Handle password alert modal if appears
+    const dontShowAgainButton = page.locator(
+      'button:has-text("Don\'t show again")',
+    );
+    if (
+      await dontShowAgainButton.isVisible({ timeout: 2000 }).catch(() => false)
+    ) {
+      await dontShowAgainButton.click();
+    }
 
-        expect(listRes.error).toBeUndefined();
-        const payload = JSON.parse(listRes.result.content[1].text);
-        const found = payload.items.some((m: any) => m.id === memoryId);
-        expect(found).toBe(true);
+    // Wait for dashboard to load
+    await expect(page.getByRole("heading", { name: "CyberMem" })).toBeVisible({
+      timeout: 15000,
     });
 
-    test('5. READ - Query memories (semantic search)', async () => {
-        const queryRes: any = await mcpCall("tools/call", {
-            name: "openmemory_query",
-            arguments: { query: "CRUD Happy Path" }
-        }, 6);
+    // Wait for metrics to propagate (immediate for SQLite)
+    await page.waitForTimeout(2000);
 
-        expect(queryRes.error).toBeUndefined();
-    });
+    // Scroll to find Audit Log section
+    const auditHeader = page.locator('h3:has-text("Audit Log")');
+    await auditHeader.scrollIntoViewIfNeeded();
 
-    test('6. DELETE - Remove memory', async () => {
-        const deleteRes: any = await mcpCall("tools/call", {
-            name: "openmemory_delete",
-            arguments: { id: memoryId }
-        }, 7);
-
-        // DELETE may not exist in all OpenMemory versions - skip if not available
-        if (deleteRes.error?.message?.includes('not found')) {
-            test.skip();
-        }
+    // Verify audit log table is visible
+    await expect(page.locator('th:has-text("Client")')).toBeVisible({
+      timeout: 10000,
     });
 
-    test('7. Verify client appears in Dashboard', async ({ page }) => {
-        // Navigate to dashboard
-        await page.goto('http://localhost:3000');
+    // Look for our client in the audit log (partial match on e2e-crud)
+    const pageContent = await page.content();
+    const clientVisible =
+      pageContent.includes("e2e-crud") || pageContent.includes("E2E CRUD");
 
-        // Login if needed
-        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 appears
-        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 load
-        await expect(page.getByRole('heading', { name: 'CyberMem' })).toBeVisible({ timeout: 15000 });
-
-        // Wait for metrics to propagate (Prometheus scrape interval)
-        await page.waitForTimeout(5000);
-
-        // Scroll to find Audit Log section
-        const auditHeader = page.locator('h3:has-text("Audit Log")');
-        await auditHeader.scrollIntoViewIfNeeded();
-
-        // Verify audit log table is visible
-        await expect(page.locator('th:has-text("Client")')).toBeVisible({ timeout: 10000 });
-
-        // Look for our client in the audit log (partial match on e2e-crud)
-        // The client name should appear in audit log entries
-        const pageContent = await page.content();
-        const clientVisible = pageContent.includes('e2e-crud') || pageContent.includes('E2E CRUD');
-
-        console.log(`   Client ${CLIENT_NAME} visible in dashboard: ${clientVisible}`);
-        // Note: Client might show up as display name if mapped in clients.json
-    });
+    console.log(
+      `   Client ${CLIENT_NAME} visible in dashboard: ${clientVisible}`,
+    );
+  });
 });