fix: syntax errors

src/locales/en/translation.json

@@ -165,8 +165,7 @@
     "keyTypeEcdsaP521": "ECDSA P-521 (SSH)",
     "keyTypeDsa": "DSA (SSH)",
     "keyTypeRsaSha256": "RSA-SHA2-256",
-    "keyTypeRsaSha512": "RSA-SHA2-512"
+    "keyTypeRsaSha512": "RSA-SHA2-512",
-  },
     "keyPairGeneratedSuccessfully": "{{keyType}} key pair generated successfully",
     "failedToGenerateKeyPair": "Failed to generate key pair",
     "generateKeyPairNote": "Generate a new SSH key pair directly. This will replace any existing keys in the form.",
@@ -286,7 +285,30 @@
     "deleteTooltip": "Delete command",
     "tabHint": "Use Tab in Terminal to autocomplete from command history",
     "authRequiredRefresh": "Authentication required. Please refresh the page.",
-    "dataAccessLockedReauth": "Data access locked. Please re-authenticate."
+    "dataAccessLockedReauth": "Data access locked. Please re-authenticate.",
+    "loading": "Loading command history...",
+    "error": "Error Loading History"
+  },
+  "splitScreen": {
+    "title": "Split Screen",
+    "none": "None",
+    "twoSplit": "2-Way",
+    "threeSplit": "3-Way",
+    "fourSplit": "4-Way",
+    "availableTabs": "Available Tabs",
+    "dragTabsHint": "Drag tabs to the layout cells below to assign them",
+    "layout": "Split Screen Layout",
+    "dropHere": "Drop tab here",
+    "apply": "Apply Split",
+    "clear": "Clear Split",
+    "selectMode": "Select a split screen mode",
+    "helpText": "Choose how many tabs you want to view at once",
+    "success": "Split screen applied successfully",
+    "cleared": "Split screen cleared",
+    "error": {
+      "noAssignments": "Please assign at least one tab to the layout",
+      "fillAllSlots": "Please fill all {{count}} slots before applying"
+    }
   },
   "homepage": {
     "loggedInTitle": "Logged in!",
@@ -1578,7 +1600,7 @@
     "connecting": "Connecting...",
     "disconnecting": "Disconnecting...",
     "unknownTunnelStatus": "Unknown",
-    "statusUnknown": "Unknown"
+    "statusUnknown": "Unknown",
     "error": "Error",
     "failed": "Failed",
     "retrying": "Retrying",
@@ -1593,7 +1615,7 @@
     "attempt": "Attempt {{current}} of {{max}}",
     "nextRetryIn": "Next retry in {{seconds}} seconds",
     "checkDockerLogs": "Check your Docker logs for the error reason, join the",
-    "orCreate": "or create a ",,
+    "orCreate": "or create a ",
     "noTunnelConnections": "No tunnel connections configured",
     "tunnelConnections": "Tunnel Connections",
     "addTunnel": "Add Tunnel",

src/ui/desktop/admin/AdminSettings.tsx

@@ -768,23 +768,38 @@ export function AdminSettings({
                 <Users className="h-4 w-4" />
                 {t("admin.general")}
               </TabsTrigger>
-              <TabsTrigger value="oidc" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
+              <TabsTrigger
+                value="oidc"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
                 <Shield className="h-4 w-4" />
                 OIDC
               </TabsTrigger>
-              <TabsTrigger value="users" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
+              <TabsTrigger
+                value="users"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
                 <Users className="h-4 w-4" />
                 {t("admin.users")}
               </TabsTrigger>
-              <TabsTrigger value="sessions" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
+              <TabsTrigger
+                value="sessions"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
                 <Clock className="h-4 w-4" />
                 Sessions
               </TabsTrigger>
-              <TabsTrigger value="roles" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
+              <TabsTrigger
+                value="roles"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
                 <Shield className="h-4 w-4" />
                 {t("rbac.roles.label")}
               </TabsTrigger>
-              <TabsTrigger value="security" className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge">
+              <TabsTrigger
+                value="security"
+                className="flex items-center gap-2 bg-elevated data-[state=active]:bg-button data-[state=active]:border data-[state=active]:border-edge"
+              >
                 <Database className="h-4 w-4" />
                 {t("admin.databaseSecurity")}
               </TabsTrigger>
@@ -795,27 +810,27 @@ export function AdminSettings({
                 <h3 className="text-lg font-semibold">
                   {t("admin.userRegistration")}
                 </h3>
-                  <label className="flex items-center gap-2">
+                <label className="flex items-center gap-2">
-                    <Checkbox
+                  <Checkbox
-                      checked={allowRegistration}
+                    checked={allowRegistration}
-                      onCheckedChange={handleToggleRegistration}
+                    onCheckedChange={handleToggleRegistration}
-                      disabled={regLoading || !allowPasswordLogin}
+                    disabled={regLoading || !allowPasswordLogin}
-                    />
+                  />
-                    {t("admin.allowNewAccountRegistration")}
+                  {t("admin.allowNewAccountRegistration")}
-                    {!allowPasswordLogin && (
+                  {!allowPasswordLogin && (
-                      <span className="text-xs text-muted-foreground">
+                    <span className="text-xs text-muted-foreground">
-                        ({t("admin.requiresPasswordLogin")})
+                      ({t("admin.requiresPasswordLogin")})
-                      </span>
+                    </span>
-                    )}
+                  )}
-                  </label>
+                </label>
-                  <label className="flex items-center gap-2">
+                <label className="flex items-center gap-2">
-                    <Checkbox
+                  <Checkbox
-                      checked={allowPasswordLogin}
+                    checked={allowPasswordLogin}
-                      onCheckedChange={handleTogglePasswordLogin}
+                    onCheckedChange={handleTogglePasswordLogin}
-                      disabled={passwordLoginLoading}
+                    disabled={passwordLoginLoading}
-                    />
+                  />
-                    {t("admin.allowPasswordLogin")}
+                  {t("admin.allowPasswordLogin")}
-                  </label>
+                </label>
               </div>
             </TabsContent>
 
@@ -1189,7 +1204,9 @@ export function AdminSettings({
             <TabsContent value="sessions" className="space-y-6">
               <div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
                 <div className="flex items-center justify-between">
-                  <h3 className="text-lg font-semibold">{t("admin.sessionManagement")}</h3>
+                  <h3 className="text-lg font-semibold">
+                    {t("admin.sessionManagement")}
+                  </h3>
                   <Button
                     onClick={fetchSessions}
                     disabled={sessionsLoading}
@@ -1297,7 +1314,9 @@ export function AdminSettings({
                                       )
                                     }
                                     className="text-orange-600 hover:text-orange-700 hover:bg-orange-50 text-xs"
-                                    title={t("admin.revokeAllUserSessionsTitle")}
+                                    title={t(
+                                      "admin.revokeAllUserSessionsTitle",
+                                    )}
                                   >
                                     {t("admin.revokeAll")}
                                   </Button>
@@ -1314,7 +1333,9 @@ export function AdminSettings({
             </TabsContent>
 
             <TabsContent value="roles" className="space-y-6">
-              <RoleManagement />
+              <div className="rounded-lg border-2 border-border bg-card p-4 space-y-4">
+                <RoleManagement />
+              </div>
             </TabsContent>
 
             <TabsContent value="security" className="space-y-6">
@@ -1457,10 +1478,11 @@ export function AdminSettings({
         >
           <DialogContent className="sm:max-w-[500px] bg-canvas border-2 border-edge">
             <DialogHeader>
-                              <DialogTitle className="flex items-center gap-2">
+              <DialogTitle className="flex items-center gap-2">
-                                <Link2 className="w-5 h-5" />
+                <Link2 className="w-5 h-5" />
-                                {t("admin.linkOidcToPasswordAccount")}
+                {t("admin.linkOidcToPasswordAccount")}
-                              </DialogTitle>              <DialogDescription className="text-muted-foreground">
+              </DialogTitle>{" "}
+              <DialogDescription className="text-muted-foreground">
                 {t("admin.linkOidcToPasswordAccountDescription", {
                   username: linkOidcUser?.username,
                 })}

src/ui/desktop/admin/RoleManagement.tsx

@@ -19,23 +19,8 @@ import {
 import { Input } from "@/components/ui/input.tsx";
 import { Label } from "@/components/ui/label.tsx";
 import { Textarea } from "@/components/ui/textarea.tsx";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select.tsx";
 import { Badge } from "@/components/ui/badge.tsx";
-import {
+import { Shield, Plus, Edit, Trash2 } from "lucide-react";
-  Shield,
-  Plus,
-  Edit,
-  Trash2,
-  Users,
-  Check,
-  ChevronsUpDown,
-} from "lucide-react";
 import { toast } from "sonner";
 import { useTranslation } from "react-i18next";
 import { useConfirmation } from "@/hooks/use-confirmation.ts";
@@ -44,39 +29,14 @@ import {
   createRole,
   updateRole,
   deleteRole,
-  getUserList,
-  getUserRoles,
-  assignRoleToUser,
-  removeRoleFromUser,
   type Role,
-  type UserRole,
 } from "@/ui/main-axios.ts";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from "@/components/ui/command.tsx";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover.tsx";
-import { cn } from "@/lib/utils";
-
-interface User {
-  id: string;
-  username: string;
-  is_admin: boolean;
-}
 
 export function RoleManagement(): React.ReactElement {
   const { t } = useTranslation();
   const { confirmWithToast } = useConfirmation();
 
   const [roles, setRoles] = React.useState<Role[]>([]);
-  const [users, setUsers] = React.useState<User[]>([]);
   const [loading, setLoading] = React.useState(false);
 
   // Create/Edit Role Dialog
@@ -86,18 +46,6 @@ export function RoleManagement(): React.ReactElement {
   const [roleDisplayName, setRoleDisplayName] = React.useState("");
   const [roleDescription, setRoleDescription] = React.useState("");
 
-  // Assign Role Dialog
-  const [assignDialogOpen, setAssignDialogOpen] = React.useState(false);
-  const [selectedUserId, setSelectedUserId] = React.useState<string>("");
-  const [selectedRoleId, setSelectedRoleId] = React.useState<number | null>(
-    null,
-  );
-  const [userRoles, setUserRoles] = React.useState<UserRole[]>([]);
-
-  // Combobox states
-  const [userComboOpen, setUserComboOpen] = React.useState(false);
-  const [roleComboOpen, setRoleComboOpen] = React.useState(false);
-
   // Load roles
   const loadRoles = React.useCallback(async () => {
     setLoading(true);
@@ -113,27 +61,9 @@ export function RoleManagement(): React.ReactElement {
     }
   }, [t]);
 
-  // Load users
-  const loadUsers = React.useCallback(async () => {
-    try {
-      const response = await getUserList();
-      // Map UserInfo to User format
-      const mappedUsers = (response.users || []).map((user) => ({
-        id: user.id,
-        username: user.username,
-        is_admin: user.is_admin,
-      }));
-      setUsers(mappedUsers);
-    } catch (error) {
-      console.error("Failed to load users:", error);
-      setUsers([]);
-    }
-  }, []);
-
   React.useEffect(() => {
     loadRoles();
-    loadUsers();
+  }, [loadRoles]);
-  }, [loadRoles, loadUsers]);
 
   // Create role
   const handleCreateRole = () => {
@@ -212,70 +142,6 @@ export function RoleManagement(): React.ReactElement {
     }
   };
 
-  // Open assign dialog
-  const handleOpenAssignDialog = async () => {
-    setSelectedUserId("");
-    setSelectedRoleId(null);
-    setUserRoles([]);
-    setAssignDialogOpen(true);
-  };
-
-  // Load user roles when user is selected
-  const handleUserSelect = async (userId: string) => {
-    setSelectedUserId(userId);
-    setUserRoles([]);
-
-    if (!userId) return;
-
-    try {
-      const response = await getUserRoles(userId);
-      setUserRoles(response.roles || []);
-    } catch (error) {
-      console.error("Failed to load user roles:", error);
-      setUserRoles([]);
-    }
-  };
-
-  // Assign role to user
-  const handleAssignRole = async () => {
-    if (!selectedUserId || !selectedRoleId) {
-      toast.error(t("rbac.selectUserAndRole"));
-      return;
-    }
-
-    try {
-      await assignRoleToUser(selectedUserId, selectedRoleId);
-      const selectedUser = users.find((u) => u.id === selectedUserId);
-      toast.success(
-        t("rbac.roleAssignedSuccessfully", {
-          username: selectedUser?.username || selectedUserId,
-        }),
-      );
-      setSelectedRoleId(null);
-      handleUserSelect(selectedUserId);
-    } catch (error) {
-      toast.error(t("rbac.failedToAssignRole"));
-    }
-  };
-
-  // Remove role from user
-  const handleRemoveUserRole = async (roleId: number) => {
-    if (!selectedUserId) return;
-
-    try {
-      await removeRoleFromUser(selectedUserId, roleId);
-      const selectedUser = users.find((u) => u.id === selectedUserId);
-      toast.success(
-        t("rbac.roleRemovedSuccessfully", {
-          username: selectedUser?.username || selectedUserId,
-        }),
-      );
-      handleUserSelect(selectedUserId);
-    } catch (error) {
-      toast.error(t("rbac.failedToRemoveRole"));
-    }
-  };
-
   return (
     <div className="space-y-6">
       {/* Roles Section */}
@@ -366,20 +232,6 @@ export function RoleManagement(): React.ReactElement {
         </Table>
       </div>
 
-      {/* User-Role Assignment Section */}
-      <div className="space-y-4">
-        <div className="flex items-center justify-between">
-          <h3 className="text-lg font-semibold flex items-center gap-2">
-            <Users className="h-5 w-5" />
-            {t("rbac.userRoleAssignment")}
-          </h3>
-          <Button onClick={handleOpenAssignDialog}>
-            <Users className="h-4 w-4 mr-2" />
-            {t("rbac.assignRoles")}
-          </Button>
-        </div>
-      </div>
-
       {/* Create/Edit Role Dialog */}
       <Dialog open={roleDialogOpen} onOpenChange={setRoleDialogOpen}>
         <DialogContent className="sm:max-w-[500px] bg-dark-bg border-2 border-dark-border">
@@ -443,208 +295,6 @@ export function RoleManagement(): React.ReactElement {
           </DialogFooter>
         </DialogContent>
       </Dialog>
-
-      {/* Assign Role Dialog */}
-      <Dialog open={assignDialogOpen} onOpenChange={setAssignDialogOpen}>
-        <DialogContent className="max-w-2xl bg-dark-bg border-2 border-dark-border">
-          <DialogHeader>
-            <DialogTitle>{t("rbac.assignRoles")}</DialogTitle>
-            <DialogDescription>
-              {t("rbac.assignRolesDescription")}
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-6 py-4">
-            {/* User Selection */}
-            <div className="space-y-2">
-              <Label htmlFor="user-select">{t("rbac.selectUser")}</Label>
-              <Popover open={userComboOpen} onOpenChange={setUserComboOpen}>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={userComboOpen}
-                    className="w-full justify-between"
-                  >
-                    {selectedUserId
-                      ? users.find((u) => u.id === selectedUserId)?.username +
-                        (users.find((u) => u.id === selectedUserId)?.is_admin
-                          ? " (Admin)"
-                          : "")
-                      : t("rbac.selectUserPlaceholder")}
-                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                  className="p-0"
-                  style={{ width: "var(--radix-popover-trigger-width)" }}
-                >
-                  <Command>
-                    <CommandInput placeholder={t("rbac.searchUsers")} />
-                    <CommandEmpty>{t("rbac.noUserFound")}</CommandEmpty>
-                    <CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
-                      {users.map((user) => (
-                        <CommandItem
-                          key={user.id}
-                          value={`${user.username} ${user.id}`}
-                          onSelect={() => {
-                            handleUserSelect(user.id);
-                            setUserComboOpen(false);
-                          }}
-                        >
-                          <Check
-                            className={cn(
-                              "mr-2 h-4 w-4",
-                              selectedUserId === user.id
-                                ? "opacity-100"
-                                : "opacity-0",
-                            )}
-                          />
-                          {user.username}
-                          {user.is_admin ? " (Admin)" : ""}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </div>
-
-            {/* Current User Roles */}
-            {selectedUserId && (
-              <div className="space-y-2">
-                <Label>{t("rbac.currentRoles")}</Label>
-                {userRoles.length === 0 ? (
-                  <p className="text-sm text-muted-foreground">
-                    {t("rbac.noRolesAssigned")}
-                  </p>
-                ) : (
-                  <div className="space-y-2 max-h-[40vh] overflow-y-auto thin-scrollbar pr-2">
-                    {userRoles.map((userRole, index) => (
-                      <div
-                        key={index}
-                        className="flex items-center justify-between p-2 border rounded"
-                      >
-                        <div>
-                          <p className="font-medium">
-                            {t(userRole.roleDisplayName)}
-                          </p>
-                          {userRole.roleDisplayName && (
-                            <p className="text-xs text-muted-foreground">
-                              {userRole.roleName}
-                            </p>
-                          )}
-                        </div>
-                        <div className="flex items-center gap-2">
-                          {userRole.isSystem ? (
-                            <Badge variant="secondary" className="text-xs">
-                              {t("rbac.systemRole")}
-                            </Badge>
-                          ) : (
-                            <Button
-                              size="sm"
-                              variant="ghost"
-                              onClick={() =>
-                                handleRemoveUserRole(userRole.roleId)
-                              }
-                            >
-                              <Trash2 className="h-4 w-4" />
-                            </Button>
-                          )}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Assign New Role */}
-            {selectedUserId && (
-              <div className="space-y-2">
-                <Label htmlFor="role-select">{t("rbac.assignNewRole")}</Label>
-                <div className="flex gap-2">
-                  <Popover open={roleComboOpen} onOpenChange={setRoleComboOpen}>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant="outline"
-                        role="combobox"
-                        aria-expanded={roleComboOpen}
-                        className="flex-1 justify-between"
-                      >
-                        {selectedRoleId !== null
-                          ? (() => {
-                              const role = roles.find(
-                                (r) => r.id === selectedRoleId,
-                              );
-                              return role
-                                ? `${t(role.displayName)}${role.isSystem ? ` (${t("rbac.systemRole")})` : ""}`
-                                : t("rbac.selectRolePlaceholder");
-                            })()
-                          : t("rbac.selectRolePlaceholder")}
-                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent
-                      className="p-0"
-                      style={{ width: "var(--radix-popover-trigger-width)" }}
-                    >
-                      <Command>
-                        <CommandInput placeholder={t("rbac.searchRoles")} />
-                        <CommandEmpty>{t("rbac.noRoleFound")}</CommandEmpty>
-                        <CommandGroup className="max-h-[300px] overflow-y-auto thin-scrollbar">
-                          {roles
-                            .filter(
-                              (role) =>
-                                !role.isSystem &&
-                                !userRoles.some((ur) => ur.roleId === role.id),
-                            )
-                            .map((role) => (
-                              <CommandItem
-                                key={role.id}
-                                value={`${role.displayName} ${role.name} ${role.id}`}
-                                onSelect={() => {
-                                  setSelectedRoleId(role.id);
-                                  setRoleComboOpen(false);
-                                }}
-                              >
-                                <Check
-                                  className={cn(
-                                    "mr-2 h-4 w-4",
-                                    selectedRoleId === role.id
-                                      ? "opacity-100"
-                                      : "opacity-0",
-                                  )}
-                                />
-                                {t(role.displayName)}
-                                {role.isSystem
-                                  ? ` (${t("rbac.systemRole")})`
-                                  : ""}
-                              </CommandItem>
-                            ))}
-                        </CommandGroup>
-                      </Command>
-                    </PopoverContent>
-                  </Popover>
-                  <Button onClick={handleAssignRole} disabled={!selectedRoleId}>
-                    <Plus className="h-4 w-4 mr-2" />
-                    {t("rbac.assign")}
-                  </Button>
-                </div>
-              </div>
-            )}
-          </div>
-
-          <DialogFooter>
-            <Button
-              variant="outline"
-              onClick={() => setAssignDialogOpen(false)}
-            >
-              {t("common.close")}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </div>
   );
 }

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

@@ -36,7 +36,6 @@ export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
 
   return (
     <div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
-
       <div className="flex items-center gap-2 flex-shrink-0 mb-3">
         <UserCheck className="h-5 w-5 text-green-400" />
         <h3 className="font-semibold text-lg text-foreground">
@@ -78,15 +77,10 @@ export function LoginStatsWidget({ metrics }: LoginStatsWidgetProps) {
               </div>
             ) : (
               <div className="space-y-1">
-                {recentLogins.slice(0, 5).map((login) => (
+                {recentLogins.slice(0, 5).map((login, idx) => (
                   <div
-
-                    key={`${login.user}-${login.time}-${login.ip}`}
-                    className="text-xs bg-dark-bg-darker p-2 rounded border border-dark-border/30 flex justify-between items-center"
-
                     key={idx}
                     className="text-xs bg-elevated p-2 rounded border border-edge/30 flex justify-between items-center"
-
                   >
                     <div className="flex items-center gap-2 min-w-0">
                       <span className="text-green-400 font-mono truncate">

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

@@ -29,7 +29,6 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
 
   return (
     <div className="h-full w-full p-4 rounded-lg bg-canvas/50 border border-edge/50 hover:bg-canvas/70 transition-colors duration-200 flex flex-col overflow-hidden">
-
       <div className="flex items-center gap-2 flex-shrink-0 mb-3">
         <List className="h-5 w-5 text-yellow-400" />
         <h3 className="font-semibold text-lg text-foreground">
@@ -60,15 +59,10 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
           </div>
         ) : (
           <div className="space-y-2">
-            {topProcesses.map((proc) => (
+            {topProcesses.map((proc, index) => (
               <div
-
-                key={proc.pid}
-                className="p-2.5 rounded-lg bg-dark-bg/30 hover:bg-dark-bg/50 transition-colors border border-dark-border/20"
-
                 key={index}
                 className="p-2.5 rounded-lg bg-canvas/30 hover:bg-canvas/50 transition-colors border border-edge/20"
-
               >
                 <div className="flex items-center justify-between mb-1.5">
                   <span className="text-xs font-mono text-muted-foreground font-medium">
@@ -82,7 +76,9 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
                 <div className="text-xs text-foreground font-mono truncate mb-1">
                   {proc.command}
                 </div>
-                <div className="text-xs text-foreground-subtle">User: {proc.user}</div>
+                <div className="text-xs text-foreground-subtle">
+                  User: {proc.user}
+                </div>
               </div>
             ))}
           </div>

src/ui/desktop/apps/tools/SSHToolsSidebar.tsx

@@ -813,9 +813,7 @@ export function SSHToolsSidebar({
     const targetFolder = targetSnippet.folder || "";
 
     if (sourceFolder !== targetFolder) {
-      toast.error(
+      toast.error(t("snippets.reorderSameFolder"));
-        t("snippets.reorderSameFolder"),
-      );
       setDraggedSnippet(null);
       setDragOverFolder(null);
       return;
@@ -850,14 +848,10 @@ export function SSHToolsSidebar({
 
     try {
       await reorderSnippets(updates);
-      toast.success(
+      toast.success(t("snippets.reorderSuccess"));
-        t("snippets.reorderSuccess"),
-      );
       fetchSnippets();
     } catch {
-      toast.error(
+      toast.error(t("snippets.reorderFailed"));
-        t("snippets.reorderFailed"),
-      );
     }
 
     setDraggedSnippet(null);
@@ -895,6 +889,7 @@ export function SSHToolsSidebar({
     confirmWithToast(
       t("snippets.deleteFolderConfirm", {
         name: folderName,
+      }),
       async () => {
         try {
           await deleteSnippetFolder(folderName);
@@ -1013,9 +1008,7 @@ export function SSHToolsSidebar({
     }
 
     if (splitAssignments.size === 0) {
-      toast.error(
+      toast.error(t("splitScreen.error.noAssignments"));
-        t("splitScreen.error.noAssignments"),
-      );
       return;
     }
 
@@ -1051,9 +1044,7 @@ export function SSHToolsSidebar({
       setCurrentTab(orderedTabIds[0]);
     }
 
-    toast.success(
+    toast.success(t("splitScreen.success"));
-      t("splitScreen.success"),
-    );
   };
 
   const handleClearSplit = () => {
@@ -1065,9 +1056,7 @@ export function SSHToolsSidebar({
     setSplitAssignments(new Map());
     setPreviewKey((prev) => prev + 1);
 
-    toast.success(
+    toast.success(t("splitScreen.cleared"));
-      t("splitScreen.cleared"),
-    );
   };
 
   const handleResetToSingle = () => {
@@ -1085,13 +1074,9 @@ export function SSHToolsSidebar({
       try {
         await deleteCommandFromHistory(activeTerminalHostId, command);
         setCommandHistory((prev) => prev.filter((c) => c !== command));
-        toast.success(
+        toast.success(t("commandHistory.deleteSuccess"));
-          t("commandHistory.deleteSuccess"),
-        );
       } catch {
-        toast.error(
+        toast.error(t("commandHistory.deleteFailed"));
-          t("commandHistory.deleteFailed"),
-        );
       }
     }
   };
@@ -1606,7 +1591,8 @@ export function SSHToolsSidebar({
                         <div className="text-center text-muted-foreground py-8">
                           <Terminal className="h-12 w-12 mb-4 opacity-20 mx-auto" />
                           <p className="mb-2 font-medium">
-                                                      {t("commandHistory.noTerminal")}                          </p>
+                            {t("commandHistory.noTerminal")}{" "}
+                          </p>
                           <p className="text-sm">
                             {t("commandHistory.noTerminalHint")}
                           </p>
@@ -1615,7 +1601,8 @@ export function SSHToolsSidebar({
                         <div className="text-center text-muted-foreground py-8">
                           <Loader2 className="h-12 w-12 mb-4 opacity-20 mx-auto animate-spin" />
                           <p className="mb-2 font-medium">
-                                                      {t("commandHistory.loading")}                          </p>
+                            {t("commandHistory.loading")}{" "}
+                          </p>
                         </div>
                       ) : filteredCommands.length === 0 ? (
                         <div className="text-center text-muted-foreground py-8">
@@ -1699,11 +1686,14 @@ export function SSHToolsSidebar({
                             {t("splitScreen.none")}
                           </TabsTrigger>
                           <TabsTrigger value="2">
-                                                      {t("splitScreen.twoSplit")}                          </TabsTrigger>
+                            {t("splitScreen.twoSplit")}{" "}
+                          </TabsTrigger>
                           <TabsTrigger value="3">
-                                                      {t("splitScreen.threeSplit")}                          </TabsTrigger>
+                            {t("splitScreen.threeSplit")}{" "}
+                          </TabsTrigger>
                           <TabsTrigger value="4">
-                                                      {t("splitScreen.fourSplit")}                          </TabsTrigger>
+                            {t("splitScreen.fourSplit")}{" "}
+                          </TabsTrigger>
                         </TabsList>
                       </Tabs>
 
@@ -1759,7 +1749,7 @@ export function SSHToolsSidebar({
                               {t("splitScreen.layout")}
                             </label>
                             <div
-                              className={`grid gap-2 ${
+                              className={`grid gap-2 mt-2 ${
                                 splitMode === "2"
                                   ? "grid-cols-2"
                                   : splitMode === "3"
@@ -1869,8 +1859,8 @@ export function SSHToolsSidebar({
                   className="absolute top-0 h-full cursor-col-resize z-[60]"
                   onMouseDown={handleMouseDown}
                   style={{
-                    left: "-8px",
+                    left: "-4px",
-                    width: "18px",
+                    width: "8px",
                     backgroundColor: isResizing
                       ? "var(--bg-active)"
                       : "transparent",
@@ -1970,9 +1960,7 @@ export function SSHToolsSidebar({
                   }
                 >
                   <SelectTrigger>
-                    <SelectValue
+                    <SelectValue placeholder={t("snippets.selectFolder")} />
-                      placeholder={t("snippets.selectFolder")}
-                    />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="__no_folder__">
@@ -2051,7 +2039,7 @@ export function SSHToolsSidebar({
               <h2 className="text-xl font-semibold text-foreground">
                 {editingFolder
                   ? t("snippets.editFolder")
-                  : t("snippets.createFolder")
+                  : t("snippets.createFolder")}
               </h2>
               <p className="text-sm text-muted-foreground mt-1">
                 {editingFolder
@@ -2155,8 +2143,7 @@ export function SSHToolsSidebar({
                     );
                   })()}
                   <span className="font-medium">
-                    {folderFormData.name ||
+                    {folderFormData.name || t("snippets.folderName")}
-                      t("snippets.folderName")}
                   </span>
                 </div>
               </div>
@@ -2175,7 +2162,7 @@ export function SSHToolsSidebar({
               <Button onClick={handleFolderSubmit} className="flex-1">
                 {editingFolder
                   ? t("snippets.updateFolder")
-                  : t("snippets.createFolder")
+                  : t("snippets.createFolder")}
               </Button>
             </div>
           </div>

src/ui/desktop/navigation/LeftSidebar.tsx

@@ -120,7 +120,7 @@ export function LeftSidebar({
       setCurrentTab(sshManagerTab.id);
       return;
     }
-    const id = addTab({ type: "ssh_manager", title: t('nav.hostManager') });
+    const id = addTab({ type: "ssh_manager", title: t("nav.hostManager") });
     setCurrentTab(id);
   };
   const adminTab = tabList.find((t) => t.type === "admin");
@@ -481,7 +481,7 @@ export function LeftSidebar({
           <Sidebar variant="floating">
             <SidebarHeader>
               <SidebarGroupLabel className="text-lg font-bold text-foreground">
-                {t('common.appName')}
+                {t("common.appName")}
                 <div className="absolute right-5 flex gap-1">
                   <Button
                     variant="outline"
@@ -618,8 +618,8 @@ export function LeftSidebar({
                 className="absolute top-0 h-full cursor-col-resize z-[60]"
                 onMouseDown={handleMouseDown}
                 style={{
-                  right: "-8px",
+                  right: "-4px",
-                  width: "18px",
+                  width: "8px",
                   backgroundColor: isResizing
                     ? "var(--bg-interact)"
                     : "transparent",