feat: improve all connection types

2026-07-15 21:03:47 +00:00 · 2026-05-13 17:44:13 -05:00
parent 84a8dfa050
commit 5bf59f87c0
38 changed files with 2661 additions and 952 deletions
@@ -1580,6 +1580,7 @@ wss.on("connection", async (ws: WebSocket, req) => {
                  JSON.stringify({
                    type: "disconnected",
                    message: "Connection lost",
+                    graceful: true,
                  }),
                );
              }
@@ -118,6 +118,7 @@ export type Host = {
  telnetPassword?: string;

  guacamoleConfig?: Record<string, any>;
+  forceKeyboardInteractive?: boolean;
 };

 export type Credential = {
@@ -180,6 +181,9 @@ export type Tab = {
  type: TabType;
  label: string;
  host?: Host;
+  terminalRef?: import("react").RefObject<{
+    sendInput?: (data: string) => void;
+  } | null>;
 };

 export type DockerContainerStatus =
@@ -274,8 +278,8 @@ export type Snippet = {
  id: number;
  name: string;
  description?: string;
-  command: string;
-  folderId: number | null;
+  content: string;
+  folder: string | null;
 };

 export const FOLDER_ICONS = [
@@ -4,7 +4,7 @@ import { Separator } from "@/components/separator";
 import { Button } from "@/components/button";
 import { Sheet, SheetContent } from "@/components/sheet";
 import { ChevronLeft, ChevronRight, Maximize2 } from "lucide-react";
-import { useState, useRef, useCallback, useEffect } from "react";
+import { useState, useRef, useCallback, useEffect, createRef } from "react";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { MobileBottomBar } from "@/shell/MobileBottomBar";
 import { CommandPalette } from "@/shell/CommandPalette";
@@ -164,6 +164,9 @@ export function AppShell({
    null,
  );
  const lastShiftTime = useRef(0);
+  const terminalRefs = useRef<Map<string, ReturnType<typeof createRef>>>(
+    new Map(),
+  );

  const sidebarTitle: Record<RailView, string> = {
    hosts: "Hosts",
@@ -282,11 +285,15 @@ export function AppShell({
          t.type === type && t.label.replace(/ \(\d+\)$/, "") === host.name,
      );
      if (same.length === 0) {
+        const tabId = `${host.name}-${type}`;
+        const ref = type === "terminal" ? createRef() : undefined;
+        if (ref) terminalRefs.current.set(tabId, ref);
        const tab = {
-          id: `${host.name}-${type}`,
+          id: tabId,
          type,
          label: host.name,
          host,
+          terminalRef: ref,
        };
        setActiveTabId(tab.id);
        return [...prev, tab];
@@ -296,11 +303,15 @@ export function AppShell({
          ? { ...t, label: `${host.name} (1)`, host }
          : t,
      );
+      const tabId = `${host.name}-${type}-${Date.now()}`;
+      const ref = type === "terminal" ? createRef() : undefined;
+      if (ref) terminalRefs.current.set(tabId, ref);
      const tab = {
-        id: `${host.name}-${type}-${Date.now()}`,
+        id: tabId,
        type,
        label: `${host.name} (${same.length + 1})`,
        host,
+        terminalRef: ref,
      };
      setActiveTabId(tab.id);
      return [...next, tab];
@@ -355,6 +366,7 @@ export function AppShell({
  }

  function closeTab(id: string) {
+    terminalRefs.current.delete(id);
    setTabs((prev) => {
      const next = prev.filter((t) => t.id !== id);
      if (id === activeTabId) setActiveTabId(next[next.length - 1].id);
@@ -428,7 +440,14 @@ export function AppShell({
        />
      )}

-      {railView === "quick-connect" && <QuickConnectPanel />}
+      {railView === "quick-connect" && (
+        <QuickConnectPanel
+          onConnect={(host, type) => {
+            openTab(host, type);
+            if (isMobile) setSidebarOpen(false);
+          }}
+        />
+      )}

      {railView === "ssh-tools" && (
        <div className="flex-1 min-h-0 overflow-y-auto">
@@ -607,7 +626,7 @@ export function AppShell({
                  onOpenTab={openTab}
                />
              ) : activeTab ? (
-                renderTabContent(activeTab, openSingletonTab, openTab)
+                renderTabContent(activeTab, openSingletonTab, openTab, closeTab)
              ) : null}
            </div>
          </div>
@@ -19,6 +19,7 @@ import {
  getUserInfo,
  getRegistrationAllowed,
  getPasswordLoginAllowed,
+  getPasswordResetAllowed,
  getOIDCConfig,
  getSetupRequired,
  initiatePasswordReset,
@@ -231,6 +232,7 @@ export function Auth({ onLogin }: AuthProps) {

  const [registrationAllowed, setRegistrationAllowed] = useState(true);
  const [passwordLoginAllowed, setPasswordLoginAllowed] = useState(true);
+  const [passwordResetAllowed, setPasswordResetAllowed] = useState(true);
  const [oidcConfigured, setOidcConfigured] = useState(false);
  const [firstUser, setFirstUser] = useState(false);
  const [dbConnectionFailed, setDbConnectionFailed] = useState(false);
@@ -255,6 +257,9 @@ export function Auth({ onLogin }: AuthProps) {
    getPasswordLoginAllowed()
      .then((res) => setPasswordLoginAllowed(res.allowed))
      .catch(() => {});
+    getPasswordResetAllowed()
+      .then((allowed) => setPasswordResetAllowed(allowed))
+      .catch(() => setPasswordResetAllowed(false));
    getOIDCConfig()
      .then((res) => setOidcConfigured(!!res))
      .catch(() => setOidcConfigured(false));
@@ -1108,6 +1113,7 @@ export function Auth({ onLogin }: AuthProps) {
                        {t("auth.rememberMe")}
                      </label>
                    </div>
+                    {passwordResetAllowed && (
                      <button
                        type="button"
                        onClick={() => switchView("reset")}
@@ -1115,6 +1121,7 @@ export function Auth({ onLogin }: AuthProps) {
                      >
                        {t("auth.forgotPassword")}
                      </button>
+                    )}
                  </div>
                  <Button
                    type="submit"
@@ -13,7 +13,7 @@ export function SectionCard({
  children: React.ReactNode;
 }) {
  return (
-    <div className="flex flex-col border border-border bg-card">
+    <div className="flex flex-col border border-border bg-card overflow-hidden">
      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border shrink-0">
        <span className="text-muted-foreground">{icon}</span>
        <span className="text-xs font-semibold uppercase tracking-widest text-muted-foreground flex-1">
@@ -4,7 +4,7 @@ import { Alert, AlertDescription } from "@/components/alert.tsx";
 import { Button } from "@/components/button.tsx";
 import { Card } from "@/components/card.tsx";
 import { Input } from "@/components/input.tsx";
-import { AlertCircle, Box, RefreshCw, Search, Settings } from "lucide-react";
+import { AlertCircle, Box, RefreshCw, Search } from "lucide-react";

 import { useTranslation } from "react-i18next";
 import type { SSHHost, DockerContainer, DockerValidation } from "@/types";
@@ -709,9 +709,6 @@ function DockerManagerInner({
                    className={`size-4 text-accent-brand ${isLoadingContainers ? "animate-spin" : ""}`}
                  />
                </Button>
-                <Button variant="ghost" size="icon">
-                  <Settings className="size-4 text-accent-brand" />
-                </Button>
              </div>
            </Card>

@@ -20,6 +20,12 @@ import type { SSHHost } from "@/types";
 import { isElectron } from "@/main-axios.ts";
 import { SimpleLoader } from "@/lib/SimpleLoader.tsx";
 import { useTranslation } from "react-i18next";
+import {
+  TERMINAL_THEMES,
+  DEFAULT_TERMINAL_CONFIG,
+  TERMINAL_FONTS,
+} from "@/lib/terminal-themes";
+import { useTheme } from "@/components/theme-provider";

 interface ConsoleTerminalProps {
  containerId: string;
@@ -35,7 +41,35 @@ export function ConsoleTerminal({
  hostConfig,
 }: ConsoleTerminalProps): React.ReactElement {
  const { t } = useTranslation();
+  const { theme: appTheme } = useTheme();
  const { instance: terminal, ref: xtermRef } = useXTerm();
+
+  const terminalConfig = React.useMemo(
+    () => ({ ...DEFAULT_TERMINAL_CONFIG, ...hostConfig.terminalConfig }),
+    [hostConfig.terminalConfig],
+  );
+
+  const isDarkMode =
+    appTheme === "dark" ||
+    appTheme === "dracula" ||
+    appTheme === "gentlemansChoice" ||
+    appTheme === "midnightEspresso" ||
+    appTheme === "catppuccinMocha" ||
+    (appTheme === "system" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+  const themeColors = React.useMemo(() => {
+    const activeTheme = terminalConfig.theme;
+    if (activeTheme === "termix") {
+      return isDarkMode
+        ? TERMINAL_THEMES.termixDark.colors
+        : TERMINAL_THEMES.termixLight.colors;
+    }
+    return (
+      TERMINAL_THEMES[activeTheme]?.colors ?? TERMINAL_THEMES.termixDark.colors
+    );
+  }, [terminalConfig.theme, isDarkMode]);
+
  const [isConnected, setIsConnected] = React.useState(false);
  const [isConnecting, setIsConnecting] = React.useState(false);
  const [selectedShell, setSelectedShell] = React.useState<string>("bash");
@@ -57,9 +91,18 @@ export function ConsoleTerminal({
    terminal.loadAddon(clipboardAddon);
    terminal.loadAddon(webLinksAddon);

-    terminal.options.cursorBlink = true;
-    terminal.options.fontSize = 14;
-    terminal.options.fontFamily = "monospace";
+    const fontConfig = TERMINAL_FONTS.find(
+      (f) => f.value === terminalConfig.fontFamily,
+    );
+    const fontFamily = fontConfig?.fallback ?? TERMINAL_FONTS[0].fallback;
+
+    terminal.options.cursorBlink = terminalConfig.cursorBlink;
+    terminal.options.cursorStyle = terminalConfig.cursorStyle;
+    terminal.options.fontSize = terminalConfig.fontSize;
+    terminal.options.fontFamily = fontFamily;
+    terminal.options.scrollback = terminalConfig.scrollback;
+    terminal.options.letterSpacing = terminalConfig.letterSpacing;
+    terminal.options.lineHeight = terminalConfig.lineHeight;

    const readTextFromClipboard = async (): Promise<string> => {
      if (window.electronClipboard) {
@@ -157,16 +200,29 @@ export function ConsoleTerminal({
      return true;
    });

-    const backgroundColor = getComputedStyle(document.documentElement)
-      .getPropertyValue("--bg-elevated")
-      .trim();
-    const foregroundColor = getComputedStyle(document.documentElement)
-      .getPropertyValue("--foreground")
-      .trim();
-
    terminal.options.theme = {
-      background: backgroundColor || "var(--bg-elevated)",
-      foreground: foregroundColor || "var(--foreground)",
+      background: themeColors.background,
+      foreground: themeColors.foreground,
+      cursor: themeColors.cursor,
+      cursorAccent: themeColors.cursorAccent,
+      selectionBackground: themeColors.selectionBackground,
+      selectionForeground: themeColors.selectionForeground,
+      black: themeColors.black,
+      red: themeColors.red,
+      green: themeColors.green,
+      yellow: themeColors.yellow,
+      blue: themeColors.blue,
+      magenta: themeColors.magenta,
+      cyan: themeColors.cyan,
+      white: themeColors.white,
+      brightBlack: themeColors.brightBlack,
+      brightRed: themeColors.brightRed,
+      brightGreen: themeColors.brightGreen,
+      brightYellow: themeColors.brightYellow,
+      brightBlue: themeColors.brightBlue,
+      brightMagenta: themeColors.brightMagenta,
+      brightCyan: themeColors.brightCyan,
+      brightWhite: themeColors.brightWhite,
    };

    setTimeout(() => {
@@ -207,7 +263,7 @@ export function ConsoleTerminal({

      terminal.dispose();
    };
-  }, [terminal, t]);
+  }, [terminal, t, terminalConfig, themeColors]);

  const disconnect = React.useCallback(() => {
    if (wsRef.current) {
@@ -498,7 +554,10 @@ export function ConsoleTerminal({
        </CardContent>
      </Card>

-      <Card className="flex-1 overflow-hidden pt-1 pb-0">
+      <Card
+        className="flex-1 overflow-hidden pt-1 pb-0"
+        style={{ background: themeColors.background }}
+      >
        <CardContent className="p-0 h-full relative">
          <div
            ref={xtermRef}
@@ -562,8 +562,6 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
      currentLoadingPathRef.current = resolvedPath;
      setIsLoading(true);

-      setCreateIntent(null);
-
      try {
        const response = await listSSHFiles(sshSessionId, resolvedPath);

@@ -660,11 +658,19 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {

            return false;
          } else if (initialLoadDoneRef.current) {
+            const isPermissionDenied =
+              httpStatus === 403 ||
+              errorMessage?.toLowerCase().includes("permission denied") ||
+              errorMessage?.toLowerCase().includes("eacces");
+            if (isPermissionDenied) {
+              toast.error(t("fileManager.permissionDenied"));
+            } else {
              toast.error(
                t("fileManager.failedToLoadDirectory") + ": " + errorMessage,
              );
            }
          }
+        }
        return false;
      } finally {
        if (currentLoadingPathRef.current === resolvedPath) {
@@ -1079,14 +1085,12 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
      t("fileManager.newFolderDefault"),
      "directory",
    );
-    const newCreateIntent = {
+    setCreateIntent({
      id: Date.now().toString(),
      type: "directory" as const,
      defaultName,
      currentName: defaultName,
-    };
-
-    setCreateIntent(newCreateIntent);
+    });
  }

  function handleCreateNewFile() {
@@ -1094,13 +1098,12 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
      t("fileManager.newFileDefault"),
      "file",
    );
-    const newCreateIntent = {
+    setCreateIntent({
      id: Date.now().toString(),
      type: "file" as const,
      defaultName,
      currentName: defaultName,
-    };
-    setCreateIntent(newCreateIntent);
+    });
  }

  const handleSymlinkClick = async (file: FileItem) => {
@@ -2442,7 +2445,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
  }

  return (
-    <div className="h-full flex flex-col bg-background relative">
+    <div className="h-full flex flex-col bg-background relative overflow-hidden isolate">
      <div
        className="h-full w-full flex flex-col"
        style={{
@@ -2617,16 +2620,21 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                <DropdownMenuContent
                  align="end"
                  className="w-44 rounded-none border-border bg-card"
+                  onCloseAutoFocus={(e) => e.preventDefault()}
                >
                  <DropdownMenuItem
-                    onClick={handleCreateNewFolder}
+                    onSelect={() => {
+                      setTimeout(() => handleCreateNewFolder(), 0);
+                    }}
                    className="rounded-none text-xs font-semibold gap-2 focus:bg-accent-brand/10 focus:text-accent-brand"
                  >
                    <FolderPlus className="size-4 text-accent-brand" />
                    {t("fileManager.newFolder")}
                  </DropdownMenuItem>
                  <DropdownMenuItem
-                    onClick={handleCreateNewFile}
+                    onSelect={() => {
+                      setTimeout(() => handleCreateNewFile(), 0);
+                    }}
                    className="rounded-none text-xs font-semibold gap-2 focus:bg-accent-brand/10 focus:text-accent-brand"
                  >
                    <FilePlus className="size-4 text-muted-foreground" />
@@ -2767,6 +2775,7 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                onSelectionChange={setSelection}
                currentPath={currentPath}
                isLoading={isLoading}
+                isConnected={!!sshSessionId}
                onPathChange={navigateTo}
                onRefresh={handleRefreshDirectory}
                onUpload={handleFilesDropped}
@@ -2780,7 +2789,11 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                    setSortOrder("asc");
                  }
                }}
-                onDownload={(files) => files.forEach(handleDownloadFile)}
+                onDownload={(files) =>
+                  files
+                    .filter((f) => f.type === "file")
+                    .forEach(handleDownloadFile)
+                }
                onContextMenu={handleContextMenu}
                viewMode={viewMode}
                onRename={handleRenameConfirm}
@@ -2812,7 +2825,12 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
                onClose={() =>
                  setContextMenu((prev) => ({ ...prev, isVisible: false }))
                }
-                onDownload={(files) => files.forEach(handleDownloadFile)}
+                onDownload={(files) =>
+                  files
+                    .filter((f) => f.type === "file")
+                    .forEach(handleDownloadFile)
+                }
+                onPreview={handleFileOpen}
                onRename={handleRenameFile}
                onCopy={handleCopyFiles}
                onCut={handleCutFiles}
@@ -536,7 +536,7 @@ export function FileManagerContextMenu({
        ref={menuRef}
        data-context-menu
        className={cn(
-          "fixed bg-canvas border border-edge rounded-lg shadow-xl min-w-[180px] max-w-[250px] z-[99995] overflow-x-hidden overflow-y-auto",
+          "fixed bg-card border border-border rounded-none shadow-md min-w-[220px] max-w-[300px] z-[99995] overflow-x-hidden overflow-y-auto py-1",
        )}
        style={{
          left: menuPosition.x,
@@ -549,7 +549,7 @@ export function FileManagerContextMenu({
            return (
              <div
                key={`separator-${index}`}
-                className="border-t border-border"
+                className="my-1 border-t border-border"
              />
            );
          }
@@ -558,10 +558,10 @@ export function FileManagerContextMenu({
            <button
              key={index}
              className={cn(
-                "w-full px-3 h-9 text-left text-[10px] font-bold uppercase tracking-widest flex items-center justify-between",
-                "hover:bg-accent-brand/10 hover:text-accent-brand transition-colors cursor-pointer rounded-none",
+                "w-full px-3 min-h-8 py-1.5 text-left text-xs font-semibold flex items-center justify-between gap-3 rounded-none transition-colors cursor-pointer",
+                "hover:bg-accent-brand/10 hover:text-accent-brand",
                item.disabled &&
-                  "opacity-50 cursor-not-allowed hover:bg-transparent hover:text-current",
+                  "opacity-40 cursor-not-allowed hover:bg-transparent hover:text-current",
                item.danger &&
                  "text-destructive hover:bg-destructive/10 hover:text-destructive",
              )}
@@ -573,14 +573,14 @@ export function FileManagerContextMenu({
              }}
              disabled={item.disabled}
            >
-              <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 whitespace-normal break-words">
-                  {item.label}
-                </span>
+              <div className="flex items-center gap-2 flex-1 min-w-0">
+                <div className="flex-shrink-0 text-muted-foreground">
+                  {item.icon}
+                </div>
+                <span className="flex-1 leading-tight">{item.label}</span>
              </div>
              {item.shortcut && (
-                <div className="ml-2 flex-shrink-0">
+                <div className="ml-auto flex-shrink-0 opacity-50">
                  {renderShortcut(item.shortcut)}
                </div>
              )}
@@ -67,6 +67,7 @@ interface FileManagerGridProps {
  onSelectionChange: (files: FileItem[]) => void;
  currentPath: string;
  isLoading?: boolean;
+  isConnected?: boolean;
  onPathChange: (path: string) => void;
  onRefresh: () => void;
  onUpload?: (files: FileList) => void;
@@ -191,6 +192,7 @@ export function FileManagerGrid({
  onSelectionChange,
  currentPath,
  isLoading,
+  isConnected,
  onPathChange,
  onRefresh,
  onUpload,
@@ -525,7 +527,15 @@ export function FileManagerGrid({
    e.stopPropagation();
  }, []);

-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (createIntent) {
+        const target = e.target as HTMLElement;
+        if (target.tagName !== "INPUT") {
+          e.preventDefault();
+        }
+        return;
+      }
      if (e.target === e.currentTarget && e.button === 0) {
        e.preventDefault();
        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
@@ -538,7 +548,9 @@ export function FileManagerGrid({

        setJustFinishedSelecting(false);
      }
-  }, []);
+    },
+    [createIntent],
+  );

  const handleMouseMove = useCallback(
    (e: React.MouseEvent) => {
@@ -695,7 +707,7 @@ export function FileManagerGrid({
  const handleFileClick = (file: FileItem, event: React.MouseEvent) => {
    event.stopPropagation();

-    if (gridRef.current) {
+    if (gridRef.current && !createIntent) {
      gridRef.current.focus();
    }

@@ -730,7 +742,7 @@ export function FileManagerGrid({
  };

  const handleGridClick = (event: React.MouseEvent) => {
-    if (gridRef.current) {
+    if (gridRef.current && !createIntent) {
      gridRef.current.focus();
    }

@@ -974,6 +986,7 @@ export function FileManagerGrid({
                          onBlur={handleEditConfirm}
                          className="max-w-[120px] min-w-[60px] w-fit border border-accent-brand/60 bg-card px-2 py-1 text-xs rounded-none outline-none focus:ring-1 focus:ring-accent-brand/50 text-center pointer-events-auto"
                          onClick={(e) => e.stopPropagation()}
+                          onMouseDown={(e) => e.stopPropagation()}
                        />
                      ) : (
                        <p
@@ -1096,6 +1109,7 @@ export function FileManagerGrid({
                          onBlur={handleEditConfirm}
                          className="flex-1 min-w-0 max-w-[200px] border border-accent-brand/60 bg-card px-2 py-1 text-xs rounded-none outline-none focus:ring-1 focus:ring-accent-brand/50 pointer-events-auto"
                          onClick={(e) => e.stopPropagation()}
+                          onMouseDown={(e) => e.stopPropagation()}
                        />
                      ) : (
                        <span
@@ -1227,7 +1241,10 @@ export function FileManagerGrid({
          document.body,
        )}

-      <SimpleLoader visible={isLoading} message={t("common.connecting")} />
+      <SimpleLoader
+        visible={!!isLoading && !!isConnected}
+        message={t("common.loading")}
+      />
    </div>
  );
 }
@@ -1244,24 +1261,49 @@ function CreateIntentGridItem({
  const { t } = useTranslation();
  const [inputName, setInputName] = useState(intent.currentName);
  const inputRef = useRef<HTMLInputElement>(null);
+  const doneRef = useRef(false);

  useEffect(() => {
-    inputRef.current?.focus();
-    inputRef.current?.select();
-  }, []);
+    const timer = setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+        inputRef.current.select();
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [intent.id]);
+
+  const commit = useCallback(
+    (name: string) => {
+      if (doneRef.current) return;
+      doneRef.current = true;
+      if (name) {
+        onConfirm?.(name);
+      } else {
+        onCancel?.();
+      }
+    },
+    [onConfirm, onCancel],
+  );

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault();
-      onConfirm?.(inputName.trim());
+      commit(inputName.trim());
    } else if (e.key === "Escape") {
      e.preventDefault();
+      if (doneRef.current) return;
+      doneRef.current = true;
      onCancel?.();
    }
  };

  return (
-    <div className="group flex flex-col items-center p-3 rounded-none border-2 border-dashed border-accent-brand/60 bg-accent-brand/5">
+    <div
+      className="group flex flex-col items-center p-3 rounded-none border-2 border-dashed border-accent-brand/60 bg-accent-brand/5"
+      onClick={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
      <div className="mb-2">
        {intent.type === "directory" ? (
          <Folder className="size-10 text-accent-brand" />
@@ -1275,7 +1317,7 @@ function CreateIntentGridItem({
        value={inputName}
        onChange={(e) => setInputName(e.target.value)}
        onKeyDown={handleKeyDown}
-        onBlur={() => onConfirm?.(inputName.trim())}
+        onBlur={() => commit(inputName.trim())}
        className="w-full max-w-[120px] border border-accent-brand/60 bg-card px-2 py-1 text-xs text-center rounded-none outline-none focus:ring-1 focus:ring-accent-brand/50"
        placeholder={
          intent.type === "directory"
@@ -1299,24 +1341,49 @@ function CreateIntentListItem({
  const { t } = useTranslation();
  const [inputName, setInputName] = useState(intent.currentName);
  const inputRef = useRef<HTMLInputElement>(null);
+  const doneRef = useRef(false);

  useEffect(() => {
-    inputRef.current?.focus();
-    inputRef.current?.select();
-  }, []);
+    const timer = setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+        inputRef.current.select();
+      }
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [intent.id]);
+
+  const commit = useCallback(
+    (name: string) => {
+      if (doneRef.current) return;
+      doneRef.current = true;
+      if (name) {
+        onConfirm?.(name);
+      } else {
+        onCancel?.();
+      }
+    },
+    [onConfirm, onCancel],
+  );

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault();
-      onConfirm?.(inputName.trim());
+      commit(inputName.trim());
    } else if (e.key === "Escape") {
      e.preventDefault();
+      if (doneRef.current) return;
+      doneRef.current = true;
      onCancel?.();
    }
  };

  return (
-    <div className="grid grid-cols-[1fr_120px_150px_80px_90px] gap-2 px-4 py-2 items-center border-b border-accent-brand/30 bg-accent-brand/5 rounded-none">
+    <div
+      className="grid grid-cols-[1fr_120px_150px_80px_90px] gap-2 px-4 py-2 items-center border-b border-accent-brand/30 bg-accent-brand/5 rounded-none"
+      onClick={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
      <div className="flex items-center gap-3">
        <div className="shrink-0">
          {intent.type === "directory" ? (
@@ -1331,7 +1398,7 @@ function CreateIntentListItem({
          value={inputName}
          onChange={(e) => setInputName(e.target.value)}
          onKeyDown={handleKeyDown}
-          onBlur={() => onConfirm?.(inputName.trim())}
+          onBlur={() => commit(inputName.trim())}
          className="flex-1 min-w-0 max-w-[200px] border border-accent-brand/60 bg-card px-2 py-1 text-xs rounded-none outline-none focus:ring-1 focus:ring-accent-brand/50"
          placeholder={
            intent.type === "directory"
@@ -53,14 +53,20 @@ export function DraggableWindow({
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
  const [windowStart, setWindowStart] = useState({ x: 0, y: 0 });
  const [sizeStart, setSizeStart] = useState({ width: 0, height: 0 });
+  const containerBoundsRef = useRef({ width: 0, height: 0 });

  const windowRef = useRef<HTMLDivElement>(null);
  const titleBarRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (targetSize && !isMaximized) {
-      const maxWidth = Math.min(window.innerWidth * 0.9, 1200);
-      const maxHeight = Math.min(window.innerHeight * 0.8, 800);
+      const container = windowRef.current?.offsetParent as HTMLElement | null;
+      const maxWidth = container
+        ? Math.min(container.clientWidth * 0.9, 1200)
+        : Math.min(window.innerWidth * 0.9, 1200);
+      const maxHeight = container
+        ? Math.min(container.clientHeight * 0.8, 800)
+        : Math.min(window.innerHeight * 0.8, 800);

      let newWidth = Math.min(targetSize.width + 50, maxWidth);
      let newHeight = Math.min(targetSize.height + 150, maxHeight);
@@ -80,8 +86,16 @@ export function DraggableWindow({
      setSize({ width: newWidth, height: newHeight });

      setPosition({
-        x: Math.max(0, (window.innerWidth - newWidth) / 2),
-        y: Math.max(0, (window.innerHeight - newHeight) / 2),
+        x: Math.max(
+          0,
+          (container ? container.clientWidth : window.innerWidth) / 2 -
+            newWidth / 2,
+        ),
+        y: Math.max(
+          0,
+          (container ? container.clientHeight : window.innerHeight) / 2 -
+            newHeight / 2,
+        ),
      });
    }
  }, [targetSize, isMaximized, minWidth, minHeight]);
@@ -98,6 +112,13 @@ export function DraggableWindow({
      setIsDragging(true);
      setDragStart({ x: e.clientX, y: e.clientY });
      setWindowStart({ x: position.x, y: position.y });
+
+      const container = windowRef.current?.offsetParent as HTMLElement | null;
+      containerBoundsRef.current = {
+        width: container ? container.clientWidth : window.innerWidth,
+        height: container ? container.clientHeight : window.innerHeight,
+      };
+
      onFocus?.();
    },
    [isMaximized, position, onFocus],
@@ -112,50 +133,14 @@ export function DraggableWindow({
        const newX = windowStart.x + deltaX;
        const newY = windowStart.y + deltaY;

-        const windowElement = windowRef.current;
-        let positioningContainer = null;
-        let currentElement = windowElement?.parentElement;
-
-        while (currentElement && currentElement !== document.body) {
-          const computedStyle = window.getComputedStyle(currentElement);
-          const position = computedStyle.position;
-          const transform = computedStyle.transform;
-
-          if (
-            position === "relative" ||
-            position === "absolute" ||
-            position === "fixed" ||
-            transform !== "none"
-          ) {
-            positioningContainer = currentElement;
-            break;
-          }
-
-          currentElement = currentElement.parentElement;
-        }
-
-        let maxX, maxY, minX, minY;
-
-        if (positioningContainer) {
-          const containerRect = positioningContainer.getBoundingClientRect();
-
-          maxX = containerRect.width - size.width;
-          maxY = containerRect.height - size.height;
-          minX = 0;
-          minY = 0;
-        } else {
-          maxX = window.innerWidth - size.width;
-          maxY = window.innerHeight - size.height;
-          minX = 0;
-          minY = 0;
-        }
-
-        const constrainedX = Math.max(minX, Math.min(maxX, newX));
-        const constrainedY = Math.max(minY, Math.min(maxY, newY));
+        const { width: containerW, height: containerH } =
+          containerBoundsRef.current;
+        const maxX = containerW - size.width;
+        const maxY = containerH - size.height;

        setPosition({
-          x: constrainedX,
-          y: constrainedY,
+          x: Math.max(0, Math.min(maxX, newX)),
+          y: Math.max(49, Math.min(maxY, newY)),
        });
      }

@@ -194,8 +179,10 @@ export function DraggableWindow({
          }
        }

-        newX = Math.max(0, Math.min(window.innerWidth - newWidth, newX));
-        newY = Math.max(0, Math.min(window.innerHeight - newHeight, newY));
+        const { width: containerW, height: containerH } =
+          containerBoundsRef.current;
+        newX = Math.max(0, Math.min(containerW - newWidth, newX));
+        newY = Math.max(49, Math.min(containerH - newHeight, newY));

        setSize({ width: newWidth, height: newHeight });
        setPosition({ x: newX, y: newY });
@@ -213,7 +200,6 @@ export function DraggableWindow({
      windowStart,
      sizeStart,
      size,
-      position,
      minWidth,
      minHeight,
      resizeDirection,
@@ -238,6 +224,13 @@ export function DraggableWindow({
      setDragStart({ x: e.clientX, y: e.clientY });
      setWindowStart({ x: position.x, y: position.y });
      setSizeStart({ width: size.width, height: size.height });
+
+      const container = windowRef.current?.offsetParent as HTMLElement | null;
+      containerBoundsRef.current = {
+        width: container ? container.clientWidth : window.innerWidth,
+        height: container ? container.clientHeight : window.innerHeight,
+      };
+
      onFocus?.();
    },
    [isMaximized, position, size, onFocus],
@@ -4,8 +4,10 @@ import { AlertCircle, Download } from "lucide-react";
 import { Button } from "@/components/button.tsx";
 import { useTranslation } from "react-i18next";

-import workerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";
-pdfjs.GlobalWorkerOptions.workerSrc = workerUrl;
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  import.meta.url,
+).toString();

 interface PdfPreviewProps {
  content: string;
@@ -168,20 +168,21 @@ export function PermissionsDialog({

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[calc(100vw-2rem)] sm:max-w-md rounded-none border-border bg-card">
+      <DialogContent className="w-[calc(100vw-2rem)] sm:max-w-lg rounded-none border-border bg-card">
        <DialogHeader>
          <DialogTitle className="text-xs font-bold uppercase tracking-widest flex items-center gap-2">
            <Lock className="size-4 text-accent-brand" />
            {t("fileManager.changePermissions")}
          </DialogTitle>
-          <DialogDescription className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground font-mono">
+          <DialogDescription className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground font-mono break-all">
            {file.path}
          </DialogDescription>
        </DialogHeader>

        <div className="py-3 flex flex-col gap-4">
-          <div className="grid grid-cols-4 gap-0 border border-border overflow-hidden">
-            <div className="px-3 py-2 bg-muted/50 border-b border-r border-border text-[10px] font-bold uppercase tracking-widest text-muted-foreground" />
+          <div className="border border-border overflow-hidden">
+            <div className="grid grid-cols-[1fr_64px_64px_64px] bg-muted/50 border-b border-border">
+              <div className="px-3 py-2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground" />
              {[
                t("fileManager.read"),
                t("fileManager.write"),
@@ -189,14 +190,18 @@ export function PermissionsDialog({
              ].map((h) => (
                <div
                  key={h}
-                className="px-3 py-2 bg-muted/50 border-b border-r border-border last:border-r-0 text-[10px] font-bold uppercase tracking-widest text-muted-foreground text-center"
+                  className="py-2 text-[10px] font-bold uppercase tracking-widest text-muted-foreground text-center border-l border-border"
                >
                  {h}
                </div>
              ))}
+            </div>
            {rows.map((row, i) => (
-              <React.Fragment key={i}>
-                <div className="px-3 py-2.5 border-b border-r border-border last:border-b-0 text-xs font-semibold truncate">
+              <div
+                key={i}
+                className={`grid grid-cols-[1fr_64px_64px_64px] ${i < rows.length - 1 ? "border-b border-border" : ""}`}
+              >
+                <div className="px-3 py-3 text-xs font-semibold">
                  {row.label}
                </div>
                {[
@@ -206,29 +211,28 @@ export function PermissionsDialog({
                ].map((perm, j) => (
                  <div
                    key={j}
-                    className="flex items-center justify-center border-b border-r border-border last:border-r-0 py-2.5"
+                    className="flex items-center justify-center border-l border-border py-3"
                  >
                    <input
                      type="checkbox"
                      checked={perm.val}
                      onChange={(e) => perm.set(e.target.checked)}
-                      className="accent-[var(--accent-brand)] size-3.5 cursor-pointer"
+                      className="accent-[var(--accent-brand)] size-4 cursor-pointer"
                    />
                  </div>
                ))}
-              </React.Fragment>
+              </div>
            ))}
          </div>

          <div className="flex items-center gap-3">
-            <span className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
+            <span className="text-xs font-bold uppercase tracking-widest text-muted-foreground shrink-0">
              {t("fileManager.octal")}
            </span>
            <Input
              value={octal}
              readOnly
              className="w-20 rounded-none bg-muted/50 border-border text-xs font-mono text-center h-8"
-              maxLength={3}
            />
            <span className="text-[10px] text-muted-foreground font-mono">
              {t("fileManager.currentPermissions")}: {file.permissions || "—"}
@@ -4,20 +4,7 @@ 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;
-  name: string;
-  ip: string;
-  port: number;
-  username: string;
-  password?: string;
-  key?: string;
-  keyPassword?: string;
-  authType: "password" | "key";
-  credentialId?: number;
-  userId?: number;
-}
+import type { SSHHost } from "@/types/index.ts";

 interface TerminalWindowProps {
  windowId: string;
@@ -114,8 +101,8 @@ export function TerminalWindow({
        zIndex={currentWindow.zIndex}
      >
        <Terminal
-          ref={terminalRef}
-          hostConfig={hostConfig}
+          ref={terminalRef as any}
+          hostConfig={hostConfig as any}
          isVisible={!currentWindow.isMinimized}
          initialPath={initialPath}
          executeCommand={executeCommand}
@@ -116,15 +116,20 @@ export function WindowManager({ children }: WindowManagerProps) {
  return (
    <WindowManagerContext.Provider value={contextValue}>
      {children}
-      <div className="window-container">
+      <div
+        className="window-container absolute inset-0 pointer-events-none overflow-hidden"
+        style={{ zIndex: 1000 }}
+      >
+        <div className="relative w-full h-full pointer-events-none">
          {windows.map((window) => (
-          <div key={window.id}>
+            <div key={window.id} className="pointer-events-auto">
              {typeof window.component === "function"
                ? window.component(window.id)
                : window.component}
            </div>
          ))}
        </div>
+      </div>
    </WindowManagerContext.Provider>
  );
 }
@@ -606,16 +606,6 @@ function ServerStatsInner({
                </div>
                <div>
                  <h1 className="text-lg md:text-2xl font-bold">{title}</h1>
-                  <div className="flex items-center gap-2">
-                    <span
-                      className={`size-2 rounded-full ${serverStatus === "online" ? "bg-accent-brand" : "bg-destructive"}`}
-                    />
-                    <span className="text-xs text-muted-foreground uppercase tracking-widest font-semibold">
-                      {serverStatus === "online"
-                        ? t("serverStats.online")
-                        : t("serverStats.offline")}
-                    </span>
-                  </div>
                </div>
              </div>
              <div className="flex items-center gap-0">
@@ -21,22 +21,25 @@ function Sparkline({
    current ?? 0,
  ].slice(-20);

-  if (points.length < 2) return null;
-
  const w = 300;
  const h = 48;
-  const max = Math.max(...points, 1);
-  const coords = points.map((v, i) => {
+
+  const hasData = points.length >= 2;
+  const max = hasData ? Math.max(...points, 1) : 1;
+  const coords = hasData
+    ? points.map((v, i) => {
        const x = (i / (points.length - 1)) * w;
        const y = h - (v / max) * h;
        return `${x},${y}`;
-  });
+      })
+    : [];

-  const d = `M ${coords.join(" L ")}`;
-  const fill = `M 0,${h} L ${coords.join(" L ")} L ${w},${h} Z`;
+  const d = hasData ? `M ${coords.join(" L ")}` : "";
+  const fill = hasData ? `M 0,${h} L ${coords.join(" L ")} L ${w},${h} Z` : "";

  return (
    <div className="h-12 md:h-16 w-full mt-2 bg-muted/20 border border-border/50 relative overflow-hidden">
+      {hasData && (
        <svg
          className="absolute inset-0 h-full w-full"
          viewBox={`0 0 ${w} ${h}`}
@@ -51,6 +54,7 @@ function Sparkline({
            className="text-accent-brand/60"
          />
        </svg>
+      )}
    </div>
  );
 }
@@ -20,22 +20,25 @@ function Sparkline({
    current ?? 0,
  ].slice(-20);

-  if (points.length < 2) return null;
-
  const w = 300;
  const h = 48;
-  const max = Math.max(...points, 1);
-  const coords = points.map((v, i) => {
+
+  const hasData = points.length >= 2;
+  const max = hasData ? Math.max(...points, 1) : 1;
+  const coords = hasData
+    ? points.map((v, i) => {
        const x = (i / (points.length - 1)) * w;
        const y = h - (v / max) * h;
        return `${x},${y}`;
-  });
+      })
+    : [];

-  const d = `M ${coords.join(" L ")}`;
-  const fill = `M 0,${h} L ${coords.join(" L ")} L ${w},${h} Z`;
+  const d = hasData ? `M ${coords.join(" L ")}` : "";
+  const fill = hasData ? `M 0,${h} L ${coords.join(" L ")} L ${w},${h} Z` : "";

  return (
    <div className="h-12 md:h-16 w-full mt-2 bg-muted/20 border border-border/50 relative overflow-hidden">
+      {hasData && (
        <svg
          className="absolute inset-0 h-full w-full"
          viewBox={`0 0 ${w} ${h}`}
@@ -50,6 +53,7 @@ function Sparkline({
            className="text-accent-brand/60"
          />
        </svg>
+      )}
    </div>
  );
 }
@@ -132,7 +132,7 @@ export function FirewallWidget({ metrics }: FirewallWidgetProps) {
          </span>
        )}
        {firewall && firewall.chains.length > 0 ? (
-          <div className="flex flex-col gap-1">
+          <div className="flex flex-col gap-1 overflow-y-auto max-h-[320px]">
            {firewall.chains.map((chain) => (
              <ChainSection key={chain.name} chain={chain} />
            ))}
@@ -46,7 +46,8 @@ export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
            {t("serverStats.noRecentLoginData")}
          </span>
        ) : (
-          allLogins.map((login, i) => (
+          <div className="flex flex-col gap-2 overflow-y-auto max-h-[300px]">
+            {allLogins.map((login, i) => (
              <div
                key={i}
                className={`flex items-center justify-between p-2 border ${login.status === "success" ? "border-border bg-muted/30" : "border-destructive/30 bg-destructive/5"}`}
@@ -79,7 +80,8 @@ export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
                  </span>
                </div>
              </div>
-          ))
+            ))}
+          </div>
        )}
      </div>
    </SectionCard>
@@ -20,22 +20,25 @@ function Sparkline({
    current ?? 0,
  ].slice(-20);

-  if (points.length < 2) return null;
-
  const w = 300;
  const h = 48;
-  const max = Math.max(...points, 1);
-  const coords = points.map((v, i) => {
+
+  const hasData = points.length >= 2;
+  const max = hasData ? Math.max(...points, 1) : 1;
+  const coords = hasData
+    ? points.map((v, i) => {
        const x = (i / (points.length - 1)) * w;
        const y = h - (v / max) * h;
        return `${x},${y}`;
-  });
+      })
+    : [];

-  const d = `M ${coords.join(" L ")}`;
-  const fill = `M 0,${h} L ${coords.join(" L ")} L ${w},${h} Z`;
+  const d = hasData ? `M ${coords.join(" L ")}` : "";
+  const fill = hasData ? `M 0,${h} L ${coords.join(" L ")} L ${w},${h} Z` : "";

  return (
    <div className="h-12 md:h-16 w-full mt-2 bg-muted/20 border border-border/50 relative overflow-hidden">
+      {hasData && (
        <svg
          className="absolute inset-0 h-full w-full"
          viewBox={`0 0 ${w} ${h}`}
@@ -50,6 +53,7 @@ function Sparkline({
            className="text-accent-brand/60"
          />
        </svg>
+      )}
    </div>
  );
 }
@@ -38,7 +38,8 @@ export function NetworkWidget({ metrics }: NetworkWidgetProps) {
            </span>
          </div>
        ) : (
-          interfaces.map((iface, i) => (
+          <div className="flex flex-col gap-2 overflow-y-auto max-h-[260px]">
+            {interfaces.map((iface, i) => (
              <div
                key={i}
                className="flex flex-col p-2 border border-border bg-muted/30 gap-1"
@@ -65,7 +66,8 @@ export function NetworkWidget({ metrics }: NetworkWidgetProps) {
                  )}
                </div>
              </div>
-          ))
+            ))}
+          </div>
        )}
      </div>
    </SectionCard>
@@ -14,15 +14,17 @@ function PortRow({ port }: { port: ListeningPort }) {
    addr === "0.0.0.0" || addr === "*" || addr === "::" ? "*" : addr;

  return (
-    <div className="grid grid-cols-4 text-xs font-mono py-1 border-b border-border/50 last:border-0 min-w-0">
-      <span className="text-accent-brand font-bold">{port.localPort}</span>
-      <span className="text-muted-foreground">
+    <div className="grid grid-cols-4 text-xs font-mono py-1 border-b border-border/50 last:border-0 min-w-0 overflow-hidden">
+      <span className="text-accent-brand font-bold truncate">
+        {port.localPort}
+      </span>
+      <span className="text-muted-foreground truncate">
        {port.protocol.toUpperCase()}
      </span>
      <span className="font-semibold truncate">
        {port.process ?? (port.pid ? `PID:${port.pid}` : "—")}
      </span>
-      <span className="text-right text-muted-foreground">
+      <span className="text-right text-muted-foreground truncate">
        {formatAddress(port.localAddress)}
      </span>
    </div>
@@ -41,7 +43,7 @@ export function PortsWidget({ metrics }: PortsWidgetProps) {
      title={t("serverStats.ports.title")}
      icon={<Unplug className="size-3.5" />}
    >
-      <div className="flex flex-col gap-1.5 py-1">
+      <div className="flex flex-col gap-1.5 py-1 overflow-x-hidden">
        <div className="grid grid-cols-4 text-[10px] text-muted-foreground font-bold uppercase pb-1 border-b border-border min-w-0">
          <span>{t("serverStats.ports.port")}</span>
          <span>{t("serverStats.ports.protocol")}</span>
@@ -53,12 +55,14 @@ export function PortsWidget({ metrics }: PortsWidgetProps) {
            {t("serverStats.ports.noData")}
          </span>
        ) : (
-          ports.map((port, i) => (
+          <div className="overflow-y-auto max-h-[300px]">
+            {ports.map((port, i) => (
              <PortRow
                key={`${port.protocol}-${port.localPort}-${i}`}
                port={port}
              />
-          ))
+            ))}
+          </div>
        )}
      </div>
    </SectionCard>
@@ -45,7 +45,8 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
            <span className="text-xs">{t("serverStats.noProcessesFound")}</span>
          </div>
        ) : (
-          topProcesses.map((proc, i) => (
+          <div className="overflow-y-auto max-h-[280px]">
+            {topProcesses.map((proc, i) => (
              <div
                key={i}
                className="grid grid-cols-4 text-xs font-mono py-1 border-b border-border/50 last:border-0 min-w-0"
@@ -57,7 +58,8 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
                  {proc.command.split("/").pop()}
                </span>
              </div>
-          ))
+            ))}
+          </div>
        )}
      </div>
    </SectionCard>
@@ -1206,7 +1206,10 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
            shouldNotReconnectRef.current = true;
            setIsConnected(false);
            setIsConnecting(false);
-            if (wasConnectedRef.current) {
+            if (msg.graceful) {
+              wasConnectedRef.current = false;
+              if (onClose) onClose();
+            } else if (wasConnectedRef.current) {
              wasConnectedRef.current = false;
              setShowDisconnectedOverlay(true);
            } else if (!connectionErrorRef.current) {
@@ -1559,6 +1562,11 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
        setIsConnected(false);
        isConnectingRef.current = false;

+        if (pingIntervalRef.current) {
+          clearInterval(pingIntervalRef.current);
+          pingIntervalRef.current = null;
+        }
+
        if (pongTimeoutRef.current) {
          clearTimeout(pongTimeoutRef.current);
          pongTimeoutRef.current = null;
@@ -1649,6 +1657,11 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
        }
        setIsConnecting(false);

+        if (pingIntervalRef.current) {
+          clearInterval(pingIntervalRef.current);
+          pingIntervalRef.current = null;
+        }
+
        if (totpTimeoutRef.current) {
          clearTimeout(totpTimeoutRef.current);
          totpTimeoutRef.current = null;
@@ -2478,9 +2491,12 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(

        {showDisconnectedOverlay && !isConnecting && (
          <div
-            className="absolute inset-0 flex flex-col items-center justify-center gap-4 z-10"
+            className="absolute inset-0 flex flex-col items-center justify-center gap-3 z-[120]"
            style={{ backgroundColor }}
          >
+            <p className="text-sm text-muted-foreground">
+              {t("terminal.connectionLost")}
+            </p>
            <div className="flex gap-2">
              <Button
                onClick={() => {
@@ -2502,7 +2518,7 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
                {t("terminal.reconnect")}
              </Button>
              {onClose && (
-                <Button variant="secondary" onClick={onClose}>
+                <Button variant="outline" onClick={onClose}>
                  {t("terminal.closeTab")}
                </Button>
              )}
@@ -2513,7 +2529,7 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
        <ConnectionLog
          isConnecting={isConnecting}
          isConnected={isConnected}
-          hasConnectionError={hasConnectionError}
+          hasConnectionError={hasConnectionError && !showDisconnectedOverlay}
          position={hasConnectionError ? "top" : "bottom"}
        />

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Button } from "@/components/button";
 import { Card } from "@/components/card";
-import { Separator } from "@/components/separator";

 import {
  AlertCircle,
@@ -397,7 +396,7 @@ export function TunnelTab({ host }: { label: string; host?: DemoHost }) {
  const connectedCount = tunnels.filter((t, i) => {
    if (!sshHost) return false;
    const name = tunnelName(sshHost, i, t);
-    return tunnelStatuses[name]?.connected;
+    return tunnelStatuses[name]?.status === "connected";
  }).length;

  return (
@@ -418,12 +417,6 @@ export function TunnelTab({ host }: { label: string; host?: DemoHost }) {
              </div>
            </div>
          </div>
-          <div className="flex items-center gap-0">
-            <Separator orientation="vertical" className="h-8 mx-3" />
-            <Button variant="ghost" size="icon">
-              <Settings className="size-4 text-accent-brand" />
-            </Button>
-          </div>
        </Card>

        {tunnels.length > 0 ? (
@@ -34,7 +34,7 @@ export const TERMINAL_THEMES: Record<string, TerminalTheme> = {
    colors: {
      background: "#0c0d0b",
      foreground: "#f7f7f7",
-      cursor: "#fb923c",
+      cursor: "#f7f7f7",
      cursorAccent: "#0c0d0b",
      selectionBackground: "#3a3a3d",
      black: "#2e3436",
@@ -62,7 +62,7 @@ export const TERMINAL_THEMES: Record<string, TerminalTheme> = {
    colors: {
      background: "#0c0d0b",
      foreground: "#f7f7f7",
-      cursor: "#fb923c",
+      cursor: "#f7f7f7",
      cursorAccent: "#0c0d0b",
      selectionBackground: "#3a3a3d",
      black: "#2e3436",
@@ -3252,7 +3252,9 @@
        "noTerminalSelectedHint": "Open an SSH terminal tab to view its command history",
        "searchPlaceholder": "Search history...",
        "clearAll": "Clear All",
-        "noHistoryEntries": "No history entries"
+        "noHistoryEntries": "No history entries",
+        "trackingDisabled": "History tracking is disabled",
+        "trackingDisabledHint": "Enable it in your profile settings to record commands."
      },
      "sshTools": {
        "keyRecordingTitle": "Key Recording",
@@ -3261,6 +3263,9 @@
        "selectNone": "None",
        "noTerminalTabsOpen": "No terminal tabs open",
        "selectTerminalsAbove": "Select terminals above",
+        "broadcastInputPlaceholder": "Type here to broadcast keystrokes...",
+        "stopRecording": "Stop Recording",
+        "startRecording": "Start Recording",
        "settingsTitle": "Settings",
        "enableRightClickCopyPaste": "Enable right-click copy/paste"
      },
@@ -3307,7 +3312,33 @@
        "newSnippet": "New Snippet",
        "newFolder": "New Folder",
        "run": "Run",
-        "noSnippetsInFolder": "No snippets in this folder"
+        "noSnippetsInFolder": "No snippets in this folder",
+        "uncategorized": "Uncategorized",
+        "editSnippetTitle": "Edit Snippet",
+        "editSnippetDescription": "Update this command snippet",
+        "saveSnippetButton": "Save Changes",
+        "createSuccess": "Snippet created successfully",
+        "createFailed": "Failed to create snippet",
+        "updateSuccess": "Snippet updated successfully",
+        "updateFailed": "Failed to update snippet",
+        "deleteFailed": "Failed to delete snippet",
+        "folderCreateSuccess": "Folder created successfully",
+        "folderCreateFailed": "Failed to create folder",
+        "runSuccess": "Ran \"{{name}}\" in {{count}} terminal(s)",
+        "copySuccess": "Copied \"{{name}}\" to clipboard",
+        "shareTitle": "Share Snippet",
+        "shareUser": "User",
+        "shareRole": "Role",
+        "selectUser": "Select a user...",
+        "selectRole": "Select a role...",
+        "shareSuccess": "Snippet shared successfully",
+        "shareFailed": "Failed to share snippet",
+        "revokeSuccess": "Access revoked",
+        "revokeFailed": "Failed to revoke access",
+        "currentAccess": "Current Access",
+        "shareLoadError": "Failed to load share data",
+        "loading": "Loading...",
+        "close": "Close"
      },
      "userProfile": {
        "sectionAccount": "Account",
@@ -3427,7 +3458,18 @@
        "passwordUpdateFailed": "Failed to update password",
        "deletePasswordRequired": "Password is required to delete your account",
        "deleteFailed": "Failed to delete account",
-        "deleting": "Deleting..."
+        "deleting": "Deleting...",
+        "colorPickerTooltip": "Open color picker",
+        "themeSystem": "System",
+        "themeLight": "Light",
+        "themeDark": "Dark",
+        "themeDracula": "Dracula",
+        "themeCatppuccin": "Catppuccin",
+        "themeNord": "Nord",
+        "themeSolarized": "Solarized",
+        "themeTokyoNight": "Tokyo Night",
+        "themeOneDark": "One Dark",
+        "themeGruvbox": "Gruvbox"
      }
    }
  }
@@ -68,8 +68,8 @@ export function TabBar({

      const barRect = tabBarRef.current.getBoundingClientRect();
      const x = Math.max(
-        barRect.left,
-        Math.min(barRect.right - d.width - 4, e.clientX - d.offsetX),
+        barRect.left + 2,
+        Math.min(barRect.right - d.width - 6, e.clientX - d.offsetX),
      );
      const y = d.barTop;
      setDragPos({ x, y });
@@ -113,6 +113,7 @@ export function renderTabContent(
  tab: Tab,
  onOpenSingletonTab?: (type: TabType) => void,
  onOpenTab?: (host: Host, type: TabType) => void,
+  onCloseTab?: (id: string) => void,
 ) {
  const { host, label } = tab;

@@ -136,6 +137,7 @@ export function renderTabContent(
      return (
        <CommandHistoryProvider>
          <TerminalFeature
+            ref={tab.terminalRef as any}
            hostConfig={
              {
                ...hostToSSHHost(host),
@@ -146,7 +148,7 @@ export function renderTabContent(
            title={label}
            showTitle={false}
            splitScreen={false}
-            onClose={() => {}}
+            onClose={() => onCloseTab?.(tab.id)}
          />
        </CommandHistoryProvider>
      );
@@ -32,8 +32,11 @@ import {
  updateOIDCConfig,
  disableOIDCConfig,
  isElectron,
+  getUserRoles,
+  assignRoleToUser,
+  removeRoleFromUser,
 } from "@/main-axios";
-import type { ApiKey, CreatedApiKey } from "@/main-axios";
+import type { ApiKey, CreatedApiKey, UserRole } from "@/main-axios";
 import type React from "react";
 import { Button } from "@/components/button";
 import { Input } from "@/components/input";
@@ -154,6 +157,8 @@ export function AdminSettingsPanel() {
  const [editUserOpen, setEditUserOpen] = useState(false);
  const [editUserTarget, setEditUserTarget] = useState<any | null>(null);
  const [editUserLoading, setEditUserLoading] = useState(false);
+  const [editUserRoles, setEditUserRoles] = useState<UserRole[]>([]);
+  const [editUserRolesLoading, setEditUserRolesLoading] = useState(false);

  // Link account dialog
  const [linkAccountOpen, setLinkAccountOpen] = useState(false);
@@ -196,6 +201,17 @@ export function AdminSettingsPanel() {
    loadOidcConfig();
  }, []);

+  useEffect(() => {
+    if (editUserOpen && editUserTarget) {
+      setEditUserRoles([]);
+      setEditUserRolesLoading(true);
+      getUserRoles(editUserTarget.id)
+        .then(({ roles: r }) => setEditUserRoles(r))
+        .catch(() => {})
+        .finally(() => setEditUserRolesLoading(false));
+    }
+  }, [editUserOpen, editUserTarget?.id]);
+
  function loadUsers() {
    getUserList()
      .then(({ users: u }) => setUsers(u))
@@ -257,18 +273,21 @@ export function AdminSettingsPanel() {
    try {
      const config = await getAdminOIDCConfig();
      if (!config) return;
-      setOidcClientId((config.clientId as string) ?? "");
-      setOidcClientSecret((config.clientSecret as string) ?? "");
-      setOidcAuthUrl((config.authorizationUrl as string) ?? "");
-      setOidcIssuerUrl((config.issuerUrl as string) ?? "");
-      setOidcTokenUrl((config.tokenUrl as string) ?? "");
-      setOidcUserIdentifier((config.userIdentifierPath as string) ?? "sub");
-      setOidcDisplayName((config.displayNamePath as string) ?? "name");
+      setOidcClientId((config.client_id as string) ?? "");
+      setOidcClientSecret((config.client_secret as string) ?? "");
+      setOidcAuthUrl((config.authorization_url as string) ?? "");
+      setOidcIssuerUrl((config.issuer_url as string) ?? "");
+      setOidcTokenUrl((config.token_url as string) ?? "");
+      setOidcUserIdentifier((config.identifier_path as string) ?? "sub");
+      setOidcDisplayName((config.name_path as string) ?? "name");
      setOidcScopes((config.scopes as string) ?? "openid email profile");
-      setOidcUserinfoUrl((config.overrideUserinfoUrl as string) ?? "");
+      setOidcUserinfoUrl((config.userinfo_url as string) ?? "");
      setOidcAllowedUsers(
-        Array.isArray(config.allowedUsers)
-          ? (config.allowedUsers as string[]).join("\n")
+        typeof config.allowed_users === "string"
+          ? (config.allowed_users as string)
+              .split(",")
+              .filter(Boolean)
+              .join("\n")
          : "",
      );
    } catch {
@@ -378,18 +397,18 @@ export function AdminSettingsPanel() {
    setOidcSaving(true);
    try {
      await updateOIDCConfig({
-        clientId: oidcClientId,
-        clientSecret: oidcClientSecret,
-        authorizationUrl: oidcAuthUrl,
-        issuerUrl: oidcIssuerUrl,
-        tokenUrl: oidcTokenUrl,
-        userIdentifierPath: oidcUserIdentifier,
-        displayNamePath: oidcDisplayName,
+        client_id: oidcClientId,
+        client_secret: oidcClientSecret,
+        authorization_url: oidcAuthUrl,
+        issuer_url: oidcIssuerUrl,
+        token_url: oidcTokenUrl,
+        identifier_path: oidcUserIdentifier,
+        name_path: oidcDisplayName,
        scopes: oidcScopes,
-        overrideUserinfoUrl: oidcUserinfoUrl || null,
-        allowedUsers: oidcAllowedUsers
-          ? oidcAllowedUsers.split("\n").filter(Boolean)
-          : [],
+        userinfo_url: oidcUserinfoUrl || "",
+        allowed_users: oidcAllowedUsers
+          ? oidcAllowedUsers.split("\n").filter(Boolean).join(",")
+          : "",
      });
      toast.success("OIDC configuration saved");
    } catch (e: any) {
@@ -497,18 +516,19 @@ export function AdminSettingsPanel() {
      return;
    }
    setCreateRoleLoading(true);
+    const displayName = newRoleDisplayName.trim();
    try {
-      const { role } = await createRole({
+      await createRole({
        name: newRoleName.trim(),
-        displayName: newRoleDisplayName.trim(),
+        displayName,
        description: newRoleDescription.trim() || null,
      });
-      setRoles((prev) => [...prev, role]);
      setShowCreateRole(false);
      setNewRoleName("");
      setNewRoleDisplayName("");
      setNewRoleDescription("");
-      toast.success(`Role "${role.displayName}" created`);
+      toast.success(`Role "${displayName}" created`);
+      loadRoles();
    } catch (e: any) {
      toast.error(e?.response?.data?.error || "Failed to create role");
    } finally {
@@ -532,7 +552,7 @@ export function AdminSettingsPanel() {
        newKeyUserId.trim(),
        newKeyExpiry ? new Date(newKeyExpiry).toISOString() : undefined,
      );
-      setApiKeys((prev) => [created, ...prev]);
+      setApiKeys((prev) => [{ ...created, isActive: true }, ...prev]);
      setCreatedKeyToken(created.token);
      setNewKeyName("");
      setNewKeyUserId("");
@@ -682,7 +702,7 @@ export function AdminSettingsPanel() {
          </SettingRow>
          <SettingRow
            label="Allow Password Reset"
-            description="Email-based password reset"
+            description="Reset code via Docker logs"
          >
            <AdminToggle
              on={allowPasswordReset}
@@ -1451,18 +1471,10 @@ export function AdminSettingsPanel() {
                  </div>
                  <div className="flex flex-col gap-1">
                    <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
-                      Scoped User ID{" "}
-                      <span className="text-accent-brand">*</span>
+                      User <span className="text-accent-brand">*</span>
                    </label>
-                    <Input
-                      placeholder="User ID"
-                      value={newKeyUserId}
-                      onChange={(e) => setNewKeyUserId(e.target.value)}
-                      className="text-xs font-mono"
-                    />
-                    {users.length > 0 && (
                    <select
-                        className="mt-1 px-2 py-1.5 text-xs bg-background border border-border text-foreground outline-none"
+                      className="px-2 py-1.5 text-xs bg-background border border-border text-foreground outline-none"
                      value={newKeyUserId}
                      onChange={(e) => setNewKeyUserId(e.target.value)}
                    >
@@ -1473,7 +1485,6 @@ export function AdminSettingsPanel() {
                        </option>
                      ))}
                    </select>
-                    )}
                  </div>
                  <div className="flex flex-col gap-1">
                    <label className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
@@ -1693,6 +1704,112 @@ export function AdminSettingsPanel() {
                  onToggle={() => handleToggleAdmin(editUserTarget)}
                />
              </div>
+              <div className="flex flex-col gap-2 py-3">
+                <span className="text-sm font-medium">Roles</span>
+                {editUserRolesLoading ? (
+                  <span className="text-xs text-muted-foreground">
+                    Loading...
+                  </span>
+                ) : (
+                  <>
+                    {editUserRoles.length > 0 && (
+                      <div className="flex flex-wrap gap-1.5">
+                        {editUserRoles.map((ur) => {
+                          const roleInfo = roles.find(
+                            (r) => r.id === ur.roleId,
+                          );
+                          const isSystem = roleInfo?.isSystem ?? false;
+                          return (
+                            <span
+                              key={ur.roleId}
+                              className="inline-flex items-center gap-1 text-[10px] font-semibold px-1.5 py-0.5 border border-accent-brand/40 bg-accent-brand/10 text-accent-brand"
+                            >
+                              {ur.roleDisplayName}
+                              {!isSystem && (
+                                <button
+                                  onClick={async () => {
+                                    try {
+                                      await removeRoleFromUser(
+                                        editUserTarget.id,
+                                        ur.roleId,
+                                      );
+                                      setEditUserRoles((prev) =>
+                                        prev.filter(
+                                          (r) => r.roleId !== ur.roleId,
+                                        ),
+                                      );
+                                    } catch {
+                                      toast.error("Failed to remove role");
+                                    }
+                                  }}
+                                  className="hover:text-destructive ml-0.5"
+                                >
+                                  ×
+                                </button>
+                              )}
+                            </span>
+                          );
+                        })}
+                      </div>
+                    )}
+                    {roles.filter(
+                      (r) =>
+                        !r.isSystem &&
+                        !editUserRoles.some((ur) => ur.roleId === r.id),
+                    ).length > 0 && (
+                      <div className="flex flex-col gap-1">
+                        <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
+                          Add role
+                        </span>
+                        <div className="flex flex-wrap gap-1.5">
+                          {roles
+                            .filter(
+                              (r) =>
+                                !r.isSystem &&
+                                !editUserRoles.some((ur) => ur.roleId === r.id),
+                            )
+                            .map((r) => (
+                              <button
+                                key={r.id}
+                                onClick={async () => {
+                                  try {
+                                    await assignRoleToUser(
+                                      editUserTarget.id,
+                                      r.id,
+                                    );
+                                    setEditUserRoles((prev) => [
+                                      ...prev,
+                                      {
+                                        userId: editUserTarget.id,
+                                        roleId: r.id,
+                                        roleName: r.name,
+                                        roleDisplayName: r.displayName,
+                                        grantedBy: "",
+                                        grantedByUsername: "",
+                                        grantedAt: new Date().toISOString(),
+                                      },
+                                    ]);
+                                  } catch {
+                                    toast.error("Failed to assign role");
+                                  }
+                                }}
+                                className="inline-flex items-center gap-1 text-[10px] font-semibold px-1.5 py-0.5 border border-border text-muted-foreground hover:border-accent-brand/40 hover:text-accent-brand transition-colors"
+                              >
+                                + {r.displayName}
+                              </button>
+                            ))}
+                        </div>
+                      </div>
+                    )}
+                    {editUserRoles.length === 0 &&
+                      roles.filter((r) => !r.isSystem).length === 0 && (
+                        <span className="text-xs text-muted-foreground">
+                          No custom roles defined
+                        </span>
+                      )}
+                  </>
+                )}
+              </div>
              <div className="flex items-center justify-between py-3">
                <div className="flex flex-col gap-0.5">
                  <span className="text-sm font-medium">
@@ -3,7 +3,11 @@ import { useTranslation } from "react-i18next";
 import { Button } from "@/components/button";
 import { Input } from "@/components/input";
 import { Copy, Search, Terminal, Trash2 } from "lucide-react";
-import { getCommandHistory, deleteCommandFromHistory } from "@/main-axios";
+import {
+  getCommandHistory,
+  deleteCommandFromHistory,
+  clearCommandHistory,
+} from "@/main-axios";
 import type { Tab } from "@/types/ui-types";

 export function HistoryPanel({
@@ -16,20 +20,51 @@ export function HistoryPanel({
  const { t } = useTranslation();
  const [search, setSearch] = useState("");
  const [commands, setCommands] = useState<string[]>([]);
+  const [trackingEnabled, setTrackingEnabled] = useState(
+    () => localStorage.getItem("commandHistoryTracking") === "true",
+  );

  const activeTab = terminalTabs.find((t) => t.id === activeTabId);
  const activeIsTerminal = !!activeTab;
  const hostId = activeTab?.host?.id ? parseInt(activeTab.host.id, 10) : null;

  useEffect(() => {
-    if (!hostId) {
+    const handler = () =>
+      setTrackingEnabled(
+        localStorage.getItem("commandHistoryTracking") === "true",
+      );
+    window.addEventListener("commandHistoryTrackingChanged", handler);
+    return () =>
+      window.removeEventListener("commandHistoryTrackingChanged", handler);
+  }, []);
+
+  useEffect(() => {
+    if (!hostId || !trackingEnabled) {
      setCommands([]);
      return;
    }
    getCommandHistory(hostId)
      .then(setCommands)
      .catch(() => setCommands([]));
-  }, [hostId]);
+  }, [hostId, trackingEnabled]);
+
+  if (activeIsTerminal && !trackingEnabled) {
+    return (
+      <div className="flex flex-col items-center justify-center flex-1 gap-3 p-6 text-center">
+        <div className="size-10 rounded-full bg-muted/40 flex items-center justify-center">
+          <Terminal className="size-5 text-muted-foreground/30" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-sm font-semibold text-muted-foreground/60">
+            {t("newUi.sidebar.history.trackingDisabled")}
+          </span>
+          <span className="text-xs text-muted-foreground/40">
+            {t("newUi.sidebar.history.trackingDisabledHint")}
+          </span>
+        </div>
+      </div>
+    );
+  }

  if (!activeIsTerminal) {
    return (
@@ -85,7 +120,15 @@ export function HistoryPanel({
          {filtered.length} command{filtered.length !== 1 ? "s" : ""}
        </span>
        <button
-          onClick={() => setCommands([])}
+          onClick={async () => {
+            if (!hostId) return;
+            try {
+              await clearCommandHistory(hostId);
+            } catch {
+              /* ignore */
+            }
+            setCommands([]);
+          }}
          className="text-xs text-accent-brand hover:text-accent-brand/70"
        >
          {t("newUi.sidebar.history.clearAll")}
@@ -2,8 +2,13 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Eye, EyeOff, FolderSearch, Terminal } from "lucide-react";
 import { Input } from "@/components/input";
+import type { Host } from "@/types/ui-types";

-export function QuickConnectPanel() {
+interface QuickConnectPanelProps {
+  onConnect: (host: Host, type: "terminal" | "files") => void;
+}
+
+export function QuickConnectPanel({ onConnect }: QuickConnectPanelProps) {
  const { t } = useTranslation();
  const [host, setHost] = useState("");
  const [port, setPort] = useState("22");
@@ -12,8 +17,45 @@ export function QuickConnectPanel() {
    "password",
  );
  const [password, setPassword] = useState("");
+  const [privateKey, setPrivateKey] = useState("");
  const [showPassword, setShowPassword] = useState(false);

+  const connect = (type: "terminal" | "files") => {
+    if (!host || !username) return;
+    const hostConfig: Host = {
+      id: `quick-connect-${Date.now()}`,
+      name: `${username}@${host}`,
+      ip: host,
+      port: parseInt(port) || 22,
+      username,
+      authType,
+      password: authType === "password" ? password : undefined,
+      key: authType === "key" ? privateKey : undefined,
+      folder: "",
+      online: false,
+      cpu: null,
+      ram: null,
+      lastAccess: new Date().toISOString(),
+      pin: false,
+      defaultPath: "",
+      serverTunnels: [],
+      quickActions: [],
+      enableTerminal: true,
+      enableFileManager: true,
+      enableTunnel: true,
+      enableDocker: true,
+      enableSsh: true,
+      enableRdp: false,
+      enableVnc: false,
+      enableTelnet: false,
+      sshPort: parseInt(port) || 22,
+      rdpPort: 3389,
+      vncPort: 5900,
+      telnetPort: 23,
+    };
+    onConnect(hostConfig, type);
+  };
+
  return (
    <div className="flex flex-col flex-1 min-h-0 overflow-y-auto">
      <div className="flex flex-col gap-3 p-3">
@@ -25,6 +67,9 @@ export function QuickConnectPanel() {
            placeholder={t("newUi.sidebar.quickConnect.hostPlaceholder")}
            value={host}
            onChange={(e) => setHost(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") connect("terminal");
+            }}
            className="h-7 text-xs"
          />
        </div>
@@ -36,6 +81,9 @@ export function QuickConnectPanel() {
            placeholder={t("newUi.sidebar.quickConnect.portPlaceholder")}
            value={port}
            onChange={(e) => setPort(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") connect("terminal");
+            }}
            className="h-7 text-xs"
          />
        </div>
@@ -47,6 +95,9 @@ export function QuickConnectPanel() {
            placeholder={t("newUi.sidebar.quickConnect.usernamePlaceholder")}
            value={username}
            onChange={(e) => setUsername(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") connect("terminal");
+            }}
            className="h-7 text-xs"
          />
        </div>
@@ -83,6 +134,9 @@ export function QuickConnectPanel() {
                )}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") connect("terminal");
+                }}
                className="h-7 text-xs pr-8"
              />
              <button
@@ -107,6 +161,8 @@ export function QuickConnectPanel() {
              placeholder={t(
                "newUi.sidebar.quickConnect.privateKeyPlaceholder",
              )}
+              value={privateKey}
+              onChange={(e) => setPrivateKey(e.target.value)}
              className="w-full h-24 px-2.5 py-2 text-xs bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
            />
          </div>
@@ -125,11 +181,17 @@ export function QuickConnectPanel() {
          </div>
        )}
        <div className="flex flex-col gap-1.5 pt-1">
-          <button className="flex items-center justify-center gap-1.5 h-7 w-full border border-accent-brand/40 bg-accent-brand/10 text-accent-brand text-xs font-semibold hover:bg-accent-brand/20 transition-colors">
+          <button
+            onClick={() => connect("terminal")}
+            className="flex items-center justify-center gap-1.5 h-7 w-full border border-accent-brand/40 bg-accent-brand/10 text-accent-brand text-xs font-semibold hover:bg-accent-brand/20 transition-colors"
+          >
            <Terminal className="size-3.5" />
            {t("newUi.sidebar.quickConnect.connectToTerminal")}
          </button>
-          <button className="flex items-center justify-center gap-1.5 h-7 w-full border border-accent-brand/40 bg-accent-brand/10 text-accent-brand text-xs font-semibold hover:bg-accent-brand/20 transition-colors">
+          <button
+            onClick={() => connect("files")}
+            className="flex items-center justify-center gap-1.5 h-7 w-full border border-accent-brand/40 bg-accent-brand/10 text-accent-brand text-xs font-semibold hover:bg-accent-brand/20 transition-colors"
+          >
            <FolderSearch className="size-3.5" />
            {t("newUi.sidebar.quickConnect.connectToFiles")}
          </button>
@@ -3,7 +3,15 @@ import { useTranslation } from "react-i18next";
 import {
  getSnippets,
  createSnippet as apiCreateSnippet,
+  updateSnippet as apiUpdateSnippet,
  deleteSnippet as apiDeleteSnippet,
+  getSnippetFolders,
+  createSnippetFolder as apiCreateSnippetFolder,
+  shareSnippet as apiShareSnippet,
+  getSnippetAccess,
+  revokeSnippetAccess,
+  getUserList,
+  getRoles,
 } from "@/main-axios";
 import { Button } from "@/components/button";
 import { Input } from "@/components/input";
@@ -33,6 +41,8 @@ import {
  Share2,
  Terminal,
  Trash2,
+  UserPlus,
+  X,
 } from "lucide-react";
 import { toast } from "sonner";
 import { FOLDER_COLORS } from "@/lib/theme";
@@ -91,47 +101,63 @@ function FolderIconEl({
  }
 }

-function CreateSnippetDialog({
+function SnippetFormDialog({
  open,
  onOpenChange,
  folders,
-  onCreate,
+  snippet,
+  onSave,
 }: {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  folders: SnippetFolder[];
-  onCreate: (s: Omit<Snippet, "id">) => void;
+  snippet: Snippet | null;
+  onSave: (data: Omit<Snippet, "id">, id?: number) => void;
 }) {
  const { t } = useTranslation();
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
-  const [folderId, setFolderId] = useState<number | null>(null);
-  const [command, setCommand] = useState("");
+  const [folder, setFolder] = useState<string | null>(null);
+  const [content, setContent] = useState("");

-  function handleCreate() {
-    if (!name.trim() || !command.trim()) return;
-    onCreate({
+  useEffect(() => {
+    if (open) {
+      setName(snippet?.name ?? "");
+      setDescription(snippet?.description ?? "");
+      setFolder(snippet?.folder ?? null);
+      setContent(snippet?.content ?? "");
+    }
+  }, [open, snippet]);
+
+  function handleSave() {
+    if (!name.trim() || !content.trim()) return;
+    onSave(
+      {
        name: name.trim(),
        description: description.trim() || undefined,
-      command: command.trim(),
-      folderId,
-    });
-    setName("");
-    setDescription("");
-    setFolderId(null);
-    setCommand("");
+        content: content.trim(),
+        folder,
+      },
+      snippet?.id,
+    );
    onOpenChange(false);
  }

+  const isEdit = snippet !== null;
+
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle className="text-lg font-bold">
-            {t("newUi.sidebar.snippets.createSnippetTitle")}
+            {isEdit
+              ? t("newUi.sidebar.snippets.editSnippetTitle")
+              : t("newUi.sidebar.snippets.createSnippetTitle")}
          </DialogTitle>
          <DialogDescription className="text-xs text-muted-foreground">
-            {t("newUi.sidebar.snippets.createSnippetDescription")}
+            {isEdit
+              ? t("newUi.sidebar.snippets.editSnippetDescription")
+              : t("newUi.sidebar.snippets.createSnippetDescription")}
          </DialogDescription>
        </DialogHeader>
        <div className="flex flex-col gap-4 mt-1">
@@ -168,19 +194,15 @@ function CreateSnippetDialog({
              </span>
            </label>
            <select
-              value={folderId ?? ""}
+              value={folder ?? ""}
              onChange={(e) =>
-                setFolderId(
-                  e.target.value === "" ? null : Number(e.target.value),
-                )
+                setFolder(e.target.value === "" ? null : e.target.value)
              }
              className="px-3 py-2 text-sm bg-background border border-border text-foreground outline-none focus:ring-1 focus:ring-ring"
            >
              <option value="">{t("newUi.sidebar.snippets.noFolder")}</option>
-              {folders
-                .filter((f) => f.name !== "Uncategorized")
-                .map((f) => (
-                  <option key={f.id} value={f.id}>
+              {folders.map((f) => (
+                <option key={f.id} value={f.name}>
                  {f.name}
                </option>
              ))}
@@ -193,8 +215,8 @@ function CreateSnippetDialog({
            </label>
            <textarea
              placeholder={t("newUi.sidebar.snippets.commandPlaceholder")}
-              value={command}
-              onChange={(e) => setCommand(e.target.value)}
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
              className="w-full h-36 px-3 py-2 text-xs bg-background border border-border text-foreground placeholder:text-muted-foreground resize-none outline-none focus:ring-1 focus:ring-ring font-mono"
            />
          </div>
@@ -206,9 +228,11 @@ function CreateSnippetDialog({
          <Button
            variant="outline"
            className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
-            onClick={handleCreate}
+            onClick={handleSave}
          >
-            {t("newUi.sidebar.snippets.createSnippetButton")}
+            {isEdit
+              ? t("newUi.sidebar.snippets.saveSnippetButton")
+              : t("newUi.sidebar.snippets.createSnippetButton")}
          </Button>
        </div>
      </DialogContent>
@@ -330,6 +354,317 @@ function CreateFolderDialog({
  );
 }

+type AccessRecord = {
+  id: number;
+  targetType: "user" | "role";
+  username: string | null;
+  roleName: string | null;
+  roleDisplayName: string | null;
+  permissionLevel: string;
+  expiresAt: string | null;
+};
+
+function ShareSnippetDialog({
+  snippet,
+  onClose,
+}: {
+  snippet: Snippet | null;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const [users, setUsers] = useState<{ id: string; username: string }[]>([]);
+  const [roles, setRoles] = useState<
+    { id: number; name: string; displayName?: string }[]
+  >([]);
+  const [accessList, setAccessList] = useState<AccessRecord[]>([]);
+  const [targetType, setTargetType] = useState<"user" | "role">("user");
+  const [targetId, setTargetId] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!snippet) return;
+    setLoading(true);
+    Promise.all([getUserList(), getRoles(), getSnippetAccess(snippet.id)])
+      .then(([usersData, rolesData, accessData]) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setUsers(
+          (usersData?.users || []).map((u: any) => ({
+            id: u.id,
+            username: u.username,
+          })),
+        );
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setRoles((rolesData?.roles || []).map((r: any) => r));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        setAccessList((accessData as any).accessList || []);
+      })
+      .catch(() => toast.error(t("newUi.sidebar.snippets.shareLoadError")))
+      .finally(() => setLoading(false));
+  }, [snippet, t]);
+
+  async function handleShare() {
+    if (!snippet || !targetId) return;
+    try {
+      await apiShareSnippet(snippet.id, {
+        targetType,
+        targetUserId: targetType === "user" ? targetId : undefined,
+        targetRoleId: targetType === "role" ? parseInt(targetId) : undefined,
+      });
+      toast.success(t("newUi.sidebar.snippets.shareSuccess"));
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const accessData = (await getSnippetAccess(snippet.id)) as any;
+      setAccessList(accessData.accessList || []);
+      setTargetId("");
+    } catch {
+      toast.error(t("newUi.sidebar.snippets.shareFailed"));
+    }
+  }
+
+  async function handleRevoke(accessId: number) {
+    if (!snippet) return;
+    try {
+      await revokeSnippetAccess(snippet.id, accessId);
+      toast.success(t("newUi.sidebar.snippets.revokeSuccess"));
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const accessData = (await getSnippetAccess(snippet.id)) as any;
+      setAccessList(accessData.accessList || []);
+    } catch {
+      toast.error(t("newUi.sidebar.snippets.revokeFailed"));
+    }
+  }
+
+  return (
+    <Dialog open={snippet !== null} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-lg font-bold">
+            {t("newUi.sidebar.snippets.shareTitle")}
+          </DialogTitle>
+          <DialogDescription className="text-xs text-muted-foreground">
+            {snippet?.name}
+          </DialogDescription>
+        </DialogHeader>
+        {loading ? (
+          <div className="py-6 text-center text-xs text-muted-foreground">
+            {t("newUi.sidebar.snippets.loading")}
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4 mt-1">
+            <div className="flex gap-2">
+              <button
+                onClick={() => {
+                  setTargetType("user");
+                  setTargetId("");
+                }}
+                className={`flex-1 py-1.5 text-xs border transition-colors ${targetType === "user" ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
+              >
+                {t("newUi.sidebar.snippets.shareUser")}
+              </button>
+              <button
+                onClick={() => {
+                  setTargetType("role");
+                  setTargetId("");
+                }}
+                className={`flex-1 py-1.5 text-xs border transition-colors ${targetType === "role" ? "border-accent-brand/40 bg-accent-brand/10 text-accent-brand" : "border-border text-muted-foreground hover:text-foreground"}`}
+              >
+                {t("newUi.sidebar.snippets.shareRole")}
+              </button>
+            </div>
+            <div className="flex gap-2 items-center">
+              <select
+                value={targetId}
+                onChange={(e) => setTargetId(e.target.value)}
+                className="flex-1 px-3 py-2 text-sm bg-background border border-border text-foreground outline-none focus:ring-1 focus:ring-ring h-9"
+              >
+                <option value="">
+                  {targetType === "user"
+                    ? t("newUi.sidebar.snippets.selectUser")
+                    : t("newUi.sidebar.snippets.selectRole")}
+                </option>
+                {targetType === "user"
+                  ? users.map((u) => (
+                      <option key={u.id} value={u.id}>
+                        {u.username}
+                      </option>
+                    ))
+                  : roles.map((r) => (
+                      <option key={r.id} value={String(r.id)}>
+                        {r.displayName || r.name}
+                      </option>
+                    ))}
+              </select>
+              <Button
+                variant="outline"
+                size="lg"
+                className="shrink-0 border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 hover:text-accent-brand"
+                onClick={handleShare}
+                disabled={!targetId}
+              >
+                <UserPlus className="size-4" />
+              </Button>
+            </div>
+            {accessList.length > 0 && (
+              <div className="flex flex-col gap-1">
+                <span className="text-xs font-semibold text-muted-foreground">
+                  {t("newUi.sidebar.snippets.currentAccess")}
+                </span>
+                <div className="flex flex-col gap-1 max-h-40 overflow-y-auto">
+                  {accessList.map((entry) => (
+                    <div
+                      key={entry.id}
+                      className="flex items-center justify-between px-2.5 py-1.5 border border-border text-xs"
+                    >
+                      <span className="truncate">
+                        {entry.targetType === "user"
+                          ? entry.username
+                          : entry.roleDisplayName || entry.roleName}
+                        <span className="text-muted-foreground ml-1">
+                          ({entry.targetType})
+                        </span>
+                      </span>
+                      <button
+                        onClick={() => handleRevoke(entry.id)}
+                        className="shrink-0 text-muted-foreground hover:text-destructive ml-2"
+                      >
+                        <X className="size-3.5" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        <div className="flex justify-end mt-2">
+          <Button variant="ghost" onClick={onClose}>
+            {t("newUi.sidebar.snippets.close")}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function SnippetCard({
+  snippet,
+  selectedTabIds,
+  terminalTabs,
+  onDelete,
+  onEdit,
+  onShare,
+  t,
+}: {
+  snippet: Snippet;
+  selectedTabIds: Set<string>;
+  terminalTabs: Tab[];
+  onDelete: (id: number) => void;
+  onEdit: (snippet: Snippet) => void;
+  onShare: (snippet: Snippet) => void;
+  t: (key: string, opts?: Record<string, unknown>) => string;
+}) {
+  function handleRun() {
+    const targets = terminalTabs.filter((tab) => selectedTabIds.has(tab.id));
+    if (targets.length > 0) {
+      targets.forEach((tab) => {
+        tab.terminalRef?.current?.sendInput?.(snippet.content + "\r");
+      });
+      toast.success(
+        t("newUi.sidebar.snippets.runSuccess", {
+          name: snippet.name,
+          count: targets.length,
+        }),
+      );
+    } else if (terminalTabs.length > 0) {
+      terminalTabs[0].terminalRef?.current?.sendInput?.(snippet.content + "\r");
+      toast.success(
+        t("newUi.sidebar.snippets.runSuccess", {
+          name: snippet.name,
+          count: 1,
+        }),
+      );
+    } else {
+      toast.error(t("newUi.sidebar.snippets.noTerminalTabsOpen"));
+    }
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  }
+
+  function handleCopy() {
+    navigator.clipboard.writeText(snippet.content);
+    toast.success(
+      t("newUi.sidebar.snippets.copySuccess", { name: snippet.name }),
+    );
+  }
+
+  return (
+    <div className="border border-border bg-background p-2.5 flex flex-col gap-2">
+      <div className="flex items-start gap-2">
+        <div className="grid grid-cols-2 gap-px mt-0.5 shrink-0 opacity-30">
+          <div className="size-1 bg-muted-foreground rounded-full" />
+          <div className="size-1 bg-muted-foreground rounded-full" />
+          <div className="size-1 bg-muted-foreground rounded-full" />
+          <div className="size-1 bg-muted-foreground rounded-full" />
+        </div>
+        <div className="flex flex-col min-w-0">
+          <span className="text-xs font-semibold">{snippet.name}</span>
+          {snippet.description && (
+            <span className="text-xs text-muted-foreground">
+              {snippet.description}
+            </span>
+          )}
+        </div>
+      </div>
+      <span className="text-xs text-muted-foreground font-mono px-1">
+        {snippet.content}
+      </span>
+      <div className="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="sm"
+          className="flex-1 text-xs h-7 gap-1.5"
+          onClick={handleRun}
+        >
+          <Play className="size-3" />
+          {t("newUi.sidebar.snippets.run")}
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 text-muted-foreground hover:text-foreground shrink-0"
+          onClick={handleCopy}
+        >
+          <Copy className="size-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 text-muted-foreground hover:text-foreground shrink-0"
+          onClick={() => onEdit(snippet)}
+        >
+          <Pencil className="size-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 text-muted-foreground hover:text-destructive shrink-0"
+          onClick={() => onDelete(snippet.id)}
+        >
+          <Trash2 className="size-3.5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="size-7 text-muted-foreground hover:text-foreground shrink-0"
+          onClick={() => onShare(snippet)}
+        >
+          <Share2 className="size-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 export function SnippetsPanel({
  terminalTabs,
  activeTabId,
@@ -341,6 +676,19 @@ export function SnippetsPanel({
  const [snippetSearch, setSnippetSearch] = useState("");
  const [folders, setFolders] = useState<SnippetFolder[]>([]);
  const [snippets, setSnippets] = useState<Snippet[]>([]);
+  const [snippetFormOpen, setSnippetFormOpen] = useState(false);
+  const [editingSnippet, setEditingSnippet] = useState<Snippet | null>(null);
+  const [createFolderOpen, setCreateFolderOpen] = useState(false);
+  const [shareSnippet, setShareSnippet] = useState<Snippet | null>(null);
+  const [selectedTabIds, setSelectedTabIds] = useState<Set<string>>(
+    () =>
+      new Set(
+        activeTabId && terminalTabs.some((tab) => tab.id === activeTabId)
+          ? [activeTabId]
+          : [],
+      ),
+  );
+  const [uncategorizedOpen, setUncategorizedOpen] = useState(true);

  useEffect(() => {
    getSnippets()
@@ -351,23 +699,28 @@ export function SnippetsPanel({
          id: s.id,
          name: s.name,
          description: s.description,
-          command: s.command,
-          folderId: s.folderId ?? null,
+          content: s.content,
+          folder: s.folder ?? null,
        }));
        setSnippets(mapped);
      })
      .catch(() => {});
+
+    getSnippetFolders()
+      .then((data) => {
+        const arr = Array.isArray(data) ? data : [];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const mapped: SnippetFolder[] = arr.map((f: any) => ({
+          id: f.id,
+          name: f.name,
+          color: f.color ?? FOLDER_COLORS[0],
+          icon: (f.icon as FolderIconId) ?? "folder",
+          open: true,
+        }));
+        setFolders(mapped);
+      })
+      .catch(() => {});
  }, []);
-  const [createSnippetOpen, setCreateSnippetOpen] = useState(false);
-  const [createFolderOpen, setCreateFolderOpen] = useState(false);
-  const [selectedTabIds, setSelectedTabIds] = useState<Set<string>>(
-    () =>
-      new Set(
-        activeTabId && terminalTabs.some((t) => t.id === activeTabId)
-          ? [activeTabId]
-          : [],
-      ),
-  );

  function toggleTab(id: string) {
    setSelectedTabIds((prev) => {
@@ -377,24 +730,49 @@ export function SnippetsPanel({
    });
  }

-  async function handleCreateSnippet(s: Omit<Snippet, "id">) {
+  async function handleSaveSnippet(data: Omit<Snippet, "id">, id?: number) {
    try {
+      if (id !== undefined) {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const created = (await apiCreateSnippet(s as any)) as any;
+        await apiUpdateSnippet(id, data as any);
+        setSnippets((prev) =>
+          prev.map((s) => (s.id === id ? { ...s, ...data } : s)),
+        );
+        toast.success(t("newUi.sidebar.snippets.updateSuccess"));
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const created = (await apiCreateSnippet(data as any)) as any;
        setSnippets((prev) => [
          ...prev,
-        { ...s, id: created.id ?? Math.max(0, ...prev.map((x) => x.id)) + 1 },
+          {
+            ...data,
+            id: created.id ?? Math.max(0, ...prev.map((x) => x.id)) + 1,
+          },
        ]);
-      toast.success("Snippet created successfully");
+        toast.success(t("newUi.sidebar.snippets.createSuccess"));
+      }
    } catch {
-      toast.error("Failed to create snippet");
+      toast.error(
+        id !== undefined
+          ? t("newUi.sidebar.snippets.updateFailed")
+          : t("newUi.sidebar.snippets.createFailed"),
+      );
    }
  }

-  function handleCreateFolder(f: Omit<SnippetFolder, "id" | "open">) {
-    const id = Math.max(0, ...folders.map((x) => x.id)) + 1;
-    setFolders((prev) => [...prev, { ...f, id, open: true }]);
-    toast.success("Folder created successfully");
+  async function handleCreateFolder(f: Omit<SnippetFolder, "id" | "open">) {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const created = (await apiCreateSnippetFolder({
+        name: f.name,
+        color: f.color,
+        icon: f.icon,
+      })) as any;
+      setFolders((prev) => [...prev, { ...f, id: created.id, open: true }]);
+      toast.success(t("newUi.sidebar.snippets.folderCreateSuccess"));
+    } catch {
+      toast.error(t("newUi.sidebar.snippets.folderCreateFailed"));
+    }
  }

  function toggleFolder(id: number) {
@@ -403,29 +781,29 @@ export function SnippetsPanel({
    );
  }

-  async function deleteSnippet(id: number) {
+  async function handleDeleteSnippet(id: number) {
    try {
      await apiDeleteSnippet(id);
      setSnippets((prev) => prev.filter((s) => s.id !== id));
    } catch {
-      toast.error("Failed to delete snippet");
+      toast.error(t("newUi.sidebar.snippets.deleteFailed"));
    }
  }

+  function handleEditSnippet(snippet: Snippet) {
+    setEditingSnippet(snippet);
+    setSnippetFormOpen(true);
+  }
+
  const filtered = snippetSearch
    ? snippets.filter(
        (s) =>
          s.name.toLowerCase().includes(snippetSearch.toLowerCase()) ||
-          s.command.toLowerCase().includes(snippetSearch.toLowerCase()),
+          s.content.toLowerCase().includes(snippetSearch.toLowerCase()),
      )
    : snippets;

-  const namedFolders = folders.filter((f) => f.name !== "Uncategorized");
-  const uncategorized = folders.find((f) => f.name === "Uncategorized");
-  const allFolders = [
-    ...namedFolders,
-    ...(uncategorized ? [uncategorized] : []),
-  ];
+  const uncategorizedSnippets = filtered.filter((s) => s.folder === null);

  return (
    <>
@@ -442,7 +820,9 @@ export function SnippetsPanel({
              <div className="flex items-center gap-2">
                <button
                  onClick={() =>
-                    setSelectedTabIds(new Set(terminalTabs.map((t) => t.id)))
+                    setSelectedTabIds(
+                      new Set(terminalTabs.map((tab) => tab.id)),
+                    )
                  }
                  className="text-[10px] text-accent-brand hover:text-accent-brand/70"
                >
@@ -511,7 +891,10 @@ export function SnippetsPanel({
          <Button
            variant="outline"
            className="flex-1 text-xs min-w-0 overflow-hidden"
-            onClick={() => setCreateSnippetOpen(true)}
+            onClick={() => {
+              setEditingSnippet(null);
+              setSnippetFormOpen(true);
+            }}
          >
            <Plus className="size-3.5 shrink-0" />
            {t("newUi.sidebar.snippets.newSnippet")}
@@ -526,11 +909,49 @@ export function SnippetsPanel({
          </Button>
        </div>
        <div className="flex flex-col gap-4">
-          {allFolders.map((folder) => {
-            const folderSnippets = filtered.filter((s) =>
-              folder.name === "Uncategorized"
-                ? s.folderId === null || s.folderId === folder.id
-                : s.folderId === folder.id,
+          {(!snippetSearch || uncategorizedSnippets.length > 0) && (
+            <div className="flex flex-col gap-2">
+              <button
+                onClick={() => setUncategorizedOpen((v) => !v)}
+                className="flex items-center gap-1.5 w-full text-left"
+              >
+                <ChevronDown
+                  className={`size-3 text-muted-foreground shrink-0 transition-transform ${uncategorizedOpen ? "" : "-rotate-90"}`}
+                />
+                <Folder className="size-3.5 shrink-0 text-muted-foreground" />
+                <span className="text-xs font-semibold flex-1 truncate text-muted-foreground">
+                  {t("newUi.sidebar.snippets.uncategorized")}
+                </span>
+                <span className="text-xs text-muted-foreground shrink-0">
+                  {uncategorizedSnippets.length}
+                </span>
+              </button>
+              {uncategorizedOpen && (
+                <div className="flex flex-col gap-2 ml-1">
+                  {uncategorizedSnippets.map((snippet) => (
+                    <SnippetCard
+                      key={snippet.id}
+                      snippet={snippet}
+                      selectedTabIds={selectedTabIds}
+                      terminalTabs={terminalTabs}
+                      onDelete={handleDeleteSnippet}
+                      onEdit={handleEditSnippet}
+                      onShare={setShareSnippet}
+                      t={t}
+                    />
+                  ))}
+                  {uncategorizedSnippets.length === 0 && (
+                    <span className="text-xs text-muted-foreground/60 pl-1">
+                      {t("newUi.sidebar.snippets.noSnippetsInFolder")}
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+          {folders.map((folder) => {
+            const folderSnippets = filtered.filter(
+              (s) => s.folder === folder.name,
            );
            if (folderSnippets.length === 0 && snippetSearch) return null;
            return (
@@ -549,12 +970,7 @@ export function SnippetsPanel({
                  />
                  <span
                    className="text-xs font-semibold flex-1 truncate"
-                    style={{
-                      color:
-                        folder.name === "Uncategorized"
-                          ? undefined
-                          : folder.color,
-                    }}
+                    style={{ color: folder.color }}
                  >
                    {folder.name}
                  </span>
@@ -565,71 +981,16 @@ export function SnippetsPanel({
                {folder.open && (
                  <div className="flex flex-col gap-2 ml-1">
                    {folderSnippets.map((snippet) => (
-                      <div
+                      <SnippetCard
                        key={snippet.id}
-                        className="border border-border bg-background p-2.5 flex flex-col gap-2"
-                      >
-                        <div className="flex items-start gap-2">
-                          <div className="grid grid-cols-2 gap-px mt-0.5 shrink-0 opacity-30">
-                            <div className="size-1 bg-muted-foreground rounded-full" />
-                            <div className="size-1 bg-muted-foreground rounded-full" />
-                            <div className="size-1 bg-muted-foreground rounded-full" />
-                            <div className="size-1 bg-muted-foreground rounded-full" />
-                          </div>
-                          <div className="flex flex-col min-w-0">
-                            <span className="text-xs font-semibold">
-                              {snippet.name}
-                            </span>
-                            {snippet.description && (
-                              <span className="text-xs text-muted-foreground">
-                                {snippet.description}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                        <span className="text-xs text-muted-foreground font-mono px-1">
-                          {snippet.command}
-                        </span>
-                        <div className="flex items-center gap-1">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            className="flex-1 text-xs h-7 gap-1.5"
-                          >
-                            <Play className="size-3" />
-                            {t("newUi.sidebar.snippets.run")}
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="size-7 text-muted-foreground hover:text-foreground shrink-0"
-                          >
-                            <Copy className="size-3.5" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="size-7 text-muted-foreground hover:text-foreground shrink-0"
-                          >
-                            <Pencil className="size-3.5" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="size-7 text-muted-foreground hover:text-destructive shrink-0"
-                            onClick={() => deleteSnippet(snippet.id)}
-                          >
-                            <Trash2 className="size-3.5" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="size-7 text-muted-foreground hover:text-foreground shrink-0"
-                          >
-                            <Share2 className="size-3.5" />
-                          </Button>
-                        </div>
-                      </div>
+                        snippet={snippet}
+                        selectedTabIds={selectedTabIds}
+                        terminalTabs={terminalTabs}
+                        onDelete={handleDeleteSnippet}
+                        onEdit={handleEditSnippet}
+                        onShare={setShareSnippet}
+                        t={t}
+                      />
                    ))}
                    {folderSnippets.length === 0 && (
                      <span className="text-xs text-muted-foreground/60 pl-1">
@@ -644,17 +1005,25 @@ export function SnippetsPanel({
        </div>
      </div>

-      <CreateSnippetDialog
-        open={createSnippetOpen}
-        onOpenChange={setCreateSnippetOpen}
+      <SnippetFormDialog
+        open={snippetFormOpen}
+        onOpenChange={(v) => {
+          setSnippetFormOpen(v);
+          if (!v) setEditingSnippet(null);
+        }}
        folders={folders}
-        onCreate={handleCreateSnippet}
+        snippet={editingSnippet}
+        onSave={handleSaveSnippet}
      />
      <CreateFolderDialog
        open={createFolderOpen}
        onOpenChange={setCreateFolderOpen}
        onCreate={handleCreateFolder}
      />
+      <ShareSnippetDialog
+        snippet={shareSnippet}
+        onClose={() => setShareSnippet(null)}
+      />
    </>
  );
 }
@@ -1,9 +1,10 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "@/components/button";
 import { Separator } from "@/components/separator";
 import { Terminal } from "lucide-react";
 import type { Tab } from "@/types/ui-types";
+import { getCookie, setCookie } from "@/main-axios";

 export function SshToolsPanel({
  terminalTabs,
@@ -14,7 +15,9 @@ export function SshToolsPanel({
 }) {
  const { t } = useTranslation();
  const [keyRecording, setKeyRecording] = useState(false);
-  const [rightClickPaste, setRightClickPaste] = useState(false);
+  const [rightClickPaste, setRightClickPaste] = useState(
+    () => getCookie("rightClickCopyPaste") !== "false",
+  );
  const [selectedTabIds, setSelectedTabIds] = useState<Set<string>>(
    () =>
      new Set(
@@ -23,6 +26,11 @@ export function SshToolsPanel({
          : [],
      ),
  );
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (keyRecording) inputRef.current?.focus();
+  }, [keyRecording]);

  function toggleTab(id: string) {
    setSelectedTabIds((prev) => {
@@ -40,6 +48,89 @@ export function SshToolsPanel({
    setSelectedTabIds(new Set());
  }

+  function broadcast(data: string) {
+    for (const tabId of selectedTabIds) {
+      const tab = terminalTabs.find((t) => t.id === tabId);
+      (tab?.terminalRef?.current as any)?.sendInput?.(data);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const ctrl = e.ctrlKey;
+    const { key } = e;
+
+    if (ctrl) {
+      const ctrlMap: Record<string, string> = {
+        c: "\x03",
+        d: "\x04",
+        l: "\x0C",
+        u: "\x15",
+        k: "\x0B",
+        a: "\x01",
+        e: "\x05",
+        w: "\x17",
+        z: "\x1A",
+        r: "\x12",
+      };
+      const seq = ctrlMap[key.toLowerCase()];
+      if (seq) {
+        broadcast(seq);
+        return;
+      }
+    }
+
+    const specialMap: Record<string, string> = {
+      Enter: "\r",
+      Backspace: "\x7F",
+      Delete: "\x1B[3~",
+      Tab: "\t",
+      Escape: "\x1B",
+      ArrowUp: "\x1B[A",
+      ArrowDown: "\x1B[B",
+      ArrowRight: "\x1B[C",
+      ArrowLeft: "\x1B[D",
+      Home: "\x1B[H",
+      End: "\x1B[F",
+      PageUp: "\x1B[5~",
+      PageDown: "\x1B[6~",
+      Insert: "\x1B[2~",
+      F1: "\x1BOP",
+      F2: "\x1BOQ",
+      F3: "\x1BOR",
+      F4: "\x1BOS",
+      F5: "\x1B[15~",
+      F6: "\x1B[17~",
+      F7: "\x1B[18~",
+      F8: "\x1B[19~",
+      F9: "\x1B[20~",
+      F10: "\x1B[21~",
+      F11: "\x1B[23~",
+      F12: "\x1B[24~",
+    };
+
+    const seq = specialMap[key];
+    if (seq) {
+      broadcast(seq);
+      return;
+    }
+
+    if (!ctrl && !e.altKey && !e.metaKey && key.length === 1) {
+      broadcast(key);
+    }
+  }
+
+  function toggleRecording() {
+    const next = !keyRecording;
+    if (!next) {
+      // clear the phantom text when stopping
+      if (inputRef.current) inputRef.current.value = "";
+    }
+    setKeyRecording(next);
+  }
+
  return (
    <div className="flex flex-col gap-3 p-3">
      <div className="flex flex-col gap-2">
@@ -114,14 +205,24 @@ export function SshToolsPanel({
          variant="outline"
          disabled={selectedTabIds.size === 0}
          className={`w-full ${keyRecording ? "border-accent-brand/40 text-accent-brand bg-accent-brand/10 hover:bg-accent-brand/20 hover:text-accent-brand" : ""}`}
-          onClick={() => setKeyRecording((o) => !o)}
+          onClick={toggleRecording}
        >
          {keyRecording
-            ? `Stop Recording (${selectedTabIds.size})`
+            ? `${t("newUi.sidebar.sshTools.stopRecording")} (${selectedTabIds.size})`
            : selectedTabIds.size === 0
              ? t("newUi.sidebar.sshTools.selectTerminalsAbove")
-              : `Start Recording (${selectedTabIds.size})`}
+              : `${t("newUi.sidebar.sshTools.startRecording")} (${selectedTabIds.size})`}
        </Button>
+
+        {keyRecording && (
+          <input
+            ref={inputRef}
+            readOnly
+            onKeyDown={handleKeyDown}
+            placeholder={t("newUi.sidebar.sshTools.broadcastInputPlaceholder")}
+            className="w-full px-2.5 py-2 text-xs bg-background border border-accent-brand/40 text-foreground placeholder:text-muted-foreground/40 outline-none focus:border-accent-brand/70 caret-transparent"
+          />
+        )}
      </div>

      <Separator />
@@ -135,7 +236,11 @@ export function SshToolsPanel({
            {t("newUi.sidebar.sshTools.enableRightClickCopyPaste")}
          </span>
          <button
-            onClick={() => setRightClickPaste((o) => !o)}
+            onClick={() => {
+              const next = !rightClickPaste;
+              setRightClickPaste(next);
+              setCookie("rightClickCopyPaste", next ? "true" : "false");
+            }}
            className={`relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center border-2 transition-colors ${
              rightClickPaste
                ? "bg-accent-brand border-accent-brand"
@@ -12,7 +12,9 @@ import {
  enableTOTP,
  disableTOTP,
  getVersionInfo,
+  getUserRoles,
 } from "@/main-axios";
+import type { UserRole } from "@/main-axios";
 import type React from "react";
 import { isElectron } from "@/lib/electron";
 import { C2STunnelPresetManager } from "@/user/C2STunnelPresetManager";
@@ -65,17 +67,17 @@ type UserProfileSection =
  | "api-keys"
  | "c2s-tunnels";

-const THEMES: { id: ThemeId; label: string; preview: string }[] = [
-  { id: "system", label: "System", preview: "auto" },
-  { id: "light", label: "Light", preview: "#ffffff" },
-  { id: "dark", label: "Dark", preview: "#1a1c22" },
-  { id: "dracula", label: "Dracula", preview: "#282a36" },
-  { id: "catppuccin", label: "Catppuccin", preview: "#1e1e2e" },
-  { id: "nord", label: "Nord", preview: "#2e3440" },
-  { id: "solarized", label: "Solarized", preview: "#002b36" },
-  { id: "tokyo-night", label: "Tokyo Night", preview: "#1a1b26" },
-  { id: "one-dark", label: "One Dark", preview: "#282c34" },
-  { id: "gruvbox", label: "Gruvbox", preview: "#282828" },
+const THEMES: { id: ThemeId; preview: string }[] = [
+  { id: "system", preview: "auto" },
+  { id: "light", preview: "#ffffff" },
+  { id: "dark", preview: "#1a1c22" },
+  { id: "dracula", preview: "#282a36" },
+  { id: "catppuccin", preview: "#1e1e2e" },
+  { id: "nord", preview: "#2e3440" },
+  { id: "solarized", preview: "#002b36" },
+  { id: "tokyo-night", preview: "#1a1b26" },
+  { id: "one-dark", preview: "#282c34" },
+  { id: "gruvbox", preview: "#282828" },
 ];

 const LANGUAGES = [
@@ -380,6 +382,18 @@ export function UserProfilePanel({
  onLogout?: () => void;
 }) {
  const { t } = useTranslation();
+  const themeLabel: Record<ThemeId, string> = {
+    system: t("newUi.sidebar.userProfile.themeSystem"),
+    light: t("newUi.sidebar.userProfile.themeLight"),
+    dark: t("newUi.sidebar.userProfile.themeDark"),
+    dracula: t("newUi.sidebar.userProfile.themeDracula"),
+    catppuccin: t("newUi.sidebar.userProfile.themeCatppuccin"),
+    nord: t("newUi.sidebar.userProfile.themeNord"),
+    solarized: t("newUi.sidebar.userProfile.themeSolarized"),
+    "tokyo-night": t("newUi.sidebar.userProfile.themeTokyoNight"),
+    "one-dark": t("newUi.sidebar.userProfile.themeOneDark"),
+    gruvbox: t("newUi.sidebar.userProfile.themeGruvbox"),
+  };
  const [openSection, setOpenSection] = useState<UserProfileSection | null>(
    "account",
  );
@@ -389,6 +403,9 @@ export function UserProfilePanel({
  const [userRole, setUserRole] = useState("");
  const [authMethod, setAuthMethod] = useState("");
  const [version, setVersion] = useState("");
+  const [versionStatus, setVersionStatus] = useState<
+    "up_to_date" | "requires_update" | "beta"
+  >("up_to_date");
  const [isOidc, setIsOidc] = useState(false);
  const [isDualAuth, setIsDualAuth] = useState(false);

@@ -467,6 +484,9 @@ export function UserProfilePanel({
  // API keys
  const [apiKeys, setApiKeys] = useState<ApiKey[]>([]);

+  // RBAC roles
+  const [userRoles, setUserRoles] = useState<UserRole[]>([]);
+
  useEffect(() => {
    getUserInfo()
      .then((info) => {
@@ -486,13 +506,19 @@ export function UserProfilePanel({
        } else {
          setAuthMethod(t("newUi.sidebar.userProfile.authMethodLocal"));
        }
+        getUserRoles(info.userId)
+          .then(({ roles }) => setUserRoles(roles ?? []))
+          .catch(() => {});
      })
      .catch(() => {});
    getApiKeys()
      .then(({ apiKeys: keys }) => setApiKeys(keys))
      .catch(() => {});
-    getVersionInfo(false)
-      .then((info) => setVersion(info.localVersion))
+    getVersionInfo()
+      .then((info) => {
+        setVersion(info.localVersion);
+        setVersionStatus(info.status ?? "up_to_date");
+      })
      .catch(() => {});
  }, []);

@@ -638,9 +664,19 @@ export function UserProfilePanel({
              <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
                {t("newUi.sidebar.userProfile.roleLabel")}
              </span>
-              <span className="inline-flex items-center px-1.5 py-0.5 text-[10px] font-semibold border border-accent-brand/40 bg-accent-brand/10 text-accent-brand mt-0.5 w-fit">
+              <div className="flex flex-wrap gap-1 mt-0.5">
+                <span className="inline-flex items-center px-1.5 py-0.5 text-[10px] font-semibold border border-accent-brand/40 bg-accent-brand/10 text-accent-brand w-fit">
                  {userRole || "—"}
                </span>
+                {userRoles.map((r) => (
+                  <span
+                    key={r.roleId}
+                    className="inline-flex items-center px-1.5 py-0.5 text-[10px] font-semibold border border-border bg-muted text-muted-foreground w-fit"
+                  >
+                    {r.roleDisplayName}
+                  </span>
+                ))}
+              </div>
            </div>
            <div className="flex flex-col py-2">
              <span className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold">
@@ -679,6 +715,21 @@ export function UserProfilePanel({
              <span className="text-sm font-bold text-accent-brand">
                {version ? `v${version}` : "—"}
              </span>
+              <span
+                className={`text-[10px] px-1.5 py-0.5 font-semibold leading-none ${
+                  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"
+                }`}
+              >
+                {versionStatus === "beta"
+                  ? t("dashboard.beta").toUpperCase()
+                  : versionStatus === "requires_update"
+                    ? t("dashboard.updateAvailable").toUpperCase()
+                    : t("dashboardTab.stable")}
+              </span>
            </div>
          </div>

@@ -743,7 +794,7 @@ export function UserProfilePanel({
              >
                {THEMES.map((th) => (
                  <option key={th.id} value={th.id}>
-                    {th.label}
+                    {themeLabel[th.id]}
                  </option>
                ))}
              </select>
@@ -753,7 +804,7 @@ export function UserProfilePanel({
              {THEMES.filter((th) => th.id !== "system").map((th) => (
                <button
                  key={th.id}
-                  title={th.label}
+                  title={themeLabel[th.id]}
                  onClick={() => setTheme(th.id)}
                  className={`h-4 flex-1 border transition-all ${theme === th.id ? "border-accent-brand ring-1 ring-accent-brand" : "border-border/50"}`}
                  style={{ background: th.preview }}
@@ -808,7 +859,7 @@ export function UserProfilePanel({
                onClick={() => colorInputRef.current?.click()}
                className="size-5 shrink-0 border border-border/60 cursor-pointer"
                style={{ background: accentColor }}
-                title="Open color picker"
+                title={t("newUi.sidebar.userProfile.colorPickerTooltip")}
              />
              <input
                ref={colorInputRef}
@@ -1136,7 +1187,7 @@ export function UserProfilePanel({
                  <div className="flex items-center justify-center p-3 bg-background border border-border">
                    <img
                      src={totpQrCode}
-                      alt="TOTP QR Code"
+                      alt={t("newUi.sidebar.userProfile.qrCode")}
                      className="size-32"
                    />
                  </div>
@@ -51,7 +51,7 @@ export function ConnectionLog({
  }, [logs, isExpanded]);

  const shouldShow =
-    isConnecting || hasConnectionError || (logs.length > 0 && !isConnected);
+    !isConnected && (isConnecting || hasConnectionError || logs.length > 0);

  if (!shouldShow) {
    return null;