@cybermem/dashboard 0.8.5 → 0.8.9

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>
+  );
+}