coplan-engine 0.2.0 → 1.0.0

data/app/helpers/coplan/comments_helper.rb

@@ -1,20 +1,21 @@
 module CoPlan
   module CommentsHelper
     def comment_author_name(comment)
-      case comment.author_type
+      user_name = case comment.author_type
       when "human"
         CoPlan::User.find_by(id: comment.author_id)&.name || "Unknown"
       when "local_agent"
-        user_name = CoPlan::User
+        CoPlan::User
           .joins(:api_tokens)
           .where(coplan_api_tokens: { id: comment.author_id })
           .pick(:name) || "Agent"
-        comment.agent_name.present? ? "#{user_name} (#{comment.agent_name})" : user_name
       when "cloud_persona"
         AutomatedPlanReviewer.find_by(id: comment.author_id)&.name || "Reviewer"
       else
         comment.author_type
       end
+
+      comment.agent_name.present? ? "#{comment.agent_name} (via #{user_name})" : user_name
     end
   end
 end

data/app/helpers/coplan/markdown_helper.rb

@@ -11,16 +11,22 @@ module CoPlan
       blockquote hr br
       dd dt dl
       sup sub
+      details summary
     ].freeze
 
     ALLOWED_ATTRIBUTES = %w[id class href src alt title].freeze
 
     def render_markdown(content)
-      html = Commonmarker.to_html(content.to_s.encode("UTF-8"), plugins: { syntax_highlighter: nil })
+      html = Commonmarker.to_html(content.to_s.encode("UTF-8"), options: { render: { unsafe: true } }, plugins: { syntax_highlighter: nil })
       sanitized = sanitize(html, tags: ALLOWED_TAGS, attributes: ALLOWED_ATTRIBUTES)
       tag.div(sanitized, class: "markdown-rendered")
     end
 
+    def markdown_to_plain_text(content)
+      html = Commonmarker.to_html(content.to_s.encode("UTF-8"), plugins: { syntax_highlighter: nil })
+      Nokogiri::HTML::DocumentFragment.parse(html).text.squish
+    end
+
     def render_line_view(content)
       lines = content.to_s.split("\n", -1)
       line_divs = lines.each_with_index.map do |line, index|

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

@@ -6,13 +6,18 @@ export default class extends Controller {
 
   connect() {
     this.currentIndex = -1
+    this.activeMark = null
+    this.activePopover = null
     this.updatePosition()
     this.handleKeydown = this.handleKeydown.bind(this)
+    this.handleScroll = this.handleScroll.bind(this)
     document.addEventListener("keydown", this.handleKeydown)
+    window.addEventListener("scroll", this.handleScroll, { passive: true })
   }
 
   disconnect() {
     document.removeEventListener("keydown", this.handleKeydown)
+    window.removeEventListener("scroll", this.handleScroll)
   }
 
   handleKeydown(event) {
@@ -36,6 +41,14 @@ export default class extends Controller {
         event.preventDefault()
         this.focusReply()
         break
+      case "a":
+        event.preventDefault()
+        this.acceptCurrent()
+        break
+      case "d":
+        event.preventDefault()
+        this.discardCurrent()
+        break
     }
   }
 
@@ -69,42 +82,142 @@ export default class extends Controller {
       el.classList.remove("anchor-highlight--active")
     })
 
+    // Close any currently open popover first — showPopover() throws
+    // InvalidStateError if the same popover is already open, and
+    // auto-dismiss only works when showing a *different* popover.
+    const openPopover = this.findOpenPopover()
+    if (openPopover) {
+      try { openPopover.hidePopover() } catch {}
+    }
+
     // Add active class and scroll into view
     mark.classList.add("anchor-highlight--active")
-    mark.scrollIntoView({ behavior: "smooth", block: "center" })
+    mark.scrollIntoView({ behavior: "instant", block: "center" })
 
     // Open the thread popover if there's one
     const threadId = mark.dataset.threadId
     if (threadId) {
       const popover = document.getElementById(`${threadId}_popover`)
       if (popover) {
-        const markRect = mark.getBoundingClientRect()
+        popover.style.visibility = "hidden"
         popover.showPopover()
-        popover.style.top = `${markRect.top}px`
-        popover.style.left = `${markRect.right + 12}px`
+        this.positionPopoverAtMark(popover, mark)
+        popover.style.visibility = "visible"
+        this.activeMark = mark
+        this.activePopover = popover
       }
     }
 
     this.updatePosition()
   }
 
-  focusReply() {
-    let openPopover
+  handleScroll() {
+    if (!this.activeMark || !this.activePopover) return
     try {
-      openPopover = document.querySelector(".thread-popover:popover-open")
-    } catch {
-      // :popover-open not supported — find the visible popover manually
-      openPopover = Array.from(document.querySelectorAll(".thread-popover[popover]"))
-        .find(el => el.checkVisibility?.())
+      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 (!openPopover) return
+    if (top < 16) top = 16
+    if (left < 16) left = 16
 
-    const textarea = openPopover.querySelector(".thread-popover__reply textarea")
+    popover.style.top = `${top}px`
+    popover.style.left = `${left}px`
+  }
+
+  focusReply() {
+    const popover = this.findOpenPopover()
+    if (!popover) return
+
+    const textarea = popover.querySelector(".thread-popover__reply textarea")
     if (textarea) {
       textarea.focus({ preventScroll: true })
     }
   }
 
+  acceptCurrent() {
+    this.submitPopoverAction("accept")
+  }
+
+  discardCurrent() {
+    this.submitPopoverAction("discard")
+  }
+
+  submitPopoverAction(action) {
+    const popover = this.findOpenPopover()
+    if (!popover) return
+
+    const form = popover.querySelector(`form[data-action-name='${action}']`)
+    if (!form) return
+
+    // Normalize currentIndex if popover was opened via mouse (not j/k)
+    if (this.currentIndex < 0) {
+      this.currentIndex = 0
+    }
+
+    // For accept (pending→todo), the thread stays open so we need to
+    // explicitly advance. For discard, the thread leaves openHighlights
+    // and the current index naturally points to the next one.
+    const shouldAdvance = action === "accept"
+
+    // Watch for the broadcast DOM update that replaces the thread data,
+    // then advance to the next thread once the highlights have changed.
+    const threadsContainer = document.getElementById("plan-threads")
+    if (threadsContainer) {
+      const observer = new MutationObserver(() => {
+        observer.disconnect()
+        this.advanceAfterAction(shouldAdvance)
+      })
+      observer.observe(threadsContainer, { childList: true, subtree: true })
+    }
+
+    form.requestSubmit()
+  }
+
+  advanceAfterAction(shouldAdvance) {
+    const highlights = this.openHighlights
+    if (highlights.length === 0) {
+      this.currentIndex = -1
+      this.updatePosition()
+      return
+    }
+    if (shouldAdvance) {
+      this.currentIndex = (this.currentIndex + 1) % highlights.length
+    } else if (this.currentIndex >= highlights.length) {
+      this.currentIndex = 0
+    }
+    this.navigateTo(highlights[this.currentIndex])
+  }
+
+  findOpenPopover() {
+    try {
+      return document.querySelector(".thread-popover:popover-open")
+    } catch {
+      return Array.from(document.querySelectorAll(".thread-popover[popover]"))
+        .find(el => el.checkVisibility?.())
+    }
+  }
+
   toggleResolved() {
     const planLayout = document.querySelector(".plan-layout")
     if (!planLayout) return

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
+    }
+  }
+}