Highlight selected text only, not the whole element

- Plugin sends per-line rects from range.getClientRects() and pre-adds
  the iframe offset at mouseup time, so shell-layout shifts between
  mouseup and message receipt don't misplace the overlay.
- TextHighlightOverlay renders one div per rect; falls back to the
  bounding rect for restored highlights.
- useAnnotationRects shifts rects by the element's scroll delta via an
  _anchorRect pattern; rejects stale id matches after async resolution.
- Clear inspector selection when entering highlight mode so the old
  element-wide .highlight.select box doesn't linger.
- Persist and restore visual.rects on highlight tasks.

Author: kurtstohrer

src/plugin/bridge/events.ts

@@ -134,11 +134,34 @@ export function bridgeEvents(): string {
     var source = findSourceElement(anchorEl);
     var data = getSourceData(source.sourceEl);
 
+    // Measure the iframe's position in the shell at mouseup time so the rects
+    // we send are in shell-viewport coords. The shell can't do this after the
+    // fact — by the time the message arrives, panel shifts from task creation
+    // may have moved the iframe, and the selection would land in the wrong spot.
+    var frameOffX = 0, frameOffY = 0;
+    try {
+      var frame = window.frameElement;
+      if (frame) {
+        var fr = frame.getBoundingClientRect();
+        frameOffX = fr.left; frameOffY = fr.top;
+      }
+    } catch (_e) {}
+
     var selRect = null;
+    var selRects = null;
     try {
       var range = sel.getRangeAt(0);
       var br = range.getBoundingClientRect();
-      if (br.width > 0 && br.height > 0) selRect = { x: br.x, y: br.y, width: br.width, height: br.height };
+      if (br.width > 0 && br.height > 0) selRect = { x: br.x + frameOffX, y: br.y + frameOffY, width: br.width, height: br.height };
+      var crs = range.getClientRects();
+      if (crs && crs.length > 0) {
+        selRects = [];
+        for (var i = 0; i < crs.length; i++) {
+          var cr = crs[i];
+          if (cr.width > 0 && cr.height > 0) selRects.push({ x: cr.x + frameOffX, y: cr.y + frameOffY, width: cr.width, height: cr.height });
+        }
+        if (selRects.length === 0) selRects = null;
+      }
     } catch (_e) {}
     sendToShell('selection:text', {
       text: text,
@@ -148,7 +171,8 @@ export function bridgeEvents(): string {
       component: data.component,
       mfe: data.mfe,
       tag: anchorEl.tagName.toLowerCase(),
-      rect: selRect
+      rect: selRect,
+      rects: selRects
     });
   }
 

src/shared/bridge-types.ts

@@ -196,6 +196,8 @@ export interface SelectionTextEvent {
   component: string
   mfe?: string
   tag: string
+  rect?: { x: number; y: number; width: number; height: number }
+  rects?: { x: number; y: number; width: number; height: number }[]
 }
 
 export interface KeyDownEvent {

src/shell/components/TextHighlightOverlay.vue

@@ -19,8 +19,26 @@ const emit = defineEmits<{
     v-for="h in highlights"
     :key="'vis-' + h.id"
   >
+    <template v-if="h.rects && h.rects.length">
+      <div
+        v-for="(r, i) in h.rects"
+        :key="'vis-' + h.id + '-' + i"
+        class="text-highlight-visual"
+        :class="{ selected: h.id === selectedId }"
+        :style="{
+          left: r.x + 'px', top: r.y + 'px',
+          width: r.width + 'px', height: r.height + 'px',
+          background: h.color + '30',
+          borderBottom: '2px solid ' + h.color,
+          boxShadow: h.id === selectedId ? '0 0 0 1px ' + h.color : 'none',
+        }"
+        @click.stop="emit('select', h.id)"
+      >
+        <span v-if="i === 0" class="highlight-badge" :style="{ background: h.color }">#{{ h.number }}</span>
+      </div>
+    </template>
     <div
-      v-if="h.rect"
+      v-else-if="h.rect"
       class="text-highlight-visual"
       :class="{ selected: h.id === selectedId }"
       :style="{

src/shell/composables/useAnnotationRects.ts

@@ -86,7 +86,31 @@ export function useAnnotationRects(deps: {
             }
           } else if (entry.type === 'highlight') {
             const hl = annotations.highlights.value.find(h => h.id === entry.id)
-            if (hl) hl.rect = rect
+            if (!hl) continue
+            // Reject stale matches: the highlight we found may have been replaced
+            // mid-await with a new one that happens to share the same id (ids are
+            // derived from a counter that gets reclaimed when pending annotations
+            // are discarded, so a rapid swap produces id collisions).
+            if (hl.eid !== eids[i]) continue
+            if (hl.rects && hl.rects.length) {
+              // Range-based highlight: track the element's movement and shift the
+              // per-line rects (which describe text runs, not the element box) by
+              // the same delta. Don't overwrite hl.rect with the element rect.
+              const prev = (hl as any)._anchorRect as typeof rect | undefined
+              if (prev) {
+                const dx = rect.x - prev.x
+                const dy = rect.y - prev.y
+                if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+                  hl.rects = hl.rects.map(r => ({ x: r.x + dx, y: r.y + dy, width: r.width, height: r.height }))
+                  if (hl.rect) hl.rect = { x: hl.rect.x + dx, y: hl.rect.y + dy, width: hl.rect.width, height: hl.rect.height }
+                  ;(hl as any)._anchorRect = rect
+                }
+              } else {
+                ;(hl as any)._anchorRect = rect
+              }
+            } else {
+              hl.rect = rect
+            }
           } else if (entry.type === 'section') {
             const section = annotations.drawnSections.value.find(s => s.id === entry.id)
             if (!section) continue

src/shell/composables/useAnnotations.ts

@@ -77,6 +77,7 @@ export interface TextHighlight {
   prompt: string
   color: string
   rect?: ElementRect
+  rects?: ElementRect[]
   eid?: string
   file: string
   line: number
@@ -234,13 +235,14 @@ export function useAnnotations() {
   // ── Text Highlights ──
   const selectedHighlightId = ref<string | null>(null)
 
-  function addHighlight(text: string, source: { file: string; line: number; component: string; elementTag: string }, color?: string, rect?: ElementRect, eid?: string): TextHighlight {
+  function addHighlight(text: string, source: { file: string; line: number; component: string; elementTag: string }, color?: string, rect?: ElementRect, eid?: string, rects?: ElementRect[]): TextHighlight {
     counter++
     const h: TextHighlight = {
       id: `hl-${counter}`, number: counter,
       selectedText: text, prompt: '',
       color: color || readVar('--mode-highlight', '#f59e0b'),
       ...(rect ? { rect } : {}),
+      ...(rects && rects.length ? { rects } : {}),
       ...(eid ? { eid } : {}),
       file: source.file, line: source.line,
       component: source.component, elementTag: source.elementTag,

src/shell/composables/useBridgeEventHandlers.ts

@@ -203,22 +203,23 @@ export function useBridgeEventHandlers(deps: BridgeEventHandlerDeps) {
   async function onSelectionText(data: {
     text: string; eid: string; file: string; line: number; component: string; tag: string
     rect?: { x: number; y: number; width: number; height: number }
+    rects?: { x: number; y: number; width: number; height: number }[]
   }) {
     discardUncommittedAnnotations()
-    // Convert iframe-local rect to viewport coords
-    const iframeEl = iframeRef.value
-    const offsetX = iframeEl?.getBoundingClientRect().left || 0
-    const offsetY = iframeEl?.getBoundingClientRect().top || 0
-    let viewportRect: { x: number; y: number; width: number; height: number } | undefined
-    if (data.rect) {
-      viewportRect = { x: data.rect.x + offsetX, y: data.rect.y + offsetY, width: data.rect.width, height: data.rect.height }
-    }
+    // The plugin converts to shell-viewport coords at mouseup time (see
+    // bridge/events.ts). Don't add the iframe offset here — by the time this
+    // handler runs, the iframe may have shifted (panel layout changes trigger
+    // when we commit the previous highlight), and re-measuring would misplace
+    // the selection.
+    const viewportRect = data.rect ? { ...data.rect } : undefined
+    const viewportRects = data.rects?.map(r => ({ x: r.x, y: r.y, width: r.width, height: r.height }))
     const hl = annotations.addHighlight(
       data.text,
       { file: data.file, line: data.line, component: data.component, elementTag: data.tag },
       highlightColor.value,
       viewportRect,
-      data.eid
+      data.eid,
+      viewportRects
     )
     // Fallback: resolve element rect by eid if bridge didn't send selection rect
     if (!viewportRect && data.eid) {

src/shell/composables/useInteractionModeSync.ts

@@ -48,7 +48,7 @@ export function useInteractionModeSync(opts: UseInteractionModeSyncOptions) {
     if (mode !== 'arrow') {
       arrowHoverElement.value = null
     }
-    if (mode === 'interact') {
+    if (mode === 'interact' || mode === 'highlight') {
       clearSelection()
       hoverRect.value = null
       hoverInfo.value = null

src/shell/composables/useTaskWorkflows.ts

@@ -375,7 +375,7 @@ export function useTaskWorkflows(deps: {
       createRouteTask({
         type: 'annotation', description: intent, file: ctx.file, line: parseInt(String(ctx.line)) || 0,
         component: ctx.component, action: 'text_edit',
-        visual: { kind: 'highlight', annotationId: ctx.annotationId, eid: hl?.eid, rect: hl?.rect, color: hl?.color },
+        visual: { kind: 'highlight', annotationId: ctx.annotationId, eid: hl?.eid, rect: hl?.rect, rects: hl?.rects, color: hl?.color },
         context: { element_tag: meta.elementTag, selected_text: meta.selectedText },
       })
     } else if (ctx.kind === 'select') {
@@ -533,7 +533,7 @@ export function useTaskWorkflows(deps: {
         const hl = deps.annotations.addHighlight(
           ctx.selected_text || '',
           { file: task.file, line: task.line, component: task.component || '', elementTag: ctx.element_tag || '' },
-          v.color, v.rect,
+          v.color, v.rect, undefined, v.rects,
         )
         hl.route = taskRoute
         v.annotationId = hl.id