From 9954c22f8822f5a06912247d0098d937c20ec6b5 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Thu, 21 May 2026 12:38:06 +0300
Subject: [PATCH 01/10] feat(save-modal): chunk highlights, AI advice chat,
 bundle suggestion

PRFAQ-001 Phase 1 (extension, CU-86exnxnd3):
- Inline chunk highlights on the selection; "Ask AI" chat (explain or fix) with
  conversation history and editable user messages (re-runs from edit point).
- Bundle suggestion: URL-matched bundle -> suggested chip (editable) -> last-used;
  named "Save to <bundle>" button; sends chunks + sourceUrl to createPhrase.
- Preview flashcard (chunk cloze) and Practice now button (-> practice-config stub).
- Modal trims: drop examples + related expressions; "Phonetic" -> "Pronunciation"
  with per-chunk transliteration; pass pageTitle/pageUrl to translateWithContext.
- dir="auto" on chat bubbles/input for mixed RTL/LTR.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/common/helper/url-normalise.ts            |  30 ++
 src/common/services/translate.service.ts      |  40 ++-
 .../components/SaveWordSectionV2.vue          | 239 +++++++++++--
 .../modules/practice-config/index.vue         |  17 +
 .../modules/word-detail/index.vue             | 332 +++++++++++++++---
 .../modules/word-detail/types.ts              |  49 ++-
 src/console-crane/router.ts                   |   6 +
 src/console-crane/types.ts                    |   6 +-
 8 files changed, 617 insertions(+), 102 deletions(-)
 create mode 100644 src/common/helper/url-normalise.ts
 create mode 100644 src/console-crane/modules/practice-config/index.vue

diff --git a/src/common/helper/url-normalise.ts b/src/common/helper/url-normalise.ts
new file mode 100644
index 0000000..a047ca4
--- /dev/null
+++ b/src/common/helper/url-normalise.ts
@@ -0,0 +1,30 @@
+/**
+ * Normalise a source page URL so saves from the same content group together.
+ * Mirrors the server-side normaliser (server/src/modules/translation/url-normalise.ts):
+ * drops query strings, fragments, and timestamps; lowercases the host; removes a
+ * trailing slash. Returns the input unchanged when it cannot be parsed.
+ */
+export function normaliseSourceUrl(raw: string): string {
+  if (!raw || typeof raw !== "string") return "";
+
+  const trimmed = raw.trim();
+
+  let url: URL;
+  try {
+    url = new URL(trimmed);
+  } catch {
+    return trimmed;
+  }
+
+  url.hash = "";
+  url.search = "";
+  url.hostname = url.hostname.toLowerCase();
+
+  let normalised = url.toString();
+
+  if (normalised.endsWith("/") && url.pathname !== "/") {
+    normalised = normalised.slice(0, -1);
+  }
+
+  return normalised;
+}
diff --git a/src/common/services/translate.service.ts b/src/common/services/translate.service.ts
index 426fc27..31880e5 100644
--- a/src/common/services/translate.service.ts
+++ b/src/common/services/translate.service.ts
@@ -7,7 +7,11 @@ import { Dictionary } from "../types/general.type";
 
 import proxy from "./proxy.service";
 import { functionProvider } from "@modular-rest/client";
-import { LanguageLearningData } from "../../console-crane/modules/word-detail/types";
+import {
+  Chunk,
+  LanguageLearningData,
+  TranslationAdvice,
+} from "../../console-crane/modules/word-detail/types";
 import { LanguageDetector } from "../helper/language-detection";
 import { useSettingsStore } from "../store/settings";
 
@@ -155,6 +159,12 @@ export class TranslateService {
       return cachedResult;
     }
 
+    // Page context drives the bundle-name suggestion on first save from a page.
+    const pageTitle =
+      typeof document !== "undefined" ? document.title : undefined;
+    const pageUrl =
+      typeof location !== "undefined" ? location.href : undefined;
+
     // If not cached, fetch from API
     try {
       const data = await functionProvider.run<LanguageLearningData>({
@@ -165,12 +175,15 @@ export class TranslateService {
           targetLanguage: this.languageTitle,
           phrase: text,
           context: context || "",
+          pageTitle,
+          pageUrl,
         },
       });
 
       // Add context and phrase to the result
       data.context = context;
       data.phrase = text;
+      if (!Array.isArray(data.chunks)) data.chunks = [];
 
       // Cache the result
       this.cacheResult(cacheKey, data);
@@ -183,6 +196,31 @@ export class TranslateService {
     }
   }
 
+  /**
+   * Conversational advisor for the save modal's "fix this?" chat.
+   * Returns either a plain-text reply or an updated chunks list.
+   */
+  async fetchTranslationAdvice(params: {
+    phrase: string;
+    context: string;
+    message: string;
+    currentChunks?: Chunk[];
+    history?: { role: "user" | "assistant"; text: string }[];
+  }): Promise<TranslationAdvice> {
+    return functionProvider.run<TranslationAdvice>({
+      name: "translationAdvice",
+      args: {
+        phrase: params.phrase,
+        context: params.context || "",
+        message: params.message,
+        currentChunks: params.currentChunks || [],
+        history: params.history || [],
+        sourceLanguage: "auto",
+        targetLanguage: this.languageTitle,
+      },
+    });
+  }
+
   async translateByDictionaryapi(word: string) {
     let url = {
       url: "https://api.dictionaryapi.dev/api/v2/entries/en/" + encodeURI(word),
diff --git a/src/console-crane/components/SaveWordSectionV2.vue b/src/console-crane/components/SaveWordSectionV2.vue
index 4542d8f..0ccd5c3 100644
--- a/src/console-crane/components/SaveWordSectionV2.vue
+++ b/src/console-crane/components/SaveWordSectionV2.vue
@@ -1,18 +1,35 @@
 <template>
   <div class="my-2 bg-white dark:bg-gray-900 rounded-xl">
+    <!-- Suggested bundle chip (first save from this page) -->
+    <div v-if="useSuggested" class="mb-3 flex items-center gap-2 flex-wrap">
+      <span class="text-[11px] uppercase tracking-wider font-semibold text-gray-400">Suggested:</span>
+      <input
+        v-if="isEditingSuggested"
+        v-model="suggestedName"
+        type="text"
+        class="text-sm rounded-md border border-purple-300 dark:border-purple-700 bg-white dark:bg-gray-900 px-2 py-1 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-purple-400"
+        @keyup.enter="isEditingSuggested = false"
+        @blur="isEditingSuggested = false"
+      />
+      <button
+        v-else
+        type="button"
+        class="inline-flex items-center gap-1.5 text-sm rounded-full bg-purple-100 dark:bg-purple-900/40 text-purple-800 dark:text-purple-200 px-3 py-1 hover:bg-purple-200 dark:hover:bg-purple-900/60"
+        @click="isEditingSuggested = true"
+      >
+        <span>{{ suggestedName }}</span>
+        <i class="i-mdi-pencil text-xs opacity-70" />
+      </button>
+    </div>
+
     <FreemiumLimitCounter v-if="showFreemiumCounter" :used="usedCount" :total="totalCount" :isAtLimit="!!isAtLimit"
       :isDisabled="!!(isSaving || isAtLimit)" @action="savePhrase" @upgrade="handleUpgrade" class="mb-4">
       <InputGroup>
         <SelectPhraseBundleV2 class="flex-1" ref="selectBundleRef" v-model:selected-bundles="selectedBundles"
           :excluded-bundle-ids="existingBundles.map((b) => b._id)" />
-        <Button :label="isAtLimit
-            ? 'Upgrade'
-            : !selectedBundles.length
-              ? 'Add to Bundles'
-              : `Add to ${selectedBundles.length} Bundle${selectedBundles.length > 1 ? 's' : ''
-              }`
-          " :icon-name="isAtLimit ? 'pi pi-crown' : ''" size="lg" @click="isAtLimit ? handleUpgrade() : savePhrase()"
-          :disabled="!selectedBundles.length || isSaving" :is-loading="isSaving"
+        <Button :label="isAtLimit ? 'Upgrade' : saveLabel"
+          :icon-name="isAtLimit ? 'pi pi-crown' : ''" size="lg" @click="isAtLimit ? handleUpgrade() : savePhrase()"
+          :disabled="!canSave || isSaving" :is-loading="isSaving"
           class="border-none bg-gradient-to-r from-pink-500 to-purple-600 shadow-md hover:from-pink-600 hover:to-purple-700 text-white font-semibold dark:from-pink-700 dark:to-purple-900">
           <template #icon>
             <i :class="isAtLimit ? 'pi pi-crown' : 'mr-4 i-ep-collection'" />
@@ -24,11 +41,7 @@
       <div class="flex w-full">
         <SelectPhraseBundleV2 ref="selectBundleRef" v-model:selected-bundles="selectedBundles"
           :excluded-bundle-ids="existingBundles.map((b) => b._id)" />
-        <Button :label="!selectedBundles.length
-            ? 'Add to Bundles'
-            : `Add to ${selectedBundles.length} Bundle${selectedBundles.length > 1 ? 's' : ''
-            }`
-          " size="lg" @click="savePhrase" :disabled="!selectedBundles.length || isSaving" :is-loading="isSaving"
+        <Button :label="saveLabel" size="lg" @click="savePhrase" :disabled="!canSave || isSaving" :is-loading="isSaving"
           class="border-none bg-gradient-to-r from-pink-500 to-purple-600 shadow-md hover:from-pink-600 hover:to-purple-700 text-white font-semibold dark:from-pink-700 dark:to-purple-900">
           <template #icon>
             <i class="mr-4 i-ep-collection" />
@@ -36,6 +49,24 @@
         </Button>
       </div>
     </template>
+
+    <!-- Practice now + Preview flashcard -->
+    <div class="mt-2 flex items-center gap-2 flex-wrap">
+      <Button label="Practice now" size="sm" text @click="startPracticeNow">
+        <template #icon>
+          <i class="mr-2 i-solar-microphone-3-bold" />
+        </template>
+      </Button>
+      <Button v-if="previewSentence" :label="showPreview ? 'Hide preview' : 'Preview flashcard'" size="sm" text
+        @click="showPreview = !showPreview" />
+    </div>
+
+    <div v-if="showPreview && previewSentence"
+      class="mt-2 rounded-lg border border-gray-200 dark:border-white/[0.08] bg-gray-50 dark:bg-white/[0.02] p-3">
+      <p class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 mb-1.5">Preview · fill in the blank</p>
+      <p class="text-sm text-gray-900 dark:text-gray-100" :dir="direction?.source">{{ previewSentence }}</p>
+    </div>
+
     <!-- Existing Bundles as Fieldset -->
     <Fieldset v-if="existingBundles.length > 0" class="saved-bundles-fieldset bg-white dark:bg-gray-900"
       legend="Saved in">
@@ -68,6 +99,9 @@ import { useDefaultBundleStore } from "../../stores/default-bundle";
 import { useProfileStore } from "../../stores/profile";
 import FreemiumLimitCounter from "./FreemiumLimitCounter.vue";
 import { analytic } from "../../plugins/mixpanel";
+import { normaliseSourceUrl } from "../../common/helper/url-normalise";
+import { useConsoleCraneStore } from "../stores/console-crane";
+import type { Chunk } from "../modules/word-detail/types";
 
 const props = defineProps<{
   phrase: string;
@@ -82,18 +116,69 @@ const props = defineProps<{
     target: string;
   };
   linguistic_data?: any;
+  chunks?: Chunk[];
+  suggestedBundleName?: string;
 }>();
 
 const selectBundleRef = ref();
 const selectedBundles = ref<string[]>([]);
 const existingBundles = ref<PhraseBundleType[]>([]);
 const existedPhrase = ref<PhraseType | null>(null);
+const allBundles = ref<PhraseBundleType[]>([]);
 
 const isSaving = ref(false);
 const isRemoving = ref(false);
 
+// Bundle suggestion (first save from a page).
+const suggestedName = ref("");
+const useSuggested = ref(false);
+const isEditingSuggested = ref(false);
+
+// Preview flashcard.
+const showPreview = ref(false);
+
 const defaultBundleStore = useDefaultBundleStore();
 const profileStore = useProfileStore();
+const consoleCraneStore = useConsoleCraneStore();
+
+// When the user picks a real bundle, drop the suggestion.
+watch(selectedBundles, (val) => {
+  if (val.length) useSuggested.value = false;
+});
+
+const canSave = computed(
+  () =>
+    selectedBundles.value.length > 0 ||
+    (useSuggested.value && !!suggestedName.value.trim())
+);
+
+const saveLabel = computed(() => {
+  if (useSuggested.value && suggestedName.value.trim()) {
+    return `Save to ${suggestedName.value.trim()}`;
+  }
+  if (selectedBundles.value.length === 1) {
+    const title = allBundles.value.find(
+      (b) => b._id === selectedBundles.value[0]
+    )?.title;
+    if (title) return `Save to ${title}`;
+  }
+  if (!selectedBundles.value.length) return "Add to Bundles";
+  return `Add to ${selectedBundles.value.length} Bundle${
+    selectedBundles.value.length > 1 ? "s" : ""
+  }`;
+});
+
+// Build the L3+ style cloze preview by blanking the first chunk inside the context.
+const previewSentence = computed(() => {
+  const chunk = props.chunks?.[0]?.text?.trim();
+  const sentence = (props.context || "").trim();
+  if (!chunk || !sentence) return "";
+  const idx = sentence.toLowerCase().indexOf(chunk.toLowerCase());
+  if (idx === -1) return "";
+  return (
+    sentence.slice(0, idx) + "_____" + sentence.slice(idx + chunk.length)
+  );
+});
 
 const showFreemiumCounter = computed(
   () => !!(profileStore.isFreemium && profileStore.freemiumAllocation)
@@ -112,21 +197,83 @@ watch(
   () => [props.phrase, props.translation],
   async () => {
     selectedBundles.value = [];
+    useSuggested.value = false;
+    suggestedName.value = props.suggestedBundleName?.trim() || "";
+    showPreview.value = false;
+
     await loadExistingBundles();
 
-    // Auto-select previous bundles for new phrases (not already saved)
-    if (existingBundles.value.length === 0) {
-      const defaultBundles = defaultBundleStore.getDefaultBundles();
-      selectedBundles.value = defaultBundles;
+    // Already-saved phrase: nothing to default.
+    if (existingBundles.value.length > 0) return;
+
+    // 1. An existing bundle from this same page (matched by normalised URL).
+    const urlBundleId = await matchBundleByUrl();
+    if (urlBundleId) {
+      selectedBundles.value = [urlBundleId];
+      return;
     }
+
+    // 2. A suggested name from the page title (first save from this page).
+    if (suggestedName.value) {
+      useSuggested.value = true;
+      return;
+    }
+
+    // 3. Last-used bundles (existing behaviour).
+    selectedBundles.value = defaultBundleStore.getDefaultBundles();
   },
   { immediate: true, deep: true }
 );
 
 onMounted(() => {
   loadExistingBundles();
+  loadAllBundles();
 });
 
+async function loadAllBundles() {
+  try {
+    allBundles.value = await dataProvider.find<PhraseBundleType>({
+      database: DATABASE.USER_CONTENT,
+      collection: COLLECTIONS.PHRASE_BUNDLE,
+      query: { refId: authentication.user?.id },
+      options: { sort: "-_id" },
+    });
+  } catch (error) {
+    console.error("Error loading bundles:", error);
+  }
+}
+
+/**
+ * Find the most recent bundle that already holds a phrase saved from this same
+ * page (by normalised source URL). Returns its id, or null.
+ */
+async function matchBundleByUrl(): Promise<string | null> {
+  if (typeof location === "undefined") return null;
+  const sourceUrl = normaliseSourceUrl(location.href);
+  if (!sourceUrl) return null;
+
+  try {
+    const phrases = await dataProvider.find<PhraseType & { _id: string }>({
+      database: DATABASE.USER_CONTENT,
+      collection: COLLECTIONS.PHRASE,
+      query: { refId: authentication.user?.id, sourceUrl },
+    });
+    const phraseIds = phrases.map((p) => p._id);
+    if (!phraseIds.length) return null;
+
+    const bundles = await dataProvider.find<PhraseBundleType>({
+      database: DATABASE.USER_CONTENT,
+      collection: COLLECTIONS.PHRASE_BUNDLE,
+      query: { refId: authentication.user?.id, phrases: { $in: phraseIds } },
+      options: { sort: "-_id" },
+    });
+    return bundles[0]?._id || null;
+  } catch (error) {
+    console.error("Error matching bundle by URL:", error);
+    return null;
+  }
+}
+
 async function loadExistingBundles() {
   if (!props.phrase || !props.translation) return;
 
@@ -202,12 +349,37 @@ async function removePhraseFromBundle(bundleId: string) {
   }
 }
 
-async function savePhrase() {
-  if (!selectedBundles.value.length) return;
+/**
+ * Resolve the bundle ids to save into. When the user kept the suggested bundle,
+ * create it now and return its id. Returns an empty array if nothing to save.
+ */
+async function resolveBundleIds(): Promise<string[]> {
+  if (selectedBundles.value.length) return selectedBundles.value;
 
+  if (useSuggested.value && suggestedName.value.trim()) {
+    const created = await dataProvider.insertOne({
+      database: DATABASE.USER_CONTENT,
+      collection: COLLECTIONS.PHRASE_BUNDLE,
+      doc: { title: suggestedName.value.trim(), refId: authentication.user?.id },
+    });
+    analytic.track("phrase-bundle_created");
+    const id = (created as any)?._id;
+    return id ? [id] : [];
+  }
+
+  return [];
+}
+
+async function savePhrase() {
   isSaving.value = true;
 
   try {
+    const bundleIds = await resolveBundleIds();
+    if (!bundleIds.length) {
+      isSaving.value = false;
+      return;
+    }
+
     // Use the enhanced server function with linguistic type
     const result = await functionProvider
       .run<PhraseType>({
@@ -216,7 +388,7 @@ async function savePhrase() {
           phrase: props.phrase.trim(),
           translation: props.translation.trim(),
           translation_language: TranslateService.instance.targetLanguage.trim(),
-          bundleIds: selectedBundles.value,
+          bundleIds,
           refId: authentication.user?.id,
           type: "linguistic", // Specify linguistic type
           // Add linguistic-specific data from the word detail context
@@ -224,6 +396,8 @@ async function savePhrase() {
           direction: props.direction,
           language_info: props.language_info,
           linguistic_data: props.linguistic_data,
+          chunks: props.chunks || [],
+          sourceUrl: typeof location !== "undefined" ? location.href : undefined,
         },
       })
       .then((result) => {
@@ -237,12 +411,13 @@ async function savePhrase() {
     // Update the existedPhrase reference if it's a new phrase
     existedPhrase.value = result;
 
-    // Store selected bundles as new defaults for future saves
-    defaultBundleStore.setDefaultBundles(selectedBundles.value);
+    // Store the bundles used as new defaults for future saves
+    defaultBundleStore.setDefaultBundles(bundleIds);
 
     // Clear selection and reload existing bundles
     selectedBundles.value = [];
-    await loadExistingBundles();
+    useSuggested.value = false;
+    await Promise.all([loadExistingBundles(), loadAllBundles()]);
     // Refresh freemium counter
     await profileStore.fetchSubscription();
 
@@ -260,6 +435,24 @@ async function savePhrase() {
 function handleUpgrade() {
   window.open(getSubturtleDashboardUrlWithToken(), "_blank");
 }
+
+/**
+ * Open the Practice now config page inside the console-crane modal.
+ * The full config card ships in subtask 86exnxnw7; this navigates to its route.
+ */
+function startPracticeNow() {
+  analytic.track("practice-now_opened");
+  consoleCraneStore.toggleConsoleCrane(
+    "practice-config",
+    {
+      phrase: props.phrase,
+      context: props.context || "",
+      chunks: props.chunks || [],
+      bundleId: selectedBundles.value[0] || null,
+    },
+    true
+  );
+}
 </script>
 
 <style scoped>
diff --git a/src/console-crane/modules/practice-config/index.vue b/src/console-crane/modules/practice-config/index.vue
new file mode 100644
index 0000000..666a6a0
--- /dev/null
+++ b/src/console-crane/modules/practice-config/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <!--
+    Practice now config page (stub).
+    The full config card (voice toggle, voice picker, estimated duration, Start)
+    is delivered in subtask 86exnxnw7. This placeholder makes the "Practice now"
+    button in the save modal navigable without breaking the router.
+  -->
+  <div class="flex flex-col items-center justify-center min-h-full px-6 py-10 text-center dark:bg-gray-950">
+    <i class="i-solar-microphone-3-bold text-4xl text-purple-500 mb-4" />
+    <h1 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">Practice now</h1>
+    <p class="text-sm text-gray-500 dark:text-gray-400 max-w-sm">
+      The practice session config is coming soon. You can keep saving phrases in the meantime.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
diff --git a/src/console-crane/modules/word-detail/index.vue b/src/console-crane/modules/word-detail/index.vue
index 818c97b..baea86c 100644
--- a/src/console-crane/modules/word-detail/index.vue
+++ b/src/console-crane/modules/word-detail/index.vue
@@ -10,11 +10,32 @@
         @click.stop>
         <!-- Source phrase -->
         <div class="px-6 pt-6 pb-4" :dir="wordData?.direction?.source">
-          <p class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-400 mb-2">
-            Selected
-          </p>
+          <div class="flex items-center justify-between gap-2 mb-2">
+            <p class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-400">
+              Selected
+            </p>
+            <!-- Opens an AI chat to ask questions or fix the highlights -->
+            <button
+              v-if="wordData?.translation?.phrase"
+              type="button"
+              title="Chat with AI to understand this phrase or change the highlighted patterns"
+              class="inline-flex items-center gap-1 text-[11px] font-medium text-purple-600 dark:text-purple-300 hover:underline shrink-0"
+              @click.stop="showAdviceChat = !showAdviceChat"
+            >
+              <i class="i-mdi-message-text-outline text-xs" />
+              <span>Ask AI · explain or fix</span>
+            </button>
+          </div>
+          <!-- Selection with reusable chunks highlighted inline -->
           <h1 :class="['font-semibold leading-tight dark:text-gray-100', titleSizeClass]">
-            {{ title }}
+            <template v-for="(seg, i) in selectionSegments" :key="i">
+              <mark
+                v-if="seg.isChunk"
+                class="bg-yellow-200/70 dark:bg-yellow-400/25 rounded px-0.5 text-inherit"
+                >{{ seg.text }}</mark
+              >
+              <template v-else>{{ seg.text }}</template>
+            </template>
           </h1>
           <p
             v-if="showContext"
@@ -22,6 +43,82 @@
           >
             {{ context }}
           </p>
+
+          <!-- In-modal advice chat for correcting chunks -->
+          <div
+            v-if="showAdviceChat"
+            class="mt-4 rounded-lg border border-gray-200 dark:border-white/[0.08] bg-gray-50 dark:bg-white/[0.02] p-3"
+            dir="ltr"
+            @click.stop
+          >
+            <div v-if="adviceThread.length" class="flex flex-col gap-2 mb-2 max-h-40 overflow-y-auto">
+              <template v-for="(msg, i) in adviceThread" :key="i">
+                <!-- Editing a previous user message -->
+                <form
+                  v-if="editingIndex === i"
+                  class="self-end w-full flex items-center gap-1"
+                  @submit.prevent="submitEditMessage"
+                >
+                  <input
+                    v-model="editingText"
+                    dir="auto"
+                    autofocus
+                    class="flex-1 min-w-0 text-sm rounded-md border border-purple-300 dark:border-purple-700 bg-white dark:bg-gray-900 px-2.5 py-1.5 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                    @keyup.esc="cancelEditMessage"
+                  />
+                  <button type="submit" class="shrink-0 p-1.5 rounded-md text-purple-600 hover:bg-purple-100 dark:hover:bg-purple-900/40" title="Save">
+                    <i class="i-mdi-check text-base" />
+                  </button>
+                  <button type="button" class="shrink-0 p-1.5 rounded-md text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" title="Cancel" @click="cancelEditMessage">
+                    <i class="i-mdi-close text-base" />
+                  </button>
+                </form>
+                <!-- Normal bubble -->
+                <div
+                  v-else
+                  dir="auto"
+                  :class="[
+                    'group text-sm rounded-md px-2.5 py-1.5 max-w-[90%] flex items-start gap-1.5',
+                    msg.role === 'user'
+                      ? 'self-end bg-purple-100 dark:bg-purple-900/40 text-gray-900 dark:text-gray-100'
+                      : 'self-start bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200',
+                  ]"
+                >
+                  <span class="min-w-0">{{ msg.text }}</span>
+                  <button
+                    v-if="msg.role === 'user' && !adviceLoading"
+                    type="button"
+                    title="Edit this message"
+                    class="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-purple-500 hover:text-purple-700"
+                    @click="startEditMessage(i)"
+                  >
+                    <i class="i-mdi-pencil text-xs" />
+                  </button>
+                </div>
+              </template>
+            </div>
+            <p v-else class="text-xs text-gray-500 dark:text-gray-400 mb-2">
+              Ask anything about this phrase — meaning, grammar, usage. You can also say e.g. "highlight 'had to'".
+            </p>
+            <form class="flex items-center gap-2" @submit.prevent="sendAdviceMessage">
+              <input
+                v-model="adviceInput"
+                type="text"
+                dir="auto"
+                :disabled="adviceLoading"
+                placeholder="Type a message…"
+                class="flex-1 min-w-0 text-sm rounded-md border border-gray-300 dark:border-white/[0.12] bg-white dark:bg-gray-900 px-2.5 py-1.5 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-purple-400"
+              />
+              <button
+                type="submit"
+                :disabled="adviceLoading || !adviceInput.trim()"
+                class="shrink-0 inline-flex items-center gap-1 px-3 py-1.5 rounded-md bg-purple-600 text-white text-sm font-medium disabled:opacity-50 hover:bg-purple-700 transition-colors"
+              >
+                <i v-if="adviceLoading" class="i-mdi-loading animate-spin" />
+                <span>Send</span>
+              </button>
+            </form>
+          </div>
         </div>
 
         <!-- Divider line -->
@@ -73,7 +170,8 @@
       <SaveWordSectionV2 v-if="isLogin && wordData?.translation?.phrase" :phrase="cleanText(getProps().word!)"
         :translation="cleanText(wordData?.translation?.phrase || '')" :context="wordData?.context"
         :direction="wordData?.direction" :language_info="wordData?.language_info"
-        :linguistic_data="wordData?.linguistic_data" />
+        :linguistic_data="wordData?.linguistic_data" :chunks="wordData?.chunks || []"
+        :suggested-bundle-name="wordData?.suggested_bundle_name" />
 
       <!-- Login prompt: only when there's a translation worth saving -->
       <button
@@ -104,50 +202,20 @@
             </div>
           </Fieldset>
 
-          <Fieldset class="dark:bg-gray-900" legend="Phonetic">
-            <div class="flex justify-between gap-4">
-              <p class="text-base italic text-gray-500 dark:text-gray-300">
-                {{ wordData?.linguistic_data?.phonetic.ipa || "" }}
-              </p>
-              <p class="text-base italic text-gray-900 dark:text-gray-100" :dir="wordData?.direction?.target">
-                {{ wordData.linguistic_data.phonetic.transliteration }}
-              </p>
-            </div>
-          </Fieldset>
-
-          <!-- Example sentences -->
-          <Fieldset class="dark:bg-gray-900" v-if="
-            wordData.linguistic_data.examples &&
-            wordData.linguistic_data.examples.length
-          " legend="Examples">
-            <div v-for="(example, index) in wordData.linguistic_data.examples" :key="index" class="mb-3 last:mb-0">
-              <p class="text-base mb-1 text-gray-900 dark:text-gray-100" :dir="wordData?.direction?.target">
-                {{ example.target }}
-              </p>
-              <p class="text-sm italic text-gray-500 dark:text-gray-300" :dir="wordData?.direction?.source">
-                {{ example.source }}
-              </p>
-              <Divider v-if="index < wordData.linguistic_data.examples.length - 1" />
-            </div>
-          </Fieldset>
-
-          <!-- Related expressions -->
-          <Fieldset class="dark:bg-gray-900" v-if="
-            wordData.linguistic_data.related_expressions &&
-            wordData.linguistic_data.related_expressions.length
-          " legend="Related Expressions">
-            <div v-for="(expression, index) in wordData.linguistic_data
-              .related_expressions" :key="index" class="mb-3 last:mb-0">
-              <p class="text-base mb-1 text-gray-900 dark:text-gray-100" :dir="wordData?.direction?.target">
-                {{ expression.target }}
-              </p>
-              <p class="text-sm italic text-gray-500 dark:text-gray-300" :dir="wordData?.direction?.source">
-                {{ expression.source }}
-              </p>
-              <Divider v-if="
-                index <
-                wordData.linguistic_data.related_expressions.length - 1
-              " />
+          <Fieldset v-if="pronunciationRows.length" class="dark:bg-gray-900" legend="Pronunciation">
+            <!-- Per-chunk pronunciation when chunks exist, otherwise the whole-phrase transliteration. -->
+            <div
+              v-for="(row, index) in pronunciationRows"
+              :key="index"
+              class="flex items-center justify-between gap-4 py-1"
+            >
+              <span v-if="row.label" class="text-sm font-medium text-gray-700 dark:text-gray-200" dir="ltr">
+                {{ row.label }}
+              </span>
+              <span v-else />
+              <span class="text-base italic text-gray-900 dark:text-gray-100" :dir="wordData?.direction?.target">
+                {{ row.value }}
+              </span>
             </div>
           </Fieldset>
         </section>
@@ -179,13 +247,12 @@
 import { ref, computed, watch, inject, onMounted } from "vue";
 import { cleanText, firstUpper } from "../../../common/helper/text";
 import { TranslateService } from "../../../common/services/translate.service";
-import { LanguageLearningData } from "./types";
+import { Chunk, LanguageLearningData } from "./types";
 
 import { isLogin } from "../../../plugins/modular-rest";
 import SaveWordSectionV2 from "../../components/SaveWordSectionV2.vue";
 
 import Fieldset from "../../../common/components/Fieldset.vue";
-import Divider from "../../../common/components/Divider.vue";
 import { IconButton } from "pilotui/elements";
 
 import { useRoute } from "vue-router";
@@ -253,6 +320,169 @@ const context = computed(() => {
   return getProps().context || "";
 });
 
+/**
+ * Rows for the Pronunciation fieldset. When chunks exist, each chunk is paired
+ * with its own transliteration (label = chunk text). Otherwise fall back to the
+ * whole-phrase transliteration (no label) for short selections.
+ */
+const pronunciationRows = computed<{ label: string; value: string }[]>(() => {
+  const chunks = wordData.value?.chunks || [];
+  const chunkRows = chunks
+    .filter((c) => c.transliteration && c.transliteration.trim())
+    .map((c) => ({ label: c.text, value: c.transliteration as string }));
+  if (chunkRows.length) return chunkRows;
+
+  const whole = wordData.value?.linguistic_data?.phonetic?.transliteration;
+  if (whole && whole.trim()) return [{ label: "", value: whole }];
+  return [];
+});
+
+/**
+ * Split the displayed selection into segments, marking the spans that match a
+ * confirmed chunk so they can be highlighted inline. Matching is
+ * case-insensitive and uses the first occurrence of each chunk's text.
+ */
+const selectionSegments = computed<{ text: string; isChunk: boolean }[]>(() => {
+  const text = title.value || "";
+  const chunks = wordData.value?.chunks || [];
+  if (!text || !chunks.length) return [{ text, isChunk: false }];
+
+  // Collect non-overlapping [start, end) ranges for each chunk.
+  const ranges: { start: number; end: number }[] = [];
+  const lower = text.toLowerCase();
+  for (const chunk of chunks) {
+    const needle = (chunk.text || "").trim().toLowerCase();
+    if (!needle) continue;
+    let from = 0;
+    while (from <= lower.length) {
+      const idx = lower.indexOf(needle, from);
+      if (idx === -1) break;
+      const end = idx + needle.length;
+      const overlaps = ranges.some((r) => idx < r.end && end > r.start);
+      if (!overlaps) {
+        ranges.push({ start: idx, end });
+        break;
+      }
+      from = idx + 1;
+    }
+  }
+
+  if (!ranges.length) return [{ text, isChunk: false }];
+  ranges.sort((a, b) => a.start - b.start);
+
+  const segments: { text: string; isChunk: boolean }[] = [];
+  let cursor = 0;
+  for (const r of ranges) {
+    if (r.start > cursor) {
+      segments.push({ text: text.slice(cursor, r.start), isChunk: false });
+    }
+    segments.push({ text: text.slice(r.start, r.end), isChunk: true });
+    cursor = r.end;
+  }
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor), isChunk: false });
+  }
+  return segments;
+});
+
+// --- AI advice chat ---
+type AdviceMessage = { role: "user" | "assistant"; text: string };
+
+const showAdviceChat = ref(false);
+const adviceInput = ref("");
+const adviceLoading = ref(false);
+const adviceThread = ref<AdviceMessage[]>([]);
+
+// Inline editing of a previous user message.
+const editingIndex = ref<number | null>(null);
+const editingText = ref("");
+
+/**
+ * Send one user message given a conversation `history` (the turns that precede
+ * it). Pushes the user turn and the assistant response onto the thread.
+ */
+async function runAdvice(message: string, history: AdviceMessage[]) {
+  if (!message || adviceLoading.value) return;
+
+  adviceThread.value.push({ role: "user", text: message });
+  adviceLoading.value = true;
+
+  try {
+    const advice = await TranslateService.instance.fetchTranslationAdvice({
+      phrase: cleanText(getProps().word || ""),
+      context: context.value,
+      message,
+      currentChunks: wordData.value?.chunks || [],
+      history,
+    });
+
+    // Reply text (the primary output) is shown when present.
+    if (advice.reply) {
+      adviceThread.value.push({ role: "assistant", text: advice.reply });
+    }
+    // Chunk edits are applied silently; add a note only if there was no reply.
+    if (advice.chunks && wordData.value) {
+      wordData.value.chunks = advice.chunks;
+      if (!advice.reply) {
+        adviceThread.value.push({
+          role: "assistant",
+          text: advice.chunks.length
+            ? "Updated the highlighted patterns."
+            : "Cleared the highlighted patterns.",
+        });
+      }
+    }
+    analytic.track("translation-advice_used");
+  } catch (err) {
+    adviceThread.value.push({
+      role: "assistant",
+      text: "Sorry, something went wrong. Please try again.",
+    });
+    console.error("Translation advice error:", err);
+  } finally {
+    adviceLoading.value = false;
+  }
+}
+
+function sendAdviceMessage() {
+  const message = adviceInput.value.trim();
+  if (!message || adviceLoading.value) return;
+  // Full conversation so far is the history for this new turn.
+  const history = adviceThread.value.map((m) => ({ ...m }));
+  adviceInput.value = "";
+  runAdvice(message, history);
+}
+
+function startEditMessage(index: number) {
+  if (adviceLoading.value) return;
+  editingIndex.value = index;
+  editingText.value = adviceThread.value[index]?.text || "";
+}
+
+function cancelEditMessage() {
+  editingIndex.value = null;
+  editingText.value = "";
+}
+
+/**
+ * Commit an edited user message: drop that message and everything after it,
+ * then re-run the AI from the edited point with the preceding history.
+ */
+function submitEditMessage() {
+  const index = editingIndex.value;
+  if (index === null || adviceLoading.value) return;
+
+  const message = editingText.value.trim();
+  if (!message) return;
+
+  const history = adviceThread.value.slice(0, index).map((m) => ({ ...m }));
+  adviceThread.value = adviceThread.value.slice(0, index);
+  editingIndex.value = null;
+  editingText.value = "";
+
+  runAdvice(message, history);
+}
+
 // Hide the context line when it's just a duplicate / superset of the selection itself.
 const showContext = computed(() => {
   const c = context.value.trim().toLowerCase();
diff --git a/src/console-crane/modules/word-detail/types.ts b/src/console-crane/modules/word-detail/types.ts
index eac5af5..c8742ca 100644
--- a/src/console-crane/modules/word-detail/types.ts
+++ b/src/console-crane/modules/word-detail/types.ts
@@ -1,15 +1,13 @@
-export type Example = {
-  /** Example sentence showing the text in use */
-  source: string;
-  /** Translation of the example sentence */
-  target: string;
-};
-
-export type RelatedExpression = {
-  /** Related word or expression */
-  source: string;
-  /** Translation of the related expression */
-  target: string;
+/** A reusable language pattern found inside the user's selection. */
+export type Chunk = {
+  /** The exact reusable pattern as it appears in the selection */
+  text: string;
+  /** Kind of pattern (collocation, phrasal_verb, idiom, discourse_marker, other) */
+  type: string;
+  /** Pronunciation of the chunk written in the target language alphabet */
+  transliteration?: string;
+  /** Model confidence that this is a useful learnable chunk (0-1) */
+  confidence: number;
 };
 
 export type LinguisticData = {
@@ -19,25 +17,12 @@ export type LinguisticData = {
   type: string;
   /** Clear explanation of meaning, contextualized to usage */
   definition: string;
-  /** Information about how and when to use this text */
-  // usage_notes: string;
-  /** Phonetic guidance (especially for non-Latin script languages) */
+  /** Phonetic guidance written in the target language alphabet */
   phonetic: {
-    ipa: string;
     transliteration: string;
   };
   /** Indication of formality level */
   formality_level: "formal" | "neutral" | "informal";
-  /** When the literal meaning differs significantly from idiomatic usage */
-  // literal_translation: string;
-  /** Cultural context important for proper understanding */
-  // cultural_notes: string;
-  /** Additional grammatical information when relevant */
-  // grammar_notes: string;
-  /** Example sentences showing the text in use, with translations */
-  examples: Example[];
-  /** Similar or connected expressions with translations */
-  related_expressions: RelatedExpression[];
 };
 
 export type LanguageLearningData = {
@@ -64,4 +49,16 @@ export type LanguageLearningData = {
   };
   /** Linguistic analysis data in target language */
   linguistic_data: LinguisticData;
+  /** Reusable patterns found inside the selection (cap 2; empty for short/cross-language). */
+  chunks: Chunk[];
+  /** Short suggested bundle name derived from the page title, when available. */
+  suggested_bundle_name?: string;
+};
+
+/** Response shape of the translationAdvice RPC. */
+export type TranslationAdvice = {
+  /** Plain-text answer to the user's question, when they asked for advice. */
+  reply?: string;
+  /** Updated chunks, when the user asked to change the highlighted patterns. */
+  chunks?: Chunk[];
 };
diff --git a/src/console-crane/router.ts b/src/console-crane/router.ts
index 4976b52..dd0a1ae 100644
--- a/src/console-crane/router.ts
+++ b/src/console-crane/router.ts
@@ -3,6 +3,7 @@ import { RouteRecordRaw, createMemoryHistory, createRouter } from "vue-router";
 import WordDetailPage from "./modules/word-detail/index.vue";
 import SettingsPage from "./modules/settings/index.vue";
 import EmptyPage from "./modules/empty/index.vue";
+import PracticeConfigPage from "./modules/practice-config/index.vue";
 
 const routes: RouteRecordRaw[] = [
   {
@@ -20,6 +21,11 @@ const routes: RouteRecordRaw[] = [
     name: "settings",
     component: SettingsPage,
   },
+  {
+    path: "/practice-config/:data",
+    name: "practice-config",
+    component: PracticeConfigPage,
+  },
 ];
 
 export const router = createRouter({
diff --git a/src/console-crane/types.ts b/src/console-crane/types.ts
index 98dc43f..0710bb2 100644
--- a/src/console-crane/types.ts
+++ b/src/console-crane/types.ts
@@ -1 +1,5 @@
-export type ConsolePage = "empty" | "word-detail" | "settings";
+export type ConsolePage =
+  | "empty"
+  | "word-detail"
+  | "settings"
+  | "practice-config";

From f76604023886a6d88b18831c9e492ef8253e11b7 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Thu, 21 May 2026 12:56:45 +0300
Subject: [PATCH 02/10] feat(save-modal): per-chunk definitions, merged
 pronunciation, reorder save

- Definition section now shows one block per chunk (label + pronunciation +
  meaning); the separate Pronunciation fieldset is merged in.
- Falls back to the whole-phrase definition + transliteration for short
  selections with no chunks.
- Move the Save / Login button below the definition so meaning comes first.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../modules/word-detail/index.vue             | 111 ++++++++++--------
 .../modules/word-detail/types.ts              |   2 +
 2 files changed, 62 insertions(+), 51 deletions(-)

diff --git a/src/console-crane/modules/word-detail/index.vue b/src/console-crane/modules/word-detail/index.vue
index baea86c..c17e1d0 100644
--- a/src/console-crane/modules/word-detail/index.vue
+++ b/src/console-crane/modules/word-detail/index.vue
@@ -166,32 +166,29 @@
         </button>
       </div>
 
-      <!-- Save word functionality - only shown to logged in users -->
-      <SaveWordSectionV2 v-if="isLogin && wordData?.translation?.phrase" :phrase="cleanText(getProps().word!)"
-        :translation="cleanText(wordData?.translation?.phrase || '')" :context="wordData?.context"
-        :direction="wordData?.direction" :language_info="wordData?.language_info"
-        :linguistic_data="wordData?.linguistic_data" :chunks="wordData?.chunks || []"
-        :suggested-bundle-name="wordData?.suggested_bundle_name" />
-
-      <!-- Login prompt: only when there's a translation worth saving -->
-      <button
-        v-else-if="!isLogin && wordData?.translation?.phrase"
-        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"
-      >
-        <i class="text-lg i-solar-login-3-bold" />
-        <span>Login to save this phrase</span>
-      </button>
-
       <!-- LINGUISTIC DATA SECTION - Shows detailed linguistic information -->
       <template v-if="wordData && wordData.linguistic_data">
         <section class="w-full flex flex-col gap-3">
-          <!-- Main definition card -->
+          <!-- Definition card: per-chunk meaning + pronunciation, or the whole-phrase definition. -->
           <Fieldset class="dark:bg-gray-900" legend="Definition">
-            <p class="text-base mb-3 text-gray-900 dark:text-gray-100" :dir="wordData?.direction?.target">
-              {{ wordData.linguistic_data.definition }}
-            </p>
+            <div
+              v-for="(entry, index) in definitionEntries"
+              :key="index"
+              class="mb-4 last:mb-3"
+            >
+              <div v-if="entry.label || entry.transliteration" class="flex items-baseline justify-between gap-4 mb-1">
+                <span v-if="entry.label" class="text-sm font-semibold text-gray-700 dark:text-gray-200" dir="ltr">
+                  {{ entry.label }}
+                </span>
+                <span v-else />
+                <span v-if="entry.transliteration" class="text-sm italic text-gray-500 dark:text-gray-400" :dir="wordData?.direction?.target">
+                  {{ entry.transliteration }}
+                </span>
+              </div>
+              <p v-if="entry.definition" class="text-base text-gray-900 dark:text-gray-100" :dir="wordData?.direction?.target">
+                {{ entry.definition }}
+              </p>
+            </div>
 
             <!-- Type and formality level -->
             <div class="flex gap-2">
@@ -201,23 +198,6 @@
                 :label="wordData.linguistic_data.formality_level.toUpperCase()" />
             </div>
           </Fieldset>
-
-          <Fieldset v-if="pronunciationRows.length" class="dark:bg-gray-900" legend="Pronunciation">
-            <!-- Per-chunk pronunciation when chunks exist, otherwise the whole-phrase transliteration. -->
-            <div
-              v-for="(row, index) in pronunciationRows"
-              :key="index"
-              class="flex items-center justify-between gap-4 py-1"
-            >
-              <span v-if="row.label" class="text-sm font-medium text-gray-700 dark:text-gray-200" dir="ltr">
-                {{ row.label }}
-              </span>
-              <span v-else />
-              <span class="text-base italic text-gray-900 dark:text-gray-100" :dir="wordData?.direction?.target">
-                {{ row.value }}
-              </span>
-            </div>
-          </Fieldset>
         </section>
       </template>
 
@@ -239,6 +219,24 @@
           No linguistic data available for "{{ cleanText(getProps().word!) }}".
         </div>
       </template>
+
+      <!-- Save word functionality - shown after the definition -->
+      <SaveWordSectionV2 v-if="isLogin && wordData?.translation?.phrase" :phrase="cleanText(getProps().word!)"
+        :translation="cleanText(wordData?.translation?.phrase || '')" :context="wordData?.context"
+        :direction="wordData?.direction" :language_info="wordData?.language_info"
+        :linguistic_data="wordData?.linguistic_data" :chunks="wordData?.chunks || []"
+        :suggested-bundle-name="wordData?.suggested_bundle_name" />
+
+      <!-- Login prompt: only when there's a translation worth saving -->
+      <button
+        v-else-if="!isLogin && wordData?.translation?.phrase"
+        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"
+      >
+        <i class="text-lg i-solar-login-3-bold" />
+        <span>Login to save this phrase</span>
+      </button>
     </div>
   </div>
 </template>
@@ -321,20 +319,31 @@ const context = computed(() => {
 });
 
 /**
- * Rows for the Pronunciation fieldset. When chunks exist, each chunk is paired
- * with its own transliteration (label = chunk text). Otherwise fall back to the
- * whole-phrase transliteration (no label) for short selections.
+ * Entries for the Definition fieldset. Each entry pairs a label (chunk text)
+ * with its pronunciation and meaning. When chunks exist, one entry per chunk;
+ * otherwise a single entry with the whole-phrase definition + transliteration.
  */
-const pronunciationRows = computed<{ label: string; value: string }[]>(() => {
+const definitionEntries = computed<
+  { label: string; transliteration: string; definition: string }[]
+>(() => {
   const chunks = wordData.value?.chunks || [];
-  const chunkRows = chunks
-    .filter((c) => c.transliteration && c.transliteration.trim())
-    .map((c) => ({ label: c.text, value: c.transliteration as string }));
-  if (chunkRows.length) return chunkRows;
-
-  const whole = wordData.value?.linguistic_data?.phonetic?.transliteration;
-  if (whole && whole.trim()) return [{ label: "", value: whole }];
-  return [];
+  const chunkEntries = chunks
+    .filter((c) => (c.definition && c.definition.trim()) || (c.transliteration && c.transliteration.trim()))
+    .map((c) => ({
+      label: c.text,
+      transliteration: c.transliteration || "",
+      definition: c.definition || "",
+    }));
+  if (chunkEntries.length) return chunkEntries;
+
+  return [
+    {
+      label: "",
+      transliteration:
+        wordData.value?.linguistic_data?.phonetic?.transliteration || "",
+      definition: wordData.value?.linguistic_data?.definition || "",
+    },
+  ];
 });
 
 /**
diff --git a/src/console-crane/modules/word-detail/types.ts b/src/console-crane/modules/word-detail/types.ts
index c8742ca..aac8571 100644
--- a/src/console-crane/modules/word-detail/types.ts
+++ b/src/console-crane/modules/word-detail/types.ts
@@ -4,6 +4,8 @@ export type Chunk = {
   text: string;
   /** Kind of pattern (collocation, phrasal_verb, idiom, discourse_marker, other) */
   type: string;
+  /** Short explanation of the chunk's meaning/usage in the target language */
+  definition?: string;
   /** Pronunciation of the chunk written in the target language alphabet */
   transliteration?: string;
   /** Model confidence that this is a useful learnable chunk (0-1) */

From 3b85dd8e933751ecca69c96c61913880db9704b3 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Thu, 21 May 2026 12:58:00 +0300
Subject: [PATCH 03/10] chore(nibble): rename "Save & view" button to "Save and
 Learn"

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/nibble/components/SelectionPopup.vue | 2 +-
 src/popup/views/HelpView.vue             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/nibble/components/SelectionPopup.vue b/src/nibble/components/SelectionPopup.vue
index 75e2680..44dc0c4 100644
--- a/src/nibble/components/SelectionPopup.vue
+++ b/src/nibble/components/SelectionPopup.vue
@@ -33,7 +33,7 @@
             aria-hidden="true">
             <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
           </svg>
-          <span>Save &amp; view</span>
+          <span>Save and Learn</span>
         </button>
       </div>
     </div>
diff --git a/src/popup/views/HelpView.vue b/src/popup/views/HelpView.vue
index 9e64035..ed34ed2 100644
--- a/src/popup/views/HelpView.vue
+++ b/src/popup/views/HelpView.vue
@@ -126,7 +126,7 @@
                 class="text-xs text-gray-600 dark:text-gray-400 mt-auto pt-2 border-t border-purple-400/10"
               >
                 Click the icon, then hit
-                <span class="text-purple-400 font-medium">Save & view</span>
+                <span class="text-purple-400 font-medium">Save and Learn</span>
                 to open the full word details.
               </div>
             </div>

From 01e510ce44a427cab825c60017c442c8b4957db4 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Thu, 21 May 2026 21:06:08 +0300
Subject: [PATCH 04/10] refactor(save-modal): per-page bundle suggestion via
 dedicated RPC

- New BundleSuggestionService: calls getBundleSuggestionForPage once per page
  (logged-in only), cached by normalised URL; cache cleared after a save.
- SaveWordSectionV2 default-bundle chain now uses the suggestion result
  (matchedBundle -> suggestedName -> last-used), replacing the client-side
  matchBundleByUrl and the suggested_bundle_name prop.
- Drop pageTitle/pageUrl from the translation call and suggested_bundle_name
  from the LanguageLearningData type.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../services/bundle-suggestion.service.ts     | 56 +++++++++++++++++++
 src/common/services/translate.service.ts      |  8 ---
 .../components/SaveWordSectionV2.vue          | 56 ++++++-------------
 .../modules/word-detail/index.vue             |  3 +-
 .../modules/word-detail/types.ts              |  8 ++-
 5 files changed, 80 insertions(+), 51 deletions(-)
 create mode 100644 src/common/services/bundle-suggestion.service.ts

diff --git a/src/common/services/bundle-suggestion.service.ts b/src/common/services/bundle-suggestion.service.ts
new file mode 100644
index 0000000..e4baba9
--- /dev/null
+++ b/src/common/services/bundle-suggestion.service.ts
@@ -0,0 +1,56 @@
+import { authentication, functionProvider } from "@modular-rest/client";
+import { normaliseSourceUrl } from "../helper/url-normalise";
+import type { BundleSuggestion } from "../../console-crane/modules/word-detail/types";
+
+/**
+ * Per-page bundle suggestion: which bundle the save modal should default to for
+ * the current page + logged-in user. Called once per page (first word-detail
+ * open) and cached client-side by normalised URL so repeated word lookups on
+ * the same page reuse the result.
+ */
+export class BundleSuggestionService {
+  static instance = new BundleSuggestionService();
+
+  // Cache of in-flight / resolved suggestions keyed by normalised URL.
+  private cache = new Map<string, Promise<BundleSuggestion>>();
+
+  /** Clear the cache (e.g. after a save creates a new bundle for this page). */
+  clear(url?: string) {
+    if (url) this.cache.delete(normaliseSourceUrl(url));
+    else this.cache.clear();
+  }
+
+  async getForCurrentPage(): Promise<BundleSuggestion> {
+    const empty: BundleSuggestion = { matchedBundle: null, suggestedName: null };
+
+    // Logged-in only; anonymous users get nothing to suggest.
+    if (!authentication.user?.id) return empty;
+    if (typeof location === "undefined") return empty;
+
+    const key = normaliseSourceUrl(location.href);
+    if (!key) return empty;
+
+    const cached = this.cache.get(key);
+    if (cached) return cached;
+
+    const pageTitle = typeof document !== "undefined" ? document.title : "";
+    const request = functionProvider
+      .run<BundleSuggestion>({
+        name: "getBundleSuggestionForPage",
+        args: {
+          refId: authentication.user?.id,
+          pageTitle,
+          pageUrl: location.href,
+        },
+      })
+      .catch((error) => {
+        // Best-effort; never block the save flow.
+        console.error("Bundle suggestion error:", error);
+        this.cache.delete(key);
+        return empty;
+      });
+
+    this.cache.set(key, request);
+    return request;
+  }
+}
diff --git a/src/common/services/translate.service.ts b/src/common/services/translate.service.ts
index 31880e5..96c8027 100644
--- a/src/common/services/translate.service.ts
+++ b/src/common/services/translate.service.ts
@@ -159,12 +159,6 @@ export class TranslateService {
       return cachedResult;
     }
 
-    // Page context drives the bundle-name suggestion on first save from a page.
-    const pageTitle =
-      typeof document !== "undefined" ? document.title : undefined;
-    const pageUrl =
-      typeof location !== "undefined" ? location.href : undefined;
-
     // If not cached, fetch from API
     try {
       const data = await functionProvider.run<LanguageLearningData>({
@@ -175,8 +169,6 @@ export class TranslateService {
           targetLanguage: this.languageTitle,
           phrase: text,
           context: context || "",
-          pageTitle,
-          pageUrl,
         },
       });
 
diff --git a/src/console-crane/components/SaveWordSectionV2.vue b/src/console-crane/components/SaveWordSectionV2.vue
index 0ccd5c3..97f06d4 100644
--- a/src/console-crane/components/SaveWordSectionV2.vue
+++ b/src/console-crane/components/SaveWordSectionV2.vue
@@ -99,8 +99,8 @@ import { useDefaultBundleStore } from "../../stores/default-bundle";
 import { useProfileStore } from "../../stores/profile";
 import FreemiumLimitCounter from "./FreemiumLimitCounter.vue";
 import { analytic } from "../../plugins/mixpanel";
-import { normaliseSourceUrl } from "../../common/helper/url-normalise";
 import { useConsoleCraneStore } from "../stores/console-crane";
+import { BundleSuggestionService } from "../../common/services/bundle-suggestion.service";
 import type { Chunk } from "../modules/word-detail/types";
 
 const props = defineProps<{
@@ -117,7 +117,6 @@ const props = defineProps<{
   };
   linguistic_data?: any;
   chunks?: Chunk[];
-  suggestedBundleName?: string;
 }>();
 
 const selectBundleRef = ref();
@@ -198,7 +197,7 @@ watch(
   async () => {
     selectedBundles.value = [];
     useSuggested.value = false;
-    suggestedName.value = props.suggestedBundleName?.trim() || "";
+    suggestedName.value = "";
     showPreview.value = false;
 
     await loadExistingBundles();
@@ -206,15 +205,19 @@ watch(
     // Already-saved phrase: nothing to default.
     if (existingBundles.value.length > 0) return;
 
-    // 1. An existing bundle from this same page (matched by normalised URL).
-    const urlBundleId = await matchBundleByUrl();
-    if (urlBundleId) {
-      selectedBundles.value = [urlBundleId];
+    // Per-page suggestion (matched bundle from this page, or an AI name).
+    // Cached per URL by the service, so this is at most one server call per page.
+    const suggestion = await BundleSuggestionService.instance.getForCurrentPage();
+
+    // 1. An existing bundle from this same page.
+    if (suggestion.matchedBundle) {
+      selectedBundles.value = [suggestion.matchedBundle._id];
       return;
     }
 
     // 2. A suggested name from the page title (first save from this page).
-    if (suggestedName.value) {
+    if (suggestion.suggestedName) {
+      suggestedName.value = suggestion.suggestedName;
       useSuggested.value = true;
       return;
     }
@@ -243,37 +246,6 @@ async function loadAllBundles() {
   }
 }
 
-/**
- * Find the most recent bundle that already holds a phrase saved from this same
- * page (by normalised source URL). Returns its id, or null.
- */
-async function matchBundleByUrl(): Promise<string | null> {
-  if (typeof location === "undefined") return null;
-  const sourceUrl = normaliseSourceUrl(location.href);
-  if (!sourceUrl) return null;
-
-  try {
-    const phrases = await dataProvider.find<PhraseType & { _id: string }>({
-      database: DATABASE.USER_CONTENT,
-      collection: COLLECTIONS.PHRASE,
-      query: { refId: authentication.user?.id, sourceUrl },
-    });
-    const phraseIds = phrases.map((p) => p._id);
-    if (!phraseIds.length) return null;
-
-    const bundles = await dataProvider.find<PhraseBundleType>({
-      database: DATABASE.USER_CONTENT,
-      collection: COLLECTIONS.PHRASE_BUNDLE,
-      query: { refId: authentication.user?.id, phrases: { $in: phraseIds } },
-      options: { sort: "-_id" },
-    });
-    return bundles[0]?._id || null;
-  } catch (error) {
-    console.error("Error matching bundle by URL:", error);
-    return null;
-  }
-}
-
 async function loadExistingBundles() {
   if (!props.phrase || !props.translation) return;
 
@@ -414,6 +386,12 @@ async function savePhrase() {
     // Store the bundles used as new defaults for future saves
     defaultBundleStore.setDefaultBundles(bundleIds);
 
+    // This page now has a saved phrase + bundle; drop the cached suggestion so
+    // the next open matches the bundle instead of re-suggesting a name.
+    if (typeof location !== "undefined") {
+      BundleSuggestionService.instance.clear(location.href);
+    }
+
     // Clear selection and reload existing bundles
     selectedBundles.value = [];
     useSuggested.value = false;
diff --git a/src/console-crane/modules/word-detail/index.vue b/src/console-crane/modules/word-detail/index.vue
index c17e1d0..5ad37bc 100644
--- a/src/console-crane/modules/word-detail/index.vue
+++ b/src/console-crane/modules/word-detail/index.vue
@@ -224,8 +224,7 @@
       <SaveWordSectionV2 v-if="isLogin && wordData?.translation?.phrase" :phrase="cleanText(getProps().word!)"
         :translation="cleanText(wordData?.translation?.phrase || '')" :context="wordData?.context"
         :direction="wordData?.direction" :language_info="wordData?.language_info"
-        :linguistic_data="wordData?.linguistic_data" :chunks="wordData?.chunks || []"
-        :suggested-bundle-name="wordData?.suggested_bundle_name" />
+        :linguistic_data="wordData?.linguistic_data" :chunks="wordData?.chunks || []" />
 
       <!-- Login prompt: only when there's a translation worth saving -->
       <button
diff --git a/src/console-crane/modules/word-detail/types.ts b/src/console-crane/modules/word-detail/types.ts
index aac8571..9f0c5c7 100644
--- a/src/console-crane/modules/word-detail/types.ts
+++ b/src/console-crane/modules/word-detail/types.ts
@@ -53,8 +53,12 @@ export type LanguageLearningData = {
   linguistic_data: LinguisticData;
   /** Reusable patterns found inside the selection (cap 2; empty for short/cross-language). */
   chunks: Chunk[];
-  /** Short suggested bundle name derived from the page title, when available. */
-  suggested_bundle_name?: string;
+};
+
+/** Result of the per-page bundle suggestion call. */
+export type BundleSuggestion = {
+  matchedBundle: { _id: string; title: string } | null;
+  suggestedName: string | null;
 };
 
 /** Response shape of the translationAdvice RPC. */

From ab00130647d72703147f8a96df6faa8e3b1fbbe5 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Thu, 21 May 2026 21:11:19 +0300
Subject: [PATCH 05/10] fix(save-modal): break circular import to console-crane
 store

SaveWordSectionV2 -> console-crane store -> router -> word-detail ->
SaveWordSectionV2 caused "Cannot access '__WEBPACK_DEFAULT_EXPORT__' before
initialization" at runtime. Lazy-import the store inside startPracticeNow
instead of at module top so the static cycle is broken.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/console-crane/components/SaveWordSectionV2.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/console-crane/components/SaveWordSectionV2.vue b/src/console-crane/components/SaveWordSectionV2.vue
index 97f06d4..ae99ca0 100644
--- a/src/console-crane/components/SaveWordSectionV2.vue
+++ b/src/console-crane/components/SaveWordSectionV2.vue
@@ -99,7 +99,6 @@ import { useDefaultBundleStore } from "../../stores/default-bundle";
 import { useProfileStore } from "../../stores/profile";
 import FreemiumLimitCounter from "./FreemiumLimitCounter.vue";
 import { analytic } from "../../plugins/mixpanel";
-import { useConsoleCraneStore } from "../stores/console-crane";
 import { BundleSuggestionService } from "../../common/services/bundle-suggestion.service";
 import type { Chunk } from "../modules/word-detail/types";
 
@@ -138,7 +137,6 @@ const showPreview = ref(false);
 
 const defaultBundleStore = useDefaultBundleStore();
 const profileStore = useProfileStore();
-const consoleCraneStore = useConsoleCraneStore();
 
 // When the user picks a real bundle, drop the suggestion.
 watch(selectedBundles, (val) => {
@@ -418,9 +416,12 @@ function handleUpgrade() {
  * Open the Practice now config page inside the console-crane modal.
  * The full config card ships in subtask 86exnxnw7; this navigates to its route.
  */
-function startPracticeNow() {
+async function startPracticeNow() {
   analytic.track("practice-now_opened");
-  consoleCraneStore.toggleConsoleCrane(
+  // Lazy import to avoid a circular dependency:
+  // SaveWordSectionV2 -> console-crane store -> router -> word-detail -> SaveWordSectionV2.
+  const { useConsoleCraneStore } = await import("../stores/console-crane");
+  useConsoleCraneStore().toggleConsoleCrane(
     "practice-config",
     {
       phrase: props.phrase,

From 374cbb4b0c957c5def27d6b9f0211b3ed4fe17f5 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Thu, 21 May 2026 23:49:27 +0300
Subject: [PATCH 06/10] feat(save-modal): in-field bundle chips with
 dirty-aware save + inline removal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Saved bundles now render as chips inside the selector (removed the separate
  "Saved in" fieldset that collided with the action row). Each chip has a ×.
- Dirty-aware Save: disabled (greyed) unless a not-yet-saved bundle is selected;
  compact "Save" label since the bundle is shown in the field.
- Removing a saved bundle via × calls removePhrase immediately (watcher); Save
  only adds newly selected bundles. createPhrase reuses an existing same-named
  bundle instead of recreating (avoids E11000).
- In-field "Suggested" chip (editable) replaces the standalone row; resolve
  bundle titles from loaded options (pilotui hands back ids when preselected);
  normalise selection to ids so objects never leak to the parent / createPhrase.
- Existing-phrase lookup matches by phrase + owner only (translation varies per
  AI call, which previously made saved phrases look unsaved).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/SaveWordSectionV2.vue          | 341 ++++++++----------
 .../components/SelectPhraseBundleV2.vue       | 113 +++++-
 2 files changed, 244 insertions(+), 210 deletions(-)

diff --git a/src/console-crane/components/SaveWordSectionV2.vue b/src/console-crane/components/SaveWordSectionV2.vue
index ae99ca0..041fc2f 100644
--- a/src/console-crane/components/SaveWordSectionV2.vue
+++ b/src/console-crane/components/SaveWordSectionV2.vue
@@ -1,36 +1,14 @@
 <template>
   <div class="my-2 bg-white dark:bg-gray-900 rounded-xl">
-    <!-- Suggested bundle chip (first save from this page) -->
-    <div v-if="useSuggested" class="mb-3 flex items-center gap-2 flex-wrap">
-      <span class="text-[11px] uppercase tracking-wider font-semibold text-gray-400">Suggested:</span>
-      <input
-        v-if="isEditingSuggested"
-        v-model="suggestedName"
-        type="text"
-        class="text-sm rounded-md border border-purple-300 dark:border-purple-700 bg-white dark:bg-gray-900 px-2 py-1 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-purple-400"
-        @keyup.enter="isEditingSuggested = false"
-        @blur="isEditingSuggested = false"
-      />
-      <button
-        v-else
-        type="button"
-        class="inline-flex items-center gap-1.5 text-sm rounded-full bg-purple-100 dark:bg-purple-900/40 text-purple-800 dark:text-purple-200 px-3 py-1 hover:bg-purple-200 dark:hover:bg-purple-900/60"
-        @click="isEditingSuggested = true"
-      >
-        <span>{{ suggestedName }}</span>
-        <i class="i-mdi-pencil text-xs opacity-70" />
-      </button>
-    </div>
-
     <FreemiumLimitCounter v-if="showFreemiumCounter" :used="usedCount" :total="totalCount" :isAtLimit="!!isAtLimit"
       :isDisabled="!!(isSaving || isAtLimit)" @action="savePhrase" @upgrade="handleUpgrade" class="mb-4">
       <InputGroup>
         <SelectPhraseBundleV2 class="flex-1" ref="selectBundleRef" v-model:selected-bundles="selectedBundles"
-          :excluded-bundle-ids="existingBundles.map((b) => b._id)" />
+          :suggested-name="useSuggested ? suggestedName : ''" @update:suggested-name="suggestedName = $event" />
         <Button :label="isAtLimit ? 'Upgrade' : saveLabel"
           :icon-name="isAtLimit ? 'pi pi-crown' : ''" size="lg" @click="isAtLimit ? handleUpgrade() : savePhrase()"
-          :disabled="!canSave || isSaving" :is-loading="isSaving"
-          class="border-none bg-gradient-to-r from-pink-500 to-purple-600 shadow-md hover:from-pink-600 hover:to-purple-700 text-white font-semibold dark:from-pink-700 dark:to-purple-900">
+          :disabled="isAtLimit ? false : (!canSave || isSaving)" :is-loading="isSaving"
+          :class="freemiumSaveActive ? ACTIVE_SAVE_CLASS : DISABLED_SAVE_CLASS">
           <template #icon>
             <i :class="isAtLimit ? 'pi pi-crown' : 'mr-4 i-ep-collection'" />
           </template>
@@ -40,9 +18,9 @@
     <template v-else>
       <div class="flex w-full">
         <SelectPhraseBundleV2 ref="selectBundleRef" v-model:selected-bundles="selectedBundles"
-          :excluded-bundle-ids="existingBundles.map((b) => b._id)" />
+          :suggested-name="useSuggested ? suggestedName : ''" @update:suggested-name="suggestedName = $event" />
         <Button :label="saveLabel" size="lg" @click="savePhrase" :disabled="!canSave || isSaving" :is-loading="isSaving"
-          class="border-none bg-gradient-to-r from-pink-500 to-purple-600 shadow-md hover:from-pink-600 hover:to-purple-700 text-white font-semibold dark:from-pink-700 dark:to-purple-900">
+          :class="plainSaveActive ? ACTIVE_SAVE_CLASS : DISABLED_SAVE_CLASS">
           <template #icon>
             <i class="mr-4 i-ep-collection" />
           </template>
@@ -66,23 +44,13 @@
       <p class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 mb-1.5">Preview · fill in the blank</p>
       <p class="text-sm text-gray-900 dark:text-gray-100" :dir="direction?.source">{{ previewSentence }}</p>
     </div>
-
-    <!-- Existing Bundles as Fieldset -->
-    <Fieldset v-if="existingBundles.length > 0" class="saved-bundles-fieldset bg-white dark:bg-gray-900"
-      legend="Saved in">
-      <div class="flex flex-wrap gap-1.5">
-        <Button v-for="bundle in existingBundles" :key="bundle._id" :label="bundle.title" chip rounded="full" size="sm"
-          @chip-click="removePhraseFromBundle(bundle._id)" class="saved-chip" />
-      </div>
-    </Fieldset>
   </div>
 </template>
 
 <script setup lang="ts">
 import { InputGroup, Button } from "pilotui";
-import Fieldset from "../../common/components/Fieldset.vue";
 import SelectPhraseBundleV2 from "./SelectPhraseBundleV2.vue";
-import { onMounted, ref, watch, computed } from "vue";
+import { ref, watch, computed } from "vue";
 import {
   authentication,
   dataProvider,
@@ -122,15 +90,14 @@ const selectBundleRef = ref();
 const selectedBundles = ref<string[]>([]);
 const existingBundles = ref<PhraseBundleType[]>([]);
 const existedPhrase = ref<PhraseType | null>(null);
-const allBundles = ref<PhraseBundleType[]>([]);
+// Bundle ids the phrase is already saved in (the "synced" baseline for dirty checks).
+const originalBundleIds = ref<string[]>([]);
 
 const isSaving = ref(false);
-const isRemoving = ref(false);
 
 // Bundle suggestion (first save from a page).
 const suggestedName = ref("");
 const useSuggested = ref(false);
-const isEditingSuggested = ref(false);
 
 // Preview flashcard.
 const showPreview = ref(false);
@@ -143,28 +110,74 @@ watch(selectedBundles, (val) => {
   if (val.length) useSuggested.value = false;
 });
 
-const canSave = computed(
-  () =>
-    selectedBundles.value.length > 0 ||
-    (useSuggested.value && !!suggestedName.value.trim())
-);
+// Removing an already-saved bundle (via the chip ×) unsaves it immediately.
+let isRemovingBundle = false;
+watch(selectedBundles, async (newSel) => {
+  if (isRemovingBundle) return;
+  if (!existedPhrase.value?._id) return;
 
-const saveLabel = computed(() => {
-  if (useSuggested.value && suggestedName.value.trim()) {
-    return `Save to ${suggestedName.value.trim()}`;
-  }
-  if (selectedBundles.value.length === 1) {
-    const title = allBundles.value.find(
-      (b) => b._id === selectedBundles.value[0]
-    )?.title;
-    if (title) return `Save to ${title}`;
+  const removed = originalBundleIds.value.filter((id) => !newSel.includes(id));
+  if (!removed.length) return;
+
+  isRemovingBundle = true;
+  try {
+    await Promise.all(
+      removed.map((bundleId) =>
+        functionProvider.run({
+          name: "removePhrase",
+          args: {
+            phraseId: existedPhrase.value!._id,
+            bundleId,
+            refId: authentication.user?.id,
+          },
+        })
+      )
+    );
+    analytic.track("phrase_removed");
+    originalBundleIds.value = originalBundleIds.value.filter(
+      (id) => !removed.includes(id)
+    );
+    existingBundles.value = existingBundles.value.filter(
+      (b) => !removed.includes(b._id)
+    );
+    await profileStore.fetchSubscription();
+  } catch (error) {
+    console.error("Error removing phrase from bundle:", error);
+    // Revert the deselection on failure.
+    selectedBundles.value = Array.from(new Set([...newSel, ...removed]));
+  } finally {
+    isRemovingBundle = false;
   }
-  if (!selectedBundles.value.length) return "Add to Bundles";
-  return `Add to ${selectedBundles.value.length} Bundle${
-    selectedBundles.value.length > 1 ? "s" : ""
-  }`;
 });
 
+// Dirty = there's a selected bundle that isn't saved yet (a pending addition),
+// or a suggested (not-yet-created) bundle is in play. Removals are applied
+// immediately (see the removal watcher), so they don't count as dirty.
+const isDirty = computed(() => {
+  if (useSuggested.value && suggestedName.value.trim()) return true;
+  const origSet = new Set(originalBundleIds.value);
+  return selectedBundles.value.some((id) => !origSet.has(id));
+});
+
+const canSave = computed(() => isDirty.value);
+
+// Save button styling: vivid gradient when actionable, muted grey when not.
+const ACTIVE_SAVE_CLASS =
+  "border-none bg-gradient-to-r from-pink-500 to-purple-600 shadow-md hover:from-pink-600 hover:to-purple-700 text-white font-semibold dark:from-pink-700 dark:to-purple-900";
+const DISABLED_SAVE_CLASS =
+  "border-none bg-gray-200 dark:bg-gray-700 text-gray-400 dark:text-gray-500 shadow-none cursor-not-allowed";
+
+// Plain (non-freemium) Save button is active only when there are changes.
+const plainSaveActive = computed(() => canSave.value && !isSaving.value);
+// Freemium button doubles as "Upgrade" at the limit (always actionable then).
+const freemiumSaveActive = computed(
+  () => isAtLimit.value || (canSave.value && !isSaving.value)
+);
+
+// The chosen / suggested bundle is shown inside the selector field, so the
+// button stays compact.
+const saveLabel = computed(() => "Save");
+
 // Build the L3+ style cloze preview by blanking the first chunk inside the context.
 const previewSentence = computed(() => {
   const chunk = props.chunks?.[0]?.text?.trim();
@@ -226,29 +239,17 @@ watch(
   { immediate: true, deep: true }
 );
 
-onMounted(() => {
-  loadExistingBundles();
-  loadAllBundles();
-});
-
-async function loadAllBundles() {
-  try {
-    allBundles.value = await dataProvider.find<PhraseBundleType>({
-      database: DATABASE.USER_CONTENT,
-      collection: COLLECTIONS.PHRASE_BUNDLE,
-      query: { refId: authentication.user?.id },
-      options: { sort: "-_id" },
-    });
-  } catch (error) {
-    console.error("Error loading bundles:", error);
-  }
-}
-
-async function loadExistingBundles() {
-  if (!props.phrase || !props.translation) return;
+/**
+ * Load the bundles the phrase is already saved in, set the dirty baseline, and
+ * preselect them in the selector so they show as chips. Returns true when the
+ * phrase already exists (is saved somewhere).
+ */
+async function loadExistingBundles(): Promise<boolean> {
+  if (!props.phrase || !props.translation) return false;
 
   try {
-    // First, find the phrase
+    // Match by phrase (+ owner) only. The translation can vary between AI calls,
+    // so including it here would make an already-saved phrase look unsaved.
     existedPhrase.value = await dataProvider
       .findOne({
         database: DATABASE.USER_CONTENT,
@@ -256,112 +257,115 @@ async function loadExistingBundles() {
         query: {
           refId: authentication.user?.id,
           phrase: props.phrase.trim(),
-          translation: props.translation.trim(),
         },
       })
       .then((doc) => doc as PhraseType | null);
 
     if (!existedPhrase.value) {
       existingBundles.value = [];
-      return;
+      originalBundleIds.value = [];
+      selectedBundles.value = [];
+      return false;
     }
 
-    // Find all bundles that contain this phrase
     const bundles = await dataProvider.find<PhraseBundleType>({
       database: DATABASE.USER_CONTENT,
       collection: COLLECTIONS.PHRASE_BUNDLE,
       query: {
         refId: authentication.user?.id,
-        phrases: {
-          $in: [existedPhrase.value._id],
-        },
-      },
-      options: {
-        sort: "-_id",
+        phrases: { $in: [existedPhrase.value._id] },
       },
+      options: { sort: "-_id" },
     });
 
     existingBundles.value = bundles;
+    originalBundleIds.value = bundles.map((b) => b._id);
+    // Preselect the saved bundles so they appear inside the selector.
+    selectedBundles.value = [...originalBundleIds.value];
+    return originalBundleIds.value.length > 0;
   } catch (error) {
     console.error("Error loading existing bundles:", error);
     existingBundles.value = [];
+    originalBundleIds.value = [];
+    return false;
   }
 }
 
-async function removePhraseFromBundle(bundleId: string) {
-  if (!existedPhrase.value || isRemoving.value) return;
-
-  isRemoving.value = true;
-
+/** Find an existing bundle of the user with this exact title, or null. */
+async function findBundleByTitle(title: string): Promise<string | null> {
   try {
-    // Use the same approach as the dashboard - call the removePhrase function
-    await functionProvider
-      .run({
-        name: "removePhrase",
-        args: {
-          phraseId: existedPhrase.value._id,
-          bundleId: bundleId,
-          refId: authentication.user?.id,
-        },
-      })
-      .then(() => {
-        analytic.track("phrase_removed");
-      });
-
-    // Reload existing bundles to update UI
-    await loadExistingBundles();
-    // Refresh freemium counter
-    await profileStore.fetchSubscription();
-  } catch (error) {
-    console.error("Error removing phrase from bundle:", error);
-  } finally {
-    isRemoving.value = false;
+    const existing = await dataProvider.findOne<PhraseBundleType>({
+      database: DATABASE.USER_CONTENT,
+      collection: COLLECTIONS.PHRASE_BUNDLE,
+      query: { refId: authentication.user?.id, title },
+    });
+    return (existing as any)?._id || null;
+  } catch {
+    return null;
   }
 }
 
 /**
  * Resolve the bundle ids to save into. When the user kept the suggested bundle,
- * create it now and return its id. Returns an empty array if nothing to save.
+ * reuse an existing bundle with the same name if one exists (the refId+title
+ * index is unique), otherwise create it. Returns [] if nothing to save.
  */
 async function resolveBundleIds(): Promise<string[]> {
   if (selectedBundles.value.length) return selectedBundles.value;
 
   if (useSuggested.value && suggestedName.value.trim()) {
-    const created = await dataProvider.insertOne({
-      database: DATABASE.USER_CONTENT,
-      collection: COLLECTIONS.PHRASE_BUNDLE,
-      doc: { title: suggestedName.value.trim(), refId: authentication.user?.id },
-    });
-    analytic.track("phrase-bundle_created");
-    const id = (created as any)?._id;
-    return id ? [id] : [];
+    const title = suggestedName.value.trim();
+
+    // Reuse an existing same-named bundle (avoids E11000 duplicate key).
+    const existingId = await findBundleByTitle(title);
+    if (existingId) return [existingId];
+
+    try {
+      const created = await dataProvider.insertOne({
+        database: DATABASE.USER_CONTENT,
+        collection: COLLECTIONS.PHRASE_BUNDLE,
+        doc: { title, refId: authentication.user?.id },
+      });
+      analytic.track("phrase-bundle_created");
+      const id = (created as any)?._id;
+      return id ? [id] : [];
+    } catch (error) {
+      // A duplicate may have been created concurrently — fall back to it.
+      const fallbackId = await findBundleByTitle(title);
+      if (fallbackId) return [fallbackId];
+      throw error;
+    }
   }
 
   return [];
 }
 
 async function savePhrase() {
+  if (!canSave.value || isSaving.value) return;
   isSaving.value = true;
 
   try {
-    const bundleIds = await resolveBundleIds();
-    if (!bundleIds.length) {
+    // Save adds the phrase to newly selected (not-yet-saved) bundles.
+    // Removals are applied immediately by the removal watcher.
+    const finalSelected = await resolveBundleIds();
+    const originalSet = new Set(originalBundleIds.value);
+    const toAdd = finalSelected.filter((id) => !originalSet.has(id));
+
+    if (!toAdd.length) {
       isSaving.value = false;
       return;
     }
 
-    // Use the enhanced server function with linguistic type
-    const result = await functionProvider
+    existedPhrase.value = await functionProvider
       .run<PhraseType>({
         name: "createPhrase",
         args: {
           phrase: props.phrase.trim(),
           translation: props.translation.trim(),
           translation_language: TranslateService.instance.targetLanguage.trim(),
-          bundleIds,
+          bundleIds: toAdd,
           refId: authentication.user?.id,
-          type: "linguistic", // Specify linguistic type
-          // Add linguistic-specific data from the word detail context
+          type: "linguistic",
           context: props.context || "",
           direction: props.direction,
           language_info: props.language_info,
@@ -371,33 +375,25 @@ async function savePhrase() {
         },
       })
       .then((result) => {
-        analytic.track("phrase_saved", {
-          freemium: profileStore.isFreemium,
-        });
-
+        analytic.track("phrase_saved", { freemium: profileStore.isFreemium });
         return result;
       });
 
-    // Update the existedPhrase reference if it's a new phrase
-    existedPhrase.value = result;
-
-    // Store the bundles used as new defaults for future saves
-    defaultBundleStore.setDefaultBundles(bundleIds);
+    // Remember the bundles now in use as defaults for future saves.
+    if (finalSelected.length) defaultBundleStore.setDefaultBundles(finalSelected);
 
-    // This page now has a saved phrase + bundle; drop the cached suggestion so
-    // the next open matches the bundle instead of re-suggesting a name.
+    // This page now has a saved phrase; drop the cached suggestion so the next
+    // open matches the bundle instead of re-suggesting a name.
     if (typeof location !== "undefined") {
       BundleSuggestionService.instance.clear(location.href);
     }
 
-    // Clear selection and reload existing bundles
-    selectedBundles.value = [];
+    // Re-sync the baseline + selection from the server.
     useSuggested.value = false;
-    await Promise.all([loadExistingBundles(), loadAllBundles()]);
-    // Refresh freemium counter
+    suggestedName.value = "";
+    await loadExistingBundles();
     await profileStore.fetchSubscription();
 
-    // Close the dropdown after successful save
     if (selectBundleRef.value?.closeDropdown) {
       selectBundleRef.value.closeDropdown();
     }
@@ -439,55 +435,6 @@ async function startPracticeNow() {
   color: var(--surface-border-color) !important;
 }
 
-:deep(.saved-bundles-fieldset) {
-  margin-top: 6px;
-  margin-bottom: 6px;
-}
-
-:deep(.saved-bundles-fieldset .p-fieldset-content) {
-  padding: 8px 12px;
-}
-
-:deep(.saved-bundles-fieldset .p-fieldset-legend) {
-  padding: 4px 8px;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-:deep(.saved-chip) {
-  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
-  color: white;
-  border: none;
-  font-size: 0.875rem;
-  font-weight: 500;
-  padding: 6px 12px;
-  border-radius: 14px;
-  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2);
-  transition: all 0.2s ease;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-:deep(.saved-chip:hover) {
-  transform: translateY(-0.5px);
-  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
-  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 50%, #7c3aed 100%);
-}
-
-:deep(.saved-chip .p-chip-remove-icon) {
-  margin-left: 6px;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 0.75rem;
-  transition: color 0.2s ease;
-}
-
-:deep(.saved-chip .p-chip-remove-icon:hover) {
-  color: white;
-  transform: scale(1.1);
-}
-
 :deep(.p-inputgroup) {
   border-radius: 12px;
   overflow: hidden;
diff --git a/src/console-crane/components/SelectPhraseBundleV2.vue b/src/console-crane/components/SelectPhraseBundleV2.vue
index d5f1e7b..a8e2b4b 100644
--- a/src/console-crane/components/SelectPhraseBundleV2.vue
+++ b/src/console-crane/components/SelectPhraseBundleV2.vue
@@ -1,6 +1,7 @@
 <template>
-  <Select v-model="selected" :options="options" multiple custom labelKey="title" valueKey="_id"
-    placeholder="Select Phrase Bundles to save...">
+  <div class="relative w-full">
+    <Select v-model="selected" :options="options" multiple custom labelKey="title" valueKey="_id"
+      :placeholder="showSuggestion ? '' : 'Select Phrase Bundles to save...'">
     <template #selected="{
       selectedOption,
       selectedOptions,
@@ -11,13 +12,16 @@
       <div v-if="multiple && selectedOptions.length > 0" class="flex items-center gap-2 flex-wrap">
         <span class="text-xs text-gray-500 dark:text-gray-400">Selected:</span>
         <div class="flex items-center gap-1 flex-wrap">
-          <span v-for="(option, index) in selectedOptions.slice(0, 2)" :key="index"
-            class="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-300 rounded">
-            {{ getOptionLabel(option) }}
-          </span>
-          <span v-if="selectedCount > 2"
-            class="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded">
-            +{{ selectedCount - 2 }} more
+          <span v-for="(option, index) in selectedOptions" :key="index"
+            class="inline-flex items-center gap-1 pl-2 pr-1 py-0.5 text-xs font-medium bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-300 rounded">
+            {{ resolveTitle(option, getOptionLabel) }}
+            <span role="button" tabindex="0" title="Remove"
+              class="inline-flex items-center justify-center rounded-full p-0.5 hover:bg-blue-200 dark:hover:bg-blue-500/30 transition-colors cursor-pointer"
+              @click.stop.prevent="removeSelected(option)"
+              @mousedown.stop.prevent
+              @keyup.enter.stop="removeSelected(option)">
+              <i class="i-mdi-close text-[11px]" />
+            </span>
           </span>
         </div>
       </div>
@@ -25,7 +29,7 @@
         <span class="inline-flex items-center justify-center w-5 h-5 text-xs text-blue-600">
           ✓
         </span>
-        <span class="font-medium">{{ getOptionLabel(selectedOption) }}</span>
+        <span class="font-medium">{{ resolveTitle(selectedOption, getOptionLabel) }}</span>
       </span>
     </template>
     <template #header>
@@ -45,14 +49,38 @@
         {{ (option as unknown as PhraseBundleType).title }}
       </div>
     </template>
-  </Select>
+    </Select>
+
+    <!--
+      Suggested bundle, shown inside the field when nothing is selected yet.
+      Clearly marked as a suggestion and editable in place. The chip sits on the
+      left; the rest of the field (and the caret) stays clickable to pick an
+      existing bundle, which clears the suggestion.
+    -->
+    <div v-if="showSuggestion" class="absolute inset-y-0 left-0 right-12 flex items-center pl-3 pointer-events-none">
+      <div class="pointer-events-auto inline-flex items-center gap-1.5 min-w-0 max-w-full rounded-full bg-purple-100 dark:bg-purple-900/40 text-purple-800 dark:text-purple-200 ring-1 ring-purple-300 dark:ring-purple-700 px-2.5 py-1"
+        @click.stop>
+        <i class="i-mdi-auto-fix text-sm opacity-80 shrink-0" />
+        <span class="text-[10px] uppercase tracking-wide font-semibold opacity-70 shrink-0">Suggested</span>
+        <template v-if="!isEditingSuggested">
+          <span class="text-sm font-medium whitespace-nowrap">{{ suggestedName }}</span>
+          <button type="button" class="shrink-0 opacity-70 hover:opacity-100" title="Edit name" @click.stop="startEditSuggested">
+            <i class="i-mdi-pencil text-xs" />
+          </button>
+        </template>
+        <input v-else ref="suggestedInput" v-model="editBuffer" type="text" dir="auto"
+          class="flex-1 min-w-0 w-56 max-w-full text-sm bg-white dark:bg-gray-900 rounded px-2 py-0.5 border border-purple-300 dark:border-purple-700 focus:outline-none focus:ring-1 focus:ring-purple-400"
+          @click.stop @keydown.stop @keyup.enter="commitEditSuggested" @blur="commitEditSuggested" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { dataProvider, authentication } from "@modular-rest/client";
 import { Button } from "pilotui/elements";
 import { Select, Input, InputGroup } from "pilotui";
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import { COLLECTIONS, DATABASE } from "../../common/static/global";
 import { PhraseBundleType } from "../../common/types/phrase.type";
@@ -62,10 +90,13 @@ import { log } from "../../common/helper/log";
 const props = defineProps<{
   selectedBundles: string[];
   excludedBundleIds?: string[];
+  /** AI-suggested bundle name shown in-field when no bundle is selected yet. */
+  suggestedName?: string;
 }>();
 
 const emit = defineEmits({
   "update:selectedBundles": (value: string[]) => true,
+  "update:suggestedName": (value: string) => true,
 });
 
 const isFetching = ref(false);
@@ -74,12 +105,68 @@ const isCreating = ref(false);
 const searchedBundleName = ref("");
 const options = ref<PhraseBundleType[]>([]);
 
+// In-field suggested bundle (shown only when nothing is selected yet).
+const isEditingSuggested = ref(false);
+const editBuffer = ref("");
+const suggestedInput = ref<HTMLInputElement | null>(null);
+const showSuggestion = computed(
+  () => !!props.suggestedName && (props.selectedBundles?.length || 0) === 0
+);
+
+/**
+ * Resolve a selected entry to its bundle title. pilotui hands back the option
+ * object when picked from the dropdown, but the raw value (id) when the value
+ * was preselected externally — so look the id up in the loaded options and fall
+ * back to the slot's label helper.
+ */
+function resolveTitle(
+  option: any,
+  getOptionLabel: (o: any) => string
+): string {
+  if (option && typeof option === "object") {
+    return option.title ?? getOptionLabel(option);
+  }
+  const found = options.value.find((o) => o._id === option);
+  return found ? found.title : getOptionLabel(option);
+}
+
+/**
+ * Normalise a selection entry to a bundle id. pilotui stores the whole option
+ * object when picked from the dropdown but the raw id when set externally.
+ */
+function toId(entry: any): string {
+  return entry && typeof entry === "object" ? entry._id : entry;
+}
+
+/** Deselect a bundle chip (removes it from the selection / makes it dirty). */
+function removeSelected(option: any) {
+  const targetId = toId(option);
+  emit(
+    "update:selectedBundles",
+    (props.selectedBundles || []).filter((x) => toId(x) !== targetId)
+  );
+}
+
+function startEditSuggested() {
+  editBuffer.value = props.suggestedName || "";
+  isEditingSuggested.value = true;
+  nextTick(() => suggestedInput.value?.focus());
+}
+
+function commitEditSuggested() {
+  const value = editBuffer.value.trim();
+  if (value) emit("update:suggestedName", value);
+  isEditingSuggested.value = false;
+}
+
 const selected = computed<string[] | undefined>({
   get() {
     return props.selectedBundles;
   },
   set(v) {
-    emit("update:selectedBundles", Array.isArray(v) ? v : []);
+    // pilotui pushes option objects on dropdown pick; always emit plain ids so
+    // the parent (and createPhrase) only ever sees bundle id strings.
+    emit("update:selectedBundles", Array.isArray(v) ? v.map(toId) : []);
   },
 });
 

From 1315cc86c3421ab64560e68e70d0b282c662d3ba Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 22 May 2026 00:20:41 +0300
Subject: [PATCH 07/10] feat(saved-phrase): DB-first lookup, reuse stored
 translation, no AI re-call
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New shared findSavedPhrase (common/services/phrase.service.ts): single source
  of truth, matches by phrase text + owner (translation excluded by design).
- Nibble popup: for an already-saved phrase, load the stored translation from
  the DB and label the action "Learn" (book icon) instead of "Save and Learn" —
  no AI translate call.
- Word-detail modal: for a saved phrase, build the view from the stored document
  (translation + linguistic_data + chunks) instead of calling the detailed AI
  translation (also avoids the occasional "failed to parse JSON" error).
- SaveWordSectionV2 reuses findSavedPhrase for its existing-phrase check.
- Restore the source sentence: showContext now displays the surrounding
  sentence (only hides when empty/identical to the selection), and context
  prefers the stored source sentence for saved phrases.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/common/services/phrase.service.ts         | 32 ++++++++++
 .../components/SaveWordSectionV2.vue          | 15 +----
 .../modules/word-detail/index.vue             | 64 ++++++++++++-------
 src/nibble/components/SelectionPopup.vue      | 31 +++++++--
 4 files changed, 104 insertions(+), 38 deletions(-)
 create mode 100644 src/common/services/phrase.service.ts

diff --git a/src/common/services/phrase.service.ts b/src/common/services/phrase.service.ts
new file mode 100644
index 0000000..13bf8fc
--- /dev/null
+++ b/src/common/services/phrase.service.ts
@@ -0,0 +1,32 @@
+import { dataProvider, authentication } from "@modular-rest/client";
+import { COLLECTIONS, DATABASE } from "../static/global";
+import type { PhraseType } from "../types/phrase.type";
+
+/**
+ * Single source of truth for "has the user already saved this phrase?".
+ *
+ * Matches by phrase text (the saved unit) + owner only. The translation is
+ * intentionally excluded: the AI returns a slightly different translation on
+ * each call, so matching on it would make an already-saved phrase look unsaved.
+ *
+ * Returns the saved phrase document, or null when not logged in, the input is
+ * empty, the phrase isn't saved, or the lookup fails.
+ */
+export async function findSavedPhrase(
+  phrase: string
+): Promise<PhraseType | null> {
+  const refId = authentication.user?.id;
+  const text = (phrase || "").trim();
+  if (!refId || !text) return null;
+
+  try {
+    const doc = await dataProvider.findOne<PhraseType>({
+      database: DATABASE.USER_CONTENT,
+      collection: COLLECTIONS.PHRASE,
+      query: { refId, phrase: text },
+    });
+    return (doc as PhraseType) || null;
+  } catch {
+    return null;
+  }
+}
diff --git a/src/console-crane/components/SaveWordSectionV2.vue b/src/console-crane/components/SaveWordSectionV2.vue
index 041fc2f..c304efa 100644
--- a/src/console-crane/components/SaveWordSectionV2.vue
+++ b/src/console-crane/components/SaveWordSectionV2.vue
@@ -68,6 +68,7 @@ import { useProfileStore } from "../../stores/profile";
 import FreemiumLimitCounter from "./FreemiumLimitCounter.vue";
 import { analytic } from "../../plugins/mixpanel";
 import { BundleSuggestionService } from "../../common/services/bundle-suggestion.service";
+import { findSavedPhrase } from "../../common/services/phrase.service";
 import type { Chunk } from "../modules/word-detail/types";
 
 const props = defineProps<{
@@ -248,18 +249,8 @@ async function loadExistingBundles(): Promise<boolean> {
   if (!props.phrase || !props.translation) return false;
 
   try {
-    // Match by phrase (+ owner) only. The translation can vary between AI calls,
-    // so including it here would make an already-saved phrase look unsaved.
-    existedPhrase.value = await dataProvider
-      .findOne({
-        database: DATABASE.USER_CONTENT,
-        collection: COLLECTIONS.PHRASE,
-        query: {
-          refId: authentication.user?.id,
-          phrase: props.phrase.trim(),
-        },
-      })
-      .then((doc) => doc as PhraseType | null);
+    // Shared lookup (matches by phrase + owner; translation excluded on purpose).
+    existedPhrase.value = await findSavedPhrase(props.phrase);
 
     if (!existedPhrase.value) {
       existingBundles.value = [];
diff --git a/src/console-crane/modules/word-detail/index.vue b/src/console-crane/modules/word-detail/index.vue
index 5ad37bc..429d9eb 100644
--- a/src/console-crane/modules/word-detail/index.vue
+++ b/src/console-crane/modules/word-detail/index.vue
@@ -244,6 +244,7 @@
 import { ref, computed, watch, inject, onMounted } from "vue";
 import { cleanText, firstUpper } from "../../../common/helper/text";
 import { TranslateService } from "../../../common/services/translate.service";
+import { findSavedPhrase } from "../../../common/services/phrase.service";
 import { Chunk, LanguageLearningData } from "./types";
 
 import { isLogin } from "../../../plugins/modular-rest";
@@ -314,7 +315,8 @@ const title = computed(() => {
 });
 
 const context = computed(() => {
-  return getProps().context || "";
+  // Prefer the stored source sentence (saved phrases) over the live selection.
+  return wordData.value?.context || getProps().context || "";
 });
 
 /**
@@ -491,13 +493,14 @@ function submitEditMessage() {
   runAdvice(message, history);
 }
 
-// Hide the context line when it's just a duplicate / superset of the selection itself.
+// Show the surrounding source sentence. Hide it only when it's empty or
+// identical to the selection itself (a sentence that contains the selection is
+// exactly what we want to show).
 const showContext = computed(() => {
-  const c = context.value.trim().toLowerCase();
-  const t = cleanText(getProps().word || "").trim().toLowerCase();
+  const c = context.value.trim();
+  const t = cleanText(getProps().word || "").trim();
   if (!c) return false;
-  if (!t) return true;
-  return c !== t && !c.includes(t.slice(0, Math.max(8, t.length - 4)));
+  return c.toLowerCase() !== t.toLowerCase();
 });
 
 // Scale title down for long phrases so a sentence-length selection doesn't dominate the modal.
@@ -531,7 +534,7 @@ watch(
  * Fetches detailed linguistic data for the word
  * Uses context if available
  */
-function fetchWordDetail() {
+async function fetchWordDetail() {
   pending.value = true;
   error.value = null;
   wordData.value = null;
@@ -540,21 +543,38 @@ function fetchWordDetail() {
   const cleaned = cleanText(props.word as string);
   const context = props.context || "";
 
-  TranslateService.instance
-    .fetchDetailedTranslation(cleaned, context)
-    .then((data) => {
-      wordData.value = data;
-    })
-    .catch((err) => {
-      console.error("Failed to fetch translation:", err);
-      const message =
-        err?.message ||
-        err?.body?.message ||
-        "We couldn't fetch the translation. Please try again.";
-      error.value = message;
-      analytic.track("word-detail-page_translation-error", { message });
-    })
-    .finally(() => (pending.value = false));
+  try {
+    // If the phrase is already saved, build the view from the stored document
+    // (translation + linguistic data + chunks) instead of spending an AI call.
+    const saved = (await findSavedPhrase(cleaned)) as any;
+    if (saved && saved.linguistic_data) {
+      wordData.value = {
+        phrase: saved.phrase,
+        context: saved.context || context,
+        direction: saved.direction,
+        translation: { phrase: saved.translation, context: "" },
+        language_info: saved.language_info,
+        linguistic_data: saved.linguistic_data,
+        chunks: saved.chunks || [],
+      } as LanguageLearningData;
+      return;
+    }
+
+    wordData.value = await TranslateService.instance.fetchDetailedTranslation(
+      cleaned,
+      context
+    );
+  } catch (err: any) {
+    console.error("Failed to fetch translation:", err);
+    const message =
+      err?.message ||
+      err?.body?.message ||
+      "We couldn't fetch the translation. Please try again.";
+    error.value = message;
+    analytic.track("word-detail-page_translation-error", { message });
+  } finally {
+    pending.value = false;
+  }
 }
 
 function retryFetch() {
diff --git a/src/nibble/components/SelectionPopup.vue b/src/nibble/components/SelectionPopup.vue
index 44dc0c4..78e4d25 100644
--- a/src/nibble/components/SelectionPopup.vue
+++ b/src/nibble/components/SelectionPopup.vue
@@ -26,14 +26,21 @@
       </div>
 
       <div class="nibble-card__footer">
-        <button type="button" class="nibble-save-btn" @click="onSaveClick" aria-label="View details and save"
-          title="Open details · Save phrase">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+        <button type="button" class="nibble-save-btn" @click="onSaveClick"
+          :aria-label="isAlreadySaved ? 'Open and learn this phrase' : 'View details and save'"
+          :title="isAlreadySaved ? 'Already saved · open to learn' : 'Open details · Save phrase'">
+          <svg v-if="!isAlreadySaved" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="nibble-save-btn__icon"
             aria-hidden="true">
             <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
           </svg>
-          <span>Save and Learn</span>
+          <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+            stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" class="nibble-save-btn__icon"
+            aria-hidden="true">
+            <path d="M12 7v14" />
+            <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
+          </svg>
+          <span>{{ isAlreadySaved ? "Learn" : "Save and Learn" }}</span>
         </button>
       </div>
     </div>
@@ -65,6 +72,7 @@
 import { computed, nextTick, ref, watch } from "vue";
 import { TranslateService } from "../../common/services/translate.service";
 import { emitOpen } from "../../common/services/console-crane-bridge";
+import { findSavedPhrase } from "../../common/services/phrase.service";
 
 const props = defineProps<{
   text: string;
@@ -81,6 +89,8 @@ type Mode = "icon" | "loading" | "translated" | "error";
 const mode = ref<Mode>("icon");
 const translation = ref<string>("");
 const cardRef = ref<HTMLElement | null>(null);
+// Whether this exact phrase is already saved by the user (drives Save vs Learn).
+const isAlreadySaved = ref(false);
 
 // Anchor where the user clicked the icon. Loading reuses this for the
 // 36px spinner; the card centers on iconCenter and `cardLeft`/`cardTop`
@@ -165,6 +175,7 @@ watch(
     if (newText !== oldText) {
       mode.value = "icon";
       translation.value = "";
+      isAlreadySaved.value = false;
       iconCenter.value = null;
       cardLeft.value = null;
       cardTop.value = null;
@@ -198,6 +209,18 @@ async function onIconClick(e: MouseEvent) {
   }
 
   mode.value = "loading";
+
+  // If the phrase is already saved, reuse the stored translation instead of
+  // spending an AI call — and surface it as "Learn" rather than "Save".
+  const saved = await findSavedPhrase(props.text);
+  isAlreadySaved.value = !!saved;
+  const savedTranslation = saved?.translation?.trim();
+  if (savedTranslation) {
+    translation.value = savedTranslation;
+    mode.value = "translated";
+    return;
+  }
+
   try {
     const result = await TranslateService.instance.fetchSimpleTranslation(
       props.text,

From 25499da35925bebeb854f20973c3ae39b4dbd6f2 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Fri, 22 May 2026 15:54:53 +0300
Subject: [PATCH 08/10] fix(save-modal): refetch bundle options so post-save
 chip shows title

When a bundle id is selected that isn't in the loaded options (just
created on save, or matched server-side), refetch so its title resolves
instead of rendering the raw id.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/SelectPhraseBundleV2.vue             | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/console-crane/components/SelectPhraseBundleV2.vue b/src/console-crane/components/SelectPhraseBundleV2.vue
index a8e2b4b..8a0d682 100644
--- a/src/console-crane/components/SelectPhraseBundleV2.vue
+++ b/src/console-crane/components/SelectPhraseBundleV2.vue
@@ -113,6 +113,19 @@ const showSuggestion = computed(
   () => !!props.suggestedName && (props.selectedBundles?.length || 0) === 0
 );
 
+// If a selected id isn't in the loaded options (e.g. a bundle just created on
+// save, or a server-matched bundle), refetch so its title resolves instead of
+// showing the raw id.
+watch(
+  () => props.selectedBundles,
+  (ids) => {
+    if (!ids?.length || isFetching.value) return;
+    const known = new Set(options.value.map((o) => o._id));
+    if (ids.some((id) => !known.has(id))) fetchOptions();
+  },
+  { deep: true }
+);
+
 /**
  * Resolve a selected entry to its bundle title. pilotui hands back the option
  * object when picked from the dropdown, but the raw value (id) when the value

From 224b9da79e8b9d2f094ae3f63b1f8524fcb78299 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sat, 23 May 2026 14:52:41 +0300
Subject: [PATCH 09/10] feat(console-crane): practice + flashcard-preview
 pages, near-translation actions

- Move "Practice with AI" (renamed from "Practice now") and "Preview flashcard"
  out of the save card up under the translation, where they're visible.
- Flashcard preview is now its own page that previews every card a phrase
  generates: a Recognition card (Levels 1-2) plus one Fill-in-the-blank card per
  confirmed chunk found in the sentence (Levels 3-5), each tagged with its levels.
- Show a back button on every sub-page (settings, practice-config,
  flashcard-preview), not just settings, via the store's isOnMainPage.
- Decouple the console-crane store from the router through a small registration
  holder (navigation.ts). The store imported the router, which reads page default
  exports at module-eval time, creating a circular init; the prior workaround used
  a dynamic import() that webpack split into a chunk that cannot load in a
  content-script context (wrong public path + page CSP). The holder breaks the
  cycle so everything stays in one bundle.
- Restyle the Definition section from a Fieldset legend to a card with the same
  inline uppercase label as the other sections.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/SaveWordSectionV2.vue          |  54 --------
 src/console-crane/index.vue                   |  11 +-
 .../modules/flashcard-preview/index.vue       | 126 ++++++++++++++++++
 .../modules/word-detail/index.vue             | 100 ++++++++++----
 src/console-crane/navigation.ts               |  25 ++++
 src/console-crane/router.ts                   |  11 ++
 src/console-crane/stores/console-crane.ts     |   6 +-
 src/console-crane/types.ts                    |   3 +-
 8 files changed, 240 insertions(+), 96 deletions(-)
 create mode 100644 src/console-crane/modules/flashcard-preview/index.vue
 create mode 100644 src/console-crane/navigation.ts

diff --git a/src/console-crane/components/SaveWordSectionV2.vue b/src/console-crane/components/SaveWordSectionV2.vue
index c304efa..32da0ec 100644
--- a/src/console-crane/components/SaveWordSectionV2.vue
+++ b/src/console-crane/components/SaveWordSectionV2.vue
@@ -27,23 +27,6 @@
         </Button>
       </div>
     </template>
-
-    <!-- Practice now + Preview flashcard -->
-    <div class="mt-2 flex items-center gap-2 flex-wrap">
-      <Button label="Practice now" size="sm" text @click="startPracticeNow">
-        <template #icon>
-          <i class="mr-2 i-solar-microphone-3-bold" />
-        </template>
-      </Button>
-      <Button v-if="previewSentence" :label="showPreview ? 'Hide preview' : 'Preview flashcard'" size="sm" text
-        @click="showPreview = !showPreview" />
-    </div>
-
-    <div v-if="showPreview && previewSentence"
-      class="mt-2 rounded-lg border border-gray-200 dark:border-white/[0.08] bg-gray-50 dark:bg-white/[0.02] p-3">
-      <p class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 mb-1.5">Preview · fill in the blank</p>
-      <p class="text-sm text-gray-900 dark:text-gray-100" :dir="direction?.source">{{ previewSentence }}</p>
-    </div>
   </div>
 </template>
 
@@ -100,9 +83,6 @@ const isSaving = ref(false);
 const suggestedName = ref("");
 const useSuggested = ref(false);
 
-// Preview flashcard.
-const showPreview = ref(false);
-
 const defaultBundleStore = useDefaultBundleStore();
 const profileStore = useProfileStore();
 
@@ -179,18 +159,6 @@ const freemiumSaveActive = computed(
 // button stays compact.
 const saveLabel = computed(() => "Save");
 
-// Build the L3+ style cloze preview by blanking the first chunk inside the context.
-const previewSentence = computed(() => {
-  const chunk = props.chunks?.[0]?.text?.trim();
-  const sentence = (props.context || "").trim();
-  if (!chunk || !sentence) return "";
-  const idx = sentence.toLowerCase().indexOf(chunk.toLowerCase());
-  if (idx === -1) return "";
-  return (
-    sentence.slice(0, idx) + "_____" + sentence.slice(idx + chunk.length)
-  );
-});
-
 const showFreemiumCounter = computed(
   () => !!(profileStore.isFreemium && profileStore.freemiumAllocation)
 );
@@ -210,7 +178,6 @@ watch(
     selectedBundles.value = [];
     useSuggested.value = false;
     suggestedName.value = "";
-    showPreview.value = false;
 
     await loadExistingBundles();
 
@@ -398,27 +365,6 @@ async function savePhrase() {
 function handleUpgrade() {
   window.open(getSubturtleDashboardUrlWithToken(), "_blank");
 }
-
-/**
- * Open the Practice now config page inside the console-crane modal.
- * The full config card ships in subtask 86exnxnw7; this navigates to its route.
- */
-async function startPracticeNow() {
-  analytic.track("practice-now_opened");
-  // Lazy import to avoid a circular dependency:
-  // SaveWordSectionV2 -> console-crane store -> router -> word-detail -> SaveWordSectionV2.
-  const { useConsoleCraneStore } = await import("../stores/console-crane");
-  useConsoleCraneStore().toggleConsoleCrane(
-    "practice-config",
-    {
-      phrase: props.phrase,
-      context: props.context || "",
-      chunks: props.chunks || [],
-      bundleId: selectedBundles.value[0] || null,
-    },
-    true
-  );
-}
 </script>
 
 <style scoped>
diff --git a/src/console-crane/index.vue b/src/console-crane/index.vue
index dc37d30..3b1b751 100644
--- a/src/console-crane/index.vue
+++ b/src/console-crane/index.vue
@@ -13,7 +13,7 @@ import { RouterView, useRouter } from "vue-router";
 import Modal from "./components/Modal.vue";
 import { getSubturtleDashboardUrlWithToken } from "../common/static/global";
 import { Button, IconButton, App } from "pilotui";
-import { watch, onMounted, onUnmounted, ref, computed } from "vue";
+import { watch, onMounted, onUnmounted, ref } from "vue";
 import { analytic } from "../plugins/mixpanel";
 
 const store = useConsoleCraneStore();
@@ -41,13 +41,6 @@ function openSettings() {
 const rootRef = ref<HTMLElement | null>(null);
 let cleanupThemeListener: (() => void) | undefined;
 
-const isOnSettingsPage = computed(() => {
-  return (
-    store.history.length > 0 &&
-    store.history[store.history.length - 1].name === "settings"
-  );
-});
-
 onMounted(() => {
   if (rootRef.value) {
     // cleanupThemeListener = useSystemTheme(rootRef.value);
@@ -66,7 +59,7 @@ onUnmounted(() => {
         <div class="flex flex-col" :style="{ width: width + 'px', height: height + 'px' }">
           <!-- Header: always visible -->
           <section class="flex items-center gap-2 px-6 py-3 border-b border-gray-100 dark:border-white/[0.08] shrink-0">
-            <template v-if="isOnSettingsPage">
+            <template v-if="!store.isOnMainPage">
               <IconButton size="sm" rounded="full" icon="i-mdi-arrow-left" @click="store.goBack" />
             </template>
             <template v-else>
diff --git a/src/console-crane/modules/flashcard-preview/index.vue b/src/console-crane/modules/flashcard-preview/index.vue
new file mode 100644
index 0000000..f438df7
--- /dev/null
+++ b/src/console-crane/modules/flashcard-preview/index.vue
@@ -0,0 +1,126 @@
+<template>
+  <!--
+    Flashcard preview page.
+    An isolated frame (reached from the save modal's "Preview flashcard" button)
+    that previews EVERY card this phrase generates across Leitner levels:
+      - Recognition card (Levels 1-2, shipped): phrase -> translation. Always present.
+      - Fill-in-the-blank / cloze card (Levels 3-5, proposed in PRFAQ-001 Phase 1):
+        the source sentence with a confirmed chunk blanked. One per confirmed
+        chunk found in the sentence; may be zero.
+  -->
+  <div class="flex flex-col min-h-full px-6 py-8 dark:bg-gray-950">
+    <div class="mb-5">
+      <div class="flex items-center gap-2">
+        <i class="i-mdi-cards-outline text-xl text-purple-500" />
+        <h1 class="text-base font-semibold text-gray-900 dark:text-gray-100">Flashcard preview</h1>
+      </div>
+      <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+        The cards this phrase generates across Leitner levels.
+      </p>
+    </div>
+
+    <div v-if="cards.length" class="flex flex-col gap-4">
+      <div v-for="(card, i) in cards" :key="i"
+        class="rounded-2xl border border-gray-200 dark:border-white/[0.08] bg-gray-50 dark:bg-white/[0.02] p-5 shadow-sm">
+        <!-- Card type + the Leitner levels it's used at -->
+        <div class="flex items-center justify-between gap-2 mb-3">
+          <span class="text-xs font-semibold text-gray-700 dark:text-gray-200">{{ card.title }}</span>
+          <span
+            class="text-[10px] uppercase tracking-wide font-semibold text-purple-600 dark:text-purple-300 bg-purple-100 dark:bg-purple-900/40 rounded-full px-2 py-0.5 shrink-0">
+            {{ card.levels }}
+          </span>
+        </div>
+
+        <!-- Front -->
+        <p class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 mb-1.5">
+          {{ card.kind === "cloze" ? "Fill in the blank" : "Front" }}
+        </p>
+        <p class="text-base leading-relaxed text-gray-900 dark:text-gray-100" :dir="data.direction?.source">
+          {{ card.front }}
+        </p>
+
+        <!-- Back -->
+        <div class="mt-4 pt-3 border-t border-dashed border-gray-200 dark:border-white/[0.08]">
+          <p class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 mb-1.5">Back</p>
+          <p v-if="card.answer" class="text-sm font-medium text-gray-900 dark:text-gray-100" :dir="data.direction?.source">
+            {{ card.answer }}
+          </p>
+          <p v-if="data.translation" class="text-sm text-purple-600 dark:text-purple-300 mt-0.5"
+            :dir="data.direction?.target">{{ data.translation }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="flex flex-col items-center justify-center flex-1 text-center text-gray-500 dark:text-gray-400">
+      <i class="i-mdi-cards-outline text-3xl mb-3 opacity-60" />
+      <p class="text-sm max-w-xs">No preview available for this selection yet.</p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { decodeRouteParams } from "../../route-params";
+import type { Chunk } from "../word-detail/types";
+
+interface PreviewData {
+  phrase?: string;
+  translation?: string;
+  context?: string;
+  chunks?: Chunk[];
+  direction?: { source: "ltr" | "rtl"; target: "ltr" | "rtl" };
+}
+
+interface PreviewCard {
+  kind: "recognition" | "cloze";
+  title: string;
+  /** Leitner levels this card type is reviewed at. */
+  levels: string;
+  /** Card front (prompt). */
+  front: string;
+  /** Revealed unit on the back (the blanked chunk, for cloze cards). */
+  answer?: string;
+}
+
+const route = useRoute();
+
+const data = computed<PreviewData>(
+  () => decodeRouteParams<PreviewData>(route.params.data as string) || {}
+);
+
+const cards = computed<PreviewCard[]>(() => {
+  const list: PreviewCard[] = [];
+  const phrase = data.value.phrase?.trim() || "";
+  const sentence = (data.value.context || "").trim();
+
+  // Recognition card — always available (Levels 1-2, shipped today).
+  if (phrase) {
+    list.push({
+      kind: "recognition",
+      title: "Recognition",
+      levels: "Levels 1–2",
+      front: phrase,
+    });
+  }
+
+  // Fill-in-the-blank cards — one per confirmed chunk found in the source
+  // sentence (Levels 3-5, proposed in PRFAQ-001 Phase 1). The first occurrence
+  // of each chunk is blanked.
+  for (const chunk of data.value.chunks || []) {
+    const unit = (chunk.text || "").trim();
+    if (!unit || !sentence) continue;
+    const idx = sentence.toLowerCase().indexOf(unit.toLowerCase());
+    if (idx === -1) continue;
+    list.push({
+      kind: "cloze",
+      title: "Fill in the blank",
+      levels: "Levels 3–5",
+      front: sentence.slice(0, idx) + "_____" + sentence.slice(idx + unit.length),
+      answer: unit,
+    });
+  }
+
+  return list;
+});
+</script>
diff --git a/src/console-crane/modules/word-detail/index.vue b/src/console-crane/modules/word-detail/index.vue
index 429d9eb..fce1222 100644
--- a/src/console-crane/modules/word-detail/index.vue
+++ b/src/console-crane/modules/word-detail/index.vue
@@ -142,6 +142,16 @@
         </div>
       </section>
 
+      <!-- Phrase actions, kept right under the translation so they're easy to spot -->
+      <div v-if="isLogin && wordData?.translation?.phrase" class="flex items-center gap-2 flex-wrap">
+        <Button label="Practice with AI" size="sm" text @click="startPracticeWithAI">
+          <template #icon>
+            <i class="mr-2 i-solar-microphone-3-bold" />
+          </template>
+        </Button>
+        <Button label="Preview flashcard" size="sm" text @click="openFlashcardPreview" />
+      </div>
+
       <!-- Error state with retry -->
       <div
         v-if="error && !pending"
@@ -168,36 +178,37 @@
 
       <!-- LINGUISTIC DATA SECTION - Shows detailed linguistic information -->
       <template v-if="wordData && wordData.linguistic_data">
-        <section class="w-full flex flex-col gap-3">
-          <!-- Definition card: per-chunk meaning + pronunciation, or the whole-phrase definition. -->
-          <Fieldset class="dark:bg-gray-900" legend="Definition">
-            <div
-              v-for="(entry, index) in definitionEntries"
-              :key="index"
-              class="mb-4 last:mb-3"
-            >
-              <div v-if="entry.label || entry.transliteration" class="flex items-baseline justify-between gap-4 mb-1">
-                <span v-if="entry.label" class="text-sm font-semibold text-gray-700 dark:text-gray-200" dir="ltr">
-                  {{ entry.label }}
-                </span>
-                <span v-else />
-                <span v-if="entry.transliteration" class="text-sm italic text-gray-500 dark:text-gray-400" :dir="wordData?.direction?.target">
-                  {{ entry.transliteration }}
-                </span>
-              </div>
-              <p v-if="entry.definition" class="text-base text-gray-900 dark:text-gray-100" :dir="wordData?.direction?.target">
-                {{ entry.definition }}
-              </p>
-            </div>
+        <section class="rounded-xl border border-gray-200 dark:border-white/[0.08] bg-white dark:bg-gray-900 px-6 py-5">
+          <p class="text-[10px] uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-400 mb-3">
+            Definition
+          </p>
 
-            <!-- Type and formality level -->
-            <div class="flex gap-2">
-              <IconButton v-if="wordData.linguistic_data.type" badge size="sm"
-                :label="wordData.linguistic_data.type.toUpperCase()" />
-              <IconButton v-if="wordData.linguistic_data.formality_level" badge size="sm"
-                :label="wordData.linguistic_data.formality_level.toUpperCase()" />
+          <div
+            v-for="(entry, index) in definitionEntries"
+            :key="index"
+            class="mb-4 last:mb-0"
+          >
+            <div v-if="entry.label || entry.transliteration" class="flex items-baseline justify-between gap-4 mb-1">
+              <span v-if="entry.label" class="text-sm font-semibold text-gray-700 dark:text-gray-200" dir="ltr">
+                {{ entry.label }}
+              </span>
+              <span v-else />
+              <span v-if="entry.transliteration" class="text-sm italic text-gray-500 dark:text-gray-400" :dir="wordData?.direction?.target">
+                {{ entry.transliteration }}
+              </span>
             </div>
-          </Fieldset>
+            <p v-if="entry.definition" class="text-base text-gray-900 dark:text-gray-100" :dir="wordData?.direction?.target">
+              {{ entry.definition }}
+            </p>
+          </div>
+
+          <!-- Type and formality level -->
+          <div class="flex gap-2 mt-4">
+            <IconButton v-if="wordData.linguistic_data.type" badge size="sm"
+              :label="wordData.linguistic_data.type.toUpperCase()" />
+            <IconButton v-if="wordData.linguistic_data.formality_level" badge size="sm"
+              :label="wordData.linguistic_data.formality_level.toUpperCase()" />
+          </div>
         </section>
       </template>
 
@@ -249,9 +260,10 @@ import { Chunk, LanguageLearningData } from "./types";
 
 import { isLogin } from "../../../plugins/modular-rest";
 import SaveWordSectionV2 from "../../components/SaveWordSectionV2.vue";
+import { useConsoleCraneStore } from "../../stores/console-crane";
 
-import Fieldset from "../../../common/components/Fieldset.vue";
 import { IconButton } from "pilotui/elements";
+import { Button } from "pilotui";
 
 import { useRoute } from "vue-router";
 import { sendMessage } from "../../../common/helper/massage";
@@ -319,6 +331,36 @@ const context = computed(() => {
   return wordData.value?.context || getProps().context || "";
 });
 
+/** Open the AI practice config page for this phrase. */
+function startPracticeWithAI() {
+  analytic.track("practice-now_opened");
+  useConsoleCraneStore().toggleConsoleCrane(
+    "practice-config",
+    {
+      phrase: cleanText(getProps().word || ""),
+      context: context.value,
+      chunks: wordData.value?.chunks || [],
+    },
+    true
+  );
+}
+
+/** Open the flashcard cloze preview page for this phrase. */
+function openFlashcardPreview() {
+  analytic.track("flashcard-preview_opened");
+  useConsoleCraneStore().toggleConsoleCrane(
+    "flashcard-preview",
+    {
+      phrase: cleanText(getProps().word || ""),
+      translation: cleanText(wordData.value?.translation?.phrase || ""),
+      context: context.value,
+      chunks: wordData.value?.chunks || [],
+      direction: wordData.value?.direction,
+    },
+    true
+  );
+}
+
 /**
  * Entries for the Definition fieldset. Each entry pairs a label (chunk text)
  * with its pronunciation and meaning. When chunks exist, one entry per chunk;
diff --git a/src/console-crane/navigation.ts b/src/console-crane/navigation.ts
new file mode 100644
index 0000000..c869dc9
--- /dev/null
+++ b/src/console-crane/navigation.ts
@@ -0,0 +1,25 @@
+import type { Router } from "vue-router";
+
+// Decouples the console-crane store from the router singleton.
+//
+// The store needs `router.push` at call-time, but statically importing
+// `./router` drags the page components into a circular ESM init:
+//   store -> router -> word-detail -> SaveWordSectionV2 -> store
+// router.ts reads each route's `component` default export at module-eval time,
+// so when that chain runs while a page is still initialising it TDZ-crashes
+// ("Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization").
+//
+// Routing through this leaf module (it imports only a type, erased at compile)
+// breaks the cycle without code-splitting: router.ts registers the instance
+// here at bootstrap, and the store reads it lazily. Avoid `import("./router")`
+// for this — a dynamic import becomes a separate webpack chunk that cannot be
+// fetched from a content-script context (wrong public path + page CSP).
+let _router: Router | null = null;
+
+export function setConsoleCraneRouter(router: Router): void {
+  _router = router;
+}
+
+export function getConsoleCraneRouter(): Router | null {
+  return _router;
+}
diff --git a/src/console-crane/router.ts b/src/console-crane/router.ts
index dd0a1ae..1cbe563 100644
--- a/src/console-crane/router.ts
+++ b/src/console-crane/router.ts
@@ -4,6 +4,8 @@ import WordDetailPage from "./modules/word-detail/index.vue";
 import SettingsPage from "./modules/settings/index.vue";
 import EmptyPage from "./modules/empty/index.vue";
 import PracticeConfigPage from "./modules/practice-config/index.vue";
+import FlashcardPreviewPage from "./modules/flashcard-preview/index.vue";
+import { setConsoleCraneRouter } from "./navigation";
 
 const routes: RouteRecordRaw[] = [
   {
@@ -26,9 +28,18 @@ const routes: RouteRecordRaw[] = [
     name: "practice-config",
     component: PracticeConfigPage,
   },
+  {
+    path: "/flashcard-preview/:data",
+    name: "flashcard-preview",
+    component: FlashcardPreviewPage,
+  },
 ];
 
 export const router = createRouter({
   history: createMemoryHistory(),
   routes: routes,
 });
+
+// Register the instance so the store can navigate without importing this module
+// (which would re-introduce the circular init). See ./navigation.
+setConsoleCraneRouter(router);
diff --git a/src/console-crane/stores/console-crane.ts b/src/console-crane/stores/console-crane.ts
index e0ae10b..3cec86b 100644
--- a/src/console-crane/stores/console-crane.ts
+++ b/src/console-crane/stores/console-crane.ts
@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { ref, computed } from "vue";
 import { ConsolePage } from "../types";
 
-import { router } from "../router";
+import { getConsoleCraneRouter } from "../navigation";
 import { encodeRouteParams } from "../route-params";
 
 interface PageEntry {
@@ -37,7 +37,7 @@ export const useConsoleCraneStore = defineStore("console-crane", () => {
     ) {
       history.value.push({ name: page, params });
     }
-    router.push({
+    getConsoleCraneRouter()?.push({
       name: page,
       params: { data: encodeRouteParams(params) },
     });
@@ -47,7 +47,7 @@ export const useConsoleCraneStore = defineStore("console-crane", () => {
     if (history.value.length > 1) {
       history.value.pop(); // Remove current
       const prev = history.value[history.value.length - 1];
-      router.push({
+      getConsoleCraneRouter()?.push({
         name: prev.name,
         params: { data: encodeRouteParams(prev.params) },
       });
diff --git a/src/console-crane/types.ts b/src/console-crane/types.ts
index 0710bb2..31d8372 100644
--- a/src/console-crane/types.ts
+++ b/src/console-crane/types.ts
@@ -2,4 +2,5 @@ export type ConsolePage =
   | "empty"
   | "word-detail"
   | "settings"
-  | "practice-config";
+  | "practice-config"
+  | "flashcard-preview";

From e50457079ead797871389db9cee6f40636a82555 Mon Sep 17 00:00:00 2001
From: Navid Shad <navidshad72@gmail.com>
Date: Sun, 24 May 2026 13:36:56 +0300
Subject: [PATCH 10/10] test(console-crane): cover flashcard preview,
 word-detail actions, navigation

- Extract the flashcard card-building out of the SFC into a pure
  flashcard-preview/cards.ts (buildPreviewCards) so it's unit-testable, and have
  the page consume it.
- Unit-test buildPreviewCards: recognition card always present, one cloze card
  per confirmed chunk found in the sentence, case-insensitive/first-occurrence
  blanking, and the skip cases (no chunk match, no sentence, empty chunk text).
- Component-test the flashcard-preview page (recognition-only, recognition +
  cloze, empty state) and word-detail (Definition renders as a card without the
  Fieldset legend; the action buttons show when logged in and hide when logged
  out; "Practice with AI" and "Preview flashcard" navigate via toggleConsoleCrane
  with the right route and params).
- Add navigation-holder tests (null before register, returns/replaces the
  router) and repoint the existing console-crane-store test's mock from the
  router module to the navigation holder, matching the store decoupling.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../modules/flashcard-preview/cards.ts        |  61 ++++++
 .../modules/flashcard-preview/index.vue       |  56 +----
 tests/console-crane-navigation.test.ts        |  35 ++++
 tests/console-crane-store.test.ts             |  23 ++-
 tests/flashcard-preview-cards.test.ts         | 111 ++++++++++
 tests/flashcard-preview.test.ts               |  62 ++++++
 tests/word-detail.test.ts                     | 193 ++++++++++++++++++
 7 files changed, 482 insertions(+), 59 deletions(-)
 create mode 100644 src/console-crane/modules/flashcard-preview/cards.ts
 create mode 100644 tests/console-crane-navigation.test.ts
 create mode 100644 tests/flashcard-preview-cards.test.ts
 create mode 100644 tests/flashcard-preview.test.ts
 create mode 100644 tests/word-detail.test.ts

diff --git a/src/console-crane/modules/flashcard-preview/cards.ts b/src/console-crane/modules/flashcard-preview/cards.ts
new file mode 100644
index 0000000..e5325f7
--- /dev/null
+++ b/src/console-crane/modules/flashcard-preview/cards.ts
@@ -0,0 +1,61 @@
+import type { Chunk } from "../word-detail/types";
+
+export interface PreviewData {
+  phrase?: string;
+  translation?: string;
+  context?: string;
+  chunks?: Chunk[];
+  direction?: { source: "ltr" | "rtl"; target: "ltr" | "rtl" };
+}
+
+export interface PreviewCard {
+  kind: "recognition" | "cloze";
+  title: string;
+  /** Leitner levels this card type is reviewed at. */
+  levels: string;
+  /** Card front (the prompt shown first). */
+  front: string;
+  /** Revealed unit on the back — the blanked chunk, for cloze cards. */
+  answer?: string;
+}
+
+/**
+ * Every flashcard a phrase generates:
+ *   - one Recognition card (Levels 1-2, shipped) whenever there's a phrase;
+ *   - one Fill-in-the-blank card (Levels 3-5, proposed in PRFAQ-001 Phase 1) per
+ *     confirmed chunk whose text appears in the source sentence, with the first
+ *     occurrence blanked.
+ *
+ * The recognition card guarantees at least one card; cloze cards are additive
+ * and strictly tied to confirmed chunks.
+ */
+export function buildPreviewCards(data: PreviewData): PreviewCard[] {
+  const cards: PreviewCard[] = [];
+  const phrase = data.phrase?.trim() || "";
+  const sentence = (data.context || "").trim();
+
+  if (phrase) {
+    cards.push({
+      kind: "recognition",
+      title: "Recognition",
+      levels: "Levels 1–2",
+      front: phrase,
+    });
+  }
+
+  for (const chunk of data.chunks || []) {
+    const unit = (chunk.text || "").trim();
+    if (!unit || !sentence) continue;
+    const idx = sentence.toLowerCase().indexOf(unit.toLowerCase());
+    if (idx === -1) continue;
+    cards.push({
+      kind: "cloze",
+      title: "Fill in the blank",
+      levels: "Levels 3–5",
+      front: sentence.slice(0, idx) + "_____" + sentence.slice(idx + unit.length),
+      answer: unit,
+    });
+  }
+
+  return cards;
+}
diff --git a/src/console-crane/modules/flashcard-preview/index.vue b/src/console-crane/modules/flashcard-preview/index.vue
index f438df7..1d94791 100644
--- a/src/console-crane/modules/flashcard-preview/index.vue
+++ b/src/console-crane/modules/flashcard-preview/index.vue
@@ -62,26 +62,7 @@
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 import { decodeRouteParams } from "../../route-params";
-import type { Chunk } from "../word-detail/types";
-
-interface PreviewData {
-  phrase?: string;
-  translation?: string;
-  context?: string;
-  chunks?: Chunk[];
-  direction?: { source: "ltr" | "rtl"; target: "ltr" | "rtl" };
-}
-
-interface PreviewCard {
-  kind: "recognition" | "cloze";
-  title: string;
-  /** Leitner levels this card type is reviewed at. */
-  levels: string;
-  /** Card front (prompt). */
-  front: string;
-  /** Revealed unit on the back (the blanked chunk, for cloze cards). */
-  answer?: string;
-}
+import { buildPreviewCards, type PreviewData } from "./cards";
 
 const route = useRoute();
 
@@ -89,38 +70,5 @@ const data = computed<PreviewData>(
   () => decodeRouteParams<PreviewData>(route.params.data as string) || {}
 );
 
-const cards = computed<PreviewCard[]>(() => {
-  const list: PreviewCard[] = [];
-  const phrase = data.value.phrase?.trim() || "";
-  const sentence = (data.value.context || "").trim();
-
-  // Recognition card — always available (Levels 1-2, shipped today).
-  if (phrase) {
-    list.push({
-      kind: "recognition",
-      title: "Recognition",
-      levels: "Levels 1–2",
-      front: phrase,
-    });
-  }
-
-  // Fill-in-the-blank cards — one per confirmed chunk found in the source
-  // sentence (Levels 3-5, proposed in PRFAQ-001 Phase 1). The first occurrence
-  // of each chunk is blanked.
-  for (const chunk of data.value.chunks || []) {
-    const unit = (chunk.text || "").trim();
-    if (!unit || !sentence) continue;
-    const idx = sentence.toLowerCase().indexOf(unit.toLowerCase());
-    if (idx === -1) continue;
-    list.push({
-      kind: "cloze",
-      title: "Fill in the blank",
-      levels: "Levels 3–5",
-      front: sentence.slice(0, idx) + "_____" + sentence.slice(idx + unit.length),
-      answer: unit,
-    });
-  }
-
-  return list;
-});
+const cards = computed(() => buildPreviewCards(data.value));
 </script>
diff --git a/tests/console-crane-navigation.test.ts b/tests/console-crane-navigation.test.ts
new file mode 100644
index 0000000..626fef6
--- /dev/null
+++ b/tests/console-crane-navigation.test.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import type { Router } from "vue-router";
+
+// The holder keeps module-level state, so reset modules between tests to get a
+// fresh, unregistered instance each time.
+beforeEach(() => {
+  vi.resetModules();
+});
+
+const fakeRouter = () => ({ push: vi.fn() }) as unknown as Router;
+
+describe("console-crane navigation holder", () => {
+  it("returns null before a router is registered", async () => {
+    const { getConsoleCraneRouter } = await import(
+      "../src/console-crane/navigation"
+    );
+    expect(getConsoleCraneRouter()).toBeNull();
+  });
+
+  it("returns the registered router after setConsoleCraneRouter", async () => {
+    const nav = await import("../src/console-crane/navigation");
+    const router = fakeRouter();
+    nav.setConsoleCraneRouter(router);
+    expect(nav.getConsoleCraneRouter()).toBe(router);
+  });
+
+  it("replaces a previously registered router", async () => {
+    const nav = await import("../src/console-crane/navigation");
+    const first = fakeRouter();
+    const second = fakeRouter();
+    nav.setConsoleCraneRouter(first);
+    nav.setConsoleCraneRouter(second);
+    expect(nav.getConsoleCraneRouter()).toBe(second);
+  });
+});
diff --git a/tests/console-crane-store.test.ts b/tests/console-crane-store.test.ts
index d600f4c..d8a3e5e 100644
--- a/tests/console-crane-store.test.ts
+++ b/tests/console-crane-store.test.ts
@@ -1,12 +1,15 @@
 import { describe, it, expect, beforeEach, vi } from "vitest";
 import { setActivePinia, createPinia } from "pinia";
 
-// Mock the router so the test doesn't pull in the real page components and
-// their service dependencies. We capture every router.push() call to assert
-// the encoded params and route name.
+// The store reaches the router lazily through the navigation holder
+// (src/console-crane/navigation.ts) rather than importing it directly, which
+// avoids a circular ESM init. Mock the holder so the test doesn't pull in the
+// real page components, and capture every push() call to assert the encoded
+// params and route name.
 const { mockPush } = vi.hoisted(() => ({ mockPush: vi.fn() }));
-vi.mock("../src/console-crane/router", () => ({
-  router: { push: mockPush },
+vi.mock("../src/console-crane/navigation", () => ({
+  getConsoleCraneRouter: () => ({ push: mockPush }),
+  setConsoleCraneRouter: vi.fn(),
 }));
 
 import { useConsoleCraneStore } from "../src/console-crane/stores/console-crane";
@@ -127,6 +130,16 @@ describe("useConsoleCraneStore", () => {
       store.toggleConsoleCrane("settings", undefined, true);
       expect(store.isOnMainPage).toBe(false);
     });
+
+    it("isOnMainPage is false on the practice-config and flashcard-preview sub-pages", () => {
+      const store = useConsoleCraneStore();
+
+      store.toggleConsoleCrane("practice-config", { phrase: "x" }, true);
+      expect(store.isOnMainPage).toBe(false);
+
+      store.toggleConsoleCrane("flashcard-preview", { phrase: "x" }, true);
+      expect(store.isOnMainPage).toBe(false);
+    });
   });
 
   it("resetHistory clears the stack", () => {
diff --git a/tests/flashcard-preview-cards.test.ts b/tests/flashcard-preview-cards.test.ts
new file mode 100644
index 0000000..196b32b
--- /dev/null
+++ b/tests/flashcard-preview-cards.test.ts
@@ -0,0 +1,111 @@
+import { describe, it, expect } from "vitest";
+import {
+  buildPreviewCards,
+  type PreviewData,
+} from "../src/console-crane/modules/flashcard-preview/cards";
+import type { Chunk } from "../src/console-crane/modules/word-detail/types";
+
+function chunk(text: string, extra: Partial<Chunk> = {}): Chunk {
+  return { text, type: "collocation", confidence: 0.9, ...extra };
+}
+
+describe("buildPreviewCards", () => {
+  describe("recognition card", () => {
+    it("is always produced when a phrase is present", () => {
+      const cards = buildPreviewCards({
+        phrase: "Kinsta Plan",
+        translation: "پلن کینستا",
+      });
+      expect(cards).toHaveLength(1);
+      expect(cards[0].kind).toBe("recognition");
+      expect(cards[0].front).toBe("Kinsta Plan");
+      expect(cards[0].levels).toMatch(/^Levels 1[–-]2$/);
+      expect(cards[0].answer).toBeUndefined();
+    });
+
+    it("trims the phrase", () => {
+      const [card] = buildPreviewCards({ phrase: "  hello  " });
+      expect(card.front).toBe("hello");
+    });
+
+    it("produces no cards when there is no phrase and no usable chunks", () => {
+      expect(buildPreviewCards({})).toEqual([]);
+      expect(buildPreviewCards({ phrase: "   " })).toEqual([]);
+    });
+  });
+
+  describe("fill-in-the-blank (cloze) cards", () => {
+    const base: PreviewData = {
+      phrase: "Kinsta Plan",
+      translation: "پلن کینستا",
+      context: "A Kinsta Plan Includes More",
+    };
+
+    it("adds a cloze card per confirmed chunk found in the sentence", () => {
+      const cards = buildPreviewCards({ ...base, chunks: [chunk("Kinsta Plan")] });
+      expect(cards).toHaveLength(2);
+      expect(cards[0].kind).toBe("recognition");
+
+      const cloze = cards[1];
+      expect(cloze.kind).toBe("cloze");
+      expect(cloze.front).toBe("A _____ Includes More");
+      expect(cloze.answer).toBe("Kinsta Plan");
+      expect(cloze.levels).toMatch(/^Levels 3[–-]5$/);
+    });
+
+    it("matches case-insensitively but blanks the original-cased span", () => {
+      const cards = buildPreviewCards({
+        phrase: "Plans are turbocharged",
+        context: "Plans are Turbocharged with extras",
+        chunks: [chunk("turbocharged")],
+      });
+      const cloze = cards.find((c) => c.kind === "cloze")!;
+      expect(cloze.front).toBe("Plans are _____ with extras");
+      expect(cloze.answer).toBe("turbocharged");
+    });
+
+    it("blanks only the first occurrence of the chunk", () => {
+      const cards = buildPreviewCards({
+        phrase: "go",
+        context: "go and go again",
+        chunks: [chunk("go")],
+      });
+      const cloze = cards.find((c) => c.kind === "cloze")!;
+      expect(cloze.front).toBe("_____ and go again");
+    });
+
+    it("skips a chunk whose text is absent from the sentence", () => {
+      const cards = buildPreviewCards({ ...base, chunks: [chunk("nonexistent")] });
+      expect(cards).toHaveLength(1);
+      expect(cards[0].kind).toBe("recognition");
+    });
+
+    it("produces no cloze cards when there is no source sentence", () => {
+      const cards = buildPreviewCards({
+        phrase: "Kinsta Plan",
+        context: "",
+        chunks: [chunk("Kinsta Plan")],
+      });
+      expect(cards).toHaveLength(1);
+      expect(cards[0].kind).toBe("recognition");
+    });
+
+    it("skips chunks with empty or whitespace text", () => {
+      const cards = buildPreviewCards({ ...base, chunks: [chunk("   "), chunk("")] });
+      expect(cards).toHaveLength(1);
+    });
+
+    it("emits one cloze per found chunk, recognition first, each blanked in the full sentence", () => {
+      const cards = buildPreviewCards({
+        phrase: "turbocharged with plenty of",
+        context: "Plans are turbocharged with plenty of resources",
+        chunks: [chunk("turbocharged with"), chunk("plenty of")],
+      });
+      expect(cards.map((c) => c.kind)).toEqual(["recognition", "cloze", "cloze"]);
+      expect(cards[1].front).toBe("Plans are _____ plenty of resources");
+      expect(cards[1].answer).toBe("turbocharged with");
+      expect(cards[2].front).toBe("Plans are turbocharged with _____ resources");
+      expect(cards[2].answer).toBe("plenty of");
+    });
+  });
+});
diff --git a/tests/flashcard-preview.test.ts b/tests/flashcard-preview.test.ts
new file mode 100644
index 0000000..2b0decb
--- /dev/null
+++ b/tests/flashcard-preview.test.ts
@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import { encodeRouteParams } from "../src/console-crane/route-params";
+
+// The page reads its payload from the route's :data param. Drive that via a
+// hoisted holder the mock reads, set fresh before each mount.
+const { routeHolder } = vi.hoisted(() => ({ routeHolder: { data: "" } }));
+vi.mock("vue-router", () => ({
+  useRoute: () => ({ params: { data: routeHolder.data } }),
+}));
+
+import FlashcardPreview from "../src/console-crane/modules/flashcard-preview/index.vue";
+
+function mountWith(payload: Record<string, unknown>) {
+  routeHolder.data = encodeRouteParams(payload);
+  return mount(FlashcardPreview);
+}
+
+describe("FlashcardPreview page", () => {
+  it("renders the header and subtitle", () => {
+    const w = mountWith({ phrase: "Kinsta Plan", translation: "پلن کینستا" });
+    expect(w.text()).toContain("Flashcard preview");
+    expect(w.text()).toContain("across Leitner levels");
+    w.unmount();
+  });
+
+  it("shows a single Recognition card for a phrase with no chunks", () => {
+    const w = mountWith({
+      phrase: "Kinsta Plan",
+      translation: "پلن کینستا",
+      context: "A Kinsta Plan Includes More",
+    });
+    expect(w.text()).toContain("Recognition");
+    expect(w.text()).toContain("Levels 1");
+    expect(w.text()).toContain("Kinsta Plan");
+    expect(w.text()).toContain("پلن کینستا");
+    expect(w.text()).not.toContain("Fill in the blank");
+    w.unmount();
+  });
+
+  it("shows Recognition + Fill-in-the-blank when a confirmed chunk is present", () => {
+    const w = mountWith({
+      phrase: "turbocharged with",
+      translation: "تقویت شده",
+      context: "Plans are turbocharged with extras",
+      direction: { source: "ltr", target: "rtl" },
+      chunks: [{ text: "turbocharged with", type: "collocation", confidence: 0.9 }],
+    });
+    expect(w.text()).toContain("Recognition");
+    expect(w.text()).toContain("Fill in the blank");
+    expect(w.text()).toContain("Levels 3");
+    // The cloze front blanks the chunk inside the sentence.
+    expect(w.text()).toContain("Plans are _____ extras");
+    w.unmount();
+  });
+
+  it("shows the empty state when there is nothing to preview", () => {
+    const w = mountWith({});
+    expect(w.text()).toContain("No preview available");
+    w.unmount();
+  });
+});
diff --git a/tests/word-detail.test.ts b/tests/word-detail.test.ts
new file mode 100644
index 0000000..6a2a9ad
--- /dev/null
+++ b/tests/word-detail.test.ts
@@ -0,0 +1,193 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { createTestingPinia } from "@pinia/testing";
+import { defineComponent } from "vue";
+
+// --- Mocks (declared before importing the SFC under test) ---
+
+// The save card pulls in modular-rest, services and stores we don't exercise
+// here — stub it to a marker element.
+vi.mock("../src/console-crane/components/SaveWordSectionV2.vue", () => ({
+  default: defineComponent({
+    name: "SaveWordSectionV2",
+    template: '<div class="save-stub" />',
+  }),
+}));
+
+// We drive the component through its word/context props (the popup path), so a
+// benign useRoute stub is enough.
+vi.mock("vue-router", () => ({ useRoute: () => ({ params: {} }) }));
+
+// Pilotui buttons → minimal stubs that surface their label and re-emit click.
+vi.mock("pilotui", () => ({
+  Button: defineComponent({
+    name: "PilotButton",
+    props: { label: { type: String, default: "" } },
+    emits: ["click"],
+    template:
+      '<button class="pilot-btn" @click="$emit(\'click\')">{{ label }}<slot name="icon" /></button>',
+  }),
+}));
+vi.mock("pilotui/elements", () => ({
+  IconButton: defineComponent({
+    name: "PilotIconButton",
+    props: { label: { type: String, default: "" } },
+    template: '<span class="pilot-iconbtn">{{ label }}</span>',
+  }),
+}));
+
+// Login state — a ref we flip per test.
+vi.mock("../src/plugins/modular-rest", async () => {
+  const { ref } = await import("vue");
+  return { isLogin: ref(true) };
+});
+
+// Translation + saved-phrase lookups.
+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 { isLogin } from "../src/plugins/modular-rest";
+import { useConsoleCraneStore } from "../src/console-crane/stores/console-crane";
+
+const fetchDetailed = vi.mocked(TranslateService.instance.fetchDetailedTranslation);
+const findSaved = vi.mocked(findSavedPhrase);
+
+const WORD_DATA = {
+  phrase: "Kinsta Plan",
+  context: "A Kinsta Plan Includes More",
+  direction: { source: "ltr", target: "rtl" },
+  translation: { phrase: "پلن کینستا", context: "" },
+  language_info: { source: "en", target: "fa" },
+  linguistic_data: {
+    isValid: true,
+    type: "noun_phrase",
+    definition: "A service package from Kinsta.",
+    phonetic: { transliteration: "کینستا پلن" },
+    formality_level: "neutral",
+  },
+  chunks: [],
+};
+
+function mountWordDetail(props: { word: string; context?: string }) {
+  const pinia = createTestingPinia({ createSpy: vi.fn });
+  const wrapper = mount(WordDetail, {
+    props,
+    global: {
+      plugins: [pinia],
+      // The component injects the parent modal's frame size; supply a stub.
+      provide: { frameSize: { width: 400, height: 600 } },
+    },
+  });
+  const store = useConsoleCraneStore(pinia);
+  return { wrapper, store };
+}
+
+function buttonLabels(wrapper: ReturnType<typeof mount>) {
+  return wrapper.findAll(".pilot-btn").map((b) => b.text());
+}
+
+describe("WordDetail page", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (isLogin as unknown as { value: boolean }).value = true;
+    findSaved.mockResolvedValue(null);
+    fetchDetailed.mockResolvedValue(WORD_DATA as any);
+  });
+
+  it("renders the Definition as a labelled card (no Fieldset legend)", async () => {
+    const { wrapper } = mountWordDetail({
+      word: "Kinsta Plan",
+      context: "A Kinsta Plan Includes More",
+    });
+    await flushPromises();
+
+    expect(wrapper.text()).toContain("Definition");
+    expect(wrapper.text()).toContain("A service package from Kinsta.");
+    // The old Fieldset rendered its legend as an <h3>; the card uses a <p>.
+    expect(wrapper.find("h3").exists()).toBe(false);
+    wrapper.unmount();
+  });
+
+  it("shows the action buttons under the translation when logged in", async () => {
+    const { wrapper } = mountWordDetail({ word: "Kinsta Plan" });
+    await flushPromises();
+
+    const labels = buttonLabels(wrapper).join("|");
+    expect(labels).toContain("Practice with AI");
+    expect(labels).toContain("Preview flashcard");
+    wrapper.unmount();
+  });
+
+  it("hides the action buttons when logged out", async () => {
+    (isLogin as unknown as { value: boolean }).value = false;
+    const { wrapper } = mountWordDetail({ word: "Kinsta Plan" });
+    await flushPromises();
+
+    expect(buttonLabels(wrapper).join("|")).not.toContain("Practice with AI");
+    wrapper.unmount();
+  });
+
+  it("navigates to practice-config with the phrase on 'Practice with AI'", async () => {
+    const { wrapper, store } = mountWordDetail({
+      word: "Kinsta Plan",
+      context: "A Kinsta Plan Includes More",
+    });
+    await flushPromises();
+
+    const btn = wrapper
+      .findAll(".pilot-btn")
+      .find((b) => b.text().includes("Practice with AI"))!;
+    await btn.trigger("click");
+
+    expect(store.toggleConsoleCrane).toHaveBeenCalledWith(
+      "practice-config",
+      expect.objectContaining({
+        phrase: "Kinsta Plan",
+        context: "A Kinsta Plan Includes More",
+        chunks: [],
+      }),
+      true
+    );
+    wrapper.unmount();
+  });
+
+  it("navigates to flashcard-preview with phrase + translation on 'Preview flashcard'", async () => {
+    const { wrapper, store } = mountWordDetail({
+      word: "Kinsta Plan",
+      context: "A Kinsta Plan Includes More",
+    });
+    await flushPromises();
+
+    const btn = wrapper
+      .findAll(".pilot-btn")
+      .find((b) => b.text().includes("Preview flashcard"))!;
+    await btn.trigger("click");
+
+    expect(store.toggleConsoleCrane).toHaveBeenCalledWith(
+      "flashcard-preview",
+      expect.objectContaining({
+        phrase: "Kinsta Plan",
+        translation: "پلن کینستا",
+        context: "A Kinsta Plan Includes More",
+        chunks: [],
+        direction: { source: "ltr", target: "rtl" },
+      }),
+      true
+    );
+    wrapper.unmount();
+  });
+});