From 835b98a102a44cdb20ee14889fcc04c206a2d3fe Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Tue, 12 May 2026 02:12:02 -0500
Subject: [PATCH] feat: continued migration

---
 package.json                                  |    2 +-
 src/backend/dashboard.ts                      |    8 +-
 src/types/ui-types.ts                         |    4 +-
 src/ui/dashboard/Dashboard.tsx                |   84 +-
 src/ui/dashboard/DashboardTab.tsx             |  300 ++--
 src/ui/dashboard/cards/NetworkGraphCard.tsx   |   47 +-
 src/ui/dashboard/cards/RecentActivityCard.tsx |   24 +-
 src/ui/dashboard/cards/ServerOverviewCard.tsx |   18 +-
 src/ui/dashboard/cards/ServerStatsCard.tsx    |   30 +-
 .../hooks/useDashboardPreferences.ts          |   77 +-
 src/ui/features/file-manager/FileManager.tsx  |  174 +-
 .../file-manager/FileManagerContextMenu.tsx   |   29 +-
 .../file-manager/components/PdfPreview.tsx    |    3 +-
 .../components/TerminalWindow.tsx             |   49 +-
 src/ui/locales/en.json                        |   27 +-
 src/ui/shell/TabBar.tsx                       |    2 +-
 src/ui/sidebar/HostManager.tsx                | 1532 +++++++++++++----
 src/ui/sidebar/SidebarTree.tsx                |  106 +-
 src/ui/ssh/connection-log/ConnectionLog.tsx   |    2 +-
 19 files changed, 1836 insertions(+), 682 deletions(-)

diff --git a/package.json b/package.json
index 17e1f3e4..ace8a8dc 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "termix",
   "private": true,
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "A web-based server management platform with SSH terminal, tunneling, and file editing capabilities",
   "author": "Karmaa",
   "main": "electron/main.cjs",
diff --git a/src/backend/dashboard.ts b/src/backend/dashboard.ts
index f8963b7c..77314262 100644
--- a/src/backend/dashboard.ts
+++ b/src/backend/dashboard.ts
@@ -470,7 +470,7 @@ app.post("/dashboard/preferences", async (req, res) => {
       });
     }
 
-    const { cards } = req.body;
+    const { cards, mainWidthPct } = req.body;
 
     if (!cards || !Array.isArray(cards)) {
       return res.status(400).json({
@@ -478,7 +478,11 @@ app.post("/dashboard/preferences", async (req, res) => {
       });
     }
 
-    const layout = JSON.stringify({ cards });
+    const layoutObj: Record<string, unknown> = { cards };
+    if (typeof mainWidthPct === "number") {
+      layoutObj.mainWidthPct = mainWidthPct;
+    }
+    const layout = JSON.stringify(layoutObj);
 
     const existing = await getDb()
       .select()
diff --git a/src/types/ui-types.ts b/src/types/ui-types.ts
index f8d3cad5..087366fe 100644
--- a/src/types/ui-types.ts
+++ b/src/types/ui-types.ts
@@ -6,8 +6,8 @@ export type Host = {
   port: number;
   folder: string;
   online: boolean;
-  cpu: number;
-  ram: number;
+  cpu: number | null;
+  ram: number | null;
   lastAccess: string;
   tags?: string[];
   authType: "password" | "key" | "credential" | "none" | "opkssh";
diff --git a/src/ui/dashboard/Dashboard.tsx b/src/ui/dashboard/Dashboard.tsx
index ebfec4f9..bf3d6ec8 100644
--- a/src/ui/dashboard/Dashboard.tsx
+++ b/src/ui/dashboard/Dashboard.tsx
@@ -129,6 +129,31 @@ export function Dashboard({
     [mainWidthPct, layout, updateLayout],
   );
 
+  const handleCardHeightMouseDown = useCallback(
+    (e: React.MouseEvent, cardId: string, currentHeight: number) => {
+      e.preventDefault();
+      const startY = e.clientY;
+      const startH = currentHeight;
+      const onMove = (ev: MouseEvent) => {
+        const newH = Math.max(180, startH + (ev.clientY - startY));
+        if (!layout) return;
+        updateLayout({
+          ...layout,
+          cards: layout.cards.map((c) =>
+            c.id === cardId ? { ...c, height: Math.round(newH) } : c,
+          ),
+        });
+      };
+      const onUp = () => {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [layout, updateLayout],
+  );
+
   let sidebarState: "expanded" | "collapsed" = "expanded";
   try {
     const sidebar = useSidebar();
@@ -385,7 +410,7 @@ export function Dashboard({
             name: string;
             cpu: number | null;
             ram: number | null;
-          } => server !== null && server.cpu !== null && server.ram !== null,
+          } => server !== null,
         );
         setServerStats(validServerStats);
         setServerStatsLoading(false);
@@ -788,24 +813,40 @@ export function Dashboard({
                     return null;
                   };
 
+                  const renderCardWithHandle = (
+                    card: (typeof enabledCards)[0],
+                  ) => {
+                    const currentHeight = card.height ?? 280;
+                    return (
+                      <div
+                        key={card.id}
+                        className="flex flex-col"
+                        style={
+                          card.height
+                            ? { height: card.height, flexShrink: 0 }
+                            : { flex: 1, minHeight: 280 }
+                        }
+                      >
+                        <div className="flex-1 min-h-0">{renderCard(card)}</div>
+                        <div
+                          className="flex-shrink-0 h-2 my-0.5 flex items-center justify-center cursor-row-resize group"
+                          onMouseDown={(e) =>
+                            handleCardHeightMouseDown(e, card.id, currentHeight)
+                          }
+                        >
+                          <div className="w-16 h-0.5 rounded-full bg-border group-hover:bg-primary/50 transition-colors" />
+                        </div>
+                      </div>
+                    );
+                  };
+
                   return (
                     <>
                       <div
-                        className="flex flex-col gap-4 overflow-auto min-h-0"
+                        className="flex flex-col gap-2 overflow-auto min-h-0"
                         style={{ width: `${mainWidthPct}%`, minWidth: 0 }}
                       >
-                        {mainCards.map((card) => (
-                          <div
-                            key={card.id}
-                            style={
-                              card.height
-                                ? { height: card.height, flexShrink: 0 }
-                                : { flex: 1, minHeight: 280 }
-                            }
-                          >
-                            {renderCard(card)}
-                          </div>
-                        ))}
+                        {mainCards.map((card) => renderCardWithHandle(card))}
                       </div>
 
                       <div
@@ -816,21 +857,10 @@ export function Dashboard({
                       </div>
 
                       <div
-                        className="flex flex-col gap-4 overflow-auto min-h-0"
+                        className="flex flex-col gap-2 overflow-auto min-h-0"
                         style={{ flex: 1, minWidth: 0 }}
                       >
-                        {sideCards.map((card) => (
-                          <div
-                            key={card.id}
-                            style={
-                              card.height
-                                ? { height: card.height, flexShrink: 0 }
-                                : { flex: 1, minHeight: 280 }
-                            }
-                          >
-                            {renderCard(card)}
-                          </div>
-                        ))}
+                        {sideCards.map((card) => renderCardWithHandle(card))}
                       </div>
                     </>
                   );
diff --git a/src/ui/dashboard/DashboardTab.tsx b/src/ui/dashboard/DashboardTab.tsx
index ea3c8f7b..6fa84b88 100644
--- a/src/ui/dashboard/DashboardTab.tsx
+++ b/src/ui/dashboard/DashboardTab.tsx
@@ -27,12 +27,15 @@ import type { DashboardCardId, TabType, Host } from "@/types/ui-types";
 import {
   getSSHHosts,
   getUptime,
+  getVersionInfo,
+  getDatabaseHealth,
   getRecentActivity,
   getTunnelStatuses,
   getCredentials,
   resetRecentActivity,
 } from "@/main-axios";
 import type { RecentActivityItem, SSHHostWithStatus } from "@/main-axios";
+import { useTranslation } from "react-i18next";
 
 function sshHostToHost(h: SSHHostWithStatus): Host {
   return {
@@ -110,15 +113,6 @@ const DEFAULT_SLOTS: CardSlot[] = [
   { id: "recent_activity", panel: "side", order: 0, height: null },
 ];
 
-const CARD_META: Record<DashboardCardId, { label: string }> = {
-  stats_bar: { label: "Status Bar" },
-  counters_bar: { label: "Counters" },
-  quick_actions: { label: "Quick Actions" },
-  host_status: { label: "Host Status" },
-  recent_activity: { label: "Recent Activity" },
-  network_graph: { label: "Network Graph" },
-};
-
 // ─── useColumnResize ──────────────────────────────────────────────────────────
 
 function useColumnResize(
@@ -166,27 +160,48 @@ function useColumnResize(
 function StatsBarCard({
   hosts,
   uptimeFormatted,
+  versionText,
+  versionStatus,
+  dbHealth,
 }: {
   hosts: Host[];
   uptimeFormatted: string;
+  versionText: string;
+  versionStatus: "up_to_date" | "requires_update" | "beta";
+  dbHealth: "healthy" | "error";
 }) {
+  const { t } = useTranslation();
   const online = hosts.filter((h) => h.online).length;
+  const statusLabel =
+    versionStatus === "beta"
+      ? t("dashboard.beta").toUpperCase()
+      : versionStatus === "requires_update"
+        ? t("dashboard.updateAvailable").toUpperCase()
+        : t("dashboardTab.stable");
+  const statusColor =
+    versionStatus === "beta"
+      ? "bg-blue-500/20 text-blue-400"
+      : versionStatus === "requires_update"
+        ? "bg-yellow-500/20 text-yellow-400"
+        : "bg-accent-brand/20 text-accent-brand";
   return (
     <Card className="grid grid-cols-4 divide-x divide-border overflow-hidden w-full h-full py-0 gap-0">
       <div className="flex flex-col justify-center px-4 py-2 gap-1">
         <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
-          Version
+          {t("dashboard.version")}
         </span>
         <span className="text-xl font-bold text-accent-brand leading-none">
-          v2.2.0
+          {versionText || "—"}
         </span>
-        <span className="text-[10px] bg-accent-brand/20 text-accent-brand px-1.5 py-0.5 w-fit font-semibold leading-none">
-          STABLE
+        <span
+          className={`text-[10px] px-1.5 py-0.5 w-fit font-semibold leading-none ${statusColor}`}
+        >
+          {statusLabel}
         </span>
       </div>
       <div className="flex flex-col justify-center px-4 py-2 gap-1">
         <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
-          Uptime
+          {t("dashboard.uptime")}
         </span>
         <span className="text-xl font-bold leading-none">
           {uptimeFormatted || "—"}
@@ -194,15 +209,19 @@ function StatsBarCard({
       </div>
       <div className="flex flex-col justify-center px-4 py-2 gap-1">
         <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
-          Database
+          {t("dashboard.database")}
         </span>
-        <span className="text-xl font-bold text-accent-brand leading-none">
-          Healthy
+        <span
+          className={`text-xl font-bold leading-none ${dbHealth === "healthy" ? "text-accent-brand" : "text-red-400"}`}
+        >
+          {dbHealth === "healthy"
+            ? t("dashboard.healthy")
+            : t("dashboard.error")}
         </span>
       </div>
       <div className="flex flex-col justify-center px-4 py-2 gap-1">
         <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
-          Hosts Online
+          {t("dashboardTab.hostsOnline")}
         </span>
         <div className="flex items-baseline gap-1">
           <span className="text-xl font-bold leading-none">{online}</span>
@@ -224,27 +243,28 @@ function CountersBarCard({
   credentialCount: number;
   activeTunnelCount: number;
 }) {
+  const { t } = useTranslation();
   return (
     <Card className="grid grid-cols-3 divide-x divide-border overflow-hidden w-full h-full py-0 gap-0">
       <div className="flex items-center gap-2.5 px-4 py-2.5">
         <Server className="size-3.5 text-muted-foreground shrink-0" />
         <span className="text-base font-bold">{hosts.length}</span>
         <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
-          Total Hosts
+          {t("dashboard.totalHosts")}
         </span>
       </div>
       <div className="flex items-center gap-2.5 px-4 py-2.5">
         <KeyRound className="size-3.5 text-muted-foreground shrink-0" />
         <span className="text-base font-bold">{credentialCount}</span>
         <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
-          Credentials
+          {t("dashboard.totalCredentials")}
         </span>
       </div>
       <div className="flex items-center gap-2.5 px-4 py-2.5">
         <Network className="size-3.5 text-muted-foreground shrink-0" />
         <span className="text-base font-bold">{activeTunnelCount}</span>
         <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
-          Active Tunnels
+          {t("dashboardTab.activeTunnels")}
         </span>
       </div>
     </Card>
@@ -256,12 +276,13 @@ function QuickActionsCard({
 }: {
   onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
 }) {
+  const { t } = useTranslation();
   return (
     <Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
       <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0">
         <Zap className="size-3.5 text-muted-foreground" />
         <span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
-          Quick Actions
+          {t("dashboard.quickActions")}
         </span>
       </div>
       <div className="flex flex-1 min-h-0">
@@ -276,9 +297,11 @@ function QuickActionsCard({
               <Plus className="size-3 text-accent-brand" />
             </div>
             <div className="flex flex-col items-start text-left">
-              <span className="text-xs font-semibold">Add Host</span>
+              <span className="text-xs font-semibold">
+                {t("dashboard.addHost")}
+              </span>
               <span className="text-[10px] text-muted-foreground">
-                Register a new server
+                {t("dashboardTab.registerNewServer")}
               </span>
             </div>
           </button>
@@ -292,9 +315,11 @@ function QuickActionsCard({
               <KeyRound className="size-3 text-accent-brand" />
             </div>
             <div className="flex flex-col items-start text-left">
-              <span className="text-xs font-semibold">Add Credential</span>
+              <span className="text-xs font-semibold">
+                {t("dashboard.addCredential")}
+              </span>
               <span className="text-[10px] text-muted-foreground">
-                Store SSH keys or passwords
+                {t("dashboardTab.storeSshKeysOrPasswords")}
               </span>
             </div>
           </button>
@@ -308,9 +333,11 @@ function QuickActionsCard({
               <Settings className="size-3 text-accent-brand" />
             </div>
             <div className="flex flex-col items-start text-left">
-              <span className="text-xs font-semibold">Admin Settings</span>
+              <span className="text-xs font-semibold">
+                {t("dashboard.adminSettings")}
+              </span>
               <span className="text-[10px] text-muted-foreground">
-                Manage users and roles
+                {t("dashboardTab.manageUsersAndRoles")}
               </span>
             </div>
           </button>
@@ -322,9 +349,11 @@ function QuickActionsCard({
               <User className="size-3 text-accent-brand" />
             </div>
             <div className="flex flex-col items-start text-left">
-              <span className="text-xs font-semibold">User Profile</span>
+              <span className="text-xs font-semibold">
+                {t("dashboard.userProfile")}
+              </span>
               <span className="text-[10px] text-muted-foreground">
-                Manage your account
+                {t("dashboardTab.manageYourAccount")}
               </span>
             </div>
           </button>
@@ -341,6 +370,7 @@ function HostStatusCard({
   hosts: Host[];
   onOpenTab: (host: Host, type: TabType) => void;
 }) {
+  const { t } = useTranslation();
   const online = hosts.filter((h) => h.online).length;
   return (
     <Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
@@ -348,17 +378,17 @@ function HostStatusCard({
         <div className="flex items-center gap-2">
           <Database className="size-3.5 text-muted-foreground" />
           <span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
-            Host Status
+            {t("dashboardTab.hostStatus")}
           </span>
         </div>
         <span className="text-xs text-muted-foreground">
-          {online}/{hosts.length} online
+          {online}/{hosts.length} {t("dashboardTab.onlineLower")}
         </span>
       </div>
       <div className="flex flex-col overflow-auto flex-1">
         {hosts.length === 0 && (
           <div className="flex-1 flex items-center justify-center text-xs text-muted-foreground/40 py-8">
-            No hosts configured
+            {t("dashboardTab.noHostsConfigured")}
           </div>
         )}
         {hosts.map((host, i) => (
@@ -384,7 +414,7 @@ function HostStatusCard({
                   <div className="flex flex-col gap-0.5 w-16">
                     <div className="flex items-center justify-between">
                       <span className="text-[10px] text-muted-foreground">
-                        CPU
+                        {t("dashboard.cpu")}
                       </span>
                       <span className="text-[10px] font-bold text-accent-brand">
                         {host.cpu ?? 0}%
@@ -400,7 +430,7 @@ function HostStatusCard({
                   <div className="flex flex-col gap-0.5 w-16">
                     <div className="flex items-center justify-between">
                       <span className="text-[10px] text-muted-foreground">
-                        RAM
+                        {t("dashboard.ram")}
                       </span>
                       <span className="text-[10px] font-bold text-accent-brand">
                         {host.ram ?? 0}%
@@ -427,7 +457,9 @@ function HostStatusCard({
               <span
                 className={`text-[10px] px-2 py-0.5 font-semibold border ${host.online ? "border-accent-brand/40 text-accent-brand bg-accent-brand/10" : "border-border text-muted-foreground"}`}
               >
-                {host.online ? "ONLINE" : "OFFLINE"}
+                {host.online
+                  ? t("dashboardTab.online")
+                  : t("dashboardTab.offline")}
               </span>
             </div>
           </div>
@@ -448,6 +480,7 @@ function RecentActivityCard({
   onOpenTab: (host: Host, type: TabType) => void;
   onClear: () => void;
 }) {
+  const { t } = useTranslation();
   const typeIcon: Record<RecentActivityItem["type"], React.ReactNode> = {
     terminal: <Terminal className="size-2.5" />,
     file_manager: <Server className="size-2.5" />,
@@ -468,12 +501,24 @@ function RecentActivityCard({
     vnc: "vnc",
     telnet: "telnet",
   };
+  const typeLabel: Record<RecentActivityItem["type"], string> = {
+    terminal: t("networkGraph.terminal"),
+    file_manager: t("networkGraph.fileManager"),
+    server_stats: t("networkGraph.serverStats"),
+    tunnel: t("networkGraph.tunnel"),
+    docker: t("networkGraph.docker"),
+    rdp: "RDP",
+    vnc: "VNC",
+    telnet: "Telnet",
+  };
   function formatTime(ts: string) {
-    const diff = Math.floor((Date.now() - new Date(ts).getTime()) / 1000);
-    if (diff < 60) return `${diff}s ago`;
-    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
-    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
-    return `${Math.floor(diff / 86400)}d ago`;
+    const diffMs = Date.now() - new Date(ts).getTime();
+    if (diffMs < 0) return t("dashboard.justNow");
+    const diff = Math.floor(diffMs / 1000);
+    if (diff < 60) return t("dashboard.justNow");
+    if (diff < 3600) return `${Math.floor(diff / 60)}m`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h`;
+    return `${Math.floor(diff / 86400)}d`;
   }
   return (
     <Card className="flex flex-col overflow-hidden w-full h-full py-0 gap-0">
@@ -481,7 +526,7 @@ function RecentActivityCard({
         <div className="flex items-center gap-2">
           <Activity className="size-3.5 text-muted-foreground" />
           <span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
-            Recent Activity
+            {t("dashboard.recentActivity")}
           </span>
         </div>
         <Button
@@ -490,13 +535,13 @@ function RecentActivityCard({
           className="text-xs text-accent-brand h-auto py-0.5 px-2"
           onClick={onClear}
         >
-          Clear
+          {t("dashboardTab.clear")}
         </Button>
       </div>
       <div className="flex flex-col overflow-auto flex-1">
         {activity.length === 0 && (
           <div className="flex-1 flex items-center justify-center text-xs text-muted-foreground/40 py-8">
-            No recent activity
+            {t("dashboard.noRecentActivity")}
           </div>
         )}
         {activity.map((item) => {
@@ -519,9 +564,7 @@ function RecentActivityCard({
                   </span>
                   <div className="flex items-center gap-1 text-muted-foreground">
                     {typeIcon[item.type]}
-                    <span className="text-[10px] capitalize">
-                      {item.type.replace("_", " ")}
-                    </span>
+                    <span className="text-[10px]">{typeLabel[item.type]}</span>
                   </div>
                 </div>
               </div>
@@ -537,6 +580,7 @@ function RecentActivityCard({
 }
 
 function NetworkGraphCard({ hosts }: { hosts: Host[] }) {
+  const { t } = useTranslation();
   const cyRef = useRef<any>(null);
   const [contextMenu, setContextMenu] = useState<{
     visible: boolean;
@@ -639,12 +683,12 @@ function NetworkGraphCard({ hosts }: { hosts: Host[] }) {
         <div className="flex items-center gap-2">
           <Network className="size-3.5 text-muted-foreground" />
           <span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
-            Network Graph
+            {t("dashboard.networkGraph")}
           </span>
         </div>
         <div className="flex items-center gap-2">
           <span className="text-xs text-muted-foreground">
-            {hosts.length} nodes
+            {t("dashboardTab.nodes", { count: hosts.length })}
           </span>
           <Button
             variant="ghost"
@@ -673,11 +717,11 @@ function NetworkGraphCard({ hosts }: { hosts: Host[] }) {
             </div>
             <button className="flex items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted transition-colors text-left w-full">
               <Terminal className="size-3" />
-              Terminal
+              {t("networkGraph.terminal")}
             </button>
             <button className="flex items-center gap-2 px-3 py-1.5 text-xs hover:bg-muted transition-colors text-left w-full">
               <Server className="size-3" />
-              Server Stats
+              {t("networkGraph.serverStats")}
             </button>
           </div>
         )}
@@ -695,20 +739,20 @@ function NetworkGraphCard({ hosts }: { hosts: Host[] }) {
           />
         ) : (
           <div className="flex-1 flex items-center justify-center text-xs text-muted-foreground/40 h-full">
-            No hosts to display
+            {t("dashboardTab.noHostsToDisplay")}
           </div>
         )}
         <div className="absolute bottom-2 left-3 flex items-center gap-3 pointer-events-none">
           <div className="flex items-center gap-1.5">
             <span className="size-1.5 rounded-full bg-accent-brand inline-block" />
             <span className="text-[10px] text-muted-foreground font-mono">
-              Online
+              {t("dashboardTab.onlineLower")}
             </span>
           </div>
           <div className="flex items-center gap-1.5">
             <span className="size-1.5 rounded-full bg-muted-foreground/50 inline-block" />
             <span className="text-[10px] text-muted-foreground font-mono">
-              Offline
+              {t("dashboardTab.offlineLower")}
             </span>
           </div>
         </div>
@@ -732,6 +776,9 @@ function CardItem({
   onOpenTab,
   hosts,
   uptimeFormatted,
+  versionText,
+  versionStatus,
+  dbHealth,
   credentialCount,
   activeTunnelCount,
   activity,
@@ -749,6 +796,9 @@ function CardItem({
   onOpenTab: (host: Host, type: TabType) => void;
   hosts: Host[];
   uptimeFormatted: string;
+  versionText: string;
+  versionStatus: "up_to_date" | "requires_update" | "beta";
+  dbHealth: "healthy" | "error";
   credentialCount: number;
   activeTunnelCount: number;
   activity: RecentActivityItem[];
@@ -776,15 +826,6 @@ function CardItem({
   );
 
   const isFlex = slot.height === null;
-  const cardProps = {
-    hosts,
-    uptimeFormatted,
-    credentialCount,
-    activeTunnelCount,
-    activity,
-    onOpenTab,
-    onOpenSingletonTab,
-  };
 
   return (
     <div
@@ -815,37 +856,35 @@ function CardItem({
       <div className="flex-1 min-h-0 overflow-hidden">
         {slot.id === "stats_bar" && (
           <StatsBarCard
-            hosts={cardProps.hosts}
-            uptimeFormatted={cardProps.uptimeFormatted}
+            hosts={hosts}
+            uptimeFormatted={uptimeFormatted}
+            versionText={versionText}
+            versionStatus={versionStatus}
+            dbHealth={dbHealth}
           />
         )}
         {slot.id === "counters_bar" && (
           <CountersBarCard
-            hosts={cardProps.hosts}
-            credentialCount={cardProps.credentialCount}
-            activeTunnelCount={cardProps.activeTunnelCount}
+            hosts={hosts}
+            credentialCount={credentialCount}
+            activeTunnelCount={activeTunnelCount}
           />
         )}
         {slot.id === "quick_actions" && (
-          <QuickActionsCard onOpenSingletonTab={cardProps.onOpenSingletonTab} />
+          <QuickActionsCard onOpenSingletonTab={onOpenSingletonTab} />
         )}
         {slot.id === "host_status" && (
-          <HostStatusCard
-            hosts={cardProps.hosts}
-            onOpenTab={cardProps.onOpenTab}
-          />
+          <HostStatusCard hosts={hosts} onOpenTab={onOpenTab} />
         )}
         {slot.id === "recent_activity" && (
           <RecentActivityCard
             activity={activity}
-            hosts={cardProps.hosts}
-            onOpenTab={cardProps.onOpenTab}
+            hosts={hosts}
+            onOpenTab={onOpenTab}
             onClear={onClearActivity}
           />
         )}
-        {slot.id === "network_graph" && (
-          <NetworkGraphCard hosts={cardProps.hosts} />
-        )}
+        {slot.id === "network_graph" && <NetworkGraphCard hosts={hosts} />}
       </div>
       {editMode && !isFlex && (
         <div
@@ -898,16 +937,19 @@ function DropZone({
 function AddCardTray({
   activeIds,
   onAdd,
+  cardLabels,
 }: {
   activeIds: DashboardCardId[];
   onAdd: (id: DashboardCardId) => void;
+  cardLabels: Record<DashboardCardId, string>;
 }) {
+  const { t } = useTranslation();
   const available = DASHBOARD_CARDS.filter((c) => !activeIds.includes(c.id));
   if (available.length === 0) return null;
   return (
     <div className="flex items-center gap-2 px-1 py-2 flex-wrap shrink-0">
       <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold shrink-0">
-        Add:
+        {t("dashboardTab.add")}
       </span>
       {available.map((card) => (
         <button
@@ -916,7 +958,7 @@ function AddCardTray({
           className="flex items-center gap-1.5 px-2.5 py-1 border border-dashed border-border text-xs text-muted-foreground hover:text-foreground hover:border-accent-brand/60 hover:bg-accent-brand/5 transition-colors"
         >
           <Plus className="size-3 text-accent-brand" />
-          {CARD_META[card.id].label}
+          {cardLabels[card.id]}
         </button>
       ))}
     </div>
@@ -940,10 +982,14 @@ type PanelColumnProps = {
   onOpenTab: (host: Host, type: TabType) => void;
   hosts: Host[];
   uptimeFormatted: string;
+  versionText: string;
+  versionStatus: "up_to_date" | "requires_update" | "beta";
+  dbHealth: "healthy" | "error";
   credentialCount: number;
   activeTunnelCount: number;
   activity: RecentActivityItem[];
   onClearActivity: () => void;
+  cardLabels: Record<DashboardCardId, string>;
 };
 
 function PanelColumn({
@@ -961,11 +1007,16 @@ function PanelColumn({
   onOpenTab,
   hosts,
   uptimeFormatted,
+  versionText,
+  versionStatus,
+  dbHealth,
   credentialCount,
   activeTunnelCount,
   activity,
   onClearActivity,
+  cardLabels,
 }: PanelColumnProps) {
+  const { t } = useTranslation();
   const sorted = [...slots].sort((a, b) => a.order - b.order);
   const allIds = slots.map((s) => s.id);
 
@@ -1007,6 +1058,9 @@ function PanelColumn({
             onOpenTab={onOpenTab}
             hosts={hosts}
             uptimeFormatted={uptimeFormatted}
+            versionText={versionText}
+            versionStatus={versionStatus}
+            dbHealth={dbHealth}
             credentialCount={credentialCount}
             activeTunnelCount={activeTunnelCount}
             activity={activity}
@@ -1022,11 +1076,15 @@ function PanelColumn({
         active={!!dragState}
       />
       {editMode && (
-        <AddCardTray activeIds={allIds} onAdd={(id) => onAdd(id, panel)} />
+        <AddCardTray
+          activeIds={allIds}
+          onAdd={(id) => onAdd(id, panel)}
+          cardLabels={cardLabels}
+        />
       )}
       {sorted.length === 0 && !editMode && (
         <div className="flex-1 flex items-center justify-center text-muted-foreground/20 text-xs border border-dashed border-border/30">
-          Empty
+          {t("dashboardTab.empty")}
         </div>
       )}
     </div>
@@ -1061,6 +1119,7 @@ export function DashboardTab({
   onOpenSingletonTab: (type: TabType, pendingEvent?: string) => void;
   onOpenTab: (host: Host, type: TabType) => void;
 }) {
+  const { t, i18n } = useTranslation();
   const [slots, setSlots] = useState<CardSlot[]>(DEFAULT_SLOTS);
   const [editMode, setEditMode] = useState(false);
   const [dragState, setDragState] = useState<DragState>(null);
@@ -1068,6 +1127,11 @@ export function DashboardTab({
 
   const [hosts, setHosts] = useState<Host[]>([]);
   const [uptimeFormatted, setUptimeFormatted] = useState("");
+  const [versionText, setVersionText] = useState("");
+  const [versionStatus, setVersionStatus] = useState<
+    "up_to_date" | "requires_update" | "beta"
+  >("up_to_date");
+  const [dbHealth, setDbHealth] = useState<"healthy" | "error">("healthy");
   const [credentialCount, setCredentialCount] = useState(0);
   const [activeTunnelCount, setActiveTunnelCount] = useState(0);
   const [activity, setActivity] = useState<RecentActivityItem[]>([]);
@@ -1079,6 +1143,23 @@ export function DashboardTab({
     getUptime()
       .then((u) => setUptimeFormatted(u.formatted))
       .catch(() => {});
+    getVersionInfo()
+      .then((info) => {
+        setVersionText(info.localVersion ?? "");
+        setVersionStatus(info.status ?? "up_to_date");
+      })
+      .catch(() => {});
+    getDatabaseHealth()
+      .then((health) => {
+        setDbHealth(
+          health.status === "ok" || health.status === "healthy"
+            ? "healthy"
+            : "error",
+        );
+      })
+      .catch(() => {
+        setDbHealth("error");
+      });
     getRecentActivity(50)
       .then(setActivity)
       .catch(() => {});
@@ -1108,7 +1189,7 @@ export function DashboardTab({
     }
   };
 
-  const todayLabel = new Date().toLocaleDateString("en-US", {
+  const todayLabel = new Date().toLocaleDateString(i18n.language, {
     weekday: "long",
     month: "long",
     day: "numeric",
@@ -1124,6 +1205,15 @@ export function DashboardTab({
     .sort((a, b) => a.order - b.order);
   const hasSide = sideSlots.length > 0;
 
+  const cardLabels: Record<DashboardCardId, string> = {
+    stats_bar: t("dashboard.serverOverview"),
+    counters_bar: t("dashboard.serverStats"),
+    quick_actions: t("dashboard.quickActions"),
+    host_status: t("dashboardTab.hostStatus"),
+    recent_activity: t("dashboard.recentActivity"),
+    network_graph: t("dashboard.networkGraph"),
+  };
+
   const onColumnDividerMouseDown = useCallback(
     (e: React.MouseEvent) => {
       e.preventDefault();
@@ -1211,12 +1301,16 @@ export function DashboardTab({
   const columnProps = {
     hosts,
     uptimeFormatted,
+    versionText,
+    versionStatus,
+    dbHealth,
     credentialCount,
     activeTunnelCount,
     activity,
     onClearActivity: handleClearActivity,
     onOpenSingletonTab,
     onOpenTab,
+    cardLabels,
   };
 
   const isMobile = useIsMobile();
@@ -1228,7 +1322,9 @@ export function DashboardTab({
         <div className="flex-1 min-h-0 overflow-y-auto px-3 pb-3 pt-3 flex flex-col gap-3">
           <Card className="flex-row items-center justify-between px-4 py-3 shrink-0 gap-0">
             <div>
-              <h1 className="text-base font-bold leading-tight">Dashboard</h1>
+              <h1 className="text-base font-bold leading-tight">
+                {t("dashboard.title")}
+              </h1>
               <p className="text-xs text-muted-foreground">{todayLabel}</p>
             </div>
             <div className="flex items-center gap-1">
@@ -1243,7 +1339,7 @@ export function DashboardTab({
                   target="_blank"
                   rel="noreferrer"
                 >
-                  GitHub
+                  {t("dashboard.github")}
                 </a>
               </Button>
               <Button
@@ -1257,7 +1353,7 @@ export function DashboardTab({
                   target="_blank"
                   rel="noreferrer"
                 >
-                  Support
+                  {t("dashboard.support")}
                 </a>
               </Button>
               <Button
@@ -1271,7 +1367,7 @@ export function DashboardTab({
                   target="_blank"
                   rel="noreferrer"
                 >
-                  Discord
+                  {t("dashboard.discord")}
                 </a>
               </Button>
             </div>
@@ -1282,7 +1378,13 @@ export function DashboardTab({
               className={`shrink-0 ${slot.id === "host_status" || slot.id === "recent_activity" ? "max-h-72 flex flex-col overflow-hidden" : ""}`}
             >
               {slot.id === "stats_bar" && (
-                <StatsBarCard hosts={hosts} uptimeFormatted={uptimeFormatted} />
+                <StatsBarCard
+                  hosts={hosts}
+                  uptimeFormatted={uptimeFormatted}
+                  versionText={versionText}
+                  versionStatus={versionStatus}
+                  dbHealth={dbHealth}
+                />
               )}
               {slot.id === "counters_bar" && (
                 <CountersBarCard
@@ -1319,13 +1421,15 @@ export function DashboardTab({
     <div className="flex flex-col w-full h-full min-h-0 overflow-hidden">
       <Card className="flex-row items-center justify-between px-5 py-3 shrink-0 mx-5 mt-5 gap-0">
         <div>
-          <h1 className="text-lg font-bold leading-tight">Dashboard</h1>
+          <h1 className="text-lg font-bold leading-tight">
+            {t("dashboard.title")}
+          </h1>
           <p className="text-xs text-muted-foreground">{todayLabel}</p>
         </div>
         <div className="flex items-center gap-1">
           <div className="hidden sm:flex items-center gap-2 mr-2 bg-muted/50 px-2.5 py-1 rounded-sm border border-border">
             <span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
-              Command Palette
+              {t("dashboardTab.commandPalette")}
             </span>
             <div className="flex items-center gap-1">
               <Kbd className="h-5 px-1.5 bg-background text-[10px]">Shift</Kbd>
@@ -1344,7 +1448,7 @@ export function DashboardTab({
               target="_blank"
               rel="noreferrer"
             >
-              GitHub
+              {t("dashboard.github")}
             </a>
           </Button>
           <Button
@@ -1358,7 +1462,7 @@ export function DashboardTab({
               target="_blank"
               rel="noreferrer"
             >
-              Support
+              {t("dashboard.support")}
             </a>
           </Button>
           <Button
@@ -1372,7 +1476,7 @@ export function DashboardTab({
               target="_blank"
               rel="noreferrer"
             >
-              Discord
+              {t("dashboard.discord")}
             </a>
           </Button>
           <Separator orientation="vertical" className="mx-1 h-5" />
@@ -1384,14 +1488,14 @@ export function DashboardTab({
                 className="text-xs text-muted-foreground"
                 onClick={handleReset}
               >
-                Reset
+                {t("dashboard.reset")}
               </Button>
               <Button
                 size="sm"
                 className="text-xs bg-accent-brand hover:bg-accent-brand/90 text-white"
                 onClick={() => setEditMode(false)}
               >
-                Done
+                {t("dashboardTab.done")}
               </Button>
             </>
           ) : (
@@ -1399,7 +1503,7 @@ export function DashboardTab({
               variant="ghost"
               size="icon"
               onClick={() => setEditMode(true)}
-              title="Customize Dashboard"
+              title={t("dashboard.customizeLayout")}
             >
               <LayoutDashboard className="size-4 text-accent-brand" />
             </Button>
@@ -1411,9 +1515,7 @@ export function DashboardTab({
         <div className="mx-5 mt-4 px-4 py-2 border border-dashed border-accent-brand/40 bg-accent-brand/5 shrink-0 flex items-center gap-2">
           <LayoutDashboard className="size-3.5 text-accent-brand shrink-0" />
           <span className="text-xs text-accent-brand font-semibold">
-            Drag cards to reorder · Drag the column divider to resize columns ·
-            Drag the bottom edge of a card to resize its height · Trash to
-            remove
+            {t("dashboardTab.editModeInstructions")}
           </span>
         </div>
       )}
diff --git a/src/ui/dashboard/cards/NetworkGraphCard.tsx b/src/ui/dashboard/cards/NetworkGraphCard.tsx
index 9c29c7f9..c1d02cb9 100644
--- a/src/ui/dashboard/cards/NetworkGraphCard.tsx
+++ b/src/ui/dashboard/cards/NetworkGraphCard.tsx
@@ -1594,15 +1594,44 @@ export function NetworkGraphCard({
             <NetworkIcon className="mr-3" />
             {t("dashboard.networkGraph")}
           </p>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={handleOpenInNewTab}
-            className="flex items-center gap-2 h-8"
-            title={t("common.openInNewTab")}
-          >
-            <ArrowUp className="w-4 h-4" />
-          </Button>
+          <div className="flex items-center gap-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => cyRef.current?.zoom(cyRef.current.zoom() * 1.2)}
+              title={t("networkGraph.zoomIn")}
+              className="h-8 w-8 p-0"
+            >
+              <ZoomIn className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => cyRef.current?.zoom(cyRef.current.zoom() / 1.2)}
+              title={t("networkGraph.zoomOut")}
+              className="h-8 w-8 p-0"
+            >
+              <ZoomOut className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => cyRef.current?.fit()}
+              title={t("networkGraph.resetView")}
+              className="h-8 w-8 p-0"
+            >
+              <RotateCw className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleOpenInNewTab}
+              className="h-8 w-8 p-0"
+              title={t("common.openInNewTab")}
+            >
+              <ArrowUp className="w-4 h-4" />
+            </Button>
+          </div>
         </div>
 
         <AlertDialog open={!!error} onOpenChange={() => setError(null)}>
diff --git a/src/ui/dashboard/cards/RecentActivityCard.tsx b/src/ui/dashboard/cards/RecentActivityCard.tsx
index 80304b5f..48731fcc 100644
--- a/src/ui/dashboard/cards/RecentActivityCard.tsx
+++ b/src/ui/dashboard/cards/RecentActivityCard.tsx
@@ -22,6 +22,21 @@ interface RecentActivityCardProps {
   onActivityClick: (item: RecentActivityItem) => void;
 }
 
+function formatRelativeTime(
+  timestamp: string,
+  t: (key: string) => string,
+): string {
+  const diffMs = Date.now() - new Date(timestamp).getTime();
+  if (diffMs < 0) return t("dashboard.justNow");
+  const diffSec = Math.floor(diffMs / 1000);
+  if (diffSec < 60) return t("dashboard.justNow");
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m`;
+  const diffHour = Math.floor(diffMin / 60);
+  if (diffHour < 24) return `${diffHour}h`;
+  return `${Math.floor(diffHour / 24)}d`;
+}
+
 export function RecentActivityCard({
   activities,
   loading,
@@ -95,7 +110,14 @@ export function RecentActivityCard({
                   ) : (
                     <Terminal size={20} className="shrink-0" />
                   )}
-                  <p className="truncate ml-2 font-semibold">{item.hostName}</p>
+                  <div className="flex flex-col items-start min-w-0 ml-2">
+                    <p className="truncate font-semibold leading-none">
+                      {item.hostName}
+                    </p>
+                    <p className="text-xs text-muted-foreground mt-0.5 leading-none">
+                      {formatRelativeTime(item.timestamp, t)}
+                    </p>
+                  </div>
                 </Button>
               ))
           )}
diff --git a/src/ui/dashboard/cards/ServerOverviewCard.tsx b/src/ui/dashboard/cards/ServerOverviewCard.tsx
index 775cd3b5..019b3d95 100644
--- a/src/ui/dashboard/cards/ServerOverviewCard.tsx
+++ b/src/ui/dashboard/cards/ServerOverviewCard.tsx
@@ -56,22 +56,28 @@ export function ServerOverviewCard({
               <p className="leading-none text-muted-foreground">
                 {versionText}
               </p>
-              {!updateCheckDisabled && (
+              {versionStatus === "beta" ? (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="ml-2 text-sm border-1 border-edge text-blue-400"
+                >
+                  {t("dashboard.beta")}
+                </Button>
+              ) : !updateCheckDisabled ? (
                 <>
                   <Button
                     variant="outline"
                     size="sm"
-                    className={`ml-2 text-sm border-1 border-edge ${versionStatus === "up_to_date" ? "text-green-400" : versionStatus === "beta" ? "text-blue-400" : "text-yellow-400"}`}
+                    className={`ml-2 text-sm border-1 border-edge ${versionStatus === "up_to_date" ? "text-green-400" : "text-yellow-400"}`}
                   >
                     {versionStatus === "up_to_date"
                       ? t("dashboard.upToDate")
-                      : versionStatus === "beta"
-                        ? t("dashboard.beta")
-                        : t("dashboard.updateAvailable")}
+                      : t("dashboard.updateAvailable")}
                   </Button>
                   <UpdateLog loggedIn={loggedIn} />
                 </>
-              )}
+              ) : null}
             </div>
           </div>
 
diff --git a/src/ui/dashboard/cards/ServerStatsCard.tsx b/src/ui/dashboard/cards/ServerStatsCard.tsx
index 662da0a9..c95dcf5c 100644
--- a/src/ui/dashboard/cards/ServerStatsCard.tsx
+++ b/src/ui/dashboard/cards/ServerStatsCard.tsx
@@ -23,6 +23,10 @@ export function ServerStatsCard({
 }: ServerStatsCardProps): React.ReactElement {
   const { t } = useTranslation();
 
+  const visibleStats = serverStats.filter(
+    (s) => s.cpu !== null || s.ram !== null,
+  );
+
   return (
     <div className="border-2 border-edge rounded-md flex flex-col overflow-hidden transition-all duration-150 hover:border-primary/20 !bg-elevated">
       <div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
@@ -38,12 +42,12 @@ export function ServerStatsCard({
               <Loader2 className="animate-spin mr-2" size={16} />
               <span>{t("dashboard.loadingServerStats")}</span>
             </div>
-          ) : serverStats.length === 0 ? (
+          ) : visibleStats.length === 0 ? (
             <p className="text-muted-foreground text-sm">
               {t("dashboard.noServerData")}
             </p>
           ) : (
-            serverStats.map((server) => (
+            visibleStats.map((server) => (
               <Button
                 key={server.id}
                 variant="outline"
@@ -56,18 +60,16 @@ export function ServerStatsCard({
                     <p className="truncate ml-2 font-semibold">{server.name}</p>
                   </div>
                   <div className="flex flex-row justify-start gap-4 text-xs text-muted-foreground">
-                    <span>
-                      {t("dashboard.cpu")}:{" "}
-                      {server.cpu !== null
-                        ? `${server.cpu}%`
-                        : t("dashboard.notAvailable")}
-                    </span>
-                    <span>
-                      {t("dashboard.ram")}:{" "}
-                      {server.ram !== null
-                        ? `${server.ram}%`
-                        : t("dashboard.notAvailable")}
-                    </span>
+                    {server.cpu !== null && (
+                      <span>
+                        {t("dashboard.cpu")}: {server.cpu.toFixed(1)}%
+                      </span>
+                    )}
+                    {server.ram !== null && (
+                      <span>
+                        {t("dashboard.ram")}: {server.ram.toFixed(1)}%
+                      </span>
+                    )}
                   </div>
                 </div>
               </Button>
diff --git a/src/ui/dashboard/hooks/useDashboardPreferences.ts b/src/ui/dashboard/hooks/useDashboardPreferences.ts
index 3b262d78..7860e227 100644
--- a/src/ui/dashboard/hooks/useDashboardPreferences.ts
+++ b/src/ui/dashboard/hooks/useDashboardPreferences.ts
@@ -5,6 +5,8 @@ import {
   type DashboardLayout,
 } from "@/main-axios";
 
+const LS_KEY = "dashboardLayout";
+
 const DEFAULT_LAYOUT: DashboardLayout = {
   cards: [
     { id: "server_overview", enabled: true, order: 1, panel: "main" },
@@ -16,6 +18,42 @@ const DEFAULT_LAYOUT: DashboardLayout = {
   mainWidthPct: 68,
 };
 
+function migrateLayout(preferences: DashboardLayout): DashboardLayout {
+  const needsMigration = preferences.cards.some((c) => !c.panel);
+  if (!needsMigration) return preferences;
+  const defaultCardMap = new Map(DEFAULT_LAYOUT.cards.map((c) => [c.id, c]));
+  return {
+    ...preferences,
+    mainWidthPct: preferences.mainWidthPct ?? DEFAULT_LAYOUT.mainWidthPct,
+    cards: preferences.cards.map((c) => ({
+      ...c,
+      panel: c.panel ?? defaultCardMap.get(c.id)?.panel ?? "main",
+    })),
+  };
+}
+
+function readFromLocalStorage(): DashboardLayout | null {
+  try {
+    const raw = localStorage.getItem(LS_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (parsed?.cards && Array.isArray(parsed.cards)) {
+      return migrateLayout(parsed);
+    }
+  } catch {
+    // ignore
+  }
+  return null;
+}
+
+function writeToLocalStorage(layout: DashboardLayout) {
+  try {
+    localStorage.setItem(LS_KEY, JSON.stringify(layout));
+  } catch {
+    // ignore
+  }
+}
+
 export function useDashboardPreferences(enabled: boolean = true) {
   const [layout, setLayout] = useState<DashboardLayout | null>(null);
   const [loading, setLoading] = useState(true);
@@ -28,34 +66,29 @@ export function useDashboardPreferences(enabled: boolean = true) {
       return;
     }
 
+    // Show cached layout immediately so the UI doesn't wait for the network
+    const cached = readFromLocalStorage();
+    if (cached) {
+      setLayout(cached);
+      setLoading(false);
+    }
+
     const fetchPreferences = async () => {
       try {
         const preferences = await getDashboardPreferences();
         if (preferences?.cards && Array.isArray(preferences.cards)) {
-          // 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);
-          }
+          const migrated = migrateLayout(preferences);
+          setLayout(migrated);
+          writeToLocalStorage(migrated);
         } else {
-          setLayout(DEFAULT_LAYOUT);
+          if (!cached) {
+            setLayout(DEFAULT_LAYOUT);
+          }
         }
       } catch {
-        setLayout(DEFAULT_LAYOUT);
+        if (!cached) {
+          setLayout(DEFAULT_LAYOUT);
+        }
       } finally {
         setLoading(false);
       }
@@ -67,6 +100,7 @@ export function useDashboardPreferences(enabled: boolean = true) {
   const updateLayout = useCallback(
     (newLayout: DashboardLayout) => {
       setLayout(newLayout);
+      writeToLocalStorage(newLayout);
 
       if (saveTimeout) {
         clearTimeout(saveTimeout);
@@ -87,6 +121,7 @@ export function useDashboardPreferences(enabled: boolean = true) {
 
   const resetLayout = useCallback(async () => {
     setLayout(DEFAULT_LAYOUT);
+    writeToLocalStorage(DEFAULT_LAYOUT);
     try {
       await saveDashboardPreferences(DEFAULT_LAYOUT);
     } catch (error) {
diff --git a/src/ui/features/file-manager/FileManager.tsx b/src/ui/features/file-manager/FileManager.tsx
index 3476a757..41a142db 100644
--- a/src/ui/features/file-manager/FileManager.tsx
+++ b/src/ui/features/file-manager/FileManager.tsx
@@ -529,7 +529,9 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
       }
 
       handleCloseWithError(
-        t("fileManager.failedToConnect") + ": " + (error.message || error),
+        t("fileManager.failedToConnect") +
+          ": " +
+          (error instanceof Error ? error.message : String(error)),
       );
     } finally {
       setIsLoading(false);
@@ -837,10 +839,10 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
       handleRefreshDirectory();
     } catch (error: unknown) {
       toast.dismiss(progressToast);
-
+      const uploadErr = error instanceof Error ? error : null;
       if (
-        error.message?.includes("connection") ||
-        error.message?.includes("established")
+        uploadErr?.message?.includes("connection") ||
+        uploadErr?.message?.includes("established")
       ) {
         toast.error(
           t("fileManager.sshConnectionFailed", {
@@ -864,21 +866,25 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
 
       const response = await downloadSSHFile(sshSessionId, file.path);
 
-      if (response?.content) {
-        const byteCharacters = atob(response.content);
+      const content = response?.content as string | undefined;
+      const mimeType = response?.mimeType as string | undefined;
+      const fileName = response?.fileName as string | undefined;
+
+      if (content) {
+        const byteCharacters = atob(content);
         const byteNumbers = new Array(byteCharacters.length);
         for (let i = 0; i < byteCharacters.length; i++) {
           byteNumbers[i] = byteCharacters.charCodeAt(i);
         }
         const byteArray = new Uint8Array(byteNumbers);
         const blob = new Blob([byteArray], {
-          type: response.mimeType || "application/octet-stream",
+          type: mimeType || "application/octet-stream",
         });
 
         const url = URL.createObjectURL(blob);
         const link = document.createElement("a");
         link.href = url;
-        link.download = response.fileName || file.name;
+        link.download = fileName || file.name;
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link);
@@ -891,9 +897,10 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
         toast.error(t("fileManager.failedToDownloadFile"));
       }
     } catch (error: unknown) {
+      const err = error instanceof Error ? error : null;
       if (
-        error.message?.includes("connection") ||
-        error.message?.includes("established")
+        err?.message?.includes("connection") ||
+        err?.message?.includes("established")
       ) {
         toast.error(
           t("fileManager.sshConnectionFailed", {
@@ -977,7 +984,10 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
           clearSelection();
         } catch (error: unknown) {
           const axiosError = error as {
-            response?: { data?: { needsSudo?: boolean; error?: string } };
+            response?: {
+              data?: { needsSudo?: boolean; error?: string };
+              status?: number;
+            };
             message?: string;
           };
           if (axiosError.response?.data?.needsSudo) {
@@ -986,11 +996,22 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
             return;
           }
           if (
+            axiosError.response?.status === 403 ||
+            axiosError.response?.data?.error
+              ?.toLowerCase()
+              .includes("permission denied")
+          ) {
+            toast.error(t("fileManager.permissionDenied"));
+          } else if (
             axiosError.message?.includes("connection") ||
             axiosError.message?.includes("established")
           ) {
             toast.error(
-              `SSH connection failed. Please check your connection to ${currentHost?.name} (${currentHost?.ip}:${currentHost?.port})`,
+              t("fileManager.sshConnectionFailed", {
+                name: currentHost?.name,
+                ip: currentHost?.ip,
+                port: currentHost?.port,
+              }),
             );
           } else {
             toast.error(t("fileManager.failedToDeleteItems"));
@@ -1305,16 +1326,28 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
           }
         } catch (error: unknown) {
           console.error(`Failed to ${operation} file ${file.name}:`, error);
-          toast.error(
-            t("fileManager.operationFailed", {
-              operation:
-                operation === "copy"
-                  ? t("fileManager.copy")
-                  : t("fileManager.move"),
-              name: file.name,
-              error: error.message,
-            }),
-          );
+          const axiosError = error as {
+            response?: { status?: number; data?: { error?: string } };
+          };
+          if (
+            axiosError.response?.status === 403 ||
+            axiosError.response?.data?.error
+              ?.toLowerCase()
+              .includes("permission denied")
+          ) {
+            toast.error(t("fileManager.permissionDenied"));
+          } else {
+            toast.error(
+              t("fileManager.operationFailed", {
+                operation:
+                  operation === "copy"
+                    ? t("fileManager.copy")
+                    : t("fileManager.move"),
+                name: file.name,
+                error: error instanceof Error ? error.message : String(error),
+              }),
+            );
+          }
         }
       }
 
@@ -1405,9 +1438,9 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
         setClipboard(null);
       }
     } catch (error: unknown) {
-      toast.error(
-        `${t("fileManager.pasteFailed")}: ${error.message || t("fileManager.unknownError")}`,
-      );
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      toast.error(`${t("fileManager.pasteFailed")}: ${errorMessage}`);
     }
   }
 
@@ -1433,10 +1466,9 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
 
       handleRefreshDirectory();
     } catch (error: unknown) {
-      const err = error as { message?: string };
-      toast.error(
-        `${t("fileManager.extractFailed")}: ${err.message || t("fileManager.unknownError")}`,
-      );
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      toast.error(`${t("fileManager.extractFailed")}: ${errorMessage}`);
     }
   }
 
@@ -1478,10 +1510,9 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
       handleRefreshDirectory();
       clearSelection();
     } catch (error: unknown) {
-      const err = error as { message?: string };
-      toast.error(
-        `${t("fileManager.compressFailed")}: ${err.message || t("fileManager.unknownError")}`,
-      );
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      toast.error(`${t("fileManager.compressFailed")}: ${errorMessage}`);
     }
   }
 
@@ -1521,7 +1552,8 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                 toast.error(
                   t("fileManager.deleteCopiedFileFailed", {
                     name: copiedFile.targetName,
-                    error: error.message,
+                    error:
+                      error instanceof Error ? error.message : String(error),
                   }),
                 );
               }
@@ -1563,7 +1595,8 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                 toast.error(
                   t("fileManager.moveBackFileFailed", {
                     name: movedFile.targetName,
-                    error: error.message,
+                    error:
+                      error instanceof Error ? error.message : String(error),
                   }),
                 );
               }
@@ -1596,9 +1629,9 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
 
       handleRefreshDirectory();
     } catch (error: unknown) {
-      toast.error(
-        `${t("fileManager.undoOperationFailed")}: ${error.message || t("fileManager.unknownError")}`,
-      );
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      toast.error(`${t("fileManager.undoOperationFailed")}: ${errorMessage}`);
       console.error("Undo failed:", error);
     }
   }
@@ -1693,8 +1726,20 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
       setCreateIntent(null);
       handleRefreshDirectory();
     } catch (error: unknown) {
+      const axiosError = error as {
+        response?: { status?: number; data?: { error?: string } };
+      };
+      if (
+        axiosError.response?.status === 403 ||
+        axiosError.response?.data?.error
+          ?.toLowerCase()
+          .includes("permission denied")
+      ) {
+        toast.error(t("fileManager.permissionDenied"));
+      } else {
+        toast.error(t("fileManager.failedToCreateItem"));
+      }
       console.error("Create failed:", error);
-      toast.error(t("fileManager.failedToCreateItem"));
     }
   }
 
@@ -1722,8 +1767,20 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
       setEditingFile(null);
       handleRefreshDirectory();
     } catch (error: unknown) {
+      const axiosError = error as {
+        response?: { status?: number; data?: { error?: string } };
+      };
+      if (
+        axiosError.response?.status === 403 ||
+        axiosError.response?.data?.error
+          ?.toLowerCase()
+          .includes("permission denied")
+      ) {
+        toast.error(t("fileManager.permissionDenied"));
+      } else {
+        toast.error(t("fileManager.failedToRenameItem"));
+      }
       console.error("Rename failed:", error);
-      toast.error(t("fileManager.failedToRenameItem"));
     }
   }
 
@@ -1907,7 +1964,9 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
       setAuthDialogReason("auth_failed");
       setShowAuthDialog(true);
       toast.error(
-        t("fileManager.failedToConnect") + ": " + (error.message || error),
+        t("fileManager.failedToConnect") +
+          ": " +
+          (error instanceof Error ? error.message : String(error)),
       );
     } finally {
       setIsLoading(false);
@@ -1976,7 +2035,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
           toast.error(
             t("fileManager.moveFileFailed", { name: file.name }) +
               ": " +
-              error.message,
+              (error instanceof Error ? error.message : String(error)),
           );
         }
       }
@@ -2019,7 +2078,11 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
       }
     } catch (error: unknown) {
       console.error("Drag move operation failed:", error);
-      toast.error(t("fileManager.moveOperationFailed") + ": " + error.message);
+      toast.error(
+        t("fileManager.moveOperationFailed") +
+          ": " +
+          (error instanceof Error ? error.message : String(error)),
+      );
     }
   }
 
@@ -2093,7 +2156,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
       toast.error(
         t("fileManager.dragFailed") +
           ": " +
-          (error.message || t("fileManager.unknownError")),
+          (error instanceof Error ? error.message : String(error)),
       );
     }
   }
@@ -2359,6 +2422,25 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
     );
   }
 
+  if ((isLoading || isReconnecting) && !sshSessionId) {
+    return (
+      <div className="h-full w-full flex flex-col bg-background relative">
+        <div className="flex-1 overflow-hidden min-h-0 relative">
+          <SimpleLoader
+            visible={!isConnectionLogExpanded}
+            message={t("fileManager.connecting")}
+          />
+        </div>
+        <ConnectionLog
+          isConnecting={isLoading || isReconnecting}
+          isConnected={false}
+          hasConnectionError={hasConnectionError}
+          position={hasConnectionError ? "top" : "bottom"}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="h-full flex flex-col bg-background relative">
       <div
@@ -2823,10 +2905,6 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
         }}
         onSubmit={handleSudoPasswordSubmit}
       />
-      <SimpleLoader
-        visible={(isReconnecting || isLoading) && !isConnectionLogExpanded}
-        message={t("fileManager.connecting")}
-      />
       <ConnectionLog
         isConnecting={isReconnecting || isLoading}
         isConnected={!!sshSessionId}
diff --git a/src/ui/features/file-manager/FileManagerContextMenu.tsx b/src/ui/features/file-manager/FileManagerContextMenu.tsx
index 12eb7a2d..a7410e5b 100644
--- a/src/ui/features/file-manager/FileManagerContextMenu.tsx
+++ b/src/ui/features/file-manager/FileManagerContextMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "@/lib/utils.ts";
 import {
   Download,
@@ -143,14 +143,6 @@ export function FileManagerContextMenu({
 
     setIsMounted(true);
 
-    const adjustPosition = () => {
-      const menuWidth = menuRef.current?.offsetWidth ?? 260;
-      const menuHeight = menuRef.current?.offsetHeight ?? 400;
-      setMenuPosition(getClampedMenuPosition(x, y, menuWidth, menuHeight));
-    };
-
-    adjustPosition();
-
     let cleanupFn: (() => void) | null = null;
 
     const timeoutId = setTimeout(() => {
@@ -206,6 +198,21 @@ export function FileManagerContextMenu({
     };
   }, [isVisible, x, y, onClose]);
 
+  useLayoutEffect(() => {
+    if (!isVisible || !menuRef.current) return;
+    const menuWidth = menuRef.current.offsetWidth;
+    const menuHeight = menuRef.current.offsetHeight;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    let adjustedX = x;
+    let adjustedY = y;
+    if (x + menuWidth > viewportWidth)
+      adjustedX = viewportWidth - menuWidth - 10;
+    if (y + menuHeight > viewportHeight)
+      adjustedY = Math.max(10, viewportHeight - menuHeight - 10);
+    setMenuPosition({ x: adjustedX, y: adjustedY });
+  }, [isVisible, x, y, files.length]);
+
   const isFileContext = files.length > 0;
   const isSingleFile = files.length === 1;
   const isMultipleFiles = files.length > 1;
@@ -569,7 +576,9 @@ export function FileManagerContextMenu({
             >
               <div className="flex items-center gap-2.5 flex-1 min-w-0">
                 <div className="flex-shrink-0">{item.icon}</div>
-                <span className="flex-1 truncate">{item.label}</span>
+                <span className="flex-1 whitespace-normal break-words">
+                  {item.label}
+                </span>
               </div>
               {item.shortcut && (
                 <div className="ml-2 flex-shrink-0">
diff --git a/src/ui/features/file-manager/components/PdfPreview.tsx b/src/ui/features/file-manager/components/PdfPreview.tsx
index b13ec2ef..b678f626 100644
--- a/src/ui/features/file-manager/components/PdfPreview.tsx
+++ b/src/ui/features/file-manager/components/PdfPreview.tsx
@@ -4,7 +4,8 @@ import { AlertCircle, Download } from "lucide-react";
 import { Button } from "@/components/button.tsx";
 import { useTranslation } from "react-i18next";
 
-pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.js";
+import workerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";
+pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
 
 interface PdfPreviewProps {
   content: string;
diff --git a/src/ui/features/file-manager/components/TerminalWindow.tsx b/src/ui/features/file-manager/components/TerminalWindow.tsx
index e4666b7f..55c17063 100644
--- a/src/ui/features/file-manager/components/TerminalWindow.tsx
+++ b/src/ui/features/file-manager/components/TerminalWindow.tsx
@@ -3,6 +3,7 @@ import { DraggableWindow } from "./DraggableWindow.tsx";
 import { Terminal } from "@/features/terminal/Terminal.tsx";
 import { useWindowManager } from "./WindowManager.tsx";
 import { useTranslation } from "react-i18next";
+import { CommandHistoryProvider } from "@/features/terminal/command-history/CommandHistoryContext.tsx";
 
 interface SSHHost {
   id: number;
@@ -96,29 +97,31 @@ export function TerminalWindow({
       : t("terminal.terminalTitle", { host: hostConfig.name });
 
   return (
-    <DraggableWindow
-      title={terminalTitle}
-      initialX={initialX}
-      initialY={initialY}
-      initialWidth={800}
-      initialHeight={500}
-      minWidth={600}
-      minHeight={400}
-      onClose={handleClose}
-      onMaximize={handleMaximize}
-      onFocus={handleFocus}
-      onResize={handleResize}
-      isMaximized={currentWindow.isMaximized}
-      zIndex={currentWindow.zIndex}
-    >
-      <Terminal
-        ref={terminalRef}
-        hostConfig={hostConfig}
-        isVisible={!currentWindow.isMinimized}
-        initialPath={initialPath}
-        executeCommand={executeCommand}
+    <CommandHistoryProvider>
+      <DraggableWindow
+        title={terminalTitle}
+        initialX={initialX}
+        initialY={initialY}
+        initialWidth={800}
+        initialHeight={500}
+        minWidth={600}
+        minHeight={400}
         onClose={handleClose}
-      />
-    </DraggableWindow>
+        onMaximize={handleMaximize}
+        onFocus={handleFocus}
+        onResize={handleResize}
+        isMaximized={currentWindow.isMaximized}
+        zIndex={currentWindow.zIndex}
+      >
+        <Terminal
+          ref={terminalRef}
+          hostConfig={hostConfig}
+          isVisible={!currentWindow.isMinimized}
+          initialPath={initialPath}
+          executeCommand={executeCommand}
+          onClose={handleClose}
+        />
+      </DraggableWindow>
+    </CommandHistoryProvider>
   );
 }
diff --git a/src/ui/locales/en.json b/src/ui/locales/en.json
index 7abb48e5..ec2c0d51 100644
--- a/src/ui/locales/en.json
+++ b/src/ui/locales/en.json
@@ -1679,6 +1679,7 @@
     "connectionLogClear": "Clear logs",
     "connectionLogEmpty": "No connection logs yet",
     "connectionLogConnecting": "Connecting to host...",
+    "connectionLogWaiting": "Waiting for connection logs...",
     "connectionLogCopied": "Connection logs copied to clipboard",
     "connectionLogCopyFailed": "Failed to copy logs to clipboard",
     "allAuthMethodsFailed": "All authentication methods failed. Please check your credentials.",
@@ -2774,7 +2775,31 @@
     "quickActionsCard": "Quick Actions",
     "serverStatsCard": "Server Stats",
     "panelMain": "Main",
-    "panelSide": "Side"
+    "panelSide": "Side",
+    "justNow": "just now"
+  },
+  "dashboardTab": {
+    "stable": "STABLE",
+    "hostsOnline": "Hosts Online",
+    "activeTunnels": "Active Tunnels",
+    "registerNewServer": "Register a new server",
+    "storeSshKeysOrPasswords": "Store SSH keys or passwords",
+    "manageUsersAndRoles": "Manage users and roles",
+    "manageYourAccount": "Manage your account",
+    "hostStatus": "Host Status",
+    "noHostsConfigured": "No hosts configured",
+    "online": "ONLINE",
+    "offline": "OFFLINE",
+    "onlineLower": "Online",
+    "offlineLower": "Offline",
+    "nodes": "{{count}} nodes",
+    "noHostsToDisplay": "No hosts to display",
+    "add": "Add:",
+    "commandPalette": "Command Palette",
+    "done": "Done",
+    "editModeInstructions": "Drag cards to reorder · Drag the column divider to resize columns · Drag the bottom edge of a card to resize its height · Trash to remove",
+    "empty": "Empty",
+    "clear": "Clear"
   },
   "networkGraph": {
     "title": "Network Graph",
diff --git a/src/ui/shell/TabBar.tsx b/src/ui/shell/TabBar.tsx
index 8b4f7501..0ac61d59 100644
--- a/src/ui/shell/TabBar.tsx
+++ b/src/ui/shell/TabBar.tsx
@@ -69,7 +69,7 @@ export function TabBar({
       const barRect = tabBarRef.current.getBoundingClientRect();
       const x = Math.max(
         barRect.left,
-        Math.min(barRect.right - d.width, e.clientX - d.offsetX),
+        Math.min(barRect.right - d.width - 4, e.clientX - d.offsetX),
       );
       const y = d.barTop;
       setDragPos({ x, y });
diff --git a/src/ui/sidebar/HostManager.tsx b/src/ui/sidebar/HostManager.tsx
index cbc60222..f01248e6 100644
--- a/src/ui/sidebar/HostManager.tsx
+++ b/src/ui/sidebar/HostManager.tsx
@@ -63,6 +63,23 @@ import {
   deleteSSHHost,
   createCredential,
   updateCredential,
+  deleteCredential,
+  getAllServerStatuses,
+  getServerMetricsById,
+  bulkImportSSHHosts,
+  bulkUpdateSSHHosts,
+  generateKeyPair,
+  generatePublicKeyFromPrivate,
+  deployCredentialToHost,
+  getSnippets,
+  getUserList,
+  getRoles,
+  shareHost,
+  getHostAccess,
+  revokeHostAccess,
+  renameFolder,
+  refreshServerPolling,
+  deleteAllHostsInFolder,
 } from "@/main-axios";
 import type { SSHHostWithStatus } from "@/main-axios";
 
@@ -75,8 +92,8 @@ function sshHostToHost(h: SSHHostWithStatus): Host {
     port: h.port,
     folder: h.folder ?? "",
     online: h.status === "online",
-    cpu: 0,
-    ram: 0,
+    cpu: null,
+    ram: null,
     lastAccess: "",
     tags: h.tags ?? [],
     authType: h.authType,
@@ -93,9 +110,9 @@ function sshHostToHost(h: SSHHostWithStatus): Host {
     enableTunnel: h.enableTunnel ?? false,
     enableFileManager: h.enableFileManager ?? false,
     enableDocker: h.enableDocker ?? false,
-    enableRdp: h.connectionType === "rdp",
-    enableVnc: h.connectionType === "vnc",
-    enableTelnet: h.connectionType === "telnet",
+    enableRdp: h.enableRdp ?? h.connectionType === "rdp",
+    enableVnc: h.enableVnc ?? h.connectionType === "vnc",
+    enableTelnet: h.enableTelnet ?? h.connectionType === "telnet",
     sshPort: h.port,
     rdpPort: 3389,
     vncPort: 5900,
@@ -232,6 +249,8 @@ function HostRow({
 
   const hasSsh = host.enableSsh;
 
+  const metricsEnabled = host.statsConfig?.metricsEnabled !== false;
+
   const sshActions: { type: string; icon: typeof Terminal; label: string }[] = [
     host.enableTerminal && {
       type: "terminal",
@@ -245,7 +264,7 @@ function HostRow({
     },
     host.enableDocker && { type: "docker", icon: Box, label: "Docker" },
     host.enableTunnel && { type: "tunnel", icon: Network, label: "Tunnels" },
-    { type: "stats", icon: Server, label: "Stats" },
+    metricsEnabled && { type: "stats", icon: Server, label: "Stats" },
   ].filter(Boolean) as { type: string; icon: typeof Terminal; label: string }[];
 
   const fireOpen = (type: string) => {
@@ -280,7 +299,7 @@ function HostRow({
 
         {/* Status dot */}
         <div
-          className={`size-1.5 rounded-full shrink-0 ${host.online ? "bg-accent-brand shadow-[0_0_4px_rgba(251,146,60,0.5)]" : "bg-muted-foreground/25"}`}
+          className={`size-1.5 rounded-full shrink-0 ${host.online ? `bg-accent-brand${selectionMode ? "" : " shadow-[0_0_4px_rgba(251,146,60,0.5)]"}` : "bg-muted-foreground/25"}`}
         />
 
         {/* Name + badges */}
@@ -325,34 +344,42 @@ function HostRow({
 
         {/* Right: last access always visible, CPU/RAM on hover */}
         <div className="flex items-center gap-2 shrink-0">
-          {host.online && hovered && (
-            <div className="flex items-center gap-2">
-              <div className="flex items-center gap-1">
-                <span className="text-[9px] text-muted-foreground/50">CPU</span>
-                <div className="w-10 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
-                  <div
-                    className={`h-full rounded-full ${host.cpu! > 80 ? "bg-red-400" : host.cpu! > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
-                    style={{ width: `${host.cpu}%` }}
-                  />
+          {host.online &&
+            hovered &&
+            metricsEnabled &&
+            host.cpu != null &&
+            host.ram != null && (
+              <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1">
+                  <span className="text-[9px] text-muted-foreground/50">
+                    CPU
+                  </span>
+                  <div className="w-10 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
+                      style={{ width: `${host.cpu}%` }}
+                    />
+                  </div>
+                  <span className="text-[9px] tabular-nums text-accent-brand font-bold">
+                    {host.cpu}%
+                  </span>
                 </div>
-                <span className="text-[9px] tabular-nums text-accent-brand font-bold">
-                  {host.cpu}%
-                </span>
-              </div>
-              <div className="flex items-center gap-1">
-                <span className="text-[9px] text-muted-foreground/50">RAM</span>
-                <div className="w-10 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
-                  <div
-                    className={`h-full rounded-full ${host.ram! > 80 ? "bg-red-400" : host.ram! > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
-                    style={{ width: `${host.ram}%` }}
-                  />
+                <div className="flex items-center gap-1">
+                  <span className="text-[9px] text-muted-foreground/50">
+                    RAM
+                  </span>
+                  <div className="w-10 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
+                      style={{ width: `${host.ram}%` }}
+                    />
+                  </div>
+                  <span className="text-[9px] tabular-nums text-accent-brand font-bold">
+                    {host.ram}%
+                  </span>
                 </div>
-                <span className="text-[9px] tabular-nums text-accent-brand font-bold">
-                  {host.ram}%
-                </span>
               </div>
-            </div>
-          )}
+            )}
           <span className="text-[10px] text-muted-foreground/40 tabular-nums shrink-0">
             {host.lastAccess}
           </span>
@@ -390,7 +417,7 @@ function HostRow({
       </div>
 
       {/* Hover action tray */}
-      {hovered && !selectionMode && (
+      {(hovered || selectionMode) && (
         <div
           className="border-t border-border/40"
           style={{ marginLeft: depth > 0 ? `-${depth * 12 + 8}px` : undefined }}
@@ -594,7 +621,8 @@ function HostEditor({
     keyPassword: host?.keyPassword ?? "",
     credentialId: host?.credentialId ?? "",
     folder: host?.folder ?? "",
-    tags: host?.tags?.join(" ") ?? "",
+    tags: host?.tags ?? ([] as string[]),
+    tagInput: "",
     notes: host?.notes ?? "",
     pin: host?.pin ?? false,
     macAddress: host?.macAddress ?? "",
@@ -607,7 +635,7 @@ function HostEditor({
     enableFileManager: host?.enableFileManager ?? false,
     enableDocker: host?.enableDocker ?? false,
     enableTunnel: host?.enableTunnel ?? false,
-    defaultPath: host?.defaultPath ?? "~",
+    defaultPath: host?.defaultPath ?? "/",
     fontSize: host?.terminalConfig?.fontSize ?? 14,
     fontFamily: host?.terminalConfig?.fontFamily ?? "JetBrains Mono",
     theme: host?.terminalConfig?.theme ?? "Termix Dark",
@@ -668,14 +696,63 @@ function HostEditor({
     setForm((p) => ({ ...p, [k]: v }));
 
   const [saving, setSaving] = useState(false);
+  const [snippets, setSnippets] = useState<{ id: number; name: string }[]>([]);
+  const [shareType, setShareType] = useState<"user" | "role">("user");
+  const [shareGranteeId, setShareGranteeId] = useState("");
+  const [sharePermission, setSharePermission] = useState("view");
+  const [shareExpiryHours, setShareExpiryHours] = useState("");
+  const [accessList, setAccessList] = useState<any[]>([]);
+  const [shareUsers, setShareUsers] = useState<
+    { id: string; username: string }[]
+  >([]);
+  const [shareRoles, setShareRoles] = useState<{ id: string; name: string }[]>(
+    [],
+  );
+  const [sharingLoaded, setSharingLoaded] = useState(false);
+
+  useEffect(() => {
+    getSnippets()
+      .then((res: any) => {
+        const arr = Array.isArray(res) ? res : (res?.snippets ?? []);
+        setSnippets(
+          arr.map((s: any) => ({
+            id: s.id,
+            name: s.name ?? s.title ?? `Snippet ${s.id}`,
+          })),
+        );
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    if (activeTab !== "sharing" || !host) return;
+    if (sharingLoaded) return;
+    setSharingLoaded(true);
+    Promise.all([
+      getHostAccess(Number(host.id)).catch(() => ({ access: [] })),
+      getUserList().catch(() => ({ users: [] })),
+      getRoles().catch(() => ({ roles: [] })),
+    ]).then(([accessRes, usersRes, rolesRes]) => {
+      setAccessList((accessRes as any)?.access ?? []);
+      setShareUsers(
+        ((usersRes as any)?.users ?? []).map((u: any) => ({
+          id: String(u.id ?? u.userId),
+          username: u.username,
+        })),
+      );
+      setShareRoles(
+        ((rolesRes as any)?.roles ?? []).map((r: any) => ({
+          id: String(r.id),
+          name: r.name,
+        })),
+      );
+    });
+  }, [activeTab, host, sharingLoaded]);
 
   const handleSave = async () => {
     setSaving(true);
     try {
-      const tags = form.tags
-        .split(/\s+/)
-        .map((t) => t.trim())
-        .filter(Boolean);
+      const tags = form.tags;
       const data = {
         connectionType: protocols.enableSsh
           ? "ssh"
@@ -708,7 +785,7 @@ function HostEditor({
         enableTunnel: form.enableTunnel,
         enableFileManager: form.enableFileManager,
         enableDocker: form.enableDocker,
-        defaultPath: form.defaultPath || "~",
+        defaultPath: form.defaultPath || "/",
         useSocks5: form.useSocks5,
         socks5Host: form.socks5Host || null,
         socks5Port: form.socks5Port || null,
@@ -847,24 +924,6 @@ function HostEditor({
                         <span className="text-[10px] text-muted-foreground/50">
                           {desc}
                         </span>
-                        {enabled && (
-                          <div className="flex items-center gap-1.5 mt-0.5">
-                            <span className="text-[10px] text-muted-foreground/60">
-                              Port
-                            </span>
-                            <Input
-                              type="number"
-                              value={form[portField]}
-                              onChange={(e) =>
-                                setField(
-                                  portField,
-                                  Number(e.target.value) as any,
-                                )
-                              }
-                              className="h-6 w-16 text-[10px] px-2"
-                            />
-                          </div>
-                        )}
                       </div>
                       <FakeSwitch
                         checked={enabled}
@@ -1094,11 +1153,52 @@ function HostEditor({
                   <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                     Tags
                   </label>
-                  <Input
-                    placeholder="space separated"
-                    value={form.tags}
-                    onChange={(e) => setField("tags", e.target.value)}
-                  />
+                  <div className="flex flex-wrap items-center gap-1 min-h-9 px-2 py-1 border border-border bg-background focus-within:ring-1 focus-within:ring-ring">
+                    {form.tags.map((tag) => (
+                      <span
+                        key={tag}
+                        className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] bg-muted border border-border/60 text-foreground"
+                      >
+                        {tag}
+                        <button
+                          type="button"
+                          onClick={() =>
+                            setField(
+                              "tags",
+                              form.tags.filter((t) => t !== tag),
+                            )
+                          }
+                          className="text-muted-foreground hover:text-destructive ml-0.5"
+                        >
+                          <X className="size-2.5" />
+                        </button>
+                      </span>
+                    ))}
+                    <input
+                      className="flex-1 min-w-16 text-xs bg-transparent outline-none placeholder:text-muted-foreground/50"
+                      placeholder={form.tags.length === 0 ? "Add tags..." : ""}
+                      value={form.tagInput}
+                      onChange={(e) => setField("tagInput", e.target.value)}
+                      onKeyDown={(e) => {
+                        if (
+                          (e.key === " " || e.key === "Enter") &&
+                          form.tagInput.trim()
+                        ) {
+                          e.preventDefault();
+                          const tag = form.tagInput.trim();
+                          if (!form.tags.includes(tag))
+                            setField("tags", [...form.tags, tag]);
+                          setField("tagInput", "");
+                        } else if (
+                          e.key === "Backspace" &&
+                          !form.tagInput &&
+                          form.tags.length > 0
+                        ) {
+                          setField("tags", form.tags.slice(0, -1));
+                        }
+                      }}
+                    />
+                  </div>
                 </div>
                 <div className="flex flex-col gap-1.5 col-span-2">
                   <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
@@ -1150,53 +1250,68 @@ function HostEditor({
                   {form.portKnockSequence.map((knock, i) => (
                     <div
                       key={i}
-                      className="flex items-center gap-1.5 p-1.5 bg-muted/30 border border-border"
+                      className="flex items-end gap-1.5 p-1.5 bg-muted/30 border border-border"
                     >
-                      <Input
-                        className="h-7 text-xs w-16"
-                        placeholder="Port"
-                        type="number"
-                        value={knock.port}
-                        onChange={(e) => {
-                          const updated = [...form.portKnockSequence];
-                          updated[i] = {
-                            ...updated[i],
-                            port: Number(e.target.value),
-                          };
-                          setField("portKnockSequence", updated);
-                        }}
-                      />
-                      <select
-                        className="h-7 text-[10px] bg-background border border-border px-1"
-                        value={knock.protocol}
-                        onChange={(e) => {
-                          const updated = [...form.portKnockSequence];
-                          updated[i] = {
-                            ...updated[i],
-                            protocol: e.target.value as "tcp" | "udp",
-                          };
-                          setField("portKnockSequence", updated);
-                        }}
-                      >
-                        <option value="tcp">TCP</option>
-                        <option value="udp">UDP</option>
-                      </select>
-                      <Input
-                        className="h-7 text-xs w-20"
-                        placeholder="Delay (ms)"
-                        type="number"
-                        value={knock.delay}
-                        onChange={(e) => {
-                          const updated = [...form.portKnockSequence];
-                          updated[i] = {
-                            ...updated[i],
-                            delay: Number(e.target.value),
-                          };
-                          setField("portKnockSequence", updated);
-                        }}
-                      />
+                      <div className="flex flex-col gap-0.5">
+                        <span className="text-[9px] text-muted-foreground/60 uppercase font-bold tracking-wide px-0.5">
+                          Port
+                        </span>
+                        <Input
+                          className="h-7 text-xs w-16 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                          placeholder="8080"
+                          type="number"
+                          value={knock.port}
+                          onChange={(e) => {
+                            const updated = [...form.portKnockSequence];
+                            updated[i] = {
+                              ...updated[i],
+                              port: Number(e.target.value),
+                            };
+                            setField("portKnockSequence", updated);
+                          }}
+                        />
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        <span className="text-[9px] text-muted-foreground/60 uppercase font-bold tracking-wide px-0.5">
+                          Protocol
+                        </span>
+                        <select
+                          className="h-7 text-[10px] bg-background border border-border px-1"
+                          value={knock.protocol}
+                          onChange={(e) => {
+                            const updated = [...form.portKnockSequence];
+                            updated[i] = {
+                              ...updated[i],
+                              protocol: e.target.value as "tcp" | "udp",
+                            };
+                            setField("portKnockSequence", updated);
+                          }}
+                        >
+                          <option value="tcp">TCP</option>
+                          <option value="udp">UDP</option>
+                        </select>
+                      </div>
+                      <div className="flex flex-col gap-0.5">
+                        <span className="text-[9px] text-muted-foreground/60 uppercase font-bold tracking-wide px-0.5">
+                          Delay (ms)
+                        </span>
+                        <Input
+                          className="h-7 text-xs w-20 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                          placeholder="100"
+                          type="number"
+                          value={knock.delay}
+                          onChange={(e) => {
+                            const updated = [...form.portKnockSequence];
+                            updated[i] = {
+                              ...updated[i],
+                              delay: Number(e.target.value),
+                            };
+                            setField("portKnockSequence", updated);
+                          }}
+                        />
+                      </div>
                       <button
-                        className="text-destructive p-1"
+                        className="text-destructive p-1 mb-0.5"
                         onClick={() =>
                           setField(
                             "portKnockSequence",
@@ -1218,6 +1333,27 @@ function HostEditor({
 
         {activeTab === "ssh" && (
           <>
+            <SectionCard
+              title="Connection"
+              icon={<Globe className="size-3.5" />}
+            >
+              <div className="flex flex-col gap-4 py-3">
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                    SSH Port
+                  </label>
+                  <Input
+                    type="number"
+                    placeholder="22"
+                    value={form.sshPort}
+                    onChange={(e) =>
+                      setField("sshPort", Number(e.target.value) as any)
+                    }
+                    className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  />
+                </div>
+              </div>
+            </SectionCard>
             <SectionCard
               title="Authentication"
               icon={<Shield className="size-3.5" />}
@@ -1427,6 +1563,7 @@ function HostEditor({
                       onChange={(e) =>
                         setField("fontSize", Number(e.target.value) as any)
                       }
+                      className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                     />
                   </div>
                   <div className="flex flex-col gap-1.5">
@@ -1473,6 +1610,7 @@ function HostEditor({
                     onChange={(e) =>
                       setField("scrollback", Number(e.target.value) as any)
                     }
+                    className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
                   />
                   <span className="text-[10px] text-muted-foreground">
                     Maximum number of lines kept in history
@@ -1894,7 +2032,7 @@ function HostEditor({
                   Default Path
                 </label>
                 <Input
-                  placeholder="~"
+                  placeholder="/"
                   value={form.defaultPath}
                   onChange={(e) => setField("defaultPath", e.target.value)}
                 />
@@ -1942,22 +2080,24 @@ function HostEditor({
                     }
                   />
                 </SettingRow>
-                <SettingRow
-                  label="Check Interval (s)"
-                  description="Seconds between each connectivity ping"
-                >
-                  <Input
-                    type="number"
-                    value={form.statsConfig.statusCheckInterval}
-                    onChange={(e) =>
-                      setField("statsConfig", {
-                        ...form.statsConfig,
-                        statusCheckInterval: Number(e.target.value),
-                      })
-                    }
-                    className="w-20 h-7 text-xs text-right"
-                  />
-                </SettingRow>
+                {!form.statsConfig.useGlobalStatusInterval && (
+                  <SettingRow
+                    label="Check Interval (s)"
+                    description="Seconds between each connectivity ping"
+                  >
+                    <Input
+                      type="number"
+                      value={form.statsConfig.statusCheckInterval}
+                      onChange={(e) =>
+                        setField("statsConfig", {
+                          ...form.statsConfig,
+                          statusCheckInterval: Number(e.target.value),
+                        })
+                      }
+                      className="w-20 h-7 text-xs text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                  </SettingRow>
+                )}
               </div>
             </SectionCard>
             <SectionCard
@@ -1993,22 +2133,24 @@ function HostEditor({
                     }
                   />
                 </SettingRow>
-                <SettingRow
-                  label="Metrics Interval (s)"
-                  description="Seconds between metric snapshots"
-                >
-                  <Input
-                    type="number"
-                    value={form.statsConfig.metricsInterval}
-                    onChange={(e) =>
-                      setField("statsConfig", {
-                        ...form.statsConfig,
-                        metricsInterval: Number(e.target.value),
-                      })
-                    }
-                    className="w-20 h-7 text-xs text-right"
-                  />
-                </SettingRow>
+                {!form.statsConfig.useGlobalMetricsInterval && (
+                  <SettingRow
+                    label="Metrics Interval (s)"
+                    description="Seconds between metric snapshots"
+                  >
+                    <Input
+                      type="number"
+                      value={form.statsConfig.metricsInterval}
+                      onChange={(e) =>
+                        setField("statsConfig", {
+                          ...form.statsConfig,
+                          metricsInterval: Number(e.target.value),
+                        })
+                      }
+                      className="w-20 h-7 text-xs text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                  </SettingRow>
+                )}
               </div>
             </SectionCard>
             <SectionCard
@@ -2127,9 +2269,8 @@ function HostEditor({
                         setField("quickActions", updated);
                       }}
                     />
-                    <Input
-                      className="h-7 text-xs flex-1"
-                      placeholder="Snippet ID"
+                    <select
+                      className="h-7 text-xs flex-1 border border-border bg-background px-2 outline-none focus:ring-1 focus:ring-ring"
                       value={a.snippetId}
                       onChange={(e) => {
                         const updated = [...form.quickActions];
@@ -2139,7 +2280,14 @@ function HostEditor({
                         };
                         setField("quickActions", updated);
                       }}
-                    />
+                    >
+                      <option value="">Select snippet...</option>
+                      {snippets.map((s) => (
+                        <option key={s.id} value={String(s.id)}>
+                          {s.name}
+                        </option>
+                      ))}
+                    </select>
                     <button
                       className="text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
                       onClick={() =>
@@ -2160,6 +2308,27 @@ function HostEditor({
 
         {activeTab === "rdp" && (
           <>
+            <SectionCard
+              title="Connection"
+              icon={<Globe className="size-3.5" />}
+            >
+              <div className="flex flex-col gap-4 py-3">
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                    RDP Port
+                  </label>
+                  <Input
+                    type="number"
+                    placeholder="3389"
+                    value={form.rdpPort}
+                    onChange={(e) =>
+                      setField("rdpPort", Number(e.target.value) as any)
+                    }
+                    className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  />
+                </div>
+              </div>
+            </SectionCard>
             <SectionCard
               title="Authentication"
               icon={<Shield className="size-3.5" />}
@@ -2663,6 +2832,27 @@ function HostEditor({
 
         {activeTab === "vnc" && (
           <>
+            <SectionCard
+              title="Connection"
+              icon={<Globe className="size-3.5" />}
+            >
+              <div className="flex flex-col gap-4 py-3">
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                    VNC Port
+                  </label>
+                  <Input
+                    type="number"
+                    placeholder="5900"
+                    value={form.vncPort}
+                    onChange={(e) =>
+                      setField("vncPort", Number(e.target.value) as any)
+                    }
+                    className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  />
+                </div>
+              </div>
+            </SectionCard>
             <SectionCard
               title="Authentication"
               icon={<Shield className="size-3.5" />}
@@ -2905,6 +3095,27 @@ function HostEditor({
 
         {activeTab === "telnet" && (
           <>
+            <SectionCard
+              title="Connection"
+              icon={<Globe className="size-3.5" />}
+            >
+              <div className="flex flex-col gap-4 py-3">
+                <div className="flex flex-col gap-1.5">
+                  <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                    Telnet Port
+                  </label>
+                  <Input
+                    type="number"
+                    placeholder="23"
+                    value={form.telnetPort}
+                    onChange={(e) =>
+                      setField("telnetPort", Number(e.target.value) as any)
+                    }
+                    className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                  />
+                </div>
+              </div>
+            </SectionCard>
             <SectionCard
               title="Authentication"
               icon={<Shield className="size-3.5" />}
@@ -3062,154 +3273,209 @@ function HostEditor({
               </div>
             )}
 
-            <SectionCard
-              title="Share Host"
-              icon={<Users className="size-3.5" />}
-            >
-              <div className="flex flex-col gap-4 py-3">
-                <div className="flex gap-2">
-                  {["user", "role"].map((t) => (
-                    <button
-                      key={t}
-                      className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest border transition-colors ${t === "user" ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
-                    >
-                      {t === "user" ? (
-                        <>
-                          <User className="size-3 inline mr-1" />
-                          Share with User
-                        </>
-                      ) : (
-                        <>
-                          <Shield className="size-3 inline mr-1" />
-                          Share with Role
-                        </>
-                      )}
-                    </button>
-                  ))}
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-                    Select User
-                  </label>
-                  <select className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring">
-                    <option value="">Select a user...</option>
-                    <option>alice</option>
-                    <option>bob</option>
-                    <option>charlie</option>
-                  </select>
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-                    Permission Level
-                  </label>
-                  <div className="px-3 py-2 border border-border bg-muted/30 text-xs text-muted-foreground">
-                    View only
-                  </div>
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-                    Expires in (hours)
-                  </label>
-                  <Input
-                    type="number"
-                    placeholder="Leave empty for no expiry"
-                  />
-                </div>
-                <div className="flex justify-end">
-                  <Button
-                    variant="outline"
-                    className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
-                    onClick={() => toast.success("Host shared successfully")}
-                  >
-                    <Plus className="size-3.5 mr-1.5" />
-                    Share
-                  </Button>
-                </div>
-              </div>
-            </SectionCard>
-
-            <SectionCard
-              title="Current Access"
-              icon={<ListChecks className="size-3.5" />}
-            >
-              <div className="py-2">
-                <div className="grid grid-cols-6 gap-2 px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground border-b border-border">
-                  <span>Type</span>
-                  <span>Target</span>
-                  <span>Permission</span>
-                  <span>Granted By</span>
-                  <span>Expires</span>
-                  <span></span>
-                </div>
-                {[
-                  {
-                    type: "User",
-                    target: "alice",
-                    permission: "View",
-                    grantedBy: "admin",
-                    expires: "Never",
-                    expired: false,
-                  },
-                  {
-                    type: "Role",
-                    target: "Developers",
-                    permission: "View",
-                    grantedBy: "admin",
-                    expires: "2026-06-01",
-                    expired: false,
-                  },
-                  {
-                    type: "User",
-                    target: "bob",
-                    permission: "View",
-                    grantedBy: "alice",
-                    expires: "2026-04-01",
-                    expired: true,
-                  },
-                ].map((r, i) => (
-                  <div
-                    key={i}
-                    className="grid grid-cols-6 gap-2 px-2 py-2.5 border-b border-border last:border-0 items-center text-xs"
-                  >
-                    <div className="flex items-center gap-1">
-                      {r.type === "User" ? (
-                        <User className="size-3 text-muted-foreground" />
-                      ) : (
-                        <Shield className="size-3 text-muted-foreground" />
-                      )}
-                      <span className="text-muted-foreground">{r.type}</span>
-                    </div>
-                    <span className="font-semibold">{r.target}</span>
-                    <span>{r.permission}</span>
-                    <span className="text-muted-foreground">{r.grantedBy}</span>
-                    <span
-                      className={
-                        r.expired ? "text-destructive" : "text-muted-foreground"
-                      }
-                    >
-                      {r.expired ? (
-                        <span className="flex items-center gap-1">
-                          <X className="size-3" />
-                          Expired
-                        </span>
-                      ) : (
-                        r.expires
-                      )}
-                    </span>
-                    <div className="flex justify-end">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="h-6 text-[10px] px-2 text-destructive hover:bg-destructive/10"
-                        onClick={() => toast.success("Access revoked")}
+            {host !== null && (
+              <SectionCard
+                title="Share Host"
+                icon={<Users className="size-3.5" />}
+              >
+                <div className="flex flex-col gap-4 py-3">
+                  <div className="flex gap-2">
+                    {(["user", "role"] as const).map((t) => (
+                      <button
+                        key={t}
+                        onClick={() => {
+                          setShareType(t);
+                          setShareGranteeId("");
+                        }}
+                        className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest border transition-colors ${shareType === t ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
                       >
-                        Revoke
-                      </Button>
-                    </div>
+                        {t === "user" ? (
+                          <>
+                            <User className="size-3 inline mr-1" />
+                            Share with User
+                          </>
+                        ) : (
+                          <>
+                            <Shield className="size-3 inline mr-1" />
+                            Share with Role
+                          </>
+                        )}
+                      </button>
+                    ))}
                   </div>
-                ))}
-              </div>
-            </SectionCard>
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                      {shareType === "user" ? "Select User" : "Select Role"}
+                    </label>
+                    <select
+                      className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
+                      value={shareGranteeId}
+                      onChange={(e) => setShareGranteeId(e.target.value)}
+                    >
+                      <option value="">
+                        Select {shareType === "user" ? "a user" : "a role"}...
+                      </option>
+                      {shareType === "user"
+                        ? shareUsers.map((u) => (
+                            <option key={u.id} value={u.id}>
+                              {u.username}
+                            </option>
+                          ))
+                        : shareRoles.map((r) => (
+                            <option key={r.id} value={r.id}>
+                              {r.name}
+                            </option>
+                          ))}
+                    </select>
+                  </div>
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                      Permission Level
+                    </label>
+                    <select
+                      className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
+                      value={sharePermission}
+                      onChange={(e) => setSharePermission(e.target.value)}
+                    >
+                      <option value="view">View</option>
+                      <option value="connect">Connect</option>
+                      <option value="manage">Manage</option>
+                    </select>
+                  </div>
+                  <div className="flex flex-col gap-1.5">
+                    <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                      Expires in (hours)
+                    </label>
+                    <Input
+                      type="number"
+                      placeholder="Leave empty for no expiry"
+                      value={shareExpiryHours}
+                      onChange={(e) => setShareExpiryHours(e.target.value)}
+                      className="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                    />
+                  </div>
+                  <div className="flex justify-end">
+                    <Button
+                      variant="outline"
+                      className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+                      disabled={!shareGranteeId}
+                      onClick={async () => {
+                        try {
+                          await shareHost(
+                            Number(host.id),
+                            shareType,
+                            shareGranteeId,
+                            sharePermission,
+                            shareExpiryHours
+                              ? Number(shareExpiryHours)
+                              : undefined,
+                          );
+                          const res = await getHostAccess(Number(host.id));
+                          setAccessList((res as any)?.access ?? []);
+                          setShareGranteeId("");
+                          setShareExpiryHours("");
+                          toast.success("Host shared successfully");
+                        } catch {
+                          toast.error("Failed to share host");
+                        }
+                      }}
+                    >
+                      <Plus className="size-3.5 mr-1.5" />
+                      Share
+                    </Button>
+                  </div>
+                </div>
+              </SectionCard>
+            )}
+
+            {host !== null && (
+              <SectionCard
+                title="Current Access"
+                icon={<ListChecks className="size-3.5" />}
+              >
+                <div className="py-2">
+                  <div className="grid grid-cols-6 gap-2 px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest text-muted-foreground border-b border-border">
+                    <span>Type</span>
+                    <span>Target</span>
+                    <span>Permission</span>
+                    <span>Granted By</span>
+                    <span>Expires</span>
+                    <span></span>
+                  </div>
+                  {accessList.length === 0 && (
+                    <div className="px-2 py-4 text-xs text-muted-foreground/50 text-center">
+                      No access entries yet.
+                    </div>
+                  )}
+                  {accessList.map((r: any, i: number) => {
+                    const expired =
+                      r.expiresAt && new Date(r.expiresAt) < new Date();
+                    return (
+                      <div
+                        key={i}
+                        className="grid grid-cols-6 gap-2 px-2 py-2.5 border-b border-border last:border-0 items-center text-xs"
+                      >
+                        <div className="flex items-center gap-1">
+                          {r.granteeType === "user" ? (
+                            <User className="size-3 text-muted-foreground" />
+                          ) : (
+                            <Shield className="size-3 text-muted-foreground" />
+                          )}
+                          <span className="text-muted-foreground capitalize">
+                            {r.granteeType}
+                          </span>
+                        </div>
+                        <span className="font-semibold truncate">
+                          {r.granteeName ?? r.granteeId}
+                        </span>
+                        <span className="capitalize">{r.permission}</span>
+                        <span className="text-muted-foreground truncate">
+                          {r.grantedBy ?? "—"}
+                        </span>
+                        <span
+                          className={
+                            expired
+                              ? "text-destructive"
+                              : "text-muted-foreground"
+                          }
+                        >
+                          {expired ? (
+                            <span className="flex items-center gap-1">
+                              <X className="size-3" />
+                              Expired
+                            </span>
+                          ) : r.expiresAt ? (
+                            new Date(r.expiresAt).toLocaleDateString()
+                          ) : (
+                            "Never"
+                          )}
+                        </span>
+                        <div className="flex justify-end">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-6 text-[10px] px-2 text-destructive hover:bg-destructive/10"
+                            onClick={async () => {
+                              try {
+                                await revokeHostAccess(Number(host!.id), r.id);
+                                setAccessList((prev) =>
+                                  prev.filter((_, idx) => idx !== i),
+                                );
+                                toast.success("Access revoked");
+                              } catch {
+                                toast.error("Failed to revoke access");
+                              }
+                            }}
+                          >
+                            Revoke
+                          </Button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </SectionCard>
+            )}
           </>
         )}
       </div>
@@ -3247,12 +3513,16 @@ function CredentialEditorView({
     username: credential?.username ?? "",
     folder: credential?.folder ?? "",
     description: credential?.description ?? "",
-    tags: credential?.tags?.join(" ") ?? "",
+    tags: credential?.tags ?? ([] as string[]),
+    tagInput: "",
     type: credential?.type ?? "password",
     value: credential?.value ?? "",
     publicKey: credential?.publicKey ?? "",
     passphrase: credential?.passphrase ?? "",
   }));
+  const [generatingKey, setGeneratingKey] = useState(false);
+  const [generatingPublicKey, setGeneratingPublicKey] = useState(false);
+  const credFileInputRef = useRef<HTMLInputElement>(null);
   const setCredField = <K extends keyof typeof credForm>(
     k: K,
     v: (typeof credForm)[K],
@@ -3267,10 +3537,7 @@ function CredentialEditorView({
         username: credForm.username,
         folder: credForm.folder || null,
         description: credForm.description || null,
-        tags: credForm.tags
-          .split(/\s+/)
-          .map((t) => t.trim())
-          .filter(Boolean),
+        tags: credForm.tags,
         authType: credForm.type,
         password: credForm.type === "password" ? credForm.value : null,
         key: credForm.type === "key" ? credForm.value : null,
@@ -3333,11 +3600,52 @@ function CredentialEditorView({
               <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                 Tags
               </label>
-              <Input
-                placeholder="space separated"
-                value={credForm.tags}
-                onChange={(e) => setCredField("tags", e.target.value)}
-              />
+              <div className="flex flex-wrap items-center gap-1 min-h-9 px-2 py-1 border border-border bg-background focus-within:ring-1 focus-within:ring-ring">
+                {credForm.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] bg-muted border border-border/60 text-foreground"
+                  >
+                    {tag}
+                    <button
+                      type="button"
+                      onClick={() =>
+                        setCredField(
+                          "tags",
+                          credForm.tags.filter((t) => t !== tag),
+                        )
+                      }
+                      className="text-muted-foreground hover:text-destructive ml-0.5"
+                    >
+                      <X className="size-2.5" />
+                    </button>
+                  </span>
+                ))}
+                <input
+                  className="flex-1 min-w-16 text-xs bg-transparent outline-none placeholder:text-muted-foreground/50"
+                  placeholder={credForm.tags.length === 0 ? "Add tags..." : ""}
+                  value={credForm.tagInput}
+                  onChange={(e) => setCredField("tagInput", e.target.value)}
+                  onKeyDown={(e) => {
+                    if (
+                      (e.key === " " || e.key === "Enter") &&
+                      credForm.tagInput.trim()
+                    ) {
+                      e.preventDefault();
+                      const tag = credForm.tagInput.trim();
+                      if (!credForm.tags.includes(tag))
+                        setCredField("tags", [...credForm.tags, tag]);
+                      setCredField("tagInput", "");
+                    } else if (
+                      e.key === "Backspace" &&
+                      !credForm.tagInput &&
+                      credForm.tags.length > 0
+                    ) {
+                      setCredField("tags", credForm.tags.slice(0, -1));
+                    }
+                  }}
+                />
+              </div>
             </div>
           </div>
         </SectionCard>
@@ -3390,10 +3698,82 @@ function CredentialEditorView({
             )}
             {type === "key" && (
               <div className="flex flex-col gap-4">
+                <div className="p-3 border border-border bg-muted/20">
+                  <p className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-2">
+                    Generate Key Pair
+                  </p>
+                  <p className="text-[10px] text-muted-foreground mb-2">
+                    Generate a new key pair — both private and public keys will
+                    be filled automatically.
+                  </p>
+                  <div className="flex flex-wrap gap-2">
+                    {[
+                      { label: "Ed25519", type: "ssh-ed25519" },
+                      { label: "ECDSA (nistp256)", type: "ecdsa" },
+                      { label: "RSA (2048)", type: "rsa", bits: 2048 },
+                    ].map(({ label, type: keyType, bits }) => (
+                      <Button
+                        key={label}
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        className="h-7 text-[10px] px-2"
+                        disabled={generatingKey}
+                        onClick={async () => {
+                          setGeneratingKey(true);
+                          try {
+                            const result = await generateKeyPair(
+                              keyType,
+                              bits,
+                              credForm.passphrase || undefined,
+                            );
+                            if (result.success) {
+                              setCredField("value", result.privateKey);
+                              setCredField("publicKey", result.publicKey);
+                              toast.success(`${label} key pair generated`);
+                            } else {
+                              toast.error(
+                                result.error ?? "Failed to generate key pair",
+                              );
+                            }
+                          } catch {
+                            toast.error("Failed to generate key pair");
+                          } finally {
+                            setGeneratingKey(false);
+                          }
+                        }}
+                      >
+                        {generatingKey ? "Generating..." : `Generate ${label}`}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
                 <div className="flex flex-col gap-1.5">
-                  <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-                    SSH Private Key
-                  </label>
+                  <div className="flex items-center justify-between">
+                    <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                      SSH Private Key
+                    </label>
+                    <button
+                      type="button"
+                      className="text-[10px] text-accent-brand hover:text-accent-brand/80 flex items-center gap-1"
+                      onClick={() => credFileInputRef.current?.click()}
+                    >
+                      <Upload className="size-3" /> Upload file
+                    </button>
+                  </div>
+                  <input
+                    ref={credFileInputRef}
+                    type="file"
+                    accept=".pem,.key,.txt,.ppk"
+                    className="hidden"
+                    onChange={async (e) => {
+                      const file = e.target.files?.[0];
+                      if (!file) return;
+                      const text = await file.text();
+                      setCredField("value", text.trim());
+                      e.target.value = "";
+                    }}
+                  />
                   <textarea
                     placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"
                     rows={8}
@@ -3402,18 +3782,6 @@ function CredentialEditorView({
                     className="w-full px-3 py-2 text-[10px] bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
                   />
                 </div>
-                <div className="flex flex-col gap-1.5">
-                  <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
-                    SSH Public Key (Optional)
-                  </label>
-                  <textarea
-                    placeholder="ssh-rsa AAAAB3Nza..."
-                    rows={3}
-                    value={credForm.publicKey}
-                    onChange={(e) => setCredField("publicKey", e.target.value)}
-                    className="w-full px-3 py-2 text-[10px] bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
-                  />
-                </div>
                 <div className="flex flex-col gap-1.5">
                   <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
                     Key Passphrase (Optional)
@@ -3425,6 +3793,50 @@ function CredentialEditorView({
                     onChange={(e) => setCredField("passphrase", e.target.value)}
                   />
                 </div>
+                <div className="flex flex-col gap-1.5">
+                  <div className="flex items-center justify-between">
+                    <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                      SSH Public Key (Optional)
+                    </label>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      className="h-6 text-[10px] px-2 border-accent-brand/40 text-accent-brand"
+                      disabled={!credForm.value || generatingPublicKey}
+                      onClick={async () => {
+                        setGeneratingPublicKey(true);
+                        try {
+                          const result = await generatePublicKeyFromPrivate(
+                            credForm.value,
+                            credForm.passphrase || undefined,
+                          );
+                          if (result?.publicKey) {
+                            setCredField("publicKey", result.publicKey);
+                            toast.success("Public key generated");
+                          } else {
+                            toast.error("Failed to derive public key");
+                          }
+                        } catch {
+                          toast.error("Failed to derive public key");
+                        } finally {
+                          setGeneratingPublicKey(false);
+                        }
+                      }}
+                    >
+                      {generatingPublicKey
+                        ? "Generating..."
+                        : "Generate from Private Key"}
+                    </Button>
+                  </div>
+                  <textarea
+                    placeholder="ssh-rsa AAAAB3Nza..."
+                    rows={3}
+                    value={credForm.publicKey}
+                    onChange={(e) => setCredField("publicKey", e.target.value)}
+                    className="w-full px-3 py-2 text-[10px] bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
+                  />
+                </div>
               </div>
             )}
           </div>
@@ -3482,6 +3894,11 @@ export function HostManager({
     null,
   );
   const [editingFolderValue, setEditingFolderValue] = useState("");
+  const [deployDialog, setDeployDialog] = useState<{
+    cred: Credential;
+    hostId: string;
+  } | null>(null);
+  const [deploying, setDeploying] = useState(false);
   const [draggedHost, setDraggedHost] = useState<Host | null>(null);
   const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
   const [editingProtocols, setEditingProtocols] = useState({
@@ -3500,12 +3917,51 @@ export function HostManager({
 
   useEffect(() => {
     getSSHHosts()
-      .then((raw) => {
+      .then(async (raw) => {
         const converted = raw.map(sshHostToHost);
         setHosts(converted);
         setExpandedFolders(
           new Set(converted.map((h) => h.folder.split(" / ")[0])),
         );
+
+        let statuses: Record<number, { status?: string }> = {};
+        try {
+          statuses = (await getAllServerStatuses()) as Record<
+            number,
+            { status?: string }
+          >;
+        } catch {
+          // best-effort
+        }
+
+        const onlineHosts = converted.filter(
+          (h) => statuses[Number(h.id)]?.status === "online",
+        );
+
+        const metricsResults = await Promise.allSettled(
+          onlineHosts.map((h) => getServerMetricsById(Number(h.id))),
+        );
+
+        const metricsMap = new Map<string, { cpu: number; ram: number }>();
+        onlineHosts.forEach((h, i) => {
+          const result = metricsResults[i];
+          if (result.status === "fulfilled" && result.value) {
+            const cpu = result.value.cpu?.percent;
+            const ram = result.value.memory?.percent;
+            if (cpu != null && ram != null) {
+              metricsMap.set(h.id, { cpu, ram });
+            }
+          }
+        });
+
+        if (metricsMap.size > 0) {
+          setHosts((prev) =>
+            prev.map((h) => {
+              const m = metricsMap.get(h.id);
+              return m ? { ...h, cpu: m.cpu, ram: m.ram } : h;
+            }),
+          );
+        }
       })
       .catch(() => {});
     getCredentials()
@@ -3704,12 +4160,54 @@ export function HostManager({
     toast.success("Sample file downloaded");
   };
 
-  const handleRefresh = () => {
+  const handleRefresh = async () => {
     setRefreshing(true);
-    setTimeout(() => {
-      setRefreshing(false);
+    try {
+      const [raw] = await Promise.all([
+        getSSHHosts(),
+        refreshServerPolling().catch(() => {}),
+      ]);
+      const converted = raw.map(sshHostToHost);
+      setHosts(converted);
+
+      let statuses: Record<number, { status?: string }> = {};
+      try {
+        statuses = (await getAllServerStatuses()) as Record<
+          number,
+          { status?: string }
+        >;
+      } catch {
+        // best-effort
+      }
+      const onlineHosts = converted.filter(
+        (h) => statuses[Number(h.id)]?.status === "online",
+      );
+      const metricsResults = await Promise.allSettled(
+        onlineHosts.map((h) => getServerMetricsById(Number(h.id))),
+      );
+      const metricsMap = new Map<string, { cpu: number; ram: number }>();
+      onlineHosts.forEach((h, i) => {
+        const result = metricsResults[i];
+        if (result.status === "fulfilled" && result.value) {
+          const cpu = result.value.cpu?.percent;
+          const ram = result.value.memory?.percent;
+          if (cpu != null && ram != null) metricsMap.set(h.id, { cpu, ram });
+        }
+      });
+      if (metricsMap.size > 0) {
+        setHosts((prev) =>
+          prev.map((h) => {
+            const m = metricsMap.get(h.id);
+            return m ? { ...h, cpu: m.cpu, ram: m.ram } : h;
+          }),
+        );
+      }
       toast.success("Host statuses refreshed");
-    }, 1200);
+    } catch {
+      toast.error("Failed to refresh hosts");
+    } finally {
+      setRefreshing(false);
+    }
   };
 
   // Build a nested folder tree from flat hosts using "/" as path separator
@@ -3790,12 +4288,29 @@ export function HostManager({
             setDragOverFolder(node.fullPath);
           }}
           onDragLeave={() => setDragOverFolder(null)}
-          onDrop={(e) => {
+          onDrop={async (e) => {
             e.preventDefault();
             setDragOverFolder(null);
             if (draggedHost) {
-              toast.success(`Moved ${draggedHost.name} to ${node.fullPath}`);
+              const h = draggedHost;
               setDraggedHost(null);
+              if (h.folder === node.fullPath) return;
+              try {
+                await updateSSHHost(Number(h.id), {
+                  ...h,
+                  folder: node.fullPath,
+                } as any);
+                setHosts((prev) =>
+                  prev.map((x) =>
+                    x.id === h.id ? { ...x, folder: node.fullPath } : x,
+                  ),
+                );
+                toast.success(
+                  `Moved ${h.name} to "${node.fullPath || "root"}"`,
+                );
+              } catch {
+                toast.error("Failed to move host");
+              }
             }
           }}
         >
@@ -3816,14 +4331,34 @@ export function HostManager({
                 autoFocus
                 value={editingFolderValue}
                 onChange={(e) => setEditingFolderValue(e.target.value)}
-                onBlur={() => {
+                onBlur={async () => {
+                  const newName = editingFolderValue.trim();
                   setEditingFolderName(null);
-                  toast.success(`Folder renamed`);
+                  if (newName && newName !== node.name) {
+                    try {
+                      await renameFolder(node.fullPath, newName);
+                      const raw = await getSSHHosts();
+                      setHosts(raw.map(sshHostToHost));
+                      toast.success(`Folder renamed to "${newName}"`);
+                    } catch {
+                      toast.error("Failed to rename folder");
+                    }
+                  }
                 }}
-                onKeyDown={(e) => {
+                onKeyDown={async (e) => {
                   if (e.key === "Enter") {
+                    const newName = editingFolderValue.trim();
                     setEditingFolderName(null);
-                    toast.success(`Folder renamed`);
+                    if (newName && newName !== node.name) {
+                      try {
+                        await renameFolder(node.fullPath, newName);
+                        const raw = await getSSHHosts();
+                        setHosts(raw.map(sshHostToHost));
+                        toast.success(`Folder renamed to "${newName}"`);
+                      } catch {
+                        toast.error("Failed to rename folder");
+                      }
+                    }
                   }
                   if (e.key === "Escape") setEditingFolderName(null);
                 }}
@@ -3836,9 +4371,9 @@ export function HostManager({
               </span>
             )}
             <span className="text-[10px] text-muted-foreground/40 shrink-0 ml-0.5 tabular-nums">
-              {onlineHosts > 0 && (
-                <span className="text-accent-brand">{onlineHosts}</span>
-              )}
+              <span className={onlineHosts > 0 ? "text-accent-brand" : ""}>
+                {onlineHosts}
+              </span>
               <span>/{totalHosts}</span>
             </span>
           </button>
@@ -3855,9 +4390,22 @@ export function HostManager({
             </button>
             <button
               className="size-5 flex items-center justify-center text-muted-foreground/40 hover:text-destructive rounded transition-colors"
-              onClick={(e) => {
+              onClick={async (e) => {
                 e.stopPropagation();
-                toast.success(`Deleted folder`);
+                if (
+                  !confirm(
+                    `Delete all hosts in "${node.name}"? This cannot be undone.`,
+                  )
+                )
+                  return;
+                try {
+                  await deleteAllHostsInFolder(node.fullPath);
+                  const raw = await getSSHHosts();
+                  setHosts(raw.map(sshHostToHost));
+                  toast.success(`Deleted folder "${node.name}"`);
+                } catch {
+                  toast.error("Failed to delete folder");
+                }
               }}
             >
               <Trash2 className="size-2.5" />
@@ -4098,13 +4646,41 @@ export function HostManager({
                 type="file"
                 accept=".json"
                 className="hidden"
-                onChange={(e) => {
-                  if (e.target.files?.[0])
-                    toast.success(
-                      importOverwriteRef.current
-                        ? "Hosts imported (overwrite)"
-                        : "Hosts imported",
+                onChange={async (e) => {
+                  const file = e.target.files?.[0];
+                  if (!file) return;
+                  e.target.value = "";
+                  try {
+                    const text = await file.text();
+                    const parsed = JSON.parse(text);
+                    const hostsArray = Array.isArray(parsed)
+                      ? parsed
+                      : (parsed.hosts ?? []);
+                    if (!Array.isArray(hostsArray) || hostsArray.length === 0) {
+                      toast.error("No hosts found in file");
+                      return;
+                    }
+                    if (hostsArray.length > 100) {
+                      toast.error("Cannot import more than 100 hosts at once");
+                      return;
+                    }
+                    const result = await bulkImportSSHHosts(
+                      hostsArray,
+                      importOverwriteRef.current,
                     );
+                    const raw = await getSSHHosts();
+                    setHosts(raw.map(sshHostToHost));
+                    const msg = [
+                      result.success ? `${result.success} imported` : null,
+                      result.updated ? `${result.updated} updated` : null,
+                      result.failed ? `${result.failed} failed` : null,
+                    ]
+                      .filter(Boolean)
+                      .join(", ");
+                    toast.success(`Import complete: ${msg}`);
+                  } catch (err: any) {
+                    toast.error(err?.message ?? "Failed to import hosts");
+                  }
                 }}
               />
               <Button
@@ -4422,17 +4998,28 @@ export function HostManager({
                             </div>
                             <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
                               {cred.type === "key" && (
-                                <button
-                                  className="flex items-center gap-1 px-1.5 py-1 text-[10px] text-muted-foreground/60 hover:text-foreground hover:bg-muted rounded transition-colors"
-                                  onClick={() => {
-                                    navigator.clipboard.writeText(
-                                      `ssh-copy-id -i ~/.ssh/id_rsa.pub ${cred.username}@<host>`,
-                                    );
-                                    toast.success("Copied");
-                                  }}
-                                >
-                                  <Copy className="size-3" />
-                                </button>
+                                <>
+                                  <button
+                                    title="Deploy key to host"
+                                    className="flex items-center gap-1 px-1.5 py-1 text-[10px] text-muted-foreground/60 hover:text-foreground hover:bg-muted rounded transition-colors"
+                                    onClick={() =>
+                                      setDeployDialog({ cred, hostId: "" })
+                                    }
+                                  >
+                                    <Upload className="size-3" />
+                                  </button>
+                                  <button
+                                    title="Copy deploy command"
+                                    className="flex items-center gap-1 px-1.5 py-1 text-[10px] text-muted-foreground/60 hover:text-foreground hover:bg-muted rounded transition-colors"
+                                    onClick={() => {
+                                      const cmd = `mkdir -p ~/.ssh && chmod 700 ~/.ssh && echo "${cred.username ? `# ${cred.username}@Termix` : "# Termix"}" >> ~/.ssh/authorized_keys && chmod 600 ~/.ssh/authorized_keys`;
+                                      navigator.clipboard.writeText(cmd);
+                                      toast.success("Deploy command copied");
+                                    }}
+                                  >
+                                    <Copy className="size-3" />
+                                  </button>
+                                </>
                               )}
                               <button
                                 className="size-6 flex items-center justify-center text-muted-foreground/50 hover:text-foreground hover:bg-muted rounded transition-colors"
@@ -4445,9 +5032,23 @@ export function HostManager({
                               </button>
                               <button
                                 className="size-6 flex items-center justify-center text-muted-foreground/40 hover:text-destructive hover:bg-destructive/10 rounded transition-colors"
-                                onClick={() =>
-                                  toast.success(`Deleted ${cred.name}`)
-                                }
+                                onClick={async () => {
+                                  if (
+                                    !confirm(
+                                      `Delete credential "${cred.name}"?`,
+                                    )
+                                  )
+                                    return;
+                                  try {
+                                    await deleteCredential(Number(cred.id));
+                                    setCredentials((prev) =>
+                                      prev.filter((c) => c.id !== cred.id),
+                                    );
+                                    toast.success(`Deleted ${cred.name}`);
+                                  } catch {
+                                    toast.error("Failed to delete credential");
+                                  }
+                                }}
                               >
                                 <Trash2 className="size-3" />
                               </button>
@@ -4484,6 +5085,85 @@ export function HostManager({
         </div>
       )}
 
+      {/* Deploy credential dialog */}
+      {deployDialog && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4">
+          <div className="bg-popover border border-border shadow-xl w-full max-w-sm flex flex-col gap-4 p-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-bold">Deploy SSH Key</span>
+              <button
+                onClick={() => setDeployDialog(null)}
+                className="text-muted-foreground hover:text-foreground"
+              >
+                <X className="size-4" />
+              </button>
+            </div>
+            <div className="text-xs text-muted-foreground">
+              Deploy{" "}
+              <span className="font-semibold text-foreground">
+                {deployDialog.cred.name}
+              </span>{" "}
+              to a host's <code className="bg-muted px-1">authorized_keys</code>
+              .
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <label className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                Target Host
+              </label>
+              <select
+                className="flex h-9 w-full border border-border bg-background px-3 py-1 text-xs outline-none focus:ring-1 focus:ring-ring"
+                value={deployDialog.hostId}
+                onChange={(e) =>
+                  setDeployDialog({ ...deployDialog, hostId: e.target.value })
+                }
+              >
+                <option value="">Select a host...</option>
+                {allHosts
+                  .filter((h) => h.enableSsh)
+                  .map((h) => (
+                    <option key={h.id} value={h.id}>
+                      {h.name || h.ip}
+                    </option>
+                  ))}
+              </select>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => setDeployDialog(null)}
+                disabled={deploying}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10"
+                disabled={!deployDialog.hostId || deploying}
+                onClick={async () => {
+                  setDeploying(true);
+                  try {
+                    await deployCredentialToHost(
+                      Number(deployDialog.cred.id),
+                      Number(deployDialog.hostId),
+                    );
+                    toast.success("Key deployed successfully");
+                    setDeployDialog(null);
+                  } catch {
+                    toast.error("Failed to deploy key");
+                  } finally {
+                    setDeploying(false);
+                  }
+                }}
+              >
+                {deploying ? "Deploying..." : "Deploy"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Floating selection bar */}
       {selectionMode && !isEditing && (
         <div className="absolute bottom-4 inset-x-3 z-50">
@@ -4502,50 +5182,130 @@ export function HostManager({
             >
               {selectedHostIds.size === allHosts.length
                 ? "Deselect All"
-                : "All"}
+                : "Select All"}
             </button>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <button
-                  className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors flex items-center gap-1"
+                  className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors flex items-center gap-1 disabled:opacity-40"
                   disabled={selectedHostIds.size === 0}
                 >
                   Features <ChevronDown className="size-2.5" />
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="text-xs">
-                <DropdownMenuItem onClick={() => toast.success("Done")}>
-                  <Terminal className="size-3.5 mr-2" />
-                  Enable Terminal
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => toast.success("Done")}>
-                  <FolderSearch className="size-3.5 mr-2" />
-                  Enable Files
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => toast.success("Done")}>
-                  <Network className="size-3.5 mr-2" />
-                  Enable Tunnels
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => toast.success("Done")}>
-                  <Box className="size-3.5 mr-2" />
-                  Enable Docker
-                </DropdownMenuItem>
+                {[
+                  {
+                    label: "Enable Terminal",
+                    field: "enableTerminal",
+                    value: true,
+                    icon: Terminal,
+                  },
+                  {
+                    label: "Disable Terminal",
+                    field: "enableTerminal",
+                    value: false,
+                    icon: Terminal,
+                  },
+                  {
+                    label: "Enable Files",
+                    field: "enableFileManager",
+                    value: true,
+                    icon: FolderSearch,
+                  },
+                  {
+                    label: "Disable Files",
+                    field: "enableFileManager",
+                    value: false,
+                    icon: FolderSearch,
+                  },
+                  {
+                    label: "Enable Tunnels",
+                    field: "enableTunnel",
+                    value: true,
+                    icon: Network,
+                  },
+                  {
+                    label: "Disable Tunnels",
+                    field: "enableTunnel",
+                    value: false,
+                    icon: Network,
+                  },
+                  {
+                    label: "Enable Docker",
+                    field: "enableDocker",
+                    value: true,
+                    icon: Box,
+                  },
+                  {
+                    label: "Disable Docker",
+                    field: "enableDocker",
+                    value: false,
+                    icon: Box,
+                  },
+                ].map(({ label, field, value, icon: Icon }) => (
+                  <DropdownMenuItem
+                    key={label}
+                    onClick={async () => {
+                      const ids = Array.from(selectedHostIds).map(Number);
+                      try {
+                        const result = await bulkUpdateSSHHosts(ids, {
+                          [field]: value,
+                        });
+                        const raw = await getSSHHosts();
+                        setHosts(raw.map(sshHostToHost));
+                        toast.success(`Updated ${result.updated} hosts`);
+                      } catch {
+                        toast.error("Bulk update failed");
+                      }
+                    }}
+                  >
+                    <Icon className="size-3.5 mr-2" />
+                    {label}
+                  </DropdownMenuItem>
+                ))}
               </DropdownMenuContent>
             </DropdownMenu>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <button
-                  className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors flex items-center gap-1"
+                  className="text-[10px] text-muted-foreground hover:text-foreground px-1.5 py-1 hover:bg-muted rounded transition-colors flex items-center gap-1 disabled:opacity-40"
                   disabled={selectedHostIds.size === 0}
                 >
                   Move <ChevronDown className="size-2.5" />
                 </button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="text-xs">
-                {folders.map((f) => (
+                <DropdownMenuItem
+                  onClick={async () => {
+                    const ids = Array.from(selectedHostIds).map(Number);
+                    try {
+                      await bulkUpdateSSHHosts(ids, { folder: "" });
+                      const raw = await getSSHHosts();
+                      setHosts(raw.map(sshHostToHost));
+                      toast.success("Moved to root");
+                    } catch {
+                      toast.error("Failed to move hosts");
+                    }
+                  }}
+                >
+                  <FolderOpen className="size-3.5 mr-2" />
+                  (No folder)
+                </DropdownMenuItem>
+                {folders.filter(Boolean).map((f) => (
                   <DropdownMenuItem
                     key={f}
-                    onClick={() => toast.success(`Moved to ${f}`)}
+                    onClick={async () => {
+                      const ids = Array.from(selectedHostIds).map(Number);
+                      try {
+                        await bulkUpdateSSHHosts(ids, { folder: f });
+                        const raw = await getSSHHosts();
+                        setHosts(raw.map(sshHostToHost));
+                        toast.success(`Moved to "${f}"`);
+                      } catch {
+                        toast.error("Failed to move hosts");
+                      }
+                    }}
                   >
                     <FolderOpen className="size-3.5 mr-2" />
                     {f}
@@ -4554,11 +5314,31 @@ export function HostManager({
               </DropdownMenuContent>
             </DropdownMenu>
             <button
-              className="text-[10px] text-destructive hover:text-destructive px-1.5 py-1 hover:bg-destructive/10 rounded transition-colors"
+              className="text-[10px] text-destructive hover:text-destructive px-1.5 py-1 hover:bg-destructive/10 rounded transition-colors disabled:opacity-40"
               disabled={selectedHostIds.size === 0}
-              onClick={() => {
-                toast.success(`Deleted ${selectedHostIds.size} hosts`);
+              onClick={async () => {
+                if (
+                  !confirm(
+                    `Delete ${selectedHostIds.size} hosts? This cannot be undone.`,
+                  )
+                )
+                  return;
+                const ids = Array.from(selectedHostIds);
+                const results = await Promise.allSettled(
+                  ids.map((id) => deleteSSHHost(Number(id))),
+                );
+                const succeeded = results.filter(
+                  (r) => r.status === "fulfilled",
+                ).length;
+                const failed = results.filter(
+                  (r) => r.status === "rejected",
+                ).length;
+                setHosts((prev) =>
+                  prev.filter((h) => !selectedHostIds.has(h.id)),
+                );
                 setSelectedHostIds(new Set());
+                if (succeeded > 0) toast.success(`Deleted ${succeeded} hosts`);
+                if (failed > 0) toast.error(`Failed to delete ${failed} hosts`);
               }}
             >
               Delete
diff --git a/src/ui/sidebar/SidebarTree.tsx b/src/ui/sidebar/SidebarTree.tsx
index e76d1ef2..9daa3b72 100644
--- a/src/ui/sidebar/SidebarTree.tsx
+++ b/src/ui/sidebar/SidebarTree.tsx
@@ -18,13 +18,42 @@ export function isFolder(item: Host | HostFolder): item is HostFolder {
   return "children" in item;
 }
 
-const SSH_ACTIONS: { type: TabType; icon: typeof Terminal; label: string }[] = [
-  { type: "terminal", icon: Terminal, label: "Terminal" },
-  { type: "stats", icon: Server, label: "Stats" },
-  { type: "files", icon: FolderSearch, label: "Files" },
-  { type: "docker", icon: Box, label: "Docker" },
-  { type: "tunnel", icon: Network, label: "Tunnel" },
-];
+function getSshActions(
+  host: Host,
+): { type: TabType; icon: typeof Terminal; label: string }[] {
+  const metricsEnabled = host.statsConfig?.metricsEnabled !== false;
+  return [
+    host.enableTerminal && {
+      type: "terminal" as TabType,
+      icon: Terminal,
+      label: "Terminal",
+    },
+    host.enableFileManager && {
+      type: "files" as TabType,
+      icon: FolderSearch,
+      label: "Files",
+    },
+    host.enableDocker && {
+      type: "docker" as TabType,
+      icon: Box,
+      label: "Docker",
+    },
+    host.enableTunnel && {
+      type: "tunnel" as TabType,
+      icon: Network,
+      label: "Tunnel",
+    },
+    metricsEnabled && {
+      type: "stats" as TabType,
+      icon: Server,
+      label: "Stats",
+    },
+  ].filter(Boolean) as {
+    type: TabType;
+    icon: typeof Terminal;
+    label: string;
+  }[];
+}
 
 function hostMatchesQuery(host: Host, query: string) {
   return (
@@ -142,43 +171,42 @@ export function HostItem({
             opacity: hovered ? 1 : 0,
           }}
         >
-          {host.online &&
-            (host.cpu !== undefined || host.ram !== undefined) && (
-              <div className="flex items-center gap-3 pl-3">
-                {host.cpu !== undefined && (
-                  <div className="flex items-center gap-1">
-                    <Cpu className="size-2.5 shrink-0 text-muted-foreground/30" />
-                    <div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
-                      <div
-                        className={`h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
-                        style={{ width: `${host.cpu}%` }}
-                      />
-                    </div>
-                    <span className="text-[9px] tabular-nums text-muted-foreground/40">
-                      {host.cpu}%
-                    </span>
+          {host.online && (host.cpu != null || host.ram != null) && (
+            <div className="flex items-center gap-3 pl-3">
+              {host.cpu != null && (
+                <div className="flex items-center gap-1">
+                  <Cpu className="size-2.5 shrink-0 text-muted-foreground/30" />
+                  <div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full ${host.cpu > 80 ? "bg-red-400" : host.cpu > 50 ? "bg-yellow-400" : "bg-accent-brand"}`}
+                      style={{ width: `${host.cpu}%` }}
+                    />
                   </div>
-                )}
-                {host.ram !== undefined && (
-                  <div className="flex items-center gap-1">
-                    <MemoryStick className="size-2.5 shrink-0 text-muted-foreground/30" />
-                    <div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
-                      <div
-                        className={`h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
-                        style={{ width: `${host.ram}%` }}
-                      />
-                    </div>
-                    <span className="text-[9px] tabular-nums text-muted-foreground/40">
-                      {host.ram}%
-                    </span>
+                  <span className="text-[9px] tabular-nums text-muted-foreground/40">
+                    {host.cpu}%
+                  </span>
+                </div>
+              )}
+              {host.ram != null && (
+                <div className="flex items-center gap-1">
+                  <MemoryStick className="size-2.5 shrink-0 text-muted-foreground/30" />
+                  <div className="w-9 h-[3px] bg-muted-foreground/15 rounded-full overflow-hidden">
+                    <div
+                      className={`h-full rounded-full ${host.ram > 80 ? "bg-red-400" : host.ram > 60 ? "bg-yellow-400" : "bg-accent-brand/60"}`}
+                      style={{ width: `${host.ram}%` }}
+                    />
                   </div>
-                )}
-              </div>
-            )}
+                  <span className="text-[9px] tabular-nums text-muted-foreground/40">
+                    {host.ram}%
+                  </span>
+                </div>
+              )}
+            </div>
+          )}
 
           <div className="flex items-center flex-wrap gap-1 pt-1.5 pl-2 pb-1">
             {host.enableSsh &&
-              SSH_ACTIONS.map(({ type, icon: Icon, label }) => (
+              getSshActions(host).map(({ type, icon: Icon, label }) => (
                 <button
                   key={type}
                   title={label}
diff --git a/src/ui/ssh/connection-log/ConnectionLog.tsx b/src/ui/ssh/connection-log/ConnectionLog.tsx
index bb384a8b..865c1e3f 100644
--- a/src/ui/ssh/connection-log/ConnectionLog.tsx
+++ b/src/ui/ssh/connection-log/ConnectionLog.tsx
@@ -158,7 +158,7 @@ export function ConnectionLog({
               {logs.length === 0 ? (
                 <div className="py-4 text-center text-sm text-muted-foreground">
                   {isConnecting
-                    ? t("terminal.connectionLogConnecting")
+                    ? t("terminal.connectionLogWaiting")
                     : t("terminal.connectionLogEmpty")}
                 </div>
               ) : (