@cybermem/dashboard 0.8.5 → 0.8.7

package/app/api/environment/route.ts

@@ -0,0 +1,70 @@
+import { NextResponse } from "next/server";
+
+/**
+ * Environment detection API for dynamic MCP URL configuration
+ *
+ * Priority:
+ * 1. Tailscale hostname (if TAILSCALE_HOSTNAME env var is set)
+ * 2. LAN .local domain (if raspberrypi.local or similar)
+ * 3. VPS public URL (if CYBERMEM_PUBLIC_URL env var is set)
+ * 4. localhost:8626 (fallback)
+ */
+export async function GET(request: Request) {
+  const MCP_PORT = process.env.MCP_PORT || "8626";
+
+  // Check for Tailscale hostname first (highest priority for remote access)
+  const tailscaleHostname = process.env.TAILSCALE_HOSTNAME;
+  if (tailscaleHostname) {
+    return NextResponse.json({
+      url: `https://${tailscaleHostname}`,
+      type: "tailscale",
+      editable: false,
+      hint: "Using Tailscale Funnel for secure remote access",
+    });
+  }
+
+  // Check for VPS public URL
+  const publicUrl = process.env.CYBERMEM_PUBLIC_URL;
+  if (publicUrl) {
+    return NextResponse.json({
+      url: publicUrl,
+      type: "vps",
+      editable: true,
+      hint: "Configure CYBERMEM_PUBLIC_URL to change this URL",
+    });
+  }
+
+  // Detect from request headers (for LAN access)
+  const host = request.headers.get("host") || "";
+
+  // Check if accessing via .local domain (Raspberry Pi LAN)
+  if (host.includes(".local")) {
+    const hostname = host.split(":")[0];
+    return NextResponse.json({
+      url: `http://${hostname}:${MCP_PORT}`,
+      type: "lan",
+      editable: false,
+      hint: "Detected LAN access via mDNS (.local)",
+    });
+  }
+
+  // Check if accessing via IP address (likely LAN or VPS)
+  const ipMatch = host.match(/^(\d+\.\d+\.\d+\.\d+)/);
+  if (ipMatch) {
+    const protocol = request.headers.get("x-forwarded-proto") || "http";
+    return NextResponse.json({
+      url: `${protocol}://${ipMatch[1]}:${MCP_PORT}`,
+      type: "ip",
+      editable: true,
+      hint: "Detected IP-based access",
+    });
+  }
+
+  // Default to localhost
+  return NextResponse.json({
+    url: `http://localhost:${MCP_PORT}`,
+    type: "local",
+    editable: false,
+    hint: "Running locally",
+  });
+}

package/app/api/settings/route.ts

@@ -6,6 +6,51 @@ export const dynamic = "force-dynamic";
 
 const CONFIG_PATH = "/data/config.json";
 
+// Detect the correct MCP endpoint based on request host
+function getMcpEndpoint(request: NextRequest): {
+  endpoint: string;
+  isLocal: boolean;
+} {
+  const host = request.headers.get("host") || "localhost:3000";
+  const hostname = host.split(":")[0];
+
+  // Priority 1: Explicit env var
+  if (process.env.CYBERMEM_URL) {
+    return { endpoint: process.env.CYBERMEM_URL, isLocal: false };
+  }
+
+  // Priority 2: Tailscale domain (from env or detect)
+  const tailscaleDomain = process.env.TAILSCALE_DOMAIN;
+
+  // Priority 3: Based on request host
+  if (hostname === "localhost" || hostname === "127.0.0.1") {
+    // Local development
+    return { endpoint: "http://localhost:8626/mcp", isLocal: true };
+  }
+
+  if (hostname.endsWith(".local")) {
+    // LAN access (raspberrypi.local)
+    // If Tailscale domain is available, prefer it for remote config
+    if (tailscaleDomain) {
+      return {
+        endpoint: `https://${tailscaleDomain}/cybermem/mcp`,
+        isLocal: false,
+        // Also provide LAN endpoint as fallback
+      };
+    }
+    return { endpoint: `http://${hostname}:8626/mcp`, isLocal: true };
+  }
+
+  if (hostname.includes(".ts.net")) {
+    // Tailscale Funnel access
+    return { endpoint: `https://${hostname}/cybermem/mcp`, isLocal: false };
+  }
+
+  // Fallback: use request host
+  const protocol = request.headers.get("x-forwarded-proto") || "http";
+  return { endpoint: `${protocol}://${hostname}:8626/mcp`, isLocal: false };
+}
+
 export async function GET(request: NextRequest) {
   // Rate limiting check
   const rateLimit = checkRateLimit(request);
@@ -32,17 +77,11 @@ export async function GET(request: NextRequest) {
     // ignore
   }
 
-  // Endpoint resolution:
-  // 1. Env var CYBERMEM_URL
-  // 2. Default to localhost:8088/memory (Managed Mode)
-  const rawEndpoint = process.env.CYBERMEM_URL;
-  const endpoint = rawEndpoint || "http://localhost:8626/memory";
-  // isManaged = Local Mode (No Auth). Only if NO URL and NO API KEY.
-  // If API Key is present (RPi), we are in "Secure/Legacy" mode, not Local.
-  // In local development, rawEndpoint might be unset, but we still want to not be "managed" if we want to test auth flows.
-  const isManaged =
-    !rawEndpoint &&
-    (!process.env.OM_API_KEY || process.env.OM_API_KEY === "dev-secret-key");
+  // Get dynamic endpoint based on request host
+  const { endpoint, isLocal } = getMcpEndpoint(request);
+
+  // isManaged = Local Mode (localhost auto-login)
+  const isManaged = isLocal;
 
   return NextResponse.json(
     {
@@ -50,8 +89,9 @@ export async function GET(request: NextRequest) {
       apiKey: apiKey,
       endpoint,
       isManaged,
-      dashboardVersion: "v0.7.5",
-      mcpVersion: "v0.7.5",
+      isLocal,
+      dashboardVersion: "v0.8.0",
+      mcpVersion: "v0.8.0",
     },
     {
       headers: {

package/app/layout.tsx

@@ -3,6 +3,7 @@ import { Analytics } from "@vercel/analytics/next";
 import type { Metadata } from "next";
 import { Exo_2, Geist, Geist_Mono } from "next/font/google";
 import type React from "react";
+import { Toaster } from "sonner";
 import "./globals.css";
 
 const _geist = Geist({ subsets: ["latin"] });
@@ -38,6 +39,7 @@ export default async function RootLayout({
         <DashboardProvider initialAuth={initialAuth}>
           {children}
         </DashboardProvider>
+        <Toaster richColors theme="dark" position="bottom-right" />
         <Analytics />
       </body>
     </html>

package/app/page.tsx

@@ -6,7 +6,6 @@ import DashboardHeader from "@/components/dashboard/header";
 import LoginModal from "@/components/dashboard/login-modal";
 import MCPConfigModal from "@/components/dashboard/mcp-config-modal";
 import MetricsGrid from "@/components/dashboard/metrics-grid";
-import PasswordAlertModal from "@/components/dashboard/password-alert-modal";
 import SettingsModal from "@/components/dashboard/settings-modal";
 import { useDashboard } from "@/lib/data/dashboard-context";
 import { DashboardData } from "@/lib/data/types";
@@ -27,8 +26,6 @@ export default function Dashboard() {
 
   const [showMCPConfig, setShowMCPConfig] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
-  const [showPasswordAlert, setShowPasswordAlert] = useState(false);
-  const [focusPasswordField, setFocusPasswordField] = useState(false);
 
   // Data State
   const [data, setData] = useState<DashboardData>({
@@ -53,27 +50,8 @@ export default function Dashboard() {
 
   // Auth is handled by context (Layout passes initial state from headers)
 
-  const handleLogin = (password: string) => {
+  const handleLogin = (token: string) => {
     login();
-
-    // Check if using default password and warning not dismissed
-    const hasCustomPassword = localStorage.getItem("adminPassword") !== null;
-    const warningDismissed =
-      localStorage.getItem("hidePasswordWarning") === "true";
-
-    if (!hasCustomPassword && !warningDismissed) {
-      setShowPasswordAlert(true);
-    }
-  };
-
-  const handlePasswordAlertChange = () => {
-    setShowPasswordAlert(false);
-    setFocusPasswordField(true);
-    setShowSettings(true);
-  };
-
-  const handlePasswordAlertDismiss = () => {
-    setShowPasswordAlert(false);
   };
 
   // Fetch Data Effect - Reacts to strategy change or refresh signal
@@ -183,20 +161,7 @@ export default function Dashboard() {
       {showMCPConfig && (
         <MCPConfigModal onClose={() => setShowMCPConfig(false)} />
       )}
-      {showSettings && (
-        <SettingsModal
-          onClose={() => {
-            setShowSettings(false);
-            setFocusPasswordField(false);
-          }}
-        />
-      )}
-      {showPasswordAlert && (
-        <PasswordAlertModal
-          onChangePassword={handlePasswordAlertChange}
-          onDismiss={handlePasswordAlertDismiss}
-        />
-      )}
+      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} />}
     </div>
   );
 }

package/components/dashboard/login-modal.tsx

@@ -1,32 +1,62 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Lock, LogIn } from "lucide-react"
-import { useState } from "react"
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { TintButton } from "@/components/ui/tint-button";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { HelpCircle, Key, LogIn } from "lucide-react";
+import { useEffect, useState } from "react";
 
 interface LoginModalProps {
-  onLogin: (password: string) => void
+  onLogin: (token: string) => void;
 }
 
 export default function LoginModal({ onLogin }: LoginModalProps) {
-  const [password, setPassword] = useState("")
-  const [error, setError] = useState("")
+  const [token, setToken] = useState("");
+  const [error, setError] = useState("");
+  const [isLocal, setIsLocal] = useState(true);
+
+  useEffect(() => {
+    // Auto-login on localhost
+    const hostname = window.location.hostname;
+    const local =
+      hostname === "localhost" ||
+      hostname === "127.0.0.1" ||
+      hostname.includes("raspberrypi.local") ||
+      hostname.endsWith(".local");
+    setIsLocal(local);
+
+    if (local) {
+      // Auto-login for local access
+      onLogin("local-bypass");
+    }
+  }, [onLogin]);
 
   const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
+    e.preventDefault();
 
-    // Get admin password from localStorage or use default
-    const adminPassword = localStorage.getItem("adminPassword") || "admin"
+    if (!token.trim()) {
+      setError("Please enter your API token");
+      return;
+    }
 
-    if (password === adminPassword) {
-      onLogin(password)
-      setError("")
-    } else {
-      setError("Incorrect password")
-      setPassword("")
+    if (!token.startsWith("sk-")) {
+      setError("Token should start with 'sk-'");
+      return;
     }
+
+    // For remote access, use the token
+    onLogin(token);
+    setError("");
+  };
+
+  // Don't show modal for local access (auto-login)
+  if (isLocal) {
+    return null;
   }
 
   return (
@@ -39,45 +69,87 @@ export default function LoginModal({ onLogin }: LoginModalProps) {
             radial-gradient(circle at 100% 0%, oklch(0.6 0 0 / 0.05) 0%, transparent 50%),
             radial-gradient(circle at 100% 100%, oklch(0.65 0 0 / 0.05) 0%, transparent 50%),
             radial-gradient(circle at 0% 100%, oklch(0.6 0 0 / 0.05) 0%, transparent 50%)
-          `
+          `,
         }}
       >
         {/* Header */}
         <div className="px-6 pt-8 pb-6 text-center">
           <div className="inline-flex p-3 bg-emerald-500/10 rounded-full border border-emerald-500/20 mb-4">
-            <Lock className="w-8 h-8 text-emerald-400 drop-shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
+            <Key className="w-8 h-8 text-emerald-400 drop-shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
           </div>
-          <h2 className="text-2xl font-bold text-white text-shadow-sm mb-2">CyberMem Dashboard</h2>
-          <p className="text-neutral-400 text-sm">Enter admin password to continue</p>
+          <h2 className="text-2xl font-bold text-white text-shadow-sm mb-2">
+            CyberMem Dashboard
+          </h2>
+          <p className="text-neutral-400 text-sm">
+            Remote access requires API token authentication
+          </p>
         </div>
 
         {/* Content */}
         <form onSubmit={handleSubmit} className="px-6 pb-6 space-y-4">
           <div className="space-y-2">
-            <Label htmlFor="password" className="text-neutral-200">Password</Label>
+            <div className="flex items-center gap-2">
+              <Label htmlFor="token" className="text-neutral-200">
+                API Token
+              </Label>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    className="text-neutral-500 hover:text-emerald-400 transition-colors"
+                  >
+                    <HelpCircle className="w-4 h-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-xs bg-neutral-900 border-neutral-700 text-neutral-200">
+                  <p className="text-xs">
+                    Find your token in{" "}
+                    <code className="text-emerald-400">~/.cybermem/.env</code>{" "}
+                    or check the terminal output from{" "}
+                    <code className="text-emerald-400">cybermem up</code>
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </div>
             <Input
-              id="password"
+              id="token"
               type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder="Enter admin password"
-              className="bg-black/40 border-white/10 text-white focus-visible:border-emerald-500/30 focus-visible:ring-emerald-500/10 placeholder:text-neutral-600 shadow-inner"
+              value={token}
+              onChange={(e) => setToken(e.target.value)}
+              placeholder="sk-xxxxxxxxxxxxxxxx"
+              className="bg-black/40 border-white/10 text-white focus-visible:border-emerald-500/30 focus-visible:ring-emerald-500/10 placeholder:text-neutral-600 shadow-inner font-mono"
               autoFocus
             />
-            {error && (
-              <p className="text-red-400 text-sm mt-2">{error}</p>
-            )}
+            {error && <p className="text-red-400 text-sm mt-2">{error}</p>}
           </div>
 
-          <Button
+          <TintButton
             type="submit"
-            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"
+            tint="emerald"
+            variant="solid"
+            className="w-full h-11"
           >
             <LogIn className="w-4 h-4" />
-            Login
-          </Button>
+            Login with Token
+          </TintButton>
+
+          <div className="text-xs text-neutral-500 text-center pt-2 space-y-1">
+            <p>
+              <strong className="text-neutral-400">
+                Where to find your token:
+              </strong>
+            </p>
+            <p>
+              1. Open Dashboard from{" "}
+              <code className="text-emerald-400/80">localhost:3000</code> or{" "}
+              <code className="text-emerald-400/80">
+                raspberrypi.local:3000
+              </code>
+            </p>
+            <p>2. Go to Settings → Access Token → Copy</p>
+          </div>
         </form>
       </div>
     </div>
-  )
+  );
 }

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

@@ -5,17 +5,18 @@ 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,
+    Check,
+    Copy,
+    Eye,
+    EyeOff,
+    FileCode,
+    Info,
+    Monitor,
+    X,
 } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 
 export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
   const { clientConfigs } = useDashboard();
@@ -93,9 +94,14 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
       setIsKeyVisible(true);
       setShowRegenConfirm(false);
       setRegenInputValue("");
+      toast.success("Token Regenerated!", {
+        description: "All existing client connections will need to be updated.",
+      });
     } catch (e) {
       console.error(e);
-      alert("Failed to regenerate key on server.");
+      toast.error("Failed to regenerate token", {
+        description: "Please check if the server is running.",
+      });
     }
   };
 
@@ -112,7 +118,7 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
       };
     }
 
-    // Remote mode: use stdio with --url and --token args (universal for all clients)
+    // Remote mode: use stdio with --url and --token
     return {
       mcpServers: {
         cybermem: {
@@ -165,14 +171,6 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
 
     // Default to JSON config
     const jsonConfig = getMcpConfig(selectedClient);
-    if (!isManaged && maskKey) {
-      // Mask the token in args array
-      const args = (jsonConfig.mcpServers.cybermem as any).args;
-      const tokenIdx = args.indexOf("--token");
-      if (tokenIdx !== -1 && args[tokenIdx + 1]) {
-        args[tokenIdx + 1] = displayKey;
-      }
-    }
     return JSON.stringify(jsonConfig, null, 2);
   };
 
@@ -180,6 +178,7 @@ export default function MCPConfigModal({ onClose }: { onClose: () => void }) {
     navigator.clipboard.writeText(text);
     setCopiedId(id);
     setTimeout(() => setCopiedId(null), 2000);
+    toast.success("Copied to clipboard!");
   };
 
   const highlightJSON = (obj: any) => {

package/components/dashboard/settings-modal.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { Button } from "@/components/ui/button";
+import { ConfirmationModal } from "@/components/ui/confirmation-modal";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { TintButton } from "@/components/ui/tint-button";
 import { useDashboard } from "@/lib/data/dashboard-context";
 import {
     Check,
@@ -11,7 +13,6 @@ import {
     Download,
     Eye,
     EyeOff,
-    Key,
     Loader2,
     RotateCcw,
     Server,
@@ -22,20 +23,17 @@ import {
     X,
 } from "lucide-react";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 
 export default function SettingsModal({ onClose }: { onClose: () => void }) {
   const [apiKey, setApiKey] = useState("");
   const [endpoint, setEndpoint] = useState("");
   const [isManaged, setIsManaged] = useState(false);
-  const [adminPassword, setAdminPassword] = useState(
-    localStorage.getItem("adminPassword") || "admin",
-  );
   const [settings, setSettings] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
 
   const { isDemo, toggleDemo } = useDashboard();
   const [showApiKey, setShowApiKey] = useState(false);
-  const [showAdminPassword, setShowAdminPassword] = useState(false);
 
   const [showRegenConfirm, setShowRegenConfirm] = useState(false);
   const [regenInputValue, setRegenInputValue] = useState("");
@@ -55,6 +53,7 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
     navigator.clipboard.writeText(text);
     setCopiedId(id);
     setTimeout(() => setCopiedId(null), 2000);
+    toast.success("Copied to clipboard!");
   };
 
   // Fetch settings from server
@@ -105,16 +104,19 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
       setShowApiKey(true);
       setShowRegenConfirm(false);
       setRegenInputValue("");
+      toast.success("Token Regenerated!", {
+        description: "All connected clients will need to be updated.",
+      });
     } catch (e) {
       console.error(e);
-      alert("Failed to regenerate key on server.");
+      toast.error("Failed to regenerate token");
     }
   };
 
   const [saved, setSaved] = useState(false);
 
   const handleSave = () => {
-    localStorage.setItem("adminPassword", adminPassword);
+    // Settings saved
     setSaved(true);
     setTimeout(() => setSaved(false), 2000);
   };
@@ -243,92 +245,90 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
 
         {/* Content */}
         <div className="p-6 space-y-6">
-          {/* Security */}
+          {/* Access Token */}
           <section>
             <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
               <Shield className="w-5 h-5" />
-              Security
+              Access Token
             </h3>
             <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">
+              {/* Token Display with inline regenerate */}
               <div className="space-y-2">
-                <Label htmlFor="admin-password">Admin Password</Label>
-                <div className="relative">
-                  <Input
-                    id="admin-password"
-                    value={adminPassword}
-                    onChange={(e) => setAdminPassword(e.target.value)}
-                    className="bg-black/40 border-white/10 text-white"
-                    type={showAdminPassword ? "text" : "password"}
-                  />
-                  <button
-                    onClick={() => setShowAdminPassword(!showAdminPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white"
+                <Label htmlFor="access-token">Your Access Token</Label>
+                <div className="flex gap-2">
+                  <div className="relative flex-1">
+                    <Input
+                      id="access-token"
+                      value={apiKey || "Token not generated yet"}
+                      readOnly
+                      className="bg-black/40 border-white/10 text-white font-mono text-sm pr-10"
+                      type={showApiKey ? "text" : "password"}
+                    />
+                    <button
+                      onClick={() => setShowApiKey(!showApiKey)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white"
+                    >
+                      {showApiKey ? (
+                        <EyeOff className="w-4 h-4" />
+                      ) : (
+                        <Eye className="w-4 h-4" />
+                      )}
+                    </button>
+                  </div>
+                  <TintButton
+                    tint="neutral"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => copyToClipboard(apiKey, "accesstoken")}
+                    title="Copy token"
                   >
-                    {showAdminPassword ? (
-                      <EyeOff className="w-4 h-4" />
+                    {copiedId === "accesstoken" ? (
+                      <Check className="h-4 w-4 text-emerald-400" />
                     ) : (
-                      <Eye className="w-4 h-4" />
+                      <Copy className="h-4 w-4" />
                     )}
-                  </button>
+                  </TintButton>
+                  <TintButton
+                    tint="yellow"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setShowRegenConfirm(true)}
+                    title="Regenerate token"
+                  >
+                    <RotateCcw className="w-4 h-4" />
+                  </TintButton>
                 </div>
+                <p className="text-xs text-neutral-500">
+                  Use this token to connect MCP clients from other devices
+                </p>
               </div>
 
-              {/* Authentication Status */}
-              <div className="space-y-2 pt-4 border-t border-white/10">
-                <Label>Authentication Method</Label>
+              {/* Auth Status */}
+              <div className="pt-4 border-t border-white/10">
                 <div className="flex items-center gap-3 p-3 bg-black/20 rounded-lg border border-white/5">
-                  {/* Show different states based on auth method */}
                   {isManaged ? (
                     <>
                       <div className="w-2 h-2 bg-emerald-400 rounded-full animate-pulse" />
                       <div className="flex-1">
                         <p className="text-sm text-emerald-300 font-medium">
-                          Local Mode
+                          Local Mode Active
                         </p>
                         <p className="text-xs text-neutral-500">
-                          Auto-authenticated local connection
+                          No token needed for local connections
                         </p>
                       </div>
                     </>
-                  ) : apiKey ? (
+                  ) : (
                     <>
                       <div className="w-2 h-2 bg-yellow-400 rounded-full" />
                       <div className="flex-1">
                         <p className="text-sm text-yellow-300 font-medium">
-                          Security Token
+                          Remote Mode
                         </p>
                         <p className="text-xs text-neutral-500">
-                          Using static token authentication
+                          Token required for MCP client connections
                         </p>
                       </div>
-                      <a
-                        href="https://cybermem.dev/auth/signin"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="px-3 py-1.5 text-xs bg-white/10 hover:bg-white/20 rounded-lg text-white transition-colors"
-                      >
-                        Upgrade to OAuth
-                      </a>
-                    </>
-                  ) : (
-                    <>
-                      <div className="w-2 h-2 bg-neutral-400 rounded-full" />
-                      <div className="flex-1">
-                        <p className="text-sm text-neutral-300 font-medium">
-                          Not Configured
-                        </p>
-                        <p className="text-xs text-neutral-500">
-                          Connect with GitHub for secure access
-                        </p>
-                      </div>
-                      <a
-                        href="https://cybermem.dev/auth/signin"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="px-3 py-1.5 text-xs bg-emerald-500/20 hover:bg-emerald-500/30 border border-emerald-500/20 rounded-lg text-emerald-400 transition-colors"
-                      >
-                        Connect GitHub
-                      </a>
                     </>
                   )}
                 </div>
@@ -336,98 +336,6 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
             </div>
           </section>
 
-          {/* API Configuration */}
-          {!isManaged && (
-            <section>
-              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-                <Key className="w-5 h-5" />
-                Token Configuration
-              </h3>
-              <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">
-                <div className="space-y-2">
-                  <Label htmlFor="api-key">Security Token</Label>
-                  <div className="flex gap-2">
-                    <div className="relative flex-1">
-                      <Input
-                        id="api-key"
-                        value={apiKey || "not-generated-yet"}
-                        readOnly
-                        className="bg-black/40 border-white/10 text-white font-mono"
-                        type={showApiKey ? "text" : "password"}
-                      />
-                      <button
-                        onClick={() => setShowApiKey(!showApiKey)}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-white"
-                      >
-                        {showApiKey ? (
-                          <EyeOff className="w-4 h-4" />
-                        ) : (
-                          <Eye className="w-4 h-4" />
-                        )}
-                      </button>
-                    </div>
-                    <Button
-                      size="icon"
-                      variant="ghost"
-                      onClick={() => copyToClipboard(apiKey, "apikey")}
-                    >
-                      {copiedId === "apikey" ? (
-                        <Check className="h-4 w-4 text-emerald-400" />
-                      ) : (
-                        <Copy className="h-4 w-4" />
-                      )}
-                    </Button>
-                  </div>
-
-                  <div className="flex justify-end pt-2">
-                    {showRegenConfirm ? (
-                      <div className="flex items-center gap-2">
-                        <Input
-                          value={regenInputValue}
-                          onChange={(e) => setRegenInputValue(e.target.value)}
-                          placeholder="Type 'agree'"
-                          className="h-8 w-24 text-xs"
-                        />
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => setShowRegenConfirm(false)}
-                        >
-                          Cancel
-                        </Button>
-                        <Button
-                          size="sm"
-                          disabled={regenInputValue !== "agree"}
-                          onClick={confirmRegenerate}
-                        >
-                          Confirm
-                        </Button>
-                      </div>
-                    ) : (
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => setShowRegenConfirm(true)}
-                      >
-                        Regenerate Key
-                      </Button>
-                    )}
-                  </div>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="endpoint">Server Endpoint</Label>
-                  <Input
-                    id="endpoint"
-                    value={endpoint}
-                    onChange={(e) => setEndpoint(e.target.value)}
-                    className="bg-black/40 border-white/10 text-white"
-                  />
-                </div>
-              </div>
-            </section>
-          )}
-
           {/* Data Management */}
           <section>
             <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
@@ -436,19 +344,20 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
             </h3>
             <div className="flex flex-col gap-3">
               <div className="flex items-center gap-3">
-                <Button
-                  variant="outline"
-                  className="flex-1 justify-center bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-white hover:text-white h-11 px-6 transition-all"
+                <TintButton
+                  tint="neutral"
+                  variant="solid"
+                  className="flex-1 h-11"
                   onClick={handleBackup}
                   disabled={isBackingUp}
                 >
                   {isBackingUp ? (
-                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    <Loader2 className="w-4 h-4 animate-spin" />
                   ) : (
-                    <Download className="w-4 h-4 mr-2 opacity-70" />
+                    <Download className="w-4 h-4" />
                   )}
-                  <span className="font-medium">Backup</span>
-                </Button>
+                  Backup
+                </TintButton>
 
                 <div className="flex-1 relative">
                   <input
@@ -459,72 +368,36 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
                     onChange={handleRestore}
                     disabled={isRestoring}
                   />
-                  <Button
-                    variant="outline"
-                    className="w-full justify-center bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-white hover:text-white h-11 px-6 transition-all"
+                  <TintButton
+                    tint="neutral"
+                    variant="solid"
+                    className="w-full h-11"
                     onClick={() =>
                       document.getElementById("restore-file")?.click()
                     }
                     disabled={isRestoring}
                   >
                     {isRestoring ? (
-                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      <Loader2 className="w-4 h-4 animate-spin" />
                     ) : (
-                      <Upload className="w-4 h-4 mr-2 opacity-70" />
+                      <Upload className="w-4 h-4" />
                     )}
-                    <span className="font-medium">Restore</span>
-                  </Button>
+                    Restore
+                  </TintButton>
                 </div>
 
-                <Button
-                  variant="outline"
-                  className="flex-1 justify-center bg-red-500/5 border-red-500/10 hover:bg-red-500/10 hover:border-red-500/30 text-red-400 hover:text-red-300 h-11 px-6 transition-all"
+                <TintButton
+                  tint="red"
+                  variant="solid"
+                  className="flex-1 h-11"
                   onClick={() => setShowResetConfirm(true)}
                   disabled={isResetting}
                 >
-                  <Trash2 className="w-4 h-4 mr-2 opacity-70" />
-                  <span className="font-medium">Reset DB</span>
-                </Button>
+                  <Trash2 className="w-4 h-4" />
+                  Reset DB
+                </TintButton>
               </div>
 
-              {showResetConfirm && (
-                <div className="p-5 bg-red-500/5 border border-red-500/20 rounded-xl space-y-4 shadow-inner">
-                  <p className="text-xs text-red-400/80 font-bold uppercase tracking-widest text-center">
-                    Danger Zone: This will permanently delete all memories!
-                  </p>
-                  <div className="flex flex-col gap-3">
-                    <Input
-                      value={resetConfirmText}
-                      onChange={(e) => setResetConfirmText(e.target.value)}
-                      placeholder="Type 'RESET' to confirm"
-                      className="h-10 bg-black/40 border-red-500/20 text-white placeholder:text-red-500/20 text-center font-mono focus:border-red-500/40"
-                    />
-                    <div className="flex gap-2">
-                      <Button
-                        className="flex-1 text-neutral-400 hover:text-white hover:bg-white/5"
-                        variant="ghost"
-                        onClick={() => {
-                          setShowResetConfirm(false);
-                          setResetConfirmText("");
-                        }}
-                      >
-                        Cancel
-                      </Button>
-                      <Button
-                        className="flex-1 bg-red-500/80 hover:bg-red-500 text-white shadow-lg active:scale-[0.98] transition-transform"
-                        disabled={resetConfirmText !== "RESET" || isResetting}
-                        onClick={handleReset}
-                      >
-                        {isResetting && (
-                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                        )}
-                        Confirm Reset
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              )}
-
               {operationStatus && (
                 <div
                   className={`p-3 rounded-xl text-sm flex items-center gap-3 animate-in fade-in slide-in-from-top-1 ${
@@ -585,33 +458,42 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
                   <span className="text-[10px] uppercase text-neutral-500 font-bold tracking-[0.2em] block mb-2">
                     Environment
                   </span>
-                  <div className="mt-4 flex flex-col justify-center">
-                    <p className="text-emerald-400 font-bold text-2xl tracking-tight drop-shadow-[0_0_15px_rgba(52,211,153,0.3)]">
-                      Production
-                    </p>
-                    <p className="text-[10px] text-neutral-500 mt-1 uppercase tracking-[0.2em] font-medium">
-                      {settings?.isManaged
-                        ? "Managed Instance"
-                        : "Local Instance"}
-                    </p>
+                  <div className="space-y-3">
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs text-neutral-400">Status</span>
+                      <code className="text-[13px] font-mono text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20">
+                        Production
+                      </code>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <span className="text-xs text-neutral-400">Instance</span>
+                      <code className="text-[13px] font-mono text-neutral-200 bg-white/5 px-2 py-0.5 rounded border border-white/10">
+                        {settings?.isLocal
+                          ? "Local"
+                          : settings?.isManaged
+                            ? "RPi"
+                            : "VPS"}
+                      </code>
+                    </div>
                   </div>
                 </div>
               </div>
 
               <div className="pt-2 border-t border-white/5">
-                <Button
-                  variant="outline"
-                  className="w-full bg-sky-500/5 border-sky-500/10 hover:bg-sky-500/10 hover:border-sky-500/30 text-sky-400 hover:text-sky-300 h-10 transition-all font-medium flex items-center justify-center gap-2 group"
+                <TintButton
+                  tint="sky"
+                  variant="solid"
+                  className="w-full h-10"
                   onClick={handleRestart}
                   disabled={isRestarting}
                 >
                   {isRestarting ? (
                     <Loader2 className="w-4 h-4 animate-spin" />
                   ) : (
-                    <RotateCcw className="w-4 h-4 opacity-70 group-hover:rotate-45 transition-transform" />
+                    <RotateCcw className="w-4 h-4" />
                   )}
                   {isRestarting ? "Restarting..." : "Restart Service"}
-                </Button>
+                </TintButton>
               </div>
             </div>
           </section>
@@ -619,21 +501,42 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
 
         {/* Footer */}
         <div className="sticky bottom-0 bg-[#0B1116]/80 backdrop-blur-md border-t border-emerald-500/20 px-6 py-4 flex justify-end gap-3 z-10">
-          <Button
-            onClick={onClose}
-            variant="ghost"
-            className="text-neutral-400 hover:text-white hover:bg-white/5"
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={handleSave}
-            className="bg-emerald-500/20 hover:bg-emerald-500/30 text-emerald-400 border border-emerald-500/20"
-          >
-            {saved ? "Saved!" : "Save Changes"}
-          </Button>
+          <TintButton tint="neutral" variant="ghost" onClick={onClose}>
+            Close
+          </TintButton>
         </div>
       </div>
+
+      {/* Regenerate Token Confirmation Modal */}
+      <ConfirmationModal
+        isOpen={showRegenConfirm}
+        onClose={() => {
+          setShowRegenConfirm(false);
+          setRegenInputValue("");
+        }}
+        onConfirm={confirmRegenerate}
+        title="Regenerate Access Token"
+        description="This will invalidate your current token. All connected MCP clients will need to be reconfigured with the new token."
+        confirmText="Regenerate"
+        confirmWord="confirm"
+        tint="yellow"
+      />
+
+      {/* Reset Database Confirmation Modal */}
+      <ConfirmationModal
+        isOpen={showResetConfirm}
+        onClose={() => {
+          setShowResetConfirm(false);
+          setResetConfirmText("");
+        }}
+        onConfirm={handleReset}
+        title="Reset Database"
+        description="This will permanently delete ALL memories and cannot be undone. Make sure you have a backup!"
+        confirmText="Reset Database"
+        confirmWord="RESET"
+        tint="red"
+        isLoading={isResetting}
+      />
     </div>
   );
 }

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/package.json

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

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

@@ -1,72 +0,0 @@
-"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>
-  )
-}