XS⚠️ ◾ ✨ Fail fast when a desktop authorization is declined (#1000)

* Fail fast when an authorization is declined (#965)

Both OAuth flows only ever heard back on success, so a user who declined
consent — or hit a provider error — watched a spinner for the full 60s
timeout before being told anything.

The backend result pages now deep-link back with an `error` parameter on
failure. Route that to a new auth-failed event on each token store, which
the waiting authorization listens for alongside tokens-updated, so it
rejects as soon as the outcome is known.

YouTube gets a dedicated "declined" reason rather than reusing the
timeout copy, which would have blamed a missing Google prompt for what
was actually a deliberate cancellation.

Backwards compatible in both directions: an older backend never sends
`error` so the branch stays dormant, and the success path is untouched.

* Resolve dev database paths from the app directory, not the cwd

Returning from a browser authorization crashed the app with EPERM on
`mkdir 'C:\WINDOWS\system32\data'`. Windows launches the app to service a
`yakshaver-desktop-dev://` deep link from its own directory, so every
cwd-relative dev path resolved somewhere unwritable — and because the db
module opens its connection as it loads, this threw before the
single-instance handler could hand the URL to the already-running app.
The deep link was therefore lost entirely, leaving the waiting
authorization to sit out its full timeout.

Both paths need it: fixing only the database file moves the failure one
step along to the migrations lookup, which resolves the same way.

Development only — production already used absolute userData paths.

* Match the auth result pages to the app's dark theme

The app hardcodes class="dark" (src/ui/index.html), so these browser
pages were the only light surface a user could hit mid-flow. Colours now
come from the app's own dark tokens in src/ui/src/App.css, and the
declined page picks up the shared --warning amber instead of the ad hoc
shade it was mixing.

Also documents why the MCP and YouTube branches fail fast on an `error`
deep link rather than waiting out the authorization timeout (#965).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* Correlate auth failures with the attempt that is waiting

A failure callback was matched only by the server it named, so a tab
left over from a timed-out attempt could cancel a newer authorization:
the user retries, closes the stale tab, and the retry dies with it. The
YouTube flow was worse — with a single binding there was nothing to
match on at all, so any stale tab cancelled whatever was waiting.

Each attempt now carries an id on the redirect URI it sends out, and a
waiter ignores failures that name a different attempt. No backend change
is needed: BuildFailureNotifyUrl appends `error=` while preserving the
existing query, so the id round-trips on its own.

Callbacks with no id are still honoured, so an attempt started before
this shipped fails fast rather than regressing into a hang.

Raised by the review bot on #1000.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* Cover the attempt id reaching the failure signal

Pins the end of the round trip: the router must forward the callback's
attempt id to the waiter, and must still report a failure when an older
callback carries none.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

* Trim the attempt-id comments

They had grown to restate the mechanism at each call site. Keeps the reason
the no-id case is accepted, since that one is not obvious from the code.

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: ZenoWang1999

src/backend/assets/auth/errorTemplate.html

@@ -7,7 +7,7 @@
     <title>YakShaver | Authorization Error</title>
     <style>
       :root {
-        color-scheme: light;
+        color-scheme: dark;
       }
 
       * {
@@ -36,19 +36,19 @@
           Helvetica,
           Arial,
           sans-serif;
-        background: linear-gradient(180deg, #fafafa 0%, #f2f2f2 100%);
-        color: #1a1414;
+        background: #1a1414;
+        color: #faf9f8;
       }
 
       .card {
         width: 100%;
         max-width: 420px;
-        background: #ffffff;
-        border: 1px solid #ececec;
+        background: #2b2523;
+        border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 16px;
         padding: 40px 32px 32px;
         text-align: center;
-        box-shadow: 0 20px 45px rgba(26, 20, 20, 0.08);
+        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
       }
 
       .logo {
@@ -69,7 +69,7 @@
         width: 28px;
         height: 28px;
         border-radius: 999px;
-        background: #cc4141;
+        background: #ff453a;
         color: #ffffff;
         display: flex;
         align-items: center;
@@ -87,13 +87,13 @@
         line-height: 28px;
         font-weight: 600;
         margin: 0 0 8px;
-        color: #1a1414;
+        color: #faf9f8;
       }
 
       p {
         font-size: 14px;
         line-height: 21px;
-        color: #6b6262;
+        color: rgba(255, 255, 255, 0.75);
         margin: 0 0 24px;
       }
 
@@ -103,10 +103,10 @@
       }
 
       .hint {
-        margin-top: 4px;
+        margin-top: 18px;
         margin-bottom: 0;
         font-size: 12px;
-        color: #a39a9a;
+        color: rgba(255, 255, 255, 0.5);
       }
     </style>
   </head>

src/backend/assets/auth/failureTemplate.html

@@ -7,7 +7,7 @@
     <title>YakShaver | Authorization Declined</title>
     <style>
       :root {
-        color-scheme: light;
+        color-scheme: dark;
       }
 
       * {
@@ -36,19 +36,19 @@
           Helvetica,
           Arial,
           sans-serif;
-        background: linear-gradient(180deg, #fafafa 0%, #f2f2f2 100%);
-        color: #1a1414;
+        background: #1a1414;
+        color: #faf9f8;
       }
 
       .card {
         width: 100%;
         max-width: 420px;
-        background: #ffffff;
-        border: 1px solid #ececec;
+        background: #2b2523;
+        border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 16px;
         padding: 40px 32px 32px;
         text-align: center;
-        box-shadow: 0 20px 45px rgba(26, 20, 20, 0.08);
+        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
       }
 
       .logo {
@@ -87,13 +87,13 @@
         line-height: 28px;
         font-weight: 600;
         margin: 0 0 8px;
-        color: #1a1414;
+        color: #faf9f8;
       }
 
       p {
         font-size: 14px;
         line-height: 21px;
-        color: #6b6262;
+        color: rgba(255, 255, 255, 0.75);
         margin: 0 0 24px;
       }
 
@@ -103,10 +103,10 @@
       }
 
       .hint {
-        margin-top: 4px;
+        margin-top: 18px;
         margin-bottom: 0;
         font-size: 12px;
-        color: #a39a9a;
+        color: rgba(255, 255, 255, 0.5);
       }
     </style>
   </head>

src/backend/assets/auth/successTemplate.html

@@ -7,7 +7,7 @@
     <title>YakShaver | Signed In</title>
     <style>
       :root {
-        color-scheme: light;
+        color-scheme: dark;
       }
 
       * {
@@ -36,19 +36,19 @@
           Helvetica,
           Arial,
           sans-serif;
-        background: linear-gradient(180deg, #fafafa 0%, #f2f2f2 100%);
-        color: #1a1414;
+        background: #1a1414;
+        color: #faf9f8;
       }
 
       .card {
         width: 100%;
         max-width: 420px;
-        background: #ffffff;
-        border: 1px solid #ececec;
+        background: #2b2523;
+        border: 1px solid rgba(255, 255, 255, 0.1);
         border-radius: 16px;
         padding: 40px 32px 32px;
         text-align: center;
-        box-shadow: 0 20px 45px rgba(26, 20, 20, 0.08);
+        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
       }
 
       .logo {
@@ -87,13 +87,13 @@
         line-height: 28px;
         font-weight: 600;
         margin: 0 0 8px;
-        color: #1a1414;
+        color: #faf9f8;
       }
 
       p {
         font-size: 14px;
         line-height: 21px;
-        color: #6b6262;
+        color: rgba(255, 255, 255, 0.75);
         margin: 0 0 24px;
       }
 
@@ -128,7 +128,7 @@
         margin-top: 18px;
         margin-bottom: 0;
         font-size: 12px;
-        color: #a39a9a;
+        color: rgba(255, 255, 255, 0.5);
       }
     </style>
   </head>

src/backend/db/client.ts

@@ -14,7 +14,12 @@ const configureSqlite = (sqliteInstance: Database.Database): void => {
 export const getDbPath = (): string => {
   const databaseFileName = "database.sqlite";
   if (process.env.NODE_ENV === "development") {
-    return path.join(process.cwd(), "data", databaseFileName);
+    // Anchored to the app directory rather than the working directory: when Windows launches the
+    // app to service a `yakshaver-desktop-dev://` deep link it starts the process from its own
+    // directory (system32), and a cwd-relative path sent this at an unwritable location. Because
+    // this module opens the database as it loads, that threw before the single-instance handler
+    // could hand the URL to the running app.
+    return path.join(app.getAppPath(), "data", databaseFileName);
   }
   return path.join(app.getPath("userData"), databaseFileName);
 };

src/backend/db/migrate.ts

@@ -2,6 +2,7 @@ import fs from "node:fs";
 import path from "node:path";
 import { sql } from "drizzle-orm";
 import { migrate } from "drizzle-orm/better-sqlite3/migrator";
+import { app } from "electron";
 import { getDb, getDbPath } from "./client";
 import { DatabaseBackupService } from "./services/backup-service";
 
@@ -33,9 +34,10 @@ function ensureRequiredTablesExist(): void {
 function getMigrationsPath(): string {
   const isDev = process.env.NODE_ENV === "development";
 
-  // Development: use project source directly
+  // Development: use project source directly. Anchored to the app directory for the same reason as
+  // getDbPath — a deep-link launch starts the process from an unrelated working directory.
   if (isDev) {
-    const devPath = path.join(process.cwd(), "src", "backend", "db", "migrations");
+    const devPath = path.join(app.getAppPath(), "src", "backend", "db", "migrations");
     if (fs.existsSync(devPath)) {
       return devPath;
     }

src/backend/protocol/protocol-router.test.ts

@@ -80,6 +80,35 @@ describe("protocol-router", () => {
     expect(send).not.toHaveBeenCalled();
   });
 
+  it("forwards the attempt id so a stale tab cannot cancel a newer authorization", async () => {
+    const notifyAuthFailed = vi.fn();
+    vi.mocked(McpOAuthTokenStorage.getInstance).mockReturnValue({
+      notifyAuthFailed,
+    } as unknown as McpOAuthTokenStorage);
+
+    await handleProtocolUrl(
+      "yakshaver-desktop://oauth/callback?serverId=server-1&error=authorization_failed&attemptId=attempt-7",
+      mockWindow(vi.fn()),
+    );
+
+    expect(notifyAuthFailed).toHaveBeenCalledWith("server-1", "attempt-7");
+  });
+
+  // A callback from before the attempt id shipped must still fail fast rather than hang.
+  it("still reports failure when the callback carries no attempt id", async () => {
+    const notifyAuthFailed = vi.fn();
+    vi.mocked(McpOAuthTokenStorage.getInstance).mockReturnValue({
+      notifyAuthFailed,
+    } as unknown as McpOAuthTokenStorage);
+
+    await handleProtocolUrl(
+      "yakshaver-desktop://oauth/callback?serverId=server-1&error=authorization_failed",
+      mockWindow(vi.fn()),
+    );
+
+    expect(notifyAuthFailed).toHaveBeenCalledWith("server-1", null);
+  });
+
   it("stores tokens for valid OAuth callback", async () => {
     const send = vi.fn();
     const window = mockWindow(send);

src/backend/protocol/protocol-router.ts

@@ -1,6 +1,7 @@
 import type { OAuthTokens } from "@ai-sdk/mcp";
 import type { BrowserWindow } from "electron";
 import { IPC_CHANNELS } from "../ipc/channels";
+import { AUTH_ATTEMPT_PARAM } from "../services/auth/auth-attempt";
 import { IdentityServerAuthService } from "../services/auth/identity-server-auth";
 import type { TokenData } from "../services/auth/types";
 import { MCPServerManager } from "../services/mcp/mcp-server-manager";
@@ -32,13 +33,31 @@ const routeHandlers: Record<string, ProtocolRouteHandler> = {
     const accessToken = params.get("access_token");
     const refreshToken = params.get("refresh_token");
     const serverId = params.get("serverId");
+    const authError = params.get("error");
+    const attemptId = params.get(AUTH_ATTEMPT_PARAM);
 
     console.log("[ProtocolRouter] Handling MCP OAuth callback", {
       serverId,
       hasAccessToken: !!accessToken,
       hasRefreshToken: !!refreshToken,
+      authError,
     });
 
+    // The declined/error result pages ping back with `error` and no tokens so the waiting
+    // authorization fails immediately instead of hanging until it times out (#965). The attempt id
+    // travels with it so a stale tab cannot cancel whichever authorization is waiting now.
+    if (authError) {
+      console.warn("[ProtocolRouter] MCP OAuth callback reported failure", {
+        serverId,
+        authError,
+        attemptId,
+      });
+      if (serverId) {
+        McpOAuthTokenStorage.getInstance().notifyAuthFailed(serverId, attemptId);
+      }
+      return;
+    }
+
     if (!accessToken || !refreshToken || !serverId) {
       const missing = [
         !accessToken ? "access_token" : null,
@@ -115,12 +134,26 @@ const routeHandlers: Record<string, ProtocolRouteHandler> = {
     const refreshToken = params.get("refresh_token");
     const expiresIn = params.get("expires_in");
     const scope = params.get("scope");
+    const authError = params.get("error");
+    const attemptId = params.get(AUTH_ATTEMPT_PARAM);
 
     console.log("[ProtocolRouter] Handling YouTube OAuth callback", {
       hasAccessToken: !!accessToken,
       hasRefreshToken: !!refreshToken,
+      authError,
     });
 
+    // Mirrors the MCP branch above. There is only one YouTube binding, so the attempt id is the sole
+    // thing separating a stale tab's failure from the attempt currently waiting.
+    if (authError) {
+      console.warn("[ProtocolRouter] YouTube OAuth callback reported failure", {
+        authError,
+        attemptId,
+      });
+      YoutubeStorage.getInstance().notifyAuthFailed(attemptId);
+      return;
+    }
+
     if (!accessToken || !refreshToken) {
       const missing = [
         !accessToken ? "access_token" : null,

src/backend/services/auth/auth-attempt.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "vitest";
+import { isCurrentAuthAttempt } from "./auth-attempt";
+
+describe("auth-attempt", () => {
+  it("accepts a callback from the attempt being waited on", () => {
+    expect(isCurrentAuthAttempt("attempt-1", "attempt-1")).toBe(true);
+  });
+
+  it("rejects a callback from an earlier attempt", () => {
+    expect(isCurrentAuthAttempt("attempt-1", "attempt-2")).toBe(false);
+  });
+
+  // An attempt started before this shipped, or a flow that carries no id, must still fail fast
+  // rather than hang until its timeout — so a missing id on either side is not a mismatch.
+  it.each([
+    ["callback has no id", null, "attempt-2"],
+    ["waiter has no id", "attempt-1", undefined],
+    ["neither has an id", undefined, undefined],
+  ])("accepts the callback when %s", (_case, callbackId, waitingId) => {
+    expect(isCurrentAuthAttempt(callbackId, waitingId)).toBe(true);
+  });
+});

src/backend/services/auth/auth-attempt.ts

@@ -0,0 +1,24 @@
+/**
+ * Query parameter carrying the id of the authorization attempt a callback belongs to.
+ *
+ * The desktop builds its own `redirectUri`, and the backend echoes it back verbatim when deep-linking
+ * a failure, so an id added here survives the round trip with no backend change.
+ */
+export const AUTH_ATTEMPT_PARAM = "attemptId";
+
+/**
+ * Whether a callback belongs to the attempt currently being waited on. Without this, a tab left open
+ * from an earlier attempt can report a failure that cancels the retry the user just started.
+ *
+ * Callbacks with no id are accepted — a flow that does not carry one must still fail fast rather
+ * than hang until it times out. Only a callback naming a *different* attempt is discarded.
+ */
+export function isCurrentAuthAttempt(
+  callbackAttemptId: string | null | undefined,
+  waitingAttemptId: string | null | undefined,
+): boolean {
+  if (!callbackAttemptId || !waitingAttemptId) {
+    return true;
+  }
+  return callbackAttemptId === waitingAttemptId;
+}

src/backend/services/auth/youtube-auth-error.ts

@@ -11,6 +11,8 @@ export type YouTubeAuthErrorReason =
   | "backend_unreachable"
   | "auth_start_failed"
   | "timeout"
+  /** The user declined consent, or the provider/backend failed the authorization (#965). */
+  | "declined"
   | "unknown";
 
 interface YouTubeAuthErrorOptions {
@@ -62,6 +64,8 @@ export function describeYouTubeAuthError(reason: YouTubeAuthErrorReason): string
       return "YouTube sign-in couldn't be started. Please try again in a moment.";
     case "timeout":
       return "Didn't hear back from YouTube. If no verification prompt appeared, check your Google or authenticator app, then click Connect to try again.";
+    case "declined":
+      return "YouTube wasn't connected because the authorization was cancelled. Click Connect to try again.";
     default:
       return "YouTube sign-in didn't complete. Please click Connect to try again.";
   }