feat: continue migrating content for ui redesign

src/backend/ssh/docker.ts

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

src/ui/AppShell.tsx

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

src/ui/components/section-card.tsx

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

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

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

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

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

src/ui/index.css

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

src/ui/locales/en.json

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

src/ui/shell/CommandPalette.tsx

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

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

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

tsconfig.app.json

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

tsconfig.json

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

tsconfig.node.json

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

vite.config.ts

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