axiodb 22.2.2 → 22.4.2

package/electron/src/pages/UserManagement.jsx

@@ -0,0 +1,294 @@
+import React, { useEffect, useState } from "react";
+import authApi from "../api/authApi";
+import { useAuthStore } from "../store/authStore";
+import CreateUserModal from "../components/auth/CreateUserModal";
+import CreateRoleModal from "../components/auth/CreateRoleModal";
+import ResetPasswordModal from "../components/auth/ResetPasswordModal";
+
+const UserManagement = () => {
+  const permissions = useAuthStore((state) => state.permissions);
+  const currentUsername = useAuthStore((state) => state.username);
+  const [users, setUsers] = useState([]);
+  const [roles, setRoles] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [isCreateUserOpen, setIsCreateUserOpen] = useState(false);
+  const [isCreateRoleOpen, setIsCreateRoleOpen] = useState(false);
+  const [resetPasswordTarget, setResetPasswordTarget] = useState(null);
+
+  const canCreateUser = permissions.includes("user:create");
+  const canDeleteUser = permissions.includes("user:delete");
+  const canUpdateUserRole = permissions.includes("user:update-role");
+  const canResetPassword = permissions.includes("user:reset-password");
+  const canCreateRole = permissions.includes("role:create");
+
+  const loadData = async () => {
+    setIsLoading(true);
+    setError("");
+    try {
+      const [usersRes, rolesRes] = await Promise.all([authApi.listUsers(), authApi.listRoles()]);
+      setUsers(usersRes.data.data || []);
+      setRoles(rolesRes.data.data || []);
+    } catch (err) {
+      setError(err.response?.data?.message || "Failed to load users and roles");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const handleRoleChange = async (username, newRole) => {
+    try {
+      await authApi.updateUserRole(username, newRole);
+      loadData();
+    } catch (err) {
+      setError(err.response?.data?.message || "Failed to update role");
+    }
+  };
+
+  const handleDelete = async (username) => {
+    if (!window.confirm(`Delete user "${username}"? This cannot be undone.`)) return;
+    try {
+      await authApi.deleteUser(username);
+      loadData();
+    } catch (err) {
+      setError(err.response?.data?.message || "Failed to delete user");
+    }
+  };
+
+  return (
+    <div className="flex-1 overflow-y-auto bg-slate-50 p-6 md:p-8">
+      <div className="max-w-6xl mx-auto space-y-6">
+        {/* Header */}
+        <div className="bg-white border border-slate-200 rounded-xl p-6 shadow-xs flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-200 flex items-center justify-center shrink-0">
+              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-slate-900">User & Access Control</h1>
+              <p className="text-xs text-slate-500 mt-0.5">
+                Manage database users, RBAC roles, and operational permissions.
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            {canCreateUser && (
+              <button
+                type="button"
+                onClick={() => setIsCreateUserOpen(true)}
+                className="px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold rounded-lg shadow-xs transition-all cursor-pointer flex items-center gap-2"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                </svg>
+                New User
+              </button>
+            )}
+            {canCreateRole && (
+              <button
+                type="button"
+                onClick={() => setIsCreateRoleOpen(true)}
+                className="px-3.5 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold rounded-lg transition-all cursor-pointer flex items-center gap-2"
+              >
+                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+                </svg>
+                New Role
+              </button>
+            )}
+          </div>
+        </div>
+
+        {error && (
+          <div className="p-4 rounded-xl bg-red-50 border border-red-200 text-red-700 text-xs flex items-center gap-3">
+            <svg className="w-5 h-5 shrink-0 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span>{error}</span>
+          </div>
+        )}
+
+        {/* Users Table */}
+        <div className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-xs">
+          <div className="px-5 py-4 border-b border-slate-200 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <h2 className="text-sm font-bold text-slate-900">Registered Users</h2>
+              <span className="px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 text-xs font-medium">
+                {users.length}
+              </span>
+            </div>
+          </div>
+
+          {isLoading ? (
+            <div className="p-8 text-center text-slate-400 text-xs">Loading users...</div>
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-left text-xs">
+                <thead>
+                  <tr className="bg-slate-50 border-b border-slate-200 text-slate-500 uppercase tracking-wider font-semibold">
+                    <th className="px-5 py-3">Username</th>
+                    <th className="px-5 py-3">Assigned Role</th>
+                    <th className="px-5 py-3">Account Status</th>
+                    <th className="px-5 py-3 text-right">Actions</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-slate-100">
+                  {users.map((u) => (
+                    <tr key={u.username} className="hover:bg-slate-50/70 transition-colors">
+                      <td className="px-5 py-3.5 font-medium text-slate-900 flex items-center gap-2">
+                        <div className="h-7 w-7 rounded-full bg-emerald-100 text-emerald-800 font-bold flex items-center justify-center text-xs">
+                          {u.username.slice(0, 1).toUpperCase()}
+                        </div>
+                        <span className="font-mono">{u.username}</span>
+                        {u.username === currentUsername && (
+                          <span className="px-1.5 py-0.5 rounded bg-slate-100 text-slate-500 text-[10px] font-medium">
+                            You
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-5 py-3.5">
+                        {canUpdateUserRole ? (
+                          <select
+                            value={u.role}
+                            onChange={(e) => handleRoleChange(u.username, e.target.value)}
+                            className="border border-slate-300 rounded-md px-2.5 py-1 text-xs bg-white text-slate-800 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500/20"
+                          >
+                            {roles.map((r) => (
+                              <option key={r.roleName} value={r.roleName}>
+                                {r.roleName}
+                              </option>
+                            ))}
+                          </select>
+                        ) : (
+                          <span className="px-2.5 py-1 rounded-md bg-slate-100 text-slate-700 font-medium">
+                            {u.role}
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-5 py-3.5">
+                        {u.mustChangePassword ? (
+                          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 border border-amber-200 text-[11px] font-medium">
+                            <span className="h-1.5 w-1.5 rounded-full bg-amber-500" />
+                            Must Change Password
+                          </span>
+                        ) : (
+                          <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 text-[11px] font-medium">
+                            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                            Active
+                          </span>
+                        )}
+                      </td>
+                      <td className="px-5 py-3.5 text-right space-x-2">
+                        {canResetPassword && (
+                          <button
+                            type="button"
+                            onClick={() => setResetPasswordTarget(u.username)}
+                            className="px-2.5 py-1 text-xs font-semibold text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 rounded-md transition-colors cursor-pointer"
+                          >
+                            Reset Password
+                          </button>
+                        )}
+                        {canDeleteUser && u.username !== currentUsername && (
+                          <button
+                            type="button"
+                            onClick={() => handleDelete(u.username)}
+                            className="px-2.5 py-1 text-xs font-semibold text-red-600 hover:text-red-700 bg-red-50 hover:bg-red-100 rounded-md transition-colors cursor-pointer"
+                          >
+                            Delete
+                          </button>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+
+        {/* Roles Table */}
+        <div className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-xs">
+          <div className="px-5 py-4 border-b border-slate-200 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <h2 className="text-sm font-bold text-slate-900">Security Roles & Permissions</h2>
+              <span className="px-2 py-0.5 rounded-full bg-slate-100 text-slate-600 text-xs font-medium">
+                {roles.length}
+              </span>
+            </div>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="w-full text-left text-xs">
+              <thead>
+                <tr className="bg-slate-50 border-b border-slate-200 text-slate-500 uppercase tracking-wider font-semibold">
+                  <th className="px-5 py-3">Role Name</th>
+                  <th className="px-5 py-3">Granted Permissions</th>
+                  <th className="px-5 py-3">Category</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {roles.map((r) => (
+                  <tr key={r.roleName} className="hover:bg-slate-50/70 transition-colors">
+                    <td className="px-5 py-3.5 font-bold text-slate-900">{r.roleName}</td>
+                    <td className="px-5 py-3.5 text-slate-600 font-mono text-[11px]">
+                      {r.permissions.length} capabilities
+                      <div className="flex flex-wrap gap-1 mt-1 max-w-xl">
+                        {r.permissions.slice(0, 6).map((p) => (
+                          <span key={p} className="px-1.5 py-0.5 rounded bg-slate-100 text-slate-600 text-[10px]">
+                            {p}
+                          </span>
+                        ))}
+                        {r.permissions.length > 6 && (
+                          <span className="px-1.5 py-0.5 rounded bg-slate-100 text-slate-400 text-[10px]">
+                            +{r.permissions.length - 6} more
+                          </span>
+                        )}
+                      </div>
+                    </td>
+                    <td className="px-5 py-3.5">
+                      {r.isSystemRole ? (
+                        <span className="px-2 py-0.5 rounded bg-slate-100 text-slate-600 text-[11px] font-medium">
+                          System Role
+                        </span>
+                      ) : (
+                        <span className="px-2 py-0.5 rounded bg-purple-50 text-purple-700 border border-purple-200 text-[11px] font-medium">
+                          Custom Role
+                        </span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <CreateUserModal
+          isOpen={isCreateUserOpen}
+          onClose={() => setIsCreateUserOpen(false)}
+          onUserCreated={loadData}
+          roles={roles}
+        />
+        <CreateRoleModal
+          isOpen={isCreateRoleOpen}
+          onClose={() => setIsCreateRoleOpen(false)}
+          onRoleCreated={loadData}
+        />
+        <ResetPasswordModal
+          isOpen={!!resetPasswordTarget}
+          username={resetPasswordTarget}
+          onClose={() => setResetPasswordTarget(null)}
+          onPasswordReset={loadData}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UserManagement;

package/electron/src/pages/Welcome.jsx

@@ -0,0 +1,157 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { useConnectionStore } from "../store/connectionStore";
+import axioLogo from "../assets/AXioDB.png";
+
+const HIGHLIGHTS = [
+  {
+    icon: (
+      <svg className="w-5 h-5 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+      </svg>
+    ),
+    title: "Pure JavaScript Speed",
+    description: "Embedded NoSQL database with zero native bindings, zero node-gyp, and instant cold starts.",
+  },
+  {
+    icon: (
+      <svg className="w-5 h-5 text-sky-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      </svg>
+    ),
+    title: "MongoDB-Style Queries",
+    description: "Intuitive query and aggregation console with live syntax validation and code completions.",
+  },
+  {
+    icon: (
+      <svg className="w-5 h-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+      </svg>
+    ),
+    title: "In-Memory Cache & Metrics",
+    description: "Real-time cache ceiling monitoring, disk utilization donuts, and hierarchical database tree views.",
+  },
+  {
+    icon: (
+      <svg className="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+      </svg>
+    ),
+    title: "ACID Consistency & RBAC",
+    description: "Write-ahead logging, transactional safety, and robust role-based permission control.",
+  },
+];
+
+const Welcome = ({ onGetStarted }) => {
+  const { setHasSeenWelcome } = useConnectionStore();
+  const [dontShowAgain, setDontShowAgain] = useState(true);
+
+  const handleStart = () => {
+    if (dontShowAgain) {
+      setHasSeenWelcome(true);
+    }
+    onGetStarted();
+  };
+
+  return (
+    <div className="relative min-h-screen bg-slate-50 flex items-center justify-center p-6 overflow-hidden select-none font-sans">
+      {/* Ambient background glows */}
+      <div
+        className="pointer-events-none absolute -top-32 -left-32 w-96 h-96 rounded-full bg-emerald-500/10 blur-[100px]"
+        aria-hidden="true"
+      />
+      <div
+        className="pointer-events-none absolute -bottom-32 -right-32 w-96 h-96 rounded-full bg-sky-500/10 blur-[100px]"
+        aria-hidden="true"
+      />
+
+      <div className="relative max-w-3xl w-full flex flex-col items-center text-center">
+        {/* Animated Logo Container */}
+        <motion.div
+          initial={{ scale: 0.85, opacity: 0, y: -16 }}
+          animate={{ scale: 1, opacity: 1, y: 0 }}
+          transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
+          className="relative mb-6"
+        >
+          <div className="h-20 w-20 rounded-2xl p-2 bg-white border border-slate-200 shadow-xl flex items-center justify-center">
+            <img src={axioLogo} alt="AxioDB Logo" className="h-16 w-16 object-contain rounded-xl" />
+          </div>
+        </motion.div>
+
+        {/* Header Titles */}
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1, duration: 0.4 }}
+          className="space-y-2 mb-8"
+        >
+          <div className="inline-flex items-center gap-1.5 px-3 py-0.5 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-semibold uppercase tracking-wider">
+            <span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
+            Desktop Management Suite
+          </div>
+          <h1 className="text-3xl md:text-4xl font-black tracking-tight text-slate-900">
+            Welcome to <span className="bg-gradient-to-r from-emerald-600 via-teal-600 to-sky-600 bg-clip-text text-transparent">AxioDB Control</span>
+          </h1>
+          <p className="text-slate-600 max-w-lg text-sm leading-relaxed mx-auto">
+            High-performance desktop client for exploring, querying, and managing AxioDB instances with MongoDB Compass-style productivity.
+          </p>
+        </motion.div>
+
+        {/* Feature Grid */}
+        <motion.div
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.5 }}
+          className="grid grid-cols-1 md:grid-cols-2 gap-3 w-full mb-8"
+        >
+          {HIGHLIGHTS.map((item, i) => (
+            <div
+              key={i}
+              className="p-4 rounded-xl bg-white border border-slate-200 text-left shadow-2xs hover:border-emerald-300 hover:shadow-xs transition-all"
+            >
+              <div className="flex items-start gap-3">
+                <div className="p-2 rounded-lg bg-slate-50 border border-slate-100 shrink-0">
+                  {item.icon}
+                </div>
+                <div>
+                  <h3 className="text-xs font-bold text-slate-900 mb-0.5">{item.title}</h3>
+                  <p className="text-xs text-slate-500 leading-relaxed">{item.description}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </motion.div>
+
+        {/* Action Controls */}
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3, duration: 0.4 }}
+          className="flex flex-col items-center gap-3 w-full max-w-xs"
+        >
+          <button
+            onClick={handleStart}
+            className="w-full py-2.5 px-6 rounded-xl bg-emerald-600 hover:bg-emerald-700 active:scale-[0.98] text-white font-semibold text-sm shadow-sm transition-all flex items-center justify-center gap-2"
+          >
+            <span>Connect to Instance</span>
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+            </svg>
+          </button>
+
+          <label className="flex items-center gap-2 text-xs text-slate-500 cursor-pointer hover:text-slate-700">
+            <input
+              type="checkbox"
+              checked={dontShowAgain}
+              onChange={(e) => setDontShowAgain(e.target.checked)}
+              className="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500"
+            />
+            <span>Don't show welcome screen on launch</span>
+          </label>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default Welcome;

package/electron/src/store/authStore.js

@@ -0,0 +1,30 @@
+import { create } from "zustand";
+
+export const useAuthStore = create((set) => ({
+  username: null,
+  role: null,
+  permissions: [],
+  mustChangePassword: false,
+  isAuthenticated: false,
+  isLoading: true,
+
+  setSession: ({ username, role, permissions, mustChangePassword }) =>
+    set({
+      username,
+      role,
+      permissions: permissions || [],
+      mustChangePassword: !!mustChangePassword,
+      isAuthenticated: true,
+      isLoading: false,
+    }),
+
+  clearSession: () =>
+    set({
+      username: null,
+      role: null,
+      permissions: [],
+      mustChangePassword: false,
+      isAuthenticated: false,
+      isLoading: false,
+    }),
+}));

package/electron/src/store/connectionStore.js

@@ -0,0 +1,103 @@
+import { create } from "zustand";
+
+const STORAGE_KEY_SAVED = "axiodb_saved_connections";
+const STORAGE_KEY_WELCOME = "axiodb_welcome_seen";
+
+const loadSavedConnections = () => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY_SAVED);
+    return raw ? JSON.parse(raw) : [];
+  } catch {
+    return [];
+  }
+};
+
+const loadWelcomeStatus = () => {
+  try {
+    return localStorage.getItem(STORAGE_KEY_WELCOME) === "true";
+  } catch {
+    return false;
+  }
+};
+
+export const useConnectionStore = create((set, get) => ({
+  protocol: "http",
+  host: "localhost",
+  port: 27018,
+  username: "admin",
+  password: "",
+  name: "Local Instance",
+
+  isConnected: false,
+  isConnecting: false,
+  connectionError: null,
+  pingLatency: null,
+  serverVersion: null,
+
+  savedConnections: loadSavedConnections(),
+  hasSeenWelcome: loadWelcomeStatus(),
+
+  setConnectionParams: (params) => set((state) => ({ ...state, ...params })),
+
+  setIsConnected: (isConnected) => set({ isConnected }),
+  setIsConnecting: (isConnecting) => set({ isConnecting }),
+  setConnectionError: (connectionError) => set({ connectionError }),
+  setPingLatency: (pingLatency) => set({ pingLatency }),
+  setServerVersion: (serverVersion) => set({ serverVersion }),
+
+  setHasSeenWelcome: (hasSeenWelcome) => {
+    try {
+      localStorage.setItem(STORAGE_KEY_WELCOME, hasSeenWelcome ? "true" : "false");
+    } catch {
+      // ignore
+    }
+    set({ hasSeenWelcome });
+  },
+
+  saveConnection: (connection) => {
+    const current = get().savedConnections;
+    const existingIndex = current.findIndex(
+      (c) => c.host === connection.host && c.port === connection.port && c.username === connection.username
+    );
+    let updated;
+    if (existingIndex >= 0) {
+      updated = [...current];
+      updated[existingIndex] = { ...updated[existingIndex], ...connection };
+    } else {
+      updated = [connection, ...current];
+    }
+    try {
+      localStorage.setItem(STORAGE_KEY_SAVED, JSON.stringify(updated));
+    } catch {
+      // ignore
+    }
+    set({ savedConnections: updated });
+  },
+
+  deleteSavedConnection: (id) => {
+    const updated = get().savedConnections.filter((c) => c.id !== id);
+    try {
+      localStorage.setItem(STORAGE_KEY_SAVED, JSON.stringify(updated));
+    } catch {
+      // ignore
+    }
+    set({ savedConnections: updated });
+  },
+
+  getBaseUrl: () => {
+    const { protocol, host, port } = get();
+    return `${protocol}://${host}:${port}`;
+  },
+
+  disconnect: () => {
+    if (window.electronAPI?.clearCookies) {
+      window.electronAPI.clearCookies();
+    }
+    set({
+      isConnected: false,
+      isConnecting: false,
+      connectionError: null,
+      pingLatency: null,
+    });
+  },
+}));