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/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/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/common/services/translate.service.ts b/src/common/services/translate.service.ts
index 426fc27..96c8027 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";
 
@@ -171,6 +175,7 @@ export class TranslateService {
       // 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 +188,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..32da0ec 100644
--- a/src/console-crane/components/SaveWordSectionV2.vue
+++ b/src/console-crane/components/SaveWordSectionV2.vue
@@ -4,16 +4,11 @@
       :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"
-          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">
+          :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="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>
@@ -23,35 +18,22 @@
     <template v-else>
       <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"
-          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">
+          :suggested-name="useSuggested ? suggestedName : ''" @update:suggested-name="suggestedName = $event" />
+        <Button :label="saveLabel" size="lg" @click="savePhrase" :disabled="!canSave || isSaving" :is-loading="isSaving"
+          :class="plainSaveActive ? ACTIVE_SAVE_CLASS : DISABLED_SAVE_CLASS">
           <template #icon>
             <i class="mr-4 i-ep-collection" />
           </template>
         </Button>
       </div>
     </template>
-    <!-- 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,
@@ -68,6 +50,9 @@ import { useDefaultBundleStore } from "../../stores/default-bundle";
 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<{
   phrase: string;
@@ -82,19 +67,98 @@ const props = defineProps<{
     target: string;
   };
   linguistic_data?: any;
+  chunks?: Chunk[];
 }>();
 
 const selectBundleRef = ref();
 const selectedBundles = ref<string[]>([]);
 const existingBundles = ref<PhraseBundleType[]>([]);
 const existedPhrase = ref<PhraseType | null>(null);
+// 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 defaultBundleStore = useDefaultBundleStore();
 const profileStore = useProfileStore();
 
+// When the user picks a real bundle, drop the suggestion.
+watch(selectedBundles, (val) => {
+  if (val.length) useSuggested.value = false;
+});
+
+// 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 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;
+  }
+});
+
+// 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");
+
 const showFreemiumCounter = computed(
   () => !!(profileStore.isFreemium && profileStore.freemiumAllocation)
 );
@@ -112,141 +176,182 @@ watch(
   () => [props.phrase, props.translation],
   async () => {
     selectedBundles.value = [];
+    useSuggested.value = false;
+    suggestedName.value = "";
+
     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;
+
+    // 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 (suggestion.suggestedName) {
+      suggestedName.value = suggestion.suggestedName;
+      useSuggested.value = true;
+      return;
+    }
+
+    // 3. Last-used bundles (existing behaviour).
+    selectedBundles.value = defaultBundleStore.getDefaultBundles();
   },
   { immediate: true, deep: true }
 );
 
-onMounted(() => {
-  loadExistingBundles();
-});
-
-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
-    existedPhrase.value = await dataProvider
-      .findOne({
-        database: DATABASE.USER_CONTENT,
-        collection: COLLECTIONS.PHRASE,
-        query: {
-          refId: authentication.user?.id,
-          phrase: props.phrase.trim(),
-          translation: props.translation.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 = [];
-      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;
+  }
+}
+
+/** Find an existing bundle of the user with this exact title, or null. */
+async function findBundleByTitle(title: string): Promise<string | null> {
+  try {
+    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;
   }
 }
 
-async function removePhraseFromBundle(bundleId: string) {
-  if (!existedPhrase.value || isRemoving.value) return;
+/**
+ * Resolve the bundle ids to save into. When the user kept the suggested bundle,
+ * 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;
 
-  isRemoving.value = true;
+  if (useSuggested.value && suggestedName.value.trim()) {
+    const title = suggestedName.value.trim();
 
-  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");
-      });
+    // Reuse an existing same-named bundle (avoids E11000 duplicate key).
+    const existingId = await findBundleByTitle(title);
+    if (existingId) return [existingId];
 
-    // 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;
+    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 (!selectedBundles.value.length) return;
-
+  if (!canSave.value || isSaving.value) return;
   isSaving.value = true;
 
   try {
-    // Use the enhanced server function with linguistic type
-    const result = await functionProvider
+    // 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;
+    }
+
+    existedPhrase.value = await functionProvider
       .run<PhraseType>({
         name: "createPhrase",
         args: {
           phrase: props.phrase.trim(),
           translation: props.translation.trim(),
           translation_language: TranslateService.instance.targetLanguage.trim(),
-          bundleIds: selectedBundles.value,
+          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,
           linguistic_data: props.linguistic_data,
+          chunks: props.chunks || [],
+          sourceUrl: typeof location !== "undefined" ? location.href : undefined,
         },
       })
       .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;
+    // Remember the bundles now in use as defaults for future saves.
+    if (finalSelected.length) defaultBundleStore.setDefaultBundles(finalSelected);
 
-    // Store selected bundles as new defaults for future saves
-    defaultBundleStore.setDefaultBundles(selectedBundles.value);
+    // 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;
+    suggestedName.value = "";
     await loadExistingBundles();
-    // Refresh freemium counter
     await profileStore.fetchSubscription();
 
-    // Close the dropdown after successful save
     if (selectBundleRef.value?.closeDropdown) {
       selectBundleRef.value.closeDropdown();
     }
@@ -267,55 +372,6 @@ function handleUpgrade() {
   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..8a0d682 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,81 @@ 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
+);
+
+// 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
+ * 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) : []);
   },
 });
 
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/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
new file mode 100644
index 0000000..1d94791
--- /dev/null
+++ b/src/console-crane/modules/flashcard-preview/index.vue
@@ -0,0 +1,74 @@
+<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 { buildPreviewCards, type PreviewData } from "./cards";
+
+const route = useRoute();
+
+const data = computed<PreviewData>(
+  () => decodeRouteParams<PreviewData>(route.params.data as string) || {}
+);
+
+const cards = computed(() => buildPreviewCards(data.value));
+</script>
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..fce1222 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 -->
@@ -45,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"
@@ -69,87 +176,39 @@
         </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" />
-
-      <!-- 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 -->
-          <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>
+        <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>
-          </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
-              " />
+          <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>
 
@@ -171,6 +230,23 @@
           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 || []" />
+
+      <!-- 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>
@@ -179,14 +255,15 @@
 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 { findSavedPhrase } from "../../../common/services/phrase.service";
+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 Divider from "../../../common/components/Divider.vue";
 import { IconButton } from "pilotui/elements";
+import { Button } from "pilotui";
 
 import { useRoute } from "vue-router";
 import { sendMessage } from "../../../common/helper/massage";
@@ -250,16 +327,222 @@ 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 || "";
+});
+
+/** 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;
+ * otherwise a single entry with the whole-phrase definition + transliteration.
+ */
+const definitionEntries = computed<
+  { label: string; transliteration: string; definition: string }[]
+>(() => {
+  const chunks = wordData.value?.chunks || [];
+  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 || "",
+    },
+  ];
+});
+
+/**
+ * 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;
 });
 
-// Hide the context line when it's just a duplicate / superset of the selection itself.
+// --- 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);
+}
+
+// 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.
@@ -293,7 +576,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;
@@ -302,21 +585,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/console-crane/modules/word-detail/types.ts b/src/console-crane/modules/word-detail/types.ts
index eac5af5..9f0c5c7 100644
--- a/src/console-crane/modules/word-detail/types.ts
+++ b/src/console-crane/modules/word-detail/types.ts
@@ -1,15 +1,15 @@
-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;
+  /** 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) */
+  confidence: number;
 };
 
 export type LinguisticData = {
@@ -19,25 +19,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 +51,20 @@ 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[];
+};
+
+/** 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. */
+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/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 4976b52..1cbe563 100644
--- a/src/console-crane/router.ts
+++ b/src/console-crane/router.ts
@@ -3,6 +3,9 @@ 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";
+import FlashcardPreviewPage from "./modules/flashcard-preview/index.vue";
+import { setConsoleCraneRouter } from "./navigation";
 
 const routes: RouteRecordRaw[] = [
   {
@@ -20,9 +23,23 @@ const routes: RouteRecordRaw[] = [
     name: "settings",
     component: SettingsPage,
   },
+  {
+    path: "/practice-config/:data",
+    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 98dc43f..31d8372 100644
--- a/src/console-crane/types.ts
+++ b/src/console-crane/types.ts
@@ -1 +1,6 @@
-export type ConsolePage = "empty" | "word-detail" | "settings";
+export type ConsolePage =
+  | "empty"
+  | "word-detail"
+  | "settings"
+  | "practice-config"
+  | "flashcard-preview";
diff --git a/src/nibble/components/SelectionPopup.vue b/src/nibble/components/SelectionPopup.vue
index 75e2680..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 &amp; view</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,
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>
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();
+  });
+});