@cybermem/dashboard 0.16.0 → 0.16.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cybermem/dashboard
 
+## 0.16.1
+
+### Patch Changes
+
+- Automated patch version bump.
+
 ## 0.16.0
 
 ### Minor Changes

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

@@ -92,23 +92,14 @@ export async function GET(request: Request) {
       else if (statusCode >= 300) status = "Warning";
 
       const rawTool = log.tool ?? "unknown";
-      let toolDisplayName = String(rawTool).toLowerCase();
-      // Friendly labels for core tools if needed
-      if (toolDisplayName === "add_memory") toolDisplayName = "Write";
-      else if (toolDisplayName === "query_memory") toolDisplayName = "Read";
-      else if (toolDisplayName === "update_memory") toolDisplayName = "Update";
-      else if (toolDisplayName === "delete_memory") toolDisplayName = "Delete";
-      else
-        toolDisplayName =
-          toolDisplayName.charAt(0).toUpperCase() + toolDisplayName.slice(1);
 
       return {
         timestamp: log.timestamp,
         client: normalizeClientName(log.client_name),
-        tool: toolDisplayName,
+        tool: String(rawTool).toLowerCase(),
         status: status,
         method: log.method,
-        description: log.endpoint,
+        description: "",
         rawStatus: log.status,
       };
     });

package/components/dashboard/charts/chart-card.tsx

@@ -6,6 +6,80 @@ import { ChevronDown } from "lucide-react";
 import dynamic from "next/dynamic";
 import { useEffect, useRef, useState } from "react";
 
+// Pre-built demo timeseries (24h, 3 clients, cumulative counts)
+const DEMO_CLIENT_NAMES = ["VS Code", "Gemini", "Perplexity"];
+const DEMO_TIME_SERIES = (() => {
+  const now = Date.now();
+  const POINTS = 24;
+  const makeHour = (i: number) => {
+    const t = new Date(now - (POINTS - 1 - i) * 3600000);
+    return t.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  };
+  type Row = Record<string, number | string>;
+  const makeSeries = (c: number[], g: number[], p: number[]): Row[] =>
+    Array.from({ length: POINTS }, (_, i) => ({
+      time: makeHour(i),
+      "VS Code": c[i],
+      Gemini: g[i],
+      Perplexity: p[i],
+    }));
+  // Creates
+  const cC = [
+    20, 21, 22, 22, 22, 23, 25, 28, 32, 38, 44, 51, 58, 63, 67, 70, 74, 79, 84,
+    88, 89, 89, 89, 89,
+  ];
+  const gC = [
+    8, 8, 8, 8, 8, 9, 10, 12, 14, 17, 20, 23, 27, 29, 31, 33, 35, 36, 36, 36,
+    36, 36, 36, 36,
+  ];
+  const pC = [
+    15, 15, 15, 15, 16, 16, 18, 21, 24, 28, 32, 37, 43, 47, 50, 54, 58, 62, 64,
+    65, 65, 65, 65, 65,
+  ];
+  // Reads
+  const cR = [
+    45, 47, 48, 49, 50, 52, 56, 62, 70, 79, 89, 100, 112, 121, 128, 134, 140,
+    147, 153, 157, 160, 162, 163, 163,
+  ];
+  const gR = [
+    20, 20, 21, 21, 22, 23, 25, 28, 31, 35, 40, 46, 52, 57, 60, 63, 66, 68, 70,
+    72, 73, 73, 73, 73,
+  ];
+  const pR = [
+    30, 31, 31, 32, 32, 34, 37, 42, 48, 55, 63, 72, 81, 88, 93, 98, 103, 108,
+    112, 115, 116, 117, 117, 117,
+  ];
+  // Updates
+  const cU = [
+    5, 5, 5, 5, 5, 5, 6, 7, 8, 9, 11, 13, 15, 16, 17, 18, 19, 20, 21, 22, 22,
+    22, 22, 22,
+  ];
+  const gU = [
+    2, 2, 2, 2, 2, 2, 3, 3, 4, 4, 5, 6, 7, 7, 8, 8, 9, 9, 10, 10, 10, 10, 10,
+    10,
+  ];
+  const pU = [
+    3, 3, 3, 3, 3, 3, 4, 5, 5, 6, 7, 8, 9, 10, 11, 11, 12, 12, 13, 13, 14, 14,
+    14, 14,
+  ];
+  // Deletes
+  const cD = [
+    1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4,
+  ];
+  const gD = [
+    0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2,
+  ];
+  const pD = [
+    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3,
+  ];
+  return {
+    creates: makeSeries(cC, gC, pC),
+    reads: makeSeries(cR, gR, pR),
+    updates: makeSeries(cU, gU, pU),
+    deletes: makeSeries(cD, gD, pD),
+  };
+})();
+
 // Dynamic import with SSR disabled
 const MemoryChart = dynamic(() => import("./memory-chart"), { ssr: false });
 
@@ -36,7 +110,7 @@ const periods = [
 ];
 
 export default function ChartCard({ service }: ChartCardProps) {
-  const { refreshSignal, clientConfigs } = useDashboard();
+  const { refreshSignal, clientConfigs, isDemo } = useDashboard();
   const [period, setPeriod] = useState("24h");
   const [hovered, setHovered] = useState<string | null>(null);
   const [data, setData] = useState<any[]>([]);
@@ -49,6 +123,22 @@ export default function ChartCard({ service }: ChartCardProps) {
     async function fetchData() {
       if (isInitialLoad.current) setLoading(true);
 
+      // Demo mode: use static fake data, skip network fetch
+      if (isDemo) {
+        const key = service.includes("Creates")
+          ? "creates"
+          : service.includes("Reads")
+          ? "reads"
+          : service.includes("Updates")
+          ? "updates"
+          : "deletes";
+        setData(DEMO_TIME_SERIES[key] as any[]);
+        setClientNames(DEMO_CLIENT_NAMES);
+        setLoading(false);
+        isInitialLoad.current = false;
+        return;
+      }
+
       try {
         const res = await fetch(`/api/metrics?period=${period}`);
         if (!res.ok) throw new Error("Failed to fetch metrics");
@@ -134,7 +224,7 @@ export default function ChartCard({ service }: ChartCardProps) {
       }
     }
     fetchData();
-  }, [period, service, refreshSignal]);
+  }, [period, service, refreshSignal, isDemo]);
 
   const isMultiSeries = clientNames.length > 0;
 

package/components/dashboard/settings-modal.tsx

@@ -60,9 +60,10 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
         if (localKey && !data.isManaged) {
           setApiKey(localKey);
           // Mask the local key for display
-          const maskedLocal = localKey.length > 10 
-            ? `${localKey.slice(0, 7)}...${localKey.slice(-4)}`
-            : "****";
+          const maskedLocal =
+            localKey.length > 10
+              ? `${localKey.slice(0, 7)}...${localKey.slice(-4)}`
+              : "****";
           setApiKeyMasked(maskedLocal);
         } else {
           setApiKey(data.apiKey !== "not-set" ? data.apiKey : "");
@@ -120,7 +121,9 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement("a");
       a.href = url;
-      a.download = `cybermem-backup-${new Date().toISOString().split("T")[0]}.tar.gz`;
+      a.download = `cybermem-backup-${
+        new Date().toISOString().split("T")[0]
+      }.tar.gz`;
       document.body.appendChild(a);
       a.click();
       window.URL.revokeObjectURL(url);
@@ -262,6 +265,40 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
             handleRestart={handleRestart}
             isRestarting={isRestarting}
           />
+
+          {/* Demo Mode — staging only */}
+          {settings?.env === "staging" && (
+            <section className="pb-4">
+              <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-widest mb-4 flex items-center gap-2">
+                <span>🎬</span>
+                Developer
+              </h3>
+              <div className="bg-white/[0.032] border-[0.5px] border-white/10 rounded-2xl p-5 flex items-center justify-between">
+                <div>
+                  <div className="text-sm font-medium text-white">
+                    Demo Mode
+                  </div>
+                  <div className="text-xs text-neutral-500 mt-0.5">
+                    Show fake data — vscode, gemini, perplexity
+                  </div>
+                </div>
+                <button
+                  role="switch"
+                  aria-checked={isDemo}
+                  onClick={toggleDemo}
+                  className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
+                    isDemo ? "bg-emerald-500" : "bg-white/15"
+                  }`}
+                >
+                  <span
+                    className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
+                      isDemo ? "translate-x-5" : "translate-x-0"
+                    }`}
+                  />
+                </button>
+              </div>
+            </section>
+          )}
         </div>
 
         {/* Footer */}

package/e2e/api.spec.ts

@@ -320,7 +320,7 @@ test.describe("Dashboard:E2E:API (Deep Verification)", () => {
       }
 
       expect(latestLog).toBeDefined();
-      expect(latestLog.tool).toBe("Write");
+      expect(latestLog.tool).toBe("add_memory");
 
       await testInfo.attach("📋 Audit Log Entry", {
         body: `Found: ${latestLog ? "YES" : "NO"}\nClient: ${

package/lib/data/dashboard-context.tsx

@@ -54,34 +54,137 @@ const DashboardContext = createContext<DashboardContextType | undefined>(
 );
 
 const DEMO_STATS: DashboardStats = {
-  memoryRecords: 1337,
-  totalClients: 5,
-  successRate: 98.5,
-  totalRequests: 1500,
-  topWriter: { name: "Antigravity", count: 420 },
-  topReader: { name: "Claude", count: 310 },
-  lastWriter: { name: "Antigravity", timestamp: Date.now() - 120000 },
-  lastReader: { name: "Claude", timestamp: Date.now() - 60000 },
+  memoryRecords: 47,
+  totalClients: 3,
+  successRate: 98.7,
+  totalRequests: 234,
+  topWriter: { name: "Perplexity", count: 89 },
+  topReader: { name: "VS Code", count: 117 },
+  lastWriter: { name: "Gemini", timestamp: Date.now() - 120000 },
+  lastReader: { name: "Perplexity", timestamp: Date.now() - 30000 },
 };
 
+const _now = Date.now();
 const DEMO_LOGS: AuditLogEntry[] = [
   {
     id: 1,
-    date: new Date().toISOString(),
-    client: "Antigravity",
-    operation: "Write",
-    description: "POST /add",
+    date: new Date(_now - 30000).toISOString(),
+    client: "Perplexity",
+    tool: "query_memory",
+    operation: "Read",
+    description: "",
     status: "Success",
-    timestamp: Date.now(),
+    timestamp: _now - 30000,
   },
   {
     id: 2,
-    date: new Date(Date.now() - 60000).toISOString(),
-    client: "Claude",
+    date: new Date(_now - 120000).toISOString(),
+    client: "Gemini",
+    tool: "add_memory",
+    operation: "Write",
+    description: "",
+    status: "Success",
+    timestamp: _now - 120000,
+  },
+  {
+    id: 3,
+    date: new Date(_now - 180000).toISOString(),
+    client: "VS Code",
+    tool: "query_memory",
+    operation: "Read",
+    description: "",
+    status: "Success",
+    timestamp: _now - 180000,
+  },
+  {
+    id: 4,
+    date: new Date(_now - 300000).toISOString(),
+    client: "Perplexity",
+    tool: "add_memory",
+    operation: "Write",
+    description: "",
+    status: "Success",
+    timestamp: _now - 300000,
+  },
+  {
+    id: 5,
+    date: new Date(_now - 420000).toISOString(),
+    client: "VS Code",
+    tool: "add_memory",
+    operation: "Write",
+    description: "",
+    status: "Success",
+    timestamp: _now - 420000,
+  },
+  {
+    id: 6,
+    date: new Date(_now - 600000).toISOString(),
+    client: "Gemini",
+    tool: "query_memory",
+    operation: "Read",
+    description: "",
+    status: "Success",
+    timestamp: _now - 600000,
+  },
+  {
+    id: 7,
+    date: new Date(_now - 720000).toISOString(),
+    client: "Perplexity",
+    tool: "update_memory",
+    operation: "Update",
+    description: "",
+    status: "Success",
+    timestamp: _now - 720000,
+  },
+  {
+    id: 8,
+    date: new Date(_now - 900000).toISOString(),
+    client: "VS Code",
+    tool: "query_memory",
+    operation: "Read",
+    description: "",
+    status: "Warning",
+    timestamp: _now - 900000,
+  },
+  {
+    id: 9,
+    date: new Date(_now - 1200000).toISOString(),
+    client: "Gemini",
+    tool: "add_memory",
+    operation: "Write",
+    description: "",
+    status: "Success",
+    timestamp: _now - 1200000,
+  },
+  {
+    id: 10,
+    date: new Date(_now - 1500000).toISOString(),
+    client: "Perplexity",
+    tool: "query_memory",
+    operation: "Read",
+    description: "",
+    status: "Success",
+    timestamp: _now - 1500000,
+  },
+  {
+    id: 11,
+    date: new Date(_now - 1800000).toISOString(),
+    client: "VS Code",
+    tool: "add_memory",
+    operation: "Write",
+    description: "",
+    status: "Success",
+    timestamp: _now - 1800000,
+  },
+  {
+    id: 12,
+    date: new Date(_now - 2400000).toISOString(),
+    client: "Perplexity",
+    tool: "query_memory",
     operation: "Read",
-    description: "POST /query",
+    description: "",
     status: "Success",
-    timestamp: Date.now() - 60000,
+    timestamp: _now - 2400000,
   },
 ];
 

package/lib/data/types.ts

@@ -25,6 +25,7 @@ export interface AuditLogEntry {
   date: string;
   client: string;
   operation: string;
+  tool?: string;
   status: string;
   description: string;
   timestamp: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cybermem/dashboard",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "CyberMem Monitoring Dashboard",
   "homepage": "https://cybermem.dev",
   "repository": {

package/public/clients.json

@@ -36,7 +36,7 @@
   {
     "id": "vscode",
     "name": "VS Code",
-    "match": "vscode|copilot",
+    "match": "vscode|vs code|copilot",
     "color": "#23a9f2",
     "icon": "/icons/vscode.png",
     "description": "VS Code requires the MCP Servers extension for MCP support.",
@@ -146,9 +146,9 @@
   },
   {
     "id": "gemini-cli",
-    "name": "Gemini CLI",
+    "name": "Gemini",
     "match": "gemini",
-    "color": "#9ca3af",
+    "color": "#8b5cf6",
     "icon": "/icons/gemini.png",
     "description": "Gemini CLI supports MCP servers via stdio transport.",
     "steps": [