@cybermem/dashboard 0.9.12 → 0.13.4

package/components/dashboard/header.tsx

@@ -1,235 +1,236 @@
 "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";
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover";
+import { useDashboard } from "@/lib/data/dashboard-context";
+import { cn } from "@/lib/utils";
+import { Activity, Book, Loader2, Settings, Shield, Zap } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 
-export default function DashboardHeader({
-  onShowMCPConfig,
-  onShowSettings,
-}: {
+export interface HeaderProps {
   onShowMCPConfig: () => void;
   onShowSettings: () => void;
-}) {
-  const [isScrolled, setIsScrolled] = useState(false);
-  const [showHealthPopup, setShowHealthPopup] = useState(false);
+  memoryCount?: number;
+}
+
+export default function Header({
+  onShowMCPConfig,
+  onShowSettings,
+  memoryCount = 0,
+}: HeaderProps) {
   const { systemHealth } = useDashboard();
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [instanceLabel, setInstanceLabel] = useState<string>("checking...");
 
   useEffect(() => {
-    // Check initial scroll position on mount
+    // Initial check
     setIsScrolled(window.scrollY > 10);
 
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 10);
     };
     window.addEventListener("scroll", handleScroll);
+
+    fetch("/api/settings")
+      .then((res) => res.json())
+      .then((data) => {
+        const { env, instance, tailscale } = data;
+        let prefix = instance || "local";
+        if (instance === "local") prefix = "localhost";
+        else if (instance === "rpi") prefix = tailscale ? "rpi-ts" : "rpi-lan";
+        else if (instance === "vps") prefix = "vps";
+        setInstanceLabel(`${prefix}-${env || "prod"}`);
+      })
+      .catch(() => {});
+
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
   const getStatusConfig = () => {
     if (!systemHealth) {
       return {
-        bg: "bg-neutral-500/10",
-        text: "text-neutral-400",
-        border: "border-neutral-500/20",
+        text: "text-zinc-400",
         icon: Loader2,
-        label: "Checking...",
+        label: "probing",
       };
     }
-    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",
-        };
+    if (systemHealth.overall === "ok") {
+      return {
+        text: "text-emerald-400",
+        icon: Zap,
+        label: "healthy",
+      };
     }
+    return {
+      text: "text-red-400",
+      icon: Zap,
+      label: "degraded",
+    };
   };
 
-  const statusConfig = getStatusConfig();
-  const StatusIcon = statusConfig.icon;
+  const status = getStatusConfig();
+  const StatusIcon = status.icon;
 
   return (
     <header
-      className={`sticky top-0 z-50 transition-all duration-300 ${
+      className={cn(
+        "fixed top-0 left-0 right-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"
-      }`}
+          ? "border-b border-white/10 backdrop-blur-xl bg-neutral-900/30 shadow-2xl"
+          : "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"
-              />
-            </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>
+      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
+        {/* Left Section: Logo & Integrated Info/Status */}
+        <div className="flex items-center gap-6">
+          <div className="h-10 w-10 relative">
+            <Image
+              src="/logo.png"
+              alt="CyberMem"
+              fill
+              className="object-contain opacity-80"
+            />
+          </div>
+          <div className="flex flex-col">
+            <h1 className="text-2xl font-bold tracking-tighter text-white font-[family-name:var(--font-exo2)]">
+              CyberMem
+            </h1>
 
-                {/* System Health Status Badge with Hover Popup */}
-                <div
-                  className="relative mt-1.5"
-                  onMouseEnter={() => setShowHealthPopup(true)}
-                  onMouseLeave={() => setShowHealthPopup(false)}
-                >
-                  {!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>
-                  )}
+            <div className="flex items-center gap-2 text-[12px] font-normal tracking-normal text-white">
+              <span className="opacity-90 lowercase">{instanceLabel}</span>
+              <span className="opacity-50 text-[10px]">•</span>
 
-                  {/* Hover Popup */}
-                  {showHealthPopup && systemHealth && (
-                    <div className="absolute top-full left-0 mt-2 w-64 bg-[#0B1116]/95 border border-white/10 rounded-lg shadow-xl z-50 backdrop-blur-xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
-                      <div className="p-3 border-b border-white/5">
-                        <p className="text-xs text-neutral-400">
-                          System Health
-                        </p>
-                        <p className="text-[10px] text-neutral-500 mt-0.5">
-                          Updated:{" "}
-                          {new Date(
-                            systemHealth.timestamp,
-                          ).toLocaleTimeString()}
-                        </p>
-                      </div>
-                      <div className="p-2 space-y-1">
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    className={cn(
+                      "flex items-center gap-1 transition-colors hover:opacity-80 active:opacity-100",
+                      status.text,
+                    )}
+                  >
+                    <StatusIcon
+                      className={cn(
+                        "h-3.5 w-3.5 flex-shrink-0",
+                        status.label === "probing" && "animate-spin",
+                      )}
+                    />
+                    <span className="font-normal lowercase truncate">
+                      {status.label}
+                    </span>
+                  </button>
+                </PopoverTrigger>
+                <PopoverContent className="w-80 bg-zinc-950/95 backdrop-blur-2xl border-white/10 p-6 rounded-[2rem] shadow-[0_20px_50px_rgba(0,0,0,0.5)] animate-in slide-in-from-top-2">
+                  <div className="space-y-6">
+                    <div className="flex items-center justify-between pb-4 border-b border-white/5">
+                      <h4 className="text-xs font-black uppercase tracking-widest text-zinc-400">
+                        System Health
+                      </h4>
+                      <Activity className="h-4 w-4 text-emerald-400" />
+                    </div>
+                    {systemHealth?.services ? (
+                      <div className="space-y-4">
                         {systemHealth.services.map((service, i) => (
                           <div
                             key={i}
-                            className="flex items-center justify-between px-2 py-1.5 rounded hover:bg-white/5"
+                            className="flex items-center justify-between group"
                           >
-                            <span className="text-xs text-neutral-300">
-                              {service.name}
-                            </span>
-                            <div className="flex items-center gap-2">
-                              {service.latencyMs && (
-                                <span className="text-[10px] text-neutral-500">
-                                  {service.latencyMs}ms
-                                </span>
-                              )}
-                              {service.status === "ok" ? (
-                                <CheckCircle2 className="w-3 h-3 text-emerald-400" />
-                              ) : service.status === "warning" ? (
-                                <AlertCircle className="w-3 h-3 text-amber-400" />
-                              ) : (
-                                <XCircle className="w-3 h-3 text-red-400" />
-                              )}
+                            <div className="flex items-center gap-3">
+                              <div
+                                className={cn(
+                                  "h-2 w-2 rounded-full",
+                                  service.status === "ok"
+                                    ? "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]"
+                                    : "bg-red-500",
+                                )}
+                              />
+                              <span className="text-[11px] font-bold text-zinc-300 group-hover:text-white transition-colors">
+                                {service.name}
+                              </span>
                             </div>
+                            <span className="text-[10px] font-black text-zinc-600 uppercase tracking-tighter">
+                              {service.latencyMs
+                                ? `${service.latencyMs}ms`
+                                : service.status === "ok"
+                                  ? "Online"
+                                  : "Error"}
+                            </span>
                           </div>
                         ))}
-                        {systemHealth.services.some(
-                          (s) => s.status !== "ok" && s.message,
-                        ) && (
-                          <div className="mt-2 p-2 rounded bg-red-500/10 border border-red-500/20">
-                            <p className="text-xs text-red-300 font-medium">
-                              Issues:
-                            </p>
-                            {systemHealth.services
-                              .filter((s) => s.status !== "ok" && s.message)
-                              .map((s, i) => (
-                                <p
-                                  key={i}
-                                  className="text-[10px] text-red-400 mt-1"
-                                >
-                                  • {s.name}: {s.message}
-                                </p>
-                              ))}
-                          </div>
-                        )}
                       </div>
+                    ) : (
+                      <div className="flex items-center gap-3 text-zinc-500">
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                        <span className="text-xs font-bold">
+                          Synchronizing telemetry...
+                        </span>
+                      </div>
+                    )}
+                    <div className="pt-4 border-t border-white/5 flex items-center justify-between">
+                      <span className="text-[9px] font-black text-zinc-600 uppercase">
+                        Latency: Minimal
+                      </span>
+                      <span className="text-[10px] font-medium opacity-40 ml-auto mr-2">
+                        {memoryCount} memories
+                      </span>
+                      <Shield className="h-3 w-3 text-zinc-700" />
                     </div>
-                  )}
-                </div>
-              </div>
-              <p className="text-sm text-neutral-400 mt-1">Memory MCP Server</p>
+                  </div>
+                </PopoverContent>
+              </Popover>
             </div>
           </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"
-            >
+        {/* Right Section: Actions */}
+        <div className="flex items-center gap-3">
+          <Button
+            data-testid="mcp-button"
+            onClick={onShowMCPConfig}
+            className="bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/20 text-emerald-400 text-sm font-medium transition-colors h-9 px-3 rounded-lg flex items-center gap-2"
+          >
+            <div className="relative h-4 w-4">
               <Image
                 src="/icons/mcp.png"
                 alt="MCP"
-                width={16}
-                height={16}
-                className="mr-2"
+                fill
+                className="object-contain"
               />
-              Connect MCP
-            </Button>
+            </div>
+            Connect MCP
+          </Button>
 
-            <Button
-              variant="ghost"
-              size="sm"
-              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"
+          <Button
+            variant="ghost"
+            size="sm"
+            className="text-white/50 hover:text-white hover:bg-white/5 transition-all h-9 px-4 rounded-lg group/docs border border-transparent hover:border-white/10"
+            asChild
+          >
+            <a
+              href="https://docs.cybermem.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center"
             >
-              <a href="https://docs.cybermem.dev" target="_blank">
-                <Book className="w-4 h-4 mr-2" />
-                Docs
-              </a>
-            </Button>
+              <Book className="h-4 w-4 mr-2 opacity-50 group-hover/docs:opacity-100 transition-opacity" />
+              Docs
+            </a>
+          </Button>
 
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onShowSettings}
-              className="h-10 w-10 text-neutral-400 hover:text-white bg-white/5 border border-white/10 hover:bg-white/10 rounded-lg"
-            >
-              <Settings className="w-5 h-5" />
-            </Button>
-          </div>
+          <Button
+            data-testid="settings-button"
+            variant="ghost"
+            size="icon"
+            onClick={onShowSettings}
+            className="text-white/50 hover:text-white hover:bg-white/10 transition-all h-9 w-9 rounded-lg border border-transparent hover:border-white/10"
+            title="Settings"
+          >
+            <Settings className="h-5 w-5" />
+          </Button>
         </div>
       </div>
     </header>

package/components/dashboard/{audit-log-table.tsx → logs/log-viewer.tsx}

@@ -11,9 +11,10 @@ import {
     Download,
     RefreshCw,
 } from "lucide-react";
+import Image from "next/image";
 import { useState } from "react";
 
-interface AuditLogTableProps {
+interface LogViewerProps {
   logs: any[];
   loading: boolean;
   currentPage: number;
@@ -58,7 +59,7 @@ const periods = [
   { label: "All Time", value: "all" },
 ];
 
-export default function AuditLogTable({
+export default function LogViewer({
   logs,
   loading,
   currentPage,
@@ -67,7 +68,7 @@ export default function AuditLogTable({
   sortField,
   sortDirection,
   onSort,
-}: AuditLogTableProps) {
+}: LogViewerProps) {
   const [period, setPeriod] = useState("all");
   const [showExportMenu, setShowExportMenu] = useState(false);
   const { clientConfigs } = useDashboard();
@@ -260,15 +261,19 @@ export default function AuditLogTable({
                         key={log.id}
                         className="border-b border-white/5 hover:bg-white/10 transition-colors even:bg-white/[0.02] group/row"
                       >
-                        <td className="py-4 px-3 text-neutral-300 group-hover/row:text-white transition-colors">
-                          {log.date}
+                        <td className="py-4 px-3 text-neutral-300">
+                          {log.date
+                            ? new Date(log.date).toLocaleString()
+                            : "N/A"}
                         </td>
                         <td className="py-4 px-3 text-white font-medium">
                           <div className="flex items-center gap-2">
                             {icon && (
-                              <img
+                              <Image
                                 src={icon}
                                 alt={displayName}
+                                width={20}
+                                height={20}
                                 className="w-5 h-5 object-contain"
                               />
                             )}
@@ -283,7 +288,7 @@ export default function AuditLogTable({
                         </td>
                         <td className="py-4 px-3">
                           <span
-                            className={`px-3 py-1 rounded-full text-xs font-medium border ${config.bg} ${config.text} ${config.border}`}
+                            className={`status-pill px-3 py-1 rounded-full text-xs font-medium border ${config.bg} ${config.text} ${config.border}`}
                           >
                             {log.status}
                           </span>