feat: add sudo password and add diagonal bg's

src/ui/desktop/DesktopApp.tsx

@@ -285,6 +285,16 @@ function AppContent() {
           className={`fixed inset-0 bg-background z-[20000] transition-opacity duration-700 ${
             transitionPhase === "fadeOut" ? "opacity-100" : "opacity-0"
           }`}
+          style={{
+            background: "#0e0e10",
+            backgroundImage: `repeating-linear-gradient(
+              45deg,
+              transparent,
+              transparent 35px,
+              rgba(255, 255, 255, 0.03) 35px,
+              rgba(255, 255, 255, 0.03) 37px
+            )`,
+          }}
         >
           {transitionPhase === "fadeOut" && (
             <>

src/ui/desktop/apps/credentials/CredentialEditor.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
+  FormDescription,
   FormField,
   FormItem,
   FormLabel,

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

@@ -517,6 +517,7 @@ export function HostManagerEditor({
           autoMosh: z.boolean(),
           moshCommand: z.string(),
           sudoPasswordAutoFill: z.boolean(),
+          sudoPassword: z.string().optional(),
         })
         .optional(),
       forceKeyboardInteractive: z.boolean().optional(),
@@ -2726,6 +2727,27 @@ export function HostManagerEditor({
                           )}
                         />
 
+                        {form.watch("terminalConfig.sudoPasswordAutoFill") && (
+                          <FormField
+                            control={form.control}
+                            name="terminalConfig.sudoPassword"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>{t("hosts.sudoPassword")}</FormLabel>
+                                <FormControl>
+                                  <PasswordInput
+                                    placeholder={t("placeholders.sudoPassword")}
+                                    {...field}
+                                  />
+                                </FormControl>
+                                <FormDescription>
+                                  {t("hosts.sudoPasswordDesc")}
+                                </FormDescription>
+                              </FormItem>
+                            )}
+                          />
+                        )}
+
                         <div className="space-y-2">
                           <label className="text-sm font-medium">
                             Environment Variables

src/ui/desktop/apps/terminal/Terminal.tsx

@@ -666,10 +666,12 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
               // Sudo password prompt detection
               const sudoPasswordPattern =
                 /(?:\[sudo\] password for \S+:|sudo: a password is required)/;
+              const passwordToFill =
+                hostConfig.terminalConfig?.sudoPassword || hostConfig.password;
               if (
                 config.sudoPasswordAutoFill &&
                 sudoPasswordPattern.test(msg.data) &&
-                hostConfig.password &&
+                passwordToFill &&
                 !sudoPromptShownRef.current
               ) {
                 sudoPromptShownRef.current = true;
@@ -683,7 +685,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
                       webSocketRef.current.send(
                         JSON.stringify({
                           type: "input",
-                          data: hostConfig.password + "\n",
+                          data: passwordToFill + "\n",
                         }),
                       );
                     }

src/ui/desktop/authentication/Auth.tsx

@@ -769,16 +769,27 @@ export function Auth({
   if (dbHealthChecking && !dbConnectionFailed) {
     return (
       <div
-        className={`w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300 ${className || ""}`}
-        style={{ maxHeight: "calc(100vh - 1rem)" }}
+        className={`fixed inset-0 flex items-center justify-center ${className || ""}`}
+        style={{
+          background: "#0e0e10",
+          backgroundImage: `repeating-linear-gradient(
+            45deg,
+            transparent,
+            transparent 35px,
+            rgba(255, 255, 255, 0.03) 35px,
+            rgba(255, 255, 255, 0.03) 37px
+          )`,
+        }}
         {...props}
       >
-        <div className="flex items-center justify-center h-32">
-          <div className="text-center">
-            <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-            <p className="text-muted-foreground">
-              {t("common.checkingDatabase")}
-            </p>
+        <div className="w-[420px] max-w-full p-6 flex flex-col bg-dark-bg border-2 border-dark-border rounded-md overflow-y-auto my-2 animate-in fade-in zoom-in-95 duration-300">
+          <div className="flex items-center justify-center h-32">
+            <div className="text-center">
+              <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+              <p className="text-muted-foreground">
+                {t("common.checkingDatabase")}
+              </p>
+            </div>
           </div>
         </div>
       </div>