@cybermem/dashboard 0.8.5 → 0.8.9

package/Dockerfile

@@ -28,7 +28,7 @@ RUN --mount=type=cache,target=/root/.pnpm-store \
 
 # Production stage
 FROM node:20-alpine AS production
-RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache libc6-compat python3 make g++
 WORKDIR /app
 
 ENV NODE_ENV=production

package/app/api/environment/route.ts

@@ -0,0 +1,73 @@
+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}/cybermem`,
+      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) {
+    const formattedUrl = publicUrl.endsWith("/")
+      ? publicUrl.slice(0, -1)
+      : publicUrl;
+    return NextResponse.json({
+      url: `${formattedUrl}/cybermem`,
+      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}/cybermem`,
+      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}/cybermem`,
+      type: "ip",
+      editable: true,
+      hint: "Detected IP-based access",
+    });
+  }
+
+  // Default to localhost
+  return NextResponse.json({
+    url: `http://localhost:${MCP_PORT}/cybermem`,
+    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) => {