@cybermem/dashboard 0.5.10 → 0.5.14

package/components/dashboard/chart-card.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useDashboard } from "@/lib/data/dashboard-context";
@@ -10,7 +10,7 @@ import { useEffect, useRef, useState } from "react";
 const MetricsChart = dynamic(() => import("./metrics-chart"), { ssr: false });
 
 interface ChartCardProps {
-  service: string
+  service: string;
 }
 
 // Fallback color generator
@@ -19,10 +19,10 @@ function stringToColor(str: string): string {
   for (let i = 0; i < str.length; i++) {
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
   }
-  let color = '#';
+  let color = "#";
   for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 0xFF;
-    color += ('00' + value.toString(16)).substr(-2);
+    const value = (hash >> (i * 8)) & 0xff;
+    color += ("00" + value.toString(16)).substr(-2);
   }
   return color;
 }
@@ -33,108 +33,133 @@ const periods = [
   { value: "7d", label: "7 Days" },
   { value: "30d", label: "30 Days" },
   { value: "90d", label: "90 Days" },
-]
+];
 
 export default function ChartCard({ service }: ChartCardProps) {
-  const { strategy, refreshSignal, clientConfigs } = useDashboard()
-  const [period, setPeriod] = useState("24h")
-  const [hovered, setHovered] = useState<string | null>(null)
-  const [data, setData] = useState<any[]>([])
-  const [clientNames, setClientNames] = useState<string[]>([])
-  const [clientMetadata, setClientMetadata] = useState<Record<string, any>>({})
-  const [loading, setLoading] = useState(true)
-
-  const isInitialLoad = useRef(true)
+  const { strategy, refreshSignal, clientConfigs } = useDashboard();
+  const [period, setPeriod] = useState("24h");
+  const [hovered, setHovered] = useState<string | null>(null);
+  const [data, setData] = useState<any[]>([]);
+  const [clientNames, setClientNames] = useState<string[]>([]);
+  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, not background refresh
-      if (isInitialLoad.current) setLoading(true)
+      if (isInitialLoad.current) setLoading(true);
 
       try {
-        const timeSeriesData = await strategy.getChartData(period)
+        const timeSeriesData = await strategy.getChartData(period);
 
         // Update client metadata if provided in response
         if (timeSeriesData.metadata) {
-            setClientMetadata(prev => ({ ...prev, ...timeSeriesData.metadata }))
+          setClientMetadata((prev) => ({
+            ...prev,
+            ...timeSeriesData.metadata,
+          }));
         }
 
         // Helper to format time based on period
         const formatSeries = (series: any[]) => {
-            if (!series) return []
-            return series.map(point => {
-            const date = new Date((point.time as number) * 1000)
-            let timeStr = ""
+          if (!series) return [];
+          return series.map((point) => {
+            const date = new Date((point.time as number) * 1000);
+            let timeStr = "";
             // Show date if period is longer than 24h
             if (["7d", "30d", "90d", "all"].includes(period)) {
-                timeStr = date.toLocaleDateString([], { month: '2-digit', day: '2-digit' }) + " " + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+              timeStr =
+                date.toLocaleDateString([], {
+                  month: "2-digit",
+                  day: "2-digit",
+                }) +
+                " " +
+                date.toLocaleTimeString([], {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                });
             } else {
-                timeStr = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+              timeStr = date.toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit",
+              });
             }
             return {
-                ...point,
-                time: timeStr
-            }
-            })
-        }
+              ...point,
+              time: timeStr,
+            };
+          });
+        };
 
         // Extract client names from series and sort by total value (Ascending)
         const getClients = (series: any[]) => {
-            if (!series || series.length === 0) return []
-            const keys = new Set<string>()
-            const totals: Record<string, number> = {}
-
-            series.forEach(point => {
-                Object.keys(point).forEach(k => {
-                    if (k !== 'time') {
-                        keys.add(k)
-                        totals[k] = (totals[k] || 0) + (point[k] as number)
-                    }
-                })
-            })
-
-            return Array.from(keys).sort((a, b) => (totals[a] || 0) - (totals[b] || 0))
-        }
+          if (!series || series.length === 0) return [];
+          const keys = new Set<string>();
+          const totals: Record<string, number> = {};
+
+          series.forEach((point) => {
+            Object.keys(point).forEach((k) => {
+              if (k !== "time") {
+                keys.add(k);
+                totals[k] = (totals[k] || 0) + (point[k] as number);
+              }
+            });
+          });
+
+          return Array.from(keys).sort(
+            (a, b) => (totals[a] || 0) - (totals[b] || 0),
+          );
+        };
 
         // Get data based on service type
-        let seriesData: any[] = []
-        let clients: string[] = []
+        let seriesData: any[] = [];
+        let clients: string[] = [];
 
         if (service.includes("Creates")) {
-            seriesData = formatSeries(timeSeriesData.creates)
-            clients = getClients(timeSeriesData.creates)
+          seriesData = formatSeries(timeSeriesData.creates);
+          clients = getClients(timeSeriesData.creates);
         } else if (service.includes("Reads")) {
-            seriesData = formatSeries(timeSeriesData.reads)
-            clients = getClients(timeSeriesData.reads)
+          seriesData = formatSeries(timeSeriesData.reads);
+          clients = getClients(timeSeriesData.reads);
         } else if (service.includes("Updates")) {
-            seriesData = formatSeries(timeSeriesData.updates)
-            clients = getClients(timeSeriesData.updates)
+          seriesData = formatSeries(timeSeriesData.updates);
+          clients = getClients(timeSeriesData.updates);
         } else if (service.includes("Deletes")) {
-            seriesData = formatSeries(timeSeriesData.deletes)
-            clients = getClients(timeSeriesData.deletes)
+          seriesData = formatSeries(timeSeriesData.deletes);
+          clients = getClients(timeSeriesData.deletes);
         }
 
-        setData(seriesData)
-        setClientNames(clients)
-
+        setData(seriesData);
+        setClientNames(clients);
       } catch (e) {
-        console.error("Failed to fetch chart data:", e)
+        console.error("Failed to fetch chart data:", e);
       } finally {
-        setLoading(false)
-        isInitialLoad.current = false
+        setLoading(false);
+        isInitialLoad.current = false;
       }
     }
-    fetchData()
-  }, [period, service, strategy, refreshSignal])
+    fetchData();
+  }, [period, service, strategy, refreshSignal]);
 
-  const isMultiSeries = clientNames.length > 0
+  const isMultiSeries = clientNames.length > 0;
 
   return (
     <Card className="bg-white/5 border-white/10 backdrop-blur-md relative overflow-visible pt-6 pb-2">
       <button
         className="absolute top-0 right-0 z-20 h-8 px-3 rounded-tl-none rounded-tr-xl rounded-bl-2xl rounded-br-none bg-white/5 border-b border-l border-white/10 hover:bg-white/10 text-white text-xs font-medium flex items-center gap-2 transition-all group"
-        onClick={() => document.getElementById(`dropdown-${service}`)?.classList.toggle('hidden')}
+        onClick={() =>
+          document
+            .getElementById(`dropdown-${service}`)
+            ?.classList.toggle("hidden")
+        }
       >
-        <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg
+          className="w-3 h-3"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
           <path
             strokeLinecap="round"
             strokeLinejoin="round"
@@ -147,13 +172,18 @@ export default function ChartCard({ service }: ChartCardProps) {
       </button>
 
       {/* Dropdown Menu - Positioned relative to the button or card */}
-      <div id={`dropdown-${service}`} className="hidden absolute top-8 right-0 w-40 bg-[#0B1116]/95 border border-white/10 rounded-lg shadow-xl z-30 backdrop-blur-xl overflow-hidden">
+      <div
+        id={`dropdown-${service}`}
+        className="hidden absolute top-8 right-0 w-40 bg-[#0B1116]/95 border border-white/10 rounded-lg shadow-xl z-30 backdrop-blur-xl overflow-hidden"
+      >
         {periods.map((p) => (
           <button
             key={p.value}
             onClick={() => {
               setPeriod(p.value);
-              document.getElementById(`dropdown-${service}`)?.classList.add('hidden');
+              document
+                .getElementById(`dropdown-${service}`)
+                ?.classList.add("hidden");
             }}
             className={`w-full text-left px-3 py-2 text-xs transition-colors ${
               period === p.value
@@ -169,29 +199,74 @@ export default function ChartCard({ service }: ChartCardProps) {
       <CardHeader className="relative">
         <div className="flex items-center justify-between">
           <div>
-            <CardTitle className="text-sm font-medium text-slate-400">Time Series</CardTitle>
+            <CardTitle className="text-sm font-medium text-slate-400">
+              Time Series
+            </CardTitle>
             <div className="text-2xl font-bold text-white">{service}</div>
           </div>
         </div>
       </CardHeader>
       <CardContent>
         {loading ? (
+          <div className="h-[200px] w-full flex flex-col justify-end p-4">
+            {/* Skeleton chart bars */}
+            <div className="flex items-end justify-around h-full gap-2">
+              <div
+                className="w-8 bg-white/5 rounded-t animate-pulse"
+                style={{ height: "40%" }}
+              />
+              <div
+                className="w-8 bg-white/5 rounded-t animate-pulse"
+                style={{ height: "65%" }}
+              />
+              <div
+                className="w-8 bg-white/5 rounded-t animate-pulse"
+                style={{ height: "30%" }}
+              />
+              <div
+                className="w-8 bg-white/5 rounded-t animate-pulse"
+                style={{ height: "80%" }}
+              />
+              <div
+                className="w-8 bg-white/5 rounded-t animate-pulse"
+                style={{ height: "50%" }}
+              />
+              <div
+                className="w-8 bg-white/5 rounded-t animate-pulse"
+                style={{ height: "70%" }}
+              />
+              <div
+                className="w-8 bg-white/5 rounded-t animate-pulse"
+                style={{ height: "45%" }}
+              />
+            </div>
+            {/* Skeleton axis */}
+            <div className="h-px w-full bg-white/10 mt-2" />
+          </div>
+        ) : data.length === 0 || clientNames.length === 0 ? (
           <div className="h-[200px] w-full flex items-center justify-center">
-            <div className="text-neutral-500 text-sm">Loading...</div>
+            <div className="text-center">
+              <div className="text-neutral-500 text-sm">
+                No data for this period
+              </div>
+              <div className="text-neutral-600 text-xs mt-1">
+                Try selecting a different time range
+              </div>
+            </div>
           </div>
         ) : (
           <div className="h-[200px] w-full">
             <MetricsChart
-                data={data}
-                isMultiSeries={isMultiSeries}
-                clientNames={clientNames}
-                clientConfigs={clientConfigs}
-                hovered={hovered}
-                setHovered={setHovered}
+              data={data}
+              isMultiSeries={isMultiSeries}
+              clientNames={clientNames}
+              clientConfigs={clientConfigs}
+              hovered={hovered}
+              setHovered={setHovered}
             />
           </div>
         )}
       </CardContent>
     </Card>
-  )
+  );
 }

package/components/dashboard/header.tsx

@@ -1,8 +1,15 @@
-"use client"
+"use client";
 
 import { Button } from "@/components/ui/button";
 import { useDashboard } from "@/lib/data/dashboard-context";
-import { AlertCircle, Book, CheckCircle2, Loader2, Settings, XCircle } from "lucide-react";
+import {
+    AlertCircle,
+    Book,
+    CheckCircle2,
+    Loader2,
+    Settings,
+    XCircle,
+} from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 
@@ -13,53 +20,87 @@ export default function DashboardHeader({
   onShowMCPConfig: () => void;
   onShowSettings: () => void;
 }) {
-  const [isScrolled, setIsScrolled] = useState(false)
-  const [showHealthPopup, setShowHealthPopup] = useState(false)
-  const { systemHealth } = useDashboard()
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [showHealthPopup, setShowHealthPopup] = useState(false);
+  const { systemHealth } = useDashboard();
 
   useEffect(() => {
     // Check initial scroll position on mount
-    setIsScrolled(window.scrollY > 10)
+    setIsScrolled(window.scrollY > 10);
 
     const handleScroll = () => {
-      setIsScrolled(window.scrollY > 10)
-    }
-    window.addEventListener("scroll", handleScroll)
-    return () => window.removeEventListener("scroll", handleScroll)
-  }, [])
+      setIsScrolled(window.scrollY > 10);
+    };
+    window.addEventListener("scroll", handleScroll);
+    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..." }
+      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" }
+      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
+  const statusConfig = getStatusConfig();
+  const StatusIcon = statusConfig.icon;
 
   return (
-    <header className={`sticky top-0 z-50 transition-all duration-300 ${
-      isScrolled
-        ? "border-b border-white/10 backdrop-blur-xl bg-neutral-900/30"
-        : "border-b border-transparent bg-transparent"
-    }`}>
+    <header
+      className={`sticky top-0 z-50 transition-all duration-300 ${
+        isScrolled
+          ? "border-b border-white/10 backdrop-blur-xl bg-neutral-900/30"
+          : "border-b border-transparent bg-transparent"
+      }`}
+    >
       <div className="px-6 py-5 max-w-7xl mx-auto">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-4">
             <div className="relative w-10 h-10 flex-shrink-0">
-              <Image src="/logo.svg" alt="CyberMem Logo" width={40} height={40} className="object-contain" />
+              <Image
+                src="/logo.svg"
+                alt="CyberMem Logo"
+                width={40}
+                height={40}
+                className="object-contain"
+              />
             </div>
             <div>
               <div className="flex items-center gap-3">
-                <h1 className="text-3xl font-bold tracking-tight text-white leading-none font-exo">CyberMem</h1>
+                <h1 className="text-3xl font-bold tracking-tight text-white leading-none font-exo">
+                  CyberMem
+                </h1>
 
                 {/* System Health Status Badge with Hover Popup */}
                 <div
@@ -67,29 +108,55 @@ export default function DashboardHeader({
                   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>
+                  {!systemHealth ? (
+                    /* Shimmer loading state */
+                    <div className="px-3 py-[2px] rounded-full bg-white/5 border border-white/10 animate-pulse">
+                      <div className="flex items-center gap-1">
+                        <div className="w-3 h-3 rounded-full bg-white/10" />
+                        <div className="w-16 h-3 rounded bg-white/10" />
+                      </div>
+                    </div>
+                  ) : (
+                    <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" />
+                      {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>
+                        <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
+                            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>
+                                <span className="text-[10px] text-neutral-500">
+                                  {service.latencyMs}ms
+                                </span>
                               )}
-                              {service.status === 'ok' ? (
+                              {service.status === "ok" ? (
                                 <CheckCircle2 className="w-3 h-3 text-emerald-400" />
-                              ) : service.status === 'warning' ? (
+                              ) : service.status === "warning" ? (
                                 <AlertCircle className="w-3 h-3 text-amber-400" />
                               ) : (
                                 <XCircle className="w-3 h-3 text-red-400" />
@@ -97,12 +164,23 @@ export default function DashboardHeader({
                             </div>
                           </div>
                         ))}
-                        {systemHealth.services.some(s => s.status !== 'ok' && s.message) && (
+                        {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>
-                            ))}
+                            <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>
@@ -112,19 +190,22 @@ export default function DashboardHeader({
               </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"
             >
-              <Image src="/icons/mcp.png" alt="MCP" width={16} height={16} className="mr-2" />
+              <Image
+                src="/icons/mcp.png"
+                alt="MCP"
+                width={16}
+                height={16}
+                className="mr-2"
+              />
               Connect MCP
             </Button>
 
@@ -134,7 +215,7 @@ export default function DashboardHeader({
               asChild
               className="hidden md:flex h-10 px-4 text-sm font-medium text-neutral-400 hover:text-white bg-white/5 border border-white/10 hover:bg-white/10 rounded-lg"
             >
-              <a href="https://cybermem.dev/docs" target="_blank">
+              <a href="https://docs.cybermem.dev" target="_blank">
                 <Book className="w-4 h-4 mr-2" />
                 Docs
               </a>
@@ -152,5 +233,5 @@ export default function DashboardHeader({
         </div>
       </div>
     </header>
-  )
+  );
 }

package/components/dashboard/mcp-config-modal.tsx

@@ -423,7 +423,7 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
             variant="ghost"
             className="bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 text-emerald-400 hover:text-emerald-300 mr-auto"
           >
-            <a href="https://cybermem.dev/docs" target="_blank">Read Documentation</a>
+            <a href="https://docs.cybermem.dev" target="_blank">Read Documentation</a>
           </Button>
           <Button
             onClick={onClose}