@cybermem/dashboard 0.5.14 → 0.8.5

package/components/dashboard/metric-card.tsx

@@ -18,8 +18,7 @@ export default function MetricCard({
   loading = false,
   hasData = true,
 }: MetricCardProps) {
-  const isEmpty =
-    !hasData || value === "N/A" || value === "0" || value === "0.0%";
+  const isValueNA = value === "N/A";
 
   // Skeleton state
   if (loading) {
@@ -33,15 +32,13 @@ export default function MetricCard({
     );
   }
 
-  // Empty state
-  if (isEmpty) {
+  // N/A state
+  if (isValueNA) {
     return (
       <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden relative opacity-60">
         <CardContent className="p-6 relative z-10">
           <div className="text-sm font-medium text-slate-500 mb-2">{label}</div>
-          <div className="text-4xl font-bold text-slate-500">
-            {value === "N/A" ? "N/A" : "—"}
-          </div>
+          <div className="text-4xl font-bold text-slate-500">N/A</div>
         </CardContent>
       </Card>
     );

package/components/dashboard/settings-modal.tsx

@@ -30,6 +30,7 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
   const [adminPassword, setAdminPassword] = useState(
     localStorage.getItem("adminPassword") || "admin",
   );
+  const [settings, setSettings] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
 
   const { isDemo, toggleDemo } = useDashboard();
@@ -66,6 +67,7 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
       .then((data) => {
         // Enforce Local Mode if server says so
         setIsManaged(data.isManaged || false);
+        setSettings(data);
 
         if (localKey && !data.isManaged) {
           setApiKey(localKey);
@@ -284,7 +286,7 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
                           Local Mode
                         </p>
                         <p className="text-xs text-neutral-500">
-                          No authentication required for localhost
+                          Auto-authenticated local connection
                         </p>
                       </div>
                     </>
@@ -293,13 +295,10 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
                       <div className="w-2 h-2 bg-yellow-400 rounded-full" />
                       <div className="flex-1">
                         <p className="text-sm text-yellow-300 font-medium">
-                          API Key
+                          Security Token
                         </p>
                         <p className="text-xs text-neutral-500">
-                          Using legacy API key authentication
-                          <span className="text-yellow-500 ml-1">
-                            (deprecated)
-                          </span>
+                          Using static token authentication
                         </p>
                       </div>
                       <a
@@ -338,20 +337,20 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
           </section>
 
           {/* API Configuration */}
-          {!isManaged ? (
+          {!isManaged && (
             <section>
               <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
                 <Key className="w-5 h-5" />
-                API Configuration
+                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">Master API Key</Label>
+                  <Label htmlFor="api-key">Security Token</Label>
                   <div className="flex gap-2">
                     <div className="relative flex-1">
                       <Input
                         id="api-key"
-                        value={apiKey || "sk-not-generated-yet"}
+                        value={apiKey || "not-generated-yet"}
                         readOnly
                         className="bg-black/40 border-white/10 text-white font-mono"
                         type={showApiKey ? "text" : "password"}
@@ -379,6 +378,7 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
                       )}
                     </Button>
                   </div>
+
                   <div className="flex justify-end pt-2">
                     {showRegenConfirm ? (
                       <div className="flex items-center gap-2">
@@ -426,37 +426,6 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
                 </div>
               </div>
             </section>
-          ) : (
-            <section>
-              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-                <Shield className="w-5 h-5 text-emerald-400" />
-                API Security
-              </h3>
-              <div className="bg-emerald-500/5 border border-emerald-500/20 rounded-lg p-5 space-y-2 backdrop-blur-sm">
-                <p className="text-sm font-medium text-emerald-300">
-                  Local Mode Active
-                </p>
-                <p className="text-xs text-emerald-200/60">
-                  No API key required for connection from your laptop. Key
-                  management is hidden.
-                </p>
-
-                <div className="mt-4 pt-4 border-t border-white/10">
-                  <Label
-                    htmlFor="endpoint"
-                    className="text-xs text-neutral-500 mb-2 block"
-                  >
-                    System Endpoint
-                  </Label>
-                  <Input
-                    id="endpoint"
-                    value={endpoint}
-                    readOnly
-                    className="h-9 bg-black/40 border-white/10 text-neutral-400 text-sm"
-                  />
-                </div>
-              </div>
-            </section>
           )}
 
           {/* Data Management */}
@@ -469,7 +438,7 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
               <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 h-11 px-6 transition-all"
+                  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"
                   onClick={handleBackup}
                   disabled={isBackingUp}
                 >
@@ -492,7 +461,7 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
                   />
                   <Button
                     variant="outline"
-                    className="w-full justify-center bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-white h-11 px-6 transition-all"
+                    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"
                     onClick={() =>
                       document.getElementById("restore-file")?.click()
                     }
@@ -509,7 +478,7 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
 
                 <Button
                   variant="outline"
-                  className="flex-1 justify-center bg-white/5 border-red-500/10 hover:bg-red-500/10 hover:border-red-500/30 text-red-400 h-11 px-6 transition-all"
+                  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"
                   onClick={() => setShowResetConfirm(true)}
                   disabled={isResetting}
                 >
@@ -588,29 +557,51 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
               System
             </h3>
             <div className="bg-white/5 border border-white/10 rounded-xl p-6 shadow-[inset_0_0_30px_rgba(255,255,255,0.01)] backdrop-blur-md space-y-6">
-              <div className="grid grid-cols-2 gap-8">
-                <div>
-                  <span className="text-[10px] uppercase text-neutral-500 font-bold tracking-[0.2em]">
-                    Version
+              <div className="grid grid-cols-2 gap-12">
+                <div className="space-y-4">
+                  <span className="text-[10px] uppercase text-neutral-500 font-bold tracking-[0.2em] block mb-2">
+                    Versions
                   </span>
-                  <p className="text-neutral-200 font-mono text-base mt-2 tracking-tight">
-                    v0.2.0
-                  </p>
+                  <div className="space-y-3">
+                    <div className="flex justify-between items-center group/version">
+                      <span className="text-xs text-neutral-400 group-hover/version:text-neutral-300 transition-colors">
+                        Dashboard
+                      </span>
+                      <code className="text-[13px] font-mono text-neutral-200 bg-white/5 px-2 py-0.5 rounded border border-white/10 group-hover/version:border-emerald-500/30 group-hover/version:text-emerald-400 transition-all">
+                        {settings?.dashboardVersion || "v0.7.5"}
+                      </code>
+                    </div>
+                    <div className="flex justify-between items-center group/version">
+                      <span className="text-xs text-neutral-400 group-hover/version:text-neutral-300 transition-colors">
+                        MCP Server
+                      </span>
+                      <code className="text-[13px] font-mono text-neutral-200 bg-white/5 px-2 py-0.5 rounded border border-white/10 group-hover/version:border-emerald-500/30 group-hover/version:text-emerald-400 transition-all">
+                        {settings?.mcpVersion || "v0.7.5"}
+                      </code>
+                    </div>
+                  </div>
                 </div>
-                <div>
-                  <span className="text-[10px] uppercase text-neutral-500 font-bold tracking-[0.2em]">
+                <div className="border-l border-white/5 pl-8">
+                  <span className="text-[10px] uppercase text-neutral-500 font-bold tracking-[0.2em] block mb-2">
                     Environment
                   </span>
-                  <p className="text-emerald-400 font-mono text-base mt-2 tracking-tight">
-                    Production
-                  </p>
+                  <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>
                 </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 h-10 transition-all font-medium flex items-center justify-center gap-2 group"
+                  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"
                   onClick={handleRestart}
                   disabled={isRestarting}
                 >
@@ -628,7 +619,11 @@ 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">
+          <Button
+            onClick={onClose}
+            variant="ghost"
+            className="text-neutral-400 hover:text-white hover:bg-white/5"
+          >
             Cancel
           </Button>
           <Button