feat: continue migrating content for ui redesign

src/backend/ssh/docker.ts

@@ -2970,7 +2970,7 @@ app.get("/docker/containers/:sessionId/:containerId/logs", async (req, res) => {
   session.activeOperations++;
 
   try {
-    let command = `docker logs ${containerId}`;
+    let command = `docker logs ${containerId} 2>&1`;
 
     if (tail && tail > 0) {
       command += ` --tail ${Math.floor(tail)}`;

src/ui/AppShell.tsx

@@ -50,11 +50,11 @@ function sshHostToHost(h: SSHHostWithStatus): Host {
     notes: h.notes,
     pin: h.pin ?? false,
     macAddress: h.macAddress,
+    enableSsh: h.enableSsh ?? (h.connectionType === "ssh" || !h.connectionType),
     enableTerminal: h.enableTerminal ?? true,
     enableTunnel: h.enableTunnel ?? false,
     enableFileManager: h.enableFileManager ?? false,
     enableDocker: h.enableDocker ?? false,
-    enableSsh: h.connectionType === "ssh" || !h.connectionType,
     enableRdp: h.connectionType === "rdp",
     enableVnc: h.connectionType === "vnc",
     enableTelnet: h.connectionType === "telnet",

src/ui/components/section-card.tsx

@@ -59,17 +59,20 @@ export function SettingRow({
 
 export function FakeSwitch({
   defaultChecked = false,
+  checked,
   onChange,
 }: {
   defaultChecked?: boolean;
+  checked?: boolean;
   onChange?: (v: boolean) => void;
 }) {
-  const [on, setOn] = useState(defaultChecked);
+  const [internalOn, setInternalOn] = useState(defaultChecked);
+  const on = checked !== undefined ? checked : internalOn;
   return (
     <button
       onClick={() => {
         const next = !on;
-        setOn(next);
+        if (checked === undefined) setInternalOn(next);
         onChange?.(next);
       }}
       className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center border-2 transition-colors ${on ? "bg-accent-brand border-accent-brand" : "bg-muted border-border"}`}

src/ui/features/file-manager/FileManager.tsx

@@ -38,7 +38,6 @@ import {
   Search,
   Grid3X3,
   List,
-  ArrowUpDown,
   ChevronLeft,
   ChevronRight,
   ArrowUp,
@@ -48,8 +47,6 @@ import {
   Copy,
   Layout,
 } from "lucide-react";
-import { Card } from "@/components/card.tsx";
-import { Separator } from "@/components/separator.tsx";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -2370,7 +2367,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
           visibility: isConnectionLogExpanded ? "hidden" : "visible",
         }}
       >
-        <Card className="flex flex-col shrink-0 mx-3 mt-3 rounded-none shadow-none border-border">
+        <div className="flex flex-col shrink-0 mx-3 mt-3 border border-border bg-card">
           <div className="flex flex-row items-center justify-between px-3 py-2 gap-2">
             <div className="flex items-center gap-1">
               <Button
@@ -2640,7 +2637,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
               </div>
             </div>
           </div>
-        </Card>
+        </div>
 
         <div
           className="flex-1 flex px-3 pb-3 pt-2 gap-3 min-h-0 relative"
@@ -2664,7 +2661,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                 : "hidden md:flex",
             )}
           >
-            <Card className="flex-1 flex flex-col rounded-none shadow-none p-0 gap-0 overflow-hidden border-border">
+            <div className="flex-1 flex flex-col overflow-hidden border border-border bg-card">
               <FileManagerSidebar
                 currentHost={currentHost}
                 currentPath={currentPath}
@@ -2675,10 +2672,10 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                 refreshTrigger={sidebarRefreshTrigger}
                 diskInfo={diskInfo ?? undefined}
               />
-            </Card>
+            </div>
           </div>
 
-          <Card className="flex-1 relative overflow-hidden rounded-none shadow-none p-0 gap-0 min-h-0 flex flex-col border-border">
+          <div className="flex-1 relative overflow-hidden min-h-0 flex flex-col border border-border bg-card">
             <div className="flex-1 relative min-h-0 h-full">
               <FileManagerGrid
                 files={filteredFiles}
@@ -2767,7 +2764,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                 onCopyPath={handleCopyPath}
               />
             </div>
-          </Card>
+          </div>
         </div>
       </div>
 

src/ui/features/file-manager/FileManagerSidebar.tsx

@@ -551,7 +551,7 @@ export function FileManagerSidebar({
 
   return (
     <>
-      <div className="h-full flex flex-col bg-card border-r border-border overflow-hidden">
+      <div className="h-full flex flex-col bg-card overflow-hidden">
         <div className="flex-1 overflow-y-auto thin-scrollbar">
           {/* ── Recent files ──────────────────────────────────────── */}
           {renderSection(t("fileManager.recent"), recentItems, (item) =>

src/ui/index.css

@@ -113,7 +113,7 @@
   --accent: oklch(0.255 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 12%);
+  --border: oklch(1 0 0 / 10.8%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
   --chart-1: oklch(0.87 0 0);

src/ui/locales/en.json

@@ -3364,7 +3364,41 @@
         "apiKeyActive": "Active",
         "apiKeyUsageHint": "Include your key in the",
         "apiKeyUsageHintHeader": "header.",
-        "apiKeyPermissionsHint": "Keys inherit the permissions of the creating user."
+        "apiKeyPermissionsHint": "Keys inherit the permissions of the creating user.",
+        "roleUser": "User",
+        "authMethodDual": "Dual Auth",
+        "authMethodOidc": "OIDC",
+        "totpSetupFailed": "Failed to start TOTP setup",
+        "totpEnter6Digits": "Enter a 6-digit code",
+        "totpEnabledSuccess": "Two-factor authentication enabled",
+        "totpInvalidCode": "Invalid code, please try again",
+        "totpDisableInputRequired": "Enter your TOTP code or password",
+        "totpDisabledSuccess": "Two-factor authentication disabled",
+        "totpDisableFailed": "Failed to disable 2FA",
+        "totpDisableTitle": "Disable 2FA",
+        "totpDisablePlaceholder": "Enter TOTP code or password",
+        "totpDisableConfirm": "Disable 2FA",
+        "totpContinueVerify": "Continue to Verify",
+        "totpVerifyTitle": "Verify Code",
+        "totpBackupTitle": "Backup Codes",
+        "totpDownloadBackup": "Download Backup Codes",
+        "done": "Done",
+        "secretCopied": "Secret copied to clipboard",
+        "apiKeyNameRequired": "Key name is required",
+        "apiKeyCreated": "API key \"{{name}}\" created",
+        "apiKeyCreateFailed": "Failed to create API key",
+        "apiKeyUser": "User",
+        "apiKeyExpires": "Expires",
+        "apiKeyRevoked": "API key \"{{name}}\" revoked",
+        "apiKeyRevokeFailed": "Failed to revoke API key",
+        "passwordFieldsRequired": "Current and new passwords are required",
+        "passwordMismatch": "Passwords do not match",
+        "passwordTooShort": "Password must be at least 6 characters",
+        "passwordUpdated": "Password updated successfully",
+        "passwordUpdateFailed": "Failed to update password",
+        "deletePasswordRequired": "Password is required to delete your account",
+        "deleteFailed": "Failed to delete account",
+        "deleting": "Deleting..."
       }
     }
   }

src/ui/shell/CommandPalette.tsx

@@ -3,7 +3,6 @@ import { cn } from "@/lib/utils";
 import { Kbd } from "@/components/kbd";
 import {
   Command,
-  CommandInput,
   CommandItem,
   CommandList,
   CommandGroup,
@@ -28,6 +27,8 @@ import {
   User,
   KeyRound,
   LayoutDashboard,
+  Monitor,
+  Clock,
 } from "lucide-react";
 import { Button } from "@/components/button";
 import {
@@ -36,21 +37,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/dropdown-menu";
-
+import { getRecentActivity, type RecentActivityItem } from "@/main-axios";
-type Host = {
+import type { Host } from "@/types/ui-types";
-  name: string;
-  user: string;
-  address: string;
-  online: boolean;
-  cpu: number;
-  ram: number;
-  lastAccess: string;
-  tags?: string[];
-  enableTerminal?: boolean;
-  enableFileManager?: boolean;
-  enableDocker?: boolean;
-  enableTunnel?: boolean;
-};
 
 interface CommandPaletteProps {
   isOpen: boolean;
@@ -59,20 +47,26 @@ interface CommandPaletteProps {
   onOpenTab: (type: any, label?: string, pendingEvent?: string) => void;
 }
 
-const ACTION_ICONS: Record<string, React.ReactNode> = {
+const ACTIVITY_ICONS: Record<string, React.ReactNode> = {
-  Terminal: <Terminal className="size-3" />,
+  terminal: <Terminal className="size-3.5" />,
-  Files: <FolderOpen className="size-3" />,
+  file_manager: <FolderOpen className="size-3.5" />,
-  Docker: <Box className="size-3" />,
+  server_stats: <Activity className="size-3.5" />,
-  Stats: <Activity className="size-3" />,
+  tunnel: <Network className="size-3.5" />,
-  Tunnels: <Network className="size-3" />,
+  docker: <Box className="size-3.5" />,
+  telnet: <Terminal className="size-3.5" />,
+  vnc: <Monitor className="size-3.5" />,
+  rdp: <Monitor className="size-3.5" />,
 };
 
-const ACTION_TAB_TYPE: Record<string, string> = {
+const ACTIVITY_TAB_TYPE: Record<string, string> = {
-  Terminal: "terminal",
+  terminal: "terminal",
-  Files: "files",
+  file_manager: "files",
-  Docker: "docker",
+  server_stats: "stats",
-  Stats: "stats",
+  tunnel: "tunnel",
-  Tunnels: "tunnel",
+  docker: "docker",
+  telnet: "telnet",
+  vnc: "vnc",
+  rdp: "rdp",
 };
 
 export function CommandPalette({
@@ -83,11 +77,17 @@ export function CommandPalette({
 }: CommandPaletteProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const [search, setSearch] = useState("");
+  const [recentActivity, setRecentActivity] = useState<RecentActivityItem[]>(
+    [],
+  );
 
   useEffect(() => {
     if (isOpen) {
       setTimeout(() => inputRef.current?.focus(), 50);
       setSearch("");
+      getRecentActivity(5)
+        .then(setRecentActivity)
+        .catch(() => {});
     }
   }, [isOpen]);
 
@@ -104,7 +104,8 @@ export function CommandPalette({
   const filteredHosts = hosts.filter(
     (h) =>
       h.name.toLowerCase().includes(search.toLowerCase()) ||
-      h.ip.toLowerCase().includes(search.toLowerCase()),
+      h.ip.toLowerCase().includes(search.toLowerCase()) ||
+      h.username.toLowerCase().includes(search.toLowerCase()),
   );
 
   const handleAction = (action: () => void) => {
@@ -238,18 +239,101 @@ export function CommandPalette({
               </CommandItem>
             </CommandGroup>
 
+            {recentActivity.length > 0 && (
+              <>
+                <CommandSeparator className="my-2" />
+                <CommandGroup heading="Recent Activity" className="px-2">
+                  {recentActivity.map((item) => (
+                    <CommandItem
+                      key={item.id}
+                      onSelect={() =>
+                        handleAction(() =>
+                          onOpenTab(
+                            ACTIVITY_TAB_TYPE[item.type] as any,
+                            item.hostName,
+                          ),
+                        )
+                      }
+                      className="group flex items-center gap-3 px-3 py-2 rounded-none hover:bg-accent-brand/10 cursor-pointer"
+                    >
+                      <div className="size-7 rounded-none bg-muted flex items-center justify-center group-hover:bg-accent-brand/20 transition-colors text-muted-foreground group-hover:text-accent-brand">
+                        {ACTIVITY_ICONS[item.type]}
+                      </div>
+                      <div className="flex flex-col flex-1 min-w-0">
+                        <span className="text-sm font-semibold truncate">
+                          {item.hostName}
+                        </span>
+                        <span className="text-xs text-muted-foreground capitalize">
+                          {item.type.replace("_", " ")}
+                        </span>
+                      </div>
+                      <div className="flex items-center gap-1 text-muted-foreground/50">
+                        <Clock className="size-3" />
+                        <span className="text-[10px]">
+                          {new Date(item.timestamp).toLocaleDateString()}
+                        </span>
+                      </div>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </>
+            )}
+
             <CommandSeparator className="my-2" />
 
             <CommandGroup heading="Servers & Hosts" className="px-2">
               {filteredHosts.length > 0 ? (
                 filteredHosts.map((host, i) => {
                   const actions = [
-                    host.enableTerminal !== false && "Terminal",
+                    host.enableSsh &&
-                    host.enableFileManager !== false && "Files",
+                      host.enableTerminal !== false && {
-                    host.enableDocker && "Docker",
+                        type: "terminal",
-                    host.enableTunnel && "Tunnels",
+                        icon: <Terminal className="size-3" />,
-                    "Stats",
+                        label: "Terminal",
-                  ].filter(Boolean) as string[];
+                      },
+                    host.enableSsh &&
+                      host.enableFileManager && {
+                        type: "files",
+                        icon: <FolderOpen className="size-3" />,
+                        label: "Files",
+                      },
+                    host.enableSsh &&
+                      host.enableDocker && {
+                        type: "docker",
+                        icon: <Box className="size-3" />,
+                        label: "Docker",
+                      },
+                    host.enableSsh &&
+                      host.enableTunnel && {
+                        type: "tunnel",
+                        icon: <Network className="size-3" />,
+                        label: "Tunnels",
+                      },
+                    host.enableSsh && {
+                      type: "stats",
+                      icon: <Activity className="size-3" />,
+                      label: "Stats",
+                    },
+                    host.enableRdp && {
+                      type: "rdp",
+                      icon: <Monitor className="size-3" />,
+                      label: "RDP",
+                    },
+                    host.enableVnc && {
+                      type: "vnc",
+                      icon: <Monitor className="size-3" />,
+                      label: "VNC",
+                    },
+                    host.enableTelnet && {
+                      type: "telnet",
+                      icon: <Terminal className="size-3" />,
+                      label: "Telnet",
+                    },
+                  ].filter(Boolean) as {
+                    type: string;
+                    icon: React.ReactNode;
+                    label: string;
+                  }[];
 
                   return (
                     <CommandItem
@@ -279,28 +363,25 @@ export function CommandPalette({
                           )}
                         </div>
                         <span className="text-xs text-muted-foreground font-mono">
-                          {host.ip}
+                          {host.username}@{host.ip}
                         </span>
                       </div>
                       <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
                         {actions.map((action) => (
                           <Button
-                            key={action}
+                            key={action.type}
                             variant="ghost"
                             size="icon"
-                            title={action}
+                            title={action.label}
                             className="size-7 rounded-none hover:bg-accent-brand/20 hover:text-accent-brand"
                             onClick={(e) => {
                               e.stopPropagation();
                               handleAction(() =>
-                                onOpenTab(
+                                onOpenTab(action.type as any, host.name),
-                                  ACTION_TAB_TYPE[action] as any,
-                                  host.name,
-                                ),
                               );
                             }}
                           >
-                            {ACTION_ICONS[action]}
+                            {action.icon}
                           </Button>
                         ))}
                         <DropdownMenu>
@@ -322,7 +403,15 @@ export function CommandPalette({
                               className="rounded-none text-xs font-semibold hover:bg-accent-brand/10 hover:text-accent-brand cursor-pointer"
                               onClick={(e) => {
                                 e.stopPropagation();
-                                handleAction(() => onOpenTab("host-manager"));
+                                setIsOpen(false);
+                                onOpenTab("host-manager");
+                                setTimeout(() => {
+                                  window.dispatchEvent(
+                                    new CustomEvent("host-manager:edit-host", {
+                                      detail: host.id,
+                                    }),
+                                  );
+                                }, 100);
                               }}
                             >
                               <Edit3 className="size-3.5 mr-2" /> Edit Host
@@ -335,7 +424,7 @@ export function CommandPalette({
                 })
               ) : (
                 <div className="py-6 text-center text-sm text-muted-foreground">
-                  No hosts found matching "{search}"
+                  No hosts found matching &ldquo;{search}&rdquo;
                 </div>
               )}
             </CommandGroup>

src/ui/sidebar/UserProfilePanel.tsx

@@ -6,6 +6,12 @@ import {
   createApiKey,
   deleteApiKey,
   changePassword,
+  deleteAccount,
+  logoutUser,
+  setupTOTP,
+  enableTOTP,
+  disableTOTP,
+  getVersionInfo,
 } from "@/main-axios";
 import type React from "react";
 import { isElectron } from "@/lib/electron";
@@ -50,6 +56,7 @@ import type { ApiKey } from "@/main-axios";
 import { useTheme } from "@/components/theme-provider";
 import type { FontSizeId, ThemeId } from "@/types/ui-types";
 import { toast } from "sonner";
+import i18n from "@/i18n/i18n";
 
 type UserProfileSection =
   | "account"
@@ -58,21 +65,6 @@ type UserProfileSection =
   | "api-keys"
   | "c2s-tunnels";
 
-const SECTIONS: {
-  id: UserProfileSection;
-  label: string;
-  icon: React.ReactNode;
-}[] = [
-  { id: "account", label: "Account", icon: <User className="size-3.5" /> },
-  {
-    id: "appearance",
-    label: "Appearance",
-    icon: <Palette className="size-3.5" />,
-  },
-  { id: "security", label: "Security", icon: <Shield className="size-3.5" /> },
-  { id: "api-keys", label: "API Keys", icon: <Network className="size-3.5" /> },
-];
-
 const THEMES: { id: ThemeId; label: string; preview: string }[] = [
   { id: "system", label: "System", preview: "auto" },
   { id: "light", label: "Light", preview: "#ffffff" },
@@ -86,6 +78,44 @@ const THEMES: { id: ThemeId; label: string; preview: string }[] = [
   { id: "gruvbox", label: "Gruvbox", preview: "#282828" },
 ];
 
+const LANGUAGES = [
+  { code: "en", label: "English" },
+  { code: "af", label: "Afrikaans" },
+  { code: "ar", label: "العربية" },
+  { code: "bn", label: "বাংলা" },
+  { code: "bg", label: "Български" },
+  { code: "ca", label: "Català" },
+  { code: "zh-CN", label: "中文 (简体)" },
+  { code: "zh-TW", label: "中文 (繁體)" },
+  { code: "cs", label: "Čeština" },
+  { code: "da", label: "Dansk" },
+  { code: "nl", label: "Nederlands" },
+  { code: "fi", label: "Suomi" },
+  { code: "fr", label: "Français" },
+  { code: "de", label: "Deutsch" },
+  { code: "el", label: "Ελληνικά" },
+  { code: "he", label: "עברית" },
+  { code: "hi", label: "हिन्दी" },
+  { code: "hu", label: "Magyar" },
+  { code: "id", label: "Indonesia" },
+  { code: "it", label: "Italiano" },
+  { code: "ja", label: "日本語" },
+  { code: "ko", label: "한국어" },
+  { code: "no", label: "Norsk" },
+  { code: "pl", label: "Polski" },
+  { code: "pt-PT", label: "Português (PT)" },
+  { code: "pt-BR", label: "Português (BR)" },
+  { code: "ro", label: "Română" },
+  { code: "ru", label: "Русский" },
+  { code: "sr", label: "Српски" },
+  { code: "es-ES", label: "Español" },
+  { code: "sv-SE", label: "Svenska" },
+  { code: "th", label: "ไทย" },
+  { code: "tr", label: "Türkçe" },
+  { code: "uk", label: "Українська" },
+  { code: "vi", label: "Tiếng Việt" },
+];
+
 function AccordionSection({
   id,
   label,
@@ -139,7 +169,7 @@ function NewApiKeyDialog({
 
   const handleCreate = async () => {
     if (!name.trim()) {
-      toast.error("API key name is required");
+      toast.error(t("newUi.sidebar.userProfile.apiKeyNameRequired"));
       return;
     }
     try {
@@ -152,9 +182,9 @@ function NewApiKeyDialog({
       onOpenChange(false);
       setName("");
       setExpiry("");
-      toast.success(`API key "${name}" created`);
+      toast.success(t("newUi.sidebar.userProfile.apiKeyCreated", { name }));
     } catch {
-      toast.error("Failed to create API key");
+      toast.error(t("newUi.sidebar.userProfile.apiKeyCreateFailed"));
     }
   };
 
@@ -187,6 +217,7 @@ function NewApiKeyDialog({
               placeholder={t("newUi.sidebar.userProfile.apiKeyNamePlaceholder")}
               value={name}
               onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleCreate()}
               className="rounded-none bg-muted/50 border-border text-sm h-9"
             />
           </div>
@@ -245,22 +276,29 @@ function PasswordChangeSection({
 
   async function handleUpdate() {
     if (!currentPw || !newPw) {
-      toast.error("All password fields are required");
+      toast.error(t("newUi.sidebar.userProfile.passwordFieldsRequired"));
       return;
     }
     if (newPw !== confirmPw) {
-      toast.error("Passwords don't match");
+      toast.error(t("newUi.sidebar.userProfile.passwordMismatch"));
+      return;
+    }
+    if (newPw.length < 6) {
+      toast.error(t("newUi.sidebar.userProfile.passwordTooShort"));
       return;
     }
     try {
       await changePassword(currentPw, newPw);
-      toast.success("Password updated. Please log in again.");
+      toast.success(t("newUi.sidebar.userProfile.passwordUpdated"));
       setCurrentPw("");
       setNewPw("");
       setConfirmPw("");
       onLogout?.();
     } catch (e: any) {
-      toast.error(e?.response?.data?.error || "Failed to update password");
+      toast.error(
+        e?.response?.data?.error ||
+          t("newUi.sidebar.userProfile.passwordUpdateFailed"),
+      );
     }
   }
 
@@ -345,38 +383,119 @@ export function UserProfilePanel({
   const [openSection, setOpenSection] = useState<UserProfileSection | null>(
     "account",
   );
-  const [showTotpSetup, setShowTotpSetup] = useState(false);
+
+  // User info
+  const [userId, setUserId] = useState("");
+  const [userRole, setUserRole] = useState("");
+  const [authMethod, setAuthMethod] = useState("");
+  const [version, setVersion] = useState("");
+  const [isOidc, setIsOidc] = useState(false);
+  const [isDualAuth, setIsDualAuth] = useState(false);
+
+  // TOTP
   const [totpEnabled, setTotpEnabled] = useState(false);
+  const [totpStep, setTotpStep] = useState<
+    "idle" | "setup" | "verify" | "backup"
+  >("idle");
+  const [totpQrCode, setTotpQrCode] = useState("");
+  const [totpSecret, setTotpSecret] = useState("");
+  const [totpCode, setTotpCode] = useState("");
+  const [totpBackupCodes, setTotpBackupCodes] = useState<string[]>([]);
+  const [totpLoading, setTotpLoading] = useState(false);
+  const [showDisableTotp, setShowDisableTotp] = useState(false);
+  const [disableTotpInput, setDisableTotpInput] = useState("");
+
+  // Delete account
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [deletePassword, setDeletePassword] = useState("");
+  const [deleteLoading, setDeleteLoading] = useState(false);
+
+  // UI state
   const [showPassword, setShowPassword] = useState(false);
-  const [accentColor, setAccentColor] = useState<string>(
+  const [newKeyOpen, setNewKeyOpen] = useState(false);
+  const colorInputRef = useRef<HTMLInputElement>(null);
+  const { theme, setTheme } = useTheme();
+
+  // Appearance state — initialized from localStorage
+  const [accentColor, setAccentColor] = useState(
     () => localStorage.getItem("termix-accent") ?? "#f59145",
   );
-  const [customColorInput, setCustomColorInput] = useState<string>(
+  const [customColorInput, setCustomColorInput] = useState(
     () => localStorage.getItem("termix-accent") ?? "#f59145",
   );
   const [fontSize, setFontSize] = useState<FontSizeId>(
     () => (localStorage.getItem("termix-font-size") as FontSizeId) ?? "md",
   );
+  const [language, setLanguage] = useState(
+    () => localStorage.getItem("i18nextLng") ?? "en",
+  );
+
+  // Settings toggles — all backed by localStorage
+  const [fileColorCoding, setFileColorCoding] = useState(
+    () => localStorage.getItem("fileColorCoding") !== "false",
+  );
+  const [commandAutocomplete, setCommandAutocomplete] = useState(
+    () => localStorage.getItem("commandAutocomplete") === "true",
+  );
+  const [commandHistoryTracking, setCommandHistoryTracking] = useState(
+    () => localStorage.getItem("commandHistoryTracking") === "true",
+  );
+  const [terminalSyntaxHighlighting, setTerminalSyntaxHighlighting] = useState(
+    () => localStorage.getItem("terminalSyntaxHighlighting") === "true",
+  );
+  const [commandPaletteEnabled, setCommandPaletteEnabled] = useState(() => {
+    const v = localStorage.getItem("commandPaletteShortcutEnabled");
+    return v !== null ? v === "true" : true;
+  });
+  const [sessionPersistence, setSessionPersistence] = useState(
+    () => localStorage.getItem("enableTerminalSessionPersistence") === "true",
+  );
+  const [showHostTags, setShowHostTags] = useState(() => {
+    const v = localStorage.getItem("showHostTags");
+    return v !== null ? v === "true" : true;
+  });
+  const [foldersCollapsed, setFoldersCollapsed] = useState(
+    () => localStorage.getItem("defaultSnippetFoldersCollapsed") !== "false",
+  );
+  const [confirmSnippetExecution, setConfirmSnippetExecution] = useState(
+    () => localStorage.getItem("confirmSnippetExecution") === "true",
+  );
+  const [disableUpdateCheck, setDisableUpdateCheck] = useState(
+    () => localStorage.getItem("disableUpdateCheck") === "true",
+  );
+
+  // API keys
   const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);
-  const [userId, setUserId] = useState<string>("");
 
   useEffect(() => {
     getUserInfo()
       .then((info) => {
         setUserId(info.userId);
-        setTotpEnabled(info.totp_enabled);
+        setTotpEnabled(info.totp_enabled ?? false);
+        setIsOidc(info.is_oidc ?? false);
+        setIsDualAuth(info.is_dual_auth ?? false);
+        setUserRole(
+          info.is_admin
+            ? t("newUi.sidebar.userProfile.roleAdministrator")
+            : t("newUi.sidebar.userProfile.roleUser"),
+        );
+        if (info.is_dual_auth) {
+          setAuthMethod(t("newUi.sidebar.userProfile.authMethodDual"));
+        } else if (info.is_oidc) {
+          setAuthMethod(t("newUi.sidebar.userProfile.authMethodOidc"));
+        } else {
+          setAuthMethod(t("newUi.sidebar.userProfile.authMethodLocal"));
+        }
       })
       .catch(() => {});
     getApiKeys()
       .then(({ apiKeys: keys }) => setApiKeys(keys))
       .catch(() => {});
+    getVersionInfo(false)
+      .then((info) => setVersion(info.localVersion))
+      .catch(() => {});
   }, []);
 
-  const [newKeyOpen, setNewKeyOpen] = useState(false);
-  const colorInputRef = useRef<HTMLInputElement>(null);
-  const { theme, setTheme } = useTheme();
-
   function handleAccentChange(value: string) {
     setAccentColor(value);
     setCustomColorInput(value);
@@ -389,10 +508,105 @@ export function UserProfilePanel({
     applyFontSize(id);
   }
 
+  function handleLanguageChange(code: string) {
+    setLanguage(code);
+    localStorage.setItem("i18nextLng", code);
+    i18n.changeLanguage(code);
+  }
+
   function toggle(id: UserProfileSection) {
     setOpenSection((prev) => (prev === id ? null : id));
   }
 
+  async function handleStartTotpSetup() {
+    setTotpLoading(true);
+    try {
+      const result = await setupTOTP();
+      setTotpQrCode(result.qr_code);
+      setTotpSecret(result.secret);
+      setTotpCode("");
+      setTotpStep("setup");
+    } catch {
+      toast.error(t("newUi.sidebar.userProfile.totpSetupFailed"));
+    } finally {
+      setTotpLoading(false);
+    }
+  }
+
+  async function handleVerifyTotp() {
+    if (!totpCode || totpCode.length !== 6) {
+      toast.error(t("newUi.sidebar.userProfile.totpEnter6Digits"));
+      return;
+    }
+    setTotpLoading(true);
+    try {
+      const result = await enableTOTP(totpCode);
+      setTotpBackupCodes(result.backup_codes ?? []);
+      setTotpEnabled(true);
+      setTotpStep("backup");
+      toast.success(t("newUi.sidebar.userProfile.totpEnabledSuccess"));
+    } catch (e: any) {
+      toast.error(
+        e?.response?.data?.error ||
+          t("newUi.sidebar.userProfile.totpInvalidCode"),
+      );
+    } finally {
+      setTotpLoading(false);
+    }
+  }
+
+  async function handleDisableTotp() {
+    if (!disableTotpInput) {
+      toast.error(t("newUi.sidebar.userProfile.totpDisableInputRequired"));
+      return;
+    }
+    setTotpLoading(true);
+    try {
+      await disableTOTP(disableTotpInput);
+      setTotpEnabled(false);
+      setShowDisableTotp(false);
+      setDisableTotpInput("");
+      toast.success(t("newUi.sidebar.userProfile.totpDisabledSuccess"));
+    } catch (e: any) {
+      toast.error(
+        e?.response?.data?.error ||
+          t("newUi.sidebar.userProfile.totpDisableFailed"),
+      );
+    } finally {
+      setTotpLoading(false);
+    }
+  }
+
+  function downloadBackupCodes() {
+    const blob = new Blob([totpBackupCodes.join("\n")], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "termix-backup-codes.txt";
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  async function handleDeleteAccount() {
+    if (!deletePassword.trim()) {
+      toast.error(t("newUi.sidebar.userProfile.deletePasswordRequired"));
+      return;
+    }
+    setDeleteLoading(true);
+    try {
+      await deleteAccount(deletePassword);
+      await logoutUser().catch(() => {});
+      window.location.reload();
+    } catch (e: any) {
+      toast.error(
+        e?.response?.data?.error || t("newUi.sidebar.userProfile.deleteFailed"),
+      );
+      setDeleteLoading(false);
+    }
+  }
+
+  const canChangePasword = !isOidc || isDualAuth;
+
   return (
     <div className="flex flex-col gap-2 p-3">
       <NewApiKeyDialog
@@ -417,7 +631,7 @@ export function UserProfilePanel({
                 {t("newUi.sidebar.userProfile.usernameLabel")}
               </span>
               <span className="text-sm font-semibold mt-0.5">
-                {username ?? "user"}
+                {username ?? "—"}
               </span>
             </div>
             <div className="flex flex-col py-2">
@@ -425,7 +639,7 @@ export function UserProfilePanel({
                 {t("newUi.sidebar.userProfile.roleLabel")}
               </span>
               <span className="inline-flex items-center px-1.5 py-0.5 text-[10px] font-semibold border border-accent-brand/40 bg-accent-brand/10 text-accent-brand mt-0.5 w-fit">
-                {t("newUi.sidebar.userProfile.roleAdministrator")}
+                {userRole || "—"}
               </span>
             </div>
             <div className="flex flex-col py-2">
@@ -433,7 +647,7 @@ export function UserProfilePanel({
                 {t("newUi.sidebar.userProfile.authMethodLabel")}
               </span>
               <span className="text-sm font-semibold mt-0.5">
-                {t("newUi.sidebar.userProfile.authMethodLocal")}
+                {authMethod || "—"}
               </span>
             </div>
             <div className="flex flex-col py-2">
@@ -463,14 +677,7 @@ export function UserProfilePanel({
             </span>
             <div className="flex items-center justify-between mt-1.5">
               <span className="text-sm font-bold text-accent-brand">
-                v1.0.0{" "}
+                {version ? `v${version}` : "—"}
-                <span className="text-muted-foreground font-normal text-xs">
-                  {t("newUi.sidebar.userProfile.versionStable")}
-                </span>
-              </span>
-              <span className="flex items-center gap-1 text-xs font-semibold text-accent-brand">
-                <CheckCircle2 className="size-3.5" />
-                {t("newUi.sidebar.userProfile.upToDate")}
               </span>
             </div>
           </div>
@@ -511,17 +718,19 @@ export function UserProfilePanel({
             <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
               {t("newUi.sidebar.userProfile.languageLabel")}
             </span>
-            <select className="px-2.5 py-1.5 text-xs bg-background border border-border text-foreground outline-none focus:ring-1 focus:ring-ring w-full">
+            <select
-              <option>English</option>
+              value={language}
-              <option>French</option>
+              onChange={(e) => handleLanguageChange(e.target.value)}
-              <option>German</option>
+              className="px-2.5 py-1.5 text-xs bg-background border border-border text-foreground outline-none focus:ring-1 focus:ring-ring w-full"
-              <option>Spanish</option>
+            >
-              <option>Japanese</option>
+              {LANGUAGES.map((lang) => (
-              <option>Chinese (Simplified)</option>
+                <option key={lang.code} value={lang.code}>
+                  {lang.label}
+                </option>
+              ))}
             </select>
           </div>
 
-          {/* Theme — dropdown */}
           <div className="flex flex-col gap-1.5">
             <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
               {t("newUi.sidebar.userProfile.themeLabel")}
@@ -532,29 +741,27 @@ export function UserProfilePanel({
                 onChange={(e) => setTheme(e.target.value as ThemeId)}
                 className="w-full px-2.5 py-1.5 text-xs bg-background border border-border text-foreground outline-none focus:ring-1 focus:ring-ring appearance-none pr-7"
               >
-                {THEMES.map((t) => (
+                {THEMES.map((th) => (
-                  <option key={t.id} value={t.id}>
+                  <option key={th.id} value={th.id}>
-                    {t.label}
+                    {th.label}
                   </option>
                 ))}
               </select>
               <ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 size-3 text-muted-foreground pointer-events-none" />
             </div>
-            {/* Live preview strip */}
             <div className="flex gap-1 mt-0.5">
-              {THEMES.filter((t) => t.id !== "system").map((t) => (
+              {THEMES.filter((th) => th.id !== "system").map((th) => (
                 <button
-                  key={t.id}
+                  key={th.id}
-                  title={t.label}
+                  title={th.label}
-                  onClick={() => setTheme(t.id)}
+                  onClick={() => setTheme(th.id)}
-                  className={`h-4 flex-1 border transition-all ${theme === t.id ? "border-accent-brand ring-1 ring-accent-brand" : "border-border/50"}`}
+                  className={`h-4 flex-1 border transition-all ${theme === th.id ? "border-accent-brand ring-1 ring-accent-brand" : "border-border/50"}`}
-                  style={{ background: t.preview }}
+                  style={{ background: th.preview }}
                 />
               ))}
             </div>
           </div>
 
-          {/* Font Size */}
           <div className="flex flex-col gap-1.5">
             <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground flex items-center gap-1.5">
               <Type className="size-3" />
@@ -577,13 +784,10 @@ export function UserProfilePanel({
             </div>
           </div>
 
-          {/* Accent Color */}
           <div className="flex flex-col gap-2">
             <span className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
               {t("newUi.sidebar.userProfile.accentColorLabel")}
             </span>
-
-            {/* Preset swatches */}
             <div className="grid grid-cols-6 gap-1">
               {ACCENT_PRESET_COLORS.map((ac) => (
                 <button
@@ -599,8 +803,6 @@ export function UserProfilePanel({
                 />
               ))}
             </div>
-
-            {/* Custom color input */}
             <div className="flex items-center gap-2 border border-border bg-muted/30 px-2 py-1.5">
               <button
                 onClick={() => colorInputRef.current?.click()}
@@ -657,7 +859,14 @@ export function UserProfilePanel({
               label={t("newUi.sidebar.userProfile.fileColorCoding")}
               description={t("newUi.sidebar.userProfile.fileColorCodingDesc")}
             >
-              <FakeSwitch defaultChecked={true} />
+              <FakeSwitch
+                checked={fileColorCoding}
+                onChange={(v) => {
+                  setFileColorCoding(v);
+                  localStorage.setItem("fileColorCoding", v.toString());
+                  window.dispatchEvent(new Event("fileColorCodingChanged"));
+                }}
+              />
             </SettingRow>
           </div>
 
@@ -671,13 +880,28 @@ export function UserProfilePanel({
                 "newUi.sidebar.userProfile.commandAutocompleteDesc",
               )}
             >
-              <FakeSwitch />
+              <FakeSwitch
+                checked={commandAutocomplete}
+                onChange={(v) => {
+                  setCommandAutocomplete(v);
+                  localStorage.setItem("commandAutocomplete", v.toString());
+                }}
+              />
             </SettingRow>
             <SettingRow
               label={t("newUi.sidebar.userProfile.historyTracking")}
               description={t("newUi.sidebar.userProfile.historyTrackingDesc")}
             >
-              <FakeSwitch />
+              <FakeSwitch
+                checked={commandHistoryTracking}
+                onChange={(v) => {
+                  setCommandHistoryTracking(v);
+                  localStorage.setItem("commandHistoryTracking", v.toString());
+                  window.dispatchEvent(
+                    new Event("commandHistoryTrackingChanged"),
+                  );
+                }}
+              />
             </SettingRow>
             <SettingRow
               label={t("newUi.sidebar.userProfile.syntaxHighlighting")}
@@ -686,13 +910,34 @@ export function UserProfilePanel({
               )}
               badge="BETA"
             >
-              <FakeSwitch />
+              <FakeSwitch
+                checked={terminalSyntaxHighlighting}
+                onChange={(v) => {
+                  setTerminalSyntaxHighlighting(v);
+                  localStorage.setItem(
+                    "terminalSyntaxHighlighting",
+                    v.toString(),
+                  );
+                  window.dispatchEvent(
+                    new Event("terminalSyntaxHighlightingChanged"),
+                  );
+                }}
+              />
             </SettingRow>
             <SettingRow
               label={t("newUi.sidebar.userProfile.commandPalette")}
               description={t("newUi.sidebar.userProfile.commandPaletteDesc")}
             >
-              <FakeSwitch defaultChecked={true} />
+              <FakeSwitch
+                checked={commandPaletteEnabled}
+                onChange={(v) => {
+                  setCommandPaletteEnabled(v);
+                  localStorage.setItem(
+                    "commandPaletteShortcutEnabled",
+                    v.toString(),
+                  );
+                }}
+              />
             </SettingRow>
             <SettingRow
               label={t("newUi.sidebar.userProfile.sessionPersistence")}
@@ -701,7 +946,16 @@ export function UserProfilePanel({
               )}
               badge="BETA"
             >
-              <FakeSwitch />
+              <FakeSwitch
+                checked={sessionPersistence}
+                onChange={(v) => {
+                  setSessionPersistence(v);
+                  localStorage.setItem(
+                    "enableTerminalSessionPersistence",
+                    v.toString(),
+                  );
+                }}
+              />
             </SettingRow>
           </div>
 
@@ -713,7 +967,14 @@ export function UserProfilePanel({
               label={t("newUi.sidebar.userProfile.showHostTags")}
               description={t("newUi.sidebar.userProfile.showHostTagsDesc")}
             >
-              <FakeSwitch defaultChecked={true} />
+              <FakeSwitch
+                checked={showHostTags}
+                onChange={(v) => {
+                  setShowHostTags(v);
+                  localStorage.setItem("showHostTags", v.toString());
+                  window.dispatchEvent(new Event("showHostTagsChanged"));
+                }}
+              />
             </SettingRow>
           </div>
 
@@ -725,13 +986,31 @@ export function UserProfilePanel({
               label={t("newUi.sidebar.userProfile.foldersCollapsed")}
               description={t("newUi.sidebar.userProfile.foldersCollapsedDesc")}
             >
-              <FakeSwitch defaultChecked={true} />
+              <FakeSwitch
+                checked={foldersCollapsed}
+                onChange={(v) => {
+                  setFoldersCollapsed(v);
+                  localStorage.setItem(
+                    "defaultSnippetFoldersCollapsed",
+                    v.toString(),
+                  );
+                  window.dispatchEvent(
+                    new Event("defaultSnippetFoldersCollapsedChanged"),
+                  );
+                }}
+              />
             </SettingRow>
             <SettingRow
               label={t("newUi.sidebar.userProfile.confirmExecution")}
               description={t("newUi.sidebar.userProfile.confirmExecutionDesc")}
             >
-              <FakeSwitch />
+              <FakeSwitch
+                checked={confirmSnippetExecution}
+                onChange={(v) => {
+                  setConfirmSnippetExecution(v);
+                  localStorage.setItem("confirmSnippetExecution", v.toString());
+                }}
+              />
             </SettingRow>
           </div>
 
@@ -745,7 +1024,13 @@ export function UserProfilePanel({
                 "newUi.sidebar.userProfile.disableUpdateChecksDesc",
               )}
             >
-              <FakeSwitch />
+              <FakeSwitch
+                checked={disableUpdateCheck}
+                onChange={(v) => {
+                  setDisableUpdateCheck(v);
+                  localStorage.setItem("disableUpdateCheck", v.toString());
+                }}
+              />
             </SettingRow>
           </div>
         </div>
@@ -772,47 +1057,104 @@ export function UserProfilePanel({
                     : t("newUi.sidebar.userProfile.totpDisabled")}
                 </span>
               </div>
+              {totpEnabled ? (
                 <Button
                   variant="outline"
                   size="sm"
-                className={`shrink-0 ml-3 text-[10px] h-7 ${totpEnabled ? "border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive" : "border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"}`}
+                  className="shrink-0 ml-3 text-[10px] h-7 border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
-                onClick={() => {
+                  onClick={() => setShowDisableTotp((o) => !o)}
-                  if (totpEnabled) setTotpEnabled(false);
-                  else setShowTotpSetup(true);
-                }}
                 >
-                {totpEnabled
+                  {t("newUi.sidebar.userProfile.disable")}
-                  ? t("newUi.sidebar.userProfile.disable")
-                  : t("newUi.sidebar.userProfile.enable")}
                 </Button>
+              ) : (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="shrink-0 ml-3 text-[10px] h-7 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+                  onClick={handleStartTotpSetup}
+                  disabled={totpLoading || totpStep !== "idle"}
+                >
+                  {t("newUi.sidebar.userProfile.enable")}
+                </Button>
+              )}
             </div>
 
-            {showTotpSetup && !totpEnabled && (
+            {/* Disable TOTP form */}
+            {totpEnabled && showDisableTotp && (
+              <div className="border border-border bg-muted/20 p-3 flex flex-col gap-3">
+                <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+                  {t("newUi.sidebar.userProfile.totpDisableTitle")}
+                </span>
+                <Input
+                  placeholder={t(
+                    "newUi.sidebar.userProfile.totpDisablePlaceholder",
+                  )}
+                  value={disableTotpInput}
+                  onChange={(e) => setDisableTotpInput(e.target.value)}
+                  className="text-sm"
+                />
+                <div className="flex gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="flex-1 text-xs"
+                    onClick={() => {
+                      setShowDisableTotp(false);
+                      setDisableTotpInput("");
+                    }}
+                  >
+                    {t("newUi.sidebar.userProfile.cancel")}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="flex-1 text-xs border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
+                    onClick={handleDisableTotp}
+                    disabled={totpLoading}
+                  >
+                    {t("newUi.sidebar.userProfile.totpDisableConfirm")}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            {/* TOTP setup: scan QR */}
+            {!totpEnabled && totpStep === "setup" && (
               <div className="border border-border bg-muted/20 p-3 flex flex-col gap-3">
                 <div className="flex items-center justify-between">
                   <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
                     {t("newUi.sidebar.userProfile.setupTotp")}
                   </span>
                   <button
-                    onClick={() => setShowTotpSetup(false)}
+                    onClick={() => setTotpStep("idle")}
                     className="text-muted-foreground hover:text-foreground"
                   >
                     <X className="size-3.5" />
                   </button>
                 </div>
+                {totpQrCode ? (
+                  <div className="flex items-center justify-center p-3 bg-background border border-border">
+                    <img
+                      src={totpQrCode}
+                      alt="TOTP QR Code"
+                      className="size-32"
+                    />
+                  </div>
+                ) : (
                   <div className="flex items-center justify-center p-3 bg-background border border-border">
                     <div className="size-24 bg-muted flex items-center justify-center text-[10px] text-muted-foreground">
                       {t("newUi.sidebar.userProfile.qrCode")}
                     </div>
                   </div>
+                )}
                 <div className="flex items-center gap-2 bg-muted/30 border border-border px-2 py-1.5">
                   <span className="text-[10px] font-mono flex-1 tracking-widest select-all truncate">
-                    JBSWY3DPEHPK3PXP
+                    {totpSecret}
                   </span>
                   <button
                     onClick={() => {
-                      navigator.clipboard.writeText("JBSWY3DPEHPK3PXP");
+                      navigator.clipboard.writeText(totpSecret);
-                      toast.info("Secret copied");
+                      toast.info(t("newUi.sidebar.userProfile.secretCopied"));
                     }}
                     className="text-muted-foreground hover:text-accent-brand shrink-0"
                   >
@@ -822,18 +1164,49 @@ export function UserProfilePanel({
                 <span className="text-[10px] text-muted-foreground text-center">
                   {t("newUi.sidebar.userProfile.totpInstructions")}
                 </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+                  onClick={() => setTotpStep("verify")}
+                >
+                  {t("newUi.sidebar.userProfile.totpContinueVerify")}
+                </Button>
+              </div>
+            )}
+
+            {/* TOTP setup: verify code */}
+            {!totpEnabled && totpStep === "verify" && (
+              <div className="border border-border bg-muted/20 p-3 flex flex-col gap-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+                    {t("newUi.sidebar.userProfile.totpVerifyTitle")}
+                  </span>
+                  <button
+                    onClick={() => setTotpStep("setup")}
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    <X className="size-3.5" />
+                  </button>
+                </div>
                 <Input
                   placeholder={t(
                     "newUi.sidebar.userProfile.totpCodePlaceholder",
                   )}
+                  value={totpCode}
+                  onChange={(e) =>
+                    setTotpCode(e.target.value.replace(/\D/g, "").slice(0, 6))
+                  }
+                  onKeyDown={(e) => e.key === "Enter" && handleVerifyTotp()}
                   className="text-center font-mono tracking-widest text-lg h-10"
+                  maxLength={6}
                 />
                 <div className="flex gap-2">
                   <Button
                     variant="ghost"
                     size="sm"
                     className="flex-1 text-xs"
-                    onClick={() => setShowTotpSetup(false)}
+                    onClick={() => setTotpStep("setup")}
                   >
                     {t("newUi.sidebar.userProfile.cancel")}
                   </Button>
@@ -841,11 +1214,8 @@ export function UserProfilePanel({
                     variant="outline"
                     size="sm"
                     className="flex-1 text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
-                    onClick={() => {
+                    onClick={handleVerifyTotp}
-                      setTotpEnabled(true);
+                    disabled={totpLoading || totpCode.length !== 6}
-                      setShowTotpSetup(false);
-                      toast.success("TOTP enabled successfully");
-                    }}
                   >
                     <CheckCircle2 className="size-3.5" />
                     {t("newUi.sidebar.userProfile.verify")}
@@ -853,13 +1223,50 @@ export function UserProfilePanel({
                 </div>
               </div>
             )}
+
+            {/* TOTP setup: backup codes */}
+            {totpStep === "backup" && totpBackupCodes.length > 0 && (
+              <div className="border border-border bg-muted/20 p-3 flex flex-col gap-3">
+                <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+                  {t("newUi.sidebar.userProfile.totpBackupTitle")}
+                </span>
+                <div className="grid grid-cols-2 gap-1">
+                  {totpBackupCodes.map((code) => (
+                    <span
+                      key={code}
+                      className="text-[10px] font-mono bg-muted border border-border px-2 py-1 text-center"
+                    >
+                      {code}
+                    </span>
+                  ))}
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="text-xs border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+                  onClick={downloadBackupCodes}
+                >
+                  {t("newUi.sidebar.userProfile.totpDownloadBackup")}
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-xs"
+                  onClick={() => setTotpStep("idle")}
+                >
+                  {t("newUi.sidebar.userProfile.done")}
+                </Button>
+              </div>
+            )}
           </div>
 
+          {canChangePasword && (
             <PasswordChangeSection
               showPassword={showPassword}
               setShowPassword={setShowPassword}
               onLogout={onLogout}
             />
+          )}
         </div>
       </AccordionSection>
 
@@ -915,28 +1322,17 @@ export function UserProfilePanel({
                       {key.tokenPrefix}…
                     </span>
                     <span className="text-[10px] text-muted-foreground">
-                      User: {key.username}
+                      {t("newUi.sidebar.userProfile.apiKeyUser")}:{" "}
+                      {key.username}
                     </span>
                     {key.expiresAt && (
                       <span className="text-[10px] text-muted-foreground">
-                        Exp: {new Date(key.expiresAt).toLocaleDateString()}
+                        {t("newUi.sidebar.userProfile.apiKeyExpires")}:{" "}
+                        {new Date(key.expiresAt).toLocaleDateString()}
                       </span>
                     )}
                   </div>
                   <div className="flex items-center gap-0.5 shrink-0">
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="size-6 text-muted-foreground hover:text-accent-brand"
-                      onClick={() => {
-                        navigator.clipboard.writeText(
-                          key.tokenPrefix + "_demo_token",
-                        );
-                        toast.info("Token prefix copied");
-                      }}
-                    >
-                      <Copy className="size-3" />
-                    </Button>
                     <Button
                       variant="ghost"
                       size="icon"
@@ -947,9 +1343,15 @@ export function UserProfilePanel({
                           setApiKeys((prev) =>
                             prev.filter((k) => k.id !== key.id),
                           );
-                          toast.success(`Revoked "${key.name}"`);
+                          toast.success(
+                            t("newUi.sidebar.userProfile.apiKeyRevoked", {
+                              name: key.name,
+                            }),
+                          );
                         } catch {
-                          toast.error("Failed to revoke key");
+                          toast.error(
+                            t("newUi.sidebar.userProfile.apiKeyRevokeFailed"),
+                          );
                         }
                       }}
                     >
@@ -986,8 +1388,14 @@ export function UserProfilePanel({
         </AccordionSection>
       )}
 
-      {/* Delete confirm dialog */}
+      {/* Delete account dialog */}
-      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+      <Dialog
+        open={showDeleteConfirm}
+        onOpenChange={(open) => {
+          setShowDeleteConfirm(open);
+          if (!open) setDeletePassword("");
+        }}
+      >
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
             <DialogTitle className="text-lg font-bold text-destructive">
@@ -1013,19 +1421,32 @@ export function UserProfilePanel({
                 placeholder={t(
                   "newUi.sidebar.userProfile.confirmPasswordDeletePlaceholder",
                 )}
+                value={deletePassword}
+                onChange={(e) => setDeletePassword(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleDeleteAccount()}
               />
             </div>
           </div>
           <div className="flex items-center justify-end gap-2 mt-2">
-            <Button variant="ghost" onClick={() => setShowDeleteConfirm(false)}>
+            <Button
+              variant="ghost"
+              onClick={() => {
+                setShowDeleteConfirm(false);
+                setDeletePassword("");
+              }}
+            >
               {t("newUi.sidebar.userProfile.cancel")}
             </Button>
             <Button
               variant="outline"
               className="border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
+              onClick={handleDeleteAccount}
+              disabled={deleteLoading || !deletePassword.trim()}
             >
               <Trash2 className="size-3.5" />
-              {t("newUi.sidebar.userProfile.deleteAccount")}
+              {deleteLoading
+                ? t("newUi.sidebar.userProfile.deleting")
+                : t("newUi.sidebar.userProfile.deleteAccount")}
             </Button>
           </div>
         </DialogContent>

src/ui/ssh/connection-log/ConnectionLog.tsx

@@ -105,8 +105,8 @@ export function ConnectionLog({
 
   const borderClass =
     position === "bottom" && !isExpanded
-      ? "border-t-2 border-border"
+      ? "border-t-1 border-border"
-      : "border-b-2 border-border";
+      : "border-b-1 border-border";
 
   return (
     <div
@@ -117,7 +117,7 @@ export function ConnectionLog({
       )}
 
       <div
-        className={`relative z-10 bg-bg-subtle pointer-events-auto ${isExpanded ? "flex flex-col h-full" : ""} ${!isExpanded ? borderClass : ""}`}
+        className={`relative z-10 bg-bg-base pointer-events-auto ${isExpanded ? "flex flex-col h-full" : ""} ${!isExpanded ? borderClass : ""}`}
       >
         <div className="flex items-center justify-between px-3 py-2 shrink-0">
           <Button
@@ -152,7 +152,7 @@ export function ConnectionLog({
         {isExpanded && (
           <div
             ref={logContainerRef}
-            className="flex-1 h-0 overflow-y-auto overflow-x-hidden thin-scrollbar border-t-2 border-border bg-bg-base"
+            className="flex-1 h-0 overflow-y-auto overflow-x-hidden thin-scrollbar border-t-1 border-border bg-bg-base"
           >
             <div className="px-3 py-2">
               {logs.length === 0 ? (

tsconfig.app.json

@@ -28,6 +28,7 @@
     "noImplicitOverride": false,
     "noEmitOnError": false,
     "paths": {
+      "@/types/*": ["./src/types/*"],
       "@/*": ["./src/ui/*"]
     }
   },

tsconfig.json

@@ -13,6 +13,7 @@
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "paths": {
+      "@/types/*": ["./src/types/*"],
       "@/*": ["./src/ui/*"]
     }
   }

tsconfig.node.json

@@ -26,5 +26,9 @@
     "allowUnusedLabels": true,
     "allowUnreachableCode": true
   },
-  "include": ["src/backend/**/*.ts"]
+  "include": [
+    "src/backend/**/*.ts",
+    "src/types/**/*.ts",
+    "src/ui/types/**/*.ts"
+  ]
 }

vite.config.ts

@@ -92,6 +92,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      "@/types": path.resolve(__dirname, "./src/types"),
       "@": path.resolve(__dirname, "./src/ui"),
     },
   },