feat: improve terminal stability and split out the host manager

src/ui/desktop/apps/admin/AdminSettings.tsx

@@ -0,0 +1,444 @@
+import React from "react";
+import { useSidebar } from "@/components/ui/sidebar.tsx";
+import { Separator } from "@/components/ui/separator.tsx";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs.tsx";
+import { Shield, Users, Database, Clock } from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useConfirmation } from "@/hooks/use-confirmation.ts";
+import {
+  getAdminOIDCConfig,
+  getRegistrationAllowed,
+  getPasswordLoginAllowed,
+  getUserList,
+  getUserInfo,
+  isElectron,
+  getSessions,
+  unlinkOIDCFromPasswordAccount,
+} from "@/ui/main-axios.ts";
+import { RolesTab } from "@/ui/desktop/apps/admin/tabs/RolesTab.tsx";
+import { GeneralSettingsTab } from "@/ui/desktop/apps/admin/tabs/GeneralSettingsTab.tsx";
+import { OIDCSettingsTab } from "@/ui/desktop/apps/admin/tabs/OIDCSettingsTab.tsx";
+import { UserManagementTab } from "@/ui/desktop/apps/admin/tabs/UserManagementTab.tsx";
+import { SessionManagementTab } from "@/ui/desktop/apps/admin/tabs/SessionManagementTab.tsx";
+import { DatabaseSecurityTab } from "@/ui/desktop/apps/admin/tabs/DatabaseSecurityTab.tsx";
+import { CreateUserDialog } from "./dialogs/CreateUserDialog.tsx";
+import { UserEditDialog } from "./dialogs/UserEditDialog.tsx";
+import { LinkAccountDialog } from "./dialogs/LinkAccountDialog.tsx";
+
+interface AdminSettingsProps {
+  isTopbarOpen?: boolean;
+  rightSidebarOpen?: boolean;
+  rightSidebarWidth?: number;
+}
+
+export function AdminSettings({
+  isTopbarOpen = true,
+  rightSidebarOpen = false,
+  rightSidebarWidth = 400,
+}: AdminSettingsProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { confirmWithToast } = useConfirmation();
+  const { state: sidebarState } = useSidebar();
+
+  const [allowRegistration, setAllowRegistration] = React.useState(true);
+  const [allowPasswordLogin, setAllowPasswordLogin] = React.useState(true);
+
+  const [oidcConfig, setOidcConfig] = React.useState({
+    client_id: "",
+    client_secret: "",
+    issuer_url: "",
+    authorization_url: "",
+    token_url: "",
+    identifier_path: "sub",
+    name_path: "name",
+    scopes: "openid email profile",
+    userinfo_url: "",
+  });
+
+  const [users, setUsers] = React.useState<
+    Array<{
+      id: string;
+      username: string;
+      is_admin: boolean;
+      is_oidc: boolean;
+      password_hash?: string;
+    }>
+  >([]);
+  const [usersLoading, setUsersLoading] = React.useState(false);
+
+  // New dialog states
+  const [createUserDialogOpen, setCreateUserDialogOpen] = React.useState(false);
+  const [userEditDialogOpen, setUserEditDialogOpen] = React.useState(false);
+  const [selectedUserForEdit, setSelectedUserForEdit] = React.useState<{
+    id: string;
+    username: string;
+    is_admin: boolean;
+    is_oidc: boolean;
+    password_hash?: string;
+  } | null>(null);
+
+  const [currentUser, setCurrentUser] = React.useState<{
+    id: string;
+    username: string;
+    is_admin: boolean;
+    is_oidc: boolean;
+  } | null>(null);
+
+  const [sessions, setSessions] = React.useState<
+    Array<{
+      id: string;
+      userId: string;
+      username?: string;
+      deviceType: string;
+      deviceInfo: string;
+      createdAt: string;
+      expiresAt: string;
+      lastActiveAt: string;
+      jwtToken: string;
+      isRevoked?: boolean;
+    }>
+  >([]);
+  const [sessionsLoading, setSessionsLoading] = React.useState(false);
+
+  const [linkAccountAlertOpen, setLinkAccountAlertOpen] = React.useState(false);
+  const [linkOidcUser, setLinkOidcUser] = React.useState<{
+    id: string;
+    username: string;
+  } | null>(null);
+
+  React.useEffect(() => {
+    if (isElectron()) {
+      const serverUrl = (window as { configuredServerUrl?: string })
+        .configuredServerUrl;
+      if (!serverUrl) {
+        return;
+      }
+    }
+
+    getAdminOIDCConfig()
+      .then((res) => {
+        if (res) setOidcConfig(res);
+      })
+      .catch((err) => {
+        if (!err.message?.includes("No server configured")) {
+          toast.error(t("admin.failedToFetchOidcConfig"));
+        }
+      });
+    getUserInfo()
+      .then((info) => {
+        if (info) {
+          setCurrentUser({
+            id: info.userId,
+            username: info.username,
+            is_admin: info.is_admin,
+            is_oidc: info.is_oidc,
+          });
+        }
+      })
+      .catch((err) => {
+        if (!err?.message?.includes("No server configured")) {
+          console.warn("Failed to fetch current user info", err);
+        }
+      });
+    fetchUsers();
+    fetchSessions();
+  }, []);
+
+  React.useEffect(() => {
+    if (isElectron()) {
+      const serverUrl = (window as { configuredServerUrl?: string })
+        .configuredServerUrl;
+      if (!serverUrl) {
+        return;
+      }
+    }
+
+    getRegistrationAllowed()
+      .then((res) => {
+        if (typeof res?.allowed === "boolean") {
+          setAllowRegistration(res.allowed);
+        }
+      })
+      .catch((err) => {
+        if (!err.message?.includes("No server configured")) {
+          toast.error(t("admin.failedToFetchRegistrationStatus"));
+        }
+      });
+  }, []);
+
+  React.useEffect(() => {
+    if (isElectron()) {
+      const serverUrl = (window as { configuredServerUrl?: string })
+        .configuredServerUrl;
+      if (!serverUrl) {
+        return;
+      }
+    }
+
+    getPasswordLoginAllowed()
+      .then((res) => {
+        if (typeof res?.allowed === "boolean") {
+          setAllowPasswordLogin(res.allowed);
+        }
+      })
+      .catch((err) => {
+        if (err.code !== "NO_SERVER_CONFIGURED") {
+          toast.error(t("admin.failedToFetchPasswordLoginStatus"));
+        }
+      });
+  }, []);
+
+  const fetchUsers = async () => {
+    if (isElectron()) {
+      const serverUrl = (window as { configuredServerUrl?: string })
+        .configuredServerUrl;
+      if (!serverUrl) {
+        return;
+      }
+    }
+
+    setUsersLoading(true);
+    try {
+      const response = await getUserList();
+      setUsers(response.users);
+    } catch (err) {
+      if (!err.message?.includes("No server configured")) {
+        toast.error(t("admin.failedToFetchUsers"));
+      }
+    } finally {
+      setUsersLoading(false);
+    }
+  };
+
+  // New dialog handlers
+  const handleEditUser = (user: (typeof users)[0]) => {
+    setSelectedUserForEdit(user);
+    setUserEditDialogOpen(true);
+  };
+
+  const handleCreateUserSuccess = () => {
+    fetchUsers();
+    setCreateUserDialogOpen(false);
+  };
+
+  const handleEditUserSuccess = () => {
+    fetchUsers();
+    setUserEditDialogOpen(false);
+    setSelectedUserForEdit(null);
+  };
+
+  const fetchSessions = async () => {
+    if (isElectron()) {
+      const serverUrl = (window as { configuredServerUrl?: string })
+        .configuredServerUrl;
+      if (!serverUrl) {
+        return;
+      }
+    }
+
+    setSessionsLoading(true);
+    try {
+      const data = await getSessions();
+      setSessions(data.sessions || []);
+    } catch (err) {
+      if (!err?.message?.includes("No server configured")) {
+        toast.error(t("admin.failedToFetchSessions"));
+      }
+    } finally {
+      setSessionsLoading(false);
+    }
+  };
+
+  const handleLinkOIDCUser = (user: { id: string; username: string }) => {
+    setLinkOidcUser(user);
+    setLinkAccountAlertOpen(true);
+  };
+
+  const handleLinkSuccess = () => {
+    fetchUsers();
+    fetchSessions();
+  };
+
+  const handleUnlinkOIDC = async (userId: string, username: string) => {
+    confirmWithToast(
+      t("admin.unlinkOIDCDescription", { username }),
+      async () => {
+        try {
+          const result = await unlinkOIDCFromPasswordAccount(userId);
+
+          toast.success(
+            result.message || t("admin.unlinkOIDCSuccess", { username }),
+          );
+          fetchUsers();
+          fetchSessions();
+        } catch (error: unknown) {
+          const err = error as {
+            response?: { data?: { error?: string; code?: string } };
+          };
+          toast.error(
+            err.response?.data?.error || t("admin.failedToUnlinkOIDC"),
+          );
+        }
+      },
+      "destructive",
+    );
+  };
+
+  const topMarginPx = isTopbarOpen ? 74 : 26;
+  const leftMarginPx = sidebarState === "collapsed" ? 26 : 8;
+  const bottomMarginPx = 8;
+  const wrapperStyle: React.CSSProperties = {
+    marginLeft: leftMarginPx,
+    marginRight: rightSidebarOpen
+      ? `calc(var(--right-sidebar-width, ${rightSidebarWidth}px) + 8px)`
+      : 17,
+    marginTop: topMarginPx,
+    marginBottom: bottomMarginPx,
+    height: `calc(100vh - ${topMarginPx + bottomMarginPx}px)`,
+    transition:
+      "margin-left 200ms linear, margin-right 200ms linear, margin-top 200ms linear",
+  };
+
+  return (
+    <div
+      style={wrapperStyle}
+      className="bg-canvas text-foreground rounded-lg border-2 border-edge overflow-hidden"
+    >
+      <div className="h-full w-full flex flex-col">
+        <div className="flex items-center justify-between px-3 pt-2 pb-2">
+          <h1 className="font-bold text-lg">{t("admin.title")}</h1>
+        </div>
+        <Separator className="p-0.25 w-full" />
+
+        <div className="px-6 py-4 overflow-auto thin-scrollbar">
+          <Tabs defaultValue="registration" className="w-full">
+            <TabsList className="mb-4 bg-elevated border-2 border-edge">
+              <TabsTrigger
+                value="registration"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
+                <Users className="h-4 w-4" />
+                {t("admin.general")}
+              </TabsTrigger>
+              <TabsTrigger
+                value="oidc"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
+                <Shield className="h-4 w-4" />
+                OIDC
+              </TabsTrigger>
+              <TabsTrigger
+                value="users"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
+                <Users className="h-4 w-4" />
+                {t("admin.users")}
+              </TabsTrigger>
+              <TabsTrigger
+                value="sessions"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
+                <Clock className="h-4 w-4" />
+                Sessions
+              </TabsTrigger>
+              <TabsTrigger
+                value="roles"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
+                <Shield className="h-4 w-4" />
+                {t("rbac.roles.label")}
+              </TabsTrigger>
+              <TabsTrigger
+                value="security"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
+                <Database className="h-4 w-4" />
+                {t("admin.databaseSecurity")}
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="registration" className="space-y-6">
+              <GeneralSettingsTab
+                allowRegistration={allowRegistration}
+                setAllowRegistration={setAllowRegistration}
+                allowPasswordLogin={allowPasswordLogin}
+                setAllowPasswordLogin={setAllowPasswordLogin}
+                oidcConfig={oidcConfig}
+              />
+            </TabsContent>
+
+            <TabsContent value="oidc" className="space-y-6">
+              <OIDCSettingsTab
+                allowPasswordLogin={allowPasswordLogin}
+                oidcConfig={oidcConfig}
+                setOidcConfig={setOidcConfig}
+              />
+            </TabsContent>
+
+            <TabsContent value="users" className="space-y-6">
+              <UserManagementTab
+                users={users}
+                usersLoading={usersLoading}
+                allowPasswordLogin={allowPasswordLogin}
+                fetchUsers={fetchUsers}
+                onCreateUser={() => setCreateUserDialogOpen(true)}
+                onEditUser={handleEditUser}
+                onLinkOIDCUser={handleLinkOIDCUser}
+                onUnlinkOIDC={handleUnlinkOIDC}
+              />
+            </TabsContent>
+
+            <TabsContent value="sessions" className="space-y-6">
+              <SessionManagementTab
+                sessions={sessions}
+                sessionsLoading={sessionsLoading}
+                fetchSessions={fetchSessions}
+              />
+            </TabsContent>
+
+            <TabsContent value="roles" className="space-y-6">
+              <div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
+                <RolesTab />
+              </div>
+            </TabsContent>
+
+            <TabsContent value="security" className="space-y-6">
+              <DatabaseSecurityTab currentUser={currentUser} />
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+
+      {/* Dialogs */}
+      <CreateUserDialog
+        open={createUserDialogOpen}
+        onOpenChange={setCreateUserDialogOpen}
+        onSuccess={handleCreateUserSuccess}
+      />
+
+      <UserEditDialog
+        open={userEditDialogOpen}
+        onOpenChange={setUserEditDialogOpen}
+        user={selectedUserForEdit}
+        currentUser={currentUser}
+        onSuccess={handleEditUserSuccess}
+        allowPasswordLogin={allowPasswordLogin}
+      />
+
+      <LinkAccountDialog
+        open={linkAccountAlertOpen}
+        onOpenChange={setLinkAccountAlertOpen}
+        oidcUser={linkOidcUser}
+        onSuccess={handleLinkSuccess}
+      />
+    </div>
+  );
+}
+
+export default AdminSettings;

src/ui/desktop/apps/admin/dialogs/CreateUserDialog.tsx

@@ -0,0 +1,164 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { PasswordInput } from "@/components/ui/password-input.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+import { useTranslation } from "react-i18next";
+import { UserPlus, AlertCircle } from "lucide-react";
+import { toast } from "sonner";
+import { registerUser } from "@/ui/main-axios.ts";
+
+interface CreateUserDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+}
+
+export function CreateUserDialog({
+  open,
+  onOpenChange,
+  onSuccess,
+}: CreateUserDialogProps) {
+  const { t } = useTranslation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Reset form when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setUsername("");
+      setPassword("");
+      setError(null);
+    }
+  }, [open]);
+
+  const handleCreateUser = async (e?: React.FormEvent) => {
+    if (e) {
+      e.preventDefault();
+    }
+
+    if (!username.trim()) {
+      setError(t("admin.enterUsername"));
+      return;
+    }
+
+    if (!password.trim()) {
+      setError(t("admin.enterPassword"));
+      return;
+    }
+
+    if (password.length < 6) {
+      setError("Password must be at least 6 characters");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      await registerUser(username.trim(), password);
+      toast.success(
+        t("admin.userCreatedSuccessfully", { username: username.trim() }),
+      );
+      setUsername("");
+      setPassword("");
+      onSuccess();
+      onOpenChange(false);
+    } catch (err: unknown) {
+      const error = err as { response?: { data?: { error?: string } } };
+      const errorMessage =
+        error?.response?.data?.error || t("admin.failedToCreateUser");
+      setError(errorMessage);
+      toast.error(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(newOpen) => {
+        if (!loading) {
+          onOpenChange(newOpen);
+        }
+      }}
+    >
+      <DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <UserPlus className="w-5 h-5" />
+            {t("admin.createUser")}
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            {t("admin.createUserDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleCreateUser} className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="create-username">{t("admin.username")}</Label>
+            <Input
+              id="create-username"
+              value={username}
+              onChange={(e) => {
+                setUsername(e.target.value);
+                setError(null);
+              }}
+              placeholder={t("admin.enterUsername")}
+              disabled={loading}
+              autoFocus
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="create-password">{t("common.password")}</Label>
+            <PasswordInput
+              id="create-password"
+              value={password}
+              onChange={(e) => {
+                setPassword(e.target.value);
+                setError(null);
+              }}
+              placeholder={t("admin.enterPassword")}
+              disabled={loading}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleCreateUser();
+                }
+              }}
+            />
+            <p className="text-xs text-muted-foreground">
+              {t("admin.passwordMinLength")}
+            </p>
+          </div>
+
+          {error && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>{t("common.error")}</AlertTitle>
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+        </form>
+
+        <DialogFooter>
+          <Button onClick={() => handleCreateUser()} disabled={loading}>
+            {loading ? t("common.creating") : t("admin.createUser")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/ui/desktop/apps/admin/dialogs/LinkAccountDialog.tsx

@@ -0,0 +1,144 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+import { useTranslation } from "react-i18next";
+import { Link2 } from "lucide-react";
+import { toast } from "sonner";
+import { linkOIDCToPasswordAccount } from "@/ui/main-axios.ts";
+
+interface LinkAccountDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  oidcUser: { id: string; username: string } | null;
+  onSuccess: () => void;
+}
+
+export function LinkAccountDialog({
+  open,
+  onOpenChange,
+  oidcUser,
+  onSuccess,
+}: LinkAccountDialogProps) {
+  const { t } = useTranslation();
+  const [linkTargetUsername, setLinkTargetUsername] = useState("");
+  const [linkLoading, setLinkLoading] = useState(false);
+
+  // Reset form when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setLinkTargetUsername("");
+    }
+  }, [open]);
+
+  const handleLinkSubmit = async () => {
+    if (!oidcUser || !linkTargetUsername.trim()) {
+      toast.error("Target username is required");
+      return;
+    }
+
+    setLinkLoading(true);
+    try {
+      const result = await linkOIDCToPasswordAccount(
+        oidcUser.id,
+        linkTargetUsername.trim(),
+      );
+
+      toast.success(
+        result.message ||
+          `OIDC user ${oidcUser.username} linked to ${linkTargetUsername}`,
+      );
+      setLinkTargetUsername("");
+      onSuccess();
+      onOpenChange(false);
+    } catch (error: unknown) {
+      const err = error as {
+        response?: { data?: { error?: string; code?: string } };
+      };
+      toast.error(err.response?.data?.error || "Failed to link accounts");
+    } finally {
+      setLinkLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Link2 className="w-5 h-5" />
+            {t("admin.linkOidcToPasswordAccount")}
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            {t("admin.linkOidcToPasswordAccountDescription", {
+              username: oidcUser?.username,
+            })}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          <Alert variant="destructive">
+            <AlertTitle>{t("admin.linkOidcWarningTitle")}</AlertTitle>
+            <AlertDescription>
+              {t("admin.linkOidcWarningDescription")}
+              <ul className="list-disc list-inside mt-2 space-y-1">
+                <li>{t("admin.linkOidcActionDeleteUser")}</li>
+                <li>{t("admin.linkOidcActionAddCapability")}</li>
+                <li>{t("admin.linkOidcActionDualAuth")}</li>
+              </ul>
+            </AlertDescription>
+          </Alert>
+
+          <div className="space-y-2">
+            <Label
+              htmlFor="link-target-username"
+              className="text-base font-semibold text-foreground"
+            >
+              {t("admin.linkTargetUsernameLabel")}
+            </Label>
+            <Input
+              id="link-target-username"
+              value={linkTargetUsername}
+              onChange={(e) => setLinkTargetUsername(e.target.value)}
+              placeholder={t("admin.linkTargetUsernamePlaceholder")}
+              disabled={linkLoading}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && linkTargetUsername.trim()) {
+                  handleLinkSubmit();
+                }
+              }}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={linkLoading}
+          >
+            {t("common.cancel")}
+          </Button>
+          <Button
+            onClick={handleLinkSubmit}
+            disabled={linkLoading || !linkTargetUsername.trim()}
+            variant="destructive"
+          >
+            {linkLoading
+              ? t("admin.linkingAccounts")
+              : t("admin.linkAccountsButton")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/ui/desktop/apps/admin/dialogs/UserEditDialog.tsx

@@ -0,0 +1,625 @@
+import React, { useState, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog.tsx";
+import { Button } from "@/components/ui/button.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { Badge } from "@/components/ui/badge.tsx";
+import { Switch } from "@/components/ui/switch.tsx";
+import { Separator } from "@/components/ui/separator.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+import { useTranslation } from "react-i18next";
+import {
+  UserCog,
+  Trash2,
+  Plus,
+  AlertCircle,
+  Shield,
+  Key,
+  Clock,
+} from "lucide-react";
+import { toast } from "sonner";
+import { useConfirmation } from "@/hooks/use-confirmation.ts";
+import {
+  getUserRoles,
+  getRoles,
+  assignRoleToUser,
+  removeRoleFromUser,
+  makeUserAdmin,
+  removeAdminStatus,
+  initiatePasswordReset,
+  revokeAllUserSessions,
+  deleteUser,
+  type UserRole,
+  type Role,
+} from "@/ui/main-axios.ts";
+
+interface User {
+  id: string;
+  username: string;
+  is_admin: boolean;
+  is_oidc: boolean;
+  password_hash?: string;
+}
+
+interface UserEditDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user: User | null;
+  currentUser: { id: string; username: string } | null;
+  onSuccess: () => void;
+  allowPasswordLogin: boolean;
+}
+
+export function UserEditDialog({
+  open,
+  onOpenChange,
+  user,
+  currentUser,
+  onSuccess,
+  allowPasswordLogin,
+}: UserEditDialogProps) {
+  const { t } = useTranslation();
+  const { confirmWithToast } = useConfirmation();
+
+  const [adminLoading, setAdminLoading] = useState(false);
+  const [passwordResetLoading, setPasswordResetLoading] = useState(false);
+  const [sessionLoading, setSessionLoading] = useState(false);
+  const [deleteLoading, setDeleteLoading] = useState(false);
+  const [rolesLoading, setRolesLoading] = useState(false);
+
+  const [userRoles, setUserRoles] = useState<UserRole[]>([]);
+  const [availableRoles, setAvailableRoles] = useState<Role[]>([]);
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  const isCurrentUser = user?.id === currentUser?.id;
+
+  useEffect(() => {
+    if (open && user) {
+      setIsAdmin(user.is_admin);
+      loadRoles();
+    }
+  }, [open, user]);
+
+  const loadRoles = async () => {
+    if (!user) return;
+
+    setRolesLoading(true);
+    try {
+      const [rolesResponse, allRolesResponse] = await Promise.all([
+        getUserRoles(user.id),
+        getRoles(),
+      ]);
+
+      setUserRoles(rolesResponse.roles || []);
+      setAvailableRoles(allRolesResponse.roles || []);
+    } catch (error) {
+      console.error("Failed to load roles:", error);
+      toast.error(t("rbac.failedToLoadRoles"));
+    } finally {
+      setRolesLoading(false);
+    }
+  };
+
+  const handleToggleAdmin = async (checked: boolean) => {
+    if (!user) return;
+
+    if (isCurrentUser) {
+      toast.error(t("admin.cannotRemoveOwnAdmin"));
+      return;
+    }
+
+    // Close dialog temporarily to show confirmation toast on top
+    const userToUpdate = user;
+    onOpenChange(false);
+
+    const confirmed = await confirmWithToast({
+      title: checked ? t("admin.makeUserAdmin") : t("admin.removeAdmin"),
+      description: checked
+        ? t("admin.confirmMakeAdmin", { username: userToUpdate.username })
+        : t("admin.confirmRemoveAdmin", { username: userToUpdate.username }),
+      confirmText: checked ? t("admin.makeAdmin") : t("admin.removeAdmin"),
+      cancelText: t("common.cancel"),
+      variant: checked ? "default" : "destructive",
+    });
+
+    if (!confirmed) {
+      onOpenChange(true);
+      return;
+    }
+
+    setAdminLoading(true);
+    try {
+      if (checked) {
+        await makeUserAdmin(userToUpdate.username);
+        toast.success(
+          t("admin.userIsNowAdmin", { username: userToUpdate.username }),
+        );
+      } else {
+        await removeAdminStatus(userToUpdate.username);
+        toast.success(
+          t("admin.adminStatusRemoved", { username: userToUpdate.username }),
+        );
+      }
+      setIsAdmin(checked);
+      onSuccess();
+      onOpenChange(true);
+    } catch (error) {
+      console.error("Failed to toggle admin status:", error);
+      toast.error(
+        checked
+          ? t("admin.failedToMakeUserAdmin")
+          : t("admin.failedToRemoveAdminStatus"),
+      );
+      onOpenChange(true);
+    } finally {
+      setAdminLoading(false);
+    }
+  };
+
+  const handlePasswordReset = async () => {
+    if (!user) return;
+
+    // Close dialog temporarily to show confirmation toast on top
+    const userToReset = user;
+    onOpenChange(false);
+
+    const confirmed = await confirmWithToast({
+      title: t("admin.resetUserPassword"),
+      description: `${t("admin.passwordResetWarning")} (${userToReset.username})`,
+      confirmText: t("admin.resetUserPassword"),
+      cancelText: t("common.cancel"),
+      variant: "destructive",
+    });
+
+    if (!confirmed) {
+      onOpenChange(true);
+      return;
+    }
+
+    setPasswordResetLoading(true);
+    try {
+      await initiatePasswordReset(userToReset.username);
+      toast.success(
+        t("admin.passwordResetInitiated", { username: userToReset.username }),
+      );
+      onSuccess();
+      onOpenChange(true);
+    } catch (error) {
+      console.error("Failed to reset password:", error);
+      toast.error(t("admin.failedToResetPassword"));
+      onOpenChange(true);
+    } finally {
+      setPasswordResetLoading(false);
+    }
+  };
+
+  const handleAssignRole = async (roleId: number) => {
+    if (!user) return;
+
+    try {
+      await assignRoleToUser(user.id, roleId);
+      toast.success(
+        t("rbac.roleAssignedSuccessfully", { username: user.username }),
+      );
+      await loadRoles();
+    } catch (error) {
+      console.error("Failed to assign role:", error);
+      toast.error(t("rbac.failedToAssignRole"));
+    }
+  };
+
+  const handleRemoveRole = async (roleId: number) => {
+    if (!user) return;
+
+    // Close dialog temporarily to show confirmation toast on top
+    const userToUpdate = user;
+    onOpenChange(false);
+
+    const confirmed = await confirmWithToast({
+      title: t("rbac.confirmRemoveRole"),
+      description: t("rbac.confirmRemoveRoleDescription"),
+      confirmText: t("common.remove"),
+      cancelText: t("common.cancel"),
+      variant: "destructive",
+    });
+
+    if (!confirmed) {
+      onOpenChange(true);
+      return;
+    }
+
+    try {
+      await removeRoleFromUser(userToUpdate.id, roleId);
+      toast.success(
+        t("rbac.roleRemovedSuccessfully", { username: userToUpdate.username }),
+      );
+      await loadRoles();
+      onOpenChange(true);
+    } catch (error) {
+      console.error("Failed to remove role:", error);
+      toast.error(t("rbac.failedToRemoveRole"));
+      onOpenChange(true);
+    }
+  };
+
+  const handleRevokeAllSessions = async () => {
+    if (!user) return;
+
+    const isRevokingSelf = isCurrentUser;
+
+    // Close dialog temporarily to show confirmation toast on top
+    const userToUpdate = user;
+    onOpenChange(false);
+
+    const confirmed = await confirmWithToast({
+      title: t("admin.revokeAllSessions"),
+      description: isRevokingSelf
+        ? t("admin.confirmRevokeOwnSessions")
+        : t("admin.confirmRevokeAllSessions"),
+      confirmText: t("admin.revoke"),
+      cancelText: t("common.cancel"),
+      variant: "destructive",
+    });
+
+    if (!confirmed) {
+      onOpenChange(true);
+      return;
+    }
+
+    setSessionLoading(true);
+    try {
+      const data = await revokeAllUserSessions(userToUpdate.id);
+      toast.success(data.message || t("admin.sessionsRevokedSuccessfully"));
+
+      if (isRevokingSelf) {
+        setTimeout(() => {
+          window.location.reload();
+        }, 1000);
+      } else {
+        onSuccess();
+        onOpenChange(true);
+      }
+    } catch (error) {
+      console.error("Failed to revoke sessions:", error);
+      toast.error(t("admin.failedToRevokeSessions"));
+      onOpenChange(true);
+    } finally {
+      setSessionLoading(false);
+    }
+  };
+
+  const handleDeleteUser = async () => {
+    if (!user) return;
+
+    if (isCurrentUser) {
+      toast.error(t("admin.cannotDeleteSelf"));
+      return;
+    }
+
+    // Close dialog temporarily to show confirmation toast on top
+    const userToDelete = user;
+    onOpenChange(false);
+
+    const confirmed = await confirmWithToast({
+      title: t("admin.deleteUserTitle"),
+      description: t("admin.deleteUser", { username: userToDelete.username }),
+      confirmText: t("common.delete"),
+      cancelText: t("common.cancel"),
+      variant: "destructive",
+    });
+
+    if (!confirmed) {
+      // Reopen dialog if user cancels
+      onOpenChange(true);
+      return;
+    }
+
+    setDeleteLoading(true);
+    try {
+      await deleteUser(userToDelete.username);
+      toast.success(
+        t("admin.userDeletedSuccessfully", { username: userToDelete.username }),
+      );
+      onSuccess();
+    } catch (error) {
+      console.error("Failed to delete user:", error);
+      toast.error(t("admin.failedToDeleteUser"));
+      onOpenChange(true);
+    } finally {
+      setDeleteLoading(false);
+    }
+  };
+
+  const getAuthTypeDisplay = (): string => {
+    if (!user) return "";
+    if (user.is_oidc && user.password_hash) {
+      return t("admin.dualAuth");
+    } else if (user.is_oidc) {
+      return t("admin.externalOIDC");
+    } else {
+      return t("admin.localPassword");
+    }
+  };
+
+  if (!user) return null;
+
+  const showPasswordReset =
+    allowPasswordLogin && (user.password_hash || !user.is_oidc);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl bg-canvas border-2 border-edge">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <UserCog className="w-5 h-5" />
+            {t("admin.manageUser")}: {user.username}
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            {t("admin.manageUserDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4 max-h-[70vh] overflow-y-auto thin-scrollbar pr-2">
+          {/* READ-ONLY INFO SECTION */}
+          <div className="grid grid-cols-2 gap-4 p-4 bg-surface rounded-lg border border-edge">
+            <div>
+              <Label className="text-muted-foreground text-xs">
+                {t("admin.username")}
+              </Label>
+              <p className="font-medium">{user.username}</p>
+            </div>
+            <div>
+              <Label className="text-muted-foreground text-xs">
+                {t("admin.authType")}
+              </Label>
+              <p className="font-medium">{getAuthTypeDisplay()}</p>
+            </div>
+            <div>
+              <Label className="text-muted-foreground text-xs">
+                {t("admin.adminStatus")}
+              </Label>
+              <p className="font-medium">
+                {isAdmin ? (
+                  <Badge variant="secondary">{t("admin.adminBadge")}</Badge>
+                ) : (
+                  t("admin.regularUser")
+                )}
+              </p>
+            </div>
+            <div>
+              <Label className="text-muted-foreground text-xs">
+                {t("admin.userId")}
+              </Label>
+              <p className="font-mono text-xs truncate">{user.id}</p>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* ADMIN TOGGLE SECTION */}
+          <div className="space-y-3">
+            <Label className="text-base font-semibold flex items-center gap-2">
+              <Shield className="h-4 w-4" />
+              {t("admin.adminPrivileges")}
+            </Label>
+            <div className="flex items-center justify-between p-3 border border-edge rounded-lg bg-surface">
+              <div className="flex-1">
+                <p className="font-medium">{t("admin.administratorRole")}</p>
+                <p className="text-sm text-muted-foreground">
+                  {t("admin.administratorRoleDescription")}
+                </p>
+              </div>
+              <Switch
+                checked={isAdmin}
+                onCheckedChange={handleToggleAdmin}
+                disabled={isCurrentUser || adminLoading}
+              />
+            </div>
+            {isCurrentUser && (
+              <p className="text-xs text-muted-foreground">
+                {t("admin.cannotModifyOwnAdminStatus")}
+              </p>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* PASSWORD RESET SECTION */}
+          {showPasswordReset && (
+            <>
+              <div className="space-y-3">
+                <Label className="text-base font-semibold flex items-center gap-2">
+                  <Key className="h-4 w-4" />
+                  {t("admin.passwordManagement")}
+                </Label>
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertTitle>{t("common.warning")}</AlertTitle>
+                  <AlertDescription>
+                    {t("admin.passwordResetWarning")}
+                  </AlertDescription>
+                </Alert>
+                <Button
+                  variant="destructive"
+                  onClick={handlePasswordReset}
+                  disabled={passwordResetLoading}
+                  className="w-full"
+                >
+                  {passwordResetLoading
+                    ? t("admin.resettingPassword")
+                    : t("admin.resetUserPassword")}
+                </Button>
+              </div>
+              <Separator />
+            </>
+          )}
+
+          {/* ROLE MANAGEMENT SECTION */}
+          <div className="space-y-4">
+            <Label className="text-base font-semibold flex items-center gap-2">
+              <UserCog className="h-4 w-4" />
+              {t("rbac.roleManagement")}
+            </Label>
+
+            {rolesLoading ? (
+              <div className="text-center py-4 text-muted-foreground text-sm">
+                {t("common.loading")}
+              </div>
+            ) : (
+              <>
+                {/* Current Roles */}
+                <div className="space-y-2">
+                  <Label className="text-sm text-muted-foreground">
+                    {t("rbac.currentRoles")}
+                  </Label>
+                  {userRoles.length === 0 ? (
+                    <p className="text-sm text-muted-foreground italic py-2">
+                      {t("rbac.noRolesAssigned")}
+                    </p>
+                  ) : (
+                    <div className="space-y-2">
+                      {userRoles.map((role) => (
+                        <div
+                          key={role.roleId}
+                          className="flex items-center justify-between p-3 border border-edge rounded-lg bg-surface"
+                        >
+                          <div>
+                            <p className="font-medium text-sm">
+                              {t(role.roleDisplayName)}
+                            </p>
+                            <p className="text-xs text-muted-foreground">
+                              {role.roleName}
+                            </p>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            {role.isSystem && (
+                              <Badge variant="secondary" className="text-xs">
+                                {t("rbac.systemRole")}
+                              </Badge>
+                            )}
+                            {!role.isSystem && (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleRemoveRole(role.roleId)}
+                                className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-950/30"
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {/* Assign New Role */}
+                <div className="space-y-2">
+                  <Label className="text-sm text-muted-foreground">
+                    {t("rbac.assignNewRole")}
+                  </Label>
+                  <div className="flex flex-wrap gap-2">
+                    {availableRoles
+                      .filter(
+                        (role) =>
+                          !role.isSystem &&
+                          !userRoles.some((ur) => ur.roleId === role.id),
+                      )
+                      .map((role) => (
+                        <Button
+                          key={role.id}
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleAssignRole(role.id)}
+                        >
+                          <Plus className="h-3 w-3 mr-1" />
+                          {t(role.displayName)}
+                        </Button>
+                      ))}
+                    {availableRoles.filter(
+                      (role) =>
+                        !role.isSystem &&
+                        !userRoles.some((ur) => ur.roleId === role.id),
+                    ).length === 0 && (
+                      <p className="text-sm text-muted-foreground italic">
+                        {t("rbac.noCustomRolesToAssign")}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+
+          <Separator />
+
+          {/* SESSION MANAGEMENT SECTION */}
+          <div className="space-y-3">
+            <Label className="text-base font-semibold flex items-center gap-2">
+              <Clock className="h-4 w-4" />
+              {t("admin.sessionManagement")}
+            </Label>
+            <div className="flex items-center justify-between p-3 border border-edge rounded-lg bg-surface">
+              <div className="flex-1">
+                <p className="font-medium text-sm">
+                  {t("admin.revokeAllSessions")}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {t("admin.revokeAllSessionsDescription")}
+                </p>
+              </div>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={handleRevokeAllSessions}
+                disabled={sessionLoading}
+              >
+                {sessionLoading ? t("admin.revoking") : t("admin.revoke")}
+              </Button>
+            </div>
+          </div>
+
+          <Separator />
+
+          {/* DANGER ZONE - DELETE USER */}
+          <div className="space-y-3">
+            <Label className="text-base font-semibold text-destructive flex items-center gap-2">
+              <AlertCircle className="h-4 w-4" />
+              {t("admin.dangerZone")}
+            </Label>
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>{t("admin.deleteUserTitle")}</AlertTitle>
+              <AlertDescription>
+                {t("admin.deleteUserWarning")}
+              </AlertDescription>
+            </Alert>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteUser}
+              disabled={isCurrentUser || deleteLoading}
+              className="w-full"
+            >
+              <Trash2 className="h-4 w-4 mr-2" />
+              {deleteLoading
+                ? t("admin.deleting")
+                : `${t("common.delete")} ${user.username}`}
+            </Button>
+            {isCurrentUser && (
+              <p className="text-xs text-muted-foreground text-center">
+                {t("admin.cannotDeleteSelf")}
+              </p>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/ui/desktop/apps/admin/tabs/DatabaseSecurityTab.tsx

@@ -0,0 +1,319 @@
+import React from "react";
+import { Button } from "@/components/ui/button.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { PasswordInput } from "@/components/ui/password-input.tsx";
+import { Download, Upload } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { isElectron } from "@/ui/main-axios.ts";
+
+interface DatabaseSecurityTabProps {
+  currentUser: {
+    is_oidc: boolean;
+  } | null;
+}
+
+export function DatabaseSecurityTab({
+  currentUser,
+}: DatabaseSecurityTabProps): React.ReactElement {
+  const { t } = useTranslation();
+
+  const [exportLoading, setExportLoading] = React.useState(false);
+  const [importLoading, setImportLoading] = React.useState(false);
+  const [importFile, setImportFile] = React.useState<File | null>(null);
+  const [exportPassword, setExportPassword] = React.useState("");
+  const [showPasswordInput, setShowPasswordInput] = React.useState(false);
+  const [importPassword, setImportPassword] = React.useState("");
+
+  const requiresImportPassword = React.useMemo(
+    () => !currentUser?.is_oidc,
+    [currentUser?.is_oidc],
+  );
+
+  const handleExportDatabase = async () => {
+    if (!showPasswordInput) {
+      setShowPasswordInput(true);
+      return;
+    }
+
+    if (!exportPassword.trim()) {
+      toast.error(t("admin.passwordRequired"));
+      return;
+    }
+
+    setExportLoading(true);
+    try {
+      const isDev =
+        !isElectron() &&
+        process.env.NODE_ENV === "development" &&
+        (window.location.port === "3000" ||
+          window.location.port === "5173" ||
+          window.location.port === "" ||
+          window.location.hostname === "localhost" ||
+          window.location.hostname === "127.0.0.1");
+
+      const apiUrl = isElectron()
+        ? `${(window as { configuredServerUrl?: string }).configuredServerUrl}/database/export`
+        : isDev
+          ? `http://localhost:30001/database/export`
+          : `${window.location.protocol}//${window.location.host}/database/export`;
+
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        credentials: "include",
+        body: JSON.stringify({ password: exportPassword }),
+      });
+
+      if (response.ok) {
+        const blob = await response.blob();
+        const contentDisposition = response.headers.get("content-disposition");
+        const filename =
+          contentDisposition?.match(/filename="([^"]+)"/)?.[1] ||
+          "termix-export.sqlite";
+
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+
+        toast.success(t("admin.databaseExportedSuccessfully"));
+        setExportPassword("");
+        setShowPasswordInput(false);
+      } else {
+        const error = await response.json();
+        if (error.code === "PASSWORD_REQUIRED") {
+          toast.error(t("admin.passwordRequired"));
+        } else {
+          toast.error(error.error || t("admin.databaseExportFailed"));
+        }
+      }
+    } catch {
+      toast.error(t("admin.databaseExportFailed"));
+    } finally {
+      setExportLoading(false);
+    }
+  };
+
+  const handleImportDatabase = async () => {
+    if (!importFile) {
+      toast.error(t("admin.pleaseSelectImportFile"));
+      return;
+    }
+
+    if (requiresImportPassword && !importPassword.trim()) {
+      toast.error(t("admin.passwordRequired"));
+      return;
+    }
+
+    setImportLoading(true);
+    try {
+      const isDev =
+        !isElectron() &&
+        process.env.NODE_ENV === "development" &&
+        (window.location.port === "3000" ||
+          window.location.port === "5173" ||
+          window.location.port === "" ||
+          window.location.hostname === "localhost" ||
+          window.location.hostname === "127.0.0.1");
+
+      const apiUrl = isElectron()
+        ? `${(window as { configuredServerUrl?: string }).configuredServerUrl}/database/import`
+        : isDev
+          ? `http://localhost:30001/database/import`
+          : `${window.location.protocol}//${window.location.host}/database/import`;
+
+      const formData = new FormData();
+      formData.append("file", importFile);
+      if (requiresImportPassword) {
+        formData.append("password", importPassword);
+      }
+
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        credentials: "include",
+        body: formData,
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        if (result.success) {
+          const summary = result.summary;
+          const imported =
+            summary.sshHostsImported +
+            summary.sshCredentialsImported +
+            summary.fileManagerItemsImported +
+            summary.dismissedAlertsImported +
+            (summary.settingsImported || 0);
+          const skipped = summary.skippedItems;
+
+          const details = [];
+          if (summary.sshHostsImported > 0)
+            details.push(`${summary.sshHostsImported} SSH hosts`);
+          if (summary.sshCredentialsImported > 0)
+            details.push(`${summary.sshCredentialsImported} credentials`);
+          if (summary.fileManagerItemsImported > 0)
+            details.push(
+              `${summary.fileManagerItemsImported} file manager items`,
+            );
+          if (summary.dismissedAlertsImported > 0)
+            details.push(`${summary.dismissedAlertsImported} alerts`);
+          if (summary.settingsImported > 0)
+            details.push(`${summary.settingsImported} settings`);
+
+          toast.success(
+            `Import completed: ${imported} items imported${details.length > 0 ? ` (${details.join(", ")})` : ""}, ${skipped} items skipped`,
+          );
+          setImportFile(null);
+          setImportPassword("");
+
+          setTimeout(() => {
+            window.location.reload();
+          }, 1500);
+        } else {
+          toast.error(
+            `${t("admin.databaseImportFailed")}: ${result.summary?.errors?.join(", ") || "Unknown error"}`,
+          );
+        }
+      } else {
+        const error = await response.json();
+        if (error.code === "PASSWORD_REQUIRED") {
+          toast.error(t("admin.passwordRequired"));
+        } else {
+          toast.error(error.error || t("admin.databaseImportFailed"));
+        }
+      }
+    } catch {
+      toast.error(t("admin.databaseImportFailed"));
+    } finally {
+      setImportLoading(false);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
+      <h3 className="text-lg font-semibold">{t("admin.databaseSecurity")}</h3>
+
+      <div className="grid gap-3 md:grid-cols-2">
+        <div className="p-4 border rounded-lg bg-surface">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Download className="h-4 w-4 text-blue-500" />
+              <h4 className="font-semibold">{t("admin.export")}</h4>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t("admin.exportDescription")}
+            </p>
+            {showPasswordInput && (
+              <div className="space-y-2">
+                <Label htmlFor="export-password">Password</Label>
+                <PasswordInput
+                  id="export-password"
+                  value={exportPassword}
+                  onChange={(e) => setExportPassword(e.target.value)}
+                  placeholder="Enter your password"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleExportDatabase();
+                    }
+                  }}
+                />
+              </div>
+            )}
+            <Button
+              onClick={handleExportDatabase}
+              disabled={exportLoading}
+              className="w-full"
+            >
+              {exportLoading
+                ? t("admin.exporting")
+                : showPasswordInput
+                  ? t("admin.confirmExport")
+                  : t("admin.export")}
+            </Button>
+            {showPasswordInput && (
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setShowPasswordInput(false);
+                  setExportPassword("");
+                }}
+                className="w-full"
+              >
+                Cancel
+              </Button>
+            )}
+          </div>
+        </div>
+
+        <div className="p-4 border rounded-lg bg-surface">
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Upload className="h-4 w-4 text-green-500" />
+              <h4 className="font-semibold">{t("admin.import")}</h4>
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {t("admin.importDescription")}
+            </p>
+            <div className="relative inline-block w-full mb-2">
+              <input
+                id="import-file-upload"
+                type="file"
+                accept=".sqlite,.db"
+                onChange={(e) => setImportFile(e.target.files?.[0] || null)}
+                className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+              />
+              <Button
+                type="button"
+                variant="outline"
+                className="w-full justify-start text-left"
+              >
+                <span
+                  className="truncate"
+                  title={importFile?.name || t("admin.pleaseSelectImportFile")}
+                >
+                  {importFile
+                    ? importFile.name
+                    : t("admin.pleaseSelectImportFile")}
+                </span>
+              </Button>
+            </div>
+            {importFile && requiresImportPassword && (
+              <div className="space-y-2">
+                <Label htmlFor="import-password">Password</Label>
+                <PasswordInput
+                  id="import-password"
+                  value={importPassword}
+                  onChange={(e) => setImportPassword(e.target.value)}
+                  placeholder="Enter your password"
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      handleImportDatabase();
+                    }
+                  }}
+                />
+              </div>
+            )}
+            <Button
+              onClick={handleImportDatabase}
+              disabled={
+                importLoading ||
+                !importFile ||
+                (requiresImportPassword && !importPassword.trim())
+              }
+              className="w-full"
+            >
+              {importLoading ? t("admin.importing") : t("admin.import")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/ui/desktop/apps/admin/tabs/GeneralSettingsTab.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { Checkbox } from "@/components/ui/checkbox.tsx";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useConfirmation } from "@/hooks/use-confirmation.ts";
+import {
+  updateRegistrationAllowed,
+  updatePasswordLoginAllowed,
+} from "@/ui/main-axios.ts";
+
+interface GeneralSettingsTabProps {
+  allowRegistration: boolean;
+  setAllowRegistration: (value: boolean) => void;
+  allowPasswordLogin: boolean;
+  setAllowPasswordLogin: (value: boolean) => void;
+  oidcConfig: {
+    client_id: string;
+    client_secret: string;
+    issuer_url: string;
+    authorization_url: string;
+    token_url: string;
+  };
+}
+
+export function GeneralSettingsTab({
+  allowRegistration,
+  setAllowRegistration,
+  allowPasswordLogin,
+  setAllowPasswordLogin,
+  oidcConfig,
+}: GeneralSettingsTabProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { confirmWithToast } = useConfirmation();
+
+  const [regLoading, setRegLoading] = React.useState(false);
+  const [passwordLoginLoading, setPasswordLoginLoading] = React.useState(false);
+
+  const handleToggleRegistration = async (checked: boolean) => {
+    setRegLoading(true);
+    try {
+      await updateRegistrationAllowed(checked);
+      setAllowRegistration(checked);
+    } finally {
+      setRegLoading(false);
+    }
+  };
+
+  const handleTogglePasswordLogin = async (checked: boolean) => {
+    if (!checked) {
+      const hasOIDCConfigured =
+        oidcConfig.client_id &&
+        oidcConfig.client_secret &&
+        oidcConfig.issuer_url &&
+        oidcConfig.authorization_url &&
+        oidcConfig.token_url;
+
+      if (!hasOIDCConfigured) {
+        toast.error(t("admin.cannotDisablePasswordLoginWithoutOIDC"), {
+          duration: 5000,
+        });
+        return;
+      }
+
+      confirmWithToast(
+        t("admin.confirmDisablePasswordLogin"),
+        async () => {
+          setPasswordLoginLoading(true);
+          try {
+            await updatePasswordLoginAllowed(checked);
+            setAllowPasswordLogin(checked);
+
+            if (allowRegistration) {
+              await updateRegistrationAllowed(false);
+              setAllowRegistration(false);
+              toast.success(t("admin.passwordLoginAndRegistrationDisabled"));
+            } else {
+              toast.success(t("admin.passwordLoginDisabled"));
+            }
+          } catch {
+            toast.error(t("admin.failedToUpdatePasswordLoginStatus"));
+          } finally {
+            setPasswordLoginLoading(false);
+          }
+        },
+        "destructive",
+      );
+      return;
+    }
+
+    setPasswordLoginLoading(true);
+    try {
+      await updatePasswordLoginAllowed(checked);
+      setAllowPasswordLogin(checked);
+    } finally {
+      setPasswordLoginLoading(false);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
+      <h3 className="text-lg font-semibold">{t("admin.userRegistration")}</h3>
+      <label className="flex items-center gap-2">
+        <Checkbox
+          checked={allowRegistration}
+          onCheckedChange={handleToggleRegistration}
+          disabled={regLoading || !allowPasswordLogin}
+        />
+        {t("admin.allowNewAccountRegistration")}
+        {!allowPasswordLogin && (
+          <span className="text-xs text-muted-foreground">
+            ({t("admin.requiresPasswordLogin")})
+          </span>
+        )}
+      </label>
+      <label className="flex items-center gap-2">
+        <Checkbox
+          checked={allowPasswordLogin}
+          onCheckedChange={handleTogglePasswordLogin}
+          disabled={passwordLoginLoading}
+        />
+        {t("admin.allowPasswordLogin")}
+      </label>
+    </div>
+  );
+}

src/ui/desktop/apps/admin/tabs/OIDCSettingsTab.tsx

@@ -0,0 +1,319 @@
+import React from "react";
+import { Button } from "@/components/ui/button.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { PasswordInput } from "@/components/ui/password-input.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useConfirmation } from "@/hooks/use-confirmation.ts";
+import { updateOIDCConfig, disableOIDCConfig } from "@/ui/main-axios.ts";
+
+interface OIDCSettingsTabProps {
+  allowPasswordLogin: boolean;
+  oidcConfig: {
+    client_id: string;
+    client_secret: string;
+    issuer_url: string;
+    authorization_url: string;
+    token_url: string;
+    identifier_path: string;
+    name_path: string;
+    scopes: string;
+    userinfo_url: string;
+  };
+  setOidcConfig: React.Dispatch<
+    React.SetStateAction<{
+      client_id: string;
+      client_secret: string;
+      issuer_url: string;
+      authorization_url: string;
+      token_url: string;
+      identifier_path: string;
+      name_path: string;
+      scopes: string;
+      userinfo_url: string;
+    }>
+  >;
+}
+
+export function OIDCSettingsTab({
+  allowPasswordLogin,
+  oidcConfig,
+  setOidcConfig,
+}: OIDCSettingsTabProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { confirmWithToast } = useConfirmation();
+
+  const [oidcLoading, setOidcLoading] = React.useState(false);
+  const [oidcError, setOidcError] = React.useState<string | null>(null);
+
+  const handleOIDCConfigSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setOidcLoading(true);
+    setOidcError(null);
+
+    const required = [
+      "client_id",
+      "client_secret",
+      "issuer_url",
+      "authorization_url",
+      "token_url",
+    ];
+    const missing = required.filter(
+      (f) => !oidcConfig[f as keyof typeof oidcConfig],
+    );
+    if (missing.length > 0) {
+      setOidcError(
+        t("admin.missingRequiredFields", { fields: missing.join(", ") }),
+      );
+      setOidcLoading(false);
+      return;
+    }
+
+    try {
+      await updateOIDCConfig(oidcConfig);
+      toast.success(t("admin.oidcConfigurationUpdated"));
+    } catch (err: unknown) {
+      setOidcError(
+        (err as { response?: { data?: { error?: string } } })?.response?.data
+          ?.error || t("admin.failedToUpdateOidcConfig"),
+      );
+    } finally {
+      setOidcLoading(false);
+    }
+  };
+
+  const handleOIDCConfigChange = (field: string, value: string) => {
+    setOidcConfig((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const handleResetConfig = async () => {
+    if (!allowPasswordLogin) {
+      confirmWithToast(
+        t("admin.confirmDisableOIDCWarning"),
+        async () => {
+          const emptyConfig = {
+            client_id: "",
+            client_secret: "",
+            issuer_url: "",
+            authorization_url: "",
+            token_url: "",
+            identifier_path: "",
+            name_path: "",
+            scopes: "",
+            userinfo_url: "",
+          };
+          setOidcConfig(emptyConfig);
+          setOidcError(null);
+          setOidcLoading(true);
+          try {
+            await disableOIDCConfig();
+            toast.success(t("admin.oidcConfigurationDisabled"));
+          } catch (err: unknown) {
+            setOidcError(
+              (
+                err as {
+                  response?: { data?: { error?: string } };
+                }
+              )?.response?.data?.error || t("admin.failedToDisableOidcConfig"),
+            );
+          } finally {
+            setOidcLoading(false);
+          }
+        },
+        "destructive",
+      );
+      return;
+    }
+
+    const emptyConfig = {
+      client_id: "",
+      client_secret: "",
+      issuer_url: "",
+      authorization_url: "",
+      token_url: "",
+      identifier_path: "",
+      name_path: "",
+      scopes: "",
+      userinfo_url: "",
+    };
+    setOidcConfig(emptyConfig);
+    setOidcError(null);
+    setOidcLoading(true);
+    try {
+      await disableOIDCConfig();
+      toast.success(t("admin.oidcConfigurationDisabled"));
+    } catch (err: unknown) {
+      setOidcError(
+        (
+          err as {
+            response?: { data?: { error?: string } };
+          }
+        )?.response?.data?.error || t("admin.failedToDisableOidcConfig"),
+      );
+    } finally {
+      setOidcLoading(false);
+    }
+  };
+
+  return (
+    <div className="rounded-lg border-2 border-border bg-card p-4 space-y-3">
+      <h3 className="text-lg font-semibold">
+        {t("admin.externalAuthentication")}
+      </h3>
+      <div className="space-y-2">
+        <p className="text-sm text-muted-foreground">
+          {t("admin.configureExternalProvider")}
+        </p>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 px-3 text-xs"
+          onClick={() => window.open("https://docs.termix.site/oidc", "_blank")}
+        >
+          {t("common.documentation")}
+        </Button>
+      </div>
+
+      {!allowPasswordLogin && (
+        <Alert variant="destructive">
+          <AlertTitle>{t("admin.criticalWarning")}</AlertTitle>
+          <AlertDescription>{t("admin.oidcRequiredWarning")}</AlertDescription>
+        </Alert>
+      )}
+
+      {oidcError && (
+        <Alert variant="destructive">
+          <AlertTitle>{t("common.error")}</AlertTitle>
+          <AlertDescription>{oidcError}</AlertDescription>
+        </Alert>
+      )}
+
+      <form onSubmit={handleOIDCConfigSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="client_id">{t("admin.clientId")}</Label>
+          <Input
+            id="client_id"
+            value={oidcConfig.client_id}
+            onChange={(e) =>
+              handleOIDCConfigChange("client_id", e.target.value)
+            }
+            placeholder={t("placeholders.clientId")}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="client_secret">{t("admin.clientSecret")}</Label>
+          <PasswordInput
+            id="client_secret"
+            value={oidcConfig.client_secret}
+            onChange={(e) =>
+              handleOIDCConfigChange("client_secret", e.target.value)
+            }
+            placeholder={t("placeholders.clientSecret")}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="authorization_url">
+            {t("admin.authorizationUrl")}
+          </Label>
+          <Input
+            id="authorization_url"
+            value={oidcConfig.authorization_url}
+            onChange={(e) =>
+              handleOIDCConfigChange("authorization_url", e.target.value)
+            }
+            placeholder={t("placeholders.authUrl")}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="issuer_url">{t("admin.issuerUrl")}</Label>
+          <Input
+            id="issuer_url"
+            value={oidcConfig.issuer_url}
+            onChange={(e) =>
+              handleOIDCConfigChange("issuer_url", e.target.value)
+            }
+            placeholder={t("placeholders.redirectUrl")}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="token_url">{t("admin.tokenUrl")}</Label>
+          <Input
+            id="token_url"
+            value={oidcConfig.token_url}
+            onChange={(e) =>
+              handleOIDCConfigChange("token_url", e.target.value)
+            }
+            placeholder={t("placeholders.tokenUrl")}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="identifier_path">
+            {t("admin.userIdentifierPath")}
+          </Label>
+          <Input
+            id="identifier_path"
+            value={oidcConfig.identifier_path}
+            onChange={(e) =>
+              handleOIDCConfigChange("identifier_path", e.target.value)
+            }
+            placeholder={t("placeholders.userIdField")}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="name_path">{t("admin.displayNamePath")}</Label>
+          <Input
+            id="name_path"
+            value={oidcConfig.name_path}
+            onChange={(e) =>
+              handleOIDCConfigChange("name_path", e.target.value)
+            }
+            placeholder={t("placeholders.usernameField")}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="scopes">{t("admin.scopes")}</Label>
+          <Input
+            id="scopes"
+            value={oidcConfig.scopes}
+            onChange={(e) => handleOIDCConfigChange("scopes", e.target.value)}
+            placeholder={t("placeholders.scopes")}
+            required
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="userinfo_url">{t("admin.overrideUserInfoUrl")}</Label>
+          <Input
+            id="userinfo_url"
+            value={oidcConfig.userinfo_url}
+            onChange={(e) =>
+              handleOIDCConfigChange("userinfo_url", e.target.value)
+            }
+            placeholder="https://your-provider.com/application/o/userinfo/"
+          />
+        </div>
+        <div className="flex gap-2 pt-2">
+          <Button type="submit" className="flex-1" disabled={oidcLoading}>
+            {oidcLoading ? t("admin.saving") : t("admin.saveConfiguration")}
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleResetConfig}
+            disabled={oidcLoading}
+          >
+            {t("admin.reset")}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

src/ui/desktop/apps/admin/tabs/RolesTab.tsx

@@ -0,0 +1,300 @@
+import React from "react";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog.tsx";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table.tsx";
+import { Input } from "@/components/ui/input.tsx";
+import { Label } from "@/components/ui/label.tsx";
+import { Textarea } from "@/components/ui/textarea.tsx";
+import { Badge } from "@/components/ui/badge.tsx";
+import { Shield, Plus, Edit, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { useConfirmation } from "@/hooks/use-confirmation.ts";
+import {
+  getRoles,
+  createRole,
+  updateRole,
+  deleteRole,
+  type Role,
+} from "@/ui/main-axios.ts";
+
+export function RolesTab(): React.ReactElement {
+  const { t } = useTranslation();
+  const { confirmWithToast } = useConfirmation();
+
+  const [roles, setRoles] = React.useState<Role[]>([]);
+  const [loading, setLoading] = React.useState(false);
+
+  // Create/Edit Role Dialog
+  const [roleDialogOpen, setRoleDialogOpen] = React.useState(false);
+  const [editingRole, setEditingRole] = React.useState<Role | null>(null);
+  const [roleName, setRoleName] = React.useState("");
+  const [roleDisplayName, setRoleDisplayName] = React.useState("");
+  const [roleDescription, setRoleDescription] = React.useState("");
+
+  // Load roles
+  const loadRoles = React.useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await getRoles();
+      setRoles(response.roles || []);
+    } catch (error) {
+      toast.error(t("rbac.failedToLoadRoles"));
+      console.error("Failed to load roles:", error);
+      setRoles([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [t]);
+
+  React.useEffect(() => {
+    loadRoles();
+  }, [loadRoles]);
+
+  // Create role
+  const handleCreateRole = () => {
+    setEditingRole(null);
+    setRoleName("");
+    setRoleDisplayName("");
+    setRoleDescription("");
+    setRoleDialogOpen(true);
+  };
+
+  // Edit role
+  const handleEditRole = (role: Role) => {
+    setEditingRole(role);
+    setRoleName(role.name);
+    setRoleDisplayName(role.displayName);
+    setRoleDescription(role.description || "");
+    setRoleDialogOpen(true);
+  };
+
+  // Save role
+  const handleSaveRole = async () => {
+    if (!roleDisplayName.trim()) {
+      toast.error(t("rbac.roleDisplayNameRequired"));
+      return;
+    }
+
+    if (!editingRole && !roleName.trim()) {
+      toast.error(t("rbac.roleNameRequired"));
+      return;
+    }
+
+    try {
+      if (editingRole) {
+        // Update existing role
+        await updateRole(editingRole.id, {
+          displayName: roleDisplayName,
+          description: roleDescription || null,
+        });
+        toast.success(t("rbac.roleUpdatedSuccessfully"));
+      } else {
+        // Create new role
+        await createRole({
+          name: roleName,
+          displayName: roleDisplayName,
+          description: roleDescription || null,
+        });
+        toast.success(t("rbac.roleCreatedSuccessfully"));
+      }
+
+      setRoleDialogOpen(false);
+      loadRoles();
+    } catch (error) {
+      toast.error(t("rbac.failedToSaveRole"));
+    }
+  };
+
+  // Delete role
+  const handleDeleteRole = async (role: Role) => {
+    const confirmed = await confirmWithToast({
+      title: t("rbac.confirmDeleteRole"),
+      description: t("rbac.confirmDeleteRoleDescription", {
+        name: role.displayName,
+      }),
+      confirmText: t("common.delete"),
+      cancelText: t("common.cancel"),
+    });
+
+    if (!confirmed) return;
+
+    try {
+      await deleteRole(role.id);
+      toast.success(t("rbac.roleDeletedSuccessfully"));
+      loadRoles();
+    } catch (error) {
+      toast.error(t("rbac.failedToDeleteRole"));
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Roles Section */}
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold flex items-center gap-2">
+            <Shield className="h-5 w-5" />
+            {t("rbac.roleManagement")}
+          </h3>
+          <Button onClick={handleCreateRole}>
+            <Plus className="h-4 w-4 mr-2" />
+            {t("rbac.createRole")}
+          </Button>
+        </div>
+
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t("rbac.roleName")}</TableHead>
+              <TableHead>{t("rbac.displayName")}</TableHead>
+              <TableHead>{t("rbac.description")}</TableHead>
+              <TableHead>{t("rbac.type")}</TableHead>
+              <TableHead className="text-right">
+                {t("common.actions")}
+              </TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {loading ? (
+              <TableRow>
+                <TableCell
+                  colSpan={5}
+                  className="text-center text-muted-foreground"
+                >
+                  {t("common.loading")}
+                </TableCell>
+              </TableRow>
+            ) : roles.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={5}
+                  className="text-center text-muted-foreground"
+                >
+                  {t("rbac.noRoles")}
+                </TableCell>
+              </TableRow>
+            ) : (
+              roles.map((role) => (
+                <TableRow key={role.id}>
+                  <TableCell className="font-mono">{role.name}</TableCell>
+                  <TableCell>{t(role.displayName)}</TableCell>
+                  <TableCell className="max-w-xs truncate">
+                    {role.description || "-"}
+                  </TableCell>
+                  <TableCell>
+                    {role.isSystem ? (
+                      <Badge variant="secondary">{t("rbac.systemRole")}</Badge>
+                    ) : (
+                      <Badge variant="outline">{t("rbac.customRole")}</Badge>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      {!role.isSystem && (
+                        <>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => handleEditRole(role)}
+                          >
+                            <Edit className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => handleDeleteRole(role)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </>
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Create/Edit Role Dialog */}
+      <Dialog open={roleDialogOpen} onOpenChange={setRoleDialogOpen}>
+        <DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
+          <DialogHeader>
+            <DialogTitle>
+              {editingRole ? t("rbac.editRole") : t("rbac.createRole")}
+            </DialogTitle>
+            <DialogDescription>
+              {editingRole
+                ? t("rbac.editRoleDescription")
+                : t("rbac.createRoleDescription")}
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-6 py-4">
+            {!editingRole && (
+              <div className="space-y-2">
+                <Label htmlFor="role-name">{t("rbac.roleName")}</Label>
+                <Input
+                  id="role-name"
+                  value={roleName}
+                  onChange={(e) => setRoleName(e.target.value.toLowerCase())}
+                  placeholder="developer"
+                  disabled={!!editingRole}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {t("rbac.roleNameHint")}
+                </p>
+              </div>
+            )}
+
+            <div className="space-y-2">
+              <Label htmlFor="role-display-name">{t("rbac.displayName")}</Label>
+              <Input
+                id="role-display-name"
+                value={roleDisplayName}
+                onChange={(e) => setRoleDisplayName(e.target.value)}
+                placeholder={t("rbac.displayNamePlaceholder")}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="role-description">{t("rbac.description")}</Label>
+              <Textarea
+                id="role-description"
+                value={roleDescription}
+                onChange={(e) => setRoleDescription(e.target.value)}
+                placeholder={t("rbac.descriptionPlaceholder")}
+                rows={3}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRoleDialogOpen(false)}>
+              {t("common.cancel")}
+            </Button>
+            <Button onClick={handleSaveRole}>
+              {editingRole ? t("common.save") : t("common.create")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

src/ui/desktop/apps/admin/tabs/SessionManagementTab.tsx

@@ -0,0 +1,213 @@
+import React from "react";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table.tsx";
+import { Monitor, Smartphone, Globe, Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useConfirmation } from "@/hooks/use-confirmation.ts";
+import {
+  getCookie,
+  revokeSession,
+  revokeAllUserSessions,
+} from "@/ui/main-axios.ts";
+
+interface Session {
+  id: string;
+  userId: string;
+  username?: string;
+  deviceType: string;
+  deviceInfo: string;
+  createdAt: string;
+  expiresAt: string;
+  lastActiveAt: string;
+  jwtToken: string;
+  isRevoked?: boolean;
+}
+
+interface SessionManagementTabProps {
+  sessions: Session[];
+  sessionsLoading: boolean;
+  fetchSessions: () => void;
+}
+
+export function SessionManagementTab({
+  sessions,
+  sessionsLoading,
+  fetchSessions,
+}: SessionManagementTabProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { confirmWithToast } = useConfirmation();
+
+  const handleRevokeSession = async (sessionId: string) => {
+    const currentJWT = getCookie("jwt");
+    const currentSession = sessions.find((s) => s.jwtToken === currentJWT);
+    const isCurrentSession = currentSession?.id === sessionId;
+
+    confirmWithToast(
+      t("admin.confirmRevokeSession"),
+      async () => {
+        try {
+          await revokeSession(sessionId);
+          toast.success(t("admin.sessionRevokedSuccessfully"));
+
+          if (isCurrentSession) {
+            setTimeout(() => {
+              window.location.reload();
+            }, 1000);
+          } else {
+            fetchSessions();
+          }
+        } catch {
+          toast.error(t("admin.failedToRevokeSession"));
+        }
+      },
+      "destructive",
+    );
+  };
+
+  const handleRevokeAllUserSessions = async (userId: string) => {
+    confirmWithToast(
+      t("admin.confirmRevokeAllSessions"),
+      async () => {
+        try {
+          const data = await revokeAllUserSessions(userId);
+          toast.success(data.message || t("admin.sessionsRevokedSuccessfully"));
+          fetchSessions();
+        } catch {
+          toast.error(t("admin.failedToRevokeSessions"));
+        }
+      },
+      "destructive",
+    );
+  };
+
+  const formatDate = (date: Date) =>
+    date.toLocaleDateString() +
+    " " +
+    date.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+
+  return (
+    <div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">
+          {t("admin.sessionManagement")}
+        </h3>
+        <Button
+          onClick={fetchSessions}
+          disabled={sessionsLoading}
+          variant="outline"
+          size="sm"
+        >
+          {sessionsLoading ? t("admin.loading") : t("admin.refresh")}
+        </Button>
+      </div>
+      {sessionsLoading ? (
+        <div className="text-center py-8 text-muted-foreground">
+          {t("admin.loadingSessions")}
+        </div>
+      ) : sessions.length === 0 ? (
+        <div className="text-center py-8 text-muted-foreground">
+          {t("admin.noActiveSessions")}
+        </div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t("admin.device")}</TableHead>
+              <TableHead>{t("admin.user")}</TableHead>
+              <TableHead>{t("admin.created")}</TableHead>
+              <TableHead>{t("admin.lastActive")}</TableHead>
+              <TableHead>{t("admin.expires")}</TableHead>
+              <TableHead>{t("admin.actions")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sessions.map((session) => {
+              const DeviceIcon =
+                session.deviceType === "desktop"
+                  ? Monitor
+                  : session.deviceType === "mobile"
+                    ? Smartphone
+                    : Globe;
+
+              const createdDate = new Date(session.createdAt);
+              const lastActiveDate = new Date(session.lastActiveAt);
+              const expiresDate = new Date(session.expiresAt);
+
+              return (
+                <TableRow
+                  key={session.id}
+                  className={session.isRevoked ? "opacity-50" : undefined}
+                >
+                  <TableCell className="px-4">
+                    <div className="flex items-center gap-2">
+                      <DeviceIcon className="h-4 w-4" />
+                      <div className="flex flex-col">
+                        <span className="font-medium text-sm">
+                          {session.deviceInfo}
+                        </span>
+                        {session.isRevoked && (
+                          <span className="text-xs text-red-600">
+                            {t("admin.revoked")}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell className="px-4">
+                    {session.username || session.userId}
+                  </TableCell>
+                  <TableCell className="px-4 text-sm text-muted-foreground">
+                    {formatDate(createdDate)}
+                  </TableCell>
+                  <TableCell className="px-4 text-sm text-muted-foreground">
+                    {formatDate(lastActiveDate)}
+                  </TableCell>
+                  <TableCell className="px-4 text-sm text-muted-foreground">
+                    {formatDate(expiresDate)}
+                  </TableCell>
+                  <TableCell className="px-4">
+                    <div className="flex gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRevokeSession(session.id)}
+                        className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                        disabled={session.isRevoked}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                      {session.username && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() =>
+                            handleRevokeAllUserSessions(session.userId)
+                          }
+                          className="text-orange-600 hover:text-orange-700 hover:bg-orange-50 text-xs"
+                          title={t("admin.revokeAllUserSessionsTitle")}
+                        >
+                          {t("admin.revokeAll")}
+                        </Button>
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+}

src/ui/desktop/apps/admin/tabs/UserManagementTab.tsx

@@ -0,0 +1,177 @@
+import React from "react";
+import { Button } from "@/components/ui/button.tsx";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table.tsx";
+import { UserPlus, Edit, Trash2, Link2, Unlink } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useConfirmation } from "@/hooks/use-confirmation.ts";
+import { deleteUser } from "@/ui/main-axios.ts";
+
+interface User {
+  id: string;
+  username: string;
+  is_admin: boolean;
+  is_oidc: boolean;
+  password_hash?: string;
+}
+
+interface UserManagementTabProps {
+  users: User[];
+  usersLoading: boolean;
+  allowPasswordLogin: boolean;
+  fetchUsers: () => void;
+  onCreateUser: () => void;
+  onEditUser: (user: User) => void;
+  onLinkOIDCUser: (user: { id: string; username: string }) => void;
+  onUnlinkOIDC: (userId: string, username: string) => void;
+}
+
+export function UserManagementTab({
+  users,
+  usersLoading,
+  allowPasswordLogin,
+  fetchUsers,
+  onCreateUser,
+  onEditUser,
+  onLinkOIDCUser,
+  onUnlinkOIDC,
+}: UserManagementTabProps): React.ReactElement {
+  const { t } = useTranslation();
+  const { confirmWithToast } = useConfirmation();
+
+  const getAuthTypeDisplay = (user: User): string => {
+    if (user.is_oidc && user.password_hash) {
+      return t("admin.dualAuth");
+    } else if (user.is_oidc) {
+      return t("admin.externalOIDC");
+    } else {
+      return t("admin.localPassword");
+    }
+  };
+
+  const handleDeleteUserQuick = async (username: string) => {
+    confirmWithToast(
+      t("admin.deleteUser", { username }),
+      async () => {
+        try {
+          await deleteUser(username);
+          toast.success(t("admin.userDeletedSuccessfully", { username }));
+          fetchUsers();
+        } catch {
+          toast.error(t("admin.failedToDeleteUser"));
+        }
+      },
+      "destructive",
+    );
+  };
+
+  return (
+    <div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold">{t("admin.userManagement")}</h3>
+        <div className="flex gap-2">
+          {allowPasswordLogin && (
+            <Button onClick={onCreateUser} size="sm">
+              <UserPlus className="h-4 w-4 mr-2" />
+              {t("admin.createUser")}
+            </Button>
+          )}
+          <Button
+            onClick={fetchUsers}
+            disabled={usersLoading}
+            variant="outline"
+            size="sm"
+          >
+            {usersLoading ? t("admin.loading") : t("admin.refresh")}
+          </Button>
+        </div>
+      </div>
+      {usersLoading ? (
+        <div className="text-center py-8 text-muted-foreground">
+          {t("admin.loadingUsers")}
+        </div>
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t("admin.username")}</TableHead>
+              <TableHead>{t("admin.authType")}</TableHead>
+              <TableHead>{t("admin.actions")}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {users.map((user) => (
+              <TableRow key={user.id}>
+                <TableCell className="font-medium">
+                  {user.username}
+                  {user.is_admin && (
+                    <span className="ml-2 inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-muted/50 text-muted-foreground border border-border">
+                      {t("admin.adminBadge")}
+                    </span>
+                  )}
+                </TableCell>
+                <TableCell>{getAuthTypeDisplay(user)}</TableCell>
+                <TableCell>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onEditUser(user)}
+                      className="text-blue-600 hover:text-blue-700 hover:bg-blue-50"
+                      title={t("admin.manageUser")}
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    {user.is_oidc && !user.password_hash && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() =>
+                          onLinkOIDCUser({
+                            id: user.id,
+                            username: user.username,
+                          })
+                        }
+                        className="text-purple-600 hover:text-purple-700 hover:bg-purple-50"
+                        title="Link to password account"
+                      >
+                        <Link2 className="h-4 w-4" />
+                      </Button>
+                    )}
+                    {user.is_oidc && user.password_hash && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onUnlinkOIDC(user.id, user.username)}
+                        className="text-orange-600 hover:text-orange-700 hover:bg-orange-50"
+                        title="Unlink OIDC (keep password only)"
+                      >
+                        <Unlink className="h-4 w-4" />
+                      </Button>
+                    )}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleDeleteUserQuick(user.username)}
+                      className="text-red-600 hover:text-red-700 hover:bg-red-50"
+                      disabled={user.is_admin}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+}

src/ui/desktop/apps/features/terminal/Terminal.tsx

@@ -123,8 +123,6 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
     const resizeTimeout = useRef<NodeJS.Timeout | null>(null);
     const wasDisconnectedBySSH = useRef(false);
     const pingIntervalRef = useRef<NodeJS.Timeout | null>(null);
-    const [visible, setVisible] = useState(false);
-    const [isReady, setIsReady] = useState(false);
     const [isConnected, setIsConnected] = useState(false);
     const [isConnecting, setIsConnecting] = useState(false);
     const [isFitted, setIsFitted] = useState(true);
@@ -342,7 +340,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
       if (
         !fitAddonRef.current ||
         !terminal ||
-        !isVisibleRef.current ||
+        !isVisible ||
         isFittingRef.current
       ) {
         return;
@@ -1144,6 +1142,15 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
 
       terminal.open(xtermRef.current);
 
+      // Immediately fit to establish correct dimensions
+      fitAddonRef.current?.fit();
+      if (terminal.cols < 10 || terminal.rows < 3) {
+        // Terminal opened with invalid dimensions, retry fit in next frame
+        requestAnimationFrame(() => {
+          fitAddonRef.current?.fit();
+        });
+      }
+
       const element = xtermRef.current;
       const handleContextMenu = async (e: MouseEvent) => {
         if (!getUseRightClickCopyPaste()) return;
@@ -1225,22 +1232,19 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
       const resizeObserver = new ResizeObserver(() => {
         if (resizeTimeout.current) clearTimeout(resizeTimeout.current);
         resizeTimeout.current = setTimeout(() => {
-          if (!isVisibleRef.current || !isReady) return;
-          performFit();
+          if (isVisible && terminal?.cols > 0) {
+            performFit();
+          }
         }, 50);
       });
 
       resizeObserver.observe(xtermRef.current);
 
-      setVisible(true);
-
       return () => {
         isUnmountingRef.current = true;
         shouldNotReconnectRef.current = true;
         isReconnectingRef.current = false;
         setIsConnecting(false);
-        setVisible(false);
-        setIsReady(false);
         isFittingRef.current = false;
         resizeObserver.disconnect();
         element?.removeEventListener("contextmenu", handleContextMenu);
@@ -1444,75 +1448,48 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
       terminal.attachCustomKeyEventHandler(handleCustomKey);
     }, [terminal]);
 
+    // Connection initialization effect
     useEffect(() => {
-      if (!terminal || !hostConfig || !visible) return;
-
+      if (!terminal || !hostConfig || !isVisible) return;
       if (isConnected || isConnecting) return;
 
-      setIsConnecting(true);
-
-      // Start connection immediately without waiting for fonts
-      requestAnimationFrame(() => {
-        fitAddonRef.current?.fit();
-        if (terminal && terminal.cols > 0 && terminal.rows > 0) {
-          scheduleNotify(terminal.cols, terminal.rows);
-        }
-        hardRefresh();
-
-        setVisible(true);
-        setIsReady(true);
-
-        if (terminal && !splitScreen) {
-          terminal.focus();
-        }
-
-        const jwtToken = getCookie("jwt");
-
-        if (!jwtToken || jwtToken.trim() === "") {
-          setIsConnected(false);
-          setIsConnecting(false);
-          setConnectionError("Authentication required");
-          return;
-        }
-
-        const cols = terminal.cols;
-        const rows = terminal.rows;
-
-        connectToHost(cols, rows);
-      });
-    }, [terminal, hostConfig, visible, isConnected, isConnecting, splitScreen]);
-
-    useEffect(() => {
-      if (!isVisible || !isReady || !fitAddonRef.current || !terminal) {
+      // Ensure terminal has valid dimensions before connecting
+      if (terminal.cols < 10 || terminal.rows < 3) {
+        // Wait for next frame when dimensions will be valid
+        requestAnimationFrame(() => {
+          if (terminal.cols > 0 && terminal.rows > 0) {
+            setIsConnecting(true);
+            fitAddonRef.current?.fit();
+            scheduleNotify(terminal.cols, terminal.rows);
+            connectToHost(terminal.cols, terminal.rows);
+          }
+        });
         return;
       }
 
-      let rafId: number;
-
-      rafId = requestAnimationFrame(() => {
-        performFit();
-      });
-
-      return () => {
-        if (rafId) cancelAnimationFrame(rafId);
-      };
-    }, [isVisible, isReady, splitScreen, terminal]);
-
-    useEffect(() => {
-      if (
-        isFitted &&
-        isVisible &&
-        isReady &&
-        !isConnecting &&
-        terminal &&
-        !splitScreen
-      ) {
-        const rafId = requestAnimationFrame(() => {
-          terminal.focus();
-        });
-        return () => cancelAnimationFrame(rafId);
+      setIsConnecting(true);
+      fitAddonRef.current?.fit();
+      if (terminal.cols > 0 && terminal.rows > 0) {
+        scheduleNotify(terminal.cols, terminal.rows);
+        connectToHost(terminal.cols, terminal.rows);
       }
-    }, [isFitted, isVisible, isReady, isConnecting, terminal, splitScreen]);
+    }, [terminal, hostConfig, isVisible, isConnected, isConnecting]);
+
+    // Consolidated fitting and focus effect
+    useEffect(() => {
+      if (!terminal || !fitAddonRef.current || !isVisible) return;
+
+      const fitTimeoutId = setTimeout(() => {
+        if (!isFittingRef.current && terminal.cols > 0 && terminal.rows > 0) {
+          performFit();
+          if (!splitScreen && !isConnecting) {
+            requestAnimationFrame(() => terminal.focus());
+          }
+        }
+      }, 0);
+
+      return () => clearTimeout(fitTimeoutId);
+    }, [terminal, isVisible, splitScreen, isConnecting]);
 
     return (
       <div className="h-full w-full relative" style={{ backgroundColor }}>
@@ -1520,8 +1497,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
           ref={xtermRef}
           className="h-full w-full"
           style={{
-            visibility: isReady ? "visible" : "hidden",
-            pointerEvents: isReady ? "auto" : "none",
+            pointerEvents: isVisible ? "auto" : "none",
           }}
           onClick={() => {
             if (terminal && !splitScreen) {

src/ui/desktop/apps/host-manager/hosts/HostManagerEditor.tsx

@@ -38,7 +38,7 @@ import {
 } from "@/ui/main-axios.ts";
 import { useTranslation } from "react-i18next";
 import { CredentialSelector } from "@/ui/desktop/apps/host-manager/credentials/CredentialSelector.tsx";
-import { HostSharingTab } from "./HostSharingTab.tsx";
+import { HostSharingTab } from "./tabs/HostSharingTab.tsx";
 import CodeMirror from "@uiw/react-codemirror";
 import { oneDark } from "@codemirror/theme-one-dark";
 import { githubLight } from "@uiw/codemirror-theme-github";

src/ui/desktop/apps/host-manager/hosts/HostManagerViewer.tsx

@@ -70,7 +70,7 @@ import type {
   SSHManagerHostViewerProps,
 } from "../../../../../types";
 import { DEFAULT_STATS_CONFIG } from "@/types/stats-widgets.ts";
-import { FolderEditDialog } from "../components/FolderEditDialog.tsx";
+import { FolderEditDialog } from "@/ui/desktop/apps/host-manager/dialogs/FolderEditDialog.tsx";
 import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
 
 export function HostManagerViewer({ onEditHost }: SSHManagerHostViewerProps) {