@cybermem/dashboard 0.9.12 → 0.13.4

package/components/dashboard/settings-modal.tsx

@@ -2,33 +2,21 @@
 
 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,
-    Copy,
-    Database,
-    Download,
-    Eye,
-    EyeOff,
-    Loader2,
-    RotateCcw,
-    Server,
-    Settings,
-    Shield,
-    Trash2,
-    Upload,
-    X,
-} from "lucide-react";
+import { Settings, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
+import AccessTokenSection from "./settings/access-token-section";
+import DataManagementSection from "./settings/data-management-section";
+import SystemInfoSection from "./settings/system-info-section";
 
 export default function SettingsModal({ onClose }: { onClose: () => void }) {
   const [apiKey, setApiKey] = useState("");
   const [endpoint, setEndpoint] = useState("");
   const [isManaged, setIsManaged] = useState(false);
+  const [instanceType, setInstanceType] = useState<"local" | "rpi" | "vps">(
+    "local",
+  );
   const [settings, setSettings] = useState<any>(null);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -64,8 +52,9 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
     fetch("/api/settings")
       .then((res) => res.json())
       .then((data) => {
-        // Enforce Local Mode if server says so
-        setIsManaged(data.isManaged || false);
+        // Enforce Local Mode ONLY if it's truly local hardware AND accessed via localhost
+        setIsManaged(data.isManaged && data.instanceType === "local");
+        setInstanceType(data.instanceType || "local");
         setSettings(data);
 
         if (localKey && !data.isManaged) {
@@ -113,14 +102,6 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
     }
   };
 
-  const [saved, setSaved] = useState(false);
-
-  const handleSave = () => {
-    // Settings saved
-    setSaved(true);
-    setTimeout(() => setSaved(false), 2000);
-  };
-
   const handleBackup = async () => {
     try {
       setIsBackingUp(true);
@@ -219,291 +200,66 @@ export default function SettingsModal({ onClose }: { onClose: () => void }) {
 
   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]/80 backdrop-blur-xl border border-emerald-500/20 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto relative overflow-hidden"
-        style={{
-          backgroundImage: `radial-gradient(circle at 0% 0%, oklch(0.7 0 0 / 0.05) 0%, transparent 50%), 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="flex items-center justify-between px-6 pt-6 pb-2">
-          <div className="flex items-center gap-3">
-            <div className="p-2 bg-white/5 rounded-lg border border-white/10 shadow-inner">
-              <Settings className="w-5 h-5 text-white shadow-lg" />
+      <div className="bg-[#05100F] border-[0.5px] border-white/10 rounded-3xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] max-w-2xl w-full max-h-[90vh] overflow-hidden relative flex flex-col">
+        <div className="relative rounded-t-lg bg-[#05100F] px-4 py-4 flex items-center justify-between border-b-0">
+          <div className="flex items-center gap-4">
+            {/* Title */}
+            <div className="text-sm text-white font-semibold flex items-center gap-2 pl-2">
+              <Settings className="w-4 h-4 opacity-70" />
+              <span>Settings</span>
             </div>
-            <h2 className="text-xl font-semibold text-white">Settings</h2>
           </div>
+
           <Button
             variant="ghost"
             size="icon"
             onClick={onClose}
-            className="text-neutral-400 hover:text-white rounded-full"
+            className="text-neutral-400 hover:text-white hover:bg-white/10 rounded-full w-8 h-8"
           >
-            <X className="w-5 h-5" />
+            <X className="w-4 h-4" />
           </Button>
         </div>
 
         {/* Content */}
-        <div className="p-6 space-y-6">
-          {/* Access Token */}
-          <section>
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-              <Shield className="w-5 h-5" />
-              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="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"
-                  >
-                    {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/10">
-                <div className="flex items-center gap-3 p-3 bg-black/20 rounded-lg border border-white/5">
-                  {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 Active
-                        </p>
-                        <p className="text-xs text-neutral-500">
-                          No token needed for local connections
-                        </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">
-                          Remote Mode
-                        </p>
-                        <p className="text-xs text-neutral-500">
-                          Token required for MCP client connections
-                        </p>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-          </section>
-
-          {/* Data Management */}
-          <section>
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-              <Database className="w-5 h-5" />
-              Data Management
-            </h3>
-            <div className="flex flex-col gap-3">
-              <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>
-
-          {/* System Info */}
-          <section>
-            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
-              <Server className="w-5 h-5" />
-              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-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 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">
-                <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>
+        <div className="flex-1 overflow-y-auto p-8 space-y-8 bg-[#05100F]">
+          <AccessTokenSection
+            apiKey={apiKey}
+            showApiKey={showApiKey}
+            setShowApiKey={setShowApiKey}
+            copiedId={copiedId}
+            copyToClipboard={copyToClipboard}
+            setShowRegenConfirm={setShowRegenConfirm}
+            isManaged={isManaged}
+            instanceType={instanceType}
+          />
+
+          <DataManagementSection
+            handleBackup={handleBackup}
+            isBackingUp={isBackingUp}
+            handleRestore={handleRestore}
+            isRestoring={isRestoring}
+            setShowResetConfirm={setShowResetConfirm}
+            isResetting={isResetting}
+            operationStatus={operationStatus}
+            setOperationStatus={setOperationStatus}
+          />
+
+          <SystemInfoSection
+            settings={settings}
+            handleRestart={handleRestart}
+            isRestarting={isRestarting}
+          />
         </div>
 
         {/* 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">
-          <TintButton tint="neutral" variant="ghost" onClick={onClose}>
+        <div className="bg-[#05100F] border-t border-white/[0.03] px-8 py-5 flex justify-end gap-3 z-10">
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            className="hover:bg-white/5 text-neutral-300 hover:text-white"
+          >
             Close
-          </TintButton>
+          </Button>
         </div>
       </div>
 

package/e2e/api.spec.ts

@@ -0,0 +1,219 @@
+import { expect, test } from "@playwright/test";
+import { execSync } from "child_process";
+import * as path from "path";
+
+// This suite runs against the Next.js API Routes (Backend)
+// IMPORTANT: This uses REAL database with clean state!
+const DASHBOARD_URL = process.env.DASHBOARD_URL || "http://localhost:3000";
+// Normalize MCP URL: strip /mcp suffix to get the base for legacy HTTP endpoints (/add, /query)
+const RAW_MCP_URL = process.env.MCP_URL || "http://localhost:8626";
+const MCP_API_URL = RAW_MCP_URL.replace(/\/mcp\/?$/, "");
+
+// Tailscale environments require auth token
+const isLocalhost =
+  DASHBOARD_URL.includes("localhost") || DASHBOARD_URL.includes("127.0.0.1");
+const CYBERMEM_TOKEN = process.env.CYBERMEM_TOKEN || "";
+
+// Helper to build headers with optional auth
+function getHeaders(clientName: string): Record<string, string> {
+  const headers: Record<string, string> = { "X-Client-Name": clientName };
+  if (!isLocalhost && CYBERMEM_TOKEN) {
+    headers["X-API-Key"] = CYBERMEM_TOKEN;
+  }
+  return headers;
+}
+
+const SQLITE_PATH = path.join(
+  process.env.HOME || "",
+  ".cybermem",
+  "data",
+  "openmemory.sqlite",
+);
+
+// Helper to run CLI commands
+function runCLI(cmd: string): { stdout: string; success: boolean } {
+  try {
+    const stdout = execSync(cmd, {
+      encoding: "utf-8",
+      timeout: 120000, // 2 min timeout
+      env: { ...process.env, FORCE_COLOR: "0" },
+    });
+    return { stdout, success: true };
+  } catch (error: any) {
+    return { stdout: error.stdout || error.message, success: false };
+  }
+}
+
+test.describe("Dashboard:E2E:API (Deep Verification)", () => {
+  const TEST_CLIENT = `e2e-api-journey-${Date.now()}`;
+
+  // Note: Reset is handled by global-setup.ts (runs ONCE before all tests)
+  test.beforeAll(async ({}, testInfo) => {
+    // Attach environment info
+    await testInfo.attach("🔧 Test Environment", {
+      body: `Dashboard URL: ${DASHBOARD_URL}\nMCP API URL: ${MCP_API_URL}\nSQLite Path: ${SQLITE_PATH}\nTest Client: ${TEST_CLIENT}\n\n✅ Clean state provided by global-setup.ts`,
+      contentType: "text/plain",
+    });
+  });
+
+  test("1. Health Check", async ({ request }, testInfo) => {
+    await test.step("📊 GET /api/health — Verify System Status", async () => {
+      console.log("📊 GET /api/health");
+
+      const response = await request.get(`${DASHBOARD_URL}/api/health`, {
+        headers: getHeaders("antigravity-client"),
+      });
+
+      const body = await response.json();
+      console.log("   Response:", JSON.stringify(body, null, 2));
+
+      expect(response.status()).toBe(200);
+      expect(body.overall).toBe("ok");
+      expect(body.services.length).toBeGreaterThan(0);
+
+      await testInfo.attach("📊 Health Check Result", {
+        body: `Status: ${response.status()}\nOverall: ${body.overall}\nServices: ${body.services.map((s: any) => `${s.name}: ${s.status}`).join(", ")}`,
+        contentType: "text/plain",
+      });
+    });
+  });
+
+  test("2. Full Journey: MCP Write → Metrics → Audit Logs", async ({
+    request,
+  }, testInfo) => {
+    const uniqueContent = `Journey Test ${Date.now()}`;
+
+    console.log("🔄 FULL JOURNEY TEST START");
+    console.log(`   Test Client: ${TEST_CLIENT}`);
+    console.log(`   Content: ${uniqueContent}`);
+
+    // Step 1: Trigger MCP Write
+    await test.step("📤 CRUD — POST /add — Create new memory", async () => {
+      console.log("📤 POST /add (MCP API)");
+      console.log(
+        `   Payload: { content: "${uniqueContent}", tags: ["journey"] }`,
+      );
+
+      const resp = await request.post(`${MCP_API_URL}/add`, {
+        data: { content: uniqueContent, tags: ["journey"] },
+        headers: getHeaders(TEST_CLIENT),
+      });
+
+      console.log(`   Status: ${resp.status()}`);
+      const body = await resp.json();
+      console.log(`   Response: ${JSON.stringify(body, null, 2)}`);
+
+      expect(resp.status()).toBe(200);
+
+      await testInfo.attach("📝 CRUD — CREATE", {
+        body: `Endpoint: POST ${MCP_API_URL}/add\n\nRequest:\n{\n  "content": "${uniqueContent}",\n  "tags": ["journey"]\n}\n\nResponse:\n${JSON.stringify(body, null, 2)}`,
+        contentType: "text/plain",
+      });
+    });
+
+    // Step 2: Verify Metrics
+    await test.step("📊 Discovery — Metrics Reflect Write Activity", async () => {
+      console.log("📊 GET /api/metrics");
+
+      const resp = await request.get(`${DASHBOARD_URL}/api/metrics`, {
+        headers: getHeaders("antigravity-client"),
+      });
+
+      const data = await resp.json();
+      console.log(`   Last Writer: ${data.stats.lastWriter.name}`);
+      console.log(`   Total Requests: ${data.stats.totalRequests}`);
+      console.log(
+        `   Creates Time Series Length: ${data.timeSeries.creates.length}`,
+      );
+
+      expect(data.stats.lastWriter.name).toContain(TEST_CLIENT);
+      expect(data.stats.totalRequests).toBeGreaterThan(0);
+
+      await testInfo.attach("📊 Metrics Snapshot", {
+        body: `Last Writer: ${data.stats.lastWriter.name}\nTotal Requests: ${data.stats.totalRequests}\nCreates Time Series: ${data.timeSeries.creates.length} entries`,
+        contentType: "text/plain",
+      });
+    });
+
+    // Step 3: Verify Audit Logs
+    await test.step("📋 Discovery — Audit Log Contains Journey Entry", async () => {
+      console.log("📋 GET /api/audit-logs");
+
+      const resp = await request.get(`${DASHBOARD_URL}/api/audit-logs`, {
+        headers: getHeaders("antigravity-client"),
+      });
+
+      const data = await resp.json();
+      const latestLog = data.logs.find((l: any) =>
+        l.client.includes(TEST_CLIENT),
+      );
+      console.log(`   Found Log: ${latestLog ? "YES" : "NO"}`);
+      if (latestLog) {
+        console.log(`   Log Details: ${JSON.stringify(latestLog, null, 2)}`);
+      }
+
+      expect(latestLog).toBeDefined();
+      expect(latestLog.operation).toBe("Write");
+
+      await testInfo.attach("📋 Audit Log Entry", {
+        body: `Found: ${latestLog ? "YES" : "NO"}\nClient: ${latestLog?.client}\nOperation: ${latestLog?.operation}\nStatus: ${latestLog?.status}`,
+        contentType: "text/plain",
+      });
+    });
+
+    console.log("✅ FULL JOURNEY TEST COMPLETE");
+
+    await testInfo.attach("✅ Journey Complete", {
+      body: `Test Client: ${TEST_CLIENT}\nContent: ${uniqueContent}\n\nVerified:\n✅ MCP Write (POST /add)\n✅ Metrics (GET /api/metrics) — Last Writer confirmed\n✅ Audit Logs (GET /api/audit-logs) — Entry found`,
+      contentType: "text/plain",
+    });
+  });
+
+  test("3. Config & Settings", async ({ request }, testInfo) => {
+    // MCP Config
+    await test.step("⚙️ Config — GET /api/mcp-config", async () => {
+      console.log("⚙️  GET /api/mcp-config?type=json");
+
+      const configResp = await request.get(
+        `${DASHBOARD_URL}/api/mcp-config?type=json`,
+        {
+          headers: getHeaders("antigravity-client"),
+        },
+      );
+
+      const config = await configResp.json();
+      console.log(`   Config Type: ${config.configType}`);
+
+      expect(configResp.status()).toBe(200);
+      expect(config.configType).toBe("json");
+      expect(config.config.mcpServers).toBeDefined();
+
+      await testInfo.attach("⚙️ MCP Config", {
+        body: `Config Type: ${config.configType}\nmcpServers: ${Object.keys(config.config.mcpServers).join(", ")}`,
+        contentType: "text/plain",
+      });
+    });
+
+    // Settings
+    await test.step("⚙️ Settings — GET /api/settings", async () => {
+      console.log("⚙️  GET /api/settings");
+
+      const settingsResp = await request.get(`${DASHBOARD_URL}/api/settings`, {
+        headers: getHeaders("antigravity-client"),
+      });
+
+      const settings = await settingsResp.json();
+      console.log(`   Instance Type: ${settings.instanceType}`);
+      console.log(`   Endpoint: ${settings.endpoint}`);
+
+      expect(settingsResp.status()).toBe(200);
+      expect(settings).toHaveProperty("apiKey");
+      expect(settings).toHaveProperty("endpoint");
+
+      await testInfo.attach("⚙️ Settings", {
+        body: `Instance Type: ${settings.instanceType}\nEndpoint: ${settings.endpoint}\nAPI Key: ${settings.apiKey ? "***" + settings.apiKey.slice(-4) : "N/A"}`,
+        contentType: "text/plain",
+      });
+    });
+  });
+});

package/e2e/routing.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from "@playwright/test";
+
+// This test is ONLY for localhost environments where dashboard serves at root.
+// Tailscale environments use subpaths (/cybermem-staging, /cybermem) by design.
+const dashboardUrl = process.env.DASHBOARD_URL || "";
+const isLocalhost =
+  dashboardUrl.includes("localhost") || dashboardUrl.includes("127.0.0.1");
+
+test.describe("Routing & URL Canonicalization", () => {
+  test.skip(!isLocalhost, "Skipped on Tailscale - uses subpath by design");
+
+  test("Root Check: Should stay at / and NOT redirect to legacy subpaths", async ({
+    request,
+    baseURL,
+  }) => {
+    // We expect the DASHBOARD_URL (baseURL) to be the root or specific entry point.
+    // This test ensures that requesting the root does NOT redirect to /cybermem or /cybermem-staging
+    // which was a legacy behavior we removed in v0.13.0.
+
+    // Note: baseURL provided by Playwright config or env var
+    console.log(`Checking routing for: ${baseURL}`);
+
+    const response = await request.get("/");
+
+    // 1. Should be 200 OK
+    expect(response.status()).toBe(200);
+
+    // 2. Should match the expected URL (no redirects)
+    // response.url() returns the final URL after redirects.
+    // We check that it doesn't contain legacy subpaths if we started at root
+    const finalUrl = response.url();
+    expect(finalUrl).not.toContain("/cybermem-staging");
+    expect(finalUrl).not.toContain("/cybermem/"); // Trailing slash check
+
+    // 3. Content Check to ensure it's not a generic 404/nginx page
+    const body = await response.text();
+    expect(body).toContain("<!DOCTYPE html>"); // Expecting Next.js app
+  });
+});