@henryavila/mdprobe 0.1.0

package/src/ui/app.jsx

@@ -0,0 +1,152 @@
+import { render } from 'preact'
+import { useState, useEffect, useCallback } from 'preact/hooks'
+import { useWebSocket } from './hooks/useWebSocket.js'
+import { useKeyboard } from './hooks/useKeyboard.js'
+import { useTheme } from './hooks/useTheme.js'
+import { useAnnotations } from './hooks/useAnnotations.js'
+import { useClientLibs } from './hooks/useClientLibs.js'
+import { files, currentFile, currentHtml, currentToc, author, reviewMode,
+         leftPanelOpen, rightPanelOpen, openAnnotations, sectionStats, driftWarning } from './state/store.js'
+import { LeftPanel } from './components/LeftPanel.jsx'
+import { RightPanel } from './components/RightPanel.jsx'
+import { Content } from './components/Content.jsx'
+import { ThemePicker } from './components/ThemePicker.jsx'
+import { ExportMenu } from './components/ExportMenu.jsx'
+import './styles/themes.css'
+
+function App() {
+  const [showHelp, setShowHelp] = useState(false)
+  const ws = useWebSocket()
+  const { setTheme, themes } = useTheme()
+  const annotationOps = useAnnotations()
+  useClientLibs()
+
+  useKeyboard({ onShowHelp: () => setShowHelp(v => !v) })
+
+  // Close help modal on Escape
+  useEffect(() => {
+    if (!showHelp) return
+    function handleEsc(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        setShowHelp(false)
+      }
+    }
+    document.addEventListener('keydown', handleEsc)
+    return () => document.removeEventListener('keydown', handleEsc)
+  }, [showHelp])
+
+  // Fetch initial data
+  useEffect(() => {
+    fetch('/api/files').then(r => r.json()).then(data => {
+      files.value = data
+      if (data.length > 0) {
+        const first = data[0].path || data[0]
+        currentFile.value = first
+        // Fetch rendered content
+        fetch(`/api/file?path=${encodeURIComponent(first)}`).then(r => r.json()).then(d => {
+          currentHtml.value = d.html
+          currentToc.value = d.toc || []
+        })
+        // Fetch annotations
+        annotationOps.fetchAnnotations(first)
+      }
+    })
+
+    fetch('/api/config').then(r => r.json()).then(data => {
+      author.value = data.author || 'anonymous'
+    })
+
+    // Check review mode
+    fetch('/api/review/status').then(r => r.json()).then(data => {
+      if (data.mode === 'once') reviewMode.value = true
+    }).catch(() => {})
+  }, [])
+
+  function handleFileSelect(filePath) {
+    currentFile.value = filePath
+    fetch(`/api/file?path=${encodeURIComponent(filePath)}`).then(r => r.json()).then(d => {
+      currentHtml.value = d.html
+      currentToc.value = d.toc || []
+    })
+    annotationOps.fetchAnnotations(filePath)
+  }
+
+  return (
+    <>
+      {/* Header */}
+      <header class="header">
+        <h1>mdprobe</h1>
+        <span class="header-file">{currentFile.value || 'No file selected'}</span>
+        <div style="flex: 1" />
+        {sectionStats.value.total > 0 && (reviewMode.value || sectionStats.value.reviewed > 0) && (
+          <div class="progress-info">
+            <span>{sectionStats.value.reviewed}/{sectionStats.value.total} sections reviewed</span>
+            <div class="progress-bar" style="width: 100px">
+              <div class="fill" style={`width: ${(sectionStats.value.reviewed / sectionStats.value.total) * 100}%`} />
+            </div>
+          </div>
+        )}
+        <ExportMenu />
+        <ThemePicker themes={themes} onSelect={setTheme} />
+        {reviewMode.value && <button class="btn btn-primary btn-sm" onClick={async () => {
+          try {
+            await fetch('/api/review/finish', { method: 'POST' })
+          } catch { /* server will close */ }
+        }}>Finish Review</button>}
+      </header>
+
+      {/* Drift warning banner */}
+      {driftWarning.value && (
+        <div class="drift-banner">
+          Arquivo modificado desde a ultima revisao. Algumas anotacoes podem estar desalinhadas.
+          <button class="btn btn-sm" style="margin-left: 8px" onClick={() => driftWarning.value = false}>Dismiss</button>
+        </div>
+      )}
+
+      {/* Left Panel */}
+      <LeftPanel onFileSelect={handleFileSelect} />
+
+      {/* Content */}
+      <Content annotationOps={annotationOps} />
+
+      {/* Right Panel */}
+      <RightPanel annotationOps={annotationOps} />
+
+      {/* Status Bar */}
+      <footer class="status-bar">
+        <span>{openAnnotations.value.length} open</span>
+        <span>Author: {author.value}</span>
+        <span>Press ? for shortcuts</span>
+      </footer>
+
+      {/* Keyboard Shortcut Modal */}
+      {showHelp && (
+        <>
+          <div class="shortcut-modal overlay" onClick={() => setShowHelp(false)} />
+          <div class="shortcut-modal">
+            <h3 style="margin-bottom: 12px">Keyboard Shortcuts</h3>
+            {[
+              ['[', 'Toggle left panel (Files/TOC)'],
+              [']', 'Toggle right panel (Annotations)'],
+              ['\\', 'Toggle both panels (focus mode)'],
+              ['j', 'Next annotation'],
+              ['k', 'Previous annotation'],
+              ['r', 'Resolve selected annotation'],
+              ['e', 'Edit selected annotation'],
+              ['?', 'Show/hide this help'],
+            ].map(([key, desc]) => (
+              <div class="shortcut-row" key={key}>
+                <span>{desc}</span>
+                <span class="shortcut-key">{key}</span>
+              </div>
+            ))}
+            <button class="btn btn-sm" style="margin-top: 12px" onClick={() => setShowHelp(false)}>Close</button>
+          </div>
+        </>
+      )}
+    </>
+  )
+}
+
+render(<App />, document.getElementById('app'))

package/src/ui/components/AnnotationForm.jsx

@@ -0,0 +1,72 @@
+import { useState } from 'preact/hooks'
+
+const TAGS = [
+  { value: 'question', label: 'Question' },
+  { value: 'bug', label: 'Bug' },
+  { value: 'suggestion', label: 'Suggestion' },
+  { value: 'nitpick', label: 'Nitpick' },
+]
+
+export function AnnotationForm({ annotation, selectors, exact, onSave, onCancel }) {
+  const isEdit = !!annotation
+  const [comment, setComment] = useState(annotation?.comment || '')
+  const [tag, setTag] = useState(annotation?.tag || 'question')
+
+  function handleSubmit(e) {
+    e.preventDefault()
+    if (!comment.trim()) return
+
+    if (isEdit) {
+      onSave({ comment: comment.trim(), tag })
+    } else {
+      onSave({ selectors, comment: comment.trim(), tag })
+    }
+  }
+
+  function handleKeyDown(e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      handleSubmit(e)
+    }
+    if (e.key === 'Escape') {
+      onCancel()
+    }
+  }
+
+  return (
+    <form class="annotation-form" onSubmit={handleSubmit} onKeyDown={handleKeyDown} onClick={e => e.stopPropagation()}>
+      {exact && (
+        <div class="annotation-form__quote">
+          {exact}
+        </div>
+      )}
+
+      <div class="annotation-form__tags">
+        {TAGS.map(t => (
+          <button
+            key={t.value}
+            type="button"
+            class={`tag-pill tag-pill--${t.value}${tag === t.value ? ' tag-pill--active' : ''}`}
+            onClick={() => setTag(t.value)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      <textarea
+        value={comment}
+        onInput={e => setComment(e.target.value)}
+        placeholder="Add your comment... (Ctrl+Enter to save)"
+        autoFocus
+      />
+
+      <div class="annotation-form__actions">
+        <span class="annotation-form__hint">Ctrl+Enter to save · Esc to close</span>
+        <button type="button" class="btn btn--ghost" onClick={onCancel}>Cancel</button>
+        <button type="submit" class="btn btn--primary" disabled={!comment.trim()}>
+          {isEdit ? 'Save' : 'Annotate'}
+        </button>
+      </div>
+    </form>
+  )
+}

package/src/ui/components/Content.jsx

@@ -0,0 +1,334 @@
+import { useRef, useEffect, useState } from 'preact/hooks'
+import { currentHtml, selectedAnnotationId, annotations, showResolved } from '../state/store.js'
+import { Popover } from './Popover.jsx'
+import { SectionApproval } from './SectionApproval.jsx'
+import { sections } from '../state/store.js'
+
+export function Content({ annotationOps }) {
+  const contentRef = useRef(null)
+  const [popover, setPopover] = useState(null) // { x, y, selectors }
+
+  // Inject annotation highlights into DOM after HTML renders
+  useEffect(() => {
+    const el = contentRef.current
+    if (!el) return
+
+    // Remove previous highlights
+    el.querySelectorAll('mark[data-highlight-id]').forEach(mark => {
+      const parent = mark.parentNode
+      while (mark.firstChild) parent.insertBefore(mark.firstChild, mark)
+      parent.removeChild(mark)
+    })
+
+    // Get visible annotations
+    const visibleAnns = showResolved.value
+      ? annotations.value
+      : annotations.value.filter(a => a.status === 'open')
+
+    for (const ann of visibleAnns) {
+      const startLine = ann.selectors?.position?.startLine
+      if (!startLine) continue
+
+      const sourceEl = el.querySelector(`[data-source-line="${startLine}"]`)
+      if (!sourceEl) continue
+
+      const exact = ann.selectors?.quote?.exact
+      if (!exact) continue
+
+      const markClass = `annotation-highlight tag-${ann.tag}${ann.status === 'resolved' ? ' resolved' : ''}${selectedAnnotationId.value === ann.id ? ' selected' : ''}`
+
+      // Strategy 1: Try single-element exact match (fast path)
+      if (trySingleElementHighlight(sourceEl, exact, ann.id, markClass)) continue
+
+      // Strategy 2: Cross-element match — walk text nodes from sourceEl onwards
+      const endLine = ann.selectors?.position?.endLine || startLine
+      if (tryCrossElementHighlight(el, sourceEl, endLine, exact, ann.id, markClass)) continue
+
+      // Strategy 3: Fallback — highlight all text in line range
+      if (startLine !== endLine) {
+        highlightLineRange(el, startLine, endLine, ann.id, markClass)
+      }
+    }
+  }, [currentHtml.value, annotations.value, showResolved.value, selectedAnnotationId.value])
+
+  // Inject SectionApproval buttons next to h2 headings
+  useEffect(() => {
+    const el = contentRef.current
+    if (!el || sections.value.length === 0) return
+
+    // Remove previous section-approval containers
+    el.querySelectorAll('.section-approval-injected').forEach(n => n.remove())
+
+    // Inject approval buttons on ALL heading levels that have a matching section
+    el.querySelectorAll(':is(h1,h2,h3,h4,h5,h6)[data-source-line]').forEach(hEl => {
+      const heading = hEl.textContent.trim()
+      const section = sections.value.find(s => s.heading === heading)
+      if (!section) return
+
+      const computed = section.computed || section.status
+
+      const container = document.createElement('span')
+      container.className = 'section-approval-injected'
+
+      const approveBtn = document.createElement('button')
+      const approveClass = computed === 'approved' ? ' section-status approved'
+        : computed === 'indeterminate' ? ' section-status indeterminate' : ''
+      approveBtn.className = `btn btn-sm${approveClass}`
+      approveBtn.textContent = computed === 'indeterminate' ? '\u2500' : '\u2713'
+      approveBtn.title = computed === 'indeterminate' ? 'Partially approved — click to approve all' : 'Approve section'
+      approveBtn.onclick = (e) => {
+        e.stopPropagation()
+        section.status === 'approved'
+          ? annotationOps.resetSection(heading)
+          : annotationOps.approveSection(heading)
+      }
+
+      const rejectBtn = document.createElement('button')
+      rejectBtn.className = `btn btn-sm${computed === 'rejected' ? ' section-status rejected' : ''}`
+      rejectBtn.textContent = '\u2717'
+      rejectBtn.title = 'Reject section'
+      rejectBtn.onclick = (e) => {
+        e.stopPropagation()
+        section.status === 'rejected'
+          ? annotationOps.resetSection(heading)
+          : annotationOps.rejectSection(heading)
+      }
+
+      const statusLabel = computed !== 'pending' ? computed : ''
+      if (statusLabel) {
+        const statusSpan = document.createElement('span')
+        statusSpan.className = `section-status-label ${computed}`
+        statusSpan.style.cssText = 'font-size: 10px; margin-left: 4px'
+        statusSpan.textContent = statusLabel
+        container.appendChild(statusSpan)
+      }
+
+      container.style.cssText = 'display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle'
+      container.insertBefore(rejectBtn, container.firstChild)
+      container.insertBefore(approveBtn, container.firstChild)
+      hEl.appendChild(container)
+    })
+  }, [currentHtml.value, sections.value])
+
+  // ---------------------------------------------------------------------------
+  // Highlight helper functions
+  // ---------------------------------------------------------------------------
+
+  /** Try to highlight exact text within a single element. Returns true on success. */
+  function trySingleElementHighlight(sourceEl, exact, id, className) {
+    const walker = document.createTreeWalker(sourceEl, NodeFilter.SHOW_TEXT)
+    let node
+    while ((node = walker.nextNode())) {
+      const idx = node.textContent.indexOf(exact)
+      if (idx === -1) continue
+      const range = document.createRange()
+      range.setStart(node, idx)
+      range.setEnd(node, idx + exact.length)
+      const mark = document.createElement('mark')
+      mark.setAttribute('data-highlight-id', id)
+      mark.className = className
+      try {
+        range.surroundContents(mark)
+      } catch {
+        return false
+      }
+      return true
+    }
+    return false
+  }
+
+  /**
+   * Highlight text that spans multiple elements.
+   * Walk text nodes from sourceEl to endLine, concatenate, find match,
+   * then wrap each matching portion in its own <mark>.
+   */
+  function tryCrossElementHighlight(contentEl, sourceEl, endLine, exact, id, className) {
+    // Collect text nodes from sourceEl through endLine
+    const textNodes = []
+    const walker = document.createTreeWalker(contentEl, NodeFilter.SHOW_TEXT)
+    let node
+    let collecting = false
+    while ((node = walker.nextNode())) {
+      if (!collecting && sourceEl.contains(node)) collecting = true
+      if (!collecting) continue
+      textNodes.push(node)
+      // Stop after passing endLine element
+      const parent = findSourceLineParent(node, contentEl)
+      if (parent) {
+        const line = parseInt(parent.getAttribute('data-source-line'))
+        if (line > endLine) break
+      }
+    }
+    if (textNodes.length === 0) return false
+
+    // Build concatenated text with separator tracking
+    // Browser selections across block elements include \n between them
+    let concat = ''
+    const nodeMap = [] // { node, startInConcat, endInConcat }
+    for (let i = 0; i < textNodes.length; i++) {
+      // Add a newline between text nodes from different block parents
+      if (i > 0) {
+        const prevParent = textNodes[i - 1].parentElement?.closest('[data-source-line]')
+        const currParent = textNodes[i].parentElement?.closest('[data-source-line]')
+        if (prevParent !== currParent) concat += '\n'
+      }
+      const start = concat.length
+      concat += textNodes[i].textContent
+      nodeMap.push({ node: textNodes[i], startInConcat: start, endInConcat: concat.length })
+    }
+
+    // Try exact match in the concatenated text
+    let matchIdx = concat.indexOf(exact)
+
+    // If not found, try with whitespace normalization
+    if (matchIdx === -1) {
+      const normalizedConcat = concat.replace(/\s+/g, ' ')
+      const normalizedExact = exact.replace(/\s+/g, ' ')
+      const normIdx = normalizedConcat.indexOf(normalizedExact)
+      if (normIdx === -1) return false
+
+      // Map normalized index back: highlight all nodes in range
+      // Since normalization collapses whitespace, exact mapping is unreliable.
+      // Fall back to highlighting all matching text nodes.
+      for (const nm of nodeMap) {
+        wrapTextNode(nm.node, 0, nm.node.textContent.length, id, className)
+      }
+      return true
+    }
+
+    const matchEnd = matchIdx + exact.length
+
+    // Wrap matching portions in each text node
+    for (const nm of nodeMap) {
+      const overlapStart = Math.max(matchIdx, nm.startInConcat)
+      const overlapEnd = Math.min(matchEnd, nm.endInConcat)
+      if (overlapStart >= overlapEnd) continue
+
+      const nodeStart = overlapStart - nm.startInConcat
+      const nodeEnd = overlapEnd - nm.startInConcat
+      wrapTextNode(nm.node, nodeStart, nodeEnd, id, className)
+    }
+    return true
+  }
+
+  /** Highlight all text nodes within elements between startLine and endLine. */
+  function highlightLineRange(contentEl, startLine, endLine, id, className) {
+    const els = contentEl.querySelectorAll('[data-source-line]')
+    for (const e of els) {
+      const line = parseInt(e.getAttribute('data-source-line'))
+      if (line < startLine || line > endLine) continue
+      const walker = document.createTreeWalker(e, NodeFilter.SHOW_TEXT)
+      let node
+      while ((node = walker.nextNode())) {
+        if (node.textContent.trim() === '') continue
+        wrapTextNode(node, 0, node.textContent.length, id, className)
+      }
+    }
+  }
+
+  /** Wrap a portion of a text node in a <mark> element. */
+  function wrapTextNode(textNode, start, end, id, className) {
+    if (start >= end || start >= textNode.textContent.length) return
+    try {
+      const range = document.createRange()
+      range.setStart(textNode, start)
+      range.setEnd(textNode, Math.min(end, textNode.textContent.length))
+      const mark = document.createElement('mark')
+      mark.setAttribute('data-highlight-id', id)
+      mark.className = className
+      range.surroundContents(mark)
+    } catch {
+      // surroundContents can fail if range crosses element boundaries
+    }
+  }
+
+  /** Find the closest ancestor with data-source-line. */
+  function findSourceLineParent(node, root) {
+    let current = node.nodeType === 3 ? node.parentElement : node
+    while (current && current !== root) {
+      if (current.hasAttribute?.('data-source-line')) return current
+      current = current.parentElement
+    }
+    return null
+  }
+
+  // Handle text selection for creating annotations
+  function handleMouseUp(e) {
+    const selection = window.getSelection()
+    if (!selection || selection.isCollapsed || selection.toString().trim() === '') {
+      return
+    }
+
+    const text = selection.toString()
+    const range = selection.getRangeAt(0)
+    const rect = range.getBoundingClientRect()
+
+    // Find source line/column from data attributes
+    const startNode = findSourceNode(range.startContainer)
+    const endNode = findSourceNode(range.endContainer)
+
+    if (startNode) {
+      const startLine = parseInt(startNode.getAttribute('data-source-line'))
+      const startCol = parseInt(startNode.getAttribute('data-source-col') || '1')
+      const endLine = endNode ? parseInt(endNode.getAttribute('data-source-line')) : startLine
+      const endCol = endNode ? parseInt(endNode.getAttribute('data-source-col') || '1') : startCol + text.length
+
+      setPopover({
+        x: rect.left + rect.width / 2,
+        y: rect.bottom + 8,
+        exact: text,
+        selectors: {
+          position: { startLine, startColumn: startCol, endLine, endColumn: endCol },
+          quote: { exact: text, prefix: '', suffix: '' }
+        }
+      })
+    }
+  }
+
+  function findSourceNode(node) {
+    let current = node.nodeType === 3 ? node.parentElement : node
+    while (current && current !== contentRef.current) {
+      if (current.hasAttribute?.('data-source-line')) return current
+      current = current.parentElement
+    }
+    return null
+  }
+
+  // Click on annotation highlight -> select it
+  function handleContentClick(e) {
+    const highlight = e.target.closest('[data-highlight-id]')
+    if (highlight) {
+      selectedAnnotationId.value = highlight.getAttribute('data-highlight-id')
+    }
+  }
+
+  return (
+    <main class="content-area-wrapper">
+      <div
+        class="content-area"
+        ref={contentRef}
+        onClick={handleContentClick}
+        onMouseUp={handleMouseUp}
+        dangerouslySetInnerHTML={{ __html: currentHtml.value || '' }}
+      />
+
+      {popover && (
+        <Popover
+          x={popover.x}
+          y={popover.y}
+          exact={popover.exact}
+          selectors={popover.selectors}
+          onSave={(data) => {
+            annotationOps.createAnnotation(data)
+            setPopover(null)
+            window.getSelection()?.removeAllRanges()
+          }}
+          onCancel={() => {
+            setPopover(null)
+            window.getSelection()?.removeAllRanges()
+          }}
+        />
+      )}
+    </main>
+  )
+}

package/src/ui/components/ExportMenu.jsx

@@ -0,0 +1,62 @@
+import { useState } from 'preact/hooks'
+import { currentFile } from '../state/store.js'
+
+export function ExportMenu() {
+  const [open, setOpen] = useState(false)
+
+  async function handleExport(format) {
+    setOpen(false)
+    const file = currentFile.value
+    if (!file) return
+
+    try {
+      const res = await fetch(`/api/export?path=${encodeURIComponent(file)}&format=${format}`)
+      if (!res.ok) throw new Error(await res.text())
+
+      if (format === 'report') {
+        // Open in new tab
+        const text = await res.text()
+        const blob = new Blob([text], { type: 'text/markdown' })
+        window.open(URL.createObjectURL(blob))
+      } else {
+        // Download file
+        const blob = await res.blob()
+        const ext = { inline: '.reviewed.md', json: '.annotations.json', sarif: '.annotations.sarif' }[format]
+        const a = document.createElement('a')
+        a.href = URL.createObjectURL(blob)
+        a.download = file.replace('.md', ext)
+        a.click()
+      }
+    } catch (err) {
+      console.error('Export failed:', err)
+      alert(`Export failed: ${err.message}`)
+    }
+  }
+
+  return (
+    <div style="position: relative">
+      <button class="btn btn-sm" onClick={() => setOpen(!open)}>
+        Export
+      </button>
+      {open && (
+        <>
+          <div style="position: fixed; inset: 0; z-index: 90" onClick={() => setOpen(false)} />
+          <div style="position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 100; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 180px; overflow: hidden">
+            <button class="export-option" onClick={() => handleExport('report')}>
+              Review Report (.md)
+            </button>
+            <button class="export-option" onClick={() => handleExport('inline')}>
+              Inline Comments (.md)
+            </button>
+            <button class="export-option" onClick={() => handleExport('json')}>
+              JSON (.json)
+            </button>
+            <button class="export-option" onClick={() => handleExport('sarif')}>
+              SARIF (.sarif)
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}