coplan-engine 0.4.0 → 1.0.0

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

@@ -0,0 +1,252 @@
+import { Controller } from "@hotwired/stimulus"
+
+const STORAGE_KEY = "coplan:content-nav-visible"
+
+export default class extends Controller {
+  static targets = ["sidebar", "list", "content", "toggleBtn", "showBtn"]
+  static values = { visible: { type: Boolean, default: true } }
+
+  connect() {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored !== null) {
+      this.visibleValue = stored === "true"
+    }
+
+    this.buildToc()
+    this.setupScrollTracking()
+
+    this.handleKeydown = this.handleKeydown.bind(this)
+    document.addEventListener("keydown", this.handleKeydown)
+
+    this._handleAnchorsUpdated = () => this.updateCommentBadges()
+    this.element.addEventListener("coplan:anchors-updated", this._handleAnchorsUpdated)
+  }
+
+  disconnect() {
+    if (this._scrollHandler) {
+      window.removeEventListener("scroll", this._scrollHandler)
+    }
+    document.removeEventListener("keydown", this.handleKeydown)
+    if (this._handleAnchorsUpdated) {
+      this.element.removeEventListener("coplan:anchors-updated", this._handleAnchorsUpdated)
+    }
+  }
+
+  buildToc() {
+    const rendered = this.contentTarget.querySelector(".markdown-rendered")
+    if (!rendered) return
+
+    this.listTarget.innerHTML = ""
+    this._itemsById = new Map()
+    this._headings = Array.from(rendered.querySelectorAll("h1, h2, h3"))
+
+    if (this._headings.length === 0) {
+      this.sidebarTarget.style.display = "none"
+      if (this.hasShowBtnTarget) this.showBtnTarget.style.display = "none"
+      return
+    }
+    this.sidebarTarget.style.display = ""
+    if (this.hasShowBtnTarget) this.showBtnTarget.style.display = ""
+
+    const usedIds = new Set()
+
+    this._headings.forEach((heading, index) => {
+      let baseId = heading.id || this.slugify(heading.textContent) || `section-${index + 1}`
+      let id = baseId
+      let suffix = 2
+      while (usedIds.has(id)) {
+        id = `${baseId}-${suffix++}`
+      }
+      heading.id = id
+      usedIds.add(id)
+
+      const li = document.createElement("li")
+      li.className = `content-nav__item content-nav__item--${heading.tagName.toLowerCase()}`
+      li.dataset.headingId = id
+
+      const a = document.createElement("a")
+      a.className = "content-nav__link"
+      a.href = `#${id}`
+      a.addEventListener("click", (e) => this.handleLinkClick(e, heading))
+
+      const text = document.createElement("span")
+      text.className = "content-nav__link-text"
+      text.textContent = heading.textContent
+      a.appendChild(text)
+
+      li.appendChild(a)
+      this.listTarget.appendChild(li)
+      this._itemsById.set(id, li)
+    })
+
+    this.updateCommentBadges()
+  }
+
+  slugify(text) {
+    return text
+      .toLowerCase()
+      .replace(/\s+/g, "-")
+      .replace(/[^a-z0-9-]/g, "")
+      .replace(/-{2,}/g, "-")
+      .replace(/^-|-$/g, "")
+  }
+
+  setupScrollTracking() {
+    if (!this._headings || this._headings.length === 0) return
+
+    this._scrollHandler = () => {
+      if (this._ignoreScroll) {
+        clearTimeout(this._scrollEndTimer)
+        this._scrollEndTimer = setTimeout(() => {
+          this._ignoreScroll = false
+        }, 100)
+        return
+      }
+      if (!this._scrollTicking) {
+        requestAnimationFrame(() => {
+          this._updateActiveFromScroll()
+          this._scrollTicking = false
+        })
+        this._scrollTicking = true
+      }
+    }
+    window.addEventListener("scroll", this._scrollHandler, { passive: true })
+    this._updateActiveFromScroll()
+  }
+
+  _updateActiveFromScroll() {
+    const threshold = 100
+    let active = null
+    for (const heading of this._headings) {
+      if (heading.getBoundingClientRect().top <= threshold) {
+        active = heading
+      } else {
+        break
+      }
+    }
+
+    const id = active?.id || this._headings[0]?.id
+    if (id && id !== this._activeHeadingId) {
+      this._activeHeadingId = id
+      this._setActiveLink(id)
+    }
+  }
+
+  handleLinkClick(event, heading) {
+    event.preventDefault()
+    history.replaceState(null, "", `#${heading.id}`)
+
+    this._ignoreScroll = true
+    this._activeHeadingId = heading.id
+    this._setActiveLink(heading.id)
+
+    heading.scrollIntoView({ behavior: "smooth", block: "start" })
+  }
+
+  _setActiveLink(id) {
+    this.listTarget.querySelectorAll(".content-nav__link").forEach(link => {
+      link.classList.remove("content-nav__link--active")
+    })
+
+    const item = this._itemsById?.get(id)
+    const link = item?.querySelector(".content-nav__link")
+    if (link) {
+      link.classList.add("content-nav__link--active")
+      link.scrollIntoView({ block: "nearest" })
+    }
+  }
+
+  toggle() {
+    this.visibleValue = !this.visibleValue
+    localStorage.setItem(STORAGE_KEY, this.visibleValue)
+  }
+
+  visibleValueChanged() {
+    if (!this.hasSidebarTarget) return
+
+    const hidden = !this.visibleValue
+    this.sidebarTarget.classList.toggle("content-nav--hidden", hidden)
+    this.sidebarTarget.setAttribute("aria-hidden", String(hidden))
+    if (hidden) {
+      this.sidebarTarget.setAttribute("inert", "")
+    } else {
+      this.sidebarTarget.removeAttribute("inert")
+    }
+
+    if (this.hasToggleBtnTarget) {
+      this.toggleBtnTarget.setAttribute("aria-expanded", String(this.visibleValue))
+    }
+  }
+
+  handleKeydown(event) {
+    const tag = event.target.tagName
+    if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || event.target.isContentEditable) return
+    if (event.metaKey || event.ctrlKey || event.altKey) return
+
+    if (event.key === "]") {
+      event.preventDefault()
+      this.toggle()
+    }
+  }
+
+  updateCommentBadges() {
+    if (!this._headings || this._headings.length === 0) return
+
+    const rendered = this.contentTarget.querySelector(".markdown-rendered")
+    if (!rendered) return
+
+    this._headings.forEach((heading, index) => {
+      const nextHeading = this._headings[index + 1]
+      const threads = this.collectThreadsBetween(heading, nextHeading, rendered)
+
+      let pendingCount = 0
+      let todoCount = 0
+      threads.forEach(status => {
+        if (status === "pending") pendingCount++
+        else if (status === "todo") todoCount++
+      })
+
+      const item = this._itemsById?.get(heading.id)
+      if (!item) return
+
+      const existing = item.querySelector(".content-nav__badge")
+      if (existing) existing.remove()
+
+      const total = pendingCount + todoCount
+      if (total === 0) return
+
+      const badge = document.createElement("span")
+      const badgeType = pendingCount > 0 ? "pending" : "todo"
+      badge.className = `content-nav__badge content-nav__badge--${badgeType}`
+      badge.textContent = total
+      item.querySelector(".content-nav__link").appendChild(badge)
+    })
+  }
+
+  collectThreadsBetween(startHeading, endHeading, container) {
+    const seen = new Set()
+    const threads = []
+    let collecting = false
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, null)
+
+    let node
+    while ((node = walker.nextNode())) {
+      if (node === startHeading) {
+        collecting = true
+        continue
+      }
+      if (endHeading && node === endHeading) break
+
+      if (collecting && node.tagName === "MARK" && node.classList.contains("anchor-highlight--open")) {
+        const threadId = node.dataset.threadId
+        if (threadId && !seen.has(threadId)) {
+          seen.add(threadId)
+          const status = node.classList.contains("anchor-highlight--pending") ? "pending" : "todo"
+          threads.push(status)
+        }
+      }
+    }
+
+    return threads
+  }
+}

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

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus"
+import { createConsumer } from "@rails/actioncable"
+
+let sharedConsumer
+
+function getConsumer() {
+  if (!sharedConsumer) sharedConsumer = createConsumer()
+  return sharedConsumer
+}
+
+export default class extends Controller {
+  static values = { planId: String }
+
+  connect() {
+    this.channel = getConsumer().subscriptions.create(
+      { channel: "CoPlan::PlanPresenceChannel", plan_id: this.planIdValue },
+      {
+        connected: () => { this.startPinging() },
+        disconnected: () => { this.stopPinging() }
+      }
+    )
+  }
+
+  disconnect() {
+    this.stopPinging()
+    if (this.channel) {
+      this.channel.unsubscribe()
+      this.channel = null
+    }
+  }
+
+  startPinging() {
+    this.pingInterval = setInterval(() => {
+      if (this.channel) this.channel.perform("ping")
+    }, 15000)
+  }
+
+  stopPinging() {
+    if (this.pingInterval) {
+      clearInterval(this.pingInterval)
+      this.pingInterval = null
+    }
+  }
+}

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

@@ -8,9 +8,11 @@ export default class extends Controller {
     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._boundHandleMouseUp = this.handleMouseUp.bind(this)
+    this._boundHandleDocumentMouseDown = this.handleDocumentMouseDown.bind(this)
     this._handleScroll = this._handleScroll.bind(this)
+    this.contentTarget.addEventListener("mouseup", this._boundHandleMouseUp)
+    document.addEventListener("mousedown", this._boundHandleDocumentMouseDown)
     window.addEventListener("scroll", this._handleScroll, { passive: true })
     this.highlightAnchors()
 
@@ -22,8 +24,8 @@ export default class extends Controller {
   }
 
   disconnect() {
-    this.contentTarget.removeEventListener("mouseup", this.handleMouseUp.bind(this))
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown.bind(this))
+    this.contentTarget.removeEventListener("mouseup", this._boundHandleMouseUp)
+    document.removeEventListener("mousedown", this._boundHandleDocumentMouseDown)
     window.removeEventListener("scroll", this._handleScroll)
     if (this._threadsObserver) {
       this._threadsObserver.disconnect()
@@ -36,6 +38,20 @@ export default class extends Controller {
     setTimeout(() => this.checkSelection(event), 10)
   }
 
+  dismiss(event) {
+    // Close the comment form if it's visible
+    if (this.hasFormTarget && this.formTarget.style.display === "block") {
+      event.preventDefault()
+      this.hideAndResetForm()
+      return
+    }
+    // Close the selection popover if it's visible
+    if (this.hasPopoverTarget && this.popoverTarget.style.display === "block") {
+      event.preventDefault()
+      this.popoverTarget.style.display = "none"
+    }
+  }
+
   handleDocumentMouseDown(event) {
     // Hide popover if clicking outside it
     if (this.hasPopoverTarget && !this.popoverTarget.contains(event.target)) {
@@ -67,8 +83,11 @@ export default class extends Controller {
       if (clampTarget) range.setEndAfter(clampTarget)
     }
 
-    // Extract text after clamping so it only contains content-area text
-    const text = selection.toString().trim()
+    // Extract text after clamping so it only contains content-area text.
+    // Normalize tabs to spaces — browser selections across table cells
+    // produce tab-separated text, but the server matches against
+    // space-separated plain text extracted from the markdown AST.
+    const text = selection.toString().replace(/\t/g, " ").trim()
 
     if (text.length < 3) {
       this.popoverTarget.style.display = "none"
@@ -251,15 +270,22 @@ export default class extends Controller {
 
   // Computes the 1-based occurrence number of the selected text in the DOM content.
   // This is sent to the server so resolve_anchor_position picks the right match.
+  // Uses whitespace-normalized matching for consistency with findAndHighlight.
   computeOccurrence(range, text) {
     const offset = this.getSelectionOffset(range)
     const fullText = this.contentTarget.textContent
+    const { normText, origIndices } = this._buildNormalizedMap(fullText)
+    const normSearch = this._normalizeWhitespace(text)
+
+    // Map the DOM offset to the normalized string offset
+    let normOffset = origIndices.findIndex(orig => orig >= offset)
+    if (normOffset === -1) normOffset = normText.length
 
     let count = 0
     let pos = -1
-    while ((pos = fullText.indexOf(text, pos + 1)) !== -1) {
+    while ((pos = normText.indexOf(normSearch, pos + 1)) !== -1) {
       count++
-      if (pos >= offset) return count
+      if (pos >= normOffset) return count
     }
     return count > 0 ? count : 1
   }
@@ -311,21 +337,29 @@ export default class extends Controller {
         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
+        const marks = this.findAndHighlightAll(anchor, occurrence, classes)
+
+        if (marks.length > 0 && threadId) {
+          // Make all highlight marks clickable to open popover.
+          // If a mark is shared with another thread, keep the first
+          // thread's binding — the margin dot still provides access.
+          marks.forEach(mark => {
+            if (!mark.dataset.threadId) {
+              mark.dataset.threadId = threadId
+              mark.style.cursor = "pointer"
+              mark.addEventListener("click", (e) => this.openThreadPopover(e))
+            }
+          })
+
+          // Create margin dot aligned to the first mark
           if (this.hasMarginTarget) {
-            this.createMarginDot(mark, threadId, status)
+            this.createMarginDot(marks[0], threadId, status)
           }
         }
       }
     })
+
+    this.element.dispatchEvent(new CustomEvent("coplan:anchors-updated", { bubbles: true }))
   }
 
   createMarginDot(highlightMark, threadId, status) {
@@ -347,33 +381,94 @@ export default class extends Controller {
 
   // Find and highlight the Nth occurrence of text in the rendered DOM.
   // Uses the occurrence index from server-side positional data.
+  // Performs whitespace-normalized matching so that anchor text captured
+  // from browser selections (which may differ in whitespace from the DOM
+  // textContent, e.g. tabs in table selections) can still be located.
   findAndHighlight(text, occurrence, className) {
     const fullText = this.fullText
-    let targetIndex = -1
 
-    if (occurrence !== undefined && occurrence !== "") {
-      const occurrenceNum = parseInt(occurrence, 10)
-      if (!isNaN(occurrenceNum)) {
-        targetIndex = this.findNthOccurrence(fullText, text, occurrenceNum)
+    if (occurrence === undefined || occurrence === "") return null
+
+    const occurrenceNum = parseInt(occurrence, 10)
+    if (isNaN(occurrenceNum)) return null
+
+    const match = this._findNthNormalized(fullText, text, occurrenceNum)
+    if (!match) return null
+
+    return this.highlightAtIndex(match.startIndex, match.matchLength, className)
+  }
+
+  // Like findAndHighlight but returns all created/reused marks (for multi-cell spans).
+  findAndHighlightAll(text, occurrence, className) {
+    const fullText = this.fullText
+
+    if (occurrence === undefined || occurrence === "") return []
+
+    const occurrenceNum = parseInt(occurrence, 10)
+    if (isNaN(occurrenceNum)) return []
+
+    const match = this._findNthNormalized(fullText, text, occurrenceNum)
+    if (!match) return []
+
+    return this.highlightAtIndexAll(match.startIndex, match.matchLength, className)
+  }
+
+  // Collapses runs of whitespace (spaces, tabs, newlines) into single spaces.
+  _normalizeWhitespace(str) {
+    return str.replace(/\s+/g, " ")
+  }
+
+  // Builds a whitespace-normalized version of `text` with a parallel array
+  // mapping each normalized position back to its original index.
+  // Returns { normText, origIndices } where origIndices[i] is the original
+  // index of the character at normalized position i.
+  _buildNormalizedMap(text) {
+    let normText = ""
+    const origIndices = []
+    let inWhitespace = false
+
+    for (let i = 0; i < text.length; i++) {
+      if (/\s/.test(text[i])) {
+        if (!inWhitespace) {
+          normText += " "
+          origIndices.push(i)
+          inWhitespace = true
+        }
+      } else {
+        normText += text[i]
+        origIndices.push(i)
+        inWhitespace = false
       }
     }
 
-    if (targetIndex === -1) return null
-
-    return this.highlightAtIndex(targetIndex, text.length, className)
+    return { normText, origIndices }
   }
 
-  findNthOccurrence(text, search, n) {
+  // Finds the Nth occurrence of `search` in `text` using whitespace-normalized
+  // matching. Returns { startIndex, matchLength } in the *original* text,
+  // or null if not found.
+  _findNthNormalized(text, search, n) {
+    const { normText, origIndices } = this._buildNormalizedMap(text)
+    const normSearch = this._normalizeWhitespace(search)
+
     let pos = -1
     for (let i = 0; i <= n; i++) {
-      pos = text.indexOf(search, pos + 1)
-      if (pos === -1) return -1
+      pos = normText.indexOf(normSearch, pos + 1)
+      if (pos === -1) return null
     }
-    return pos
+
+    const origStart = origIndices[pos]
+    const origEnd = origIndices[pos + normSearch.length - 1] + 1
+    return { startIndex: origStart, matchLength: origEnd - origStart }
   }
 
   highlightAtIndex(startIndex, length, className) {
-    if (startIndex < 0 || length <= 0) return null
+    const marks = this.highlightAtIndexAll(startIndex, length, className)
+    return marks[0] || null
+  }
+
+  highlightAtIndexAll(startIndex, length, className) {
+    if (startIndex < 0 || length <= 0) return []
 
     const walker = document.createTreeWalker(
       this.contentTarget,
@@ -391,7 +486,7 @@ export default class extends Controller {
     }
 
     const matchEnd = startIndex + length
-    let firstHighlighted = null
+    const marks = []
 
     for (let i = 0; i < textNodes.length; i++) {
       const tn = textNodes[i]
@@ -400,9 +495,25 @@ export default class extends Controller {
       if (nodeEnd <= startIndex) continue
       if (tn.start >= matchEnd) break
 
+      // Skip structural whitespace text nodes inside table elements —
+      // wrapping these in <mark> produces invalid HTML and breaks table layout.
+      const parentTag = tn.node.parentElement?.tagName
+      if (parentTag && /^(TABLE|THEAD|TBODY|TFOOT|TR)$/.test(parentTag)) continue
+
       const localStart = Math.max(0, startIndex - tn.start)
       const localEnd = Math.min(tn.node.textContent.length, matchEnd - tn.start)
 
+      // Skip zero-length ranges (e.g. from text node splits by prior highlights)
+      if (localEnd <= localStart) continue
+
+      // If the text is already inside a highlight mark (from another thread
+      // anchored to the same text), reuse that mark instead of nesting.
+      const existingMark = tn.node.parentElement?.closest("mark.anchor-highlight")
+      if (existingMark) {
+        if (!marks.includes(existingMark)) marks.push(existingMark)
+        continue
+      }
+
       const range = document.createRange()
       range.setStart(tn.node, localStart)
       range.setEnd(tn.node, localEnd)
@@ -411,9 +522,9 @@ export default class extends Controller {
       mark.className = className
       range.surroundContents(mark)
 
-      if (!firstHighlighted) firstHighlighted = mark
+      marks.push(mark)
     }
 
-    return firstHighlighted
+    return marks
   }
 }

data/app/models/coplan/comment.rb

@@ -11,6 +11,10 @@ module CoPlan
 
     after_create_commit :notify_plan_author, if: :first_comment_in_thread?
 
+    def agent?
+      agent_name.present? || author_type.in?(%w[local_agent cloud_persona])
+    end
+
     private
 
     def first_comment_in_thread?

data/app/models/coplan/comment_thread.rb

@@ -112,23 +112,25 @@ module CoPlan
       !out_of_date
     end
 
-    # Returns the 0-based occurrence index of anchor_text in the raw markdown,
-    # computed from anchor_start. The frontend uses this to find the correct
-    # occurrence in the rendered DOM text instead of relying on context matching.
+    # Returns the 0-based occurrence index of anchor_text in the rendered
+    # (stripped) content, computed from anchor_start. The frontend uses this
+    # to find the correct occurrence in the rendered DOM text.
     def anchor_occurrence_index
       return nil unless anchored? && anchor_start.present?
 
       content = plan.current_content
       return nil unless content.present?
 
-      count = 0
-      pos = 0
-      while (idx = content.index(anchor_text, pos))
-        break if idx >= anchor_start
-        count += 1
-        pos = idx + 1
-      end
-      count
+      stripped, pos_map = self.class.strip_markdown(content)
+      # Map raw anchor_start to its position in the stripped string.
+      # Use >= to find the closest valid position if anchor_start falls
+      # on a stripped formatting character.
+      stripped_start = pos_map.index { |raw_idx| raw_idx >= anchor_start }
+      return nil if stripped_start.nil?
+
+      normalized_anchor = anchor_text.gsub("\t", " ")
+      ranges = find_all_occurrences(stripped, normalized_anchor)
+      ranges.index { |s, _| s >= stripped_start } || 0
     end
 
     def anchor_context_with_highlight(chars: 100)
@@ -147,6 +149,10 @@ module CoPlan
       "#{before}**#{anchor}**#{after}"
     end
 
+    def self.strip_markdown(content)
+      Plans::MarkdownTextExtractor.call(content)
+    end
+
     private
 
     def resolve_anchor_position
@@ -158,11 +164,26 @@ module CoPlan
       occurrence = self.anchor_occurrence || 1
       return if occurrence < 1
 
-      ranges = []
-      start_pos = 0
-      while (idx = content.index(anchor_text, start_pos))
-        ranges << [idx, idx + anchor_text.length]
-        start_pos = idx + anchor_text.length
+      # First, try an exact match against the raw markdown.
+      ranges = find_all_occurrences(content, anchor_text)
+
+      # If no exact match, the selected text may span markdown formatting
+      # (e.g. DOM text "Hello me you" vs raw "Hello `me` you", or table
+      # cell text without pipe delimiters). Parse the markdown AST to
+      # extract plain text with source position mapping.
+      if ranges.empty?
+        stripped, pos_map = self.class.strip_markdown(content)
+        # Normalize tabs to spaces — browser selections across table cells
+        # produce tab-separated text, but the stripped markdown uses spaces.
+        normalized_anchor = anchor_text.gsub("\t", " ")
+        stripped_ranges = find_all_occurrences(stripped, normalized_anchor)
+
+        ranges = stripped_ranges.map do |s, e|
+          raw_start = first_real_pos(pos_map, s, :forward)
+          raw_end = first_real_pos(pos_map, e - 1, :backward)
+          next nil unless raw_start && raw_end
+          [raw_start, raw_end + 1]
+        end.compact
       end
 
       if ranges.length >= occurrence
@@ -172,5 +193,26 @@ module CoPlan
         self.anchor_revision = plan.current_revision
       end
     end
+
+    # Finds the nearest non-sentinel (-1) position in the pos_map,
+    # scanning forward or backward from the given index.
+    def first_real_pos(pos_map, idx, direction)
+      step = direction == :forward ? 1 : -1
+      while idx >= 0 && idx < pos_map.length
+        return pos_map[idx] if pos_map[idx] >= 0
+        idx += step
+      end
+      nil
+    end
+
+    def find_all_occurrences(text, search)
+      ranges = []
+      start_pos = 0
+      while (idx = text.index(search, start_pos))
+        ranges << [idx, idx + search.length]
+        start_pos = idx + search.length
+      end
+      ranges
+    end
   end
 end