feat: initial ui redesign from demo

src/ui/AppShell.tsx

@@ -0,0 +1,608 @@
+import { Separator } from "@/components/separator";
+import { Button } from "@/components/button";
+import { Sheet, SheetContent } from "@/components/sheet";
+import { ChevronLeft, ChevronRight, Maximize2 } from "lucide-react";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { MobileBottomBar } from "@/shell/MobileBottomBar";
+import { CommandPalette } from "@/shell/CommandPalette";
+import { AppRail } from "@/sidebar/AppRail";
+import type { RailView } from "@/sidebar/AppRail";
+import { HostsPanel } from "@/sidebar/HostsPanel";
+import { QuickConnectPanel } from "@/sidebar/QuickConnectPanel";
+import { SshToolsPanel } from "@/sidebar/SshToolsPanel";
+import { SnippetsPanel } from "@/sidebar/SnippetsPanel";
+import { HistoryPanel } from "@/sidebar/HistoryPanel";
+import { SplitScreenPanel } from "@/sidebar/SplitScreenPanel";
+import { UserProfilePanel } from "@/sidebar/UserProfilePanel";
+import { AdminSettingsPanel } from "@/sidebar/AdminSettingsPanel";
+import { SplitView } from "@/shell/SplitView";
+import { TabBar } from "@/shell/TabBar";
+import type {
+  Tab,
+  TabType,
+  Host,
+  SplitMode,
+  HostFolder,
+} from "@/types/ui-types";
+import { getSSHHosts } from "@/main-axios";
+import type { SSHHostWithStatus } from "@/main-axios";
+
+function sshHostToHost(h: SSHHostWithStatus): Host {
+  return {
+    id: String(h.id),
+    name: h.name,
+    username: h.username,
+    ip: h.ip,
+    port: h.port,
+    folder: h.folder ?? "",
+    online: h.status === "online",
+    cpu: 0,
+    ram: 0,
+    lastAccess: "",
+    tags: h.tags ?? [],
+    authType: h.authType,
+    password: h.password,
+    key: typeof h.key === "string" ? h.key : undefined,
+    keyPassword: h.keyPassword,
+    keyType: h.keyType,
+    credentialId: h.credentialId != null ? String(h.credentialId) : undefined,
+    notes: h.notes,
+    pin: h.pin ?? false,
+    macAddress: h.macAddress,
+    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",
+    sshPort: h.port,
+    rdpPort: 3389,
+    vncPort: 5900,
+    telnetPort: 23,
+    quickActions: (h.quickActions ?? []).map((a) => ({
+      name: a.name,
+      snippetId: String(a.snippetId),
+    })),
+    serverTunnels: [],
+    defaultPath: h.defaultPath,
+    terminalConfig: h.terminalConfig as Host["terminalConfig"],
+    useSocks5: h.useSocks5,
+    socks5Host: h.socks5Host,
+    socks5Port: h.socks5Port,
+    socks5Username: h.socks5Username,
+    socks5Password: h.socks5Password,
+  };
+}
+
+function buildHostTree(hosts: SSHHostWithStatus[]): HostFolder {
+  const root: HostFolder = { name: "root", children: [] };
+  const folderMap = new Map<string, HostFolder>();
+  const getOrCreateFolder = (path: string): HostFolder => {
+    if (folderMap.has(path)) return folderMap.get(path)!;
+    const parts = path.split(" / ");
+    let current = root;
+    let accumulated = "";
+    for (const part of parts) {
+      accumulated = accumulated ? `${accumulated} / ${part}` : part;
+      if (!folderMap.has(accumulated)) {
+        const folder: HostFolder = { name: part, children: [] };
+        folderMap.set(accumulated, folder);
+        current.children.push(folder);
+      }
+      current = folderMap.get(accumulated)!;
+    }
+    return current;
+  };
+  for (const h of hosts) {
+    const host = sshHostToHost(h);
+    if (h.folder) {
+      getOrCreateFolder(h.folder).children.push(host);
+    } else {
+      root.children.push(host);
+    }
+  }
+  return root;
+}
+export { tabIcon, renderTabContent } from "@/shell/tabUtils";
+import { renderTabContent } from "@/shell/tabUtils";
+
+const DASHBOARD_TAB: Tab = {
+  id: "dashboard",
+  type: "dashboard",
+  label: "Dashboard",
+};
+
+const SINGLETON_TAB_LABELS: Partial<Record<TabType, string>> = {
+  "host-manager": "Host Manager",
+  docker: "Docker",
+  tunnel: "Tunnels",
+};
+
+// ─── AppShell ────────────────────────────────────────────────────────────────
+
+export function AppShell({
+  username,
+  onLogout,
+}: {
+  username: string;
+  onLogout: () => void;
+}) {
+  const [tabs, setTabs] = useState<Tab[]>([DASHBOARD_TAB]);
+  const [activeTabId, setActiveTabId] = useState("dashboard");
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+  const [splitMode, setSplitMode] = useState<SplitMode>("none");
+  const [paneTabIds, setPaneTabIds] = useState<(string | null)[]>(
+    Array(6).fill(null),
+  );
+  const [realHostTree, setRealHostTree] = useState<HostFolder | null>(null);
+  const [allHosts, setAllHosts] = useState<Host[]>([]);
+
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [railView, setRailView] = useState<RailView>("hosts");
+  const [profileDropdownOpen, setProfileDropdownOpen] = useState(false);
+  const [hostManagerExpanded, setHostManagerExpanded] = useState(false);
+  const [sidebarWidth, setSidebarWidth] = useState(256);
+  const [sidebarDragging, setSidebarDragging] = useState(false);
+
+  const isMobile = useIsMobile();
+
+  // Close the sidebar when switching to mobile (it becomes a sheet overlay)
+  useEffect(() => {
+    if (isMobile) setSidebarOpen(false);
+  }, [isMobile]);
+
+  const pendingHostManagerEditId = useRef<string | null>(null);
+  const pendingHostManagerAction = useRef<"add-host" | "add-credential" | null>(
+    null,
+  );
+  const lastShiftTime = useRef(0);
+
+  const sidebarTitle: Record<RailView, string> = {
+    hosts: "Hosts",
+    "quick-connect": "Quick Connect",
+    "ssh-tools": "SSH Tools",
+    snippets: "Snippets",
+    history: "History",
+    "split-screen": "Split Screen",
+    "user-profile": "User Profile",
+    "admin-settings": "Admin Settings",
+  };
+
+  // Double-shift opens command palette
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.code === "ShiftLeft") {
+        const now = Date.now();
+        if (now - lastShiftTime.current < 300)
+          setCommandPaletteOpen((prev) => !prev);
+        lastShiftTime.current = now;
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  useEffect(() => {
+    const handle = () => onLogout();
+    window.addEventListener("termix:logout", handle);
+    return () => window.removeEventListener("termix:logout", handle);
+  }, [onLogout]);
+
+  // Load real hosts from API
+  const loadHosts = useCallback(async () => {
+    try {
+      const raw = await getSSHHosts();
+      const converted = raw.map(sshHostToHost);
+      setAllHosts(converted);
+      setRealHostTree(buildHostTree(raw));
+    } catch {
+      // Keep empty state on error
+    }
+  }, []);
+
+  useEffect(() => {
+    loadHosts();
+  }, [loadHosts]);
+
+  // Sync tab host data when allHosts updates (e.g. after editing terminal theme in host settings)
+  useEffect(() => {
+    if (allHosts.length === 0) return;
+    setTabs((prev) =>
+      prev.map((t) =>
+        t.host
+          ? { ...t, host: allHosts.find((h) => h.id === t.host!.id) ?? t.host }
+          : t,
+      ),
+    );
+  }, [allHosts]);
+
+  // Let HostManager trigger tab opens via custom event
+  useEffect(() => {
+    const handle = (e: Event) => {
+      const { hostId, type } = (
+        e as CustomEvent<{ hostId: string; type?: TabType }>
+      ).detail;
+      const host = allHosts.find((h) => h.id === hostId);
+      if (host) connectHost(host, type);
+    };
+    window.addEventListener("termix:open-tab", handle);
+    return () => window.removeEventListener("termix:open-tab", handle);
+  }, [tabs, allHosts]);
+
+  // ─── Tab management ──────────────────────────────────────────────────────
+
+  function openTab(host: Host, type: TabType) {
+    setTabs((prev) => {
+      const same = prev.filter(
+        (t) =>
+          t.type === type && t.label.replace(/ \(\d+\)$/, "") === host.name,
+      );
+      if (same.length === 0) {
+        const tab = {
+          id: `${host.name}-${type}`,
+          type,
+          label: host.name,
+          host,
+        };
+        setActiveTabId(tab.id);
+        return [...prev, tab];
+      }
+      const next = prev.map((t) =>
+        t.id === same[0].id && !/\(\d+\)$/.test(t.label)
+          ? { ...t, label: `${host.name} (1)`, host }
+          : t,
+      );
+      const tab = {
+        id: `${host.name}-${type}-${Date.now()}`,
+        type,
+        label: `${host.name} (${same.length + 1})`,
+        host,
+      };
+      setActiveTabId(tab.id);
+      return [...next, tab];
+    });
+  }
+
+  function connectHost(host: Host, preferredType?: TabType) {
+    const type: TabType =
+      preferredType ??
+      (host.enableSsh
+        ? "terminal"
+        : host.enableRdp
+          ? "rdp"
+          : host.enableVnc
+            ? "vnc"
+            : host.enableTelnet
+              ? "telnet"
+              : "terminal");
+    openTab(host, type);
+  }
+
+  function openSingletonTab(type: TabType, pendingEvent?: string) {
+    if (type === "host-manager") {
+      if (pendingEvent === "host-manager:add-host")
+        pendingHostManagerAction.current = "add-host";
+      else if (pendingEvent === "host-manager:add-credential")
+        pendingHostManagerAction.current = "add-credential";
+
+      setHostManagerExpanded(true);
+      setSidebarOpen(true);
+      setRailView("hosts");
+
+      if (pendingEvent) {
+        // Use a small delay to ensure HostManager is mounted if it wasn't already,
+        // and to allow the current render cycle to complete.
+        setTimeout(() => {
+          window.dispatchEvent(new CustomEvent(pendingEvent));
+        }, 0);
+      }
+      return;
+    }
+    if (type === "user-profile" || type === "admin-settings") {
+      handleRailClick(type as RailView);
+      return;
+    }
+    const id = type;
+    setTabs((prev) => {
+      if (prev.find((t) => t.id === id)) return prev;
+      return [...prev, { id, type, label: SINGLETON_TAB_LABELS[type] ?? type }];
+    });
+    setActiveTabId(id);
+  }
+
+  function closeTab(id: string) {
+    setTabs((prev) => {
+      const next = prev.filter((t) => t.id !== id);
+      if (id === activeTabId) setActiveTabId(next[next.length - 1].id);
+      return next;
+    });
+  }
+
+  // ─── Rail / sidebar ──────────────────────────────────────────────────────
+
+  function handleRailClick(view: RailView) {
+    if (railView === view && sidebarOpen) {
+      setSidebarOpen(false);
+    } else {
+      setRailView(view);
+      setSidebarOpen(true);
+    }
+  }
+
+  function editHostInManager(host: Host) {
+    pendingHostManagerEditId.current = host.id;
+    setHostManagerExpanded(true);
+    setSidebarOpen(true);
+    setRailView("hosts");
+  }
+
+  const onSidebarMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      setSidebarDragging(true);
+      const startX = e.clientX;
+      const startW = sidebarWidth;
+      function onMove(ev: MouseEvent) {
+        setSidebarWidth(
+          Math.max(160, Math.min(480, startW + ev.clientX - startX)),
+        );
+      }
+      function onUp() {
+        setSidebarDragging(false);
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      }
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [sidebarWidth],
+  );
+
+  const activeTab = tabs.find((t) => t.id === activeTabId)!;
+  const isSplit = splitMode !== "none";
+  const terminalTabs = tabs.filter((t) => t.type === "terminal");
+
+  // Sidebar panel content — shared between desktop inline sidebar and mobile sheet
+  const sidebarPanelContent = (
+    <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+      {railView === "hosts" && (
+        <HostsPanel
+          expanded={hostManagerExpanded}
+          onExpand={() => setHostManagerExpanded(true)}
+          onCollapse={() => {
+            setHostManagerExpanded(false);
+            loadHosts();
+          }}
+          pendingEditId={pendingHostManagerEditId}
+          pendingAction={pendingHostManagerAction}
+          onOpenTab={(host, type) => {
+            connectHost(host, type);
+            if (isMobile) setSidebarOpen(false);
+          }}
+          onEditHost={editHostInManager}
+          hostTree={realHostTree ?? undefined}
+        />
+      )}
+
+      {railView === "quick-connect" && <QuickConnectPanel />}
+
+      {railView === "ssh-tools" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <SshToolsPanel
+            terminalTabs={terminalTabs}
+            activeTabId={activeTabId}
+          />
+        </div>
+      )}
+
+      {railView === "snippets" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <SnippetsPanel
+            terminalTabs={terminalTabs}
+            activeTabId={activeTabId}
+          />
+        </div>
+      )}
+
+      {railView === "history" && (
+        <div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
+          <HistoryPanel terminalTabs={terminalTabs} activeTabId={activeTabId} />
+        </div>
+      )}
+
+      {railView === "split-screen" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <SplitScreenPanel
+            tabs={tabs}
+            splitMode={splitMode}
+            setSplitMode={setSplitMode}
+            paneTabIds={paneTabIds}
+            setPaneTabIds={setPaneTabIds}
+          />
+        </div>
+      )}
+
+      {railView === "user-profile" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <UserProfilePanel username={username} onLogout={onLogout} />
+        </div>
+      )}
+
+      {railView === "admin-settings" && (
+        <div className="flex-1 min-h-0 overflow-y-auto">
+          <AdminSettingsPanel />
+        </div>
+      )}
+    </div>
+  );
+
+  // Sidebar header — shared
+  const sidebarHeader = (
+    <div className="flex flex-row items-center border-b border-border h-12.5 shrink-0">
+      <span className="flex-1 text-base font-bold tracking-tight text-foreground px-3">
+        {sidebarTitle[railView]}
+      </span>
+      {!hostManagerExpanded && !isMobile && (
+        <>
+          <Separator orientation="vertical" />
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
+            title="Reset width"
+            onClick={() => setSidebarWidth(256)}
+          >
+            <Maximize2 className="size-3.5" />
+          </Button>
+        </>
+      )}
+      <Separator orientation="vertical" />
+      <Button
+        variant="ghost"
+        size="icon"
+        className="h-full w-12.5 rounded-none text-muted-foreground hover:text-foreground"
+        onClick={() => {
+          setSidebarOpen(false);
+          setHostManagerExpanded(false);
+        }}
+      >
+        <ChevronLeft className="size-4" />
+      </Button>
+    </div>
+  );
+
+  return (
+    <>
+      <div className="flex w-screen bg-background" style={{ height: "100dvh" }}>
+        {/* Skinny icon rail — desktop only, hidden on mobile */}
+        <AppRail
+          railView={railView}
+          sidebarOpen={sidebarOpen}
+          splitMode={splitMode}
+          username={username}
+          profileDropdownOpen={profileDropdownOpen}
+          onProfileDropdownChange={setProfileDropdownOpen}
+          onRailClick={handleRailClick}
+          onLogout={onLogout}
+        />
+
+        {/* Desktop: inline resizable sidebar */}
+        {!isMobile && (
+          <div
+            className={`relative flex flex-col bg-sidebar shrink-0 overflow-hidden ${sidebarOpen ? `border-r transition-colors ${sidebarDragging ? "border-accent-brand/60" : "border-border"}` : ""}`}
+            style={{
+              width: sidebarOpen
+                ? hostManagerExpanded && railView === "hosts"
+                  ? 720
+                  : sidebarWidth
+                : 0,
+              transition: sidebarDragging ? "none" : "width 0.2s",
+            }}
+          >
+            {sidebarHeader}
+            {sidebarPanelContent}
+
+            {sidebarOpen && !(hostManagerExpanded && railView === "hosts") && (
+              <div
+                onMouseDown={onSidebarMouseDown}
+                className={`absolute right-0 top-0 bottom-0 w-1 cursor-col-resize z-30 transition-colors ${sidebarDragging ? "bg-accent-brand/60" : "hover:bg-accent-brand/40"}`}
+              />
+            )}
+          </div>
+        )}
+
+        {/* Mobile: sidebar as overlay sheet */}
+        {isMobile && (
+          <Sheet
+            open={sidebarOpen}
+            onOpenChange={(open) => {
+              setSidebarOpen(open);
+              if (!open) setHostManagerExpanded(false);
+            }}
+          >
+            <SheetContent
+              side="left"
+              showCloseButton={false}
+              className="p-0 flex flex-col w-[min(85vw,360px)] max-w-full bg-sidebar border-r border-border gap-0"
+              style={{ height: "100dvh" }}
+            >
+              {sidebarHeader}
+              {sidebarPanelContent}
+            </SheetContent>
+          </Sheet>
+        )}
+
+        {/* Main content area */}
+        <div
+          className={`relative flex flex-col flex-1 min-w-0 overflow-hidden transition-all duration-200 ${!isMobile && !sidebarOpen ? "pl-6" : ""}`}
+        >
+          {!isMobile && !sidebarOpen && (
+            <button
+              onClick={() => setSidebarOpen(true)}
+              title="Open Sidebar"
+              className="absolute left-0 top-0 bottom-0 z-20 flex items-center justify-center w-6 bg-sidebar border-r border-border text-muted-foreground hover:text-accent-brand hover:bg-accent-brand/5 transition-colors"
+            >
+              <ChevronRight className="size-3.5" />
+            </button>
+          )}
+          <div className="flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden">
+            <TabBar
+              tabs={tabs}
+              activeTabId={activeTabId}
+              onSetActiveTab={setActiveTabId}
+              onCloseTab={closeTab}
+              onReorderTabs={setTabs}
+            />
+            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
+              {isSplit && !isMobile ? (
+                <SplitView
+                  tabs={tabs}
+                  paneTabIds={paneTabIds}
+                  splitMode={splitMode}
+                  onOpenSingletonTab={openSingletonTab}
+                  onOpenTab={openTab}
+                />
+              ) : activeTab ? (
+                renderTabContent(activeTab, openSingletonTab, openTab)
+              ) : null}
+            </div>
+          </div>
+
+          {/* Bottom nav bar — mobile only */}
+          <MobileBottomBar
+            railView={railView}
+            sidebarOpen={sidebarOpen}
+            splitMode={splitMode}
+            onRailClick={handleRailClick}
+          />
+        </div>
+      </div>
+
+      <CommandPalette
+        isOpen={commandPaletteOpen}
+        setIsOpen={setCommandPaletteOpen}
+        hosts={allHosts}
+        onOpenTab={(type, label, pendingEvent) => {
+          if (
+            [
+              "dashboard",
+              "host-manager",
+              "user-profile",
+              "admin-settings",
+              "docker",
+              "tunnel",
+            ].includes(type)
+          ) {
+            openSingletonTab(type, pendingEvent);
+          } else if (label) {
+            const host = allHosts.find((h) => h.name === label);
+            if (host) openTab(host, type);
+          }
+        }}
+      />
+    </>
+  );
+}

src/ui/admin/AdminSettings.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { useSidebar } from "@/components/ui/sidebar.tsx";
-import { Separator } from "@/components/ui/separator.tsx";
+import { useSidebar } from "@/components/sidebar.tsx";
+import { Separator } from "@/components/separator.tsx";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@/components/ui/tabs.tsx";
+} from "@/components/tabs.tsx";
 import { Shield, Users, Database, Clock, Key } from "lucide-react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
@@ -21,15 +21,15 @@ import {
   isElectron,
   getSessions,
   unlinkOIDCFromPasswordAccount,
-} from "@/ui/main-axios.ts";
-import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
-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 { ApiKeysTab } from "@/ui/desktop/apps/admin/tabs/ApiKeysTab.tsx";
+} from "@/main-axios.ts";
+import { SimpleLoader } from "@/lib/SimpleLoader.tsx";
+import { RolesTab } from "@/admin/tabs/RolesTab.tsx";
+import { GeneralSettingsTab } from "@/admin/tabs/GeneralSettingsTab.tsx";
+import { OIDCSettingsTab } from "@/admin/tabs/OIDCSettingsTab.tsx";
+import { UserManagementTab } from "@/admin/tabs/UserManagementTab.tsx";
+import { SessionManagementTab } from "@/admin/tabs/SessionManagementTab.tsx";
+import { DatabaseSecurityTab } from "@/admin/tabs/DatabaseSecurityTab.tsx";
+import { ApiKeysTab } from "@/admin/tabs/ApiKeysTab.tsx";
 import { CreateUserDialog } from "./dialogs/CreateUserDialog.tsx";
 import { UserEditDialog } from "./dialogs/UserEditDialog.tsx";
 import { LinkAccountDialog } from "./dialogs/LinkAccountDialog.tsx";

src/ui/admin/dialogs/CreateUserDialog.tsx

@@ -6,16 +6,16 @@ import {
   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";
+} from "@/components/dialog.tsx";
+import { Button } from "@/components/button.tsx";
+import { Label } from "@/components/label.tsx";
+import { Input } from "@/components/input.tsx";
+import { PasswordInput } from "@/components/password-input.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import { UserPlus, AlertCircle } from "lucide-react";
 import { toast } from "sonner";
-import { registerUser } from "@/ui/main-axios.ts";
+import { registerUser } from "@/main-axios.ts";
 
 interface CreateUserDialogProps {
   open: boolean;

src/ui/admin/dialogs/LinkAccountDialog.tsx

@@ -6,15 +6,15 @@ import {
   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";
+} from "@/components/dialog.tsx";
+import { Button } from "@/components/button.tsx";
+import { Label } from "@/components/label.tsx";
+import { Input } from "@/components/input.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import { Link2 } from "lucide-react";
 import { toast } from "sonner";
-import { linkOIDCToPasswordAccount } from "@/ui/main-axios.ts";
+import { linkOIDCToPasswordAccount } from "@/main-axios.ts";
 
 interface LinkAccountDialogProps {
   open: boolean;

src/ui/admin/dialogs/UserEditDialog.tsx

@@ -5,13 +5,13 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
-} 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";
+} from "@/components/dialog.tsx";
+import { Button } from "@/components/button.tsx";
+import { Label } from "@/components/label.tsx";
+import { Badge } from "@/components/badge.tsx";
+import { Switch } from "@/components/switch.tsx";
+import { Separator } from "@/components/separator.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import {
   UserCog,
@@ -34,7 +34,7 @@ import {
   deleteUser,
   type UserRole,
   type Role,
-} from "@/ui/main-axios.ts";
+} from "@/main-axios.ts";
 
 interface User {
   id: string;

src/ui/admin/tabs/ApiKeysTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import {
   Table,
   TableBody,
@@ -7,7 +7,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table.tsx";
+} from "@/components/table.tsx";
 import {
   Dialog,
   DialogContent,
@@ -15,12 +15,12 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog.tsx";
+} from "@/components/dialog.tsx";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover.tsx";
+} from "@/components/popover.tsx";
 import {
   Command,
   CommandEmpty,
@@ -28,11 +28,11 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from "@/components/ui/command.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Badge } from "@/components/ui/badge.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+} from "@/components/command.tsx";
+import { Input } from "@/components/input.tsx";
+import { Label } from "@/components/label.tsx";
+import { Badge } from "@/components/badge.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import {
   Key,
   Plus,
@@ -54,7 +54,7 @@ import {
   getUserList,
   type ApiKey,
   type CreatedApiKey,
-} from "@/ui/main-axios.ts";
+} from "@/main-axios.ts";
 
 interface UserOption {
   id: string;

src/ui/admin/tabs/DatabaseSecurityTab.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import { Download, Upload } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { isElectron } from "@/ui/main-axios.ts";
+import { isElectron } from "@/main-axios.ts";
 import { getBasePath } from "@/lib/base-path";
 
 export function DatabaseSecurityTab(): React.ReactElement {

src/ui/admin/tabs/GeneralSettingsTab.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { Checkbox } from "@/components/ui/checkbox.tsx";
-import { Input } from "@/components/ui/input.tsx";
+import { Checkbox } from "@/components/checkbox.tsx";
+import { Input } from "@/components/input.tsx";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select.tsx";
+} from "@/components/select.tsx";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useConfirmation } from "@/hooks/use-confirmation.ts";
@@ -23,8 +23,8 @@ import {
   updateLogLevel,
   getSessionTimeout,
   updateSessionTimeout,
-} from "@/ui/main-axios.ts";
-import { Button } from "@/components/ui/button.tsx";
+} from "@/main-axios.ts";
+import { Button } from "@/components/button.tsx";
 
 interface GeneralSettingsTabProps {
   allowRegistration: boolean;

src/ui/admin/tabs/OIDCSettingsTab.tsx

@@ -1,14 +1,14 @@
 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 { Button } from "@/components/button.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
+import { Input } from "@/components/input.tsx";
+import { PasswordInput } from "@/components/password-input.tsx";
+import { Label } from "@/components/label.tsx";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useConfirmation } from "@/hooks/use-confirmation.ts";
-import { Textarea } from "@/components/ui/textarea.tsx";
-import { updateOIDCConfig, disableOIDCConfig } from "@/ui/main-axios.ts";
+import { Textarea } from "@/components/textarea.tsx";
+import { updateOIDCConfig, disableOIDCConfig } from "@/main-axios.ts";
 
 interface OIDCSettingsTabProps {
   allowPasswordLogin: boolean;

src/ui/admin/tabs/RolesTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import {
   Dialog,
   DialogContent,
@@ -7,7 +7,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog.tsx";
+} from "@/components/dialog.tsx";
 import {
   Table,
   TableBody,
@@ -15,11 +15,11 @@ import {
   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";
+} from "@/components/table.tsx";
+import { Input } from "@/components/input.tsx";
+import { Label } from "@/components/label.tsx";
+import { Textarea } from "@/components/textarea.tsx";
+import { Badge } from "@/components/badge.tsx";
 import { Shield, Plus, Edit, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
@@ -30,7 +30,7 @@ import {
   updateRole,
   deleteRole,
   type Role,
-} from "@/ui/main-axios.ts";
+} from "@/main-axios.ts";
 
 export function RolesTab(): React.ReactElement {
   const { t } = useTranslation();

src/ui/admin/tabs/SessionManagementTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import {
   Table,
   TableBody,
@@ -7,12 +7,12 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table.tsx";
+} from "@/components/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 { revokeSession, revokeAllUserSessions } from "@/ui/main-axios.ts";
+import { revokeSession, revokeAllUserSessions } from "@/main-axios.ts";
 
 interface Session {
   id: string;

src/ui/admin/tabs/UserManagementTab.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button } from "@/components/ui/button.tsx";
+import { Button } from "@/components/button.tsx";
 import {
   Table,
   TableBody,
@@ -7,12 +7,12 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table.tsx";
+} from "@/components/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";
+import { deleteUser } from "@/main-axios.ts";
 
 interface User {
   id: string;

src/ui/auth/ElectronLoginForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import { AlertCircle, Loader2, ArrowLeft, RefreshCw } from "lucide-react";
 

src/ui/auth/ElectronServerConfig.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert.tsx";
+import { Button } from "@/components/button.tsx";
+import { Input } from "@/components/input.tsx";
+import { Label } from "@/components/label.tsx";
+import { Alert, AlertTitle, AlertDescription } from "@/components/alert.tsx";
 import { useTranslation } from "react-i18next";
 import {
   getServerConfig,
@@ -10,7 +10,7 @@ import {
   getEmbeddedServerStatus,
   setEmbeddedMode,
   type ServerConfig,
-} from "@/ui/main-axios.ts";
+} from "@/main-axios.ts";
 import { Server, Monitor, Loader2 } from "lucide-react";
 import { useTheme } from "@/components/theme-provider";
 

src/ui/auth/LoginPage.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useEffect, useCallback } from "react";
-import { Button } from "@/components/ui/button.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { PasswordInput } from "@/components/ui/password-input.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Checkbox } from "@/components/ui/checkbox.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs.tsx";
+import { Button } from "@/components/button.tsx";
+import { Input } from "@/components/input.tsx";
+import { PasswordInput } from "@/components/password-input.tsx";
+import { Label } from "@/components/label.tsx";
+import { Checkbox } from "@/components/checkbox.tsx";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
+import { Tabs, TabsList, TabsTrigger } from "@/components/tabs.tsx";
 import { useTranslation } from "react-i18next";
-import { LanguageSwitcher } from "@/ui/desktop/user/LanguageSwitcher.tsx";
+import { LanguageSwitcher } from "@/user/LanguageSwitcher.tsx";
 import { toast } from "sonner";
 import { Sun, Moon, Monitor } from "lucide-react";
 import { useTheme } from "@/components/theme-provider";
@@ -28,9 +28,9 @@ import {
   saveServerConfig,
   isElectron,
   getEmbeddedServerStatus,
-} from "../../main-axios.ts";
-import { ElectronServerConfig as ServerConfigComponent } from "@/ui/desktop/authentication/ElectronServerConfig.tsx";
-import { ElectronLoginForm } from "@/ui/desktop/authentication/ElectronLoginForm.tsx";
+} from "@/main-axios";
+import { ElectronServerConfig as ServerConfigComponent } from "@/auth/ElectronServerConfig.tsx";
+import { ElectronLoginForm } from "@/auth/ElectronLoginForm.tsx";
 
 function isMissingServerConfigError(error: unknown): boolean {
   if (!(error instanceof Error)) {

src/ui/components/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

src/ui/components/alert-dialog.tsx

@@ -0,0 +1,155 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

src/ui/components/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 font-medium tracking-tight whitespace-normal break-words",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

src/ui/components/badge.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

src/ui/components/button-group.tsx

@@ -0,0 +1,63 @@
+import {
+  Children,
+  type ReactElement,
+  cloneElement,
+  isValidElement,
+} from "react";
+
+import { type ButtonProps } from "@/components/button";
+import { cn } from "@/lib/utils";
+
+interface ButtonGroupProps {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+  children: ReactElement<ButtonProps>[] | React.ReactNode;
+}
+
+export const ButtonGroup = ({
+  className,
+  orientation = "horizontal",
+  children,
+}: ButtonGroupProps) => {
+  const isHorizontal = orientation === "horizontal";
+  const isVertical = orientation === "vertical";
+
+  // Normalize and filter only valid React elements
+  const childArray = Children.toArray(children).filter(
+    (child): child is ReactElement<ButtonProps> => isValidElement(child),
+  );
+  const totalButtons = childArray.length;
+
+  return (
+    <div
+      className={cn(
+        "flex",
+        {
+          "flex-col": isVertical,
+          "w-fit": isVertical,
+        },
+        className,
+      )}
+    >
+      {childArray.map((child, index) => {
+        const isFirst = index === 0;
+        const isLast = index === totalButtons - 1;
+
+        return cloneElement(child, {
+          className: cn(
+            {
+              "rounded-l-none": isHorizontal && !isFirst,
+              "rounded-r-none": isHorizontal && !isLast,
+              "border-l-0": isHorizontal && !isFirst,
+
+              "rounded-t-none": isVertical && !isFirst,
+              "rounded-b-none": isVertical && !isLast,
+              "border-t-0": isVertical && !isFirst,
+            },
+            child.props.className,
+          ),
+        });
+      })}
+    </div>
+  );
+};

src/ui/components/button.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs": "size-6 rounded-none [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7 rounded-none",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export type ButtonProps = React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & { asChild?: boolean };
+
+export { Button, buttonVariants };

src/ui/components/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-none bg-card py-4 text-xs/relaxed text-card-foreground border border-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-sm font-medium group-data-[size=sm]/card:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-none border-t p-4 group-data-[size=sm]/card:p-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

src/ui/components/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

src/ui/components/command.tsx

@@ -0,0 +1,130 @@
+import * as React from "react";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const Command = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-none bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = "Command";
+
+const CommandInput = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, ...props }, ref) => (
+  <div
+    className="flex items-center border-b border-border px-3"
+    cm-input-wrapper=""
+  >
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-none bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+CommandInput.displayName = "CommandInput";
+
+const CommandList = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+CommandList.displayName = "CommandList";
+
+const CommandGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { heading?: string }
+>(({ className, heading, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cm-group-heading]]:px-2 [&_[cm-group-heading]]:py-1.5 [&_[cm-group-heading]]:text-xs [&_[cm-group-heading]]:font-medium [&_[cm-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  >
+    {heading && <div cm-group-heading="">{heading}</div>}
+    {children}
+  </div>
+));
+CommandGroup.displayName = "CommandGroup";
+
+const CommandSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+));
+CommandSeparator.displayName = "CommandSeparator";
+
+const CommandItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & { onSelect?: () => void }
+>(({ className, onSelect, ...props }, ref) => (
+  <div
+    ref={ref}
+    onClick={onSelect}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-muted hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-colors",
+      className,
+    )}
+    {...props}
+  />
+));
+CommandItem.displayName = "CommandItem";
+
+const CommandEmpty = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("py-6 text-center text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CommandEmpty.displayName = "CommandEmpty";
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span
+    className={cn(
+      "ml-auto text-xs tracking-widest text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+);
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandEmpty,
+  CommandShortcut,
+};

src/ui/components/dialog.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/button";
+import { XIcon } from "lucide-react";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-popover p-4 text-xs/relaxed text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2"
+              size="icon-sm"
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-1 text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("font-heading text-sm font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

src/ui/components/dropdown-menu.tsx

@@ -0,0 +1,271 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  );
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuContent({
+  className,
+  align = "start",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn(
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-border duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  );
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-2 text-xs text-muted-foreground data-inset:pl-7",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-lg ring-1 ring-border duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

src/ui/components/folder.tsx

@@ -0,0 +1,677 @@
+"use client";
+import React, {
+  useState,
+  useCallback,
+  createContext,
+  useContext,
+  useRef,
+  useEffect,
+} from "react";
+import {
+  motion,
+  AnimatePresence,
+  easeInOut,
+  type Variants,
+} from "motion/react";
+import {
+  ChevronRight,
+  Folder,
+  FolderOpen,
+  File,
+  type LucideIcon,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const animationVariants: Variants = {
+  rootInitial: { opacity: 0, y: 20 },
+  rootAnimate: { opacity: 1, y: 0 },
+  itemInitial: { opacity: 0, x: -10 },
+  itemAnimate: { opacity: 1, x: 0 },
+  contentHidden: { opacity: 0, height: 0 },
+  contentVisible: { opacity: 1, height: "auto" },
+  chevronClosed: { rotate: 0 },
+  chevronOpen: { rotate: 90 },
+};
+
+const transitions = {
+  root: { duration: 0.4 },
+  item: { duration: 0.2 },
+  content: { duration: 0.3, ease: easeInOut },
+  chevron: { duration: 0.2 },
+};
+
+interface ExpansionContextType {
+  expandedIds: Set<string>;
+  toggleExpanded: (id: string) => void;
+}
+
+interface SelectionContextType {
+  selectedId: string | null;
+  setSelected: (id: string) => void;
+  onSelect?: (id: string, label: string) => void;
+}
+
+interface TreeContextType {
+  focusedId: string | null;
+  setFocusedId: (id: string | null) => void;
+  treeId: string;
+  setKeyboardMode: (mode: boolean) => void;
+  keyboardMode: boolean;
+}
+
+interface LevelContextType {
+  level: number;
+}
+
+const ExpansionContext = createContext<ExpansionContextType | null>(null);
+const SelectionContext = createContext<SelectionContextType | null>(null);
+const TreeContext = createContext<TreeContextType | null>(null);
+const LevelContext = createContext<LevelContextType>({ level: 0 });
+
+const useExpansion = () => {
+  const context = useContext(ExpansionContext);
+  if (!context) {
+    throw new Error(
+      "FolderTree components must be used within FolderTree.Root",
+    );
+  }
+  return context;
+};
+
+const useSelection = () => {
+  const context = useContext(SelectionContext);
+  if (!context) {
+    throw new Error(
+      "FolderTree components must be used within FolderTree.Root",
+    );
+  }
+  return context;
+};
+
+const useTree = () => {
+  const context = useContext(TreeContext);
+  if (!context) {
+    throw new Error(
+      "FolderTree components must be used within FolderTree.Root",
+    );
+  }
+  return context;
+};
+
+const useLevel = () => {
+  return useContext(LevelContext);
+};
+
+const getPaddingClass = (level: number): string => {
+  const paddingMap: Record<number, string> = {
+    0: "pl-3",
+    1: "pl-8",
+    2: "pl-12",
+    3: "pl-16",
+    4: "pl-20",
+    5: "pl-24",
+    6: "pl-28",
+    7: "pl-32",
+  };
+  return paddingMap[level] || `pl-[${Math.min(level * 4 + 12, 48)}px]`;
+};
+
+interface CustomBadge {
+  content: React.ReactNode;
+  className?: string;
+  ariaLabel?: string;
+}
+
+interface RootProps {
+  defaultExpanded?: string[];
+  defaultSelected?: string;
+  selectedId?: string | null;
+  expandedIds?: Set<string>;
+  onSelect?: (id: string, label: string) => void;
+  className?: string;
+  children: React.ReactNode;
+  id?: string;
+}
+
+interface ItemProps {
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+  badge?: string | number;
+  modified?: boolean | CustomBadge;
+  untracked?: boolean | CustomBadge;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+interface TriggerProps {
+  className?: string;
+}
+
+interface ContentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Root: React.FC<RootProps> = ({
+  defaultExpanded = [],
+  defaultSelected,
+  selectedId: controlledSelectedId,
+  expandedIds: additionalExpandedIds,
+  onSelect,
+  className = "",
+  children,
+  id = "folder-tree",
+}) => {
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(
+    new Set(defaultExpanded),
+  );
+  const [internalSelectedId, setInternalSelectedId] = useState<string | null>(
+    defaultSelected || null,
+  );
+  const selectedId =
+    controlledSelectedId !== undefined
+      ? controlledSelectedId
+      : internalSelectedId;
+  const [focusedId, setFocusedId] = useState<string | null>(null);
+  const [keyboardMode, setKeyboardMode] = useState(false);
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!additionalExpandedIds || additionalExpandedIds.size === 0) return;
+    setExpandedIds((prev) => {
+      const merged = new Set(prev);
+      let changed = false;
+      for (const id of additionalExpandedIds) {
+        if (!merged.has(id)) {
+          merged.add(id);
+          changed = true;
+        }
+      }
+      return changed ? merged : prev;
+    });
+  }, [additionalExpandedIds]);
+
+  const toggleExpanded = useCallback((id: string) => {
+    setExpandedIds((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  }, []);
+
+  const setSelected = useCallback((id: string) => {
+    setInternalSelectedId(id);
+  }, []);
+
+  const getVisibleItemIds = useCallback(() => {
+    const items = Array.from(
+      treeRef.current?.querySelectorAll('[role="treeitem"]') || [],
+    );
+    return items
+      .filter((item) => {
+        const element = item as HTMLElement;
+        return element.offsetHeight > 0 && element.offsetWidth > 0;
+      })
+      .map((item) => item.getAttribute("data-id"))
+      .filter(Boolean) as string[];
+  }, []);
+
+  const getAllItemIds = useCallback(() => {
+    const items = Array.from(
+      treeRef.current?.querySelectorAll('[role="treeitem"]') || [],
+    );
+    return items
+      .map((item) => item.getAttribute("data-id"))
+      .filter(Boolean) as string[];
+  }, []);
+
+  const [treeHasFocus, setTreeHasFocus] = useState(false);
+
+  const handleTreeFocus = useCallback(() => {
+    if (!treeHasFocus) {
+      setTreeHasFocus(true);
+      setKeyboardMode(true);
+    }
+  }, [treeHasFocus]);
+
+  const handleTreeBlur = useCallback((e: React.FocusEvent) => {
+    if (!treeRef.current?.contains(e.relatedTarget as Node)) {
+      setTreeHasFocus(false);
+      setFocusedId(null);
+      setKeyboardMode(false);
+    }
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const getVisibleItems = () => {
+        return Array.from(
+          treeRef.current?.querySelectorAll('[role="treeitem"]') || [],
+        ).filter((item) => {
+          const element = item as HTMLElement;
+          return element.offsetHeight > 0 && element.offsetWidth > 0;
+        });
+      };
+
+      if (e.key === "Tab") {
+        if (treeHasFocus && !focusedId) {
+          const visibleItemIds = getVisibleItemIds();
+          if (visibleItemIds.length > 0) {
+            setFocusedId(visibleItemIds[0]);
+            e.preventDefault();
+            return;
+          }
+        }
+
+        if (focusedId) {
+          const visibleItems = getVisibleItems();
+          const currentIndex = visibleItems.findIndex(
+            (item) => item.getAttribute("data-id") === focusedId,
+          );
+
+          if (e.shiftKey) {
+            if (currentIndex === 0) {
+              setFocusedId(null);
+              setTreeHasFocus(false);
+              setKeyboardMode(false);
+              return;
+            }
+            const nextIndex = Math.max(0, currentIndex - 1);
+            const nextItem = visibleItems[nextIndex] as HTMLElement;
+            const nextId = nextItem?.getAttribute("data-id");
+            if (nextId) {
+              setFocusedId(nextId);
+              e.preventDefault();
+            }
+          } else {
+            if (currentIndex === visibleItems.length - 1) {
+              setFocusedId(null);
+              setTreeHasFocus(false);
+              setKeyboardMode(false);
+              return;
+            }
+            const nextIndex = Math.min(
+              visibleItems.length - 1,
+              currentIndex + 1,
+            );
+            const nextItem = visibleItems[nextIndex] as HTMLElement;
+            const nextId = nextItem?.getAttribute("data-id");
+            if (nextId) {
+              setFocusedId(nextId);
+              e.preventDefault();
+            }
+          }
+        }
+        return;
+      }
+
+      if (!keyboardMode || !focusedId) return;
+
+      const visibleItems = getVisibleItems();
+      const currentIndex = visibleItems.findIndex(
+        (item) => item.getAttribute("data-id") === focusedId,
+      );
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (currentIndex < visibleItems.length - 1) {
+            const nextItem = visibleItems[currentIndex + 1] as HTMLElement;
+            const nextId = nextItem.getAttribute("data-id");
+            if (nextId) setFocusedId(nextId);
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (currentIndex > 0) {
+            const prevItem = visibleItems[currentIndex - 1] as HTMLElement;
+            const prevId = prevItem.getAttribute("data-id");
+            if (prevId) setFocusedId(prevId);
+          }
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (!expandedIds.has(focusedId)) {
+            toggleExpanded(focusedId);
+          }
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (expandedIds.has(focusedId)) {
+            toggleExpanded(focusedId);
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          setSelected(focusedId);
+          if (onSelect) {
+            const currentItem = visibleItems[currentIndex] as HTMLElement;
+            const label =
+              currentItem.querySelector("span:nth-of-type(2)")?.textContent ||
+              "";
+            onSelect(focusedId, label);
+          }
+          break;
+      }
+    },
+    [
+      focusedId,
+      keyboardMode,
+      expandedIds,
+      toggleExpanded,
+      setSelected,
+      onSelect,
+      getVisibleItemIds,
+      treeHasFocus,
+    ],
+  );
+
+  useEffect(() => {
+    const handleMouseDown = () => setKeyboardMode(false);
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, []);
+
+  const expansionValue: ExpansionContextType = {
+    expandedIds,
+    toggleExpanded,
+  };
+
+  const selectionValue: SelectionContextType = {
+    selectedId,
+    setSelected,
+    onSelect,
+  };
+
+  const treeValue: TreeContextType = {
+    focusedId,
+    setFocusedId,
+    treeId: id,
+    setKeyboardMode,
+    keyboardMode,
+  };
+
+  return (
+    <ExpansionContext.Provider value={expansionValue}>
+      <SelectionContext.Provider value={selectionValue}>
+        <TreeContext.Provider value={treeValue}>
+          <LevelContext.Provider value={{ level: 0 }}>
+            <motion.div
+              ref={treeRef}
+              variants={animationVariants}
+              initial="rootInitial"
+              animate="rootAnimate"
+              transition={transitions.root}
+              className={cn(
+                "bg-canvas border border-edge rounded-lg overflow-hidden",
+                className,
+              )}
+              role="tree"
+              aria-labelledby={`${id}-label`}
+              tabIndex={0}
+              onKeyDown={handleKeyDown}
+              onFocus={handleTreeFocus}
+              onBlur={handleTreeBlur}
+            >
+              <div className="w-full overflow-y-auto bg-canvas text-sm">
+                {children}
+              </div>
+            </motion.div>
+          </LevelContext.Provider>
+        </TreeContext.Provider>
+      </SelectionContext.Provider>
+    </ExpansionContext.Provider>
+  );
+};
+
+const ItemContext = createContext<{
+  itemId: string;
+  hasChildren: boolean;
+  isExpanded: boolean;
+  toggleExpanded: () => void;
+} | null>(null);
+
+const Item: React.FC<ItemProps> = ({
+  id,
+  label,
+  icon,
+  badge,
+  modified,
+  untracked,
+  className = "",
+  children,
+}) => {
+  const expansionContext = useExpansion();
+  const selectionContext = useSelection();
+  const treeContext = useTree();
+  const { level } = useLevel();
+  const itemRef = useRef<HTMLDivElement>(null);
+  const keyboardMode = treeContext.keyboardMode;
+
+  const hasChildren = React.Children.count(children) > 0;
+  const isExpanded = expansionContext.expandedIds.has(id);
+  const isSelected = selectionContext.selectedId === id;
+  const isFocused = treeContext.focusedId === id;
+
+  const handleItemClick = useCallback(() => {
+    treeContext.setKeyboardMode(false);
+    selectionContext.setSelected(id);
+    treeContext.setFocusedId(id);
+    if (selectionContext.onSelect) {
+      selectionContext.onSelect(id, label);
+    }
+  }, [id, label, selectionContext, treeContext]);
+
+  const toggleExpanded = useCallback(() => {
+    if (hasChildren) {
+      expansionContext.toggleExpanded(id);
+    }
+  }, [id, hasChildren, expansionContext]);
+
+  const handleFocus = useCallback(() => {
+    treeContext.setFocusedId(id);
+  }, [id, treeContext]);
+
+  useEffect(() => {
+    if (isFocused && itemRef.current) {
+      itemRef.current.focus();
+    }
+  }, [isFocused]);
+
+  const IconComponent =
+    icon || (hasChildren ? (isExpanded ? FolderOpen : Folder) : File);
+
+  const itemContextValue = {
+    itemId: id,
+    hasChildren,
+    isExpanded,
+    toggleExpanded,
+  };
+
+  const renderBadge = (
+    badgeData: boolean | CustomBadge | undefined,
+    defaultContent: string,
+    defaultClassName: string,
+  ) => {
+    if (!badgeData) return null;
+
+    if (typeof badgeData === "boolean") {
+      return (
+        <span
+          className={defaultClassName}
+          aria-label={`${defaultContent} status`}
+        >
+          {defaultContent}
+        </span>
+      );
+    }
+
+    return (
+      <span
+        className={cn(
+          "ml-auto text-xs px-2 py-0.5 rounded-full",
+          badgeData.className,
+        )}
+        aria-label={badgeData.ariaLabel || `Custom badge: ${badgeData.content}`}
+      >
+        {badgeData.content}
+      </span>
+    );
+  };
+
+  return (
+    <ItemContext.Provider value={itemContextValue}>
+      <LevelContext.Provider value={{ level: level + 1 }}>
+        <div>
+          <motion.div
+            ref={itemRef}
+            variants={animationVariants}
+            initial="itemInitial"
+            animate="itemAnimate"
+            transition={{ ...transitions.item, delay: level * 0.05 }}
+            data-selected={isSelected ? "true" : "false"}
+            data-id={id}
+            className={cn(
+              "flex items-center gap-2 py-1.5 text-sm transition-colors cursor-pointer select-none",
+              getPaddingClass(level),
+              className,
+              isSelected
+                ? "bg-accent text-accent-foreground border-r-2 border-ring"
+                : "",
+              !isSelected && "hover:bg-hover",
+              keyboardMode && isFocused
+                ? "focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-inset"
+                : "focus:outline-hidden",
+            )}
+            onClick={(e: React.MouseEvent) => {
+              handleItemClick();
+              e.stopPropagation();
+              toggleExpanded();
+            }}
+            onFocus={handleFocus}
+            role="treeitem"
+            tabIndex={isFocused ? 0 : -1}
+            aria-expanded={hasChildren ? isExpanded : undefined}
+            aria-selected={isSelected}
+            aria-label={`${hasChildren ? "Folder" : "File"}: ${label}`}
+            aria-level={level + 1}
+          >
+            {hasChildren && (
+              <motion.span
+                className="shrink-0 cursor-pointer"
+                variants={animationVariants}
+                animate={isExpanded ? "chevronOpen" : "chevronClosed"}
+                transition={transitions.chevron}
+                aria-hidden="true"
+              >
+                <ChevronRight size={14} className="text-muted-foreground" />
+              </motion.span>
+            )}
+            {!hasChildren && <span className="w-3 mr-2" aria-hidden="true" />}
+            {IconComponent && (
+              <IconComponent
+                size={16}
+                data-selected={isSelected ? "true" : "false"}
+                data-child={hasChildren ? "true" : "false"}
+                className={cn(
+                  "mr-1 shrink-0 text-muted-foreground data-[child=true]:text-primary data-[selected=true]:text-accent-foreground",
+                )}
+                aria-hidden="true"
+              />
+            )}
+            <span className="flex-1">{label}</span>
+            {badge && (
+              <span
+                className="ml-auto text-xs bg-muted text-muted-foreground px-2 py-0.5 rounded-full"
+                aria-label={`Badge: ${badge}`}
+              >
+                {badge}
+              </span>
+            )}
+            {renderBadge(
+              modified,
+              "M",
+              "ml-auto text-xs bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 px-2 py-0.5 rounded-full",
+            )}
+            {renderBadge(
+              untracked,
+              "U",
+              "ml-auto text-xs bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-2 py-0.5 rounded-full",
+            )}
+          </motion.div>
+          {children}
+        </div>
+      </LevelContext.Provider>
+    </ItemContext.Provider>
+  );
+};
+
+const Trigger: React.FC<TriggerProps> = ({ className = "" }) => {
+  const itemContext = useContext(ItemContext);
+  if (!itemContext || !itemContext.hasChildren) {
+    return null;
+  }
+
+  return (
+    <motion.span
+      className={cn("mr-2 shrink-0 cursor-pointer", className)}
+      variants={animationVariants}
+      animate={itemContext.isExpanded ? "chevronOpen" : "chevronClosed"}
+      transition={transitions.chevron}
+      onClick={(e: React.MouseEvent) => {
+        e.stopPropagation();
+        itemContext.toggleExpanded();
+      }}
+      role="button"
+      aria-label={itemContext.isExpanded ? "Collapse" : "Expand"}
+      tabIndex={-1}
+    >
+      <ChevronRight size={14} className="text-muted-foreground" />
+    </motion.span>
+  );
+};
+
+const Content: React.FC<ContentProps> = ({ children, className = "" }) => {
+  const itemContext = useContext(ItemContext);
+  if (!itemContext) {
+    return <>{children}</>;
+  }
+
+  const hasContent = React.Children.count(children) > 0;
+
+  return (
+    <AnimatePresence>
+      {hasContent && itemContext.isExpanded && (
+        <motion.div
+          variants={animationVariants}
+          initial="contentHidden"
+          animate="contentVisible"
+          exit="contentHidden"
+          transition={transitions.content}
+          style={{ overflow: "hidden" }}
+          className={className}
+          role="group"
+        >
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+const FolderTree = {
+  Root,
+  Item,
+  Trigger,
+  Content,
+};
+
+export default FolderTree;

src/ui/components/form.tsx

@@ -0,0 +1,167 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-destructive text-sm", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

src/ui/components/input.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

src/ui/components/kbd.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {}
+
+const Kbd = React.forwardRef<HTMLElement, KbdProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <kbd
+        ref={ref}
+        className={cn(
+          "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-none border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+Kbd.displayName = "Kbd";
+
+const KbdKey = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("", className)} {...props} />
+);
+KbdKey.displayName = "KbdKey";
+
+const KbdSeparator = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("text-muted-foreground/50", className)} {...props}>
+    +
+  </span>
+);
+KbdSeparator.displayName = "KbdSeparator";
+
+export { Kbd, KbdKey, KbdSeparator };

src/ui/components/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

src/ui/components/password-input.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import * as React from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { Input } from "@/components/input";
+import { cn } from "@/lib/utils";
+
+type PasswordInputProps = React.InputHTMLAttributes<HTMLInputElement>;
+
+export const PasswordInput = React.forwardRef<
+  HTMLInputElement,
+  PasswordInputProps
+>(({ className, ...props }, ref) => {
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  return (
+    <div className="relative w-full">
+      <Input
+        ref={ref}
+        type={showPassword ? "text" : "password"}
+        className={cn("h-11 text-base pr-12", className)} // extra padding-right
+        {...props}
+      />
+      <button
+        type="button"
+        onClick={() => setShowPassword((prev) => !prev)}
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition"
+        aria-label={showPassword ? "Hide password" : "Show password"}
+      >
+        {showPassword ? (
+          <EyeOff className="h-5 w-5" />
+        ) : (
+          <Eye className="h-5 w-5" />
+        )}
+      </button>
+    </div>
+  );
+});
+
+PasswordInput.displayName = "PasswordInput";

src/ui/components/popover.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

src/ui/components/scroll-area.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

src/ui/components/section-card.tsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import type React from "react";
+
+export function SectionCard({
+  title,
+  icon,
+  action,
+  children,
+}: {
+  title: string;
+  icon: React.ReactNode;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex flex-col border border-border bg-card">
+      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0">
+        <span className="text-muted-foreground">{icon}</span>
+        <span className="text-xs font-semibold uppercase tracking-widest text-muted-foreground flex-1">
+          {title}
+        </span>
+        {action && <div className="ml-auto">{action}</div>}
+      </div>
+      <div className="px-3 md:px-4 py-1">{children}</div>
+    </div>
+  );
+}
+
+export function SettingRow({
+  label,
+  badge,
+  description,
+  children,
+}: {
+  label: string;
+  badge?: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-border last:border-0">
+      <div className="flex flex-col gap-0.5">
+        <div className="flex items-center gap-1.5">
+          <span className="text-sm font-medium">{label}</span>
+          {badge && (
+            <span className="text-[10px] font-bold text-yellow-500 border border-yellow-500/40 px-1">
+              {badge}
+            </span>
+          )}
+        </div>
+        {description && (
+          <span className="text-xs text-muted-foreground">{description}</span>
+        )}
+      </div>
+      <div className="shrink-0 ml-4 md:ml-8">{children}</div>
+    </div>
+  );
+}
+
+export function FakeSwitch({
+  defaultChecked = false,
+  onChange,
+}: {
+  defaultChecked?: boolean;
+  onChange?: (v: boolean) => void;
+}) {
+  const [on, setOn] = useState(defaultChecked);
+  return (
+    <button
+      onClick={() => {
+        const next = !on;
+        setOn(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"}`}
+    >
+      <span
+        className={`pointer-events-none inline-block h-3 w-3 bg-background shadow-sm transition-transform ${on ? "translate-x-4" : "translate-x-0.5"}`}
+      />
+    </button>
+  );
+}

src/ui/components/select.tsx

@@ -0,0 +1,183 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto thin-scrollbar rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

src/ui/components/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Separator as SeparatorPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

src/ui/components/shadcn-io/status/index.tsx

@@ -0,0 +1,71 @@
+import type { ComponentProps, HTMLAttributes } from "react";
+import { Badge } from "@/components/badge";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+export type StatusProps = ComponentProps<typeof Badge> & {
+  status: "online" | "offline" | "maintenance" | "degraded";
+};
+
+export const Status = ({ className, status, ...props }: StatusProps) => (
+  <Badge
+    className={cn("flex items-center gap-2", "group", status, className)}
+    variant="secondary"
+    {...props}
+  />
+);
+
+export type StatusIndicatorProps = HTMLAttributes<HTMLSpanElement>;
+
+export const StatusIndicator = ({ ...props }: StatusIndicatorProps) => (
+  <span className="relative flex h-2 w-2" {...props}>
+    <span
+      className={cn(
+        "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
+        "group-[.online]:bg-emerald-500",
+        "group-[.offline]:bg-red-500",
+        "group-[.maintenance]:bg-blue-500",
+        "group-[.degraded]:bg-amber-500",
+      )}
+    />
+    <span
+      className={cn(
+        "relative inline-flex h-2 w-2 rounded-full",
+        "group-[.online]:bg-emerald-500",
+        "group-[.offline]:bg-red-500",
+        "group-[.maintenance]:bg-blue-500",
+        "group-[.degraded]:bg-amber-500",
+      )}
+    />
+  </span>
+);
+
+export type StatusLabelProps = HTMLAttributes<HTMLSpanElement>;
+
+export const StatusLabel = ({
+  className,
+  children,
+  ...props
+}: StatusLabelProps) => {
+  const { t } = useTranslation();
+  return (
+    <span className={cn("text-muted-foreground", className)} {...props}>
+      {children ?? (
+        <>
+          <span className="hidden group-[.online]:block">
+            {t("common.online")}
+          </span>
+          <span className="hidden group-[.offline]:block">
+            {t("common.offline")}
+          </span>
+          <span className="hidden group-[.maintenance]:block">
+            {t("common.maintenance")}
+          </span>
+          <span className="hidden group-[.degraded]:block">
+            {t("common.degraded")}
+          </span>
+        </>
+      )}
+    </span>
+  );
+};

src/ui/components/sheet.tsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/button";
+import { XIcon } from "lucide-react";
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 text-xs/relaxed duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col bg-popover bg-clip-padding text-xs/relaxed text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-3 right-3"
+              size="icon-sm"
+            >
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-sm font-medium text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-xs/relaxed text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

src/ui/components/sidebar.tsx

@@ -0,0 +1,698 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/button";
+import { Input } from "@/components/input";
+import { Separator } from "@/components/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/sheet";
+import { Skeleton } from "@/components/skeleton";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip";
+import { PanelLeftIcon } from "lucide-react";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "div";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "flex h-8 shrink-0 items-center rounded-none px-2 text-xs text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none p-2 text-left text-xs ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-xs",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-xs group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot.Root : "button";
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  });
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-none px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-none"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+  size?: "sm" | "md";
+  isActive?: boolean;
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-xs data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};

src/ui/components/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-none bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

src/ui/components/slider.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max],
+  );
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-elevated shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+}
+
+export { Slider };

src/ui/components/sonner.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useTheme } from "@/components/theme-provider";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-card group-[.toaster]:text-card-foreground group-[.toaster]:border-border group-[.toaster]:rounded-none! group-[.toaster]:shadow-lg group-[.toaster]:font-mono",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton:
+            "group-[.toast]:bg-accent-brand group-[.toast]:text-white group-[.toast]:font-semibold",
+          cancelButton:
+            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          success:
+            "group-[.toast]:!text-accent-brand group-[.toast]:!border-accent-brand/30",
+          info: "group-[.toast]:!text-accent-brand group-[.toast]:!border-accent-brand/30",
+          error:
+            "group-[.toast]:!text-destructive group-[.toast]:!border-destructive/30",
+        },
+      }}
+      style={
+        {
+          "--radius": "0px",
+          "--normal-bg": "var(--card)",
+          "--normal-border": "var(--border)",
+          "--normal-text": "var(--card-foreground)",
+          "--success-bg": "var(--card)",
+          "--success-border": "var(--border)",
+          "--success-text": "var(--color-accent-brand)",
+          "--info-bg": "var(--card)",
+          "--info-border": "var(--border)",
+          "--info-text": "var(--color-accent-brand)",
+          "--error-bg": "var(--card)",
+          "--error-border": "var(--border)",
+          "--error-text": "var(--destructive)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

src/ui/components/switch.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

src/ui/components/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto thin-scrollbar"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

src/ui/components/tabs.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] duration-200 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn(
+        "flex-1 outline-none",
+        "data-[state=active]:animate-in data-[state=inactive]:animate-out",
+        "data-[state=inactive]:fade-out-0 data-[state=active]:fade-in-0",
+        "duration-150",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/ui/components/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-transparent dark:bg-input/30 px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] duration-200 outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 disabled:pointer-events-none",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

src/ui/components/theme-provider.tsx

@@ -0,0 +1,88 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import type { ThemeId } from "@/types/ui-types";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: ThemeId;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: ThemeId;
+  setTheme: (theme: ThemeId) => void;
+  setThemePreview: (theme: ThemeId | null) => void;
+};
+
+const ALL_THEME_CLASSES = [
+  "light",
+  "dark",
+  "dracula",
+  "catppuccin",
+  "nord",
+  "solarized",
+  "tokyo-night",
+  "one-dark",
+  "gruvbox",
+];
+
+const initialState: ThemeProviderState = {
+  theme: "dark",
+  setTheme: () => null,
+  setThemePreview: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "dark",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<ThemeId>(
+    () => (localStorage.getItem(storageKey) as ThemeId) || defaultTheme,
+  );
+  const [previewTheme, setPreviewTheme] = useState<ThemeId | null>(null);
+
+  const activeTheme = previewTheme ?? theme;
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove(...ALL_THEME_CLASSES);
+
+    if (activeTheme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(activeTheme);
+  }, [activeTheme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: ThemeId) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+    setThemePreview: (preview: ThemeId | null) => {
+      setPreviewTheme(preview);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return context;
+};

src/ui/components/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

src/ui/components/version-alert.tsx

@@ -0,0 +1,124 @@
+import React from "react";
+import { Alert, AlertTitle, AlertDescription } from "@/components/alert.tsx";
+import { Button } from "@/components/button.tsx";
+import { ExternalLink, Download, AlertTriangle, Info } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+interface VersionAlertProps {
+  updateInfo: {
+    success: boolean;
+    status?: "up_to_date" | "requires_update" | "beta";
+    localVersion?: string;
+    remoteVersion?: string;
+    latest_release?: {
+      tag_name: string;
+      name: string;
+      published_at: string;
+      html_url: string;
+      body: string;
+    };
+    cached?: boolean;
+    cache_age?: number;
+    error?: string;
+  };
+  onDownload?: () => void;
+}
+
+export function VersionAlert({ updateInfo, onDownload }: VersionAlertProps) {
+  const { t } = useTranslation();
+
+  if (!updateInfo.success) {
+    return (
+      <Alert variant="destructive">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>{t("versionCheck.error")}</AlertTitle>
+        <AlertDescription>
+          {updateInfo.error || t("versionCheck.checkFailed")}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (updateInfo.status === "up_to_date") {
+    return (
+      <Alert>
+        <Download className="h-4 w-4" />
+        <AlertTitle>{t("versionCheck.upToDate")}</AlertTitle>
+        <AlertDescription>
+          {t("versionCheck.currentVersion", {
+            version: updateInfo.localVersion,
+          })}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (updateInfo.status === "beta") {
+    return (
+      <Alert>
+        <Info className="h-4 w-4" />
+        <AlertTitle>{t("versionCheck.betaVersion")}</AlertTitle>
+        <AlertDescription>
+          {t("versionCheck.betaVersionDesc", {
+            current: updateInfo.localVersion,
+            latest: updateInfo.remoteVersion,
+          })}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (updateInfo.status === "requires_update") {
+    return (
+      <Alert variant="destructive">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>{t("versionCheck.updateAvailable")}</AlertTitle>
+        <AlertDescription className="space-y-3">
+          <div>
+            {t("versionCheck.newVersionAvailable", {
+              current: updateInfo.localVersion,
+              latest: updateInfo.remoteVersion,
+            })}
+          </div>
+
+          {updateInfo.latest_release && (
+            <div className="text-sm text-muted-foreground">
+              <div className="font-medium">
+                {updateInfo.latest_release.name}
+              </div>
+              <div className="text-xs">
+                {t("versionCheck.releasedOn", {
+                  date: new Date(
+                    updateInfo.latest_release.published_at,
+                  ).toLocaleDateString(),
+                })}
+              </div>
+            </div>
+          )}
+
+          <div className="flex gap-2 pt-2">
+            {updateInfo.latest_release?.html_url && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  if (onDownload) {
+                    onDownload();
+                  } else {
+                    window.open(updateInfo.latest_release!.html_url, "_blank");
+                  }
+                }}
+                className="flex items-center gap-1"
+              >
+                <ExternalLink className="h-3 w-3" />
+                {t("versionCheck.downloadUpdate")}
+              </Button>
+            )}
+          </div>
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return null;
+}

src/ui/dashboard/Dashboard.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState } from "react";
-import { Auth } from "@/ui/desktop/authentication/Auth.tsx";
-import { AlertManager } from "@/ui/desktop/apps/dashboard/apps/alerts/AlertManager.tsx";
-import { Button } from "@/components/ui/button.tsx";
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { Auth } from "@/auth/LoginPage.tsx";
+import { AlertManager } from "@/dashboard/panels/alerts/AlertManager.tsx";
+import { Button } from "@/components/button.tsx";
 import {
   getUserInfo,
   getDatabaseHealth,
@@ -19,21 +19,21 @@ import {
   getGuacamoleTokenFromHost,
   isCurrentAuthInvalidationError,
   type RecentActivityItem,
-} from "@/ui/main-axios.ts";
-import { useSidebar } from "@/components/ui/sidebar.tsx";
-import { Separator } from "@/components/ui/separator.tsx";
-import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
-import { Kbd } from "@/components/ui/kbd";
+} from "@/main-axios.ts";
+import { useSidebar } from "@/components/sidebar.tsx";
+import { Separator } from "@/components/separator.tsx";
+import { useTabs } from "@/shell/TabContext.tsx";
+import { Kbd } from "@/components/kbd";
 import { useTranslation } from "react-i18next";
 import { Settings as SettingsIcon } from "lucide-react";
-import { ServerOverviewCard } from "@/ui/desktop/apps/dashboard/cards/ServerOverviewCard";
-import { RecentActivityCard } from "@/ui/desktop/apps/dashboard/cards/RecentActivityCard";
-import { QuickActionsCard } from "@/ui/desktop/apps/dashboard/cards/QuickActionsCard";
-import { ServerStatsCard } from "@/ui/desktop/apps/dashboard/cards/ServerStatsCard";
-import { NetworkGraphCard } from "@/ui/desktop/apps/dashboard/cards/NetworkGraphCard";
-import { useDashboardPreferences } from "@/ui/desktop/apps/dashboard/hooks/useDashboardPreferences";
-import { DashboardSettingsDialog } from "@/ui/desktop/apps/dashboard/components/DashboardSettingsDialog";
-import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader";
+import { ServerOverviewCard } from "@/dashboard/cards/ServerOverviewCard";
+import { RecentActivityCard } from "@/dashboard/cards/RecentActivityCard";
+import { QuickActionsCard } from "@/dashboard/cards/QuickActionsCard";
+import { ServerStatsCard } from "@/dashboard/cards/ServerStatsCard";
+import { NetworkGraphCard } from "@/dashboard/cards/NetworkGraphCard";
+import { useDashboardPreferences } from "@/dashboard/hooks/useDashboardPreferences";
+import { DashboardSettingsDialog } from "@/dashboard/components/DashboardSettingsDialog";
+import { SimpleLoader } from "@/lib/SimpleLoader";
 
 interface DashboardProps {
   onSelectView: (view: string) => void;
@@ -101,6 +101,34 @@ export function Dashboard({
     resetLayout,
   } = useDashboardPreferences(loggedIn);
 
+  const containerRef = useRef<HTMLDivElement>(null);
+  const mainWidthPct = layout?.mainWidthPct ?? 68;
+
+  const handleDividerMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const startPct = mainWidthPct;
+      const onMove = (ev: MouseEvent) => {
+        if (!containerRef.current) return;
+        const totalW = containerRef.current.getBoundingClientRect().width;
+        const delta = ev.clientX - startX;
+        const newPct = Math.min(
+          85,
+          Math.max(30, startPct + (delta / totalW) * 100),
+        );
+        if (layout) updateLayout({ ...layout, mainWidthPct: newPct });
+      };
+      const onUp = () => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [mainWidthPct, layout, updateLayout],
+  );
+
   let sidebarState: "expanded" | "collapsed" = "expanded";
   try {
     const sidebar = useSidebar();
@@ -683,79 +711,130 @@ export function Dashboard({
 
             <Separator className="mt-3 p-0.25" />
 
-            <div className="flex flex-col flex-1 my-5 mx-5 gap-4 min-h-0 min-w-0 overflow-auto">
-              {!preferencesLoading && layout && (
-                <div
-                  className="grid gap-4"
-                  style={{
-                    gridTemplateColumns: "repeat(auto-fit, minmax(540px, 1fr))",
-                    gridAutoRows: "minmax(300px, 1fr)",
-                    minHeight: "100%",
-                  }}
-                >
-                  {layout.cards
+            <div
+              ref={containerRef}
+              className="flex flex-row flex-1 my-5 mx-5 gap-0 min-h-0 min-w-0 overflow-hidden"
+            >
+              {!preferencesLoading &&
+                layout &&
+                (() => {
+                  const enabledCards = layout.cards
                     .filter((card) => card.enabled)
-                    .sort((a, b) => a.order - b.order)
-                    .map((card) => {
-                      if (card.id === "server_overview") {
-                        return (
-                          <ServerOverviewCard
+                    .sort((a, b) => a.order - b.order);
+
+                  const mainCards = enabledCards.filter(
+                    (c) => (c.panel ?? "main") === "main",
+                  );
+                  const sideCards = enabledCards.filter(
+                    (c) => c.panel === "side",
+                  );
+
+                  const renderCard = (card: (typeof enabledCards)[0]) => {
+                    if (card.id === "server_overview") {
+                      return (
+                        <ServerOverviewCard
+                          key={card.id}
+                          loggedIn={loggedIn}
+                          versionText={versionText}
+                          versionStatus={versionStatus}
+                          uptime={uptime}
+                          dbHealth={dbHealth}
+                          totalServers={totalServers}
+                          totalTunnels={totalTunnels}
+                          totalCredentials={totalCredentials}
+                          updateCheckDisabled={updateCheckDisabled}
+                        />
+                      );
+                    } else if (card.id === "recent_activity") {
+                      return (
+                        <RecentActivityCard
+                          key={card.id}
+                          activities={recentActivity}
+                          loading={recentActivityLoading}
+                          onReset={handleResetActivity}
+                          onActivityClick={handleActivityClick}
+                        />
+                      );
+                    } else if (card.id === "network_graph") {
+                      return (
+                        <NetworkGraphCard
+                          key={card.id}
+                          isTopbarOpen={isTopbarOpen}
+                          rightSidebarOpen={rightSidebarOpen}
+                          rightSidebarWidth={rightSidebarWidth}
+                        />
+                      );
+                    } else if (card.id === "quick_actions") {
+                      return (
+                        <QuickActionsCard
+                          key={card.id}
+                          isAdmin={isAdmin}
+                          onAddHost={handleAddHost}
+                          onAddCredential={handleAddCredential}
+                          onOpenAdminSettings={handleOpenAdminSettings}
+                          onOpenUserProfile={handleOpenUserProfile}
+                        />
+                      );
+                    } else if (card.id === "server_stats") {
+                      return (
+                        <ServerStatsCard
+                          key={card.id}
+                          serverStats={serverStats}
+                          loading={serverStatsLoading}
+                          onServerClick={handleServerStatClick}
+                        />
+                      );
+                    }
+                    return null;
+                  };
+
+                  return (
+                    <>
+                      <div
+                        className="flex flex-col gap-4 overflow-auto min-h-0"
+                        style={{ width: `${mainWidthPct}%`, minWidth: 0 }}
+                      >
+                        {mainCards.map((card) => (
+                          <div
                             key={card.id}
-                            loggedIn={loggedIn}
-                            versionText={versionText}
-                            versionStatus={versionStatus}
-                            uptime={uptime}
-                            dbHealth={dbHealth}
-                            totalServers={totalServers}
-                            totalTunnels={totalTunnels}
-                            totalCredentials={totalCredentials}
-                            updateCheckDisabled={updateCheckDisabled}
-                          />
-                        );
-                      } else if (card.id === "recent_activity") {
-                        return (
-                          <RecentActivityCard
+                            style={
+                              card.height
+                                ? { height: card.height, flexShrink: 0 }
+                                : { flex: 1, minHeight: 280 }
+                            }
+                          >
+                            {renderCard(card)}
+                          </div>
+                        ))}
+                      </div>
+
+                      <div
+                        className="flex-shrink-0 w-2 mx-1.5 flex items-center justify-center cursor-col-resize group"
+                        onMouseDown={handleDividerMouseDown}
+                      >
+                        <div className="w-0.5 h-16 rounded-full bg-border group-hover:bg-primary/50 transition-colors" />
+                      </div>
+
+                      <div
+                        className="flex flex-col gap-4 overflow-auto min-h-0"
+                        style={{ flex: 1, minWidth: 0 }}
+                      >
+                        {sideCards.map((card) => (
+                          <div
                             key={card.id}
-                            activities={recentActivity}
-                            loading={recentActivityLoading}
-                            onReset={handleResetActivity}
-                            onActivityClick={handleActivityClick}
-                          />
-                        );
-                      } else if (card.id === "network_graph") {
-                        return (
-                          <NetworkGraphCard
-                            key={card.id}
-                            isTopbarOpen={isTopbarOpen}
-                            rightSidebarOpen={rightSidebarOpen}
-                            rightSidebarWidth={rightSidebarWidth}
-                          />
-                        );
-                      } else if (card.id === "quick_actions") {
-                        return (
-                          <QuickActionsCard
-                            key={card.id}
-                            isAdmin={isAdmin}
-                            onAddHost={handleAddHost}
-                            onAddCredential={handleAddCredential}
-                            onOpenAdminSettings={handleOpenAdminSettings}
-                            onOpenUserProfile={handleOpenUserProfile}
-                          />
-                        );
-                      } else if (card.id === "server_stats") {
-                        return (
-                          <ServerStatsCard
-                            key={card.id}
-                            serverStats={serverStats}
-                            loading={serverStatsLoading}
-                            onServerClick={handleServerStatClick}
-                          />
-                        );
-                      }
-                      return null;
-                    })}
-                </div>
-              )}
+                            style={
+                              card.height
+                                ? { height: card.height, flexShrink: 0 }
+                                : { flex: 1, minHeight: 280 }
+                            }
+                          >
+                            {renderCard(card)}
+                          </div>
+                        ))}
+                      </div>
+                    </>
+                  );
+                })()}
             </div>
           </div>
         </div>

src/ui/dashboard/cards/NetworkGraphCard.tsx

@@ -15,24 +15,24 @@ import {
   type SSHHostWithStatus,
   type NetworkTopologyEdge,
   type NetworkTopologyNode,
-} from "@/ui/main-axios";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
+} from "@/main-axios";
+import { Button } from "@/components/button";
+import { Badge } from "@/components/badge";
 import {
   AlertDialog,
   AlertDialogContent,
   AlertDialogDescription,
   AlertDialogAction,
-} from "@/components/ui/alert-dialog";
+} from "@/components/alert-dialog";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+} from "@/components/dialog";
+import { Input } from "@/components/input";
+import { Label } from "@/components/label";
 import {
   Plus,
   Trash2,
@@ -58,21 +58,17 @@ import {
   ArrowDownUp,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext";
+import { useTabs } from "@/shell/TabContext";
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
-} from "@/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
+} from "@/components/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/popover";
 import { cn } from "@/lib/utils";
-import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader";
+import { SimpleLoader } from "@/lib/SimpleLoader";
 
 const AVAILABLE_COLORS = [
   { value: "#ef4444", label: "Red" },

src/ui/dashboard/cards/QuickActionsCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { FastForward, Server, Key, Settings, User } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/button";
 
 interface QuickActionsCardProps {
   isAdmin: boolean;

src/ui/dashboard/cards/RecentActivityCard.tsx

@@ -12,8 +12,8 @@ import {
   Eye,
   MessagesSquare,
 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { type RecentActivityItem } from "@/ui/main-axios";
+import { Button } from "@/components/button";
+import { type RecentActivityItem } from "@/main-axios";
 
 interface RecentActivityCardProps {
   activities: RecentActivityItem[];

src/ui/dashboard/cards/ServerOverviewCard.tsx

@@ -8,8 +8,8 @@ import {
   Key,
   ArrowDownUp,
 } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { UpdateLog } from "@/ui/desktop/apps/dashboard/apps/UpdateLog";
+import { Button } from "@/components/button";
+import { UpdateLog } from "@/dashboard/panels/UpdateLog";
 
 interface ServerOverviewCardProps {
   loggedIn: boolean;

src/ui/dashboard/cards/ServerStatsCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { ChartLine, Loader2, Server } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@/components/button";
 
 interface ServerStat {
   id: number;

src/ui/dashboard/components/DashboardSettingsDialog.tsx

@@ -6,12 +6,19 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { Checkbox } from "@/components/ui/checkbox";
+} from "@/components/dialog";
+import { Button } from "@/components/button";
+import { Label } from "@/components/label";
+import { Checkbox } from "@/components/checkbox";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/select";
 import { useTranslation } from "react-i18next";
-import type { DashboardLayout } from "@/ui/main-axios";
+import type { DashboardLayout } from "@/main-axios";
 
 interface DashboardSettingsDialogProps {
   open: boolean;
@@ -44,6 +51,15 @@ export function DashboardSettingsDialog({
     }));
   };
 
+  const handleCardPanel = (cardId: string, panel: "main" | "side") => {
+    setLayout((prev) => ({
+      ...prev,
+      cards: prev.cards.map((card) =>
+        card.id === cardId ? { ...card, panel } : card,
+      ),
+    }));
+  };
+
   const handleSave = () => {
     onSave(layout);
     onOpenChange(false);
@@ -96,6 +112,24 @@ export function DashboardSettingsDialog({
                   >
                     {cardLabels[card.id] || card.id}
                   </Label>
+                  <Select
+                    value={card.panel ?? "main"}
+                    onValueChange={(v) =>
+                      handleCardPanel(card.id, v as "main" | "side")
+                    }
+                  >
+                    <SelectTrigger className="w-24 h-7 text-xs border-edge">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="main">
+                        {t("dashboard.panelMain")}
+                      </SelectItem>
+                      <SelectItem value="side">
+                        {t("dashboard.panelSide")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
                 </div>
               ))}
             </div>

src/ui/dashboard/hooks/useDashboardPreferences.ts

@@ -3,16 +3,17 @@ import {
   getDashboardPreferences,
   saveDashboardPreferences,
   type DashboardLayout,
-} from "@/ui/main-axios";
+} from "@/main-axios";
 
 const DEFAULT_LAYOUT: DashboardLayout = {
   cards: [
-    { id: "server_overview", enabled: true, order: 1 },
-    { id: "recent_activity", enabled: true, order: 2 },
-    { id: "network_graph", enabled: false, order: 3 },
-    { id: "quick_actions", enabled: true, order: 4 },
-    { id: "server_stats", enabled: true, order: 5 },
+    { id: "server_overview", enabled: true, order: 1, panel: "main" },
+    { id: "quick_actions", enabled: true, order: 2, panel: "main" },
+    { id: "server_stats", enabled: true, order: 3, panel: "main" },
+    { id: "network_graph", enabled: false, order: 4, panel: "main" },
+    { id: "recent_activity", enabled: true, order: 1, panel: "side" },
   ],
+  mainWidthPct: 68,
 };
 
 export function useDashboardPreferences(enabled: boolean = true) {
@@ -31,7 +32,25 @@ export function useDashboardPreferences(enabled: boolean = true) {
       try {
         const preferences = await getDashboardPreferences();
         if (preferences?.cards && Array.isArray(preferences.cards)) {
-          setLayout(preferences);
+          // Migrate old layouts that don't have panel assignments
+          const needsMigration = preferences.cards.some((c) => !c.panel);
+          if (needsMigration) {
+            const defaultCardMap = new Map(
+              DEFAULT_LAYOUT.cards.map((c) => [c.id, c]),
+            );
+            const migrated: DashboardLayout = {
+              ...preferences,
+              mainWidthPct:
+                preferences.mainWidthPct ?? DEFAULT_LAYOUT.mainWidthPct,
+              cards: preferences.cards.map((c) => ({
+                ...c,
+                panel: c.panel ?? defaultCardMap.get(c.id)?.panel ?? "main",
+              })),
+            };
+            setLayout(migrated);
+          } else {
+            setLayout(preferences);
+          }
         } else {
           setLayout(DEFAULT_LAYOUT);
         }

src/ui/dashboard/panels/UpdateLog.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import { Sheet, SheetContent } from "@/components/ui/sheet.tsx";
-import { getReleasesRSS, getVersionInfo } from "@/ui/main-axios.ts";
+import { Alert, AlertDescription, AlertTitle } from "@/components/alert.tsx";
+import { Button } from "@/components/button.tsx";
+import { Sheet, SheetContent } from "@/components/sheet.tsx";
+import { getReleasesRSS, getVersionInfo } from "@/main-axios.ts";
 import { useTranslation } from "react-i18next";
 import { X } from "lucide-react";
 

src/ui/dashboard/panels/alerts/AlertCard.tsx

@@ -5,9 +5,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import { Badge } from "@/components/ui/badge.tsx";
+} from "@/components/card.tsx";
+import { Button } from "@/components/button.tsx";
+import { Badge } from "@/components/badge.tsx";
 import {
   X,
   ExternalLink,
@@ -17,7 +17,7 @@ import {
   AlertCircle,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
-import type { TermixAlert } from "../../../../../../types";
+import type { TermixAlert } from "@/types";
 
 interface AlertCardProps {
   alert: TermixAlert;

src/ui/dashboard/panels/alerts/AlertManager.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { AlertCard } from "./AlertCard.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import { getUserAlerts, dismissAlert } from "@/ui/main-axios.ts";
+import { Button } from "@/components/button.tsx";
+import { getUserAlerts, dismissAlert } from "@/main-axios.ts";
 import { useTranslation } from "react-i18next";
-import type { TermixAlert } from "../../../../../../types";
+import type { TermixAlert } from "@/types";
 import { toast } from "sonner";
 
 interface AlertManagerProps {

src/ui/desktop/DesktopApp.tsx

@@ -1,810 +0,0 @@
-import React, {
-  useCallback,
-  Component,
-  Suspense,
-  lazy,
-  type ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { LeftSidebar } from "@/ui/desktop/navigation/LeftSidebar.tsx";
-import { AppView } from "@/ui/desktop/navigation/AppView.tsx";
-import {
-  TabProvider,
-  useTabs,
-} from "@/ui/desktop/navigation/tabs/TabContext.tsx";
-import { TopNavbar } from "@/ui/desktop/navigation/TopNavbar.tsx";
-import { CommandHistoryProvider } from "@/ui/desktop/apps/features/terminal/command-history/CommandHistoryContext.tsx";
-import { ServerStatusProvider } from "@/ui/contexts/ServerStatusContext";
-import { Toaster } from "@/components/ui/sonner.tsx";
-import { toast } from "sonner";
-import {
-  getUserInfo,
-  logoutUser,
-  isCurrentAuthInvalidationError,
-} from "@/ui/main-axios.ts";
-import { useTheme } from "@/components/theme-provider";
-import { dbHealthMonitor } from "@/lib/db-health-monitor.ts";
-import { useTranslation } from "react-i18next";
-import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
-
-const Dashboard = lazy(() =>
-  import("@/ui/desktop/apps/dashboard/Dashboard.tsx").then((module) => ({
-    default: module.Dashboard,
-  })),
-);
-const HostManager = lazy(() =>
-  import("@/ui/desktop/apps/host-manager/hosts/HostManager.tsx").then(
-    (module) => ({
-      default: module.HostManager,
-    }),
-  ),
-);
-const AdminSettings = lazy(() =>
-  import("@/ui/desktop/apps/admin/AdminSettings.tsx").then((module) => ({
-    default: module.AdminSettings,
-  })),
-);
-const UserProfile = lazy(() =>
-  import("@/ui/desktop/user/UserProfile.tsx").then((module) => ({
-    default: module.UserProfile,
-  })),
-);
-const CommandPalette = lazy(() =>
-  import("@/ui/desktop/apps/command-palette/CommandPalette.tsx").then(
-    (module) => ({
-      default: module.CommandPalette,
-    }),
-  ),
-);
-
-function AppContent({
-  onAuthStateChange,
-}: {
-  onAuthStateChange?: (isAuthenticated: boolean) => void;
-}) {
-  const { t } = useTranslation();
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [username, setUsername] = useState<string | null>(null);
-  const [isAdmin, setIsAdmin] = useState(false);
-  const [authLoading, setAuthLoading] = useState(true);
-  const [isTopbarOpen, setIsTopbarOpen] = useState<boolean>(() => {
-    const saved = localStorage.getItem("topNavbarOpen");
-    return saved !== null ? JSON.parse(saved) : true;
-  });
-  const [isTransitioning, setIsTransitioning] = useState(false);
-  const [transitionPhase, setTransitionPhase] = useState<
-    "idle" | "fadeOut" | "fadeIn"
-  >("idle");
-  const { currentTab, tabs, updateTab, addTab } = useTabs();
-  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
-  const { theme, setTheme } = useTheme();
-  const [rightSidebarOpen, setRightSidebarOpen] = useState(false);
-  const [rightSidebarWidth, setRightSidebarWidth] = useState(400);
-  const isAuthenticatedRef = useRef(false);
-
-  const isDarkMode =
-    theme === "dark" ||
-    theme === "dracula" ||
-    theme === "gentlemansChoice" ||
-    theme === "midnightEspresso" ||
-    theme === "catppuccinMocha" ||
-    (theme === "system" &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches);
-  const lineColor = isDarkMode ? "#151517" : "#f9f9f9";
-
-  const lastShiftPressTime = useRef(0);
-
-  const lastAltPressTime = useRef(0);
-
-  useEffect(() => {
-    const DEGRADED_TOAST_ID = "db-connection-degraded";
-
-    const handleDatabaseConnectionDegraded = () => {
-      // Non-blocking, non-dismissible status toast that stays visible until
-      // connectivity is recovered. A Reload action lets users force-refresh
-      // the page if they want to, but the app itself remains fully usable.
-      toast.loading(
-        t("common.connectionDegraded", "Server connection lost, recovering…"),
-        {
-          id: DEGRADED_TOAST_ID,
-          duration: Infinity,
-          dismissible: false,
-          closeButton: false,
-          action: {
-            label: t("common.reload", "Reload"),
-            onClick: () => window.location.reload(),
-          },
-        },
-      );
-    };
-
-    const handleDatabaseConnectionDegradedCleared = () => {
-      toast.dismiss(DEGRADED_TOAST_ID);
-      toast.success(t("common.backendReconnected"));
-    };
-
-    const handleSessionExpired = () => {
-      setIsAuthenticated(false);
-      setIsAdmin(false);
-      setUsername(null);
-    };
-
-    dbHealthMonitor.on(
-      "database-connection-degraded",
-      handleDatabaseConnectionDegraded,
-    );
-    dbHealthMonitor.on(
-      "database-connection-degraded-cleared",
-      handleDatabaseConnectionDegradedCleared,
-    );
-    dbHealthMonitor.on("session-expired", handleSessionExpired);
-
-    return () => {
-      dbHealthMonitor.off(
-        "database-connection-degraded",
-        handleDatabaseConnectionDegraded,
-      );
-      dbHealthMonitor.off(
-        "database-connection-degraded-cleared",
-        handleDatabaseConnectionDegradedCleared,
-      );
-      dbHealthMonitor.off("session-expired", handleSessionExpired);
-      toast.dismiss(DEGRADED_TOAST_ID);
-    };
-  }, [t]);
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.code === "ShiftLeft") {
-        if (event.repeat) {
-          return;
-        }
-        const shortcutEnabled =
-          localStorage.getItem("commandPaletteShortcutEnabled") !== "false";
-        if (!shortcutEnabled) {
-          return;
-        }
-        const now = Date.now();
-        if (now - lastShiftPressTime.current < 300) {
-          setIsCommandPaletteOpen((isOpen) => !isOpen);
-          lastShiftPressTime.current = 0;
-        } else {
-          lastShiftPressTime.current = now;
-        }
-      }
-
-      if (event.code === "AltLeft" && !event.repeat) {
-        const now = Date.now();
-        if (now - lastAltPressTime.current < 300) {
-          const currentIsDark =
-            theme === "dark" ||
-            (theme === "system" &&
-              window.matchMedia("(prefers-color-scheme: dark)").matches);
-          const newTheme = currentIsDark ? "light" : "dark";
-          setTheme(newTheme);
-          lastAltPressTime.current = 0;
-        } else {
-          lastAltPressTime.current = now;
-        }
-      }
-
-      if (event.key === "Escape") {
-        setIsCommandPaletteOpen(false);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [theme, setTheme]);
-
-  useEffect(() => {
-    const path = window.location.pathname;
-    const terminalMatch = path.match(/^\/terminal\/([a-zA-Z0-9_-]+)$/);
-    const legacyMatch = path.match(/^\/hosts\/([a-zA-Z0-9_-]+)\/terminal$/);
-    const hostIdentifier = terminalMatch?.[1] || legacyMatch?.[1];
-
-    if (hostIdentifier) {
-      const openTerminal = async () => {
-        try {
-          const { getSSHHostById, getSSHHosts } =
-            await import("@/ui/main-axios.ts");
-          let host = null;
-
-          if (/^\d+$/.test(hostIdentifier)) {
-            host = await getSSHHostById(parseInt(hostIdentifier, 10));
-          } else {
-            const hosts = await getSSHHosts();
-            host =
-              hosts.find((h: { name?: string }) => h.name === hostIdentifier) ||
-              null;
-          }
-
-          if (host) {
-            addTab({
-              type: "terminal",
-              title: host.name || host.ip,
-              data: { host, initialCommand: "" },
-            });
-            window.history.replaceState({}, "", "/");
-          } else {
-            toast.error(`Host "${hostIdentifier}" not found`);
-          }
-        } catch (error) {
-          console.error("Failed to open terminal:", error);
-          toast.error("Failed to open terminal for host");
-        }
-      };
-      openTerminal();
-    }
-  }, [addTab]);
-
-  const isCheckingAuth = useRef(false);
-  const clientTunnelAutoStartStarted = useRef(false);
-
-  const startClientTunnelAutoStart = useCallback(() => {
-    if (
-      clientTunnelAutoStartStarted.current ||
-      !window.electronAPI?.isElectron
-    ) {
-      return;
-    }
-
-    clientTunnelAutoStartStarted.current = true;
-    window.electronAPI.startC2SAutoStartTunnels?.().catch((error) => {
-      clientTunnelAutoStartStarted.current = false;
-      console.error("Failed to start client tunnel auto-start entries:", error);
-    });
-  }, []);
-
-  useEffect(() => {
-    const checkAuth = () => {
-      if (isCheckingAuth.current) return;
-      isCheckingAuth.current = true;
-      setAuthLoading(true);
-      getUserInfo()
-        .then((meRes) => {
-          if (typeof meRes === "string" || !meRes.username) {
-            setIsAuthenticated(false);
-            setIsAdmin(false);
-            setUsername(null);
-          } else {
-            setIsAuthenticated(true);
-            setIsAdmin(!!meRes.is_admin);
-            setUsername(meRes.username || null);
-            startClientTunnelAutoStart();
-          }
-        })
-        .catch((err) => {
-          if (isCurrentAuthInvalidationError(err)) {
-            setIsAuthenticated(false);
-            setIsAdmin(false);
-            setUsername(null);
-            console.warn("Session expired - please log in again");
-            return;
-          }
-
-          if (!isAuthenticatedRef.current) {
-            setIsAuthenticated(false);
-            setIsAdmin(false);
-            setUsername(null);
-          }
-        })
-        .finally(() => {
-          setAuthLoading(false);
-          isCheckingAuth.current = false;
-        });
-    };
-
-    checkAuth();
-
-    const handleStorageChange = () => checkAuth();
-    window.addEventListener("storage", handleStorageChange);
-
-    return () => window.removeEventListener("storage", handleStorageChange);
-  }, [startClientTunnelAutoStart]);
-
-  useEffect(() => {
-    localStorage.setItem("topNavbarOpen", JSON.stringify(isTopbarOpen));
-  }, [isTopbarOpen]);
-
-  useEffect(() => {
-    onAuthStateChange?.(isAuthenticated);
-    isAuthenticatedRef.current = isAuthenticated;
-  }, [isAuthenticated, onAuthStateChange]);
-
-  const handleAuthSuccess = useCallback(
-    (authData: {
-      isAdmin: boolean;
-      username: string | null;
-      userId: string | null;
-    }) => {
-      setIsTransitioning(true);
-      setTransitionPhase("fadeOut");
-
-      setTimeout(() => {
-        setIsAuthenticated(true);
-        setIsAdmin(authData.isAdmin);
-        setUsername(authData.username);
-        startClientTunnelAutoStart();
-        setTransitionPhase("fadeIn");
-
-        setTimeout(() => {
-          setIsTransitioning(false);
-          setTransitionPhase("idle");
-        }, 800);
-      }, 1200);
-    },
-    [startClientTunnelAutoStart],
-  );
-
-  const handleLogout = useCallback(async () => {
-    setIsTransitioning(true);
-    setTransitionPhase("fadeOut");
-
-    setTimeout(async () => {
-      try {
-        await logoutUser();
-      } catch (error) {
-        console.error("Logout failed:", error);
-      }
-
-      window.location.reload();
-    }, 1200);
-  }, []);
-
-  const currentTabData = tabs.find((tab) => tab.id === currentTab);
-  const showTerminalView =
-    currentTabData?.type === "terminal" ||
-    currentTabData?.type === "server_stats" ||
-    currentTabData?.type === "file_manager" ||
-    currentTabData?.type === "rdp" ||
-    currentTabData?.type === "vnc" ||
-    currentTabData?.type === "telnet" ||
-    currentTabData?.type === "tunnel" ||
-    currentTabData?.type === "docker" ||
-    currentTabData?.type === "network_graph";
-  const showHome = currentTabData?.type === "home";
-  const showSshManager = currentTabData?.type === "ssh_manager";
-  const showAdmin = currentTabData?.type === "admin";
-  const showProfile = currentTabData?.type === "user_profile";
-
-  if (authLoading) {
-    return (
-      <div
-        className="fixed inset-0 flex items-center justify-center"
-        style={{
-          background: "var(--bg-elevated)",
-          backgroundImage: `repeating-linear-gradient(
-            45deg,
-            transparent,
-            transparent 35px,
-            ${lineColor} 35px,
-            ${lineColor} 37px
-          )`,
-        }}
-      >
-        <div className="w-[420px] max-w-full p-8 flex flex-col backdrop-blur-sm bg-card/50 rounded-2xl shadow-xl border-2 border-edge overflow-y-auto thin-scrollbar my-2 animate-in fade-in zoom-in-95 duration-300">
-          <div className="flex items-center justify-center h-32">
-            <div className="text-center">
-              <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-              <p className="text-muted-foreground">
-                {t("common.checkingAuthentication")}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-screen w-screen overflow-hidden bg-background">
-      <Suspense fallback={null}>
-        <CommandPalette
-          isOpen={isCommandPaletteOpen}
-          setIsOpen={setIsCommandPaletteOpen}
-        />
-      </Suspense>
-      {!isAuthenticated && (
-        <div className="fixed inset-0 flex items-center justify-center z-[10000] bg-background">
-          <Suspense fallback={null}>
-            <Dashboard
-              isAuthenticated={isAuthenticated}
-              authLoading={authLoading}
-              onAuthSuccess={handleAuthSuccess}
-              isTopbarOpen={isTopbarOpen}
-            />
-          </Suspense>
-        </div>
-      )}
-
-      {isAuthenticated && (
-        <LeftSidebar
-          disabled={!isAuthenticated || authLoading}
-          isAdmin={isAdmin}
-          username={username}
-          onLogout={handleLogout}
-        >
-          <div
-            className="h-screen w-full visible pointer-events-auto static overflow-hidden"
-            style={{ display: showTerminalView ? "block" : "none" }}
-          >
-            <AppView
-              isTopbarOpen={isTopbarOpen}
-              rightSidebarOpen={rightSidebarOpen}
-              rightSidebarWidth={rightSidebarWidth}
-            />
-          </div>
-
-          {showHome && (
-            <div className="h-screen w-full visible pointer-events-auto static overflow-hidden">
-              <Suspense
-                fallback={
-                  <div
-                    className="bg-canvas rounded-lg border-2 border-edge relative"
-                    style={{
-                      margin: "74px 17px 8px 8px",
-                      height: "calc(100vh - 82px)",
-                    }}
-                  >
-                    <SimpleLoader
-                      visible={true}
-                      message={t("common.loading")}
-                    />
-                  </div>
-                }
-              >
-                <Dashboard
-                  isAuthenticated={isAuthenticated}
-                  authLoading={authLoading}
-                  onAuthSuccess={handleAuthSuccess}
-                  isTopbarOpen={isTopbarOpen}
-                  rightSidebarOpen={rightSidebarOpen}
-                  rightSidebarWidth={rightSidebarWidth}
-                />
-              </Suspense>
-            </div>
-          )}
-
-          {showSshManager && (
-            <div className="h-screen w-full visible pointer-events-auto static overflow-hidden">
-              <Suspense
-                fallback={
-                  <div
-                    className="bg-canvas rounded-lg border-2 border-edge relative"
-                    style={{
-                      margin: "74px 17px 8px 8px",
-                      height: "calc(100vh - 82px)",
-                    }}
-                  >
-                    <SimpleLoader
-                      visible={true}
-                      message={t("common.loading")}
-                    />
-                  </div>
-                }
-              >
-                <HostManager
-                  isTopbarOpen={isTopbarOpen}
-                  initialTab={currentTabData?.initialTab}
-                  hostConfig={currentTabData?.hostConfig}
-                  _updateTimestamp={currentTabData?._updateTimestamp}
-                  rightSidebarOpen={rightSidebarOpen}
-                  rightSidebarWidth={rightSidebarWidth}
-                  currentTabId={currentTab}
-                  updateTab={updateTab}
-                />
-              </Suspense>
-            </div>
-          )}
-
-          {showAdmin && (
-            <div className="h-screen w-full visible pointer-events-auto static overflow-hidden">
-              <Suspense
-                fallback={
-                  <div
-                    className="bg-canvas rounded-lg border-2 border-edge relative"
-                    style={{
-                      margin: "74px 17px 8px 8px",
-                      height: "calc(100vh - 82px)",
-                    }}
-                  >
-                    <SimpleLoader
-                      visible={true}
-                      message={t("common.loading")}
-                    />
-                  </div>
-                }
-              >
-                <AdminSettings
-                  isTopbarOpen={isTopbarOpen}
-                  rightSidebarOpen={rightSidebarOpen}
-                  rightSidebarWidth={rightSidebarWidth}
-                />
-              </Suspense>
-            </div>
-          )}
-
-          {showProfile && (
-            <div className="h-screen w-full visible pointer-events-auto static overflow-auto thin-scrollbar">
-              <Suspense
-                fallback={
-                  <div
-                    className="bg-canvas rounded-lg border-2 border-edge relative"
-                    style={{
-                      margin: "74px 17px 8px 8px",
-                      height: "calc(100vh - 82px)",
-                    }}
-                  >
-                    <SimpleLoader
-                      visible={true}
-                      message={t("common.loading")}
-                    />
-                  </div>
-                }
-              >
-                <UserProfile
-                  isTopbarOpen={isTopbarOpen}
-                  rightSidebarOpen={rightSidebarOpen}
-                  rightSidebarWidth={rightSidebarWidth}
-                  initialTab={currentTabData?.initialTab}
-                />
-              </Suspense>
-            </div>
-          )}
-
-          <TopNavbar
-            isTopbarOpen={isTopbarOpen}
-            setIsTopbarOpen={setIsTopbarOpen}
-            onRightSidebarStateChange={(isOpen, width) => {
-              setRightSidebarOpen(isOpen);
-              setRightSidebarWidth(width);
-            }}
-          />
-        </LeftSidebar>
-      )}
-
-      {isTransitioning && (
-        <div
-          className={`fixed inset-0 z-[20000] transition-opacity duration-700 ${
-            transitionPhase === "fadeOut" ? "opacity-100" : "opacity-0"
-          }`}
-          style={{
-            background: "var(--bg-elevated)",
-            backgroundImage: `repeating-linear-gradient(
-              45deg,
-              transparent,
-              transparent 35px,
-              ${lineColor} 35px,
-              ${lineColor} 37px
-            )`,
-          }}
-        >
-          {transitionPhase === "fadeOut" && (
-            <>
-              <div className="absolute inset-0 flex items-center justify-center overflow-hidden">
-                <div
-                  className="absolute w-0 h-0 bg-primary/10 rounded-full"
-                  style={{
-                    animation:
-                      "ripple 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards",
-                    animationDelay: "0ms",
-                    willChange: "width, height, opacity",
-                    transform: "translateZ(0)",
-                  }}
-                />
-                <div
-                  className="absolute w-0 h-0 bg-primary/7 rounded-full"
-                  style={{
-                    animation:
-                      "ripple 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards",
-                    animationDelay: "200ms",
-                    willChange: "width, height, opacity",
-                    transform: "translateZ(0)",
-                  }}
-                />
-                <div
-                  className="absolute w-0 h-0 bg-primary/5 rounded-full"
-                  style={{
-                    animation:
-                      "ripple 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards",
-                    animationDelay: "400ms",
-                    willChange: "width, height, opacity",
-                    transform: "translateZ(0)",
-                  }}
-                />
-                <div
-                  className="absolute w-0 h-0 bg-primary/3 rounded-full"
-                  style={{
-                    animation:
-                      "ripple 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards",
-                    animationDelay: "600ms",
-                    willChange: "width, height, opacity",
-                    transform: "translateZ(0)",
-                  }}
-                />
-                <div
-                  className="relative z-10 text-center"
-                  style={{
-                    animation:
-                      "logoFade 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards",
-                    willChange: "opacity, transform",
-                  }}
-                >
-                  <div
-                    className="text-7xl font-bold tracking-wider"
-                    style={{
-                      fontFamily:
-                        "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-                      animation:
-                        "logoGlow 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards",
-                      willChange: "color, text-shadow",
-                    }}
-                  >
-                    TERMIX
-                  </div>
-                  <div
-                    className="text-sm text-muted-foreground mt-3 tracking-widest"
-                    style={{
-                      animation:
-                        "subtitleFade 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards",
-                      willChange: "opacity, transform",
-                    }}
-                  >
-                    SSH SERVER MANAGER
-                  </div>
-                </div>
-              </div>
-              <style>{`
-                @keyframes ripple {
-                  0% {
-                    width: 0;
-                    height: 0;
-                    opacity: 1;
-                  }
-                  30% {
-                    opacity: 0.6;
-                  }
-                  70% {
-                    opacity: 0.3;
-                  }
-                  100% {
-                    width: 200vmax;
-                    height: 200vmax;
-                    opacity: 0;
-                  }
-                }
-                @keyframes logoFade {
-                  0% {
-                    opacity: 0;
-                    transform: scale(0.85) translateZ(0);
-                  }
-                  25% {
-                    opacity: 1;
-                    transform: scale(1) translateZ(0);
-                  }
-                  75% {
-                    opacity: 1;
-                    transform: scale(1) translateZ(0);
-                  }
-                  100% {
-                    opacity: 0;
-                    transform: scale(1.05) translateZ(0);
-                  }
-                }
-                @keyframes logoGlow {
-                  0% {
-                    color: hsl(var(--primary));
-                    text-shadow: none;
-                  }
-                  25% {
-                    color: hsl(var(--primary));
-                    text-shadow:
-                      0 0 20px hsla(var(--primary), 0.3),
-                      0 0 40px hsla(var(--primary), 0.2),
-                      0 0 60px hsla(var(--primary), 0.1);
-                  }
-                  75% {
-                    color: hsl(var(--primary));
-                    text-shadow:
-                      0 0 20px hsla(var(--primary), 0.3),
-                      0 0 40px hsla(var(--primary), 0.2),
-                      0 0 60px hsla(var(--primary), 0.1);
-                  }
-                  100% {
-                    color: hsl(var(--primary));
-                    text-shadow: none;
-                  }
-                }
-                @keyframes subtitleFade {
-                  0%, 30% {
-                    opacity: 0;
-                    transform: translateY(10px) translateZ(0);
-                  }
-                  50% {
-                    opacity: 1;
-                    transform: translateY(0) translateZ(0);
-                  }
-                  75% {
-                    opacity: 1;
-                    transform: translateY(0) translateZ(0);
-                  }
-                  100% {
-                    opacity: 0;
-                    transform: translateY(-5px) translateZ(0);
-                  }
-                }
-              `}</style>
-            </>
-          )}
-        </div>
-      )}
-
-      <Toaster
-        position="bottom-right"
-        richColors={false}
-        closeButton
-        duration={5000}
-        offset={20}
-      />
-    </div>
-  );
-}
-
-class TabErrorBoundary extends Component<
-  { children: ReactNode },
-  { hasError: boolean; errorCount: number }
-> {
-  constructor(props: { children: ReactNode }) {
-    super(props);
-    this.state = { hasError: false, errorCount: 0 };
-  }
-
-  static getDerivedStateFromError(error: Error) {
-    if (error.message?.includes("useTabs must be used within a TabProvider")) {
-      return { hasError: true };
-    }
-    throw error;
-  }
-
-  componentDidCatch(error: Error, _errorInfo: ErrorInfo) {
-    if (error.message?.includes("useTabs must be used within a TabProvider")) {
-      console.warn(
-        "TabProvider mounting race condition detected, recovering...",
-      );
-      this.setState((prev) => ({ errorCount: prev.errorCount + 1 }));
-      setTimeout(() => {
-        this.setState({ hasError: false });
-      }, 0);
-    }
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return null;
-    }
-    return this.props.children;
-  }
-}
-
-function DesktopApp() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-
-  return (
-    <TabProvider>
-      <TabErrorBoundary>
-        <ServerStatusProvider isAuthenticated={isAuthenticated}>
-          <CommandHistoryProvider>
-            <AppContent onAuthStateChange={setIsAuthenticated} />
-          </CommandHistoryProvider>
-        </ServerStatusProvider>
-      </TabErrorBoundary>
-    </TabProvider>
-  );
-}
-
-export default DesktopApp;

src/ui/desktop/apps/command-palette/CommandPalette.tsx

@@ -1,700 +0,0 @@
-import {
-  Command,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandGroup,
-  CommandSeparator,
-} from "@/components/ui/command.tsx";
-import React, { useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils";
-import { Kbd, KbdKey, KbdSeparator } from "@/components/ui/kbd";
-import {
-  Key,
-  Server,
-  Settings,
-  User,
-  Terminal,
-  Monitor,
-  Eye,
-  MessagesSquare,
-  FolderOpen,
-  Pencil,
-  EllipsisVertical,
-  ArrowDownUp,
-  Container,
-} from "lucide-react";
-import { useTranslation } from "react-i18next";
-import { BiMoney, BiSupport } from "react-icons/bi";
-import { BsDiscord } from "react-icons/bs";
-import { FaGithub } from "react-icons/fa";
-import { GrUpdate } from "react-icons/gr";
-import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
-import {
-  getRecentActivity,
-  getSSHHosts,
-  getGuacamoleDpi,
-  getGuacamoleTokenFromHost,
-  logActivity,
-} from "@/ui/main-axios.ts";
-import type { RecentActivityItem } from "@/ui/main-axios.ts";
-import { DEFAULT_STATS_CONFIG } from "@/types/stats-widgets";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-} from "@/components/ui/dropdown-menu";
-import { Button } from "@/components/ui/button.tsx";
-import { ButtonGroup } from "@/components/ui/button-group.tsx";
-
-interface SSHHost {
-  id: number;
-  name: string;
-  ip: string;
-  port: number;
-  username: string;
-  folder: string;
-  tags: string[];
-  pin: boolean;
-  authType: string;
-  password?: string;
-  key?: string;
-  keyPassword?: string;
-  keyType?: string;
-  enableTerminal: boolean;
-  enableTunnel: boolean;
-  enableFileManager: boolean;
-  enableDocker: boolean;
-  defaultPath: string;
-  tunnelConnections: unknown[];
-  statsConfig?: string;
-  createdAt: string;
-  updatedAt: string;
-  connectionType?: "ssh" | "rdp" | "vnc" | "telnet";
-  domain?: string;
-  security?: string;
-  ignoreCert?: boolean;
-  guacamoleConfig?: unknown;
-  showTerminalInSidebar?: boolean;
-  showFileManagerInSidebar?: boolean;
-  showTunnelInSidebar?: boolean;
-  showDockerInSidebar?: boolean;
-  showServerStatsInSidebar?: boolean;
-}
-
-function shouldShowMetrics(host: SSHHost): boolean {
-  try {
-    const statsConfig = host.statsConfig
-      ? JSON.parse(host.statsConfig)
-      : DEFAULT_STATS_CONFIG;
-    return statsConfig.metricsEnabled !== false;
-  } catch {
-    return true;
-  }
-}
-
-function hasTunnelConnections(host: SSHHost): boolean {
-  try {
-    const tunnelConnections = Array.isArray(host.tunnelConnections)
-      ? host.tunnelConnections
-      : JSON.parse(host.tunnelConnections as string);
-    return Array.isArray(tunnelConnections) && tunnelConnections.length > 0;
-  } catch {
-    return false;
-  }
-}
-
-export function CommandPalette({
-  isOpen,
-  setIsOpen,
-}: {
-  isOpen: boolean;
-  setIsOpen: (isOpen: boolean) => void;
-}) {
-  const { t } = useTranslation();
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { addTab, setCurrentTab, tabs: tabList, updateTab } = useTabs();
-  const [recentActivity, setRecentActivity] = useState<RecentActivityItem[]>(
-    [],
-  );
-  const [hosts, setHosts] = useState<SSHHost[]>([]);
-
-  useEffect(() => {
-    if (isOpen) {
-      inputRef.current?.focus();
-      getRecentActivity(50).then((activity) => {
-        setRecentActivity(activity.slice(0, 5));
-      });
-      getSSHHosts().then((allHosts) => {
-        setHosts(allHosts);
-      });
-    }
-  }, [isOpen]);
-
-  const handleAddHost = () => {
-    const sshManagerTab = tabList.find((t) => t.type === "ssh_manager");
-    if (sshManagerTab) {
-      updateTab(sshManagerTab.id, {
-        initialTab: "add_host",
-        hostConfig: undefined,
-      });
-      setCurrentTab(sshManagerTab.id);
-    } else {
-      const id = addTab({
-        type: "ssh_manager",
-        title: t("commandPalette.hostManager"),
-        initialTab: "add_host",
-      });
-      setCurrentTab(id);
-    }
-    setIsOpen(false);
-  };
-
-  const handleAddCredential = () => {
-    const sshManagerTab = tabList.find((t) => t.type === "ssh_manager");
-    if (sshManagerTab) {
-      updateTab(sshManagerTab.id, {
-        initialTab: "add_credential",
-        hostConfig: undefined,
-      });
-      setCurrentTab(sshManagerTab.id);
-    } else {
-      const id = addTab({
-        type: "ssh_manager",
-        title: t("commandPalette.hostManager"),
-        initialTab: "add_credential",
-      });
-      setCurrentTab(id);
-    }
-    setIsOpen(false);
-  };
-
-  const handleOpenAdminSettings = () => {
-    const adminTab = tabList.find((t) => t.type === "admin");
-    if (adminTab) {
-      setCurrentTab(adminTab.id);
-    } else {
-      const id = addTab({
-        type: "admin",
-        title: t("commandPalette.adminSettings"),
-      });
-      setCurrentTab(id);
-    }
-    setIsOpen(false);
-  };
-
-  const handleOpenUserProfile = () => {
-    const userProfileTab = tabList.find((t) => t.type === "user_profile");
-    if (userProfileTab) {
-      setCurrentTab(userProfileTab.id);
-    } else {
-      const id = addTab({
-        type: "user_profile",
-        title: t("commandPalette.userProfile"),
-      });
-      setCurrentTab(id);
-    }
-    setIsOpen(false);
-  };
-
-  const handleOpenUpdateLog = () => {
-    window.open("https://github.com/Termix-SSH/Termix/releases", "_blank");
-    setIsOpen(false);
-  };
-
-  const handleGitHub = () => {
-    window.open("https://github.com/Termix-SSH/Termix", "_blank");
-    setIsOpen(false);
-  };
-
-  const handleSupport = () => {
-    window.open("https://github.com/Termix-SSH/Support/issues/new", "_blank");
-    setIsOpen(false);
-  };
-
-  const handleDiscord = () => {
-    window.open("https://discord.com/invite/jVQGdvHDrf", "_blank");
-    setIsOpen(false);
-  };
-
-  const handleDonate = () => {
-    window.open("https://github.com/sponsors/LukeGus", "_blank");
-    setIsOpen(false);
-  };
-
-  const handleActivityClick = (item: RecentActivityItem) => {
-    getSSHHosts().then((hosts) => {
-      const host = hosts.find((h: { id: number }) => h.id === item.hostId);
-      if (!host) return;
-
-      if (item.type === "terminal") {
-        addTab({
-          type: "terminal",
-          title: item.hostName,
-          hostConfig: host,
-        });
-      } else if (item.type === "file_manager") {
-        addTab({
-          type: "file_manager",
-          title: item.hostName,
-          hostConfig: host,
-        });
-      }
-    });
-    setIsOpen(false);
-  };
-
-  const handleHostTerminalClick = async (host: SSHHost) => {
-    const title = host.name?.trim()
-      ? host.name
-      : `${host.username}@${host.ip}:${host.port}`;
-
-    if (
-      host.connectionType === "rdp" ||
-      host.connectionType === "vnc" ||
-      host.connectionType === "telnet"
-    ) {
-      try {
-        const protocol = host.connectionType as "rdp" | "vnc" | "telnet";
-        const result = await getGuacamoleTokenFromHost(host.id);
-
-        addTab({
-          type: protocol,
-          title,
-          hostConfig: host,
-          connectionConfig: {
-            token: result.token,
-            protocol,
-            type: protocol,
-            hostname: host.ip,
-            port: host.port,
-            username: host.username,
-            password: host.password,
-            domain: host.domain,
-            security: host.security,
-            "ignore-cert": host.ignoreCert,
-            dpi: getGuacamoleDpi(host),
-          },
-        });
-
-        try {
-          await logActivity(protocol, host.id, title);
-        } catch (err) {
-          console.warn(`Failed to log ${protocol} activity:`, err);
-        }
-      } catch (err) {
-        console.error("Failed to get Guacamole token:", err);
-      }
-      setIsOpen(false);
-      return;
-    }
-
-    addTab({ type: "terminal", title, hostConfig: host });
-    setIsOpen(false);
-  };
-
-  const handleHostFileManagerClick = (host: SSHHost) => {
-    const title = host.name?.trim()
-      ? host.name
-      : `${host.username}@${host.ip}:${host.port}`;
-    addTab({ type: "file_manager", title, hostConfig: host });
-    setIsOpen(false);
-  };
-
-  const handleHostServerDetailsClick = (host: SSHHost) => {
-    const title = host.name?.trim()
-      ? host.name
-      : `${host.username}@${host.ip}:${host.port}`;
-    addTab({ type: "server_stats", title, hostConfig: host });
-    setIsOpen(false);
-  };
-
-  const handleHostTunnelClick = (host: SSHHost) => {
-    const title = host.name?.trim()
-      ? host.name
-      : `${host.username}@${host.ip}:${host.port}`;
-    addTab({ type: "tunnel", title, hostConfig: host });
-    setIsOpen(false);
-  };
-
-  const handleHostDockerClick = (host: SSHHost) => {
-    const title = host.name?.trim()
-      ? host.name
-      : `${host.username}@${host.ip}:${host.port}`;
-    addTab({ type: "docker", title, hostConfig: host });
-    setIsOpen(false);
-  };
-
-  const handleHostEditClick = (host: SSHHost) => {
-    addTab({
-      type: "ssh_manager",
-      title: t("commandPalette.hostManager"),
-      hostConfig: host,
-      initialTab: "add_host",
-    });
-    setIsOpen(false);
-  };
-
-  return (
-    <div
-      className={cn(
-        "fixed inset-0 z-50 flex items-center justify-center bg-black/30 transition-opacity duration-200",
-        !isOpen && "opacity-0 pointer-events-none",
-      )}
-      onClick={() => setIsOpen(false)}
-    >
-      <Command
-        className={cn(
-          "w-3/4 max-w-2xl max-h-[60vh] rounded-lg border-2 border-edge shadow-md flex flex-col bg-elevated",
-          "transition-all duration-200 ease-out",
-          !isOpen && "scale-95 opacity-0",
-        )}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <CommandInput
-          ref={inputRef}
-          placeholder={t("commandPalette.searchPlaceholder")}
-        />
-        <CommandList
-          key={recentActivity.length}
-          className="w-full h-auto flex-grow overflow-y-auto thin-scrollbar"
-          style={{ maxHeight: "inherit" }}
-        >
-          {recentActivity.length > 0 && (
-            <>
-              <CommandGroup heading={t("commandPalette.recentActivity")}>
-                {recentActivity.map((item, index) => (
-                  <CommandItem
-                    key={`recent-activity-${index}-${item.type}-${item.hostId}-${item.timestamp}`}
-                    value={`recent-activity-${index}-${item.hostName}-${item.type}`}
-                    onSelect={() => handleActivityClick(item)}
-                  >
-                    {item.type === "terminal" ? <Terminal /> : <FolderOpen />}
-                    <span>{item.hostName}</span>
-                  </CommandItem>
-                ))}
-              </CommandGroup>
-              <CommandSeparator />
-            </>
-          )}
-          <CommandGroup heading={t("commandPalette.navigation")}>
-            <CommandItem onSelect={handleAddHost}>
-              <Server />
-              <span>{t("commandPalette.addHost")}</span>
-            </CommandItem>
-            <CommandItem onSelect={handleAddCredential}>
-              <Key />
-              <span>{t("commandPalette.addCredential")}</span>
-            </CommandItem>
-            <CommandItem onSelect={handleOpenAdminSettings}>
-              <Settings />
-              <span>{t("commandPalette.adminSettings")}</span>
-            </CommandItem>
-            <CommandItem onSelect={handleOpenUserProfile}>
-              <User />
-              <span>{t("commandPalette.userProfile")}</span>
-            </CommandItem>
-            <CommandItem onSelect={handleOpenUpdateLog}>
-              <GrUpdate />
-              <span>{t("commandPalette.updateLog")}</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          {hosts.length > 0 && (
-            <>
-              <CommandGroup heading={t("commandPalette.hosts")}>
-                {hosts.map((host, index) => {
-                  const title = host.name?.trim()
-                    ? host.name
-                    : `${host.username}@${host.ip}:${host.port}`;
-
-                  const isSSH =
-                    !host.connectionType || host.connectionType === "ssh";
-                  const showMetrics = shouldShowMetrics(host);
-                  const hasTunnels = hasTunnelConnections(host);
-
-                  const visibleButtons = [
-                    host.enableTerminal && (host.showTerminalInSidebar ?? true),
-                    isSSH &&
-                      host.enableFileManager &&
-                      (host.showFileManagerInSidebar ?? false),
-                    isSSH &&
-                      host.enableTunnel &&
-                      hasTunnels &&
-                      (host.showTunnelInSidebar ?? false),
-                    isSSH &&
-                      host.enableDocker &&
-                      (host.showDockerInSidebar ?? false),
-                    isSSH &&
-                      showMetrics &&
-                      (host.showServerStatsInSidebar ?? false),
-                  ].filter(Boolean).length;
-
-                  return (
-                    <CommandItem
-                      key={`host-${index}-${host.id}`}
-                      value={`host-${index}-${title}-${host.id}`}
-                      onSelect={() => {
-                        if (host.enableTerminal) {
-                          handleHostTerminalClick(host);
-                        }
-                      }}
-                      className="flex items-center justify-between"
-                    >
-                      <div className="flex items-center gap-2 flex-1 min-w-0">
-                        <Server className="h-4 w-4 flex-shrink-0" />
-                        <span className="truncate">{title}</span>
-                      </div>
-                      <ButtonGroup
-                        className="flex-shrink-0"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        {host.enableTerminal &&
-                          (host.showTerminalInSidebar ?? true) && (
-                            <Button
-                              variant="outline"
-                              className="!px-2 h-7 border-1 border-edge"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleHostTerminalClick(host);
-                              }}
-                            >
-                              {host.connectionType === "rdp" ? (
-                                <Monitor className="h-3 w-3" />
-                              ) : host.connectionType === "vnc" ? (
-                                <Eye className="h-3 w-3" />
-                              ) : host.connectionType === "telnet" ? (
-                                <MessagesSquare className="h-3 w-3" />
-                              ) : (
-                                <Terminal className="h-3 w-3" />
-                              )}
-                            </Button>
-                          )}
-
-                        {isSSH &&
-                          host.enableFileManager &&
-                          (host.showFileManagerInSidebar ?? false) && (
-                            <Button
-                              variant="outline"
-                              className="!px-2 h-7 border-1 border-edge"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleHostFileManagerClick(host);
-                              }}
-                            >
-                              <FolderOpen className="h-3 w-3" />
-                            </Button>
-                          )}
-
-                        {isSSH &&
-                          host.enableTunnel &&
-                          hasTunnels &&
-                          (host.showTunnelInSidebar ?? false) && (
-                            <Button
-                              variant="outline"
-                              className="!px-2 h-7 border-1 border-edge"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleHostTunnelClick(host);
-                              }}
-                            >
-                              <ArrowDownUp className="h-3 w-3" />
-                            </Button>
-                          )}
-
-                        {isSSH &&
-                          host.enableDocker &&
-                          (host.showDockerInSidebar ?? false) && (
-                            <Button
-                              variant="outline"
-                              className="!px-2 h-7 border-1 border-edge"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleHostDockerClick(host);
-                              }}
-                            >
-                              <Container className="h-3 w-3" />
-                            </Button>
-                          )}
-
-                        {isSSH &&
-                          showMetrics &&
-                          (host.showServerStatsInSidebar ?? false) && (
-                            <Button
-                              variant="outline"
-                              className="!px-2 h-7 border-1 border-edge"
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleHostServerDetailsClick(host);
-                              }}
-                            >
-                              <Server className="h-3 w-3" />
-                            </Button>
-                          )}
-
-                        <DropdownMenu modal={false}>
-                          <DropdownMenuTrigger asChild>
-                            <Button
-                              variant="outline"
-                              className={cn(
-                                "!px-2 h-7 border-1 border-edge",
-                                visibleButtons > 0 &&
-                                  "rounded-l-none border-l-0",
-                              )}
-                              onClick={(e) => e.stopPropagation()}
-                            >
-                              <EllipsisVertical className="h-3 w-3" />
-                            </Button>
-                          </DropdownMenuTrigger>
-                          <DropdownMenuContent
-                            align="end"
-                            side="right"
-                            className="w-56 bg-canvas border-edge text-foreground"
-                          >
-                            {host.enableTerminal &&
-                              !(host.showTerminalInSidebar ?? true) && (
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleHostTerminalClick(host);
-                                  }}
-                                  className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
-                                >
-                                  {host.connectionType === "rdp" ? (
-                                    <Monitor className="h-4 w-4" />
-                                  ) : host.connectionType === "vnc" ? (
-                                    <Eye className="h-4 w-4" />
-                                  ) : host.connectionType === "telnet" ? (
-                                    <MessagesSquare className="h-4 w-4" />
-                                  ) : (
-                                    <Terminal className="h-4 w-4" />
-                                  )}
-                                  <span className="flex-1">
-                                    {t("hosts.openTerminal")}
-                                  </span>
-                                </DropdownMenuItem>
-                              )}
-                            {isSSH &&
-                              showMetrics &&
-                              !(host.showServerStatsInSidebar ?? false) && (
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleHostServerDetailsClick(host);
-                                  }}
-                                  className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
-                                >
-                                  <Server className="h-4 w-4" />
-                                  <span className="flex-1">
-                                    {t("hosts.openServerStats")}
-                                  </span>
-                                </DropdownMenuItem>
-                              )}
-                            {isSSH &&
-                              host.enableFileManager &&
-                              !(host.showFileManagerInSidebar ?? false) && (
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleHostFileManagerClick(host);
-                                  }}
-                                  className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
-                                >
-                                  <FolderOpen className="h-4 w-4" />
-                                  <span className="flex-1">
-                                    {t("hosts.openFileManager")}
-                                  </span>
-                                </DropdownMenuItem>
-                              )}
-                            {isSSH &&
-                              host.enableTunnel &&
-                              hasTunnels &&
-                              !(host.showTunnelInSidebar ?? false) && (
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleHostTunnelClick(host);
-                                  }}
-                                  className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
-                                >
-                                  <ArrowDownUp className="h-4 w-4" />
-                                  <span className="flex-1">
-                                    {t("hosts.openTunnels")}
-                                  </span>
-                                </DropdownMenuItem>
-                              )}
-                            {isSSH &&
-                              host.enableDocker &&
-                              !(host.showDockerInSidebar ?? false) && (
-                                <DropdownMenuItem
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleHostDockerClick(host);
-                                  }}
-                                  className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
-                                >
-                                  <Container className="h-4 w-4" />
-                                  <span className="flex-1">
-                                    {t("hosts.openDocker")}
-                                  </span>
-                                </DropdownMenuItem>
-                              )}
-                            <DropdownMenuItem
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                handleHostEditClick(host);
-                              }}
-                              className="flex items-center gap-2 cursor-pointer px-3 py-2 hover:bg-hover text-foreground-secondary"
-                            >
-                              <Pencil className="h-4 w-4" />
-                              <span className="flex-1">{t("common.edit")}</span>
-                            </DropdownMenuItem>
-                          </DropdownMenuContent>
-                        </DropdownMenu>
-                      </ButtonGroup>
-                    </CommandItem>
-                  );
-                })}
-              </CommandGroup>
-              <CommandSeparator />
-            </>
-          )}
-          <CommandGroup heading={t("commandPalette.links")}>
-            <CommandItem onSelect={handleGitHub}>
-              <FaGithub />
-              <span>{t("commandPalette.github")}</span>
-            </CommandItem>
-            <CommandItem onSelect={handleSupport}>
-              <BiSupport />
-              <span>{t("commandPalette.support")}</span>
-            </CommandItem>
-            <CommandItem onSelect={handleDiscord}>
-              <BsDiscord />
-              <span>{t("commandPalette.discord")}</span>
-            </CommandItem>
-            <CommandItem onSelect={handleDonate}>
-              <BiMoney />
-              <span>{t("commandPalette.donate")}</span>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-        <div className="border-t border-edge px-4 py-2 bg-hover/50 flex items-center justify-between text-xs text-muted-foreground">
-          <div className="flex items-center gap-2">
-            <span>{t("commandPalette.press")}</span>
-            <Kbd>
-              <KbdKey>Shift</KbdKey>
-              <KbdSeparator />
-              <KbdKey>Shift</KbdKey>
-            </Kbd>
-            <span>{t("commandPalette.toToggle")}</span>
-          </div>
-          <div className="flex items-center gap-2">
-            <span>{t("commandPalette.close")}</span>
-            <Kbd>Esc</Kbd>
-          </div>
-        </div>
-      </Command>
-    </div>
-  );
-}

src/ui/desktop/apps/features/docker/components/ContainerCard.tsx

@@ -1,432 +0,0 @@
-import React from "react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import { Badge } from "@/components/ui/badge.tsx";
-import {
-  Play,
-  Square,
-  RotateCw,
-  Pause,
-  Trash2,
-  PlayCircle,
-} from "lucide-react";
-import { toast } from "sonner";
-import { useTranslation } from "react-i18next";
-import type { DockerContainer } from "@/types";
-import {
-  startDockerContainer,
-  stopDockerContainer,
-  restartDockerContainer,
-  pauseDockerContainer,
-  unpauseDockerContainer,
-  removeDockerContainer,
-} from "@/ui/main-axios.ts";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip.tsx";
-import { useConfirmation } from "@/hooks/use-confirmation.ts";
-
-interface ContainerCardProps {
-  container: DockerContainer;
-  sessionId: string;
-  onSelect?: () => void;
-  isSelected?: boolean;
-  onRefresh?: () => void;
-}
-
-export function ContainerCard({
-  container,
-  sessionId,
-  onSelect,
-  isSelected = false,
-  onRefresh,
-}: ContainerCardProps): React.ReactElement {
-  const { t } = useTranslation();
-  const { confirmWithToast } = useConfirmation();
-  const [isStarting, setIsStarting] = React.useState(false);
-  const [isStopping, setIsStopping] = React.useState(false);
-  const [isRestarting, setIsRestarting] = React.useState(false);
-  const [isPausing, setIsPausing] = React.useState(false);
-  const [isRemoving, setIsRemoving] = React.useState(false);
-
-  const statusColors = {
-    running: {
-      bg: "bg-green-500/10",
-      border: "border-green-500/20",
-      text: "text-green-400",
-      badge: "bg-green-500/20 text-green-300 border-green-500/30",
-    },
-    exited: {
-      bg: "bg-red-500/10",
-      border: "border-red-500/20",
-      text: "text-red-400",
-      badge: "bg-red-500/20 text-red-300 border-red-500/30",
-    },
-    paused: {
-      bg: "bg-yellow-500/10",
-      border: "border-yellow-500/20",
-      text: "text-yellow-400",
-      badge: "bg-yellow-500/20 text-yellow-300 border-yellow-500/30",
-    },
-    created: {
-      bg: "bg-blue-500/10",
-      border: "border-blue-500/20",
-      text: "text-blue-400",
-      badge: "bg-blue-500/20 text-blue-300 border-blue-500/30",
-    },
-    restarting: {
-      bg: "bg-orange-500/10",
-      border: "border-orange-500/20",
-      text: "text-orange-400",
-      badge: "bg-orange-500/20 text-orange-300 border-orange-500/30",
-    },
-    removing: {
-      bg: "bg-purple-500/10",
-      border: "border-purple-500/20",
-      text: "text-purple-400",
-      badge: "bg-purple-500/20 text-purple-300 border-purple-500/30",
-    },
-    dead: {
-      bg: "bg-muted/10",
-      border: "border-muted/20",
-      text: "text-muted-foreground",
-      badge: "bg-muted/20 text-muted-foreground border-muted/30",
-    },
-  };
-
-  const colors = statusColors[container.state] || statusColors.created;
-
-  const handleStart = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsStarting(true);
-    try {
-      await startDockerContainer(sessionId, container.id);
-      toast.success(t("docker.containerStarted", { name: container.name }));
-      onRefresh?.();
-    } catch (error) {
-      toast.error(
-        t("docker.failedToStartContainer", {
-          error: error instanceof Error ? error.message : "Unknown error",
-        }),
-      );
-    } finally {
-      setIsStarting(false);
-    }
-  };
-
-  const handleStop = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsStopping(true);
-    try {
-      await stopDockerContainer(sessionId, container.id);
-      toast.success(t("docker.containerStopped", { name: container.name }));
-      onRefresh?.();
-    } catch (error) {
-      toast.error(
-        t("docker.failedToStopContainer", {
-          error: error instanceof Error ? error.message : "Unknown error",
-        }),
-      );
-    } finally {
-      setIsStopping(false);
-    }
-  };
-
-  const handleRestart = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsRestarting(true);
-    try {
-      await restartDockerContainer(sessionId, container.id);
-      toast.success(t("docker.containerRestarted", { name: container.name }));
-      onRefresh?.();
-    } catch (error) {
-      toast.error(
-        t("docker.failedToRestartContainer", {
-          error: error instanceof Error ? error.message : "Unknown error",
-        }),
-      );
-    } finally {
-      setIsRestarting(false);
-    }
-  };
-
-  const handlePause = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setIsPausing(true);
-    try {
-      if (container.state === "paused") {
-        await unpauseDockerContainer(sessionId, container.id);
-        toast.success(t("docker.containerUnpaused", { name: container.name }));
-      } else {
-        await pauseDockerContainer(sessionId, container.id);
-        toast.success(t("docker.containerPaused", { name: container.name }));
-      }
-      onRefresh?.();
-    } catch (error) {
-      toast.error(
-        t("docker.failedToTogglePauseContainer", {
-          action: container.state === "paused" ? "unpause" : "pause",
-          error: error instanceof Error ? error.message : "Unknown error",
-        }),
-      );
-    } finally {
-      setIsPausing(false);
-    }
-  };
-
-  const handleRemove = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    const containerName = container.name.startsWith("/")
-      ? container.name.slice(1)
-      : container.name;
-
-    let confirmMessage = t("docker.confirmRemoveContainer", {
-      name: containerName,
-    });
-
-    if (container.state === "running") {
-      confirmMessage += " " + t("docker.runningContainerWarning");
-    }
-
-    confirmWithToast(
-      confirmMessage,
-      async () => {
-        setIsRemoving(true);
-        try {
-          const force = container.state === "running";
-          await removeDockerContainer(sessionId, container.id, force);
-          toast.success(t("docker.containerRemoved", { name: containerName }));
-          onRefresh?.();
-        } catch (error) {
-          toast.error(
-            t("docker.failedToRemoveContainer", {
-              error: error instanceof Error ? error.message : "Unknown error",
-            }),
-          );
-        } finally {
-          setIsRemoving(false);
-        }
-      },
-      t("common.remove"),
-      t("common.cancel"),
-    );
-  };
-
-  const isLoading =
-    isStarting || isStopping || isRestarting || isPausing || isRemoving;
-
-  const formatCreatedDate = (dateStr: string): string => {
-    try {
-      const cleanDate = dateStr.replace(/\s*\+\d{4}\s*UTC\s*$/, "").trim();
-      return cleanDate;
-    } catch {
-      return dateStr;
-    }
-  };
-
-  const parsePorts = (portsStr: string | undefined): string[] => {
-    if (!portsStr || portsStr.trim() === "") return [];
-
-    return portsStr
-      .split(",")
-      .map((p) => p.trim())
-      .filter((p) => p.length > 0);
-  };
-
-  const portsList = parsePorts(container.ports);
-
-  return (
-    <>
-      <Card
-        className={`cursor-pointer transition-all hover:shadow-lg overflow-hidden min-w-0 ${
-          isSelected
-            ? "ring-2 ring-primary border-primary"
-            : `border-2 ${colors.border}`
-        } ${colors.bg} pt-3 pb-0`}
-        onClick={onSelect}
-      >
-        <CardHeader className="pb-2 px-4">
-          <div className="flex items-start justify-between gap-2">
-            <CardTitle className="text-base font-semibold truncate flex-1 min-w-0">
-              {container.name.startsWith("/")
-                ? container.name.slice(1)
-                : container.name}
-            </CardTitle>
-            <Badge className={`${colors.badge} border shrink-0`}>
-              {container.state}
-            </Badge>
-          </div>
-        </CardHeader>
-        <CardContent className="space-y-3 px-4 pb-3">
-          <div className="space-y-2 text-sm">
-            <div className="flex items-center gap-2 min-w-0">
-              <span className="text-muted-foreground min-w-[50px] text-xs">
-                {t("docker.image")}
-              </span>
-              <span className="flex-1 min-w-0 truncate text-foreground text-xs">
-                {container.image}
-              </span>
-            </div>
-            <div className="flex items-center gap-2 min-w-0">
-              <span className="text-muted-foreground min-w-[50px] text-xs">
-                {t("docker.idLabel")}
-              </span>
-              <span className="flex-1 min-w-0 truncate font-mono text-xs text-foreground">
-                {container.id.substring(0, 12)}
-              </span>
-            </div>
-            <div className="flex items-start gap-2 min-w-0">
-              <span className="text-muted-foreground min-w-[50px] text-xs shrink-0">
-                {t("docker.ports")}
-              </span>
-              <div className="flex flex-1 min-w-0 flex-wrap gap-1">
-                {portsList.length > 0 ? (
-                  portsList.map((port, idx) => (
-                    <Badge
-                      key={idx}
-                      variant="outline"
-                      className="text-xs font-mono bg-muted/10 text-muted-foreground border-muted/30"
-                    >
-                      {port}
-                    </Badge>
-                  ))
-                ) : (
-                  <Badge
-                    variant="outline"
-                    className="text-xs bg-muted/10 text-muted-foreground border-muted/30"
-                  >
-                    {t("docker.noPorts")}
-                  </Badge>
-                )}
-              </div>
-            </div>
-            <div className="flex items-center gap-2 min-w-0">
-              <span className="text-muted-foreground min-w-[50px] text-xs">
-                {t("docker.created")}
-              </span>
-              <span className="flex-1 min-w-0 truncate text-foreground text-xs">
-                {formatCreatedDate(container.created)}
-              </span>
-            </div>
-          </div>
-
-          <div className="flex flex-wrap gap-2 pt-2 border-t border-edge-panel">
-            <TooltipProvider>
-              {container.state !== "running" && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="h-8"
-                      onClick={handleStart}
-                      disabled={isLoading}
-                    >
-                      {isStarting ? (
-                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
-                      ) : (
-                        <Play className="h-4 w-4" />
-                      )}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>{t("docker.start")}</TooltipContent>
-                </Tooltip>
-              )}
-
-              {container.state === "running" && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="h-8"
-                      onClick={handleStop}
-                      disabled={isLoading}
-                    >
-                      {isStopping ? (
-                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
-                      ) : (
-                        <Square className="h-4 w-4" />
-                      )}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>{t("docker.stop")}</TooltipContent>
-                </Tooltip>
-              )}
-
-              {(container.state === "running" ||
-                container.state === "paused") && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="h-8"
-                      onClick={handlePause}
-                      disabled={isLoading}
-                    >
-                      {isPausing ? (
-                        <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
-                      ) : container.state === "paused" ? (
-                        <PlayCircle className="h-4 w-4" />
-                      ) : (
-                        <Pause className="h-4 w-4" />
-                      )}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {container.state === "paused"
-                      ? t("docker.unpause")
-                      : t("docker.pause")}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    className="h-8"
-                    onClick={handleRestart}
-                    disabled={isLoading || container.state === "exited"}
-                  >
-                    {isRestarting ? (
-                      <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
-                    ) : (
-                      <RotateCw className="h-4 w-4" />
-                    )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>{t("docker.restart")}</TooltipContent>{" "}
-              </Tooltip>
-
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    size="sm"
-                    variant="outline"
-                    className="h-8 text-red-400 hover:text-red-300 hover:bg-red-500/20"
-                    onClick={handleRemove}
-                    disabled={isLoading}
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>{t("docker.remove")}</TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
-        </CardContent>
-      </Card>
-    </>
-  );
-}

src/ui/desktop/apps/features/docker/components/ContainerDetail.tsx

@@ -1,123 +0,0 @@
-import React from "react";
-import { Button } from "@/components/ui/button.tsx";
-import { Separator } from "@/components/ui/separator.tsx";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs.tsx";
-import { ArrowLeft } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { DockerContainer, SSHHost } from "@/types";
-import { LogViewer } from "./LogViewer.tsx";
-import { ContainerStats } from "./ContainerStats.tsx";
-import { ConsoleTerminal } from "./ConsoleTerminal.tsx";
-
-interface ContainerDetailProps {
-  sessionId: string;
-  containerId: string;
-  containers: DockerContainer[];
-  hostConfig: SSHHost;
-  onBack: () => void;
-}
-
-export function ContainerDetail({
-  sessionId,
-  containerId,
-  containers,
-  hostConfig,
-  onBack,
-}: ContainerDetailProps): React.ReactElement {
-  const { t } = useTranslation();
-  const [activeTab, setActiveTab] = React.useState("logs");
-
-  const container = containers.find((c) => c.id === containerId);
-
-  if (!container) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-center space-y-2">
-          <p className="text-muted-foreground text-lg">
-            {t("docker.containerNotFound")}
-          </p>
-          <Button onClick={onBack} variant="outline">
-            <ArrowLeft className="h-4 w-4 mr-2" />
-            {t("docker.backToList")}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex items-center gap-4 px-4 pt-3 pb-3">
-        <Button variant="ghost" onClick={onBack} size="sm">
-          <ArrowLeft className="h-4 w-4 mr-2" />
-          {t("common.back")}
-        </Button>
-        <div className="min-w-0 flex-1">
-          <h2 className="font-bold text-lg truncate">{container.name}</h2>
-          <p className="text-sm text-muted-foreground truncate">
-            {container.image}
-          </p>
-        </div>
-      </div>
-      <Separator className="p-0.25 w-full" />
-
-      <div className="flex-1 overflow-hidden min-h-0">
-        <Tabs
-          value={activeTab}
-          onValueChange={setActiveTab}
-          className="h-full flex flex-col"
-        >
-          <div className="px-4 pt-2">
-            <TabsList className="grid w-full grid-cols-3">
-              <TabsTrigger value="logs">{t("docker.logs")}</TabsTrigger>
-              <TabsTrigger value="stats">{t("docker.stats")}</TabsTrigger>
-              <TabsTrigger value="console">
-                {t("docker.consoleTab")}
-              </TabsTrigger>
-            </TabsList>
-          </div>
-
-          <TabsContent
-            value="logs"
-            className="flex-1 overflow-auto thin-scrollbar px-3 pb-3 mt-3"
-          >
-            <LogViewer
-              sessionId={sessionId}
-              containerId={containerId}
-              containerName={container.name}
-            />
-          </TabsContent>
-
-          <TabsContent
-            value="stats"
-            className="flex-1 overflow-auto thin-scrollbar px-3 pb-3 mt-3"
-          >
-            <ContainerStats
-              sessionId={sessionId}
-              containerId={containerId}
-              containerName={container.name}
-              containerState={container.state}
-            />
-          </TabsContent>
-
-          <TabsContent
-            value="console"
-            className="flex-1 overflow-hidden px-3 pb-3 mt-3"
-          >
-            <ConsoleTerminal
-              containerId={containerId}
-              containerName={container.name}
-              containerState={container.state}
-              hostConfig={hostConfig}
-            />
-          </TabsContent>
-        </Tabs>
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/features/docker/components/ContainerList.tsx

@@ -1,137 +0,0 @@
-import React from "react";
-import { Input } from "@/components/ui/input.tsx";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select.tsx";
-import { Search, Filter } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { DockerContainer } from "@/types";
-import { ContainerCard } from "./ContainerCard.tsx";
-
-interface ContainerListProps {
-  containers: DockerContainer[];
-  sessionId: string;
-  onSelectContainer: (containerId: string) => void;
-  selectedContainerId?: string | null;
-  onRefresh?: () => void;
-}
-
-export function ContainerList({
-  containers,
-  sessionId,
-  onSelectContainer,
-  selectedContainerId = null,
-  onRefresh,
-}: ContainerListProps): React.ReactElement {
-  const { t } = useTranslation();
-  const [searchQuery, setSearchQuery] = React.useState("");
-  const [statusFilter, setStatusFilter] = React.useState<string>("all");
-
-  const filteredContainers = React.useMemo(() => {
-    return containers.filter((container) => {
-      const matchesSearch =
-        container.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        container.image.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        container.id.toLowerCase().includes(searchQuery.toLowerCase());
-
-      const matchesStatus =
-        statusFilter === "all" || container.state === statusFilter;
-
-      return matchesSearch && matchesStatus;
-    });
-  }, [containers, searchQuery, statusFilter]);
-
-  const statusCounts = React.useMemo(() => {
-    const counts: Record<string, number> = {};
-    containers.forEach((c) => {
-      counts[c.state] = (counts[c.state] || 0) + 1;
-    });
-    return counts;
-  }, [containers]);
-
-  if (containers.length === 0) {
-    return (
-      <div className="flex items-center justify-center h-full min-h-0">
-        <div className="text-center space-y-2">
-          <p className="text-muted-foreground text-lg">
-            {t("docker.noContainersFound")}
-          </p>
-          <p className="text-muted-foreground text-sm">
-            {t("docker.noContainersFoundHint")}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col h-full min-h-0">
-      <div className="flex flex-col sm:flex-row gap-2">
-        <div className="relative flex-1">
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder={t("docker.searchPlaceholder")}
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10"
-          />
-        </div>
-        <div className="flex items-center gap-2 sm:min-w-[200px]">
-          <Filter className="h-4 w-4 text-muted-foreground" />
-          <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="w-full">
-              <SelectValue
-                placeholder={t("docker.filterByStatusPlaceholder")}
-              />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">
-                {t("docker.allContainersCount", { count: containers.length })}
-              </SelectItem>
-              {Object.entries(statusCounts).map(([status, count]) => (
-                <SelectItem key={status} value={status}>
-                  {t("docker.statusCount", {
-                    status: status.charAt(0).toUpperCase() + status.slice(1),
-                    count,
-                  })}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-
-      {filteredContainers.length === 0 ? (
-        <div className="flex items-center justify-center flex-1 min-h-0">
-          <div className="text-center space-y-2">
-            <p className="text-muted-foreground">
-              {t("docker.noContainersMatchFilters")}
-            </p>
-            <p className="text-muted-foreground text-sm">
-              {t("docker.noContainersMatchFiltersHint")}
-            </p>
-          </div>
-        </div>
-      ) : (
-        <div className="min-h-0 flex-1 overflow-auto thin-scrollbar h-fade pr-1 pb-2 pt-4">
-          <div className="grid grid-cols-[repeat(auto-fit,minmax(320px,1fr))] gap-3 auto-rows-min content-start w-full pb-2">
-            {filteredContainers.map((container) => (
-              <ContainerCard
-                key={container.id}
-                container={container}
-                sessionId={sessionId}
-                onSelect={() => onSelectContainer(container.id)}
-                isSelected={selectedContainerId === container.id}
-                onRefresh={onRefresh}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

src/ui/desktop/apps/features/docker/components/ContainerStats.tsx

@@ -1,256 +0,0 @@
-import React from "react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card.tsx";
-import { Progress } from "@/components/ui/progress.tsx";
-import { Cpu, MemoryStick, Network, HardDrive, Activity } from "lucide-react";
-import type { DockerStats } from "@/types";
-import { getContainerStats } from "@/ui/main-axios.ts";
-import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
-import { useTranslation } from "react-i18next";
-
-interface ContainerStatsProps {
-  sessionId: string;
-  containerId: string;
-  containerName: string;
-  containerState: string;
-}
-
-export function ContainerStats({
-  sessionId,
-  containerId,
-  containerName,
-  containerState,
-}: ContainerStatsProps): React.ReactElement {
-  const { t } = useTranslation();
-  const [stats, setStats] = React.useState<DockerStats | null>(null);
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [error, setError] = React.useState<string | null>(null);
-
-  const fetchStats = React.useCallback(async () => {
-    if (containerState !== "running") {
-      setError(t("docker.containerMustBeRunningToViewStats"));
-      return;
-    }
-
-    setIsLoading(true);
-    setError(null);
-    try {
-      const data = await getContainerStats(sessionId, containerId);
-      setStats(data);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err.message : t("docker.failedToFetchStats"),
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [sessionId, containerId, containerState]);
-
-  React.useEffect(() => {
-    fetchStats();
-
-    const interval = setInterval(fetchStats, 2000);
-
-    return () => clearInterval(interval);
-  }, [fetchStats]);
-
-  if (containerState !== "running") {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-center space-y-2">
-          <Activity className="h-12 w-12 text-muted-foreground/50 mx-auto" />
-          <p className="text-muted-foreground text-lg">
-            {t("docker.containerNotRunning")}
-          </p>
-          <p className="text-muted-foreground text-sm">
-            {t("docker.startContainerToViewStats")}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  if (isLoading && !stats) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-center">
-          <SimpleLoader size="lg" />
-          <p className="text-muted-foreground mt-4">
-            {t("docker.loadingStats")}
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-center space-y-2">
-          <p className="text-red-400 text-lg">
-            {t("docker.errorLoadingStats")}
-          </p>
-          <p className="text-muted-foreground text-sm">{error}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!stats) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <p className="text-muted-foreground">{t("docker.noStatsAvailable")}</p>
-      </div>
-    );
-  }
-
-  const cpuPercent = parseFloat(stats.cpu) || 0;
-  const memPercent = parseFloat(stats.memoryPercent) || 0;
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 h-full overflow-auto thin-scrollbar">
-      <Card className="py-3">
-        <CardHeader className="pb-2 px-4">
-          <CardTitle className="text-base flex items-center gap-2">
-            <Cpu className="h-5 w-5 text-blue-400" />
-            {t("docker.cpuUsage")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="px-4 pb-3">
-          <div className="space-y-2">
-            <div className="flex justify-between items-center text-sm">
-              <span className="text-muted-foreground">
-                {t("docker.current")}
-              </span>{" "}
-              <span className="font-mono font-semibold text-blue-400">
-                {stats.cpu}
-              </span>
-            </div>
-            <Progress value={Math.min(cpuPercent, 100)} className="h-2" />
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="py-3">
-        <CardHeader className="pb-2 px-4">
-          <CardTitle className="text-base flex items-center gap-2">
-            <MemoryStick className="h-5 w-5 text-purple-400" />
-            {t("docker.memoryUsage")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="px-4 pb-3">
-          <div className="space-y-2">
-            <div className="flex justify-between items-center text-sm">
-              <span className="text-muted-foreground">
-                {t("docker.usedLimit")}
-              </span>
-              <span className="font-mono font-semibold text-purple-400">
-                {stats.memoryUsed} / {stats.memoryLimit}
-              </span>
-            </div>
-            <div className="flex justify-between items-center text-sm">
-              <span className="text-muted-foreground">
-                {t("docker.percentage")}
-              </span>
-              <span className="font-mono text-purple-400">
-                {stats.memoryPercent}
-              </span>
-            </div>
-            <Progress value={Math.min(memPercent, 100)} className="h-2" />
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="py-3">
-        <CardHeader className="pb-2 px-4">
-          <CardTitle className="text-base flex items-center gap-2">
-            <Network className="h-5 w-5 text-green-400" />
-            {t("docker.networkIo")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="px-4 pb-3">
-          <div className="space-y-2">
-            <div className="flex justify-between items-center text-sm">
-              <span className="text-muted-foreground">{t("docker.input")}</span>
-              <span className="font-mono text-green-400">{stats.netInput}</span>
-            </div>
-            <div className="flex justify-between items-center text-sm">
-              <span className="text-muted-foreground">
-                {t("docker.output")}
-              </span>
-              <span className="font-mono text-green-400">
-                {stats.netOutput}
-              </span>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="py-3">
-        <CardHeader className="pb-2 px-4">
-          <CardTitle className="text-base flex items-center gap-2">
-            <HardDrive className="h-5 w-5 text-orange-400" />
-            {t("docker.blockIo")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="px-4 pb-3">
-          <div className="space-y-2">
-            <div className="flex justify-between items-center text-sm">
-              <span className="text-muted-foreground">{t("docker.read")}</span>
-              <span className="font-mono text-orange-400">
-                {stats.blockRead}
-              </span>
-            </div>
-            <div className="flex justify-between items-center text-sm">
-              <span className="text-muted-foreground">{t("docker.write")}</span>
-              <span className="font-mono text-orange-400">
-                {stats.blockWrite}
-              </span>
-            </div>
-            {stats.pids && (
-              <div className="flex justify-between items-center text-sm">
-                <span className="text-muted-foreground">
-                  {t("docker.pids")}
-                </span>
-                <span className="font-mono text-orange-400">{stats.pids}</span>
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="md:col-span-2 py-3">
-        <CardHeader className="pb-2 px-4">
-          <CardTitle className="text-base flex items-center gap-2">
-            <Activity className="h-5 w-5 text-cyan-400" />
-            {t("docker.containerInformation")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent className="px-4 pb-3">
-          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">{t("docker.name")}</span>
-              <span className="font-mono text-foreground">{containerName}</span>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">{t("docker.id")}</span>
-              <span className="font-mono text-sm text-foreground">
-                {containerId.substring(0, 12)}
-              </span>
-            </div>
-            <div className="flex justify-between items-center">
-              <span className="text-muted-foreground">{t("docker.state")}</span>
-              <span className="font-semibold text-green-400 capitalize">
-                {containerState}
-              </span>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

src/ui/desktop/apps/features/docker/components/LogViewer.tsx

@@ -1,239 +0,0 @@
-import React from "react";
-import { Button } from "@/components/ui/button.tsx";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select.tsx";
-import { Card, CardContent } from "@/components/ui/card.tsx";
-import { Switch } from "@/components/ui/switch.tsx";
-import { Label } from "@/components/ui/label.tsx";
-import { Download, RefreshCw, Filter } from "lucide-react";
-import { toast } from "sonner";
-import type { DockerLogOptions } from "@/types";
-import { getContainerLogs, downloadContainerLogs } from "@/ui/main-axios.ts";
-import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
-
-interface LogViewerProps {
-  sessionId: string;
-  containerId: string;
-  containerName: string;
-}
-
-export function LogViewer({
-  sessionId,
-  containerId,
-  containerName,
-}: LogViewerProps): React.ReactElement {
-  const [logs, setLogs] = React.useState<string>("");
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isDownloading, setIsDownloading] = React.useState(false);
-  const [tailLines, setTailLines] = React.useState<string>("100");
-  const [showTimestamps, setShowTimestamps] = React.useState(false);
-  const [autoRefresh, setAutoRefresh] = React.useState(false);
-  const [searchFilter, setSearchFilter] = React.useState("");
-  const logsEndRef = React.useRef<HTMLDivElement>(null);
-
-  const fetchLogs = React.useCallback(async () => {
-    setIsLoading(true);
-    try {
-      const options: DockerLogOptions = {
-        tail: tailLines === "all" ? undefined : parseInt(tailLines, 10),
-        timestamps: showTimestamps,
-      };
-
-      const data = await getContainerLogs(sessionId, containerId, options);
-      setLogs(data.logs);
-    } catch (error) {
-      toast.error(
-        `Failed to fetch logs: ${error instanceof Error ? error.message : "Unknown error"}`,
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [sessionId, containerId, tailLines, showTimestamps]);
-
-  React.useEffect(() => {
-    fetchLogs();
-  }, [fetchLogs]);
-
-  React.useEffect(() => {
-    if (!autoRefresh) return;
-
-    const interval = setInterval(() => {
-      fetchLogs();
-    }, 3000);
-
-    return () => clearInterval(interval);
-  }, [autoRefresh, fetchLogs]);
-
-  React.useEffect(() => {
-    if (autoRefresh && logsEndRef.current) {
-      logsEndRef.current.scrollIntoView({ behavior: "smooth" });
-    }
-  }, [logs, autoRefresh]);
-
-  const handleDownload = async () => {
-    setIsDownloading(true);
-    try {
-      const options: DockerLogOptions = {
-        timestamps: showTimestamps,
-      };
-
-      const blob = await downloadContainerLogs(sessionId, containerId, options);
-      const url = window.URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${containerName.replace(/[^a-z0-9]/gi, "_")}_logs.txt`;
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
-
-      toast.success("Logs downloaded successfully");
-    } catch (error) {
-      toast.error(
-        `Failed to download logs: ${error instanceof Error ? error.message : "Unknown error"}`,
-      );
-    } finally {
-      setIsDownloading(false);
-    }
-  };
-
-  const filteredLogs = React.useMemo(() => {
-    if (!searchFilter.trim()) return logs;
-
-    return logs
-      .split("\n")
-      .filter((line) => line.toLowerCase().includes(searchFilter.toLowerCase()))
-      .join("\n");
-  }, [logs, searchFilter]);
-
-  return (
-    <div className="flex flex-col h-full gap-3">
-      <Card className="py-3">
-        <CardContent className="px-3">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
-            <div className="flex flex-col">
-              <Label htmlFor="tail-lines" className="mb-1">
-                Lines to show
-              </Label>
-              <Select value={tailLines} onValueChange={setTailLines}>
-                <SelectTrigger id="tail-lines">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="50">Last 50 lines</SelectItem>
-                  <SelectItem value="100">Last 100 lines</SelectItem>
-                  <SelectItem value="500">Last 500 lines</SelectItem>
-                  <SelectItem value="1000">Last 1000 lines</SelectItem>
-                  <SelectItem value="all">All logs</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div className="flex flex-col">
-              <Label htmlFor="timestamps" className="mb-1">
-                Show Timestamps
-              </Label>
-              <div className="flex items-center h-10 px-3 border rounded-md">
-                <Switch
-                  id="timestamps"
-                  checked={showTimestamps}
-                  onCheckedChange={setShowTimestamps}
-                />
-                <span className="ml-2 text-sm">
-                  {showTimestamps ? "Enabled" : "Disabled"}
-                </span>
-              </div>
-            </div>
-
-            <div className="flex flex-col">
-              <Label htmlFor="auto-refresh" className="mb-1">
-                Auto Refresh
-              </Label>
-              <div className="flex items-center h-10 px-3 border rounded-md">
-                <Switch
-                  id="auto-refresh"
-                  checked={autoRefresh}
-                  onCheckedChange={setAutoRefresh}
-                />
-                <span className="ml-2 text-sm">
-                  {autoRefresh ? "On" : "Off"}
-                </span>
-              </div>
-            </div>
-
-            <div className="flex flex-col">
-              <Label className="mb-1">Actions</Label>
-              <div className="flex gap-2 h-10">
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={fetchLogs}
-                  disabled={isLoading}
-                  className="flex-1 h-full"
-                >
-                  {isLoading ? (
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
-                  ) : (
-                    <RefreshCw className="h-4 w-4" />
-                  )}
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  onClick={handleDownload}
-                  disabled={isDownloading}
-                  className="flex-1 h-full"
-                >
-                  {isDownloading ? (
-                    <div className="h-4 w-4 animate-spin rounded-full border-2 border-edge-hover border-t-transparent" />
-                  ) : (
-                    <Download className="h-4 w-4" />
-                  )}
-                </Button>
-              </div>
-            </div>
-          </div>
-
-          <div className="mt-2">
-            <div className="relative">
-              <Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <input
-                type="text"
-                placeholder="Filter logs..."
-                value={searchFilter}
-                onChange={(e) => setSearchFilter(e.target.value)}
-                className="w-full pl-10 pr-4 py-2 border border-input rounded-md text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
-              />
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      <Card className="flex-1 overflow-hidden py-0">
-        <CardContent className="p-0 h-full">
-          {isLoading && !logs ? (
-            <div className="flex items-center justify-center h-full">
-              <SimpleLoader size="lg" />
-            </div>
-          ) : (
-            <div className="h-full overflow-auto thin-scrollbar">
-              <pre className="p-4 text-xs font-mono whitespace-pre-wrap break-words text-foreground leading-relaxed">
-                {filteredLogs || (
-                  <span className="text-muted-foreground">
-                    No logs available
-                  </span>
-                )}
-                <div ref={logsEndRef} />
-              </pre>
-            </div>
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}

src/ui/desktop/apps/features/file-manager/DragIndicator.tsx

@@ -1,143 +0,0 @@
-import React from "react";
-import { cn } from "@/lib/utils.ts";
-import { useTranslation } from "react-i18next";
-import {
-  Download,
-  FileDown,
-  FolderDown,
-  Loader2,
-  CheckCircle,
-  AlertCircle,
-} from "lucide-react";
-
-interface DragIndicatorProps {
-  isVisible: boolean;
-  isDragging: boolean;
-  isDownloading: boolean;
-  progress: number;
-  fileName?: string;
-  fileCount?: number;
-  error?: string | null;
-  className?: string;
-}
-
-export function DragIndicator({
-  isVisible,
-  isDragging,
-  isDownloading,
-  progress,
-  fileName,
-  fileCount = 1,
-  error,
-  className,
-}: DragIndicatorProps) {
-  const { t } = useTranslation();
-
-  if (!isVisible) return null;
-
-  const getIcon = () => {
-    if (error) {
-      return <AlertCircle className="w-6 h-6 text-red-500" />;
-    }
-
-    if (isDragging) {
-      return <CheckCircle className="w-6 h-6 text-green-500" />;
-    }
-
-    if (isDownloading) {
-      return <Loader2 className="w-6 h-6 text-blue-500 animate-spin" />;
-    }
-
-    if (fileCount > 1) {
-      return <FolderDown className="w-6 h-6 text-blue-500" />;
-    }
-
-    return <FileDown className="w-6 h-6 text-blue-500" />;
-  };
-
-  const getStatusText = () => {
-    if (error) {
-      return t("dragIndicator.error", { error });
-    }
-
-    if (isDragging) {
-      return t("dragIndicator.dragging", { fileName: fileName || "" });
-    }
-
-    if (isDownloading) {
-      return t("dragIndicator.preparing", { fileName: fileName || "" });
-    }
-
-    if (fileCount > 1) {
-      return t("dragIndicator.readyMultiple", { count: fileCount });
-    }
-
-    return t("dragIndicator.readySingle", { fileName: fileName || "" });
-  };
-
-  return (
-    <div
-      className={cn(
-        "fixed top-4 right-4 z-50 min-w-[300px] max-w-[400px]",
-        "bg-canvas border border-edge rounded-lg shadow-lg",
-        "p-4 transition-all duration-300 ease-in-out",
-        isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full",
-        className,
-      )}
-    >
-      <div className="flex items-start gap-3">
-        <div className="flex-shrink-0 mt-0.5">{getIcon()}</div>
-
-        <div className="flex-1 min-w-0">
-          <div className="text-sm font-medium text-foreground mb-2">
-            {fileCount > 1
-              ? t("dragIndicator.batchDrag")
-              : t("dragIndicator.dragToDesktop")}
-          </div>
-
-          <div
-            className={cn(
-              "text-xs mb-3",
-              error
-                ? "text-red-500"
-                : isDragging
-                  ? "text-green-500"
-                  : "text-muted-foreground",
-            )}
-          >
-            {getStatusText()}
-          </div>
-
-          {(isDownloading || isDragging) && !error && (
-            <div className="w-full bg-border-base rounded-full h-2 mb-2">
-              <div
-                className={cn(
-                  "h-2 rounded-full transition-all duration-300",
-                  isDragging ? "bg-green-500" : "bg-blue-500",
-                )}
-                style={{ width: `${Math.max(5, progress)}%` }}
-              />
-            </div>
-          )}
-
-          {(isDownloading || isDragging) && !error && (
-            <div className="text-xs text-muted-foreground">
-              {progress.toFixed(0)}%
-            </div>
-          )}
-
-          {isDragging && !error && (
-            <div className="text-xs text-green-500 mt-2 flex items-center gap-1">
-              <Download className="w-3 h-3" />
-              {t("dragIndicator.canDragAnywhere")}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {isDragging && !error && (
-        <div className="absolute inset-0 rounded-lg bg-green-500/5 animate-pulse" />
-      )}
-    </div>
-  );
-}

src/ui/desktop/apps/features/file-manager/components/PermissionsDialog.tsx

@@ -1,317 +0,0 @@
-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 { Checkbox } from "@/components/ui/checkbox.tsx";
-import { useTranslation } from "react-i18next";
-import { Shield } from "lucide-react";
-
-interface FileItem {
-  name: string;
-  type: "file" | "directory" | "link";
-  path: string;
-  permissions?: string;
-  owner?: string;
-  group?: string;
-}
-
-interface PermissionsDialogProps {
-  file: FileItem | null;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSave: (file: FileItem, permissions: string) => Promise<void>;
-}
-
-const parsePermissions = (
-  perms: string,
-): { owner: number; group: number; other: number } => {
-  if (!perms) {
-    return { owner: 0, group: 0, other: 0 };
-  }
-
-  if (/^\d{3,4}$/.test(perms)) {
-    const numStr = perms.slice(-3);
-    return {
-      owner: parseInt(numStr[0] || "0", 10),
-      group: parseInt(numStr[1] || "0", 10),
-      other: parseInt(numStr[2] || "0", 10),
-    };
-  }
-  const cleanPerms = perms.replace(/^-/, "").substring(0, 9);
-
-  const calcBits = (str: string): number => {
-    let value = 0;
-    if (str[0] === "r") value += 4;
-    if (str[1] === "w") value += 2;
-    if (str[2] === "x") value += 1;
-    return value;
-  };
-
-  return {
-    owner: calcBits(cleanPerms.substring(0, 3)),
-    group: calcBits(cleanPerms.substring(3, 6)),
-    other: calcBits(cleanPerms.substring(6, 9)),
-  };
-};
-
-const toNumeric = (owner: number, group: number, other: number): string => {
-  return `${owner}${group}${other}`;
-};
-
-export function PermissionsDialog({
-  file,
-  open,
-  onOpenChange,
-  onSave,
-}: PermissionsDialogProps) {
-  const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
-
-  const initialPerms = parsePermissions(file?.permissions || "644");
-  const [ownerRead, setOwnerRead] = useState((initialPerms.owner & 4) !== 0);
-  const [ownerWrite, setOwnerWrite] = useState((initialPerms.owner & 2) !== 0);
-  const [ownerExecute, setOwnerExecute] = useState(
-    (initialPerms.owner & 1) !== 0,
-  );
-
-  const [groupRead, setGroupRead] = useState((initialPerms.group & 4) !== 0);
-  const [groupWrite, setGroupWrite] = useState((initialPerms.group & 2) !== 0);
-  const [groupExecute, setGroupExecute] = useState(
-    (initialPerms.group & 1) !== 0,
-  );
-
-  const [otherRead, setOtherRead] = useState((initialPerms.other & 4) !== 0);
-  const [otherWrite, setOtherWrite] = useState((initialPerms.other & 2) !== 0);
-  const [otherExecute, setOtherExecute] = useState(
-    (initialPerms.other & 1) !== 0,
-  );
-
-  useEffect(() => {
-    if (file) {
-      const perms = parsePermissions(file.permissions || "644");
-      setOwnerRead((perms.owner & 4) !== 0);
-      setOwnerWrite((perms.owner & 2) !== 0);
-      setOwnerExecute((perms.owner & 1) !== 0);
-      setGroupRead((perms.group & 4) !== 0);
-      setGroupWrite((perms.group & 2) !== 0);
-      setGroupExecute((perms.group & 1) !== 0);
-      setOtherRead((perms.other & 4) !== 0);
-      setOtherWrite((perms.other & 2) !== 0);
-      setOtherExecute((perms.other & 1) !== 0);
-    }
-  }, [file]);
-
-  const calculateOctal = (): string => {
-    const owner =
-      (ownerRead ? 4 : 0) + (ownerWrite ? 2 : 0) + (ownerExecute ? 1 : 0);
-    const group =
-      (groupRead ? 4 : 0) + (groupWrite ? 2 : 0) + (groupExecute ? 1 : 0);
-    const other =
-      (otherRead ? 4 : 0) + (otherWrite ? 2 : 0) + (otherExecute ? 1 : 0);
-    return toNumeric(owner, group, other);
-  };
-
-  const handleSave = async () => {
-    if (!file) return;
-
-    setLoading(true);
-    try {
-      const permissions = calculateOctal();
-      await onSave(file, permissions);
-      onOpenChange(false);
-    } catch (error) {
-      console.error("Failed to update permissions:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  if (!file) return null;
-
-  const octal = calculateOctal();
-
-  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">
-            <Shield className="w-5 h-5" />
-            {t("fileManager.changePermissions")}
-          </DialogTitle>
-          <DialogDescription className="text-muted-foreground">
-            {t("fileManager.changePermissionsDesc")}:{" "}
-            <span className="font-mono text-foreground">{file.name}</span>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-6 py-4">
-          <div className="grid grid-cols-2 gap-4 text-sm">
-            <div>
-              <Label className="text-muted-foreground">
-                {t("fileManager.currentPermissions")}
-              </Label>
-              <p className="font-mono text-lg mt-1">
-                {file.permissions || "644"}
-              </p>
-            </div>
-            <div>
-              <Label className="text-muted-foreground">
-                {t("fileManager.newPermissions")}
-              </Label>
-              <p className="font-mono text-lg mt-1">{octal}</p>
-            </div>
-          </div>
-
-          <div className="space-y-3">
-            <Label className="text-base font-semibold text-foreground">
-              {t("fileManager.owner")} {file.owner && `(${file.owner})`}
-            </Label>
-            <div className="flex gap-6 ml-4">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="owner-read"
-                  checked={ownerRead}
-                  onCheckedChange={(checked) => setOwnerRead(checked === true)}
-                />
-                <label htmlFor="owner-read" className="text-sm cursor-pointer">
-                  {t("fileManager.read")}
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="owner-write"
-                  checked={ownerWrite}
-                  onCheckedChange={(checked) => setOwnerWrite(checked === true)}
-                />
-                <label htmlFor="owner-write" className="text-sm cursor-pointer">
-                  {t("fileManager.write")}
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="owner-execute"
-                  checked={ownerExecute}
-                  onCheckedChange={(checked) =>
-                    setOwnerExecute(checked === true)
-                  }
-                />
-                <label
-                  htmlFor="owner-execute"
-                  className="text-sm cursor-pointer"
-                >
-                  {t("fileManager.execute")}
-                </label>
-              </div>
-            </div>
-          </div>
-
-          <div className="space-y-3">
-            <Label className="text-base font-semibold text-foreground">
-              {t("fileManager.group")} {file.group && `(${file.group})`}
-            </Label>
-            <div className="flex gap-6 ml-4">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="group-read"
-                  checked={groupRead}
-                  onCheckedChange={(checked) => setGroupRead(checked === true)}
-                />
-                <label htmlFor="group-read" className="text-sm cursor-pointer">
-                  {t("fileManager.read")}
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="group-write"
-                  checked={groupWrite}
-                  onCheckedChange={(checked) => setGroupWrite(checked === true)}
-                />
-                <label htmlFor="group-write" className="text-sm cursor-pointer">
-                  {t("fileManager.write")}
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="group-execute"
-                  checked={groupExecute}
-                  onCheckedChange={(checked) =>
-                    setGroupExecute(checked === true)
-                  }
-                />
-                <label
-                  htmlFor="group-execute"
-                  className="text-sm cursor-pointer"
-                >
-                  {t("fileManager.execute")}
-                </label>
-              </div>
-            </div>
-          </div>
-
-          <div className="space-y-3">
-            <Label className="text-base font-semibold text-foreground">
-              {t("fileManager.others")}
-            </Label>
-            <div className="flex gap-6 ml-4">
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="other-read"
-                  checked={otherRead}
-                  onCheckedChange={(checked) => setOtherRead(checked === true)}
-                />
-                <label htmlFor="other-read" className="text-sm cursor-pointer">
-                  {t("fileManager.read")}
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="other-write"
-                  checked={otherWrite}
-                  onCheckedChange={(checked) => setOtherWrite(checked === true)}
-                />
-                <label htmlFor="other-write" className="text-sm cursor-pointer">
-                  {t("fileManager.write")}
-                </label>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="other-execute"
-                  checked={otherExecute}
-                  onCheckedChange={(checked) =>
-                    setOtherExecute(checked === true)
-                  }
-                />
-                <label
-                  htmlFor="other-execute"
-                  className="text-sm cursor-pointer"
-                >
-                  {t("fileManager.execute")}
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={loading}
-          >
-            {t("common.cancel")}
-          </Button>
-          <Button onClick={handleSave} disabled={loading}>
-            {loading ? t("common.saving") : t("common.save")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/CpuWidget.tsx

@@ -1,104 +0,0 @@
-import React from "react";
-import { Cpu } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { ServerMetrics } from "@/ui/main-axios.ts";
-import { RechartsPrimitive } from "@/components/ui/chart.tsx";
-
-const {
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} = RechartsPrimitive;
-
-interface CpuWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-export function CpuWidget({ metrics, metricsHistory }: CpuWidgetProps) {
-  const { t } = useTranslation();
-
-  const chartData = React.useMemo(() => {
-    return metricsHistory.map((m, index) => ({
-      index,
-      cpu: m.cpu?.percent || 0,
-    }));
-  }, [metricsHistory]);
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        <Cpu className="h-5 w-5 text-blue-400" />
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.cpuUsage")}
-        </h3>
-      </div>
-
-      <div className="flex flex-col flex-1 min-h-0 gap-2">
-        <div className="flex items-baseline gap-3 flex-shrink-0">
-          <div className="text-2xl font-bold text-blue-400">
-            {typeof metrics?.cpu?.percent === "number"
-              ? `${metrics.cpu.percent}%`
-              : "N/A"}
-          </div>
-          <div className="text-xs text-muted-foreground">
-            {typeof metrics?.cpu?.cores === "number"
-              ? t("serverStats.cpuCores", { count: metrics.cpu.cores })
-              : t("serverStats.naCpus")}
-          </div>
-        </div>
-        <div className="text-xs text-foreground-subtle flex-shrink-0">
-          {metrics?.cpu?.load
-            ? t("serverStats.loadAverage", {
-                avg1: metrics.cpu.load[0].toFixed(2),
-                avg5: metrics.cpu.load[1].toFixed(2),
-                avg15: metrics.cpu.load[2].toFixed(2),
-              })
-            : t("serverStats.loadAverageNA")}
-        </div>
-        <div className="flex-1 min-h-0">
-          <ResponsiveContainer width="100%" height="100%">
-            <LineChart
-              data={chartData}
-              margin={{ top: 5, right: 5, left: -25, bottom: 5 }}
-            >
-              <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-              <XAxis
-                dataKey="index"
-                stroke="#9ca3af"
-                tick={{ fill: "#9ca3af" }}
-                hide
-              />
-              <YAxis
-                domain={[0, 100]}
-                stroke="#9ca3af"
-                tick={{ fill: "#9ca3af" }}
-              />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: "#1f2937",
-                  border: "1px solid #374151",
-                  borderRadius: "6px",
-                  color: "#fff",
-                }}
-                formatter={(value: number) => [`${value.toFixed(1)}%`, "CPU"]}
-              />
-              <Line
-                type="monotone"
-                dataKey="cpu"
-                stroke="#60a5fa"
-                strokeWidth={2}
-                dot={false}
-                animationDuration={300}
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </div>
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/DiskWidget.tsx

@@ -1,125 +0,0 @@
-import React from "react";
-import { HardDrive } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { ServerMetrics } from "@/ui/main-axios.ts";
-import { RechartsPrimitive } from "@/components/ui/chart.tsx";
-
-const {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} = RechartsPrimitive;
-
-interface DiskWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-export function DiskWidget({ metrics, metricsHistory }: DiskWidgetProps) {
-  const { t } = useTranslation();
-
-  const chartData = React.useMemo(() => {
-    return metricsHistory.map((m, index) => ({
-      index,
-      disk: m.disk?.percent || 0,
-    }));
-  }, [metricsHistory]);
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        <HardDrive className="h-5 w-5 text-orange-400" />
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.diskUsage")}
-        </h3>
-      </div>
-
-      <div className="flex flex-col flex-1 min-h-0 gap-2">
-        <div className="flex items-baseline gap-3 flex-shrink-0">
-          <div className="text-2xl font-bold text-orange-400">
-            {typeof metrics?.disk?.percent === "number"
-              ? `${metrics.disk.percent}%`
-              : "N/A"}
-          </div>
-          <div className="text-xs text-muted-foreground">
-            {(() => {
-              const used = metrics?.disk?.usedHuman;
-              const total = metrics?.disk?.totalHuman;
-              if (used && total) {
-                return `${used} / ${total}`;
-              }
-              return "N/A";
-            })()}
-          </div>
-        </div>
-        <div className="text-xs text-foreground-subtle flex-shrink-0">
-          {(() => {
-            const available = metrics?.disk?.availableHuman;
-            return available
-              ? `${t("serverStats.available")}: ${available}`
-              : `${t("serverStats.available")}: N/A`;
-          })()}
-        </div>
-        <div className="flex-1 min-h-0">
-          <ResponsiveContainer width="100%" height="100%">
-            <AreaChart
-              data={chartData}
-              margin={{ top: 5, right: 5, left: -25, bottom: 5 }}
-            >
-              <defs>
-                <linearGradient id="diskGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="#fb923c" stopOpacity={0.8} />
-                  <stop offset="95%" stopColor="#fb923c" stopOpacity={0.1} />
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-              <XAxis
-                dataKey="index"
-                stroke="#9ca3af"
-                tick={{ fill: "#9ca3af" }}
-                hide
-              />
-              <YAxis
-                domain={[0, 100]}
-                stroke="#9ca3af"
-                tick={{ fill: "#9ca3af" }}
-              />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: "#1f2937",
-                  border: "1px solid #374151",
-                  borderRadius: "6px",
-                  color: "#fff",
-                }}
-                formatter={(value: number) => [`${value.toFixed(1)}%`, "Disk"]}
-                cursor={{
-                  stroke: "#fb923c",
-                  strokeWidth: 1,
-                  strokeDasharray: "3 3",
-                }}
-              />
-              <Area
-                type="monotone"
-                dataKey="disk"
-                stroke="#fb923c"
-                strokeWidth={2}
-                fill="url(#diskGradient)"
-                animationDuration={300}
-                activeDot={{
-                  r: 4,
-                  fill: "#fb923c",
-                  stroke: "#fff",
-                  strokeWidth: 2,
-                }}
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </div>
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/FirewallWidget.tsx

@@ -1,212 +0,0 @@
-import React from "react";
-import { Shield, ShieldOff, ShieldCheck, ChevronDown } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { ServerMetrics } from "@/ui/main-axios.ts";
-import type {
-  FirewallMetrics,
-  FirewallChain,
-  FirewallRule,
-} from "@/types/stats-widgets";
-
-interface FirewallWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-function RuleRow({ rule }: { rule: FirewallRule }) {
-  const { t } = useTranslation();
-
-  const getTargetStyle = (target: string) => {
-    switch (target.toUpperCase()) {
-      case "ACCEPT":
-        return "text-green-400";
-      case "DROP":
-        return "text-red-400";
-      case "REJECT":
-        return "text-orange-400";
-      default:
-        return "text-muted-foreground";
-    }
-  };
-
-  const getTargetLabel = (target: string) => {
-    switch (target.toUpperCase()) {
-      case "ACCEPT":
-        return t("serverStats.firewall.accept");
-      case "DROP":
-        return t("serverStats.firewall.drop");
-      case "REJECT":
-        return t("serverStats.firewall.reject");
-      default:
-        return target;
-    }
-  };
-
-  const formatSource = () => {
-    if (rule.interface) {
-      return rule.interface;
-    }
-    if (rule.state) {
-      return rule.state;
-    }
-    if (rule.source === "0.0.0.0/0") {
-      return t("serverStats.firewall.anywhere");
-    }
-    return rule.source;
-  };
-
-  return (
-    <div className="grid grid-cols-4 gap-2 text-xs py-1.5 border-b border-edge/30 last:border-0">
-      <div className={`font-medium ${getTargetStyle(rule.target)}`}>
-        {getTargetLabel(rule.target)}
-      </div>
-      <div className="text-foreground-subtle font-mono">
-        {rule.protocol.toUpperCase()}
-      </div>
-      <div className="text-foreground-subtle font-mono">
-        {rule.dport || "-"}
-      </div>
-      <div className="text-foreground-subtle truncate" title={formatSource()}>
-        {formatSource()}
-      </div>
-    </div>
-  );
-}
-
-function ChainSection({ chain }: { chain: FirewallChain }) {
-  const { t } = useTranslation();
-  const [isOpen, setIsOpen] = React.useState(true);
-
-  const getPolicyStyle = (policy: string) => {
-    switch (policy.toUpperCase()) {
-      case "ACCEPT":
-        return "text-green-400";
-      case "DROP":
-        return "text-red-400";
-      case "REJECT":
-        return "text-orange-400";
-      default:
-        return "text-muted-foreground";
-    }
-  };
-
-  return (
-    <div>
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-2 w-full py-1.5 hover:bg-elevated/30 rounded px-1 -mx-1 text-left"
-      >
-        <ChevronDown
-          className={`h-3 w-3 text-muted-foreground transition-transform ${
-            isOpen ? "" : "-rotate-90"
-          }`}
-        />
-        <span className="text-sm font-medium text-foreground">
-          {chain.name}
-        </span>
-        <span className="text-xs text-muted-foreground">
-          ({t("serverStats.firewall.policy")}:{" "}
-          <span className={getPolicyStyle(chain.policy)}>{chain.policy}</span>)
-        </span>
-        <span className="text-xs text-muted-foreground ml-auto">
-          {chain.rules.length} {t("serverStats.firewall.rules")}
-        </span>
-      </button>
-      {isOpen && (
-        <>
-          {chain.rules.length > 0 ? (
-            <div className="mt-2 ml-5">
-              <div className="grid grid-cols-4 gap-2 text-xs text-muted-foreground border-b border-edge/50 pb-1 mb-1">
-                <div>{t("serverStats.firewall.action")}</div>
-                <div>{t("serverStats.firewall.protocol")}</div>
-                <div>{t("serverStats.firewall.port")}</div>
-                <div>{t("serverStats.firewall.source")}</div>
-              </div>
-              <div className="max-h-32 overflow-y-auto thin-scrollbar">
-                {chain.rules.map((rule, idx) => (
-                  <RuleRow key={idx} rule={rule} />
-                ))}
-              </div>
-            </div>
-          ) : (
-            <div className="text-xs text-muted-foreground ml-5 mt-1">
-              {t("serverStats.firewall.noRules")}
-            </div>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-export function FirewallWidget({ metrics }: FirewallWidgetProps) {
-  const { t } = useTranslation();
-
-  const firewall = (metrics as ServerMetrics & { firewall?: FirewallMetrics })
-    ?.firewall;
-
-  const getStatusIcon = () => {
-    if (!firewall || firewall.type === "none") {
-      return <ShieldOff className="h-5 w-5 text-muted-foreground" />;
-    }
-    if (firewall.status === "active") {
-      return <ShieldCheck className="h-5 w-5 text-green-400" />;
-    }
-    return <Shield className="h-5 w-5 text-orange-400" />;
-  };
-
-  const getStatusText = () => {
-    if (!firewall || firewall.type === "none") {
-      return t("serverStats.firewall.notDetected");
-    }
-    if (firewall.status === "active") {
-      return t("serverStats.firewall.active");
-    }
-    return t("serverStats.firewall.inactive");
-  };
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        {getStatusIcon()}
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.firewall.title")}
-        </h3>
-        {firewall && firewall.type !== "none" && (
-          <span className="text-xs text-muted-foreground ml-auto bg-elevated/50 px-2 py-0.5 rounded capitalize">
-            {firewall.type}
-          </span>
-        )}
-      </div>
-
-      <div className="flex items-center gap-2 mb-3 flex-shrink-0">
-        <span
-          className={`text-sm font-medium ${
-            firewall?.status === "active"
-              ? "text-green-400"
-              : firewall?.status === "inactive"
-                ? "text-orange-400"
-                : "text-muted-foreground"
-          }`}
-        >
-          {getStatusText()}
-        </span>
-      </div>
-
-      {firewall && firewall.chains.length > 0 ? (
-        <div className="flex-1 overflow-y-auto thin-scrollbar space-y-2">
-          {firewall.chains.map((chain) => (
-            <ChainSection key={chain.name} chain={chain} />
-          ))}
-        </div>
-      ) : (
-        <div className="flex-1 flex items-center justify-center">
-          <p className="text-sm text-muted-foreground">
-            {t("serverStats.firewall.noData")}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/LoginStatsWidget.tsx

@@ -1,142 +0,0 @@
-import React from "react";
-import { UserCheck, UserX, MapPin, Activity } from "lucide-react";
-import { useTranslation } from "react-i18next";
-
-interface LoginRecord {
-  user: string;
-  ip: string;
-  time: string;
-  status: "success" | "failed";
-}
-
-interface LoginStatsMetrics {
-  recentLogins: LoginRecord[];
-  failedLogins: LoginRecord[];
-  totalLogins: number;
-  uniqueIPs: number;
-}
-
-interface ServerMetrics {
-  login_stats?: LoginStatsMetrics;
-}
-
-interface LoginStatsWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
-  const { t } = useTranslation();
-
-  const loginStats = metrics?.login_stats;
-  const recentLogins = loginStats?.recentLogins || [];
-  const failedLogins = loginStats?.failedLogins || [];
-  const totalLogins = loginStats?.totalLogins || 0;
-  const uniqueIPs = loginStats?.uniqueIPs || 0;
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        <UserCheck className="h-5 w-5 text-green-400" />
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.loginStats")}
-        </h3>
-      </div>
-
-      <div className="flex flex-col flex-1 min-h-0 gap-3">
-        <div className="grid grid-cols-2 gap-2 flex-shrink-0">
-          <div className="bg-canvas/40 p-2 rounded border border-edge/30 hover:bg-canvas/50">
-            <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
-              <Activity className="h-3 w-3" />
-              <span>{t("serverStats.totalLogins")}</span>
-            </div>
-            <div className="text-xl font-bold text-green-400">
-              {totalLogins}
-            </div>
-          </div>
-          <div className="bg-canvas/40 p-2 rounded border border-edge/30 hover:bg-canvas/50">
-            <div className="flex items-center gap-1 text-xs text-muted-foreground mb-1">
-              <MapPin className="h-3 w-3" />
-              <span>{t("serverStats.uniqueIPs")}</span>
-            </div>
-            <div className="text-xl font-bold text-blue-400">{uniqueIPs}</div>
-          </div>
-        </div>
-
-        <div className="flex-1 min-h-0 overflow-y-auto thin-scrollbar space-y-2">
-          <div className="flex-shrink-0">
-            <div className="flex items-center gap-2 mb-1">
-              <UserCheck className="h-4 w-4 text-green-400" />
-              <span className="text-sm font-semibold text-foreground-secondary">
-                {t("serverStats.recentSuccessfulLogins")}
-              </span>
-            </div>
-            {recentLogins.length === 0 ? (
-              <div className="text-xs text-foreground-subtle italic p-2">
-                {t("serverStats.noRecentLoginData")}
-              </div>
-            ) : (
-              <div className="space-y-1">
-                {recentLogins.slice(0, 5).map((login, idx) => (
-                  <div
-                    key={idx}
-                    className="text-xs bg-canvas/40 p-2 rounded border border-edge/30 hover:bg-canvas/50 flex justify-between items-center"
-                  >
-                    <div className="flex items-center gap-2 min-w-0">
-                      <span className="text-green-400 font-mono truncate">
-                        {login.user}
-                      </span>
-                      <span className="text-foreground-subtle">
-                        {t("serverStats.from")}
-                      </span>
-                      <span className="text-blue-400 font-mono truncate">
-                        {login.ip}
-                      </span>
-                    </div>
-                    <span className="text-foreground-subtle text-[10px] flex-shrink-0 ml-2">
-                      {new Date(login.time).toLocaleString()}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {failedLogins.length > 0 && (
-            <div className="flex-shrink-0">
-              <div className="flex items-center gap-2 mb-1">
-                <UserX className="h-4 w-4 text-red-400" />
-                <span className="text-sm font-semibold text-foreground-secondary">
-                  {t("serverStats.recentFailedAttempts")}
-                </span>
-              </div>
-              <div className="space-y-1">
-                {failedLogins.slice(0, 3).map((login) => (
-                  <div
-                    key={`failed-${login.user}-${login.time}-${login.ip || "unknown"}`}
-                    className="text-xs bg-red-900/20 p-2 rounded border border-red-500/30 flex justify-between items-center"
-                  >
-                    <div className="flex items-center gap-2 min-w-0">
-                      <span className="text-red-400 font-mono truncate">
-                        {login.user}
-                      </span>
-                      <span className="text-foreground-subtle">
-                        {t("serverStats.from")}
-                      </span>
-                      <span className="text-blue-400 font-mono truncate">
-                        {login.ip}
-                      </span>
-                    </div>
-                    <span className="text-foreground-subtle text-[10px] flex-shrink-0 ml-2">
-                      {new Date(login.time).toLocaleString()}
-                    </span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/MemoryWidget.tsx

@@ -1,131 +0,0 @@
-import React from "react";
-import { MemoryStick } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { ServerMetrics } from "@/ui/main-axios.ts";
-import { RechartsPrimitive } from "@/components/ui/chart.tsx";
-
-const {
-  AreaChart,
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} = RechartsPrimitive;
-
-interface MemoryWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-export function MemoryWidget({ metrics, metricsHistory }: MemoryWidgetProps) {
-  const { t } = useTranslation();
-
-  const chartData = React.useMemo(() => {
-    return metricsHistory.map((m, index) => ({
-      index,
-      memory: m.memory?.percent || 0,
-    }));
-  }, [metricsHistory]);
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        <MemoryStick className="h-5 w-5 text-green-400" />
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.memoryUsage")}
-        </h3>
-      </div>
-
-      <div className="flex flex-col flex-1 min-h-0 gap-2">
-        <div className="flex items-baseline gap-3 flex-shrink-0">
-          <div className="text-2xl font-bold text-green-400">
-            {typeof metrics?.memory?.percent === "number"
-              ? `${metrics.memory.percent}%`
-              : "N/A"}
-          </div>
-          <div className="text-xs text-muted-foreground">
-            {(() => {
-              const used = metrics?.memory?.usedGiB;
-              const total = metrics?.memory?.totalGiB;
-              if (typeof used === "number" && typeof total === "number") {
-                return `${used.toFixed(1)} / ${total.toFixed(1)} GiB`;
-              }
-              return "N/A";
-            })()}
-          </div>
-        </div>
-        <div className="text-xs text-foreground-subtle flex-shrink-0">
-          {(() => {
-            const used = metrics?.memory?.usedGiB;
-            const total = metrics?.memory?.totalGiB;
-            const free =
-              typeof used === "number" && typeof total === "number"
-                ? (total - used).toFixed(1)
-                : "N/A";
-            return `${t("serverStats.free")}: ${free} GiB`;
-          })()}
-        </div>
-        <div className="flex-1 min-h-0">
-          <ResponsiveContainer width="100%" height="100%">
-            <AreaChart
-              data={chartData}
-              margin={{ top: 5, right: 5, left: -25, bottom: 5 }}
-            >
-              <defs>
-                <linearGradient id="memoryGradient" x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="5%" stopColor="#34d399" stopOpacity={0.8} />
-                  <stop offset="95%" stopColor="#34d399" stopOpacity={0.1} />
-                </linearGradient>
-              </defs>
-              <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-              <XAxis
-                dataKey="index"
-                stroke="#9ca3af"
-                tick={{ fill: "#9ca3af" }}
-                hide
-              />
-              <YAxis
-                domain={[0, 100]}
-                stroke="#9ca3af"
-                tick={{ fill: "#9ca3af" }}
-              />
-              <Tooltip
-                contentStyle={{
-                  backgroundColor: "#1f2937",
-                  border: "1px solid #374151",
-                  borderRadius: "6px",
-                  color: "#fff",
-                }}
-                formatter={(value: number) => [
-                  `${value.toFixed(1)}%`,
-                  "Memory",
-                ]}
-                cursor={{
-                  stroke: "#34d399",
-                  strokeWidth: 1,
-                  strokeDasharray: "3 3",
-                }}
-              />
-              <Area
-                type="monotone"
-                dataKey="memory"
-                stroke="#34d399"
-                strokeWidth={2}
-                fill="url(#memoryGradient)"
-                animationDuration={300}
-                activeDot={{
-                  r: 4,
-                  fill: "#34d399",
-                  stroke: "#fff",
-                  strokeWidth: 2,
-                }}
-              />
-            </AreaChart>
-          </ResponsiveContainer>
-        </div>
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/NetworkWidget.tsx

@@ -1,75 +0,0 @@
-import React from "react";
-import { Network, Wifi, WifiOff } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { ServerMetrics } from "@/ui/main-axios.ts";
-
-interface NetworkWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-export function NetworkWidget({ metrics }: NetworkWidgetProps) {
-  const { t } = useTranslation();
-
-  const metricsWithNetwork = metrics as ServerMetrics & {
-    network?: {
-      interfaces?: Array<{
-        name: string;
-        state: string;
-        ip: string;
-      }>;
-    };
-  };
-  const network = metricsWithNetwork?.network;
-  const interfaces = network?.interfaces || [];
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        <Network className="h-5 w-5 text-indigo-400" />
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.networkInterfaces")}
-        </h3>
-      </div>
-
-      <div className="space-y-2.5 overflow-auto thin-scrollbar flex-1">
-        {interfaces.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-            <WifiOff className="h-10 w-10 mb-3 opacity-50" />
-            <p className="text-sm">{t("serverStats.noInterfacesFound")}</p>
-          </div>
-        ) : (
-          interfaces.map((iface, index: number) => (
-            <div
-              key={index}
-              className="p-3 rounded-lg bg-canvas/40 border border-edge/30 hover:bg-canvas/50"
-            >
-              <div className="flex items-center justify-between mb-2">
-                <div className="flex items-center gap-2">
-                  <Wifi
-                    className={`h-4 w-4 ${iface.state === "UP" ? "text-green-400" : "text-foreground-subtle"}`}
-                  />
-                  <span className="text-sm font-semibold text-foreground font-mono">
-                    {iface.name}
-                  </span>
-                </div>
-                <span
-                  className={`text-xs px-2.5 py-0.5 rounded-full font-medium ${
-                    iface.state === "UP"
-                      ? "bg-green-500/20 text-green-400"
-                      : "bg-surface text-foreground-subtle"
-                  }`}
-                >
-                  {iface.state}
-                </span>
-              </div>
-              <div className="text-xs text-muted-foreground font-mono font-medium">
-                {iface.ip}
-              </div>
-            </div>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/PortsWidget.tsx

@@ -1,108 +0,0 @@
-import React from "react";
-import { Network } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { ServerMetrics } from "@/ui/main-axios.ts";
-import type { PortsMetrics, ListeningPort } from "@/types/stats-widgets";
-
-interface PortsWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-function PortRow({ port }: { port: ListeningPort }) {
-  const formatAddress = (addr: string) => {
-    if (addr === "0.0.0.0" || addr === "*" || addr === "::") {
-      return "*";
-    }
-    return addr;
-  };
-
-  return (
-    <div className="grid grid-cols-5 gap-2 text-xs py-1.5 border-b border-edge/30 last:border-0">
-      <div className="font-mono text-foreground-subtle">
-        {port.protocol.toUpperCase()}
-      </div>
-      <div className="font-mono text-foreground">{port.localPort}</div>
-      <div
-        className="font-mono text-foreground-subtle truncate"
-        title={formatAddress(port.localAddress)}
-      >
-        {formatAddress(port.localAddress)}
-      </div>
-      <div className="text-foreground-subtle">{port.state || "-"}</div>
-      <div
-        className="text-foreground-subtle truncate"
-        title={port.process || "-"}
-      >
-        {port.process || (port.pid ? `PID:${port.pid}` : "-")}
-      </div>
-    </div>
-  );
-}
-
-export function PortsWidget({ metrics }: PortsWidgetProps) {
-  const { t } = useTranslation();
-
-  const portsData = (metrics as ServerMetrics & { ports?: PortsMetrics })
-    ?.ports;
-
-  const tcpPorts = portsData?.ports.filter((p) => p.protocol === "tcp") || [];
-  const udpPorts = portsData?.ports.filter((p) => p.protocol === "udp") || [];
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        <Network className="h-5 w-5 text-cyan-400" />
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.ports.title")}
-        </h3>
-        {portsData && portsData.source !== "none" && (
-          <span className="text-xs text-muted-foreground ml-auto bg-elevated/50 px-2 py-0.5 rounded">
-            {portsData.source === "ss"
-              ? "Socket Stats"
-              : portsData.source === "netstat"
-                ? "Netstat"
-                : portsData.source}
-          </span>
-        )}
-      </div>
-
-      <div className="flex items-center gap-4 mb-3 flex-shrink-0 text-sm">
-        <span className="text-foreground-subtle">
-          TCP:{" "}
-          <span className="text-cyan-400 font-medium">{tcpPorts.length}</span>
-        </span>
-        <span className="text-foreground-subtle">
-          UDP:{" "}
-          <span className="text-cyan-400 font-medium">{udpPorts.length}</span>
-        </span>
-      </div>
-
-      {portsData && portsData.ports.length > 0 ? (
-        <div className="flex-1 overflow-hidden flex flex-col">
-          <div className="grid grid-cols-5 gap-2 text-xs text-muted-foreground border-b border-edge/50 pb-1 mb-1 flex-shrink-0">
-            <div>{t("serverStats.ports.protocol")}</div>
-            <div>{t("serverStats.ports.port")}</div>
-            <div>{t("serverStats.ports.address")}</div>
-            <div>{t("serverStats.ports.state")}</div>
-            <div>{t("serverStats.ports.process")}</div>
-          </div>
-          <div className="flex-1 overflow-y-auto thin-scrollbar">
-            {portsData.ports.map((port, idx) => (
-              <PortRow
-                key={`${port.protocol}-${port.localPort}-${idx}`}
-                port={port}
-              />
-            ))}
-          </div>
-        </div>
-      ) : (
-        <div className="flex-1 flex items-center justify-center">
-          <p className="text-sm text-muted-foreground">
-            {t("serverStats.ports.noData")}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/ProcessesWidget.tsx

@@ -1,89 +0,0 @@
-import React from "react";
-import { List, Activity } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { ServerMetrics } from "@/ui/main-axios.ts";
-
-interface ProcessesWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
-  const { t } = useTranslation();
-
-  const metricsWithProcesses = metrics as ServerMetrics & {
-    processes?: {
-      total?: number;
-      running?: number;
-      top?: Array<{
-        pid: number;
-        cpu: number;
-        mem: number;
-        command: string;
-        user: string;
-      }>;
-    };
-  };
-  const processes = metricsWithProcesses?.processes;
-  const topProcesses = processes?.top || [];
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        <List className="h-5 w-5 text-yellow-400" />
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.processes")}
-        </h3>
-      </div>
-
-      <div className="flex items-center justify-between mb-3 pb-2 border-b border-edge/30">
-        <div className="text-sm text-muted-foreground">
-          {t("serverStats.totalProcesses")}:{" "}
-          <span className="text-foreground font-semibold">
-            {processes?.total ?? "N/A"}
-          </span>
-        </div>
-        <div className="text-sm text-muted-foreground">
-          {t("serverStats.running")}:{" "}
-          <span className="text-green-400 font-semibold">
-            {processes?.running ?? "N/A"}
-          </span>
-        </div>
-      </div>
-
-      <div className="overflow-auto thin-scrollbar flex-1">
-        {topProcesses.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
-            <Activity className="h-10 w-10 mb-3 opacity-50" />
-            <p className="text-sm">{t("serverStats.noProcessesFound")}</p>
-          </div>
-        ) : (
-          <div className="space-y-2">
-            {topProcesses.map((proc, index) => (
-              <div
-                key={index}
-                className="p-2.5 rounded-lg bg-canvas/40 hover:bg-canvas/50 border border-edge/30"
-              >
-                <div className="flex items-center justify-between mb-1.5">
-                  <span className="text-xs font-mono text-muted-foreground font-medium">
-                    PID: {proc.pid}
-                  </span>
-                  <div className="flex gap-3 text-xs font-medium">
-                    <span className="text-blue-400">CPU: {proc.cpu}%</span>
-                    <span className="text-green-400">MEM: {proc.mem}%</span>
-                  </div>
-                </div>
-                <div className="text-xs text-foreground font-mono truncate mb-1">
-                  {proc.command}
-                </div>
-                <div className="text-xs text-foreground-subtle">
-                  User: {proc.user}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/SystemWidget.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Server, Info } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { ServerMetrics } from "@/ui/main-axios.ts";
-
-interface SystemWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-export function SystemWidget({ metrics }: SystemWidgetProps) {
-  const { t } = useTranslation();
-
-  const metricsWithSystem = metrics as ServerMetrics & {
-    system?: {
-      hostname?: string;
-      os?: string;
-      kernel?: string;
-    };
-  };
-  const system = metricsWithSystem?.system;
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        <Server className="h-5 w-5 text-purple-400" />
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.systemInfo")}
-        </h3>
-      </div>
-
-      <div className="space-y-4">
-        <div className="flex items-start gap-3">
-          <Info className="h-4 w-4 text-purple-400 mt-0.5 flex-shrink-0" />
-          <div className="min-w-0 flex-1">
-            <p className="text-xs text-muted-foreground mb-1.5">
-              {t("serverStats.hostname")}
-            </p>
-            <p className="text-sm text-foreground font-mono truncate font-medium">
-              {system?.hostname || "N/A"}
-            </p>
-          </div>
-        </div>
-
-        <div className="flex items-start gap-3">
-          <Info className="h-4 w-4 text-purple-400 mt-0.5 flex-shrink-0" />
-          <div className="min-w-0 flex-1">
-            <p className="text-xs text-muted-foreground mb-1.5">
-              {t("serverStats.operatingSystem")}
-            </p>
-            <p className="text-sm text-foreground font-mono truncate font-medium">
-              {system?.os || "N/A"}
-            </p>
-          </div>
-        </div>
-
-        <div className="flex items-start gap-3">
-          <Info className="h-4 w-4 text-purple-400 mt-0.5 flex-shrink-0" />
-          <div className="min-w-0 flex-1">
-            <p className="text-xs text-muted-foreground mb-1.5">
-              {t("serverStats.kernel")}
-            </p>
-            <p className="text-sm text-foreground font-mono truncate font-medium">
-              {system?.kernel || "N/A"}
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/features/server-stats/widgets/UptimeWidget.tsx

@@ -1,55 +0,0 @@
-import React from "react";
-import { Clock, Activity } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import type { ServerMetrics } from "@/ui/main-axios.ts";
-
-interface UptimeWidgetProps {
-  metrics: ServerMetrics | null;
-  metricsHistory: ServerMetrics[];
-}
-
-export function UptimeWidget({ metrics }: UptimeWidgetProps) {
-  const { t } = useTranslation();
-
-  const metricsWithUptime = metrics as ServerMetrics & {
-    uptime?: {
-      formatted?: string;
-      seconds?: number;
-    };
-  };
-  const uptime = metricsWithUptime?.uptime;
-
-  return (
-    <div className="h-full w-full p-4 rounded-lg bg-elevated border border-edge/50 hover:bg-elevated/70 flex flex-col overflow-hidden">
-      <div className="flex items-center gap-2 flex-shrink-0 mb-3">
-        <Clock className="h-5 w-5 text-cyan-400" />
-        <h3 className="font-semibold text-lg text-foreground">
-          {t("serverStats.uptime")}
-        </h3>
-      </div>
-
-      <div className="flex flex-col items-center justify-center flex-1">
-        <div className="relative mb-4">
-          <div className="w-24 h-24 rounded-full bg-cyan-500/10 flex items-center justify-center">
-            <Activity className="h-12 w-12 text-cyan-400" />
-          </div>
-        </div>
-
-        <div className="text-center">
-          <div className="text-3xl font-bold text-cyan-400 mb-2">
-            {uptime?.formatted || "N/A"}
-          </div>
-          <div className="text-sm text-muted-foreground">
-            {t("serverStats.totalUptime")}
-          </div>
-          {uptime?.seconds && (
-            <div className="text-xs text-foreground-subtle mt-2">
-              {Math.floor(uptime.seconds).toLocaleString()}{" "}
-              {t("serverStats.seconds")}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,81 +0,0 @@
-import { useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { KeyRound } from "lucide-react";
-import { Button } from "@/components/ui/button.tsx";
-
-interface SudoPasswordPopupProps {
-  isOpen: boolean;
-  hostPassword: string;
-  backgroundColor: string;
-  onConfirm: (password: string) => void;
-  onDismiss: () => void;
-}
-
-export function SudoPasswordPopup({
-  isOpen,
-  hostPassword,
-  backgroundColor,
-  onConfirm,
-  onDismiss,
-}: SudoPasswordPopupProps) {
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    if (!isOpen) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        onConfirm(hostPassword);
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        onDismiss();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown, true);
-    return () => window.removeEventListener("keydown", handleKeyDown, true);
-  }, [isOpen, onConfirm, onDismiss, hostPassword]);
-
-  if (!isOpen) return null;
-
-  return (
-    <div
-      className="absolute bottom-4 right-4 z-50 backdrop-blur-sm border border-border rounded-lg shadow-lg p-4 min-w-[280px]"
-      style={{ backgroundColor: backgroundColor }}
-    >
-      <div className="flex items-center gap-3 mb-3">
-        <div className="p-2 bg-primary/10 rounded-full">
-          <KeyRound className="h-5 w-5 text-primary" />
-        </div>
-        <div>
-          <h4 className="font-medium text-sm">
-            {t("terminal.sudoPasswordPopupTitle", "Insert password?")}
-          </h4>
-          <p className="text-xs text-muted-foreground">
-            {t(
-              "terminal.sudoPasswordPopupHint",
-              "Press Enter to insert, Esc to dismiss",
-            )}
-          </p>
-        </div>
-      </div>
-      <div className="flex gap-2 justify-end">
-        <Button variant="ghost" size="sm" onClick={onDismiss}>
-          {t("terminal.sudoPasswordPopupDismiss", "Dismiss")}
-        </Button>
-        <Button
-          variant="default"
-          size="sm"
-          onClick={() => onConfirm(hostPassword)}
-        >
-          {t("terminal.sudoPasswordPopupConfirm", "Insert")}
-        </Button>
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/host-manager/HostManagerApp.tsx

@@ -1,12 +0,0 @@
-import { HostManager } from "@/ui/desktop/apps/host-manager/hosts/HostManager.tsx";
-import React from "react";
-
-const HostManagerApp: React.FC = () => {
-  return (
-    <div className="w-full h-screen">
-      <HostManager isTopbarOpen={false} onSelectView={() => {}} />
-    </div>
-  );
-};
-
-export default HostManagerApp;

src/ui/desktop/apps/host-manager/credentials/CredentialEditor.tsx

@@ -1,625 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-
-import { Button } from "@/components/ui/button.tsx";
-import { Form } from "@/components/ui/form.tsx";
-import { ScrollArea } from "@/components/ui/scroll-area.tsx";
-import { Separator } from "@/components/ui/separator.tsx";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs.tsx";
-import { Alert, AlertDescription } from "@/components/ui/alert.tsx";
-import React, { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
-import { ArrowLeft } from "lucide-react";
-import {
-  createCredential,
-  updateCredential,
-  getCredentials,
-  getCredentialDetails,
-  detectKeyType,
-  detectPublicKeyType,
-} from "@/ui/main-axios.ts";
-import { useTranslation } from "react-i18next";
-import { oneDark } from "@codemirror/theme-one-dark";
-import { githubLight } from "@uiw/codemirror-theme-github";
-import { useTheme } from "@/components/theme-provider.tsx";
-import type {
-  Credential,
-  CredentialEditorProps,
-  CredentialData,
-} from "../../../../../types";
-import { CredentialGeneralTab } from "./tabs/CredentialGeneralTab";
-import { CredentialAuthenticationTab } from "./tabs/CredentialAuthenticationTab";
-import { SimpleLoader } from "@/ui/desktop/navigation/animations/SimpleLoader.tsx";
-
-export function CredentialEditor({
-  editingCredential,
-  onFormSubmit,
-  onBack,
-}: CredentialEditorProps) {
-  const { t } = useTranslation();
-  const { theme: appTheme } = useTheme();
-
-  const isDarkMode =
-    appTheme === "dark" ||
-    (appTheme === "system" &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches);
-  const editorTheme = isDarkMode ? oneDark : githubLight;
-  const [, setCredentials] = useState<Credential[]>([]);
-  const [folders, setFolders] = useState<string[]>([]);
-  const [, setLoading] = useState(true);
-  const [fullCredentialDetails, setFullCredentialDetails] =
-    useState<Credential | null>(null);
-
-  const [authTab, setAuthTab] = useState<"password" | "key">("password");
-  const [detectedKeyType, setDetectedKeyType] = useState<string | null>(null);
-  const [keyDetectionLoading, setKeyDetectionLoading] = useState(false);
-  const keyDetectionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const [activeTab, setActiveTab] = useState("general");
-  const [formError, setFormError] = useState<string | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const [detectedPublicKeyType, setDetectedPublicKeyType] = useState<
-    string | null
-  >(null);
-  const [publicKeyDetectionLoading, setPublicKeyDetectionLoading] =
-    useState(false);
-  const publicKeyDetectionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    setFormError(null);
-  }, [activeTab]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true);
-        const credentialsData = await getCredentials();
-        setCredentials(credentialsData);
-
-        const uniqueFolders = [
-          ...new Set(
-            credentialsData
-              .filter(
-                (credential) =>
-                  credential.folder && credential.folder.trim() !== "",
-              )
-              .map((credential) => credential.folder!),
-          ),
-        ].sort() as string[];
-
-        setFolders(uniqueFolders);
-      } catch {
-        // Keep the editor usable even if credentials cannot be loaded.
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  useEffect(() => {
-    const fetchCredentialDetails = async () => {
-      if (editingCredential) {
-        try {
-          const fullDetails = await getCredentialDetails(editingCredential.id);
-          setFullCredentialDetails(fullDetails);
-        } catch {
-          toast.error(t("credentials.failedToFetchCredentialDetails"));
-        }
-      } else {
-        setFullCredentialDetails(null);
-      }
-    };
-
-    fetchCredentialDetails();
-  }, [editingCredential, t]);
-
-  const formSchema = z
-    .object({
-      name: z.string().min(1),
-      description: z.string().optional(),
-      folder: z.string().optional(),
-      tags: z.array(z.string().min(1)).default([]),
-      authType: z.enum(["password", "key"]),
-      username: z.string().optional(),
-      password: z.string().optional(),
-      key: z.any().optional().nullable(),
-      publicKey: z.string().optional(),
-      keyPassword: z.string().optional(),
-      keyType: z
-        .enum([
-          "auto",
-          "ssh-rsa",
-          "ssh-ed25519",
-          "ecdsa-sha2-nistp256",
-          "ecdsa-sha2-nistp384",
-          "ecdsa-sha2-nistp521",
-          "ssh-dss",
-          "ssh-rsa-sha2-256",
-          "ssh-rsa-sha2-512",
-        ])
-        .optional(),
-    })
-    .superRefine((data, ctx) => {
-      if (data.authType === "password") {
-        if (!data.password || data.password.trim() === "") {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: t("credentials.passwordRequired"),
-            path: ["password"],
-          });
-        }
-      } else if (data.authType === "key") {
-        if (!data.key && !editingCredential) {
-          ctx.addIssue({
-            code: z.ZodIssueCode.custom,
-            message: t("credentials.sshKeyRequired"),
-            path: ["key"],
-          });
-        }
-      }
-    });
-
-  type FormData = z.infer<typeof formSchema>;
-
-  const form = useForm<FormData>({
-    resolver: zodResolver(formSchema) as unknown as Parameters<
-      typeof useForm<FormData>
-    >[0]["resolver"],
-    mode: "all",
-    defaultValues: {
-      name: "",
-      description: "",
-      folder: "",
-      tags: [],
-      authType: "password",
-      username: "",
-      password: "",
-      key: null,
-      publicKey: "",
-      keyPassword: "",
-      keyType: "auto",
-    },
-  });
-
-  const watchedFields = form.watch();
-
-  const isFormValid = React.useMemo(() => {
-    const values = form.getValues();
-
-    if (!values.name) return false;
-
-    if (authTab === "password") {
-      return !!(values.password && values.password.trim() !== "");
-    } else if (authTab === "key") {
-      if (editingCredential) {
-        return true;
-      }
-      return !!values.key;
-    }
-
-    return false;
-  }, [watchedFields, authTab, editingCredential]);
-
-  useEffect(() => {
-    const updateAuthFields = async () => {
-      form.setValue("authType", authTab, { shouldValidate: true });
-
-      if (authTab === "password") {
-        form.setValue("key", null, { shouldValidate: true });
-        form.setValue("publicKey", "", { shouldValidate: true });
-        form.setValue("keyPassword", "", { shouldValidate: true });
-        form.setValue("keyType", "auto", { shouldValidate: true });
-      } else if (authTab === "key") {
-        form.setValue("password", "", { shouldValidate: true });
-      }
-
-      await form.trigger();
-    };
-
-    updateAuthFields();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [authTab]);
-
-  useEffect(() => {
-    if (editingCredential && fullCredentialDetails) {
-      const defaultAuthType = fullCredentialDetails.authType;
-      setAuthTab(defaultAuthType);
-
-      setTimeout(() => {
-        const formData = {
-          name: fullCredentialDetails.name || "",
-          description: fullCredentialDetails.description || "",
-          folder: fullCredentialDetails.folder || "",
-          tags: fullCredentialDetails.tags || [],
-          authType: defaultAuthType as "password" | "key",
-          username: fullCredentialDetails.username || "",
-          password: "",
-          key: null,
-          publicKey: "",
-          keyPassword: "",
-          keyType: "auto" as const,
-        };
-
-        if (defaultAuthType === "password") {
-          formData.password = fullCredentialDetails.password || "";
-        } else if (defaultAuthType === "key") {
-          formData.key = fullCredentialDetails.key || "";
-          formData.publicKey = fullCredentialDetails.publicKey || "";
-          formData.keyPassword = fullCredentialDetails.keyPassword || "";
-          formData.keyType =
-            (fullCredentialDetails.keyType as string) || ("auto" as const);
-        }
-
-        form.reset(formData);
-        setTagInput("");
-      }, 100);
-    } else if (!editingCredential) {
-      setAuthTab("password");
-      form.reset({
-        name: "",
-        description: "",
-        folder: "",
-        tags: [],
-        authType: "password",
-        username: "",
-        password: "",
-        key: null,
-        publicKey: "",
-        keyPassword: "",
-        keyType: "auto",
-      });
-      setTagInput("");
-    }
-  }, [editingCredential?.id, fullCredentialDetails, form]);
-
-  useEffect(() => {
-    return () => {
-      if (keyDetectionTimeoutRef.current) {
-        clearTimeout(keyDetectionTimeoutRef.current);
-      }
-      if (publicKeyDetectionTimeoutRef.current) {
-        clearTimeout(publicKeyDetectionTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleKeyTypeDetection = async (
-    keyValue: string,
-    keyPassword?: string,
-  ) => {
-    if (!keyValue || keyValue.trim() === "") {
-      setDetectedKeyType(null);
-      return;
-    }
-
-    setKeyDetectionLoading(true);
-    try {
-      const result = await detectKeyType(keyValue, keyPassword);
-      if (result.success) {
-        setDetectedKeyType(result.keyType);
-      } else {
-        setDetectedKeyType("invalid");
-      }
-    } catch (error) {
-      setDetectedKeyType("error");
-      console.error("Key type detection error:", error);
-    } finally {
-      setKeyDetectionLoading(false);
-    }
-  };
-
-  const debouncedKeyDetection = (keyValue: string, keyPassword?: string) => {
-    if (keyDetectionTimeoutRef.current) {
-      clearTimeout(keyDetectionTimeoutRef.current);
-    }
-    keyDetectionTimeoutRef.current = setTimeout(() => {
-      handleKeyTypeDetection(keyValue, keyPassword);
-    }, 1000);
-  };
-
-  const handlePublicKeyTypeDetection = async (publicKeyValue: string) => {
-    if (!publicKeyValue || publicKeyValue.trim() === "") {
-      setDetectedPublicKeyType(null);
-      return;
-    }
-
-    setPublicKeyDetectionLoading(true);
-    try {
-      const result = await detectPublicKeyType(publicKeyValue);
-      if (result.success) {
-        setDetectedPublicKeyType(result.keyType);
-      } else {
-        setDetectedPublicKeyType("invalid");
-        console.warn("Public key detection failed:", result.error);
-      }
-    } catch (error) {
-      setDetectedPublicKeyType("error");
-      console.error("Public key type detection error:", error);
-    } finally {
-      setPublicKeyDetectionLoading(false);
-    }
-  };
-
-  const debouncedPublicKeyDetection = (publicKeyValue: string) => {
-    if (publicKeyDetectionTimeoutRef.current) {
-      clearTimeout(publicKeyDetectionTimeoutRef.current);
-    }
-    publicKeyDetectionTimeoutRef.current = setTimeout(() => {
-      handlePublicKeyTypeDetection(publicKeyValue);
-    }, 1000);
-  };
-
-  const getFriendlyKeyTypeName = (keyType: string): string => {
-    const keyTypeMap: Record<string, string> = {
-      "ssh-rsa": t("credentials.keyTypeRSA"),
-      "ssh-ed25519": t("credentials.keyTypeEd25519"),
-      "ecdsa-sha2-nistp256": t("credentials.keyTypeEcdsaP256"),
-      "ecdsa-sha2-nistp384": t("credentials.keyTypeEcdsaP384"),
-      "ecdsa-sha2-nistp521": t("credentials.keyTypeEcdsaP521"),
-      "ssh-dss": t("credentials.keyTypeDsa"),
-      "rsa-sha2-256": t("credentials.keyTypeRsaSha256"),
-      "rsa-sha2-512": t("credentials.keyTypeRsaSha512"),
-      invalid: t("credentials.invalidKey"),
-      error: t("credentials.detectionError"),
-      unknown: t("credentials.unknown"),
-    };
-    return keyTypeMap[keyType] || keyType;
-  };
-
-  const onSubmit = async (data: FormData) => {
-    try {
-      setIsSubmitting(true);
-      setFormError(null);
-
-      if (!data.name || data.name.trim() === "") {
-        data.name = data.username || "Unnamed Credential";
-      }
-
-      const submitData: CredentialData = {
-        name: data.name,
-        description: data.description,
-        folder: data.folder,
-        tags: data.tags,
-        authType: data.authType,
-        username: data.username || undefined,
-        keyType: data.keyType,
-      };
-
-      submitData.password = null;
-      submitData.key = null;
-      submitData.publicKey = null;
-      submitData.keyPassword = null;
-      submitData.keyType = null;
-
-      if (data.authType === "password") {
-        submitData.password = data.password;
-      } else if (data.authType === "key") {
-        submitData.key = data.key;
-        submitData.publicKey = data.publicKey;
-        submitData.keyPassword = data.keyPassword;
-        submitData.keyType = data.keyType;
-      }
-
-      if (editingCredential) {
-        await updateCredential(editingCredential.id, submitData);
-        toast.success(
-          t("credentials.credentialUpdatedSuccessfully", { name: data.name }),
-        );
-      } else {
-        await createCredential(submitData);
-        toast.success(
-          t("credentials.credentialAddedSuccessfully", { name: data.name }),
-        );
-      }
-
-      if (onFormSubmit) {
-        onFormSubmit();
-      }
-
-      window.dispatchEvent(new CustomEvent("credentials:changed"));
-
-      form.reset();
-    } catch (error) {
-      console.error("Credential save error:", error);
-      if (error instanceof Error) {
-        toast.error(error.message);
-      } else {
-        toast.error(t("credentials.failedToSaveCredential"));
-      }
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleFormError = () => {
-    const errors = form.formState.errors;
-
-    if (
-      errors.name ||
-      errors.username ||
-      errors.description ||
-      errors.folder ||
-      errors.tags
-    ) {
-      setActiveTab("general");
-    } else if (
-      errors.password ||
-      errors.key ||
-      errors.publicKey ||
-      errors.keyPassword ||
-      errors.keyType
-    ) {
-      setActiveTab("authentication");
-    }
-  };
-
-  const [tagInput, setTagInput] = useState("");
-
-  const [folderDropdownOpen, setFolderDropdownOpen] = useState(false);
-  const folderInputRef = useRef<HTMLInputElement>(null);
-  const folderDropdownRef = useRef<HTMLDivElement>(null);
-
-  const folderValue = form.watch("folder");
-  const filteredFolders = React.useMemo(() => {
-    if (!folderValue) return folders;
-    return folders.filter((f) =>
-      f.toLowerCase().includes(folderValue.toLowerCase()),
-    );
-  }, [folderValue, folders]);
-
-  const handleFolderClick = (folder: string) => {
-    form.setValue("folder", folder);
-    setFolderDropdownOpen(false);
-  };
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        folderDropdownRef.current &&
-        !folderDropdownRef.current.contains(event.target as Node) &&
-        folderInputRef.current &&
-        !folderInputRef.current.contains(event.target as Node)
-      ) {
-        setFolderDropdownOpen(false);
-      }
-    }
-
-    if (folderDropdownOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [folderDropdownOpen]);
-
-  return (
-    <div
-      className="flex-1 flex flex-col h-full min-h-0 w-full relative"
-      key={editingCredential?.id || "new"}
-    >
-      <SimpleLoader
-        visible={isSubmitting}
-        message={
-          editingCredential
-            ? t("credentials.updatingCredential")
-            : t("credentials.savingCredential")
-        }
-        backgroundColor="var(--bg-base)"
-      />
-      <Form {...form}>
-        <form
-          onSubmit={form.handleSubmit(onSubmit, handleFormError)}
-          className="flex flex-col flex-1 min-h-0 h-full"
-        >
-          <ScrollArea className="flex-1 min-h-0 w-full my-1 pb-2">
-            {formError && (
-              <Alert variant="destructive" className="mb-4">
-                <AlertDescription>{formError}</AlertDescription>
-              </Alert>
-            )}
-            <div className="flex items-center gap-2 mb-3">
-              {onBack && (
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={onBack}
-                  className="flex-shrink-0"
-                >
-                  <ArrowLeft className="h-4 w-4 mr-2" />
-                  {t("common.back")}
-                </Button>
-              )}
-              <h3 className="text-lg font-semibold flex-shrink-0">
-                {editingCredential
-                  ? t("credentials.editCredential")
-                  : t("credentials.addCredential")}
-              </h3>
-            </div>
-            <Tabs
-              value={activeTab}
-              onValueChange={setActiveTab}
-              className="w-full"
-            >
-              <TabsList className="bg-button border border-edge-medium">
-                <TabsTrigger
-                  value="general"
-                  className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
-                >
-                  {t("credentials.general")}
-                </TabsTrigger>
-                <TabsTrigger
-                  value="authentication"
-                  className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
-                >
-                  {t("credentials.authentication")}
-                </TabsTrigger>
-              </TabsList>
-              <TabsContent value="general" className="pt-2">
-                <CredentialGeneralTab
-                  form={form}
-                  folders={folders}
-                  tagInput={tagInput}
-                  setTagInput={setTagInput}
-                  folderDropdownOpen={folderDropdownOpen}
-                  setFolderDropdownOpen={setFolderDropdownOpen}
-                  folderInputRef={folderInputRef}
-                  folderDropdownRef={folderDropdownRef}
-                  filteredFolders={filteredFolders}
-                  handleFolderClick={handleFolderClick}
-                />
-              </TabsContent>
-              <TabsContent value="authentication">
-                <CredentialAuthenticationTab
-                  form={form}
-                  authTab={authTab}
-                  setAuthTab={setAuthTab}
-                  detectedKeyType={detectedKeyType}
-                  setDetectedKeyType={setDetectedKeyType}
-                  keyDetectionLoading={keyDetectionLoading}
-                  setKeyDetectionLoading={setKeyDetectionLoading}
-                  detectedPublicKeyType={detectedPublicKeyType}
-                  setDetectedPublicKeyType={setDetectedPublicKeyType}
-                  publicKeyDetectionLoading={publicKeyDetectionLoading}
-                  setPublicKeyDetectionLoading={setPublicKeyDetectionLoading}
-                  keyDetectionTimeoutRef={keyDetectionTimeoutRef}
-                  publicKeyDetectionTimeoutRef={publicKeyDetectionTimeoutRef}
-                  editorTheme={editorTheme}
-                  debouncedKeyDetection={debouncedKeyDetection}
-                  debouncedPublicKeyDetection={debouncedPublicKeyDetection}
-                  getFriendlyKeyTypeName={getFriendlyKeyTypeName}
-                />
-              </TabsContent>
-            </Tabs>
-          </ScrollArea>
-          <footer className="shrink-0 w-full pb-0">
-            <Separator className="p-0.25" />
-            {!isSubmitting && (
-              <Button
-                className="translate-y-2"
-                type="submit"
-                variant="outline"
-                disabled={!isFormValid}
-              >
-                {editingCredential
-                  ? t("credentials.updateCredential")
-                  : t("credentials.addCredential")}
-              </Button>
-            )}
-          </footer>
-        </form>
-      </Form>
-    </div>
-  );
-}

src/ui/desktop/apps/host-manager/credentials/CredentialSelector.tsx

@@ -1,206 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { Button } from "@/components/ui/button.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { FormControl, FormItem, FormLabel } from "@/components/ui/form.tsx";
-import { getCredentials } from "@/ui/main-axios.ts";
-import { useTranslation } from "react-i18next";
-import type { Credential } from "../../../../../types";
-import { toast } from "sonner";
-
-interface CredentialSelectorProps {
-  value?: number | null;
-  onValueChange: (credentialId: number | null) => void;
-  onCredentialSelect?: (credential: Credential | null) => void;
-}
-
-export function CredentialSelector({
-  value,
-  onValueChange,
-  onCredentialSelect,
-}: CredentialSelectorProps) {
-  const { t } = useTranslation();
-  const [credentials, setCredentials] = useState<Credential[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [dropdownOpen, setDropdownOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const fetchCredentials = async () => {
-      try {
-        setLoading(true);
-        const data = await getCredentials();
-        const credentialsArray = Array.isArray(data)
-          ? data
-          : data.credentials || data.data || [];
-        setCredentials(credentialsArray);
-      } catch {
-        toast.error(t("credentials.failedToFetchCredentials"));
-        setCredentials([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchCredentials();
-  }, []);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node) &&
-        buttonRef.current &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
-        setDropdownOpen(false);
-      }
-    }
-
-    if (dropdownOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [dropdownOpen]);
-
-  const selectedCredential = credentials.find((c) => c.id === value);
-
-  const filteredCredentials = credentials.filter((credential) => {
-    if (!searchQuery) return true;
-    const searchLower = searchQuery.toLowerCase();
-    return (
-      credential.name.toLowerCase().includes(searchLower) ||
-      credential.username.toLowerCase().includes(searchLower) ||
-      (credential.folder &&
-        credential.folder.toLowerCase().includes(searchLower))
-    );
-  });
-
-  const handleCredentialSelect = (credential: Credential) => {
-    onValueChange(credential.id);
-    if (onCredentialSelect) {
-      onCredentialSelect(credential);
-    }
-    setDropdownOpen(false);
-    setSearchQuery("");
-  };
-
-  return (
-    <FormItem>
-      <FormLabel>{t("hosts.selectCredential")}</FormLabel>
-      <FormControl>
-        <div className="relative">
-          <Button
-            ref={buttonRef}
-            type="button"
-            variant="outline"
-            className="w-full justify-between text-left rounded-lg px-3 py-2 bg-muted/50 focus:bg-background focus:ring-1 focus:ring-ring border border-border text-foreground transition-all duration-200"
-            onClick={() => setDropdownOpen(!dropdownOpen)}
-          >
-            {loading ? (
-              t("common.loading")
-            ) : value === "existing_credential" ? (
-              <div className="flex items-center justify-between w-full">
-                <div>
-                  <span className="font-medium">
-                    {t("hosts.existingCredential")}
-                  </span>
-                </div>
-              </div>
-            ) : selectedCredential ? (
-              <div className="flex items-center justify-between w-full">
-                <div>
-                  <span className="font-medium">{selectedCredential.name}</span>
-                  <span className="text-sm text-muted-foreground ml-2">
-                    ({selectedCredential.username} •{" "}
-                    {selectedCredential.authType})
-                  </span>
-                </div>
-              </div>
-            ) : (
-              t("hosts.selectCredentialPlaceholder")
-            )}
-            <svg
-              className="h-4 w-4"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M19 9l-7 7-7-7"
-              />
-            </svg>
-          </Button>
-
-          {dropdownOpen && (
-            <div
-              ref={dropdownRef}
-              className="absolute top-full left-0 z-50 mt-1 w-full bg-card border border-border rounded-lg shadow-lg max-h-80 overflow-hidden backdrop-blur-sm"
-            >
-              <div className="p-2 border-b border-border">
-                <Input
-                  placeholder={t("credentials.searchCredentials")}
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="h-8"
-                />
-              </div>
-
-              <div className="max-h-60 overflow-y-auto thin-scrollbar p-2">
-                {loading ? (
-                  <div className="p-3 text-center text-sm text-muted-foreground">
-                    {t("common.loading")}
-                  </div>
-                ) : filteredCredentials.length === 0 ? (
-                  <div className="p-3 text-center text-sm text-muted-foreground">
-                    {searchQuery
-                      ? t("credentials.noCredentialsMatchFilters")
-                      : t("credentials.noCredentialsYet")}
-                  </div>
-                ) : (
-                  <div className="grid grid-cols-1 gap-2.5">
-                    {filteredCredentials.map((credential) => (
-                      <Button
-                        key={credential.id}
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className={`w-full justify-start text-left rounded-lg px-3 py-7 hover:bg-muted focus:bg-muted focus:outline-none transition-colors duration-200 ${
-                          credential.id === value ? "bg-muted" : ""
-                        }`}
-                        onClick={() => handleCredentialSelect(credential)}
-                      >
-                        <div className="w-full">
-                          <div className="flex items-center justify-between">
-                            <span className="font-medium">
-                              {credential.name}
-                            </span>
-                          </div>
-                          <div className="text-xs text-muted-foreground mt-0.5">
-                            {credential.username} • {credential.authType}
-                            {credential.description &&
-                              ` • ${credential.description}`}
-                          </div>
-                        </div>
-                      </Button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-      </FormControl>
-    </FormItem>
-  );
-}

src/ui/desktop/apps/host-manager/credentials/CredentialViewer.tsx

@@ -1,528 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button.tsx";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card.tsx";
-import { Badge } from "@/components/ui/badge.tsx";
-import { Separator } from "@/components/ui/separator.tsx";
-import { ScrollArea } from "@/components/ui/scroll-area.tsx";
-import {
-  Sheet,
-  SheetContent,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet.tsx";
-import {
-  Key,
-  User,
-  Calendar,
-  Hash,
-  Folder,
-  Edit3,
-  Copy,
-  Shield,
-  Clock,
-  Server,
-  Eye,
-  EyeOff,
-  AlertTriangle,
-  CheckCircle,
-  FileText,
-} from "lucide-react";
-import { getCredentialDetails, getCredentialHosts } from "@/ui/main-axios.ts";
-import { toast } from "sonner";
-import { useTranslation } from "react-i18next";
-import type {
-  Credential,
-  HostInfo,
-  CredentialViewerProps,
-} from "../../../types/index.js";
-
-const CredentialViewer: React.FC<CredentialViewerProps> = ({
-  credential,
-  onClose,
-  onEdit,
-}) => {
-  const { t } = useTranslation();
-  const [credentialDetails, setCredentialDetails] = useState<Credential | null>(
-    null,
-  );
-  const [hostsUsing, setHostsUsing] = useState<HostInfo[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [showSensitive, setShowSensitive] = useState<Record<string, boolean>>(
-    {},
-  );
-  const [activeTab, setActiveTab] = useState<"overview" | "security" | "usage">(
-    "overview",
-  );
-
-  useEffect(() => {
-    fetchCredentialDetails();
-    fetchHostsUsing();
-  }, [credential.id]);
-
-  const fetchCredentialDetails = async () => {
-    try {
-      const response = await getCredentialDetails(credential.id);
-      setCredentialDetails(response);
-    } catch {
-      toast.error(t("credentials.failedToFetchCredentialDetails"));
-    }
-  };
-
-  const fetchHostsUsing = async () => {
-    try {
-      const response = await getCredentialHosts(credential.id);
-      setHostsUsing(response);
-    } catch {
-      toast.error(t("credentials.failedToFetchHostsUsing"));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const toggleSensitiveVisibility = (field: string) => {
-    setShowSensitive((prev) => ({
-      ...prev,
-      [field]: !prev[field],
-    }));
-  };
-
-  const copyToClipboard = async (text: string, fieldName: string) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      toast.success(t("copiedToClipboard", { field: fieldName }));
-    } catch {
-      toast.error(t("credentials.failedToCopy"));
-    }
-  };
-
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleString();
-  };
-
-  const getAuthIcon = (authType: string) => {
-    return authType === "password" ? (
-      <Key className="h-5 w-5 text-foreground-subtle" />
-    ) : (
-      <Shield className="h-5 w-5 text-foreground-subtle" />
-    );
-  };
-
-  const renderSensitiveField = (
-    value: string | undefined,
-    fieldName: string,
-    label: string,
-    isMultiline = false,
-  ) => {
-    if (!value) return null;
-
-    const isVisible = showSensitive[fieldName];
-
-    return (
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <label className="text-sm font-medium text-foreground-secondary">
-            {label}
-          </label>
-          <div className="flex items-center space-x-2">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => toggleSensitiveVisibility(fieldName)}
-            >
-              {isVisible ? (
-                <EyeOff className="h-4 w-4" />
-              ) : (
-                <Eye className="h-4 w-4" />
-              )}
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => copyToClipboard(value, label)}
-            >
-              <Copy className="h-4 w-4" />
-            </Button>
-          </div>
-        </div>
-        <div
-          className={`p-3 rounded-md bg-surface ${isMultiline ? "" : "min-h-[2.5rem]"}`}
-        >
-          {isVisible ? (
-            <pre
-              className={`text-sm ${isMultiline ? "whitespace-pre-wrap" : "whitespace-nowrap"} font-mono`}
-            >
-              {value}
-            </pre>
-          ) : (
-            <div className="text-sm text-foreground-subtle">
-              {"•".repeat(isMultiline ? 50 : 20)}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  if (loading || !credentialDetails) {
-    return (
-      <Sheet open={true} onOpenChange={onClose}>
-        <SheetContent className="w-[600px] max-w-[50vw]">
-          <div className="flex items-center justify-center h-64">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground-subtle"></div>
-          </div>
-        </SheetContent>
-      </Sheet>
-    );
-  }
-
-  return (
-    <Sheet open={true} onOpenChange={onClose}>
-      <SheetContent className="w-[600px] max-w-[50vw] overflow-y-auto thin-scrollbar">
-        <SheetHeader className="space-y-6 pb-8">
-          <SheetTitle className="flex items-center space-x-4">
-            <div className="p-2 rounded-lg bg-surface">
-              {getAuthIcon(credentialDetails.authType)}
-            </div>
-            <div className="flex-1">
-              <div className="text-xl font-semibold">
-                {credentialDetails.name}
-              </div>
-              <div className="text-sm font-normal text-foreground-subtle mt-1">
-                {credentialDetails.description}
-              </div>
-            </div>
-            <div className="flex items-center space-x-2">
-              <Badge variant="outline" className="text-foreground-subtle">
-                {credentialDetails.authType}
-              </Badge>
-              {credentialDetails.keyType && (
-                <Badge
-                  variant="secondary"
-                  className="bg-surface text-foreground-secondary"
-                >
-                  {credentialDetails.keyType}
-                </Badge>
-              )}
-            </div>
-          </SheetTitle>
-        </SheetHeader>
-
-        <div className="space-y-10">
-          <div className="flex space-x-2 p-2 bg-surface border border-border rounded-lg">
-            <Button
-              variant={activeTab === "overview" ? "default" : "ghost"}
-              size="sm"
-              onClick={() => setActiveTab("overview")}
-              className="flex-1 h-10"
-            >
-              <FileText className="h-4 w-4 mr-2" />
-              {t("credentials.overview")}
-            </Button>
-            <Button
-              variant={activeTab === "security" ? "default" : "ghost"}
-              size="sm"
-              onClick={() => setActiveTab("security")}
-              className="flex-1 h-10"
-            >
-              <Shield className="h-4 w-4 mr-2" />
-              {t("credentials.security")}
-            </Button>
-            <Button
-              variant={activeTab === "usage" ? "default" : "ghost"}
-              size="sm"
-              onClick={() => setActiveTab("usage")}
-              className="flex-1 h-10"
-            >
-              <Server className="h-4 w-4 mr-2" />
-              {t("credentials.usage")}
-            </Button>
-          </div>
-
-          {activeTab === "overview" && (
-            <div className="grid gap-10 lg:grid-cols-2">
-              <Card className="border-border">
-                <CardHeader className="pb-8">
-                  <CardTitle className="text-lg font-semibold">
-                    {t("credentials.basicInformation")}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-8">
-                  <div className="flex items-center space-x-5">
-                    <div className="p-2 rounded-lg bg-surface">
-                      <User className="h-4 w-4 text-foreground-subtle" />
-                    </div>
-                    <div>
-                      <div className="text-sm text-foreground-subtle">
-                        {t("common.username")}
-                      </div>
-                      <div className="font-medium text-foreground">
-                        {credentialDetails.username}
-                      </div>
-                    </div>
-                  </div>
-
-                  {credentialDetails.folder && (
-                    <div className="flex items-center space-x-4">
-                      <Folder className="h-4 w-4 text-foreground-subtle" />
-                      <div>
-                        <div className="text-sm text-foreground-subtle">
-                          {t("common.folder")}
-                        </div>
-                        <div className="font-medium">
-                          {credentialDetails.folder}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-
-                  {credentialDetails.tags.length > 0 && (
-                    <div className="flex items-start space-x-4">
-                      <Hash className="h-4 w-4 text-foreground-subtle mt-1" />
-                      <div className="flex-1">
-                        <div className="text-sm text-foreground-subtle mb-3">
-                          {t("hosts.tags")}
-                        </div>
-                        <div className="flex flex-wrap gap-2">
-                          {credentialDetails.tags.map((tag, index) => (
-                            <Badge
-                              key={index}
-                              variant="outline"
-                              className="text-xs"
-                            >
-                              {tag}
-                            </Badge>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-
-                  <Separator />
-
-                  <div className="flex items-center space-x-4">
-                    <Calendar className="h-4 w-4 text-foreground-subtle" />
-                    <div>
-                      <div className="text-sm text-foreground-subtle">
-                        {t("credentials.created")}
-                      </div>
-                      <div className="font-medium">
-                        {formatDate(credentialDetails.createdAt)}
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="flex items-center space-x-4">
-                    <Calendar className="h-4 w-4 text-foreground-subtle" />
-                    <div>
-                      <div className="text-sm text-foreground-subtle">
-                        {t("credentials.lastModified")}
-                      </div>
-                      <div className="font-medium">
-                        {formatDate(credentialDetails.updatedAt)}
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle className="text-lg">
-                    {t("credentials.usageStatistics")}
-                  </CardTitle>
-                </CardHeader>
-                <CardContent className="space-y-6">
-                  <div className="text-center p-6 bg-surface rounded-lg">
-                    <div className="text-3xl font-bold text-foreground-subtle">
-                      {credentialDetails.usageCount}
-                    </div>
-                    <div className="text-sm text-foreground-subtle">
-                      {t("credentials.timesUsed")}
-                    </div>
-                  </div>
-
-                  {credentialDetails.lastUsed && (
-                    <div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
-                      <Clock className="h-5 w-5 text-foreground-subtle" />
-                      <div>
-                        <div className="text-sm text-foreground-subtle">
-                          {t("credentials.lastUsed")}
-                        </div>
-                        <div className="font-medium">
-                          {formatDate(credentialDetails.lastUsed)}
-                        </div>
-                      </div>
-                    </div>
-                  )}
-
-                  <div className="flex items-center space-x-4 p-4 bg-surface rounded-lg">
-                    <Server className="h-5 w-5 text-foreground-subtle" />
-                    <div>
-                      <div className="text-sm text-foreground-subtle">
-                        {t("credentials.connectedHosts")}
-                      </div>
-                      <div className="font-medium">{hostsUsing.length}</div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
-          )}
-
-          {activeTab === "security" && (
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-lg flex items-center space-x-2">
-                  <Shield className="h-5 w-5 text-foreground-subtle" />
-                  <span>{t("credentials.securityDetails")}</span>
-                </CardTitle>
-                <CardDescription>
-                  {t("credentials.securityDetailsDescription")}
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-6">
-                <div className="flex items-center space-x-4 p-6 bg-surface rounded-lg">
-                  <CheckCircle className="h-6 w-6 text-foreground-subtle" />
-                  <div>
-                    <div className="font-medium text-foreground">
-                      {t("credentials.credentialSecured")}
-                    </div>
-                    <div className="text-sm text-foreground-secondary">
-                      {t("credentials.credentialSecuredDescription")}
-                    </div>
-                  </div>
-                </div>
-
-                {credentialDetails.authType === "password" && (
-                  <div>
-                    <h3 className="font-semibold mb-4">
-                      {t("credentials.passwordAuthentication")}
-                    </h3>
-                    {renderSensitiveField(
-                      credentialDetails.password,
-                      "password",
-                      t("common.password"),
-                    )}
-                  </div>
-                )}
-
-                {credentialDetails.authType === "key" && (
-                  <div className="space-y-6">
-                    <h3 className="font-semibold mb-2">
-                      {t("credentials.keyAuthentication")}
-                    </h3>
-
-                    <div className="grid gap-6 md:grid-cols-2">
-                      <div>
-                        <div className="text-sm font-medium text-foreground-secondary mb-3">
-                          {t("credentials.keyType")}
-                        </div>
-                        <Badge variant="outline" className="text-sm">
-                          {credentialDetails.keyType?.toUpperCase() ||
-                            t("unknown").toUpperCase()}
-                        </Badge>
-                      </div>
-                    </div>
-
-                    {renderSensitiveField(
-                      credentialDetails.key,
-                      "key",
-                      t("credentials.privateKey"),
-                      true,
-                    )}
-
-                    {credentialDetails.keyPassword &&
-                      renderSensitiveField(
-                        credentialDetails.keyPassword,
-                        "keyPassword",
-                        t("credentials.keyPassphrase"),
-                      )}
-                  </div>
-                )}
-
-                <div className="flex items-start space-x-4 p-6 bg-surface rounded-lg">
-                  <AlertTriangle className="h-5 w-5 text-foreground-subtle mt-0.5" />
-                  <div className="text-sm">
-                    <div className="font-medium text-foreground mb-2">
-                      {t("credentials.securityReminder")}
-                    </div>
-                    <div className="text-foreground-secondary">
-                      {t("credentials.securityReminderText")}
-                    </div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          )}
-
-          {activeTab === "usage" && (
-            <Card>
-              <CardHeader>
-                <CardTitle className="text-lg flex items-center space-x-2">
-                  <Server className="h-5 w-5 text-foreground-subtle" />
-                  <span>{t("credentials.hostsUsingCredential")}</span>
-                  <Badge variant="secondary">{hostsUsing.length}</Badge>
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                {hostsUsing.length === 0 ? (
-                  <div className="text-center py-10 text-foreground-subtle">
-                    <Server className="h-12 w-12 mx-auto mb-6 text-foreground-subtle" />
-                    <p>{t("credentials.noHostsUsingCredential")}</p>
-                  </div>
-                ) : (
-                  <ScrollArea className="h-64">
-                    <div className="space-y-3">
-                      {hostsUsing.map((host) => (
-                        <div
-                          key={host.id}
-                          className="flex items-center justify-between p-4 border rounded-lg hover:bg-surface"
-                        >
-                          <div className="flex items-center space-x-3">
-                            <div className="p-2 bg-surface rounded">
-                              <Server className="h-4 w-4 text-foreground-subtle" />
-                            </div>
-                            <div>
-                              <div className="font-medium">
-                                {host.name || `${host.ip}:${host.port}`}
-                              </div>
-                              <div className="text-sm text-foreground-subtle">
-                                {host.ip}:{host.port}
-                              </div>
-                            </div>
-                          </div>
-                          <div className="text-right text-sm text-foreground-subtle">
-                            {formatDate(host.createdAt)}
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </ScrollArea>
-                )}
-              </CardContent>
-            </Card>
-          )}
-        </div>
-
-        <SheetFooter>
-          <Button variant="outline" onClick={onClose}>
-            {t("common.close")}
-          </Button>
-          <Button onClick={onEdit}>
-            <Edit3 className="h-4 w-4 mr-2" />
-            {t("credentials.editCredential")}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
-  );
-};
-
-export default CredentialViewer;

src/ui/desktop/apps/host-manager/credentials/tabs/CredentialAuthenticationTab.tsx

@@ -1,514 +0,0 @@
-import {
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-} from "@/components/ui/form.tsx";
-import { PasswordInput } from "@/components/ui/password-input.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs.tsx";
-import { Controller } from "react-hook-form";
-import CodeMirror from "@uiw/react-codemirror";
-import { EditorView } from "@codemirror/view";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import {
-  generateKeyPair,
-  generatePublicKeyFromPrivate,
-} from "@/ui/main-axios.ts";
-import type { CredentialAuthenticationTabProps } from "./shared/tab-types";
-
-export function CredentialAuthenticationTab({
-  form,
-  authTab,
-  setAuthTab,
-  detectedKeyType,
-  detectedPublicKeyType,
-  keyDetectionLoading,
-  publicKeyDetectionLoading,
-  editorTheme,
-  debouncedKeyDetection,
-  debouncedPublicKeyDetection,
-  getFriendlyKeyTypeName,
-}: CredentialAuthenticationTabProps) {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <FormLabel className="mb-2 font-bold">
-        {t("credentials.authentication")}
-      </FormLabel>
-      <Tabs
-        value={authTab}
-        onValueChange={(value) => {
-          const newAuthType = value as "password" | "key";
-          setAuthTab(newAuthType);
-          form.setValue("authType", newAuthType);
-
-          form.setValue("password", "");
-          form.setValue("key", null);
-          form.setValue("keyPassword", "");
-          form.setValue("keyType", "auto");
-        }}
-        className="flex-1 flex flex-col h-full min-h-0"
-      >
-        <TabsList className="bg-button border border-edge-medium">
-          <TabsTrigger
-            value="password"
-            className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
-          >
-            {t("credentials.password")}
-          </TabsTrigger>
-          <TabsTrigger
-            value="key"
-            className="bg-button data-[state=active]:bg-elevated data-[state=active]:border data-[state=active]:border-edge-medium"
-          >
-            {t("credentials.key")}
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="password">
-          <FormField
-            control={form.control}
-            name="password"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t("credentials.password")}</FormLabel>
-                <FormControl>
-                  <PasswordInput
-                    placeholder={t("placeholders.password")}
-                    {...field}
-                  />
-                </FormControl>
-              </FormItem>
-            )}
-          />
-        </TabsContent>
-        <TabsContent value="key">
-          <div className="mt-2">
-            <div className="mb-3 p-3 border border-muted rounded-md">
-              <FormLabel className="mb-2 font-bold block">
-                {t("credentials.generateKeyPair")}
-              </FormLabel>
-
-              <div className="mb-2">
-                <div className="text-sm text-muted-foreground">
-                  {t("credentials.generateKeyPairDescription")}
-                </div>
-              </div>
-
-              <div className="flex gap-2 flex-wrap">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={async () => {
-                    try {
-                      const currentKeyPassword = form.watch("keyPassword");
-                      const result = await generateKeyPair(
-                        "ssh-ed25519",
-                        undefined,
-                        currentKeyPassword,
-                      );
-
-                      if (result.success) {
-                        form.setValue("key", result.privateKey);
-                        form.setValue("publicKey", result.publicKey);
-                        debouncedKeyDetection(
-                          result.privateKey,
-                          currentKeyPassword,
-                        );
-                        debouncedPublicKeyDetection(result.publicKey);
-                        toast.success(
-                          t("credentials.keyPairGeneratedSuccessfully", {
-                            keyType: "Ed25519",
-                          }),
-                        );
-                      } else {
-                        toast.error(
-                          result.error ||
-                            t("credentials.failedToGenerateKeyPair"),
-                        );
-                      }
-                    } catch (error) {
-                      console.error(
-                        "Failed to generate Ed25519 key pair:",
-                        error,
-                      );
-                      toast.error(t("credentials.failedToGenerateKeyPair"));
-                    }
-                  }}
-                >
-                  {t("credentials.generateEd25519")}
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={async () => {
-                    try {
-                      const currentKeyPassword = form.watch("keyPassword");
-                      const result = await generateKeyPair(
-                        "ecdsa-sha2-nistp256",
-                        undefined,
-                        currentKeyPassword,
-                      );
-
-                      if (result.success) {
-                        form.setValue("key", result.privateKey);
-                        form.setValue("publicKey", result.publicKey);
-                        debouncedKeyDetection(
-                          result.privateKey,
-                          currentKeyPassword,
-                        );
-                        debouncedPublicKeyDetection(result.publicKey);
-                        toast.success(
-                          t("credentials.keyPairGeneratedSuccessfully", {
-                            keyType: "ECDSA",
-                          }),
-                        );
-                      } else {
-                        toast.error(
-                          result.error ||
-                            t("credentials.failedToGenerateKeyPair"),
-                        );
-                      }
-                    } catch (error) {
-                      console.error(
-                        "Failed to generate ECDSA key pair:",
-                        error,
-                      );
-                      toast.error(t("credentials.failedToGenerateKeyPair"));
-                    }
-                  }}
-                >
-                  {t("credentials.generateECDSA")}
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={async () => {
-                    try {
-                      const currentKeyPassword = form.watch("keyPassword");
-                      const result = await generateKeyPair(
-                        "ssh-rsa",
-                        2048,
-                        currentKeyPassword,
-                      );
-
-                      if (result.success) {
-                        form.setValue("key", result.privateKey);
-                        form.setValue("publicKey", result.publicKey);
-                        debouncedKeyDetection(
-                          result.privateKey,
-                          currentKeyPassword,
-                        );
-                        debouncedPublicKeyDetection(result.publicKey);
-                        toast.success(
-                          t("credentials.keyPairGeneratedSuccessfully", {
-                            keyType: "RSA",
-                          }),
-                        );
-                      } else {
-                        toast.error(
-                          result.error ||
-                            t("credentials.failedToGenerateKeyPair"),
-                        );
-                      }
-                    } catch (error) {
-                      console.error("Failed to generate RSA key pair:", error);
-                      toast.error(t("credentials.failedToGenerateKeyPair"));
-                    }
-                  }}
-                >
-                  {t("credentials.generateRSA")}
-                </Button>
-              </div>
-            </div>
-            <div className="grid grid-cols-2 gap-3 items-start">
-              <Controller
-                control={form.control}
-                name="key"
-                render={({ field }) => (
-                  <FormItem className="mb-3 flex flex-col">
-                    <FormLabel className="mb-1 min-h-[20px]">
-                      {t("credentials.sshPrivateKey")}
-                    </FormLabel>
-                    <div className="mb-1">
-                      <div className="relative inline-block w-full">
-                        <input
-                          id="key-upload"
-                          type="file"
-                          accept="*,.pem,.key,.txt,.ppk"
-                          onChange={async (e) => {
-                            const file = e.target.files?.[0];
-                            if (file) {
-                              try {
-                                const fileContent = await file.text();
-                                field.onChange(fileContent);
-                                debouncedKeyDetection(
-                                  fileContent,
-                                  form.watch("keyPassword"),
-                                );
-                              } catch (error) {
-                                console.error(
-                                  "Failed to read uploaded file:",
-                                  error,
-                                );
-                              }
-                            }
-                          }}
-                          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">
-                            {t("credentials.uploadPrivateKeyFile")}
-                          </span>
-                        </Button>
-                      </div>
-                    </div>
-                    <FormControl>
-                      <CodeMirror
-                        value={
-                          typeof field.value === "string" ? field.value : ""
-                        }
-                        onChange={(value) => {
-                          field.onChange(value);
-                          debouncedKeyDetection(
-                            value,
-                            form.watch("keyPassword"),
-                          );
-                        }}
-                        placeholder={t("placeholders.pastePrivateKey")}
-                        theme={editorTheme}
-                        className="border border-input rounded-md overflow-hidden"
-                        minHeight="120px"
-                        basicSetup={{
-                          lineNumbers: true,
-                          foldGutter: false,
-                          dropCursor: false,
-                          allowMultipleSelections: false,
-                          highlightSelectionMatches: false,
-                          searchKeymap: false,
-                          scrollPastEnd: false,
-                        }}
-                        extensions={[
-                          EditorView.theme({
-                            ".cm-scroller": {
-                              overflow: "auto",
-                              scrollbarWidth: "thin",
-                              scrollbarColor:
-                                "var(--scrollbar-thumb) var(--scrollbar-track)",
-                            },
-                          }),
-                        ]}
-                      />
-                    </FormControl>
-                    {detectedKeyType && (
-                      <div className="text-sm mt-2">
-                        <span className="text-muted-foreground">
-                          {t("credentials.detectedKeyType")}:{" "}
-                        </span>
-                        <span
-                          className={`font-medium ${
-                            detectedKeyType === "invalid" ||
-                            detectedKeyType === "error"
-                              ? "text-destructive"
-                              : "text-green-600"
-                          }`}
-                        >
-                          {getFriendlyKeyTypeName(detectedKeyType)}
-                        </span>
-                        {keyDetectionLoading && (
-                          <span className="ml-2 text-muted-foreground">
-                            ({t("credentials.detectingKeyType")})
-                          </span>
-                        )}
-                      </div>
-                    )}
-                  </FormItem>
-                )}
-              />
-              <Controller
-                control={form.control}
-                name="publicKey"
-                render={({ field }) => (
-                  <FormItem className="mb-3 flex flex-col">
-                    <FormLabel className="mb-1 min-h-[20px]">
-                      {t("credentials.sshPublicKey")}
-                    </FormLabel>
-                    <div className="mb-1 flex gap-2">
-                      <div className="relative inline-block flex-1">
-                        <input
-                          id="public-key-upload"
-                          type="file"
-                          accept="*,.pub,.txt"
-                          onChange={async (e) => {
-                            const file = e.target.files?.[0];
-                            if (file) {
-                              try {
-                                const fileContent = await file.text();
-                                field.onChange(fileContent);
-                                debouncedPublicKeyDetection(fileContent);
-                              } catch (error) {
-                                console.error(
-                                  "Failed to read uploaded public key file:",
-                                  error,
-                                );
-                              }
-                            }
-                          }}
-                          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">
-                            {t("credentials.uploadPublicKeyFile")}
-                          </span>
-                        </Button>
-                      </div>
-                      <Button
-                        type="button"
-                        variant="outline"
-                        className="flex-shrink-0"
-                        onClick={async () => {
-                          const privateKey = form.watch("key");
-                          if (
-                            !privateKey ||
-                            typeof privateKey !== "string" ||
-                            !privateKey.trim()
-                          ) {
-                            toast.error(
-                              t("credentials.privateKeyRequiredForGeneration"),
-                            );
-                            return;
-                          }
-
-                          try {
-                            const keyPassword = form.watch("keyPassword");
-                            const result = await generatePublicKeyFromPrivate(
-                              privateKey,
-                              keyPassword,
-                            );
-
-                            if (result.success && result.publicKey) {
-                              field.onChange(result.publicKey);
-                              debouncedPublicKeyDetection(result.publicKey);
-
-                              toast.success(
-                                t("credentials.publicKeyGeneratedSuccessfully"),
-                              );
-                            } else {
-                              toast.error(
-                                result.error ||
-                                  t("credentials.failedToGeneratePublicKey"),
-                              );
-                            }
-                          } catch (error) {
-                            console.error(
-                              "Failed to generate public key:",
-                              error,
-                            );
-                            toast.error(
-                              t("credentials.failedToGeneratePublicKey"),
-                            );
-                          }
-                        }}
-                      >
-                        {t("credentials.generatePublicKey")}
-                      </Button>
-                    </div>
-                    <FormControl>
-                      <CodeMirror
-                        value={field.value || ""}
-                        onChange={(value) => {
-                          field.onChange(value);
-                          debouncedPublicKeyDetection(value);
-                        }}
-                        placeholder={t("placeholders.pastePublicKey")}
-                        theme={editorTheme}
-                        className="border border-input rounded-md overflow-hidden"
-                        minHeight="120px"
-                        basicSetup={{
-                          lineNumbers: true,
-                          foldGutter: false,
-                          dropCursor: false,
-                          allowMultipleSelections: false,
-                          highlightSelectionMatches: false,
-                          searchKeymap: false,
-                          scrollPastEnd: false,
-                        }}
-                        extensions={[
-                          EditorView.theme({
-                            ".cm-scroller": {
-                              overflow: "auto",
-                              scrollbarWidth: "thin",
-                              scrollbarColor:
-                                "var(--scrollbar-thumb) var(--scrollbar-track)",
-                            },
-                          }),
-                        ]}
-                      />
-                    </FormControl>
-                    {detectedPublicKeyType && field.value && (
-                      <div className="text-sm mt-2">
-                        <span className="text-muted-foreground">
-                          {t("credentials.detectedKeyType")}:{" "}
-                        </span>
-                        <span
-                          className={`font-medium ${
-                            detectedPublicKeyType === "invalid" ||
-                            detectedPublicKeyType === "error"
-                              ? "text-destructive"
-                              : "text-green-600"
-                          }`}
-                        >
-                          {getFriendlyKeyTypeName(detectedPublicKeyType)}
-                        </span>
-                        {publicKeyDetectionLoading && (
-                          <span className="ml-2 text-muted-foreground">
-                            ({t("credentials.detectingKeyType")})
-                          </span>
-                        )}
-                      </div>
-                    )}
-                  </FormItem>
-                )}
-              />
-            </div>
-            <div className="grid grid-cols-8 gap-3 mt-3">
-              <FormField
-                control={form.control}
-                name="keyPassword"
-                render={({ field }) => (
-                  <FormItem className="col-span-8">
-                    <FormLabel>{t("credentials.keyPassword")}</FormLabel>
-                    <FormControl>
-                      <PasswordInput
-                        placeholder={t("placeholders.keyPassword")}
-                        {...field}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-            </div>
-          </div>
-        </TabsContent>
-      </Tabs>
-    </>
-  );
-}

src/ui/desktop/apps/host-manager/credentials/tabs/CredentialGeneralTab.tsx

@@ -1,192 +0,0 @@
-import {
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-} from "@/components/ui/form.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Button } from "@/components/ui/button.tsx";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import type { CredentialGeneralTabProps } from "./shared/tab-types";
-
-export function CredentialGeneralTab({
-  form,
-  tagInput,
-  setTagInput,
-  folderDropdownOpen,
-  setFolderDropdownOpen,
-  folderInputRef,
-  folderDropdownRef,
-  filteredFolders,
-  handleFolderClick,
-}: CredentialGeneralTabProps) {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <FormLabel className="mb-2 font-bold">
-        {t("credentials.basicInformation")}
-      </FormLabel>
-      <div className="grid grid-cols-12 gap-3">
-        <FormField
-          control={form.control}
-          name="name"
-          render={({ field }) => (
-            <FormItem className="col-span-6">
-              <FormLabel>{t("credentials.credentialName")}</FormLabel>
-              <FormControl>
-                <Input
-                  placeholder={t("placeholders.credentialName")}
-                  {...field}
-                />
-              </FormControl>
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem className="col-span-6">
-              <FormLabel>{t("credentials.username")}</FormLabel>
-              <FormControl>
-                <Input placeholder={t("placeholders.username")} {...field} />
-              </FormControl>
-            </FormItem>
-          )}
-        />
-      </div>
-      <FormLabel className="mb-2 mt-4 font-bold">
-        {t("credentials.organization")}
-      </FormLabel>
-      <div className="grid grid-cols-26 gap-3">
-        <FormField
-          control={form.control}
-          name="description"
-          render={({ field }) => (
-            <FormItem className="col-span-10">
-              <FormLabel>{t("credentials.description")}</FormLabel>
-              <FormControl>
-                <Input placeholder={t("placeholders.description")} {...field} />
-              </FormControl>
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="folder"
-          render={({ field }) => (
-            <FormItem className="col-span-10 relative">
-              <FormLabel>{t("credentials.folder")}</FormLabel>
-              <FormControl>
-                <Input
-                  ref={folderInputRef}
-                  placeholder={t("placeholders.folder")}
-                  className="min-h-[40px]"
-                  autoComplete="off"
-                  value={field.value}
-                  onFocus={() => setFolderDropdownOpen(true)}
-                  onChange={(e) => {
-                    field.onChange(e);
-                    setFolderDropdownOpen(true);
-                  }}
-                />
-              </FormControl>
-              {folderDropdownOpen && filteredFolders.length > 0 && (
-                <div
-                  ref={folderDropdownRef}
-                  className="absolute top-full left-0 z-50 mt-1 w-full bg-canvas border border-input rounded-md shadow-lg max-h-40 overflow-y-auto thin-scrollbar p-1"
-                >
-                  <div className="grid grid-cols-1 gap-1 p-0">
-                    {filteredFolders.map((folder) => (
-                      <Button
-                        key={folder}
-                        type="button"
-                        variant="ghost"
-                        size="sm"
-                        className="w-full justify-start text-left rounded px-2 py-1.5 hover:bg-white/15 focus:bg-white/20 focus:outline-none"
-                        onClick={() => handleFolderClick(folder)}
-                      >
-                        {folder}
-                      </Button>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </FormItem>
-          )}
-        />
-
-        <FormField
-          control={form.control}
-          name="tags"
-          render={({ field }) => (
-            <FormItem className="col-span-10 overflow-visible">
-              <FormLabel>{t("credentials.tags")}</FormLabel>
-              <FormControl>
-                <div className="flex flex-wrap items-center gap-1 border border-input rounded-md px-3 py-2 bg-field focus-within:ring-2 ring-ring min-h-[40px]">
-                  {(field.value || []).map((tag: string, idx: number) => (
-                    <span
-                      key={`${tag}-${idx}`}
-                      className="flex items-center bg-surface text-foreground rounded-full px-2 py-0.5 text-xs"
-                    >
-                      {tag}
-                      <button
-                        type="button"
-                        className="ml-1 text-foreground-subtle hover:text-red-500 focus:outline-none"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          const newTags = (field.value || []).filter(
-                            (_: string, i: number) => i !== idx,
-                          );
-                          field.onChange(newTags);
-                        }}
-                      >
-                        ×
-                      </button>
-                    </span>
-                  ))}
-                  <input
-                    type="text"
-                    className="flex-1 min-w-[60px] border-none outline-none bg-transparent text-foreground placeholder:text-muted-foreground p-0 h-6 text-sm"
-                    value={tagInput}
-                    onChange={(e) => setTagInput(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === " " && tagInput.trim() !== "") {
-                        e.preventDefault();
-                        const currentTags = field.value || [];
-                        if (!currentTags.includes(tagInput.trim())) {
-                          field.onChange([...currentTags, tagInput.trim()]);
-                        }
-                        setTagInput("");
-                      } else if (e.key === "Enter" && tagInput.trim() !== "") {
-                        e.preventDefault();
-                        const currentTags = field.value || [];
-                        if (!currentTags.includes(tagInput.trim())) {
-                          field.onChange([...currentTags, tagInput.trim()]);
-                        }
-                        setTagInput("");
-                      } else if (
-                        e.key === "Backspace" &&
-                        tagInput === "" &&
-                        (field.value || []).length > 0
-                      ) {
-                        const currentTags = field.value || [];
-                        field.onChange(currentTags.slice(0, -1));
-                      }
-                    }}
-                    placeholder={t("credentials.addTagsSpaceToAdd")}
-                  />
-                </div>
-              </FormControl>
-            </FormItem>
-          )}
-        />
-      </div>
-    </>
-  );
-}

src/ui/desktop/apps/host-manager/credentials/tabs/shared/tab-types.ts

@@ -1,35 +0,0 @@
-import type { UseFormReturn } from "react-hook-form";
-import type React from "react";
-
-export interface CredentialGeneralTabProps {
-  form: UseFormReturn<FormData>;
-  folders: string[];
-  tagInput: string;
-  setTagInput: (value: string) => void;
-  folderDropdownOpen: boolean;
-  setFolderDropdownOpen: (value: boolean) => void;
-  folderInputRef: React.RefObject<HTMLInputElement>;
-  folderDropdownRef: React.RefObject<HTMLDivElement>;
-  filteredFolders: string[];
-  handleFolderClick: (folder: string) => void;
-}
-
-export interface CredentialAuthenticationTabProps {
-  form: UseFormReturn<FormData>;
-  authTab: "password" | "key";
-  setAuthTab: (value: "password" | "key") => void;
-  detectedKeyType: string | null;
-  setDetectedKeyType: (value: string | null) => void;
-  keyDetectionLoading: boolean;
-  setKeyDetectionLoading: (value: boolean) => void;
-  detectedPublicKeyType: string | null;
-  setDetectedPublicKeyType: (value: string | null) => void;
-  publicKeyDetectionLoading: boolean;
-  setPublicKeyDetectionLoading: (value: boolean) => void;
-  keyDetectionTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
-  publicKeyDetectionTimeoutRef: React.MutableRefObject<NodeJS.Timeout | null>;
-  editorTheme: unknown;
-  debouncedKeyDetection: (keyValue: string, keyPassword?: string) => void;
-  debouncedPublicKeyDetection: (publicKeyValue: string) => void;
-  getFriendlyKeyTypeName: (keyType: string) => string;
-}

src/ui/desktop/apps/host-manager/dialogs/FolderEditDialog.tsx

@@ -1,191 +0,0 @@
-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 { useTranslation } from "react-i18next";
-import {
-  Folder,
-  Server,
-  Cloud,
-  Database,
-  Box,
-  Package,
-  Layers,
-  Archive,
-  HardDrive,
-  Globe,
-} from "lucide-react";
-
-interface FolderEditDialogProps {
-  folderName: string;
-  currentColor?: string;
-  currentIcon?: string;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onSave: (color: string, icon: string) => Promise<void>;
-}
-
-const AVAILABLE_COLORS = [
-  { value: "#ef4444", label: "Red" },
-  { value: "#f97316", label: "Orange" },
-  { value: "#eab308", label: "Yellow" },
-  { value: "#22c55e", label: "Green" },
-  { value: "#3b82f6", label: "Blue" },
-  { value: "#a855f7", label: "Purple" },
-  { value: "#ec4899", label: "Pink" },
-  { value: "#6b7280", label: "Gray" },
-];
-
-const AVAILABLE_ICONS = [
-  { value: "Folder", label: "Folder", Icon: Folder },
-  { value: "Server", label: "Server", Icon: Server },
-  { value: "Cloud", label: "Cloud", Icon: Cloud },
-  { value: "Database", label: "Database", Icon: Database },
-  { value: "Box", label: "Box", Icon: Box },
-  { value: "Package", label: "Package", Icon: Package },
-  { value: "Layers", label: "Layers", Icon: Layers },
-  { value: "Archive", label: "Archive", Icon: Archive },
-  { value: "HardDrive", label: "HardDrive", Icon: HardDrive },
-  { value: "Globe", label: "Globe", Icon: Globe },
-];
-
-export function FolderEditDialog({
-  folderName,
-  currentColor,
-  currentIcon,
-  open,
-  onOpenChange,
-  onSave,
-}: FolderEditDialogProps) {
-  const { t } = useTranslation();
-  const [selectedColor, setSelectedColor] = useState(
-    currentColor || AVAILABLE_COLORS[0].value,
-  );
-  const [selectedIcon, setSelectedIcon] = useState(
-    currentIcon || AVAILABLE_ICONS[0].value,
-  );
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (open) {
-      setSelectedColor(currentColor || AVAILABLE_COLORS[0].value);
-      setSelectedIcon(currentIcon || AVAILABLE_ICONS[0].value);
-    }
-  }, [open, currentColor, currentIcon]);
-
-  const handleSave = async () => {
-    setLoading(true);
-    try {
-      await onSave(selectedColor, selectedIcon);
-      onOpenChange(false);
-    } catch (error) {
-      console.error("Failed to save folder metadata:", error);
-    } finally {
-      setLoading(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">
-            <Folder className="w-5 h-5" />
-            {t("hosts.editFolderAppearance")}
-          </DialogTitle>
-          <DialogDescription className="text-muted-foreground">
-            {t("hosts.editFolderAppearanceDesc")}:{" "}
-            <span className="font-mono text-foreground">{folderName}</span>
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-6 py-4">
-          <div className="space-y-3">
-            <Label className="text-base font-semibold text-foreground">
-              {t("hosts.folderColor")}
-            </Label>
-            <div className="grid grid-cols-4 gap-3">
-              {AVAILABLE_COLORS.map((color) => (
-                <button
-                  key={color.value}
-                  type="button"
-                  className={`h-12 rounded-md border-2 transition-all hover:scale-105 ${
-                    selectedColor === color.value
-                      ? "border-white shadow-lg scale-105"
-                      : "border-edge"
-                  }`}
-                  style={{ backgroundColor: color.value }}
-                  onClick={() => setSelectedColor(color.value)}
-                  title={color.label}
-                />
-              ))}
-            </div>
-          </div>
-
-          <div className="space-y-3">
-            <Label className="text-base font-semibold text-foreground">
-              {t("hosts.folderIcon")}
-            </Label>
-            <div className="grid grid-cols-5 gap-3">
-              {AVAILABLE_ICONS.map(({ value, label, Icon }) => (
-                <button
-                  key={value}
-                  type="button"
-                  className={`h-14 rounded-md border-2 transition-all hover:scale-105 flex items-center justify-center ${
-                    selectedIcon === value
-                      ? "border-primary bg-primary/10"
-                      : "border-edge bg-elevated"
-                  }`}
-                  onClick={() => setSelectedIcon(value)}
-                  title={label}
-                >
-                  <Icon className="w-6 h-6" />
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="space-y-3">
-            <Label className="text-base font-semibold text-foreground">
-              {t("hosts.preview")}
-            </Label>
-            <div className="flex items-center gap-3 p-4 rounded-md bg-elevated border border-edge">
-              {(() => {
-                const IconComponent =
-                  AVAILABLE_ICONS.find((i) => i.value === selectedIcon)?.Icon ||
-                  Folder;
-                return (
-                  <IconComponent
-                    className="w-5 h-5"
-                    style={{ color: selectedColor }}
-                  />
-                );
-              })()}
-              <span className="font-medium">{folderName}</span>
-            </div>
-          </div>
-        </div>
-
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={() => onOpenChange(false)}
-            disabled={loading}
-          >
-            {t("common.cancel")}
-          </Button>
-          <Button onClick={handleSave} disabled={loading}>
-            {loading ? t("common.saving") : t("common.save")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,302 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { HostManagerViewer } from "@/ui/desktop/apps/host-manager/hosts/HostManagerViewer.tsx";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs.tsx";
-import { Separator } from "@/components/ui/separator.tsx";
-import { HostManagerEditor } from "@/ui/desktop/apps/host-manager/hosts/HostManagerEditor.tsx";
-import { CredentialsManager } from "@/ui/desktop/apps/host-manager/credentials/CredentialsManager.tsx";
-import { CredentialEditor } from "@/ui/desktop/apps/host-manager/credentials/CredentialEditor.tsx";
-import { useSidebar } from "@/components/ui/sidebar.tsx";
-import { useTranslation } from "react-i18next";
-import { exportSSHHostWithCredentials } from "@/ui/main-axios.ts";
-import type { SSHHost, HostManagerProps } from "../../../types/index";
-
-export function HostManager({
-  isTopbarOpen,
-  initialTab = "hosts",
-  hostConfig,
-  _updateTimestamp,
-  rightSidebarOpen = false,
-  rightSidebarWidth = 400,
-  currentTabId,
-  updateTab,
-}: HostManagerProps): React.ReactElement {
-  const { t } = useTranslation();
-  const [activeTab, setActiveTab] = useState(
-    initialTab === "host_viewer" || initialTab === "add_host"
-      ? "hosts"
-      : initialTab === "credentials" || initialTab === "add_credential"
-        ? "credentials"
-        : initialTab,
-  );
-  const [editingHost, setEditingHost] = useState<SSHHost | null>(
-    hostConfig || null,
-  );
-  const [isAddingHost, setIsAddingHost] = useState(false);
-  const [isAddingCredential, setIsAddingCredential] = useState(false);
-
-  useEffect(() => {}, [editingHost]);
-
-  const [editingCredential, setEditingCredential] = useState<{
-    id: number;
-    name?: string;
-    username: string;
-  } | null>(null);
-  const { state: sidebarState } = useSidebar();
-  const ignoreNextHostConfigChangeRef = useRef<boolean>(false);
-  const lastProcessedHostIdRef = useRef<number | undefined>(undefined);
-
-  useEffect(() => {
-    const handleAddHostEvent = () => {
-      setActiveTab("hosts");
-      setEditingHost(null);
-      setIsAddingHost(true);
-      setIsAddingCredential(false);
-    };
-
-    const handleAddCredentialEvent = () => {
-      setActiveTab("credentials");
-      setEditingCredential(null);
-      setIsAddingCredential(true);
-      setIsAddingHost(false);
-    };
-
-    window.addEventListener("host-manager:add-host", handleAddHostEvent);
-    window.addEventListener(
-      "host-manager:add-credential",
-      handleAddCredentialEvent,
-    );
-
-    return () => {
-      window.removeEventListener("host-manager:add-host", handleAddHostEvent);
-      window.removeEventListener(
-        "host-manager:add-credential",
-        handleAddCredentialEvent,
-      );
-    };
-  }, []);
-
-  useEffect(() => {
-    if (_updateTimestamp !== undefined) {
-      const normalizedTab =
-        initialTab === "host_viewer" || initialTab === "add_host"
-          ? "hosts"
-          : initialTab === "credentials" || initialTab === "add_credential"
-            ? "credentials"
-            : initialTab;
-
-      if (initialTab && normalizedTab !== activeTab) {
-        setActiveTab(normalizedTab);
-      }
-
-      if (hostConfig && hostConfig.id !== lastProcessedHostIdRef.current) {
-        lastProcessedHostIdRef.current = hostConfig.id;
-        setIsAddingHost(false);
-        exportSSHHostWithCredentials(hostConfig.id)
-          .then((fullHost) =>
-            setEditingHost({ ...hostConfig, ...fullHost } as SSHHost),
-          )
-          .catch(() => setEditingHost(hostConfig));
-      } else if (!hostConfig && editingHost) {
-        setEditingHost(null);
-        setIsAddingHost(false);
-      }
-    } else {
-      if (initialTab) {
-        const normalizedTab =
-          initialTab === "host_viewer" || initialTab === "add_host"
-            ? "hosts"
-            : initialTab === "credentials" || initialTab === "add_credential"
-              ? "credentials"
-              : initialTab;
-        setActiveTab(normalizedTab);
-      }
-      if (hostConfig && hostConfig.id !== lastProcessedHostIdRef.current) {
-        lastProcessedHostIdRef.current = hostConfig.id;
-        setIsAddingHost(false);
-        exportSSHHostWithCredentials(hostConfig.id)
-          .then((fullHost) =>
-            setEditingHost({ ...hostConfig, ...fullHost } as SSHHost),
-          )
-          .catch(() => setEditingHost(hostConfig));
-      }
-    }
-  }, [_updateTimestamp, initialTab, hostConfig]);
-
-  const handleEditHost = async (host: SSHHost) => {
-    setIsAddingHost(false);
-    lastProcessedHostIdRef.current = host.id;
-    try {
-      const fullHost = await exportSSHHostWithCredentials(host.id);
-      setEditingHost({ ...host, ...fullHost } as SSHHost);
-    } catch {
-      setEditingHost(host);
-    }
-  };
-
-  const handleAddHost = () => {
-    setEditingHost(null);
-    setIsAddingHost(true);
-    lastProcessedHostIdRef.current = undefined;
-  };
-
-  const handleFormSubmit = (savedHost?: SSHHost) => {
-    ignoreNextHostConfigChangeRef.current = true;
-    const isUpdatingHost = Boolean(editingHost?.id && savedHost?.id);
-
-    if (isUpdatingHost) {
-      setEditingHost((current) => ({ ...current, ...savedHost }) as SSHHost);
-      setIsAddingHost(false);
-      lastProcessedHostIdRef.current = savedHost.id;
-      if (updateTab && currentTabId !== undefined) {
-        updateTab(currentTabId, { hostConfig: savedHost });
-      }
-      return;
-    }
-
-    const savedHostId = savedHost?.id || editingHost?.id;
-    setEditingHost(null);
-    setIsAddingHost(false);
-    setTimeout(() => {
-      lastProcessedHostIdRef.current = savedHostId;
-    }, 500);
-  };
-
-  const handleEditCredential = (credential: {
-    id: number;
-    name?: string;
-    username: string;
-  }) => {
-    setEditingCredential(credential);
-    setIsAddingCredential(false);
-  };
-
-  const handleAddCredential = () => {
-    setEditingCredential(null);
-    setIsAddingCredential(true);
-  };
-
-  const handleCredentialFormSubmit = () => {
-    setEditingCredential(null);
-    setIsAddingCredential(false);
-  };
-
-  const handleTabChange = (value: string) => {
-    if (activeTab !== value) {
-      setEditingHost(null);
-      setEditingCredential(null);
-      setIsAddingHost(false);
-      setIsAddingCredential(false);
-      lastProcessedHostIdRef.current = undefined;
-
-      if (updateTab && currentTabId !== undefined) {
-        updateTab(currentTabId, { hostConfig: null });
-      }
-    }
-
-    setActiveTab(value);
-
-    if (updateTab && currentTabId !== undefined) {
-      updateTab(currentTabId, { initialTab: value });
-    }
-  };
-
-  const topMarginPx = isTopbarOpen ? 74 : 26;
-  const leftMarginPx = sidebarState === "collapsed" ? 26 : 8;
-  const bottomMarginPx = 8;
-
-  return (
-    <div>
-      <div className="w-full">
-        <div
-          className="bg-canvas text-foreground p-4 pt-0 rounded-lg border-2 border-edge flex flex-col min-h-0 overflow-hidden"
-          style={{
-            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",
-          }}
-        >
-          <Tabs
-            value={activeTab}
-            onValueChange={handleTabChange}
-            className="flex-1 flex flex-col h-full min-h-0"
-          >
-            <TabsList className="bg-elevated border-2 border-edge mt-1.5">
-              <TabsTrigger
-                value="hosts"
-                className="bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
-              >
-                {t("hosts.hosts")}
-              </TabsTrigger>
-              <TabsTrigger
-                value="credentials"
-                className="bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
-              >
-                {t("credentials.credentials")}
-              </TabsTrigger>
-            </TabsList>
-            <TabsContent
-              value="hosts"
-              className="flex-1 flex flex-col h-full min-h-0"
-            >
-              <Separator className="p-0.25 -mt-0.5 mb-1" />
-              {editingHost !== null || isAddingHost ? (
-                <div className="flex flex-col h-full min-h-0">
-                  <HostManagerEditor
-                    editingHost={editingHost}
-                    onFormSubmit={handleFormSubmit}
-                    onBack={() => {
-                      setEditingHost(null);
-                      setIsAddingHost(false);
-                      lastProcessedHostIdRef.current = undefined;
-                    }}
-                  />
-                </div>
-              ) : (
-                <HostManagerViewer
-                  onEditHost={handleEditHost}
-                  onAddHost={handleAddHost}
-                />
-              )}
-            </TabsContent>
-            <TabsContent
-              value="credentials"
-              className="flex-1 flex flex-col h-full min-h-0"
-            >
-              <Separator className="p-0.25 -mt-0.5 mb-1" />
-              {editingCredential !== null || isAddingCredential ? (
-                <div className="flex flex-col h-full min-h-0">
-                  <CredentialEditor
-                    editingCredential={editingCredential}
-                    onFormSubmit={handleCredentialFormSubmit}
-                    onBack={() => {
-                      setEditingCredential(null);
-                      setIsAddingCredential(false);
-                    }}
-                  />
-                </div>
-              ) : (
-                <div className="flex flex-col h-full min-h-0 overflow-auto thin-scrollbar">
-                  <CredentialsManager
-                    onEditCredential={handleEditCredential}
-                    onAddCredential={handleAddCredential}
-                  />
-                </div>
-              )}
-            </TabsContent>
-          </Tabs>
-        </div>
-      </div>
-    </div>
-  );
-}

src/ui/desktop/apps/host-manager/hosts/tabs/HostDockerTab.tsx

@@ -1,38 +0,0 @@
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/form.tsx";
-import { Switch } from "@/components/ui/switch.tsx";
-import type { HostDockerTabProps } from "./shared/tab-types";
-import { Button } from "@/components/ui/button.tsx";
-
-export function HostDockerTab({ form, t }: HostDockerTabProps) {
-  return (
-    <div className="space-y-2">
-      <Button
-        variant="outline"
-        size="sm"
-        className="h-8 px-3 text-xs"
-        onClick={() => window.open("https://docs.termix.site/docker", "_blank")}
-      >
-        {t("common.documentation")}
-      </Button>
-      <FormField
-        control={form.control}
-        name="enableDocker"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t("hosts.enableDocker")}</FormLabel>
-            <FormControl>
-              <Switch checked={field.value} onCheckedChange={field.onChange} />
-            </FormControl>
-            <FormDescription>{t("hosts.enableDockerDesc")}</FormDescription>
-          </FormItem>
-        )}
-      />
-    </div>
-  );
-}

src/ui/desktop/apps/host-manager/hosts/tabs/HostFileManagerTab.tsx

@@ -1,57 +0,0 @@
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/form.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Switch } from "@/components/ui/switch.tsx";
-import type { HostFileManagerTabProps } from "./shared/tab-types";
-
-export function HostFileManagerTab({ form, t }: HostFileManagerTabProps) {
-  return (
-    <div>
-      <FormField
-        control={form.control}
-        name="enableFileManager"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{t("hosts.enableFileManager")}</FormLabel>
-            <FormControl>
-              <Switch checked={field.value} onCheckedChange={field.onChange} />
-            </FormControl>
-            <FormDescription>
-              {t("hosts.enableFileManagerDesc")}
-            </FormDescription>
-          </FormItem>
-        )}
-      />
-
-      {form.watch("enableFileManager") && (
-        <div className="mt-4">
-          <FormField
-            control={form.control}
-            name="defaultPath"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>{t("hosts.defaultPath")}</FormLabel>
-                <FormControl>
-                  <Input
-                    placeholder={t("placeholders.homePath")}
-                    {...field}
-                    onBlur={(e) => {
-                      field.onChange(e.target.value.trim());
-                      field.onBlur();
-                    }}
-                  />
-                </FormControl>
-                <FormDescription>{t("hosts.defaultPathDesc")}</FormDescription>
-              </FormItem>
-            )}
-          />
-        </div>
-      )}
-    </div>
-  );
-}

src/ui/desktop/apps/host-manager/hosts/tabs/HostRemoteDesktopTab.tsx

@@ -1,744 +0,0 @@
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-} from "@/components/ui/form.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Switch } from "@/components/ui/switch.tsx";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select.tsx";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion.tsx";
-import { PasswordInput } from "@/components/ui/password-input.tsx";
-import type { HostRemoteDesktopTabProps } from "./shared/tab-types";
-
-type RemoteDesktopForm = HostRemoteDesktopTabProps["form"];
-
-function GuacField({
-  form,
-  path,
-  label,
-  description,
-  type = "text",
-}: {
-  form: RemoteDesktopForm;
-  path: string;
-  label: string;
-  description?: string;
-  type?: "text" | "number" | "password" | "switch";
-}) {
-  const fieldName = `guacamoleConfig.${path}` as never;
-
-  if (type === "switch") {
-    return (
-      <FormField
-        control={form.control}
-        name={fieldName}
-        render={({ field }) => (
-          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
-            <div className="space-y-0.5">
-              <FormLabel>{label}</FormLabel>
-              {description && <FormDescription>{description}</FormDescription>}
-            </div>
-            <FormControl>
-              <Switch
-                checked={!!field.value}
-                onCheckedChange={field.onChange}
-              />
-            </FormControl>
-          </FormItem>
-        )}
-      />
-    );
-  }
-
-  if (type === "password") {
-    return (
-      <FormField
-        control={form.control}
-        name={fieldName}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>{label}</FormLabel>
-            <FormControl>
-              <PasswordInput
-                value={field.value || ""}
-                onChange={field.onChange}
-              />
-            </FormControl>
-            {description && <FormDescription>{description}</FormDescription>}
-          </FormItem>
-        )}
-      />
-    );
-  }
-
-  return (
-    <FormField
-      control={form.control}
-      name={fieldName}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>{label}</FormLabel>
-          <FormControl>
-            <Input
-              type={type}
-              value={field.value ?? ""}
-              onChange={(e) =>
-                field.onChange(
-                  type === "number"
-                    ? e.target.value === ""
-                      ? undefined
-                      : parseInt(e.target.value)
-                    : e.target.value,
-                )
-              }
-            />
-          </FormControl>
-          {description && <FormDescription>{description}</FormDescription>}
-        </FormItem>
-      )}
-    />
-  );
-}
-
-function GuacSelect({
-  form,
-  path,
-  label,
-  options,
-  placeholder,
-}: {
-  form: RemoteDesktopForm;
-  path: string;
-  label: string;
-  options: { value: string; label: string }[];
-  placeholder?: string;
-}) {
-  const fieldName = `guacamoleConfig.${path}` as never;
-
-  return (
-    <FormField
-      control={form.control}
-      name={fieldName}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>{label}</FormLabel>
-          <Select
-            value={field.value || "auto"}
-            onValueChange={(v) => field.onChange(v === "auto" ? "" : v)}
-          >
-            <FormControl>
-              <SelectTrigger>
-                <SelectValue placeholder={placeholder || label} />
-              </SelectTrigger>
-            </FormControl>
-            <SelectContent>
-              {options.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </FormItem>
-      )}
-    />
-  );
-}
-
-export function HostRemoteDesktopTab({
-  form,
-  connectionType,
-  t,
-}: HostRemoteDesktopTabProps) {
-  const isRDP = connectionType === "rdp";
-  const isVNC = connectionType === "vnc";
-  const isTelnet = connectionType === "telnet";
-
-  return (
-    <div className="pt-2 space-y-4">
-      <Accordion
-        type="multiple"
-        defaultValue={["connection", "display"]}
-        className="w-full"
-      >
-        {/* Connection Settings */}
-        {isRDP && (
-          <AccordionItem value="connection">
-            <AccordionTrigger>{t("hosts.connectionSettings")}</AccordionTrigger>
-            <AccordionContent className="space-y-4 pt-4">
-              <FormField
-                control={form.control}
-                name="security"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>{t("hosts.securityMode")}</FormLabel>
-                    <Select
-                      value={field.value || "any"}
-                      onValueChange={field.onChange}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="any">Any</SelectItem>
-                        <SelectItem value="nla">NLA</SelectItem>
-                        <SelectItem value="nla-ext">NLA Extended</SelectItem>
-                        <SelectItem value="tls">TLS</SelectItem>
-                        <SelectItem value="vmconnect">VMConnect</SelectItem>
-                        <SelectItem value="rdp">RDP</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </FormItem>
-                )}
-              />
-              <FormField
-                control={form.control}
-                name="ignoreCert"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 bg-elevated dark:bg-input/30">
-                    <div className="space-y-0.5">
-                      <FormLabel>{t("hosts.ignoreCert")}</FormLabel>
-                      <FormDescription>
-                        {t("hosts.ignoreCertDesc")}
-                      </FormDescription>
-                    </div>
-                    <FormControl>
-                      <Switch
-                        checked={!!field.value}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        )}
-
-        {/* Display Settings */}
-        <AccordionItem value="display">
-          <AccordionTrigger>{t("hosts.displaySettings")}</AccordionTrigger>
-          <AccordionContent className="space-y-4 pt-4">
-            {!isTelnet && (
-              <GuacSelect
-                form={form}
-                path="color-depth"
-                label={t("hosts.colorDepth")}
-                options={[
-                  { value: "auto", label: "Auto" },
-                  { value: "8", label: "8-bit" },
-                  { value: "16", label: "16-bit" },
-                  { value: "24", label: "24-bit" },
-                  { value: "32", label: "32-bit" },
-                ]}
-              />
-            )}
-            <div className="grid grid-cols-2 gap-4">
-              <GuacField
-                form={form}
-                path="width"
-                label={t("hosts.width")}
-                type="number"
-              />
-              <GuacField
-                form={form}
-                path="height"
-                label={t("hosts.height")}
-                type="number"
-              />
-            </div>
-            {!isTelnet && (
-              <>
-                <GuacField
-                  form={form}
-                  path="dpi"
-                  label={t("hosts.dpi")}
-                  type="number"
-                />
-                <GuacSelect
-                  form={form}
-                  path="resize-method"
-                  label={t("hosts.resizeMethod")}
-                  options={[
-                    { value: "auto", label: "Auto" },
-                    { value: "display-update", label: "Display Update" },
-                    { value: "reconnect", label: "Reconnect" },
-                  ]}
-                />
-                <GuacField
-                  form={form}
-                  path="force-lossless"
-                  label={t("hosts.forceLossless")}
-                  type="switch"
-                />
-              </>
-            )}
-          </AccordionContent>
-        </AccordionItem>
-
-        {/* Telnet Terminal Settings */}
-        {isTelnet && (
-          <AccordionItem value="telnet-terminal">
-            <AccordionTrigger>
-              {t("hosts.telnetTerminalSettings")}
-            </AccordionTrigger>
-            <AccordionContent className="space-y-4 pt-4">
-              <GuacSelect
-                form={form}
-                path="terminal-type"
-                label={t("hosts.terminalType")}
-                options={[
-                  { value: "auto", label: "Auto" },
-                  { value: "xterm", label: "xterm" },
-                  { value: "xterm-256color", label: "xterm-256color" },
-                  { value: "vt100", label: "VT100" },
-                  { value: "vt220", label: "VT220" },
-                ]}
-              />
-              <GuacField
-                form={form}
-                path="font-name"
-                label={t("hosts.guacFontName")}
-              />
-              <GuacField
-                form={form}
-                path="font-size"
-                label={t("hosts.guacFontSize")}
-                type="number"
-              />
-              <GuacSelect
-                form={form}
-                path="color-scheme"
-                label={t("hosts.guacColorScheme")}
-                options={[
-                  { value: "auto", label: "Auto" },
-                  { value: "black-white", label: "Black on White" },
-                  { value: "white-black", label: "White on Black" },
-                  { value: "gray-black", label: "Gray on Black" },
-                  { value: "green-black", label: "Green on Black" },
-                ]}
-              />
-              <GuacSelect
-                form={form}
-                path="backspace"
-                label={t("hosts.guacBackspaceKey")}
-                options={[
-                  { value: "auto", label: "Auto" },
-                  { value: "127", label: "DEL (127)" },
-                  { value: "8", label: "BS (8)" },
-                ]}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        )}
-
-        {/* Audio Settings */}
-        {(isRDP || isVNC) && (
-          <AccordionItem value="audio">
-            <AccordionTrigger>{t("hosts.audioSettings")}</AccordionTrigger>
-            <AccordionContent className="space-y-4 pt-4">
-              <GuacField
-                form={form}
-                path="disable-audio"
-                label={t("hosts.disableAudio")}
-                type="switch"
-              />
-              {isRDP && (
-                <GuacField
-                  form={form}
-                  path="enable-audio-input"
-                  label={t("hosts.enableAudioInput")}
-                  type="switch"
-                />
-              )}
-            </AccordionContent>
-          </AccordionItem>
-        )}
-
-        {/* RDP Performance */}
-        {isRDP && (
-          <AccordionItem value="performance">
-            <AccordionTrigger>{t("hosts.rdpPerformance")}</AccordionTrigger>
-            <AccordionContent className="space-y-4 pt-4">
-              <GuacField
-                form={form}
-                path="enable-wallpaper"
-                label={t("hosts.enableWallpaper")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="enable-theming"
-                label={t("hosts.enableTheming")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="enable-font-smoothing"
-                label={t("hosts.enableFontSmoothing")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="enable-full-window-drag"
-                label={t("hosts.enableFullWindowDrag")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="enable-desktop-composition"
-                label={t("hosts.enableDesktopComposition")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="enable-menu-animations"
-                label={t("hosts.enableMenuAnimations")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="disable-bitmap-caching"
-                label={t("hosts.disableBitmapCaching")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="disable-offscreen-caching"
-                label={t("hosts.disableOffscreenCaching")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="disable-glyph-caching"
-                label={t("hosts.disableGlyphCaching")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="enable-gfx"
-                label={t("hosts.enableGfx")}
-                type="switch"
-              />
-            </AccordionContent>
-          </AccordionItem>
-        )}
-
-        {/* RDP Device Redirection */}
-        {isRDP && (
-          <AccordionItem value="device-redirection">
-            <AccordionTrigger>{t("hosts.deviceRedirection")}</AccordionTrigger>
-            <AccordionContent className="space-y-4 pt-4">
-              <GuacField
-                form={form}
-                path="enable-printing"
-                label={t("hosts.enablePrinting")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="enable-drive"
-                label={t("hosts.enableDrive")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="drive-name"
-                label={t("hosts.driveName")}
-              />
-              <GuacField
-                form={form}
-                path="drive-path"
-                label={t("hosts.drivePath")}
-              />
-              <GuacField
-                form={form}
-                path="create-drive-path"
-                label={t("hosts.createDrivePath")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="disable-download"
-                label={t("hosts.disableDownload")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="disable-upload"
-                label={t("hosts.disableUpload")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="enable-touch"
-                label={t("hosts.enableTouch")}
-                type="switch"
-              />
-            </AccordionContent>
-          </AccordionItem>
-        )}
-
-        {/* RDP Session */}
-        {isRDP && (
-          <AccordionItem value="session">
-            <AccordionTrigger>{t("hosts.rdpSession")}</AccordionTrigger>
-            <AccordionContent className="space-y-4 pt-4">
-              <GuacField
-                form={form}
-                path="client-name"
-                label={t("hosts.clientName")}
-              />
-              <GuacField
-                form={form}
-                path="console"
-                label={t("hosts.consoleSession")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="initial-program"
-                label={t("hosts.initialProgram")}
-              />
-              <GuacSelect
-                form={form}
-                path="server-layout"
-                label={t("hosts.serverLayout")}
-                options={[
-                  { value: "auto", label: "Auto" },
-                  { value: "en-us-qwerty", label: "English (US) QWERTY" },
-                  { value: "en-gb-qwerty", label: "English (UK) QWERTY" },
-                  { value: "de-de-qwertz", label: "German QWERTZ" },
-                  { value: "fr-fr-azerty", label: "French AZERTY" },
-                  { value: "it-it-qwerty", label: "Italian QWERTY" },
-                  { value: "sv-se-qwerty", label: "Swedish QWERTY" },
-                  { value: "ja-jp-qwerty", label: "Japanese QWERTY" },
-                  { value: "pt-br-qwerty", label: "Portuguese (BR) QWERTY" },
-                  { value: "es-es-qwerty", label: "Spanish QWERTY" },
-                  { value: "failsafe", label: "Failsafe (Unicode)" },
-                ]}
-              />
-              <GuacField
-                form={form}
-                path="timezone"
-                label={t("hosts.timezone")}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        )}
-
-        {/* RDP Gateway */}
-        {isRDP && (
-          <AccordionItem value="gateway">
-            <AccordionTrigger>{t("hosts.gatewaySettings")}</AccordionTrigger>
-            <AccordionContent className="space-y-4 pt-4">
-              <GuacField
-                form={form}
-                path="gateway-hostname"
-                label={t("hosts.gatewayHostname")}
-              />
-              <GuacField
-                form={form}
-                path="gateway-port"
-                label={t("hosts.gatewayPort")}
-                type="number"
-              />
-              <GuacField
-                form={form}
-                path="gateway-username"
-                label={t("hosts.gatewayUsername")}
-              />
-              <GuacField
-                form={form}
-                path="gateway-password"
-                label={t("hosts.gatewayPassword")}
-                type="password"
-              />
-              <GuacField
-                form={form}
-                path="gateway-domain"
-                label={t("hosts.gatewayDomain")}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        )}
-
-        {/* RDP RemoteApp */}
-        {isRDP && (
-          <AccordionItem value="remoteapp">
-            <AccordionTrigger>{t("hosts.remoteApp")}</AccordionTrigger>
-            <AccordionContent className="space-y-4 pt-4">
-              <GuacField
-                form={form}
-                path="remote-app"
-                label={t("hosts.remoteAppProgram")}
-              />
-              <GuacField
-                form={form}
-                path="remote-app-dir"
-                label={t("hosts.remoteAppDir")}
-              />
-              <GuacField
-                form={form}
-                path="remote-app-args"
-                label={t("hosts.remoteAppArgs")}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        )}
-
-        {/* Clipboard */}
-        <AccordionItem value="clipboard">
-          <AccordionTrigger>{t("hosts.clipboardSettings")}</AccordionTrigger>
-          <AccordionContent className="space-y-4 pt-4">
-            <GuacSelect
-              form={form}
-              path="normalize-clipboard"
-              label={t("hosts.normalizeClipboard")}
-              options={[
-                { value: "auto", label: "Auto" },
-                { value: "preserve", label: "Preserve" },
-                { value: "unix", label: "Unix (LF)" },
-                { value: "windows", label: "Windows (CRLF)" },
-              ]}
-            />
-            <GuacField
-              form={form}
-              path="disable-copy"
-              label={t("hosts.disableCopy")}
-              type="switch"
-            />
-            <GuacField
-              form={form}
-              path="disable-paste"
-              label={t("hosts.disablePaste")}
-              type="switch"
-            />
-          </AccordionContent>
-        </AccordionItem>
-
-        {/* VNC Specific */}
-        {isVNC && (
-          <AccordionItem value="vnc-specific">
-            <AccordionTrigger>{t("hosts.vncSettings")}</AccordionTrigger>
-            <AccordionContent className="space-y-4 pt-4">
-              <GuacSelect
-                form={form}
-                path="cursor"
-                label={t("hosts.cursorMode")}
-                options={[
-                  { value: "auto", label: "Auto" },
-                  { value: "local", label: "Local" },
-                  { value: "remote", label: "Remote" },
-                ]}
-              />
-              <GuacField
-                form={form}
-                path="swap-red-blue"
-                label={t("hosts.swapRedBlue")}
-                type="switch"
-              />
-              <GuacField
-                form={form}
-                path="read-only"
-                label={t("hosts.readOnly")}
-                type="switch"
-              />
-            </AccordionContent>
-          </AccordionItem>
-        )}
-
-        {/* Recording */}
-        <AccordionItem value="recording">
-          <AccordionTrigger>{t("hosts.recordingSettings")}</AccordionTrigger>
-          <AccordionContent className="space-y-4 pt-4">
-            <GuacField
-              form={form}
-              path="recording-path"
-              label={t("hosts.recordingPath")}
-            />
-            <GuacField
-              form={form}
-              path="recording-name"
-              label={t("hosts.recordingName")}
-            />
-            <GuacField
-              form={form}
-              path="create-recording-path"
-              label={t("hosts.createRecordingPath")}
-              type="switch"
-            />
-            <GuacField
-              form={form}
-              path="recording-exclude-output"
-              label={t("hosts.excludeOutput")}
-              type="switch"
-            />
-            <GuacField
-              form={form}
-              path="recording-exclude-mouse"
-              label={t("hosts.excludeMouse")}
-              type="switch"
-            />
-            <GuacField
-              form={form}
-              path="recording-include-keys"
-              label={t("hosts.includeKeys")}
-              type="switch"
-            />
-          </AccordionContent>
-        </AccordionItem>
-
-        {/* Wake-on-LAN */}
-        <AccordionItem value="wol">
-          <AccordionTrigger>{t("hosts.wakeOnLan")}</AccordionTrigger>
-          <AccordionContent className="space-y-4 pt-4">
-            <GuacField
-              form={form}
-              path="wol-send-packet"
-              label={t("hosts.sendWolPacket")}
-              type="switch"
-            />
-            <GuacField
-              form={form}
-              path="wol-mac-addr"
-              label={t("hosts.wolMacAddr")}
-            />
-            <GuacField
-              form={form}
-              path="wol-broadcast-addr"
-              label={t("hosts.wolBroadcastAddr")}
-            />
-            <GuacField
-              form={form}
-              path="wol-udp-port"
-              label={t("hosts.wolUdpPort")}
-              type="number"
-            />
-            <GuacField
-              form={form}
-              path="wol-wait-time"
-              label={t("hosts.wolWaitTime")}
-              type="number"
-            />
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  );
-}

src/ui/desktop/apps/host-manager/hosts/tabs/HostSharingTab.tsx

@@ -1,565 +0,0 @@
-import React from "react";
-import { cn } from "@/lib/utils.ts";
-import { Button } from "@/components/ui/button.tsx";
-import { Input } from "@/components/ui/input.tsx";
-import { Badge } from "@/components/ui/badge.tsx";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table.tsx";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/components/ui/tabs.tsx";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert.tsx";
-import { toast } from "sonner";
-import { useConfirmation } from "@/hooks/use-confirmation.ts";
-import {
-  getRoles,
-  getUserList,
-  getUserInfo,
-  shareHost,
-  getHostAccess,
-  revokeHostAccess,
-  getSSHHostById,
-  type Role,
-  type AccessRecord,
-} from "@/ui/main-axios.ts";
-import { useTranslation } from "react-i18next";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from "@/components/ui/command.tsx";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover.tsx";
-import {
-  Plus,
-  Check,
-  ChevronsUpDown,
-  AlertCircle,
-  Trash2,
-  Users,
-  Shield,
-  Clock,
-  UserCircle,
-} from "lucide-react";
-import type { SSHHost } from "@/types";
-
-interface User {
-  id: string;
-  username: string;
-  is_admin: boolean;
-}
-
-export function HostSharingTab({
-  hostId,
-  isNewHost,
-}: HostSharingTabProps): React.ReactElement {
-  const { t } = useTranslation();
-  const { confirmWithToast } = useConfirmation();
-
-  const [shareType, setShareType] = React.useState<"user" | "role">("user");
-  const [selectedUserId, setSelectedUserId] = React.useState<string>("");
-  const [selectedRoleId, setSelectedRoleId] = React.useState<number | null>(
-    null,
-  );
-  const permissionLevel = "view";
-  const [expiresInHours, setExpiresInHours] = React.useState<string>("");
-
-  const [roles, setRoles] = React.useState<Role[]>([]);
-  const [users, setUsers] = React.useState<User[]>([]);
-  const [accessList, setAccessList] = React.useState<AccessRecord[]>([]);
-  const [loading, setLoading] = React.useState(false);
-  const [currentUserId, setCurrentUserId] = React.useState<string>("");
-  const [hostData, setHostData] = React.useState<SSHHost | null>(null);
-
-  const [userComboOpen, setUserComboOpen] = React.useState(false);
-  const [roleComboOpen, setRoleComboOpen] = React.useState(false);
-
-  const loadRoles = React.useCallback(async () => {
-    try {
-      const response = await getRoles();
-      setRoles(response.roles || []);
-    } catch (error) {
-      console.error("Failed to load roles:", error);
-      setRoles([]);
-    }
-  }, []);
-
-  const loadUsers = React.useCallback(async () => {
-    try {
-      const response = await getUserList();
-      const mappedUsers = (response.users || []).map((user) => ({
-        id: user.id,
-        username: user.username,
-        is_admin: user.is_admin,
-      }));
-      setUsers(mappedUsers);
-    } catch (error) {
-      console.error("Failed to load users:", error);
-      setUsers([]);
-    }
-  }, []);
-
-  const loadAccessList = React.useCallback(async () => {
-    if (!hostId) return;
-
-    setLoading(true);
-    try {
-      const response = await getHostAccess(hostId);
-      setAccessList(response.accessList || []);
-    } catch (error) {
-      console.error("Failed to load access list:", error);
-      setAccessList([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [hostId]);
-
-  const loadHostData = React.useCallback(async () => {
-    if (!hostId) return;
-
-    try {
-      const host = await getSSHHostById(hostId);
-      setHostData(host);
-    } catch (error) {
-      console.error("Failed to load host data:", error);
-      setHostData(null);
-    }
-  }, [hostId]);
-
-  React.useEffect(() => {
-    loadRoles();
-    loadUsers();
-    if (!isNewHost) {
-      loadAccessList();
-      loadHostData();
-    }
-  }, [loadRoles, loadUsers, loadAccessList, loadHostData, isNewHost]);
-
-  React.useEffect(() => {
-    const fetchCurrentUser = async () => {
-      try {
-        const userInfo = await getUserInfo();
-        setCurrentUserId(userInfo.userId);
-      } catch (error) {
-        console.error("Failed to load current user:", error);
-      }
-    };
-    fetchCurrentUser();
-  }, []);
-
-  const handleShare = async () => {
-    if (!hostId) {
-      toast.error(t("rbac.saveHostFirst"));
-      return;
-    }
-
-    if (shareType === "user" && !selectedUserId) {
-      toast.error(t("rbac.selectUser"));
-      return;
-    }
-
-    if (shareType === "role" && !selectedRoleId) {
-      toast.error(t("rbac.selectRole"));
-      return;
-    }
-
-    if (shareType === "user" && selectedUserId === currentUserId) {
-      toast.error(t("rbac.cannotShareWithSelf"));
-      return;
-    }
-
-    try {
-      await shareHost(hostId, {
-        targetType: shareType,
-        targetUserId: shareType === "user" ? selectedUserId : undefined,
-        targetRoleId: shareType === "role" ? selectedRoleId : undefined,
-        permissionLevel,
-        durationHours: expiresInHours
-          ? parseInt(expiresInHours, 10)
-          : undefined,
-      });
-
-      toast.success(t("rbac.sharedSuccessfully"));
-      setSelectedUserId("");
-      setSelectedRoleId(null);
-      setExpiresInHours("");
-      loadAccessList();
-    } catch {
-      toast.error(t("rbac.failedToShare"));
-    }
-  };
-
-  const handleRevoke = async (accessId: number) => {
-    if (!hostId) return;
-
-    const confirmed = await confirmWithToast({
-      title: t("rbac.confirmRevokeAccess"),
-      description: t("rbac.confirmRevokeAccessDescription"),
-      confirmText: t("common.revoke"),
-      cancelText: t("common.cancel"),
-    });
-
-    if (!confirmed) return;
-
-    try {
-      await revokeHostAccess(hostId, accessId);
-      toast.success(t("rbac.accessRevokedSuccessfully"));
-      loadAccessList();
-    } catch {
-      toast.error(t("rbac.failedToRevokeAccess"));
-    }
-  };
-
-  const formatDate = (dateString: string | null) => {
-    if (!dateString) return "-";
-    return new Date(dateString).toLocaleString();
-  };
-
-  const isExpired = (expiresAt: string | null) => {
-    if (!expiresAt) return false;
-    return new Date(expiresAt) < new Date();
-  };
-
-  const availableUsers = React.useMemo(() => {
-    return users.filter((user) => user.id !== currentUserId);
-  }, [users, currentUserId]);
-
-  const selectedUser = availableUsers.find((u) => u.id === selectedUserId);
-  const selectedRole = roles.find((r) => r.id === selectedRoleId);
-
-  if (isNewHost) {
-    return (
-      <Alert>
-        <AlertCircle className="h-4 w-4" />
-        <AlertTitle>{t("rbac.saveHostFirst")}</AlertTitle>
-        <AlertDescription>
-          {t("rbac.saveHostFirstDescription")}
-        </AlertDescription>
-      </Alert>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {!hostData?.credentialId && (
-        <Alert variant="destructive">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>{t("rbac.credentialRequired")}</AlertTitle>
-          <AlertDescription>
-            {t("rbac.credentialRequiredDescription")}
-          </AlertDescription>
-        </Alert>
-      )}
-
-      {hostData?.credentialId && (
-        <>
-          <div className="space-y-4 border rounded-lg p-4">
-            <h3 className="text-lg font-semibold flex items-center gap-2">
-              <Plus className="h-5 w-5" />
-              {t("rbac.shareHost")}
-            </h3>
-
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-8 px-3 text-xs"
-              onClick={() =>
-                window.open("https://docs.termix.site/rbac", "_blank")
-              }
-            >
-              {t("common.documentation")}
-            </Button>
-
-            <Tabs
-              value={shareType}
-              onValueChange={(v) => setShareType(v as "user" | "role")}
-            >
-              <TabsList className="grid w-full grid-cols-2">
-                <TabsTrigger value="user" className="flex items-center gap-2">
-                  <UserCircle className="h-4 w-4" />
-                  {t("rbac.shareWithUser")}
-                </TabsTrigger>
-                <TabsTrigger value="role" className="flex items-center gap-2">
-                  <Shield className="h-4 w-4" />
-                  {t("rbac.shareWithRole")}
-                </TabsTrigger>
-              </TabsList>
-
-              <TabsContent value="user" className="space-y-4">
-                <div className="space-y-2">
-                  <label htmlFor="user-select">{t("rbac.selectUser")}</label>
-                  <Popover open={userComboOpen} onOpenChange={setUserComboOpen}>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        aria-expanded={userComboOpen}
-                        className="w-full justify-between"
-                      >
-                        {selectedUser
-                          ? `${selectedUser.username}${selectedUser.is_admin ? " (Admin)" : ""}`
-                          : t("rbac.selectUserPlaceholder")}
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      className="p-0"
-                      style={{ width: "var(--radix-popover-trigger-width)" }}
-                    >
-                      <Command>
-                        <CommandInput placeholder={t("rbac.searchUsers")} />
-                        <CommandEmpty>{t("rbac.noUserFound")}</CommandEmpty>
-                        <CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
-                          {availableUsers.map((user) => (
-                            <CommandItem
-                              key={user.id}
-                              value={`${user.username} ${user.id}`}
-                              onSelect={() => {
-                                setSelectedUserId(user.id);
-                                setUserComboOpen(false);
-                              }}
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  selectedUserId === user.id
-                                    ? "opacity-100"
-                                    : "opacity-0",
-                                )}
-                              />
-                              {user.username}
-                              {user.is_admin ? " (Admin)" : ""}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
-                </div>
-              </TabsContent>
-
-              <TabsContent value="role" className="space-y-4">
-                <div className="space-y-2">
-                  <label htmlFor="role-select">{t("rbac.selectRole")}</label>
-                  <Popover open={roleComboOpen} onOpenChange={setRoleComboOpen}>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        aria-expanded={roleComboOpen}
-                        className="w-full justify-between"
-                      >
-                        {selectedRole
-                          ? `${t(selectedRole.displayName)}${selectedRole.isSystem ? ` (${t("rbac.systemRole")})` : ""}`
-                          : t("rbac.selectRolePlaceholder")}
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      className="p-0"
-                      style={{ width: "var(--radix-popover-trigger-width)" }}
-                    >
-                      <Command>
-                        <CommandInput placeholder={t("rbac.searchRoles")} />
-                        <CommandEmpty>{t("rbac.noRoleFound")}</CommandEmpty>
-                        <CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
-                          {roles.map((role) => (
-                            <CommandItem
-                              key={role.id}
-                              value={`${role.displayName} ${role.name} ${role.id}`}
-                              onSelect={() => {
-                                setSelectedRoleId(role.id);
-                                setRoleComboOpen(false);
-                              }}
-                            >
-                              <Check
-                                className={cn(
-                                  "mr-2 h-4 w-4",
-                                  selectedRoleId === role.id
-                                    ? "opacity-100"
-                                    : "opacity-0",
-                                )}
-                              />
-                              {t(role.displayName)}
-                              {role.isSystem
-                                ? ` (${t("rbac.systemRole")})`
-                                : ""}
-                            </CommandItem>
-                          ))}
-                        </CommandGroup>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
-                </div>
-              </TabsContent>
-            </Tabs>
-
-            <div className="space-y-2">
-              <label>{t("rbac.permissionLevel")}</label>
-              <div className="text-sm text-muted-foreground">
-                {t("rbac.view")} - {t("rbac.viewDesc")}
-              </div>
-            </div>
-
-            <div className="space-y-2">
-              <label htmlFor="expires-in">{t("rbac.durationHours")}</label>
-              <Input
-                id="expires-in"
-                type="number"
-                value={expiresInHours}
-                onChange={(e) => {
-                  const value = e.target.value;
-                  if (value === "" || /^\d+$/.test(value)) {
-                    setExpiresInHours(value);
-                  }
-                }}
-                placeholder={t("rbac.neverExpires")}
-                min="1"
-              />
-            </div>
-
-            <Button
-              type="button"
-              onClick={handleShare}
-              className="w-full"
-              disabled={!hostData?.credentialId}
-            >
-              <Plus className="h-4 w-4 mr-2" />
-              {t("rbac.share")}
-            </Button>
-          </div>
-
-          <div className="space-y-4">
-            <h3 className="text-lg font-semibold flex items-center gap-2">
-              <Users className="h-5 w-5" />
-              {t("rbac.accessList")}
-            </h3>
-
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>{t("rbac.type")}</TableHead>
-                  <TableHead>{t("rbac.target")}</TableHead>
-                  <TableHead>{t("rbac.permissionLevel")}</TableHead>
-                  <TableHead>{t("rbac.grantedBy")}</TableHead>
-                  <TableHead>{t("rbac.expires")}</TableHead>
-                  <TableHead className="text-right">
-                    {t("common.actions")}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {loading ? (
-                  <TableRow>
-                    <TableCell
-                      colSpan={6}
-                      className="text-center text-muted-foreground"
-                    >
-                      {t("common.loading")}
-                    </TableCell>
-                  </TableRow>
-                ) : accessList.length === 0 ? (
-                  <TableRow>
-                    <TableCell
-                      colSpan={6}
-                      className="text-center text-muted-foreground"
-                    >
-                      {t("rbac.noAccessRecords")}
-                    </TableCell>
-                  </TableRow>
-                ) : (
-                  accessList.map((access) => (
-                    <TableRow
-                      key={access.id}
-                      className={
-                        isExpired(access.expiresAt) ? "opacity-50" : ""
-                      }
-                    >
-                      <TableCell>
-                        {access.targetType === "user" ? (
-                          <Badge
-                            variant="outline"
-                            className="flex items-center gap-1 w-fit"
-                          >
-                            <UserCircle className="h-3 w-3" />
-                            {t("rbac.user")}
-                          </Badge>
-                        ) : (
-                          <Badge
-                            variant="outline"
-                            className="flex items-center gap-1 w-fit"
-                          >
-                            <Shield className="h-3 w-3" />
-                            {t("rbac.role")}
-                          </Badge>
-                        )}
-                      </TableCell>
-                      <TableCell>
-                        {access.targetType === "user"
-                          ? access.username
-                          : t(access.roleDisplayName || access.roleName || "")}
-                      </TableCell>
-                      <TableCell>
-                        <Badge variant="secondary">
-                          {access.permissionLevel}
-                        </Badge>
-                      </TableCell>
-                      <TableCell>{access.grantedByUsername}</TableCell>
-                      <TableCell>
-                        {access.expiresAt ? (
-                          <div className="flex items-center gap-2">
-                            <Clock className="h-3 w-3" />
-                            <span
-                              className={
-                                isExpired(access.expiresAt)
-                                  ? "text-red-500"
-                                  : ""
-                              }
-                            >
-                              {formatDate(access.expiresAt)}
-                              {isExpired(access.expiresAt) && (
-                                <span className="ml-2">
-                                  ({t("rbac.expired")})
-                                </span>
-                              )}
-                            </span>
-                          </div>
-                        ) : (
-                          t("rbac.never")
-                        )}
-                      </TableCell>
-                      <TableCell className="text-right">
-                        <Button
-                          type="button"
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => handleRevoke(access.id)}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
-          </div>
-        </>
-      )}
-    </div>
-  );
-}