From 33a155bb820551c690cc048e27ca168c351b67c6 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 16 Oct 2026 18:59:35 +0300
Subject: [PATCH] feat(analytics): E-03 track the save-login prompt and login
 results

- Word card: save-login-prompt_viewed fires once per word view when
  "Login to save this phrase" shows (a new word or a new view resets it).
  Clicking it sends save-login-prompt_clicked.
- OpenLoginWindowMessage carries a source (save_prompt, practice, popup).
  The background puts it on the login window URL
  (popup.html#/login?source=...), and LoginView reads it. No source means
  the toolbar popup.
- user_logged-in gains source. New login_failed with source and reason:
  window_closed (Google consent window closed), google_error (no Google
  token), server_error (our server failed or sent no token, or the
  password login was rejected).
- The Google flow no longer stores an empty token when the server reply
  has none; it counts as a failed login.
- practice-now_login-clicked is kept.
- Tests: tests/save-login-prompt.test.ts, tests/login-analytics.test.ts.

Work list: subturtle-doc docs/tech/analytics-fixes-implementation.md

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CLAUDE.md                                     |   2 +
 src/background.ts                             |   7 +-
 src/common/types/messaging.ts                 |  12 +-
 .../modules/practice-config/index.vue         |   2 +-
 .../modules/word-detail/index.vue             |  28 ++-
 src/popup/helper/login-analytics.ts           |  36 ++++
 src/popup/views/IntroView.vue                 |   2 +-
 src/popup/views/LoginView.vue                 |  37 +++-
 tests/login-analytics.test.ts                 | 178 ++++++++++++++++++
 tests/save-login-prompt.test.ts               | 137 ++++++++++++++
 10 files changed, 433 insertions(+), 8 deletions(-)
 create mode 100644 src/popup/helper/login-analytics.ts
 create mode 100644 tests/login-analytics.test.ts
 create mode 100644 tests/save-login-prompt.test.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index 5cd2e44..861b007 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -446,6 +446,8 @@ tests/
   translate-card.test.ts            # popup translate input flow
   login-password.test.ts            # popup password form (ENABLE_PASSWORD_AUTH=true)
   login-password-disabled.test.ts   # popup password form hidden when flag is unset
+  login-analytics.test.ts           # user_logged-in source, login_failed source + reason (E-03)
+  save-login-prompt.test.ts         # "Login to save" prompt viewed once per word view, clicked (E-03)
   language-state.test.ts            # round-1 rules: dark gate, own language, save row, plan limit, deep link
   language-catalog.test.ts          # one RTL list, picker names, bundled Vazirmatn
   own-language.test.ts              # translate request with / without a server profile; language store
diff --git a/src/background.ts b/src/background.ts
index 20a3a2f..6cbf214 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -106,8 +106,13 @@ chrome.runtime.onMessage.addListener(function (request, _sender, sendResponse) {
       const left = screen.width / 2 - width / 2;
       const top = screen.height / 2 - height / 2;
 
+      // The login source rides on the hash route's query (E-03).
+      const query = request.source
+        ? `?source=${encodeURIComponent(request.source)}`
+        : "";
+
       chrome.windows.create({
-        url: chrome.runtime.getURL("popup.html") + "#/login",
+        url: chrome.runtime.getURL("popup.html") + "#/login" + query,
         type: "popup",
         width: width,
         height: height,
diff --git a/src/common/types/messaging.ts b/src/common/types/messaging.ts
index c80cd62..8ae1fa1 100644
--- a/src/common/types/messaging.ts
+++ b/src/common/types/messaging.ts
@@ -74,11 +74,21 @@ export class StoreUserTokenMessage implements BaseMessage {
   }
 }
 
+/**
+ * Where a login started (E-03). The background puts it on the login window's
+ * URL (`popup.html#/login?source=…`) so LoginView can send it with
+ * `user_logged-in` and `login_failed`. A login opened from the toolbar popup
+ * itself has no source on the URL and counts as "popup".
+ */
+export type LoginSource = "save_prompt" | "practice" | "popup";
+
 export class OpenLoginWindowMessage implements BaseMessage {
   type: string;
+  source?: LoginSource;
 
-  constructor() {
+  constructor(source?: LoginSource) {
     this.type = MESSAGE_TYPE.OPEN_LOGIN_WINDOW;
+    if (source) this.source = source;
   }
 
   static is(message: any): message is OpenLoginWindowMessage {
diff --git a/src/console-crane/modules/practice-config/index.vue b/src/console-crane/modules/practice-config/index.vue
index 395e9b9..18b48ce 100644
--- a/src/console-crane/modules/practice-config/index.vue
+++ b/src/console-crane/modules/practice-config/index.vue
@@ -324,7 +324,7 @@ function upgrade() {
 /** Logged out — open the login window; the isLogin watch advances the page. */
 function handleLoginRequest() {
   analytic.track("practice-now_login-clicked");
-  sendMessage(new OpenLoginWindowMessage());
+  sendMessage(new OpenLoginWindowMessage("practice"));
 }
 
 function start() {
diff --git a/src/console-crane/modules/word-detail/index.vue b/src/console-crane/modules/word-detail/index.vue
index e4e45a8..d3a849c 100644
--- a/src/console-crane/modules/word-detail/index.vue
+++ b/src/console-crane/modules/word-detail/index.vue
@@ -249,7 +249,7 @@
 
       <!-- Login prompt: only when there's a translation worth saving -->
       <button
-        v-else-if="!isLogin && wordData?.translation?.phrase"
+        v-else-if="showLoginPrompt"
         type="button"
         class="self-center inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 text-white text-sm font-semibold shadow-sm hover:from-pink-600 hover:to-purple-700 transition"
         @click="handleLoginRequest"
@@ -324,6 +324,10 @@ onActivated(() => {
     return;
   }
   analytic.track("word-detail-page_viewed");
+  // A new view of the same word: the prompt may already be on screen, so the
+  // watch below would not fire again.
+  loginPromptTracked = false;
+  trackLoginPromptView();
 });
 
 /**
@@ -365,6 +369,24 @@ const frameSize = inject<{ width: number; height: number }>("frameSize");
 // Main state variables
 const wordData = ref<LanguageLearningData | null>(null); // Stores detailed linguistic data
 
+/**
+ * "Login to save this phrase" (E-03). `save-login-prompt_viewed` fires once
+ * per word view, when the button first shows: a new word or a new view resets
+ * it, a sign-in state flip or a re-render does not.
+ */
+const showLoginPrompt = computed(
+  () => !isLogin.value && !!wordData.value?.translation?.phrase
+);
+let loginPromptTracked = false;
+
+function trackLoginPromptView() {
+  if (loginPromptTracked || !showLoginPrompt.value) return;
+  loginPromptTracked = true;
+  analytic.track("save-login-prompt_viewed");
+}
+
+watch(showLoginPrompt, trackLoginPromptView);
+
 const pending = ref(false); // Loading state
 const error = ref<string | null>(null); // Translation error message, null when ok
 const key = ref(new Date().getTime()); // Key for forcing component refresh
@@ -684,6 +706,7 @@ watch(
   (value) => {
     key.value = new Date().getTime();
     wordData.value = null;
+    loginPromptTracked = false;
     error.value = null;
     lastSavedLanguage.value = null;
 
@@ -758,7 +781,8 @@ function retryFetch() {
  * Opens login window via messaging system
  */
 function handleLoginRequest() {
-  sendMessage(new OpenLoginWindowMessage());
+  analytic.track("save-login-prompt_clicked");
+  sendMessage(new OpenLoginWindowMessage("save_prompt"));
 }
 </script>
 
diff --git a/src/popup/helper/login-analytics.ts b/src/popup/helper/login-analytics.ts
new file mode 100644
index 0000000..374c660
--- /dev/null
+++ b/src/popup/helper/login-analytics.ts
@@ -0,0 +1,36 @@
+/**
+ * Login funnel analytics helpers (E-03), used by LoginView.
+ *
+ * `user_logged-in` and `login_failed` carry `source` (where the login started)
+ * and, for a failure, `reason`. The funnel is
+ * save-login-prompt_viewed → save-login-prompt_clicked → user_logged-in
+ * (source save_prompt) → phrase_saved.
+ */
+import type { LoginSource } from "../../common/types/messaging";
+
+export type LoginFailReason = "window_closed" | "google_error" | "server_error";
+
+const LOGIN_SOURCES: readonly LoginSource[] = ["save_prompt", "practice", "popup"];
+
+/**
+ * The `source` query on the login window's route. Anything missing or unknown
+ * is "popup": the login view opened straight from the toolbar popup.
+ */
+export function loginSourceFrom(value: unknown): LoginSource {
+  return LOGIN_SOURCES.includes(value as LoginSource)
+    ? (value as LoginSource)
+    : "popup";
+}
+
+/**
+ * Why the Google step failed. chrome.identity reports a closed or cancelled
+ * consent window as `chrome.runtime.lastError` "The user did not approve
+ * access."; everything else (no token in the redirect, a page that could not
+ * load) is a Google-side error.
+ */
+export function googleFailReason(err: unknown): LoginFailReason {
+  const message = String((err as any)?.message ?? err ?? "");
+  return /did not approve|cancel|closed/i.test(message)
+    ? "window_closed"
+    : "google_error";
+}
diff --git a/src/popup/views/IntroView.vue b/src/popup/views/IntroView.vue
index bbf0ee8..8226c2e 100644
--- a/src/popup/views/IntroView.vue
+++ b/src/popup/views/IntroView.vue
@@ -64,7 +64,7 @@ import { useRouter } from "vue-router";
 const router = useRouter();
 
 function openLogin() {
-  chrome.runtime.sendMessage(new OpenLoginWindowMessage());
+  chrome.runtime.sendMessage(new OpenLoginWindowMessage("popup"));
 }
 
 const slides = [
diff --git a/src/popup/views/LoginView.vue b/src/popup/views/LoginView.vue
index 7918087..6d1972e 100644
--- a/src/popup/views/LoginView.vue
+++ b/src/popup/views/LoginView.vue
@@ -131,6 +131,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
 import {
   GetCurrentChromeUserToken,
   LoginStatusResponse,
@@ -145,9 +146,24 @@ import {
   loginWithLastSession,
   isLogin,
 } from "../../plugins/modular-rest";
+import {
+  googleFailReason,
+  loginSourceFrom,
+  type LoginFailReason,
+} from "../helper/login-analytics";
 
 const pending = ref(false);
 
+// Where this login started (E-03): the background opens the login window as
+// `#/login?source=save_prompt|practice|popup`. No router (unit tests) or no
+// query means the toolbar popup.
+const route = useRoute();
+const loginSource = loginSourceFrom(route?.query?.source);
+
+function trackLoginFailed(reason: LoginFailReason) {
+  analytic.track("login_failed", { source: loginSource, reason });
+}
+
 const chromeUserRes = ref<LoginStatusResponse | null>();
 
 // Build-flag gated: dev/agent-only password form. Stable/prod builds omit the
@@ -197,7 +213,14 @@ async function loginWithChrome() {
 
     if (status == "success") {
       await handleTokenLogin(token);
+    } else {
+      trackLoginFailed("server_error");
     }
+  } else {
+    // getAuthToken gave no token: the Chrome profile has no Google account,
+    // or the user dismissed Chrome's consent prompt. Chrome does not tell
+    // these apart here.
+    trackLoginFailed("google_error");
   }
 
   pending.value = false;
@@ -205,18 +228,26 @@ async function loginWithChrome() {
 
 async function loginWithGoogle() {
   pending.value = true;
+  // Which step failed decides the login_failed reason.
+  let step: "google" | "server" = "google";
 
   await authorizeFromGoogleOAuthThroughAuthFlowAPI()
     .then((accessToken) => {
+      step = "server";
       return get(
         joinToBaseUrl(
           `/auth/google/access-token-login?access_token=${accessToken}`
         )
       );
     })
-    .then(({ token }) => handleTokenLogin(token))
+    .then(({ token }) => {
+      // Never store an empty token as a login.
+      if (!token) throw new Error("No token in the login response");
+      return handleTokenLogin(token);
+    })
     .catch((err) => {
       console.log("err", err);
+      trackLoginFailed(step === "google" ? googleFailReason(err) : "server_error");
     })
     .finally(() => {
       pending.value = false;
@@ -252,7 +283,7 @@ async function handleTokenLogin(token: string) {
   await loginWithLastSession();
   // Fired only on an explicit login from this view — session restores on
   // startup do not pass through here.
-  analytic.track("user_logged-in");
+  analytic.track("user_logged-in", { source: loginSource });
 }
 
 function launchWebAuthFlow(authURL) {
@@ -305,11 +336,13 @@ async function loginWithPassword() {
     const token = authentication.getToken;
     if (!token) {
       loginError.value = "Invalid email or password.";
+      trackLoginFailed("server_error");
       return;
     }
     await handleTokenLogin(token);
     passwordValue.value = "";
   } catch (err: any) {
+    trackLoginFailed("server_error");
     // modular-rest rejects with the server response or a network error. We
     // surface a generic message for the credential-mismatch case so we don't
     // leak whether the email exists, and a network-specific message when the
diff --git a/tests/login-analytics.test.ts b/tests/login-analytics.test.ts
new file mode 100644
index 0000000..9d18849
--- /dev/null
+++ b/tests/login-analytics.test.ts
@@ -0,0 +1,178 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { mount, flushPromises, type VueWrapper } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+
+// E-03: user_logged-in carries `source`, and a failed login sends
+// login_failed with `source` and `reason`.
+
+const { loginMock, tokenRef, getMock, route } = vi.hoisted(() => {
+  process.env.ENABLE_PASSWORD_AUTH = "true";
+  return {
+    loginMock: vi.fn(),
+    tokenRef: { current: null as string | null },
+    getMock: vi.fn(),
+    route: { current: { query: {} as Record<string, unknown> } },
+  };
+});
+
+vi.mock("vue-router", () => ({ useRoute: () => route.current }));
+vi.mock("../src/plugins/modular-rest", async () => {
+  const { ref } = await import("vue");
+  return {
+    authentication: {
+      login: loginMock,
+      get getToken() {
+        return tokenRef.current;
+      },
+    },
+    loginWithLastSession: vi.fn().mockResolvedValue(undefined),
+    isLogin: ref(false),
+  };
+});
+vi.mock("../src/popup/helper/http", () => ({ get: getMock, post: vi.fn() }));
+
+import LoginView from "../src/popup/views/LoginView.vue";
+import {
+  googleFailReason,
+  loginSourceFrom,
+} from "../src/popup/helper/login-analytics";
+import { analytic } from "../src/plugins/mixpanel";
+
+const track = vi.mocked(analytic.track);
+const eventsNamed = (name: string) =>
+  track.mock.calls.filter(([e]) => e === name).map(([, p]) => p);
+
+describe("login analytics helpers", () => {
+  it("reads a known source and falls back to popup", () => {
+    expect(loginSourceFrom("save_prompt")).toBe("save_prompt");
+    expect(loginSourceFrom("practice")).toBe("practice");
+    expect(loginSourceFrom(undefined)).toBe("popup");
+    expect(loginSourceFrom("evil")).toBe("popup");
+    expect(loginSourceFrom(["save_prompt"])).toBe("popup");
+  });
+
+  it("maps a closed Google window to window_closed, the rest to google_error", () => {
+    expect(googleFailReason({ message: "The user did not approve access." })).toBe(
+      "window_closed"
+    );
+    expect(googleFailReason(new Error("No access_token found"))).toBe(
+      "google_error"
+    );
+    expect(googleFailReason(undefined)).toBe("google_error");
+  });
+});
+
+describe("LoginView login events", () => {
+  let wrapper: VueWrapper | null = null;
+  let authFlow: (cb: (url?: string) => void) => void;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    tokenRef.current = null;
+    route.current = { query: { source: "save_prompt" } };
+    (chrome as any).identity = {
+      getRedirectURL: () => "https://id.chromiumapp.org/",
+      launchWebAuthFlow: (_: unknown, cb: (url?: string) => void) =>
+        authFlow(cb),
+    };
+    authFlow = (cb) => cb("https://id.chromiumapp.org/#access_token=g-token");
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    wrapper = null;
+    (chrome.runtime as any).lastError = undefined;
+  });
+
+  async function mountView() {
+    wrapper = mount(LoginView, {
+      global: { plugins: [createTestingPinia({ createSpy: vi.fn })] },
+    });
+    await flushPromises();
+    return wrapper;
+  }
+
+  const googleButton = (w: VueWrapper) =>
+    w.findAll("button").find((b) => b.text().includes("Google Account"))!;
+
+  async function submitPassword(w: VueWrapper) {
+    await w.find('[data-testid="open-password-form"]').trigger("click");
+    await w.find('[data-testid="password-email"]').setValue("a@b.co");
+    await w.find('[data-testid="password-value"]').setValue("password123");
+    await w.find('[data-testid="password-form"]').trigger("submit");
+    await flushPromises();
+  }
+
+  it("user_logged-in carries the source from the route", async () => {
+    getMock.mockResolvedValue({ status: "success", token: "jwt" });
+    const w = await mountView();
+    await googleButton(w).trigger("click");
+    await flushPromises();
+
+    expect(eventsNamed("user_logged-in")).toEqual([{ source: "save_prompt" }]);
+    expect(eventsNamed("login_failed")).toEqual([]);
+  });
+
+  it("no source on the route counts as popup", async () => {
+    route.current = { query: {} };
+    loginMock.mockImplementation(async () => {
+      tokenRef.current = "jwt";
+    });
+    const w = await mountView();
+    await submitPassword(w);
+
+    expect(eventsNamed("user_logged-in")).toEqual([{ source: "popup" }]);
+  });
+
+  it("closing the Google window sends login_failed window_closed", async () => {
+    authFlow = (cb) => {
+      (chrome.runtime as any).lastError = {
+        message: "The user did not approve access.",
+      };
+      cb(undefined);
+    };
+    const w = await mountView();
+    await googleButton(w).trigger("click");
+    await flushPromises();
+
+    expect(eventsNamed("login_failed")).toEqual([
+      { source: "save_prompt", reason: "window_closed" },
+    ]);
+    expect(getMock).not.toHaveBeenCalled();
+  });
+
+  it("a server error after Google sends login_failed server_error", async () => {
+    route.current = { query: { source: "practice" } };
+    getMock.mockRejectedValue(new Error("HTTP error! status: 500"));
+    const w = await mountView();
+    await googleButton(w).trigger("click");
+    await flushPromises();
+
+    expect(eventsNamed("login_failed")).toEqual([
+      { source: "practice", reason: "server_error" },
+    ]);
+    expect(eventsNamed("user_logged-in")).toEqual([]);
+  });
+
+  it("a server reply with no token is a failure, not a login", async () => {
+    getMock.mockResolvedValue({ status: "error" });
+    const w = await mountView();
+    await googleButton(w).trigger("click");
+    await flushPromises();
+
+    expect(eventsNamed("login_failed")).toEqual([
+      { source: "save_prompt", reason: "server_error" },
+    ]);
+    expect(eventsNamed("user_logged-in")).toEqual([]);
+  });
+
+  it("a rejected password login sends login_failed server_error", async () => {
+    loginMock.mockRejectedValue({ status: false, error: "Wrong creds" });
+    const w = await mountView();
+    await submitPassword(w);
+
+    expect(eventsNamed("login_failed")).toEqual([
+      { source: "save_prompt", reason: "server_error" },
+    ]);
+  });
+});
diff --git a/tests/save-login-prompt.test.ts b/tests/save-login-prompt.test.ts
new file mode 100644
index 0000000..a49224f
--- /dev/null
+++ b/tests/save-login-prompt.test.ts
@@ -0,0 +1,137 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import { reactive } from "vue";
+import { encodeRouteParams } from "../src/console-crane/route-params";
+
+// E-03: the "Login to save this phrase" button on the word card sends
+// save-login-prompt_viewed once per word view and save-login-prompt_clicked,
+// and opens the login window with source "save_prompt".
+
+const route = vi.hoisted(() => ({ current: null as any }));
+vi.mock("vue-router", () => ({ useRoute: () => route.current }));
+
+const { loginRef } = vi.hoisted(() => ({ loginRef: { current: null as any } }));
+vi.mock("../src/plugins/modular-rest", async () => {
+  const { ref } = await import("vue");
+  loginRef.current = ref(false);
+  return { isLogin: loginRef.current };
+});
+
+vi.mock("../src/console-crane/components/SaveWordSectionV2.vue", () => ({
+  default: { name: "SaveWordSectionV2", template: "<div />" },
+}));
+vi.mock("pilotui", () => ({
+  Button: { name: "PilotButton", template: "<button />" },
+}));
+vi.mock("pilotui/elements", () => ({
+  IconButton: { name: "PilotIconButton", template: "<span />" },
+}));
+vi.mock("../src/common/services/translate.service", () => ({
+  TranslateService: {
+    instance: {
+      fetchDetailedTranslation: vi.fn(),
+      fetchTranslationAdvice: vi.fn(),
+      languageTitle: "Persian",
+      targetLanguage: "fa",
+    },
+  },
+}));
+vi.mock("../src/common/services/phrase.service", () => ({
+  findSavedPhrase: vi.fn(),
+}));
+
+import WordDetail from "../src/console-crane/modules/word-detail/index.vue";
+import { TranslateService } from "../src/common/services/translate.service";
+import { findSavedPhrase } from "../src/common/services/phrase.service";
+import { analytic } from "../src/plugins/mixpanel";
+import { OpenLoginWindowMessage } from "../src/common/types/messaging";
+
+const fetchDetailed = vi.mocked(
+  TranslateService.instance.fetchDetailedTranslation
+);
+const track = vi.mocked(analytic.track);
+
+const count = (event: string) =>
+  track.mock.calls.filter(([e]) => e === event).length;
+
+function showWord(word: string) {
+  route.current.name = "word-detail";
+  route.current.params.data = encodeRouteParams({ word, context: "" });
+}
+
+function mountCard() {
+  return mount(WordDetail, {
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn })],
+      provide: { frameSize: { width: 400, height: 600 } },
+    },
+  });
+}
+
+const loginButton = (w: ReturnType<typeof mountCard>) =>
+  w.findAll("button").find((b) => b.text().includes("Login to save"));
+
+describe("save-login prompt on the word card (E-03)", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    loginRef.current.value = false;
+    vi.mocked(findSavedPhrase).mockResolvedValue(null);
+    fetchDetailed.mockImplementation(async (word: string) => ({
+      phrase: word,
+      context: "",
+      translation: { phrase: `fa:${word}`, context: "" },
+      linguistic_data: { isValid: true, definition: "x" },
+      chunks: [],
+    }) as any);
+    route.current = reactive({ name: "", params: { data: "" } });
+    showWord("had to");
+  });
+
+  it("sends save-login-prompt_viewed once when the button shows", async () => {
+    const w = mountCard();
+    await flushPromises();
+
+    expect(loginButton(w)).toBeDefined();
+    expect(count("save-login-prompt_viewed")).toBe(1);
+
+    // A re-render of the same word view does not send it again.
+    await w.vm.$forceUpdate();
+    await flushPromises();
+    expect(count("save-login-prompt_viewed")).toBe(1);
+    w.unmount();
+  });
+
+  it("sends it again for a new word", async () => {
+    const w = mountCard();
+    await flushPromises();
+    showWord("give up");
+    await flushPromises();
+
+    expect(fetchDetailed).toHaveBeenCalledTimes(2);
+    expect(count("save-login-prompt_viewed")).toBe(2);
+    w.unmount();
+  });
+
+  it("does not send it to a logged-in user", async () => {
+    loginRef.current.value = true;
+    const w = mountCard();
+    await flushPromises();
+
+    expect(loginButton(w)).toBeUndefined();
+    expect(count("save-login-prompt_viewed")).toBe(0);
+    w.unmount();
+  });
+
+  it("click: sends save-login-prompt_clicked and opens login with source save_prompt", async () => {
+    const w = mountCard();
+    await flushPromises();
+    await loginButton(w)!.trigger("click");
+
+    expect(count("save-login-prompt_clicked")).toBe(1);
+    const send = chrome.runtime.sendMessage as ReturnType<typeof vi.fn>;
+    const open = send.mock.calls.find(([m]) => OpenLoginWindowMessage.is(m));
+    expect(open?.[0].source).toBe("save_prompt");
+    w.unmount();
+  });
+});