fix(electron): Caps Lock indicator, Electron-aware reset message & suppress shell window (#2714)

Thanks @benzntech.

electron/main.js

@@ -68,6 +68,32 @@ const getServerUrl = () => `http://localhost:${serverPort}`;
 function resolveNodeExecutable(env = process.env) {
   // #1081: Ensure Next.js standalone runs using Electron's Node runtime
   // instead of a randomly found system Node to prevent ABI architecture mismatches.
+  //
+  // On macOS packaged builds, process.execPath is the main Electron binary
+  // (e.g. OmniRoute.app/Contents/MacOS/OmniRoute). Spawning it with
+  // ELECTRON_RUN_AS_NODE causes macOS to show a second dock icon and/or
+  // flash a shell window. Use the Helper binary instead — macOS treats
+  // Helper processes as background tasks with no visible UI artifacts.
+  if (process.platform === "darwin" && !isDev) {
+    const helperPath = path.join(path.dirname(process.execPath), `${app.getName()} Helper`);
+    if (fs.existsSync(helperPath)) {
+      return helperPath;
+    }
+    // Electron \u003e= 20 may use "(Renderer)" / "(GPU)" / "(Plugin)" suffixed helpers.
+    // The unsuffixed Helper is the one suitable for ELECTRON_RUN_AS_NODE.
+    const frameworkHelper = path.join(
+      path.dirname(process.execPath),
+      "..",
+      "Frameworks",
+      `${app.getName()} Helper.app`,
+      "Contents",
+      "MacOS",
+      `${app.getName()} Helper`
+    );
+    if (fs.existsSync(frameworkHelper)) {
+      return frameworkHelper;
+    }
+  }
   return process.execPath;
 }
 
@@ -594,6 +620,8 @@ function startNextServer() {
   sendToRenderer("server-status", { status: "starting", port: serverPort });
 
   // Fix #10: Use pipe instead of inherit for logging & readiness detection
+  // windowsHide prevents a visible console window from spawning alongside the GUI app.
+  // shell: false avoids launching via a shell wrapper which can flash a terminal on macOS.
   nextServer = spawn(nodeExecutable, [serverScript], {
     cwd: NEXT_SERVER_PATH,
     env: {
@@ -605,6 +633,8 @@ function startNextServer() {
       NODE_PATH: resolveServerNodePath(serverEnv),
     },
     stdio: "pipe",
+    windowsHide: true,
+    shell: false,
   });
 
   // Capture server output for logging

src/app/(dashboard)/dashboard/onboarding/page.tsx

@@ -31,6 +31,7 @@ export default function OnboardingWizard() {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [skipSecurity, setSkipSecurity] = useState(false);
+  const [capsLockOn, setCapsLockOn] = useState(false);
 
   // Provider step state
   const [selectedProvider, setSelectedProvider] = useState(null);
@@ -325,6 +326,8 @@ export default function OnboardingWizard() {
                       placeholder={t("enterPassword")}
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
+                      onKeyDown={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
+                      onKeyUp={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
                       className="w-full px-4 py-2.5 bg-white/[0.04] border border-white/10 rounded-lg text-text-main text-sm placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/40"
                     />
                     <input
@@ -332,8 +335,18 @@ export default function OnboardingWizard() {
                       placeholder={t("confirmPasswordPlaceholder")}
                       value={confirmPassword}
                       onChange={(e) => setConfirmPassword(e.target.value)}
+                      onKeyDown={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
+                      onKeyUp={(e) => setCapsLockOn(e.getModifierState("CapsLock"))}
                       className="w-full px-4 py-2.5 bg-white/[0.04] border border-white/10 rounded-lg text-text-main text-sm placeholder:text-text-muted/50 focus:outline-none focus:ring-2 focus:ring-primary/40"
                     />
+                    {capsLockOn && (
+                      <p className="text-xs text-amber-500 dark:text-amber-400 flex items-center gap-1 animate-in fade-in duration-200">
+                        <span className="material-symbols-outlined text-[14px]" aria-hidden="true">
+                          keyboard_capslock
+                        </span>
+                        Caps Lock is on
+                      </p>
+                    )}
                     {password && confirmPassword && password !== confirmPassword && (
                       <p className="text-xs text-red-400">{t("passwordsMismatch")}</p>
                     )}

src/app/forgot-password/page.tsx

@@ -1,13 +1,15 @@
 "use client";
 
 import { useTranslations } from "next-intl";
+import { useState, useEffect } from "react";
+import { useIsElectron } from "@/shared/hooks/useElectron";
 
 /**
  * Forgot Password Page — Phase 8.2
  *
- * Provides two recovery methods:
- * 1. CLI reset via omniroute-reset-password command
- * 2. Manual database reset instructions
+ * Provides recovery methods:
+ * - Web/CLI: CLI reset via omniroute-reset-password command + manual database reset
+ * - Electron: Data directory reset instructions
  */
 
 import Link from "next/link";
@@ -15,6 +17,18 @@ import { Card } from "@/shared/components";
 
 export default function ForgotPasswordPage() {
   const t = useTranslations("auth");
+  const isElectron = useIsElectron();
+  const [dataDir, setDataDir] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isElectron && typeof window !== "undefined" && (window as any).electronAPI?.getDataDir) {
+      (window as any).electronAPI
+        .getDataDir()
+        .then((dir: string) => setDataDir(dir))
+        .catch(() => {});
+    }
+  }, [isElectron]);
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-bg p-4">
       <div className="w-full max-w-lg">
@@ -23,58 +37,146 @@ export default function ForgotPasswordPage() {
           <p className="text-text-muted">{t("resetDescription")}</p>
         </div>
 
-        {/* Method 1: CLI Reset */}
-        <Card className="mb-4">
-          <div className="flex items-start gap-4 p-2">
-            <div className="flex items-center justify-center size-10 rounded-lg bg-primary/10 text-primary shrink-0 mt-0.5">
-              <span className="material-symbols-outlined text-[20px]" aria-hidden="true">
-                terminal
-              </span>
-            </div>
-            <div className="flex-1">
-              <h2 className="text-lg font-semibold mb-1">{t("methodCliTitle")}</h2>
-              <p className="text-sm text-text-muted mb-3">{t("methodCliDescription")}</p>
-              <div className="bg-black/30 rounded-lg p-3 mb-3 font-mono text-sm text-green-400 border border-white/5">
-                <code>npx omniroute reset-password</code>
+        {isElectron ? (
+          <>
+            {/* Electron: App Reset Method */}
+            <Card className="mb-4">
+              <div className="flex items-start gap-4 p-2">
+                <div className="flex items-center justify-center size-10 rounded-lg bg-primary/10 text-primary shrink-0 mt-0.5">
+                  <span className="material-symbols-outlined text-[20px]" aria-hidden="true">
+                    folder_open
+                  </span>
+                </div>
+                <div className="flex-1">
+                  <h2 className="text-lg font-semibold mb-1">Reset via App Data</h2>
+                  <p className="text-sm text-text-muted mb-3">
+                    Delete the settings file from the app data directory to reset your password:
+                  </p>
+                  <ol className="text-sm text-text-muted space-y-2 list-decimal list-inside mb-3">
+                    <li>Quit the OmniRoute desktop app completely</li>
+                    <li>
+                      Navigate to the app data directory:
+                      {dataDir ? (
+                        <div className="bg-black/30 rounded-lg p-2 mt-1 font-mono text-xs text-green-400 border border-white/5 break-all">
+                          {dataDir}
+                        </div>
+                      ) : (
+                        <div className="bg-black/30 rounded-lg p-2 mt-1 font-mono text-xs text-green-400 border border-white/5">
+                          <span className="text-text-muted/60">
+                            (Check your system app data folder)
+                          </span>
+                        </div>
+                      )}
+                    </li>
+                    <li>
+                      Delete{" "}
+                      <code className="bg-black/30 px-1 rounded text-text-main">settings.json</code>{" "}
+                      ({t("orRemovePasswordHashField")})
+                    </li>
+                    <li>Relaunch the OmniRoute desktop app — it will start fresh setup</li>
+                  </ol>
+                </div>
               </div>
-              <p className="text-xs text-text-muted">{t("methodCliHint")}</p>
-            </div>
-          </div>
-        </Card>
+            </Card>
 
-        {/* Method 2: Database Reset */}
-        <Card className="mb-6">
-          <div className="flex items-start gap-4 p-2">
-            <div className="flex items-center justify-center size-10 rounded-lg bg-amber-500/10 text-amber-500 shrink-0 mt-0.5">
-              <span className="material-symbols-outlined text-[20px]" aria-hidden="true">
-                database
-              </span>
-            </div>
-            <div className="flex-1">
-              <h2 className="text-lg font-semibold mb-1">{t("methodManualTitle")}</h2>
-              <p className="text-sm text-text-muted mb-3">{t("methodManualDescription")}</p>
-              <ol className="text-sm text-text-muted space-y-2 list-decimal list-inside mb-3">
-                <li>{t("stopServer")}</li>
-                <li>
-                  {t("setPasswordInYour")}{" "}
-                  <code className="bg-black/30 px-1 rounded text-text-main">.env</code>{" "}
-                  {t("fileLabelSuffix")}
-                  <div className="bg-black/30 rounded-lg p-2 mt-1 font-mono text-xs text-green-400 border border-white/5">
-                    INITIAL_PASSWORD={t("newPasswordPlaceholder")}
+            {/* Electron: Env File Method */}
+            <Card className="mb-6">
+              <div className="flex items-start gap-4 p-2">
+                <div className="flex items-center justify-center size-10 rounded-lg bg-amber-500/10 text-amber-500 shrink-0 mt-0.5">
+                  <span className="material-symbols-outlined text-[20px]" aria-hidden="true">
+                    settings
+                  </span>
+                </div>
+                <div className="flex-1">
+                  <h2 className="text-lg font-semibold mb-1">Alternative: Set New Password</h2>
+                  <p className="text-sm text-text-muted mb-3">
+                    Set a new initial password via the server environment file:
+                  </p>
+                  <ol className="text-sm text-text-muted space-y-2 list-decimal list-inside mb-3">
+                    <li>Quit the OmniRoute desktop app completely</li>
+                    <li>
+                      Open{" "}
+                      <code className="bg-black/30 px-1 rounded text-text-main">server.env</code> in
+                      the data directory
+                      {dataDir && (
+                        <div className="bg-black/30 rounded-lg p-2 mt-1 font-mono text-xs text-green-400 border border-white/5 break-all">
+                          {dataDir}/server.env
+                        </div>
+                      )}
+                    </li>
+                    <li>
+                      Add or update:
+                      <div className="bg-black/30 rounded-lg p-2 mt-1 font-mono text-xs text-green-400 border border-white/5">
+                        INITIAL_PASSWORD={t("newPasswordPlaceholder")}
+                      </div>
+                    </li>
+                    <li>
+                      Delete{" "}
+                      <code className="bg-black/30 px-1 rounded text-text-main">settings.json</code>{" "}
+                      from the data directory
+                    </li>
+                    <li>Relaunch the OmniRoute desktop app</li>
+                  </ol>
+                </div>
+              </div>
+            </Card>
+          </>
+        ) : (
+          <>
+            {/* Method 1: CLI Reset */}
+            <Card className="mb-4">
+              <div className="flex items-start gap-4 p-2">
+                <div className="flex items-center justify-center size-10 rounded-lg bg-primary/10 text-primary shrink-0 mt-0.5">
+                  <span className="material-symbols-outlined text-[20px]" aria-hidden="true">
+                    terminal
+                  </span>
+                </div>
+                <div className="flex-1">
+                  <h2 className="text-lg font-semibold mb-1">{t("methodCliTitle")}</h2>
+                  <p className="text-sm text-text-muted mb-3">{t("methodCliDescription")}</p>
+                  <div className="bg-black/30 rounded-lg p-3 mb-3 font-mono text-sm text-green-400 border border-white/5">
+                    <code>npx omniroute reset-password</code>
                   </div>
-                </li>
-                <li>
-                  {t("deleteSettingsFile")}{" "}
-                  <code className="bg-black/30 px-1 rounded text-text-main">
-                    data/settings.json
-                  </code>{" "}
-                  ({t("orRemovePasswordHashField")})
-                </li>
-                <li>{t("restartServerWithNewPassword")}</li>
-              </ol>
-            </div>
-          </div>
-        </Card>
+                  <p className="text-xs text-text-muted">{t("methodCliHint")}</p>
+                </div>
+              </div>
+            </Card>
+
+            {/* Method 2: Database Reset */}
+            <Card className="mb-6">
+              <div className="flex items-start gap-4 p-2">
+                <div className="flex items-center justify-center size-10 rounded-lg bg-amber-500/10 text-amber-500 shrink-0 mt-0.5">
+                  <span className="material-symbols-outlined text-[20px]" aria-hidden="true">
+                    database
+                  </span>
+                </div>
+                <div className="flex-1">
+                  <h2 className="text-lg font-semibold mb-1">{t("methodManualTitle")}</h2>
+                  <p className="text-sm text-text-muted mb-3">{t("methodManualDescription")}</p>
+                  <ol className="text-sm text-text-muted space-y-2 list-decimal list-inside mb-3">
+                    <li>{t("stopServer")}</li>
+                    <li>
+                      {t("setPasswordInYour")}{" "}
+                      <code className="bg-black/30 px-1 rounded text-text-main">.env</code>{" "}
+                      {t("fileLabelSuffix")}
+                      <div className="bg-black/30 rounded-lg p-2 mt-1 font-mono text-xs text-green-400 border border-white/5">
+                        INITIAL_PASSWORD={t("newPasswordPlaceholder")}
+                      </div>
+                    </li>
+                    <li>
+                      {t("deleteSettingsFile")}{" "}
+                      <code className="bg-black/30 px-1 rounded text-text-main">
+                        data/settings.json
+                      </code>{" "}
+                      ({t("orRemovePasswordHashField")})
+                    </li>
+                    <li>{t("restartServerWithNewPassword")}</li>
+                  </ol>
+                </div>
+              </div>
+            </Card>
+          </>
+        )}
 
         <div className="text-center">
           <Link

src/shared/components/Input.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useId } from "react";
+import { useId, useState, useCallback } from "react";
 import { cn } from "@/shared/utils/cn";
 
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
@@ -25,13 +25,47 @@ export default function Input({
   className,
   inputClassName,
   id: externalId,
+  onKeyDown: externalOnKeyDown,
+  onKeyUp: externalOnKeyUp,
   ...props
 }: InputProps) {
   const generatedId = useId();
   const inputId = externalId || generatedId;
   const errorId = error ? `${inputId}-error` : undefined;
   const hintId = hint && !error ? `${inputId}-hint` : undefined;
-  const describedBy = [errorId, hintId].filter(Boolean).join(" ") || undefined;
+  const capsLockId = `${inputId}-capslock`;
+  const isPassword = type === "password";
+  const [capsLockOn, setCapsLockOn] = useState(false);
+  const [inputFocused, setInputFocused] = useState(false);
+
+  const detectCapsLock = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (isPassword) {
+        setCapsLockOn(e.getModifierState("CapsLock"));
+      }
+    },
+    [isPassword]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      detectCapsLock(e);
+      externalOnKeyDown?.(e);
+    },
+    [detectCapsLock, externalOnKeyDown]
+  );
+
+  const handleKeyUp = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      detectCapsLock(e);
+      externalOnKeyUp?.(e);
+    },
+    [detectCapsLock, externalOnKeyUp]
+  );
+
+  const showCapsLock = isPassword && capsLockOn && inputFocused;
+  const describedBy =
+    [errorId, showCapsLock ? capsLockId : undefined, hintId].filter(Boolean).join(" ") || undefined;
 
   return (
     <div className={cn("flex flex-col gap-1.5", className)}>
@@ -64,6 +98,17 @@ export default function Input({
           aria-required={required || undefined}
           aria-invalid={error ? true : undefined}
           aria-describedby={describedBy}
+          onKeyDown={handleKeyDown}
+          onKeyUp={handleKeyUp}
+          onFocus={(e) => {
+            setInputFocused(true);
+            props.onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setInputFocused(false);
+            setCapsLockOn(false);
+            props.onBlur?.(e);
+          }}
           className={cn(
             "w-full py-2 px-3 text-sm text-text-main",
             "bg-white dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-md",
@@ -79,6 +124,19 @@ export default function Input({
           {...props}
         />
       </div>
+      {showCapsLock && (
+        <p
+          id={capsLockId}
+          className="text-xs text-amber-500 dark:text-amber-400 flex items-center gap-1 animate-in fade-in duration-200"
+          role="status"
+          aria-live="polite"
+        >
+          <span className="material-symbols-outlined text-[14px]" aria-hidden="true">
+            keyboard_capslock
+          </span>
+          Caps Lock is on
+        </p>
+      )}
       {error && (
         <p id={errorId} className="text-xs text-red-500 flex items-center gap-1" role="alert">
           <span className="material-symbols-outlined text-[14px]" aria-hidden="true">