feat(ai): add Markdown and editor selection context

Capture bounded Markdown selection snapshots and expose follow-up context retrieval.
Add uniform attachment styling and editor Ask AI placement that pauses during resizing.
Include regression coverage and pin Phoenix Pro to 35c2b1236eae102fd15a2c429a7ea9bc656f1395.

Author: abose

src-mdviewer/src/bridge.js

@@ -9,6 +9,7 @@ import { setLocale } from "./core/i18n.js";
 import { marked } from "marked";
 import * as docCache from "./core/doc-cache.js";
 import { broadcastSelectionStateSync, flushPendingContentChange } from "./components/editor.js";
+import { captureSelection, restoreSelection, getRenderedMdLineText } from "./core/selection-context.js";
 
 let _syncId = 0;
 let _lastReceivedSyncId = -1;
@@ -81,6 +82,7 @@ function _annotateTokenLines(tokens) {
     for (const token of tokens) {
         if (token.type !== "space") {
             token._sourceLine = line;
+            token._sourceEndLine = line + (token.raw.replace(/\n$/, "").match(/\n/g) || []).length;
         }
         // Recursively annotate children with their source lines
         _annotateTokenChildren(token, line);
@@ -132,6 +134,7 @@ function _annotateNestedTokens(tokens, startLine) {
     for (const token of tokens) {
         if (token.type !== "space") {
             token._sourceLine = line;
+            token._sourceEndLine = line + (token.raw.replace(/\n$/, "").match(/\n/g) || []).length;
         }
         // Recurse into nested lists
         if (token.type === "list" && token.items) {
@@ -182,7 +185,8 @@ function _withSourceLine(protoFn, tagRegex) {
     return function (token) {
         const html = protoFn.call(this, token);
         if (token._sourceLine != null) {
-            return html.replace(tagRegex, `$& data-source-line="${token._sourceLine}"`);
+            return html.replace(tagRegex, `$& data-source-line="${token._sourceLine}"` +
+                ` data-source-end-line="${token._sourceEndLine || token._sourceLine}"`);
         }
         return html;
     };
@@ -278,6 +282,24 @@ export function initBridge() {
         if (!data || !data.type) return;
 
         switch (data.type) {
+            case "MDVIEWR_ASK_AI_ENABLED":
+                if (event.source === window.parent) { emit("ai:enabled", !!data.enabled); }
+                break;
+            case "MDVIEWR_ASK_AI_SELECTION":
+                if (event.source === window.parent) { emit("ai:attach-selection", {titlebar: true}); }
+                break;
+            case "MDVIEWR_SELECT_SOURCE_RANGE":
+                if (event.source === window.parent && data.filePath === docCache.getActiveFilePath()) {
+                    restoreSelection(document.getElementById("viewer-content"), getState().currentContent,
+                        data.selectionId);
+                }
+                break;
+            case "MDVIEWR_RENDERED_LINES":
+                if (event.source === window.parent) {
+                    sendToParent("mdviewrRenderedLines", {requestId: data.requestId,
+                        result: getRenderedMdLineText(data.params)});
+                }
+                break;
             case "MDVIEWR_SET_CONTENT":
                 handleSetContent(data);
                 break;
@@ -550,6 +572,20 @@ export function initBridge() {
     }, true);
 
     // Listen for content changes from editor (debounced by editor.js)
+    on("ai:attach-selection", ({rect, titlebar}) => {
+        if (flushPendingContentChange()) {
+            emit("editor:source-lines", getState().currentContent);
+        }
+        const content = document.getElementById("viewer-content");
+        const selection = captureSelection(content, getState().currentContent, docCache.getActiveFilePath());
+        if (selection) {
+            sendToParent("mdviewrAskAI", {selection, rect, filePath: docCache.getActiveFilePath()});
+        } else {
+            if (titlebar) { sendToParent("mdviewrAskAIEmpty", {}); }
+            else { emit("ai:selection-unavailable"); }
+        }
+    });
+
     on("bridge:contentChanged", ({ markdown }) => {
         if (_suppressContentChange) return;
         _syncId++;

src-mdviewer/src/components/editor.js

@@ -5,7 +5,7 @@ import { gfm } from "turndown-plugin-gfm";
 import { on, emit } from "../core/events.js";
 import { getState, setState } from "../core/state.js";
 import { t, tp } from "../core/i18n.js";
-import { initFormatBar, destroyFormatBar, focusFormatBar } from "./format-bar.js";
+import { initFormatBar, focusFormatBar } from "./format-bar.js";
 import { initSlashMenu, destroySlashMenu, isSlashMenuVisible } from "./slash-menu.js";
 import { initLinkPopover, destroyLinkPopover } from "./link-popover.js";
 import { initImagePopover, destroyImagePopover } from "./image-popover.js";
@@ -1853,12 +1853,14 @@ function _updateSourceLineAttrs(contentEl, markdown) {
                 mdLineIdx++;
             }
         }
+        el.setAttribute("data-source-end-line", String(Math.min(mdLines.length, mdLineIdx)));
     }
 }
 
 function emitContentChange(contentEl) {
     clearTimeout(contentChangeTimer);
     contentChangeTimer = setTimeout(() => {
+        contentChangeTimer = null;
         const markdown = convertToMarkdown(contentEl);
         emit("bridge:contentChanged", { markdown });
     }, CONTENT_CHANGE_DEBOUNCE);
@@ -1868,6 +1870,7 @@ function emitContentChange(contentEl) {
  * Flush any pending debounced content-change emission immediately.
  * Called during file switch so the outgoing file's edits are synced
  * to its cache entry and CM document before switching away.
+ * @return {boolean} Whether a pending edit was emitted synchronously.
  */
 export function flushPendingContentChange() {
     if (contentChangeTimer) {
@@ -1877,8 +1880,10 @@ export function flushPendingContentChange() {
         if (contentEl) {
             const markdown = convertToMarkdown(contentEl);
             emit("bridge:contentChanged", { markdown });
+            return true;
         }
     }
+    return false;
 }
 
 function getContentEl() {
@@ -2781,7 +2786,6 @@ function cleanupEditMode(content) {
         _dragEndHandler = null;
     }
 
-    destroyFormatBar();
     destroyLinkPopover();
     destroyImagePopover();
     destroyLangPicker();

src-mdviewer/src/components/format-bar.js

@@ -10,6 +10,7 @@ import {
 import { on, emit } from "../core/events.js";
 import { getSelectionRect } from "./editor.js";
 import { t, tp } from "../core/i18n.js";
+import { getState } from "../core/state.js";
 
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform);
 const mod = isMac ? "\u2318" : "Ctrl";
@@ -19,6 +20,22 @@ let contentEl = null;
 let rafId = null;
 let linkMode = false;
 let savedRange = null;
+let askAIEnabled = false;
+let initialized = false;
+
+on("ai:enabled", enabled => {
+    askAIEnabled = enabled;
+    initFormatBar(document.getElementById("viewer-content"));
+    buildBar();
+    updatePosition();
+});
+on("state:editMode", () => {
+    if (initialized) { hide(); buildBar(); }
+});
+on("ai:selection-unavailable", () => {
+    const button = document.getElementById("fb-ask-ai");
+    if (button) { button.textContent = t("format.selection_unavailable"); }
+});
 
 const buttons = [
   { id: "fb-bold", icon: "bold", command: "bold", tooltipKey: "format.bold", stateKey: "bold" },
@@ -36,13 +53,17 @@ function buildBar() {
 
   let html = '<div class="format-bar-buttons">';
   for (const btn of buttons) {
+    if (!getState().editMode) { continue; }
     if (btn === null) {
       html += '<div class="toolbar-divider"></div>';
     } else {
       const tooltip = tp(btn.tooltipKey, { mod });
       html += `<button class="toolbar-btn format-btn" id="${btn.id}" data-tooltip="${tooltip}" aria-pressed="false" tabindex="-1"><i data-lucide="${btn.icon}"></i></button>`;
     }
   }
+  if (askAIEnabled) {
+      html += '<button class="toolbar-btn format-ask-ai" id="fb-ask-ai" tabindex="-1"></button>';
+  }
   html += "</div>";
 
   // Link input (hidden by default)
@@ -53,6 +74,16 @@ function buildBar() {
 
   bar.innerHTML = html;
 
+  const askAI = document.getElementById("fb-ask-ai");
+  if (askAI) {
+      askAI.textContent = t("format.ask_ai");
+      askAI.addEventListener("mousedown", event => event.preventDefault());
+      askAI.addEventListener("click", () => {
+          const rect = askAI.getBoundingClientRect();
+          emit("ai:attach-selection", {rect: {x: rect.left + rect.width / 2, y: rect.top + rect.height / 2}});
+      });
+  }
+
   createIcons({
     icons: { Bold, Italic, Strikethrough, Underline, Code, Link },
     attrs: { class: "" },
@@ -201,6 +232,8 @@ function updatePosition() {
   if (rafId) cancelAnimationFrame(rafId);
   rafId = requestAnimationFrame(() => {
     rafId = null;
+    contentEl = document.getElementById("viewer-content");
+    if (!getState().editMode && !askAIEnabled) { hide(); return; }
     if (linkMode) return; // don't reposition while editing link
     const sel = window.getSelection();
     if (!sel || sel.isCollapsed || !sel.rangeCount) {
@@ -227,7 +260,9 @@ function updatePosition() {
     // Skip if selection is inside a code block — formatting doesn't apply
     const anchorEl = sel.anchorNode.nodeType === Node.ELEMENT_NODE
       ? sel.anchorNode : sel.anchorNode.parentElement;
-    if (anchorEl && anchorEl.closest("pre")) {
+    const inCode = !!(anchorEl && anchorEl.closest("pre"));
+    bar.classList.toggle("ai-code-selection", inCode);
+    if (inCode && !askAIEnabled) {
       hide();
       return;
     }
@@ -266,13 +301,15 @@ function onSelectionState(state) {
 
 export function initFormatBar(editorEl) {
   contentEl = editorEl;
+  if (initialized) { buildBar(); return; }
+  initialized = true;
   buildBar();
 
   document.addEventListener("selectionchange", updatePosition);
   document.addEventListener("mousedown", onDocumentMousedown);
   // Fallback for WebKitGTK
-  contentEl.addEventListener("mouseup", updatePosition);
-  contentEl.addEventListener("keyup", updatePosition);
+  document.addEventListener("mouseup", updatePosition);
+  document.addEventListener("keyup", updatePosition);
   // Dismiss on scroll
   const appViewer = document.getElementById("app-viewer");
   if (appViewer) {
@@ -286,13 +323,12 @@ export function initFormatBar(editorEl) {
 }
 
 export function destroyFormatBar() {
+  initialized = false;
   hide();
   document.removeEventListener("selectionchange", updatePosition);
   document.removeEventListener("mousedown", onDocumentMousedown);
-  if (contentEl) {
-    contentEl.removeEventListener("mouseup", updatePosition);
-    contentEl.removeEventListener("keyup", updatePosition);
-  }
+  document.removeEventListener("mouseup", updatePosition);
+  document.removeEventListener("keyup", updatePosition);
   if (bar) bar.innerHTML = "";
   contentEl = null;
   linkMode = false;