From 5b39f8a061c1d1d263a666823fd859448dfa1cb1 Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 5 Mar 2026 15:16:10 -0500
Subject: [PATCH 1/2] Namespace Stimulus controllers with coplan-- prefix

The engine's importmap pins controllers under controllers/coplan,
which registers them as coplan--text-selection, coplan--tabs, etc.
in Stimulus. The views were referencing non-namespaced identifiers
(text-selection, tabs, dropdown) which only worked in the main
coplan app because it had duplicate copies of the controllers at
the non-namespaced path. Host apps like coplan-square that rely
solely on the engine's importmap never loaded the controllers.

Update all data-controller, data-*-target, and data-action
attributes to use the coplan-- namespace prefix.

Amp-Thread-ID: https://ampcode.com/threads/T-019cbf49-a8fa-739b-9d02-f3f3eab982f4
Co-authored-by: Amp <amp@ampcode.com>
---
 .../comment_threads/_new_comment_form.html.erb | 14 +++++++-------
 .../comment_threads/_reply_form.html.erb       |  2 +-
 .../coplan/comment_threads/_thread.html.erb    |  2 +-
 engine/app/views/coplan/plans/_header.html.erb |  6 +++---
 engine/app/views/coplan/plans/show.html.erb    | 18 +++++++++---------
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/engine/app/views/coplan/comment_threads/_new_comment_form.html.erb b/engine/app/views/coplan/comment_threads/_new_comment_form.html.erb
index 30fb228..204b0c1 100644
--- a/engine/app/views/coplan/comment_threads/_new_comment_form.html.erb
+++ b/engine/app/views/coplan/comment_threads/_new_comment_form.html.erb
@@ -1,17 +1,17 @@
-<div class="comment-form card" id="new-comment-form" data-text-selection-target="form" style="display: none;">
-  <%= form_with url: plan_comment_threads_path(plan), method: :post, data: { action: "turbo:submit-end->text-selection#resetCommentForm" } do |f| %>
-    <input type="hidden" name="comment_thread[anchor_text]" data-text-selection-target="anchorInput" value="">
-    <input type="hidden" name="comment_thread[anchor_context]" data-text-selection-target="contextInput" value="">
-    <div class="comment-form__anchor" data-text-selection-target="anchorPreview" style="display: none;">
+<div class="comment-form card" id="new-comment-form" data-coplan--text-selection-target="form" style="display: none;">
+  <%= form_with url: plan_comment_threads_path(plan), method: :post, data: { action: "turbo:submit-end->coplan--text-selection#resetCommentForm" } do |f| %>
+    <input type="hidden" name="comment_thread[anchor_text]" data-coplan--text-selection-target="anchorInput" value="">
+    <input type="hidden" name="comment_thread[anchor_context]" data-coplan--text-selection-target="contextInput" value="">
+    <div class="comment-form__anchor" data-coplan--text-selection-target="anchorPreview" style="display: none;">
       <span class="text-sm text-muted">Commenting on:</span>
-      <blockquote class="comment-form__quote" data-text-selection-target="anchorQuote"></blockquote>
+      <blockquote class="comment-form__quote" data-coplan--text-selection-target="anchorQuote"></blockquote>
     </div>
     <div class="form-group">
       <textarea name="comment_thread[body_markdown]" id="comment_thread_body_markdown" rows="3" placeholder="Write a comment..." required></textarea>
     </div>
     <div class="comment-form__actions">
       <button type="submit" class="btn btn--primary btn--sm">Comment</button>
-      <button type="button" class="btn btn--secondary btn--sm" data-action="text-selection#cancelComment">Cancel</button>
+      <button type="button" class="btn btn--secondary btn--sm" data-action="coplan--text-selection#cancelComment">Cancel</button>
     </div>
   <% end %>
 </div>
diff --git a/engine/app/views/coplan/comment_threads/_reply_form.html.erb b/engine/app/views/coplan/comment_threads/_reply_form.html.erb
index a4d351e..16a9eeb 100644
--- a/engine/app/views/coplan/comment_threads/_reply_form.html.erb
+++ b/engine/app/views/coplan/comment_threads/_reply_form.html.erb
@@ -1,5 +1,5 @@
 <div class="comment-thread__reply" id="<%= dom_id(thread, :reply_form) %>">
-  <%= form_with url: plan_comment_thread_comments_path(plan, thread), method: :post, data: { action: "turbo:submit-end->text-selection#resetReplyForm" } do |f| %>
+  <%= form_with url: plan_comment_thread_comments_path(plan, thread), method: :post, data: { action: "turbo:submit-end->coplan--text-selection#resetReplyForm" } do |f| %>
     <div class="form-group">
       <textarea name="comment[body_markdown]" rows="2" placeholder="Reply..." required></textarea>
     </div>
diff --git a/engine/app/views/coplan/comment_threads/_thread.html.erb b/engine/app/views/coplan/comment_threads/_thread.html.erb
index 3b92e5b..1f9a6d3 100644
--- a/engine/app/views/coplan/comment_threads/_thread.html.erb
+++ b/engine/app/views/coplan/comment_threads/_thread.html.erb
@@ -10,7 +10,7 @@
       <% end %>
     </div>
     <% if thread.anchored? %>
-      <blockquote class="comment-thread__anchor-quote" data-action="click->text-selection#scrollToAnchor" data-anchor="<%= thread.anchor_text %>" style="cursor: pointer;"><%= thread.anchor_preview %></blockquote>
+      <blockquote class="comment-thread__anchor-quote" data-action="click->coplan--text-selection#scrollToAnchor" data-anchor="<%= thread.anchor_text %>" style="cursor: pointer;"><%= thread.anchor_preview %></blockquote>
     <% end %>
   </div>
 
diff --git a/engine/app/views/coplan/plans/_header.html.erb b/engine/app/views/coplan/plans/_header.html.erb
index a013948..f8c2b53 100644
--- a/engine/app/views/coplan/plans/_header.html.erb
+++ b/engine/app/views/coplan/plans/_header.html.erb
@@ -7,11 +7,11 @@
   </div>
   <div class="page-header__actions">
     <% if CoPlan::AutomatedPlanReviewer.enabled.any? %>
-      <div class="dropdown" data-controller="dropdown">
-        <button class="btn btn--secondary" data-action="dropdown#toggle">
+      <div class="dropdown" data-controller="coplan--dropdown">
+        <button class="btn btn--secondary" data-action="coplan--dropdown#toggle">
           🤖 Run Reviewer ▾
         </button>
-        <div class="dropdown__menu" data-dropdown-target="menu" style="display: none;">
+        <div class="dropdown__menu" data-coplan--dropdown-target="menu" style="display: none;">
           <% CoPlan::AutomatedPlanReviewer.enabled.order(:name).each do |reviewer| %>
             <%= button_to reviewer.name,
                   plan_automated_reviews_path(plan, reviewer_id: reviewer.id),
diff --git a/engine/app/views/coplan/plans/show.html.erb b/engine/app/views/coplan/plans/show.html.erb
index 4f30c3b..1701665 100644
--- a/engine/app/views/coplan/plans/show.html.erb
+++ b/engine/app/views/coplan/plans/show.html.erb
@@ -4,12 +4,12 @@
 
 <div class="plan-content card">
   <% if @plan.current_content.present? %>
-    <div class="plan-layout" data-controller="text-selection" data-text-selection-plan-id-value="<%= @plan.id %>">
-      <div class="plan-layout__content" data-text-selection-target="content">
+    <div class="plan-layout" data-controller="coplan--text-selection" data-coplan--text-selection-plan-id-value="<%= @plan.id %>">
+      <div class="plan-layout__content" data-coplan--text-selection-target="content">
         <%= render_markdown(@plan.current_content) %>
 
-        <div class="comment-popover" data-text-selection-target="popover" style="display: none;">
-          <button type="button" class="btn btn--primary btn--sm" data-action="text-selection#openCommentForm">
+        <div class="comment-popover" data-coplan--text-selection-target="popover" style="display: none;">
+          <button type="button" class="btn btn--primary btn--sm" data-action="coplan--text-selection#openCommentForm">
             💬 Comment
           </button>
         </div>
@@ -18,17 +18,17 @@
       <div class="plan-layout__sidebar">
         <%= render partial: "coplan/comment_threads/new_comment_form", locals: { plan: @plan } %>
 
-        <div class="comment-tabs" data-controller="tabs" data-tabs-active-class="comment-tab--active">
+        <div class="comment-tabs" data-controller="coplan--tabs" data-coplan--tabs-active-class="comment-tab--active">
           <div class="comment-tabs__nav">
-            <button class="comment-tab comment-tab--active" data-tabs-target="tab" data-action="tabs#switch text-selection#repositionThreads" data-index="0">
+            <button class="comment-tab comment-tab--active" data-coplan--tabs-target="tab" data-action="coplan--tabs#switch coplan--text-selection#repositionThreads" data-index="0">
               Open <span class="comment-tab__count" id="open-thread-count"><%= @active_threads.size if @active_threads.any? %></span>
             </button>
-            <button class="comment-tab" data-tabs-target="tab" data-action="tabs#switch text-selection#repositionThreads" data-index="1">
+            <button class="comment-tab" data-coplan--tabs-target="tab" data-action="coplan--tabs#switch coplan--text-selection#repositionThreads" data-index="1">
               Resolved <span class="comment-tab__count" id="resolved-thread-count"><%= @archived_threads.size if @archived_threads.any? %></span>
             </button>
           </div>
 
-          <div class="comment-tabs__panel" data-tabs-target="panel">
+          <div class="comment-tabs__panel" data-coplan--tabs-target="panel">
             <div class="comment-threads-list" id="comment-threads">
               <% @active_threads.each do |thread| %>
                 <%= render partial: "coplan/comment_threads/thread", locals: { thread: thread, plan: @plan, current_user: current_user } %>
@@ -37,7 +37,7 @@
             </div>
           </div>
 
-          <div class="comment-tabs__panel" data-tabs-target="panel" style="display: none;">
+          <div class="comment-tabs__panel" data-coplan--tabs-target="panel" style="display: none;">
             <div class="comment-threads-list" id="resolved-comment-threads">
               <% @archived_threads.each do |thread| %>
                 <%= render partial: "coplan/comment_threads/thread", locals: { thread: thread, plan: @plan, current_user: current_user } %>

From 88700d5e2492836e8b9a2f7cf9d56f8fecd2785e Mon Sep 17 00:00:00 2001
From: Hampton Lintorn-Catlin <hampton@squareup.com>
Date: Thu, 5 Mar 2026 15:18:14 -0500
Subject: [PATCH 2/2] Remove duplicate non-namespaced controller copies

These were duplicates of the engine controllers at the non-namespaced
path. Now that views use coplan-- prefixed identifiers, the engine's
importmap (controllers/coplan/*) provides the controllers directly.

Amp-Thread-ID: https://ampcode.com/threads/T-019cbf49-a8fa-739b-9d02-f3f3eab982f4
Co-authored-by: Amp <amp@ampcode.com>
---
 .../controllers/dropdown_controller.js        |  25 --
 .../controllers/line_selection_controller.js  | 112 ------
 app/javascript/controllers/tabs_controller.js |  18 -
 .../controllers/text_selection_controller.js  | 376 ------------------
 4 files changed, 531 deletions(-)
 delete mode 100644 app/javascript/controllers/dropdown_controller.js
 delete mode 100644 app/javascript/controllers/line_selection_controller.js
 delete mode 100644 app/javascript/controllers/tabs_controller.js
 delete mode 100644 app/javascript/controllers/text_selection_controller.js

diff --git a/app/javascript/controllers/dropdown_controller.js b/app/javascript/controllers/dropdown_controller.js
deleted file mode 100644
index 5e53247..0000000
--- a/app/javascript/controllers/dropdown_controller.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["menu"]
-
-  toggle() {
-    const menu = this.menuTarget
-    menu.style.display = menu.style.display === "none" ? "" : "none"
-  }
-
-  close(event) {
-    if (!this.element.contains(event.target)) {
-      this.menuTarget.style.display = "none"
-    }
-  }
-
-  connect() {
-    this._closeHandler = this.close.bind(this)
-    document.addEventListener("click", this._closeHandler)
-  }
-
-  disconnect() {
-    document.removeEventListener("click", this._closeHandler)
-  }
-}
diff --git a/app/javascript/controllers/line_selection_controller.js b/app/javascript/controllers/line_selection_controller.js
deleted file mode 100644
index e262318..0000000
--- a/app/javascript/controllers/line_selection_controller.js
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.anchorLine = null
-    this.startLine = null
-    this.endLine = null
-    this.element.addEventListener("click", this.handleClick.bind(this))
-  }
-
-  disconnect() {
-    this.element.removeEventListener("click", this.handleClick.bind(this))
-  }
-
-  handleClick(event) {
-    const lineEl = event.target.closest(".line-view__line")
-    if (!lineEl) return
-
-    const lineNum = parseInt(lineEl.dataset.line, 10)
-
-    if (event.shiftKey && this.anchorLine !== null) {
-      this.startLine = Math.min(this.anchorLine, lineNum)
-      this.endLine = Math.max(this.anchorLine, lineNum)
-    } else if (this.anchorLine === lineNum && this.startLine === lineNum && this.endLine === lineNum) {
-      // Toggle off single selected line
-      this.anchorLine = null
-      this.startLine = null
-      this.endLine = null
-    } else {
-      this.anchorLine = lineNum
-      this.startLine = lineNum
-      this.endLine = lineNum
-    }
-
-    this.updateSelection()
-  }
-
-  updateSelection() {
-    this.element.querySelectorAll(".line-view__line").forEach(el => {
-      const num = parseInt(el.dataset.line, 10)
-      if (this.startLine !== null && num >= this.startLine && num <= this.endLine) {
-        el.classList.add("line-view__line--selected")
-      } else {
-        el.classList.remove("line-view__line--selected")
-      }
-    })
-
-    this.updateActionBar()
-  }
-
-  updateActionBar() {
-    let bar = this.element.querySelector(".line-selection-bar")
-
-    if (this.startLine === null) {
-      if (bar) bar.remove()
-      return
-    }
-
-    if (!bar) {
-      bar = document.createElement("div")
-      bar.classList.add("line-selection-bar")
-      this.element.appendChild(bar)
-    }
-
-    const rangeText = this.startLine === this.endLine
-      ? `Line ${this.startLine} selected`
-      : `Lines ${this.startLine}–${this.endLine} selected`
-
-    bar.innerHTML = `
-      <span class="line-selection-bar__info">${rangeText}</span>
-      <span class="line-selection-bar__actions">
-        <a href="#" class="btn btn--primary btn--sm" data-action="line-selection#addComment">Add Comment</a>
-        <button type="button" class="btn btn--secondary btn--sm" data-action="line-selection#clearSelection">Clear</button>
-      </span>
-    `
-  }
-
-  addComment(event) {
-    event.preventDefault()
-    const startInput = document.getElementById("comment_start_line")
-    const endInput = document.getElementById("comment_end_line")
-    const indicator = document.getElementById("comment-line-indicator")
-    const indicatorText = document.getElementById("comment-line-text")
-    const textarea = document.getElementById("comment_thread_body_markdown")
-
-    if (startInput && endInput) {
-      startInput.value = this.startLine
-      endInput.value = this.endLine
-
-      if (indicator && indicatorText) {
-        const text = this.startLine === this.endLine
-          ? `Commenting on Line ${this.startLine}`
-          : `Commenting on Lines ${this.startLine}–${this.endLine}`
-        indicatorText.textContent = text
-        indicator.style.display = "block"
-      }
-
-      if (textarea) {
-        textarea.focus()
-        textarea.scrollIntoView({ behavior: "smooth", block: "center" })
-      }
-    }
-  }
-
-  clearSelection(event) {
-    if (event) event.preventDefault()
-    this.anchorLine = null
-    this.startLine = null
-    this.endLine = null
-    this.updateSelection()
-  }
-}
diff --git a/app/javascript/controllers/tabs_controller.js b/app/javascript/controllers/tabs_controller.js
deleted file mode 100644
index 39b6902..0000000
--- a/app/javascript/controllers/tabs_controller.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["tab", "panel"]
-  static classes = ["active"]
-
-  switch(event) {
-    const index = parseInt(event.currentTarget.dataset.index)
-
-    this.tabTargets.forEach((tab, i) => {
-      tab.classList.toggle(this.activeClass, i === index)
-    })
-
-    this.panelTargets.forEach((panel, i) => {
-      panel.style.display = i === index ? "" : "none"
-    })
-  }
-}
diff --git a/app/javascript/controllers/text_selection_controller.js b/app/javascript/controllers/text_selection_controller.js
deleted file mode 100644
index 2ba5d75..0000000
--- a/app/javascript/controllers/text_selection_controller.js
+++ /dev/null
@@ -1,376 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["content", "popover", "form", "anchorInput", "contextInput", "anchorPreview", "anchorQuote"]
-  static values = { planId: String }
-
-  connect() {
-    this.selectedText = null
-    this.contentTarget.addEventListener("mouseup", this.handleMouseUp.bind(this))
-    document.addEventListener("mousedown", this.handleDocumentMouseDown.bind(this))
-    this.highlightAnchors()
-    this.observeThreadLists()
-  }
-
-  disconnect() {
-    this.contentTarget.removeEventListener("mouseup", this.handleMouseUp.bind(this))
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown.bind(this))
-    if (this.threadListObserver) this.threadListObserver.disconnect()
-  }
-
-  handleMouseUp(event) {
-    // Small delay to let the selection finalize
-    setTimeout(() => this.checkSelection(event), 10)
-  }
-
-  handleDocumentMouseDown(event) {
-    // Hide popover if clicking outside it
-    if (this.hasPopoverTarget && !this.popoverTarget.contains(event.target)) {
-      this.popoverTarget.style.display = "none"
-    }
-  }
-
-  checkSelection(event) {
-    const selection = window.getSelection()
-    const text = selection.toString().trim()
-
-    if (text.length < 3) {
-      this.popoverTarget.style.display = "none"
-      return
-    }
-
-    // Make sure selection is within the content area
-    if (!selection.rangeCount) return
-    const range = selection.getRangeAt(0)
-    if (!this.contentTarget.contains(range.commonAncestorContainer)) {
-      return
-    }
-
-    this.selectedText = text
-    this.selectedContext = this.extractContext(range, text)
-
-    // Position popover near the selection
-    const rect = range.getBoundingClientRect()
-    const contentRect = this.contentTarget.getBoundingClientRect()
-
-    this.popoverTarget.style.display = "block"
-    this.popoverTarget.style.top = `${rect.bottom - contentRect.top + 8}px`
-    this.popoverTarget.style.left = `${rect.left - contentRect.left}px`
-  }
-
-  openCommentForm(event) {
-    event.preventDefault()
-    if (!this.selectedText) return
-
-    // Set the anchor text and surrounding context
-    this.anchorInputTarget.value = this.selectedText
-    this.contextInputTarget.value = this.selectedContext || ""
-    this.anchorQuoteTarget.textContent = this.selectedText.length > 120
-      ? this.selectedText.substring(0, 120) + "…"
-      : this.selectedText
-    this.anchorPreviewTarget.style.display = "block"
-
-    // Position the form in the sidebar at the same vertical level as the selection
-    const layoutRect = this.element.getBoundingClientRect()
-    const popoverRect = this.popoverTarget.getBoundingClientRect()
-    const offsetTop = popoverRect.top - layoutRect.top
-    this.formTarget.style.position = "absolute"
-    this.formTarget.style.top = `${offsetTop}px`
-
-    // Show form, hide popover
-    this.formTarget.style.display = "block"
-    this.popoverTarget.style.display = "none"
-
-    // Clear browser selection
-    window.getSelection().removeAllRanges()
-
-    // Focus textarea without scrolling the page
-    const textarea = this.formTarget.querySelector("textarea")
-    if (textarea) {
-      textarea.focus({ preventScroll: true })
-    }
-  }
-
-  cancelComment(event) {
-    event.preventDefault()
-    this.hideAndResetForm()
-  }
-
-  resetCommentForm(event) {
-    if (event.detail.success) {
-      this.hideAndResetForm()
-    }
-  }
-
-  resetReplyForm(event) {
-    if (event.detail.success) {
-      const form = event.target
-      const textarea = form.querySelector("textarea")
-      if (textarea) textarea.value = ""
-    }
-  }
-
-  hideAndResetForm() {
-    this.formTarget.style.display = "none"
-    this.anchorInputTarget.value = ""
-    this.contextInputTarget.value = ""
-    this.anchorPreviewTarget.style.display = "none"
-    const textarea = this.formTarget.querySelector("textarea")
-    if (textarea) textarea.value = ""
-    this.selectedText = null
-    this.selectedContext = null
-  }
-
-  scrollToAnchor(event) {
-    const anchor = event.currentTarget.dataset.anchor
-    if (!anchor) return
-
-    const context = event.currentTarget.closest("[data-anchor-context]")?.dataset.anchorContext || ""
-
-    // Remove existing highlights first
-    this.contentTarget.querySelectorAll(".anchor-highlight--active").forEach(el => {
-      el.classList.remove("anchor-highlight--active")
-    })
-
-    // Find and highlight the anchor text using context for disambiguation
-    const highlighted = context
-      ? this.findAndHighlightWithContext(anchor, context, "anchor-highlight--active")
-      : this.findAndHighlight(anchor, "anchor-highlight--active")
-    if (highlighted) {
-      highlighted.scrollIntoView({ behavior: "smooth", block: "center" })
-    }
-  }
-
-  extractContext(range, selectedText) {
-    // Grab surrounding text for disambiguation
-    const fullText = this.contentTarget.textContent
-    const selIndex = fullText.indexOf(selectedText)
-    if (selIndex === -1) return ""
-
-    // Find ALL occurrences — if unique, no context needed
-    let count = 0
-    let pos = -1
-    while ((pos = fullText.indexOf(selectedText, pos + 1)) !== -1) count++
-    if (count === 1) return ""
-
-    // Multiple occurrences — find which one by using the range's position
-    // Grab ~100 chars before and after for a unique context
-    const contextBefore = 100
-    const contextAfter = 100
-
-    // Use a DOM-based walk to figure out the offset in the text content
-    const offset = this.getSelectionOffset(range)
-
-    const start = Math.max(0, offset - contextBefore)
-    const end = Math.min(fullText.length, offset + selectedText.length + contextAfter)
-    return fullText.slice(start, end)
-  }
-
-  getSelectionOffset(range) {
-    if (!range || !this.contentTarget) return 0
-
-    const walker = document.createTreeWalker(this.contentTarget, NodeFilter.SHOW_TEXT, null)
-    let offset = 0
-    let node
-
-    while ((node = walker.nextNode())) {
-      if (range.startContainer === node) {
-        offset += range.startOffset
-        break
-      }
-      offset += node.textContent.length
-    }
-
-    return offset
-  }
-
-  highlightAnchors() {
-    // Remove existing anchor highlights before re-highlighting
-    this.contentTarget.querySelectorAll("mark.anchor-highlight").forEach(mark => {
-      const parent = mark.parentNode
-      while (mark.firstChild) parent.insertBefore(mark.firstChild, mark)
-      parent.removeChild(mark)
-    })
-    this.contentTarget.normalize()
-
-    // Build full text once for position lookups
-    this.fullText = this.contentTarget.textContent
-
-    const threads = this.element.querySelectorAll("[data-anchor-text]")
-    threads.forEach(thread => {
-      const anchor = thread.dataset.anchorText
-      const context = thread.dataset.anchorContext
-      if (anchor && anchor.length > 0) {
-        this.findAndHighlightWithContext(anchor, context, "anchor-highlight")
-      }
-    })
-
-    this.positionThreads()
-  }
-
-  // Re-highlight and reposition when threads are added/removed via turbo stream broadcasts
-  observeThreadLists() {
-    this.threadListObserver = new MutationObserver(() => {
-      // Debounce — multiple mutations may fire in quick succession
-      clearTimeout(this._repositionTimer)
-      this._repositionTimer = setTimeout(() => this.highlightAnchors(), 50)
-    })
-
-    this.element.querySelectorAll(".comment-threads-list").forEach(list => {
-      this.threadListObserver.observe(list, { childList: true })
-    })
-  }
-
-  repositionThreads() {
-    // Small delay to let the tab panel become visible before measuring positions
-    setTimeout(() => this.positionThreads(), 10)
-  }
-
-  positionThreads() {
-    const sidebar = this.element.querySelector(".plan-layout__sidebar")
-    if (!sidebar) return
-
-    // Pause observer while reordering DOM to avoid triggering a rehighlight loop
-    if (this.threadListObserver) this.threadListObserver.disconnect()
-
-    this.positionThreadList("#comment-threads", sidebar)
-    this.positionThreadList("#resolved-comment-threads", sidebar)
-
-    // Re-observe after reordering
-    if (this.threadListObserver) {
-      this.element.querySelectorAll(".comment-threads-list").forEach(list => {
-        this.threadListObserver.observe(list, { childList: true })
-      })
-    }
-  }
-
-  positionThreadList(selector, sidebar) {
-    const threadList = this.element.querySelector(selector)
-    if (!threadList) return
-
-    const threads = Array.from(threadList.querySelectorAll(".comment-thread"))
-    if (threads.length === 0) return
-
-    const sidebarRect = sidebar.getBoundingClientRect()
-
-    // Sort threads by their anchor's vertical position in the document
-    threads.sort((a, b) => {
-      const markA = a._highlightMark
-      const markB = b._highlightMark
-      const yA = markA ? markA.getBoundingClientRect().top : Infinity
-      const yB = markB ? markB.getBoundingClientRect().top : Infinity
-      return yA - yB
-    })
-
-    // Reorder DOM within this list only
-    threads.forEach(thread => threadList.appendChild(thread))
-
-    // Position threads vertically
-    const gap = 8
-    let cursor = 0
-
-    threads.forEach(thread => {
-      const mark = thread._highlightMark
-      let desiredY = cursor
-
-      if (mark) {
-        desiredY = mark.getBoundingClientRect().top - sidebarRect.top + sidebar.scrollTop
-      }
-
-      const y = Math.max(desiredY, cursor)
-      thread.style.marginTop = `${y - cursor}px`
-      cursor = y + thread.offsetHeight + gap
-    })
-  }
-
-  findAndHighlightWithContext(text, context, className) {
-    // Use context to find the right occurrence of the anchor text
-    const fullText = this.fullText
-    let targetIndex
-
-    if (context && context.length > 0) {
-      const contextIndex = fullText.indexOf(context)
-      if (contextIndex !== -1) {
-        // Find the anchor text within the context region
-        targetIndex = fullText.indexOf(text, contextIndex)
-        if (targetIndex === -1 || targetIndex > contextIndex + context.length) {
-          targetIndex = fullText.indexOf(text) // fallback
-        }
-      } else {
-        targetIndex = fullText.indexOf(text)
-      }
-    } else {
-      targetIndex = fullText.indexOf(text)
-    }
-
-    if (targetIndex === -1) return null
-
-    // Find the thread element to store the mark reference
-    const threads = this.element.querySelectorAll(".comment-thread[data-anchor-text]")
-    let threadEl = null
-    for (const t of threads) {
-      if (t.dataset.anchorText === text && t.dataset.anchorContext === (context || "")) {
-        threadEl = t
-        break
-      }
-    }
-
-    const mark = this.highlightAtIndex(targetIndex, text.length, className)
-    if (mark && threadEl) threadEl._highlightMark = mark
-    return mark
-  }
-
-  highlightAtIndex(startIndex, length, className) {
-    if (startIndex < 0 || length <= 0) return null
-
-    const walker = document.createTreeWalker(
-      this.contentTarget,
-      NodeFilter.SHOW_TEXT,
-      null,
-      false
-    )
-
-    const textNodes = []
-    let fullText = ""
-    let node
-    while (node = walker.nextNode()) {
-      textNodes.push({ node, start: fullText.length })
-      fullText += node.textContent
-    }
-
-    const matchEnd = startIndex + length
-    let firstHighlighted = null
-
-    for (let i = 0; i < textNodes.length; i++) {
-      const tn = textNodes[i]
-      const nodeEnd = tn.start + tn.node.textContent.length
-
-      if (nodeEnd <= startIndex) continue
-      if (tn.start >= matchEnd) break
-
-      const localStart = Math.max(0, startIndex - tn.start)
-      const localEnd = Math.min(tn.node.textContent.length, matchEnd - tn.start)
-
-      const range = document.createRange()
-      range.setStart(tn.node, localStart)
-      range.setEnd(tn.node, localEnd)
-
-      const mark = document.createElement("mark")
-      mark.className = className
-      range.surroundContents(mark)
-
-      if (!firstHighlighted) firstHighlighted = mark
-    }
-
-    return firstHighlighted
-  }
-
-  // Keep legacy method for scrollToAnchor (single-use highlight)
-  findAndHighlight(text, className) {
-    if (!text || text.length === 0) return null
-    const fullText = this.contentTarget.textContent
-    const index = fullText.indexOf(text)
-    if (index === -1) return null
-    return this.highlightAtIndex(index, text.length, className)
-  }
-}