coplan-engine 0.1.3 → 0.4.0

data/app/javascript/controllers/coplan/text_selection_controller.js

@@ -1,21 +1,34 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["content", "popover", "form", "anchorInput", "contextInput", "occurrenceInput", "anchorPreview", "anchorQuote"]
+  static targets = ["content", "popover", "form", "anchorInput", "contextInput", "occurrenceInput", "anchorPreview", "anchorQuote", "margin", "threads"]
   static values = { planId: String }
 
   connect() {
     this.selectedText = null
+    this._activeMark = null
+    this._activePopover = null
     this.contentTarget.addEventListener("mouseup", this.handleMouseUp.bind(this))
     document.addEventListener("mousedown", this.handleDocumentMouseDown.bind(this))
+    this._handleScroll = this._handleScroll.bind(this)
+    window.addEventListener("scroll", this._handleScroll, { passive: true })
     this.highlightAnchors()
-    this.observeThreadLists()
+
+    // Watch for broadcast-appended threads and re-highlight
+    if (this.hasThreadsTarget) {
+      this._threadsObserver = new MutationObserver(() => this.highlightAnchors())
+      this._threadsObserver.observe(this.threadsTarget, { childList: true })
+    }
   }
 
   disconnect() {
     this.contentTarget.removeEventListener("mouseup", this.handleMouseUp.bind(this))
     document.removeEventListener("mousedown", this.handleDocumentMouseDown.bind(this))
-    if (this.threadListObserver) this.threadListObserver.disconnect()
+    window.removeEventListener("scroll", this._handleScroll)
+    if (this._threadsObserver) {
+      this._threadsObserver.disconnect()
+      this._threadsObserver = null
+    }
   }
 
   handleMouseUp(event) {
@@ -32,17 +45,33 @@ export default class extends Controller {
 
   checkSelection(event) {
     const selection = window.getSelection()
-    const text = selection.toString().trim()
 
-    if (text.length < 3) {
-      this.popoverTarget.style.display = "none"
+    if (!selection.rangeCount) return
+    const range = selection.getRangeAt(0)
+
+    // Make sure at least part of the selection is within the content area.
+    // Whole-line selections (e.g. triple-click) can set commonAncestorContainer
+    // to a parent element above contentTarget, so we check start/end individually.
+    const startInContent = this.contentTarget.contains(range.startContainer)
+    const endInContent = this.contentTarget.contains(range.endContainer)
+    if (!startInContent) {
       return
     }
 
-    // Make sure selection is within the content area
-    if (!selection.rangeCount) return
-    const range = selection.getRangeAt(0)
-    if (!this.contentTarget.contains(range.commonAncestorContainer)) {
+    // Clamp the range to the last rendered markdown element, not the
+    // content wrapper's lastChild (which is a hidden popover/form control).
+    if (startInContent && !endInContent) {
+      const clampTarget = this.hasPopoverTarget
+        ? this.popoverTarget.previousElementSibling || this.popoverTarget.previousSibling
+        : this.contentTarget.lastChild
+      if (clampTarget) range.setEndAfter(clampTarget)
+    }
+
+    // Extract text after clamping so it only contains content-area text
+    const text = selection.toString().trim()
+
+    if (text.length < 3) {
+      this.popoverTarget.style.display = "none"
       return
     }
 
@@ -72,14 +101,9 @@ export default class extends Controller {
       : 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
+    // Position form where the popover was, then show it
+    this.formTarget.style.top = this.popoverTarget.style.top
+    this.formTarget.style.left = this.popoverTarget.style.left
     this.formTarget.style.display = "block"
     this.popoverTarget.style.display = "none"
 
@@ -108,7 +132,10 @@ export default class extends Controller {
     if (event.detail.success) {
       const form = event.target
       const textarea = form.querySelector("textarea")
-      if (textarea) textarea.value = ""
+      if (textarea) {
+        textarea.value = ""
+        textarea.blur()
+      }
     }
   }
 
@@ -129,7 +156,6 @@ export default class extends Controller {
     const anchor = event.currentTarget.dataset.anchor
     if (!anchor) return
 
-    const context = event.currentTarget.closest("[data-anchor-context]")?.dataset.anchorContext || ""
     const occurrence = event.currentTarget.dataset.anchorOccurrence
 
     // Remove existing highlights first
@@ -140,13 +166,64 @@ export default class extends Controller {
     // Build full text for position lookups
     this.fullText = this.contentTarget.textContent
 
-    // Find and highlight using occurrence index (most reliable), then context, then first match
-    const highlighted = this.findAndHighlightForThread(anchor, context, occurrence, "anchor-highlight--active", null)
+    const highlighted = this.findAndHighlight(anchor, occurrence, "anchor-highlight--active")
     if (highlighted) {
       highlighted.scrollIntoView({ behavior: "smooth", block: "center" })
     }
   }
 
+  openThreadPopover(event) {
+    const threadId = event.currentTarget.dataset.threadId
+    if (!threadId) return
+
+    const popover = document.getElementById(`${threadId}_popover`)
+    if (!popover) return
+
+    const trigger = event.currentTarget
+
+    popover.style.visibility = "hidden"
+    popover.showPopover()
+    this._positionPopoverAtMark(popover, trigger)
+    popover.style.visibility = "visible"
+
+    this._activeMark = trigger
+    this._activePopover = popover
+  }
+
+  _handleScroll() {
+    if (!this._activeMark || !this._activePopover) return
+    try {
+      if (!this._activePopover.matches(":popover-open")) {
+        this._activeMark = null
+        this._activePopover = null
+        return
+      }
+    } catch { return }
+    this._positionPopoverAtMark(this._activePopover, this._activeMark)
+  }
+
+  _positionPopoverAtMark(popover, mark) {
+    const markRect = mark.getBoundingClientRect()
+    const popoverRect = popover.getBoundingClientRect()
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    let top = markRect.top
+    let left = markRect.right + 12
+
+    if (left + popoverRect.width > viewportWidth - 16) {
+      left = markRect.left - popoverRect.width - 12
+    }
+    if (top + popoverRect.height > viewportHeight - 16) {
+      top = viewportHeight - popoverRect.height - 16
+    }
+    if (top < 16) top = 16
+    if (left < 16) left = 16
+
+    popover.style.top = `${top}px`
+    popover.style.left = `${left}px`
+  }
+
   extractContext(range, selectedText) {
     // Grab surrounding text for disambiguation
     const fullText = this.contentTarget.textContent
@@ -214,105 +291,66 @@ export default class extends Controller {
     })
     this.contentTarget.normalize()
 
+    // Clear margin dots
+    if (this.hasMarginTarget) {
+      this.marginTarget.innerHTML = ""
+    }
+
     // 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
       const occurrence = thread.dataset.anchorOccurrence
+      const status = thread.dataset.threadStatus || "pending"
+      const threadId = thread.id
+
       if (anchor && anchor.length > 0) {
-        this.findAndHighlightForThread(anchor, context, occurrence, "anchor-highlight", thread)
+        const isOpen = status === "pending" || status === "todo"
+        const statusClass = isOpen ? "anchor-highlight--open" : "anchor-highlight--resolved"
+        const specificClass = isOpen ? `anchor-highlight--${status}` : ""
+        const classes = `anchor-highlight ${statusClass} ${specificClass}`.trim()
+        const mark = this.findAndHighlight(anchor, occurrence, classes)
+
+        if (mark && threadId) {
+          // Make highlight clickable to open popover
+          mark.dataset.threadId = threadId
+          mark.style.cursor = "pointer"
+          mark.addEventListener("click", (e) => this.openThreadPopover(e))
+
+          // Create margin dot
+          if (this.hasMarginTarget) {
+            this.createMarginDot(mark, threadId, status)
+          }
+        }
       }
     })
-
-    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
-    })
+  createMarginDot(highlightMark, threadId, status) {
+    const contentRect = this.contentTarget.getBoundingClientRect()
+    const markRect = highlightMark.getBoundingClientRect()
+    const marginRect = this.marginTarget.getBoundingClientRect()
+
+    const dot = document.createElement("button")
+    const isOpen = status === "pending" || status === "todo"
+    const openClass = isOpen ? `margin-dot--open margin-dot--${status}` : "margin-dot--resolved"
+    dot.className = `margin-dot ${openClass}`
+    dot.style.top = `${markRect.top - marginRect.top}px`
+    dot.dataset.threadId = threadId
+    dot.addEventListener("click", (e) => this.openThreadPopover(e))
+    dot.setAttribute("aria-label", `${status} comment`)
+
+    this.marginTarget.appendChild(dot)
   }
 
-  // Primary highlight method: uses occurrence index (from server-side OT positions)
-  // to find the correct Nth occurrence of anchor text in the rendered DOM.
-  // Falls back to context matching, then to first occurrence.
-  findAndHighlightForThread(text, context, occurrence, className, threadEl) {
+  // Find and highlight the Nth occurrence of text in the rendered DOM.
+  // Uses the occurrence index from server-side positional data.
+  findAndHighlight(text, occurrence, className) {
     const fullText = this.fullText
     let targetIndex = -1
 
-    // Strategy 1: Use the occurrence index from the server (most reliable)
     if (occurrence !== undefined && occurrence !== "") {
       const occurrenceNum = parseInt(occurrence, 10)
       if (!isNaN(occurrenceNum)) {
@@ -320,27 +358,9 @@ export default class extends Controller {
       }
     }
 
-    // Strategy 2: Fall back to context matching
-    if (targetIndex === -1 && context && context.length > 0) {
-      const contextIndex = fullText.indexOf(context)
-      if (contextIndex !== -1) {
-        targetIndex = fullText.indexOf(text, contextIndex)
-        if (targetIndex === -1 || targetIndex > contextIndex + context.length) {
-          targetIndex = fullText.indexOf(text)
-        }
-      }
-    }
-
-    // Strategy 3: Fall back to first occurrence
-    if (targetIndex === -1) {
-      targetIndex = fullText.indexOf(text)
-    }
-
     if (targetIndex === -1) return null
 
-    const mark = this.highlightAtIndex(targetIndex, text.length, className)
-    if (mark && threadEl) threadEl._highlightMark = mark
-    return mark
+    return this.highlightAtIndex(targetIndex, text.length, className)
   }
 
   findNthOccurrence(text, search, n) {
@@ -352,43 +372,6 @@ export default class extends Controller {
     return pos
   }
 
-  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
 
@@ -433,13 +416,4 @@ export default class extends Controller {
 
     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)
-  }
 }

data/app/jobs/coplan/automated_review_job.rb

@@ -46,7 +46,7 @@ module CoPlan
           plan_version: version,
           created_by_user: created_by,
           anchor_text: item[:anchor_text],
-          status: "open"
+          status: "pending"
         )
 
         thread.comments.create!(
@@ -60,10 +60,10 @@ module CoPlan
     end
 
     def broadcast_new_thread(plan, thread)
-      Broadcaster.prepend_to(
+      Broadcaster.append_to(
         plan,
-        target: "comment-threads",
-        partial: "coplan/comment_threads/thread",
+        target: "plan-threads",
+        partial: "coplan/comment_threads/thread_popover",
         locals: { thread: thread, plan: plan }
       )
     end

data/app/models/coplan/comment_thread.rb

@@ -1,6 +1,8 @@
 module CoPlan
   class CommentThread < ApplicationRecord
-    STATUSES = %w[open resolved accepted dismissed].freeze
+    STATUSES = %w[pending todo resolved discarded].freeze
+    OPEN_STATUSES = %w[pending todo].freeze
+    CLOSED_STATUSES = %w[resolved discarded].freeze
 
     attr_accessor :anchor_occurrence
 
@@ -16,10 +18,10 @@ module CoPlan
 
     before_create :resolve_anchor_position
 
-    scope :open_threads, -> { where(status: "open") }
+    scope :open_threads, -> { where(status: OPEN_STATUSES) }
     scope :current, -> { where(out_of_date: false) }
-    scope :active, -> { where(status: "open", out_of_date: false) }
-    scope :archived, -> { where("status != 'open' OR out_of_date = ?", true) }
+    scope :active, -> { where(status: OPEN_STATUSES, out_of_date: false) }
+    scope :archived, -> { where("status NOT IN (?) OR out_of_date = ?", OPEN_STATUSES, true) }
 
     # Transforms anchor positions through intervening version edits using OT.
     # Threads without positional data (anchor_start/anchor_end/anchor_revision)
@@ -94,11 +96,15 @@ module CoPlan
     end
 
     def accept!(user)
-      update!(status: "accepted", resolved_by_user: user)
+      update!(status: "todo", resolved_by_user: user)
     end
 
-    def dismiss!(user)
-      update!(status: "dismissed", resolved_by_user: user)
+    def discard!(user)
+      update!(status: "discarded", resolved_by_user: user)
+    end
+
+    def open?
+      OPEN_STATUSES.include?(status)
     end
 
     def anchor_valid?

data/app/policies/coplan/comment_thread_policy.rb

@@ -12,7 +12,7 @@ module CoPlan
       record.plan.created_by_user_id == user.id
     end
 
-    def dismiss?
+    def discard?
       record.plan.created_by_user_id == user.id
     end
 

data/app/services/coplan/plans/apply_operations.rb

@@ -21,6 +21,8 @@ module CoPlan
             apply_insert_under_heading(op, index)
           when "delete_paragraph_containing"
             apply_delete_paragraph_containing(op, index)
+          when "replace_section"
+            apply_replace_section(op, index)
           else
             raise OperationError, "Operation #{index}: unknown op '#{op["op"]}'"
           end
@@ -103,6 +105,47 @@ module CoPlan
         applied_data
       end
 
+      def apply_replace_section(op, index)
+        heading = op["heading"]
+        new_content = op["new_content"]
+
+        raise OperationError, "Operation #{index}: replace_section requires 'heading'" if heading.blank?
+        raise OperationError, "Operation #{index}: replace_section requires 'new_content'" if new_content.nil?
+
+        range = if op.key?("_pre_resolved_ranges")
+          op["_pre_resolved_ranges"][0]
+        else
+          Plans::PositionResolver.call(content: @content, operation: op).ranges[0]
+        end
+
+        # For body-only replacements (include_heading: false), ensure
+        # newlines separate the heading from new content and new content
+        # from the next section.
+        include_heading = op.fetch("include_heading", true)
+        include_heading = include_heading != false && include_heading != "false"
+        effective_content = new_content
+        if !include_heading && range[0] == range[1]
+          # Prepend newline if heading line doesn't end with one
+          if range[0] > 0 && @content[range[0] - 1] != "\n"
+            effective_content = "\n#{effective_content}"
+          end
+          # Append newline if next content starts without one
+          after = @content[range[1]]
+          if after && after != "\n" && !effective_content.end_with?("\n")
+            effective_content = "#{effective_content}\n"
+          end
+        end
+
+        @content = @content[0...range[0]] + effective_content + @content[range[1]..]
+
+        delta = effective_content.length - (range[1] - range[0])
+        applied_data = op.except("_pre_resolved_ranges")
+        applied_data["resolved_range"] = range
+        applied_data["new_range"] = [range[0], range[0] + effective_content.length]
+        applied_data["delta"] = delta
+        applied_data
+      end
+
       def apply_delete_paragraph_containing(op, index)
         needle = op["needle"]
 

data/app/services/coplan/plans/commit_session.rb

@@ -65,7 +65,7 @@ module CoPlan
             rebased_ops = []
             @session.operations_json.each do |op_data|
               op_data = op_data.transform_keys(&:to_s)
-              semantic_keys = %w[op old_text new_text heading content needle occurrence replace_all count]
+              semantic_keys = %w[op old_text new_text heading content needle occurrence replace_all count new_content include_heading]
               semantic_op = op_data.slice(*semantic_keys)
 
               if op_data["resolved_range"]
@@ -179,6 +179,31 @@ module CoPlan
 
           raise SessionConflictError,
             "Paragraph at target position no longer contains '#{op_data["needle"]}'"
+        when "replace_section"
+          return unless op_data["heading"]
+          include_heading = op_data.fetch("include_heading", true)
+          include_heading = include_heading != false && include_heading != "false"
+
+          if include_heading
+            first_line_end = content.index("\n", range[0]) || range[1]
+            first_line = content[range[0]...[first_line_end, range[1]].min]
+            return if first_line&.rstrip == op_data["heading"]&.rstrip
+
+            raise SessionConflictError,
+              "Section heading changed at target position. Expected '#{op_data["heading"]}' " \
+              "but found '#{first_line}'"
+          else
+            search_pos = range[0]
+            search_pos -= 1 while search_pos > 0 && content[search_pos - 1] == "\n"
+            heading_line_end = search_pos
+            heading_line_start = search_pos > 0 ? (content.rindex("\n", search_pos - 1) || -1) + 1 : 0
+            heading_text = content[heading_line_start...heading_line_end]
+            return if heading_text == op_data["heading"]
+
+            raise SessionConflictError,
+              "Section heading before target position changed. Expected '#{op_data["heading"]}' " \
+              "but found '#{heading_text}'"
+          end
         end
       end
     end