@cybermem/dashboard 0.9.12 → 0.13.4

package/components/dashboard/metrics-grid.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Card, CardContent } from "@/components/ui/card";
-import MetricCard from "./metric-card";
+import MetricCard from "./metrics/stat-card";
 
 // Types
 interface TrendState {
@@ -49,20 +49,24 @@ function ClientCard({
   name,
   subtitle,
   isEmpty,
+  testId,
 }: {
   label: string;
   name: string;
   subtitle: string;
   isEmpty: boolean;
+  testId?: string;
 }) {
   return (
     <Card
-      className={`bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden ${isEmpty ? "opacity-60" : ""}`}
+      className={`card bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden ${isEmpty ? "opacity-60" : ""}`}
+      data-testid={testId}
     >
       <CardContent className="pt-6 pb-6 relative">
         <div className="text-sm font-medium text-slate-400 mb-2">{label}</div>
         <div
           className={`text-4xl font-bold mb-1 truncate ${isEmpty ? "text-slate-500" : "text-white"}`}
+          data-testid="stat-value"
         >
           {name}
         </div>
@@ -146,6 +150,7 @@ export default function MetricsGrid({
       ) : (
         <ClientCard
           label="Top Writer"
+          testId="card-top-writer"
           name={stats.topWriter.count > 0 ? stats.topWriter.name : "N/A"}
           subtitle={
             stats.topWriter.count > 0
@@ -162,6 +167,7 @@ export default function MetricsGrid({
       ) : (
         <ClientCard
           label="Top Reader"
+          testId="card-top-reader"
           name={stats.topReader.count > 0 ? stats.topReader.name : "N/A"}
           subtitle={
             stats.topReader.count > 0
@@ -178,6 +184,7 @@ export default function MetricsGrid({
       ) : (
         <ClientCard
           label="Last Writer"
+          testId="card-last-writer"
           name={stats.lastWriter.name !== "N/A" ? stats.lastWriter.name : "N/A"}
           subtitle={formatTimestamp(stats.lastWriter.timestamp)}
           isEmpty={
@@ -192,6 +199,7 @@ export default function MetricsGrid({
       ) : (
         <ClientCard
           label="Last Reader"
+          testId="card-last-reader"
           name={stats.lastReader.name !== "N/A" ? stats.lastReader.name : "N/A"}
           subtitle={formatTimestamp(stats.lastReader.timestamp)}
           isEmpty={

package/components/dashboard/settings/access-token-section.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { TintButton } from "@/components/ui/tint-button";
+import { Check, Copy, Eye, EyeOff, RotateCcw, Shield } from "lucide-react";
+
+interface AccessTokenSectionProps {
+  apiKey: string;
+  showApiKey: boolean;
+  setShowApiKey: (show: boolean) => void;
+  copiedId: string | null;
+  copyToClipboard: (text: string, id: string) => void;
+  setShowRegenConfirm: (show: boolean) => void;
+  isManaged: boolean;
+  instanceType: "local" | "rpi" | "vps";
+}
+
+export default function AccessTokenSection({
+  apiKey,
+  showApiKey,
+  setShowApiKey,
+  copiedId,
+  copyToClipboard,
+  setShowRegenConfirm,
+  isManaged,
+  instanceType,
+}: AccessTokenSectionProps) {
+  return (
+    <section>
+      <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-widest mb-4 flex items-center gap-2">
+        <Shield className="w-4 h-4" />
+        Access Token
+      </h3>
+      <div className="bg-white/[0.032] border-[0.5px] border-white/10 rounded-2xl p-6 space-y-4">
+        {/* Token Display */}
+        <div className="space-y-2">
+          <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-[0.5px] border-white/10 text-white font-mono text-sm pr-10"
+                type={showApiKey ? "text" : "password"}
+              />
+              <button
+                data-testid="toggle-visibility"
+                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"
+            >
+              {copiedId === "accesstoken" ? (
+                <Check className="h-4 w-4 text-emerald-400" />
+              ) : (
+                <Copy className="h-4 w-4" />
+              )}
+            </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>
+
+        {/* Auth Status */}
+        <div className="pt-4 border-t border-white/5">
+          <div className="flex items-center gap-3 p-3 bg-white/10 rounded-xl border-[0.5px] border-white/10">
+            {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">
+                    {instanceType === "local"
+                      ? "Local Mode Active"
+                      : "LAN / RPi Mode Active"}
+                  </p>
+                  <p className="text-xs text-white/70">
+                    {instanceType === "local"
+                      ? "No token needed for local connections"
+                      : "Connect from other devices using the secure token"}
+                  </p>
+                </div>
+              </>
+            ) : (
+              <>
+                <div className="w-2 h-2 bg-yellow-400 rounded-full" />
+                <div className="flex-1">
+                  <p className="text-sm text-yellow-300 font-medium">
+                    {instanceType === "rpi"
+                      ? "LAN / RPi Mode"
+                      : instanceType === "vps"
+                        ? "Cloud Mode"
+                        : "Remote Mode"}
+                  </p>
+                  <p className="text-xs text-white/70">
+                    {instanceType === "rpi"
+                      ? "Connecting from your laptop to RPi"
+                      : "Token required for remote MCP connections"}
+                  </p>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/components/dashboard/settings/data-management-section.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { TintButton } from "@/components/ui/tint-button";
+import {
+    Check,
+    Database,
+    Download,
+    Loader2,
+    Trash2,
+    Upload,
+    X,
+} from "lucide-react";
+
+interface DataManagementSectionProps {
+  handleBackup: () => void;
+  isBackingUp: boolean;
+  handleRestore: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  isRestoring: boolean;
+  setShowResetConfirm: (show: boolean) => void;
+  isResetting: boolean;
+  operationStatus: { type: "success" | "error"; message: string } | null;
+  setOperationStatus: (
+    status: { type: "success" | "error"; message: string } | null,
+  ) => void;
+}
+
+export default function DataManagementSection({
+  handleBackup,
+  isBackingUp,
+  handleRestore,
+  isRestoring,
+  setShowResetConfirm,
+  isResetting,
+  operationStatus,
+  setOperationStatus,
+}: DataManagementSectionProps) {
+  return (
+    <section>
+      <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-widest mb-4 flex items-center gap-2">
+        <Database className="w-4 h-4" />
+        Data Management
+      </h3>
+      <div className="bg-white/[0.032] border-[0.5px] border-white/10 rounded-2xl p-6 flex flex-col gap-4">
+        <div className="flex items-center gap-3">
+          <TintButton
+            tint="neutral"
+            variant="solid"
+            className="flex-1 h-11"
+            onClick={handleBackup}
+            disabled={isBackingUp}
+          >
+            {isBackingUp ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <Download className="w-4 h-4" />
+            )}
+            Backup
+          </TintButton>
+
+          <div className="flex-1 relative">
+            <input
+              type="file"
+              id="restore-file"
+              className="hidden"
+              accept=".tar.gz,.tgz"
+              onChange={handleRestore}
+              disabled={isRestoring}
+            />
+            <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 animate-spin" />
+              ) : (
+                <Upload className="w-4 h-4" />
+              )}
+              Restore
+            </TintButton>
+          </div>
+
+          <TintButton
+            tint="red"
+            variant="solid"
+            className="flex-1 h-11"
+            onClick={() => setShowResetConfirm(true)}
+            disabled={isResetting}
+          >
+            <Trash2 className="w-4 h-4" />
+            Reset DB
+          </TintButton>
+        </div>
+
+        {operationStatus && (
+          <div
+            className={`p-3 rounded-xl text-sm flex items-center gap-3 animate-in fade-in slide-in-from-top-1 ${
+              operationStatus.type === "success"
+                ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
+                : "bg-red-500/10 text-red-400 border border-red-500/20"
+            }`}
+          >
+            {operationStatus.type === "success" ? (
+              <Check className="w-4 h-4" />
+            ) : (
+              <X className="w-4 h-4" />
+            )}
+            <span className="flex-1">{operationStatus.message}</span>
+            <button
+              onClick={() => setOperationStatus(null)}
+              className="opacity-50 hover:opacity-100 p-1"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

package/components/dashboard/settings/system-info-section.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { TintButton } from "@/components/ui/tint-button";
+import { Loader2, RotateCcw, Server } from "lucide-react";
+
+interface SystemInfoSectionProps {
+  settings: any;
+  handleRestart: () => void;
+  isRestarting: boolean;
+}
+
+export default function SystemInfoSection({
+  settings,
+  handleRestart,
+  isRestarting,
+}: SystemInfoSectionProps) {
+  return (
+    <section className="pb-4">
+      <h3 className="text-sm font-medium text-neutral-400 uppercase tracking-widest mb-4 flex items-center gap-2">
+        <Server className="w-4 h-4" />
+        System Information
+      </h3>
+      <div className="bg-white/[0.032] border-[0.5px] border-white/10 rounded-2xl p-6 space-y-6">
+        <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>
+            <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 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>
+            <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 px-2 py-0.5 rounded border ${
+                    settings?.env === "staging"
+                      ? "text-yellow-400 bg-yellow-500/10 border-yellow-500/20"
+                      : "text-emerald-400 bg-emerald-500/10 border-emerald-500/20"
+                  }`}
+                >
+                  {settings?.env === "staging" ? "Staging" : "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?.instanceType === "rpi"
+                    ? "Raspberry Pi"
+                    : settings?.instanceType === "vps"
+                      ? "Cloud / VPS"
+                      : "Local Machine"}
+                </code>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="pt-2 border-t border-white/5">
+          <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" />
+            )}
+            {isRestarting ? "Restarting..." : "Restart Service"}
+          </TintButton>
+        </div>
+      </div>
+    </section>
+  );
+}