@cybermem/dashboard 0.1.0 → 0.5.1

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

@@ -5,6 +5,7 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { useDashboard } from "@/lib/data/dashboard-context"
 import { Check, Copy, Eye, EyeOff, FileCode, Info, Monitor, X } from "lucide-react"
+import Image from "next/image"
 import { useEffect, useState } from "react"
 
 export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
@@ -18,6 +19,7 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
   const [isKeyVisible, setIsKeyVisible] = useState(false)
   const [showRegenConfirm, setShowRegenConfirm] = useState(false)
   const [regenInputValue, setRegenInputValue] = useState("")
+  const [isManaged, setIsManaged] = useState(false) // true = local mode, no API key needed
 
   useEffect(() => {
     // Try to get key from local storage first (simulating persistence)
@@ -30,7 +32,8 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
         .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`
+                const port = srvEndpoint.split(':').pop()?.split('/')[0] || '8626'
+                srvEndpoint = `${window.location.protocol}//${window.location.hostname}:${port}`
             }
             setBaseUrl(srvEndpoint)
             setIsLoading(false)
@@ -41,9 +44,11 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
           .then(res => res.json())
           .then(data => {
             setApiKey(data.apiKey !== 'not-set' ? data.apiKey : '')
+            setIsManaged(data.isManaged || false)
             let srvEndpoint = data.endpoint
             if (srvEndpoint.includes('localhost') && typeof window !== "undefined" && !window.location.hostname.includes('localhost')) {
-               srvEndpoint = `${window.location.protocol}//${window.location.hostname}:8080`
+                const port = srvEndpoint.split(':').pop()?.split('/')[0] || '8626'
+                srvEndpoint = `${window.location.protocol}//${window.location.hostname}:${port}`
             }
             setBaseUrl(srvEndpoint)
             setIsLoading(false)
@@ -81,6 +86,19 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
     const isAntigravity = clientId === 'antigravity'
     const urlKey = isAntigravity ? 'serverUrl' : 'url'
 
+    // Local mode: use stdio (command-based) - no server needed, runs via npx
+    if (isManaged) {
+      return {
+        mcpServers: {
+          cybermem: {
+            command: "npx",
+            args: ["@cybermem/mcp-core"]
+          }
+        }
+      }
+    }
+
+    // Remote mode: use SSE URL with API key header
     return {
       mcpServers: {
         cybermem: {
@@ -100,27 +118,39 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
 
     // Handle TOML config (Codex)
     if (config?.configType === 'toml') {
+      if (isManaged) {
+        return `# CyberMem Configuration (Local Mode)\n[mcp]\ncommand = "npx"\nargs = ["@cybermem/mcp-core"]`;
+      }
       return `# CyberMem Configuration\n[mcp]\nserver_url = "${baseUrl}/mcp"\napi_key = "${maskKey ? displayKey : actualKey}"`;
     }
 
     // Handle command-based configs (Claude Code, Gemini CLI, etc.)
-    if ((config?.configType === 'command' || config?.configType === 'cmd') && config?.command) {
-      let cmd = config.command.replace("http://localhost:8080", baseUrl);
+    if ((config?.configType === 'command' || config?.configType === 'cmd')) {
+      // Select command based on mode
+      let cmd = isManaged ? config?.localCommand : config?.remoteCommand;
+
+      // Fallback to legacy 'command' field if new fields not present
+      if (!cmd) {
+        cmd = config?.command?.replace("http://localhost:8080", baseUrl) || '';
+      }
 
-      // Add API key as header if it's missing and it's a CLI that usually supports it
-      if (config.id === 'claude-code' || config.id === 'gemini-cli') {
+      // Substitute {{ENDPOINT}} placeholder with actual endpoint
+      cmd = cmd.replace('{{ENDPOINT}}', `${baseUrl}/mcp`);
+
+      // Remote mode - inject API key for SSE transport commands
+      if (!isManaged && cmd.includes('--transport sse')) {
         const headerPart = `--header "x-api-key: ${maskKey ? displayKey : actualKey}"`;
         if (!cmd.includes('x-api-key')) {
-          // Insert before transport or just at the end
           cmd = cmd.replace('mcp add', `mcp add ${headerPart}`);
         }
       }
+
       return cmd;
     }
 
     // Default to JSON config
     const jsonConfig = getMcpConfig(selectedClient);
-    if (maskKey) {
+    if (!isManaged && maskKey) {
       (jsonConfig.mcpServers.cybermem as any).headers["x-api-key"] = displayKey;
     }
     return JSON.stringify(jsonConfig, null, 2);
@@ -193,7 +223,7 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
         <div className="flex items-center justify-between px-6 pt-6 pb-2 flex-none">
           <div className="flex items-center gap-3">
               <div className="p-2 bg-white/5 rounded-lg border border-white/10 shadow-inner">
-                <img src="/icons/mcp.png" alt="MCP Logo" className="w-5 h-5 drop-shadow-[0_0_5px_rgba(255,255,255,0.3)]" />
+                <Image src="/icons/mcp.png" alt="MCP Logo" width={20} height={20} className="drop-shadow-[0_0_5px_rgba(255,255,255,0.3)]" />
               </div>
               <h2 className="text-xl font-semibold text-white text-shadow-sm">Integrate MCP Client</h2>
           </div>
@@ -231,7 +261,7 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
                   >
                     <div className="mb-2 transition-transform duration-300 group-hover:scale-110">
                        {client.icon ? (
-                         <img src={client.icon} alt={client.name} className="w-8 h-8 object-contain drop-shadow-lg" />
+                         <Image src={client.icon} alt={client.name} width={32} height={32} className="object-contain drop-shadow-lg" />
                        ) : (
                          <div className="w-8 h-8 flex items-center justify-center text-white/50 bg-white/5 rounded-full border border-white/10 transition-transform duration-300">
                            <span className="text-sm font-bold">?</span>
@@ -262,7 +292,8 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
 
                 {renderInstructions()}
 
-                {/* API Key Control Row (Standardized) */}
+                {/* API Key Control Row - Only show in remote mode */}
+                {!isManaged ? (
                 <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 mb-4">
                   <div className="space-y-2">
                     <Label htmlFor="mcp-api-key" className="text-neutral-200">Master API Key</Label>
@@ -338,6 +369,17 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
                     </div>
                   </div>
                 </div>
+                ) : (
+                <div className="bg-emerald-500/5 border border-emerald-500/20 rounded-lg p-4 mb-4">
+                  <div className="flex items-start gap-3">
+                    <Info className="h-4 w-4 shrink-0 text-emerald-400 mt-0.5" />
+                    <div className="space-y-1">
+                      <p className="text-sm font-medium text-emerald-200">Local Mode Active</p>
+                      <p className="text-xs text-emerald-200/60">No API key required for connection from your laptop. Just copy the config below.</p>
+                    </div>
+                  </div>
+                </div>
+                )}
 
                 <div className="relative group">
                   <div className="relative pl-5 py-5 pr-24 rounded-lg bg-[#0F161C] border border-white/10 font-mono text-xs md:text-sm text-white overflow-x-auto shadow-[0_0_20px_rgba(0,0,0,0.3)] inset-shadow">
@@ -365,12 +407,14 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
                   </div>
                 </div>
 
-                <div className="flex items-start gap-3 p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/10 text-emerald-200/70 text-xs">
+                {!isManaged && (
+                <div className="flex items-start gap-3 p-3 rounded-lg bg-emerald-500/5 border border-emerald-500/10 text-emerald-200/70 text-xs mt-4">
                   <Info className="h-4 w-4 shrink-0 text-white mt-0.5" />
                   <p>
                     This configuration includes your generated API key. Keep it secure and do not share it publicly.
                   </p>
                 </div>
+                )}
              </div>
           </section>
         </div>

package/components/dashboard/metrics-grid.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { Card, CardContent } from "@/components/ui/card"
+import { useDashboard } from "@/lib/data/dashboard-context"
 import MetricCard from "./metric-card"
 
 // Types
@@ -29,7 +30,19 @@ interface MetricsGridProps {
   }
 }
 
+
 export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
+  const { clientConfigs } = useDashboard()
+
+  const getClientDisplayName = (rawName: string) => {
+    if (!rawName || rawName === "N/A" || rawName === "unknown") return rawName
+
+    const nameLower = rawName.toLowerCase()
+    // Find matching client config (e.g. "antigravity" matches "antigravity-client")
+    const config = clientConfigs.find((c: any) => nameLower.includes(c.match))
+    return config ? config.name : rawName
+  }
+
   const formatTimestamp = (timestamp: number) => {
     if (timestamp <= 0) return "No activity"
     const date = new Date(timestamp)
@@ -86,7 +99,7 @@ export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
       <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden">
         <CardContent className="pt-6 pb-6 relative">
           <div className="text-sm font-medium text-slate-400 mb-2">Top Writer</div>
-          <div className="text-4xl font-bold text-white mb-1 truncate">{stats.topWriter.name}</div>
+          <div className="text-4xl font-bold text-white mb-1 truncate">{getClientDisplayName(stats.topWriter.name)}</div>
           <div className="text-xl text-white/80 whitespace-nowrap">
             {stats.topWriter.count > 0 ? `${stats.topWriter.count.toLocaleString()} writes` : ""}
           </div>
@@ -98,7 +111,7 @@ export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
         <CardContent className="pt-6 pb-6 relative">
           <div className="text-sm font-medium text-slate-400 mb-2">Top Reader</div>
           <div className="text-4xl font-bold text-white mb-1 truncate">
-            {stats.topReader.count > 0 ? stats.topReader.name : "N/A"}
+            {stats.topReader.count > 0 ? getClientDisplayName(stats.topReader.name) : "N/A"}
           </div>
           <div className="text-xl text-white/80 whitespace-nowrap">
             {stats.topReader.count > 0 ? `${stats.topReader.count.toLocaleString()} reads` : ""}
@@ -111,7 +124,7 @@ export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
         <CardContent className="pt-6 pb-6 relative">
           <div className="text-sm font-medium text-slate-400 mb-2">Last Writer</div>
           <div className="text-4xl font-bold text-white mb-1 truncate">
-            {stats.lastWriter.name !== "N/A" ? stats.lastWriter.name : "N/A"}
+            {stats.lastWriter.name !== "N/A" ? getClientDisplayName(stats.lastWriter.name) : "N/A"}
           </div>
           <div className="text-xl text-white/80 whitespace-nowrap">
             {stats.lastWriter.timestamp > 0 ? formatTimestamp(stats.lastWriter.timestamp) : "No activity"}
@@ -124,7 +137,7 @@ export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
         <CardContent className="pt-6 pb-6 relative">
           <div className="text-sm font-medium text-slate-400 mb-2">Last Reader</div>
           <div className="text-4xl font-bold text-white mb-1 truncate">
-            {stats.lastReader.name !== "N/A" ? stats.lastReader.name : "N/A"}
+            {stats.lastReader.name !== "N/A" ? getClientDisplayName(stats.lastReader.name) : "N/A"}
           </div>
           <div className="text-xl text-white/80 whitespace-nowrap">
             {stats.lastReader.timestamp > 0 ? formatTimestamp(stats.lastReader.timestamp) : "No activity"}

package/components/dashboard/password-alert-modal.tsx

@@ -0,0 +1,72 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { AlertTriangle, Settings, X } from "lucide-react"
+
+interface PasswordAlertModalProps {
+  onChangePassword: () => void
+  onDismiss: () => void
+}
+
+export default function PasswordAlertModal({
+  onChangePassword,
+  onDismiss
+}: PasswordAlertModalProps) {
+  const handleDontShowAgain = () => {
+    localStorage.setItem("hidePasswordWarning", "true")
+    onDismiss()
+  }
+
+  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]/90 backdrop-blur-xl border border-amber-500/30 rounded-2xl shadow-2xl max-w-md w-full overflow-hidden animate-in fade-in zoom-in-95 duration-200"
+        style={{
+          backgroundImage: `
+            radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.05) 0%, transparent 50%),
+            radial-gradient(circle at 100% 100%, rgba(251, 191, 36, 0.05) 0%, transparent 50%)
+          `
+        }}
+      >
+        {/* Header */}
+        <div className="px-6 pt-6 pb-4 flex items-start gap-4">
+          <div className="p-3 bg-amber-500/10 rounded-full border border-amber-500/20 shrink-0">
+            <AlertTriangle className="w-6 h-6 text-amber-400 drop-shadow-[0_0_10px_rgba(251,191,36,0.5)]" />
+          </div>
+          <div className="flex-1">
+            <h2 className="text-lg font-semibold text-white">Default Password Detected</h2>
+            <p className="text-neutral-400 text-sm mt-1">
+              You&apos;re using the default admin password. For security, we recommend changing it now.
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onDismiss}
+            className="text-neutral-400 hover:text-white hover:bg-white/10 rounded-full -mt-1 -mr-2"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {/* Actions */}
+        <div className="px-6 pb-6 flex flex-col gap-3">
+          <Button
+            onClick={onChangePassword}
+            className="w-full bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/20 text-emerald-400 font-medium transition-colors gap-2"
+          >
+            <Settings className="w-4 h-4" />
+            Change Password
+          </Button>
+          <Button
+            variant="ghost"
+            onClick={handleDontShowAgain}
+            className="w-full text-neutral-400 hover:text-white hover:bg-white/10"
+          >
+            Don&apos;t show again
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}