@henryavila/mdprobe 0.1.0

package/src/ui/components/LeftPanel.jsx

@@ -0,0 +1,99 @@
+import { leftPanelOpen, files, currentFile, currentToc, openAnnotations, sections } from '../state/store.js'
+
+export function LeftPanel({ onFileSelect }) {
+  const isCollapsed = !leftPanelOpen.value
+
+  // Count open annotations whose startLine falls within this section's range
+  function annotationsInSection(sectionIndex) {
+    const toc = currentToc.value
+    const section = toc[sectionIndex]
+    if (!section) return 0
+    const startLine = section.line
+    // End line is the start of the next same-or-higher level section, or Infinity
+    let endLine = Infinity
+    for (let i = sectionIndex + 1; i < toc.length; i++) {
+      if (toc[i].level <= section.level) {
+        endLine = toc[i].line
+        break
+      }
+    }
+    return openAnnotations.value.filter(a => {
+      const line = a.selectors?.position?.startLine
+      return line != null && line >= startLine && line < endLine
+    }).length
+  }
+
+  return (
+    <aside class={`left-panel ${isCollapsed ? 'collapsed' : ''}`}>
+      {isCollapsed ? (
+        <div class="panel-collapsed-indicator" onClick={() => leftPanelOpen.value = true}>
+          <span>&#9776;</span>
+          <span class="shortcut-key">[</span>
+          {openAnnotations.value.length > 0 && (
+            <span class="badge">{openAnnotations.value.length}</span>
+          )}
+        </div>
+      ) : (
+        <div class="panel-content">
+          <div class="panel-header" style="padding: 12px; display: flex; justify-content: space-between; align-items: center">
+            <span style="font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted)">
+              Files & TOC
+            </span>
+            <button class="btn btn-sm btn-ghost" onClick={() => leftPanelOpen.value = false}>&times;</button>
+          </div>
+
+          {/* Files section */}
+          {files.value.length > 1 && (
+            <div style="padding: 0 8px 8px">
+              <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 4px 4px 6px; font-weight: 600">Files</div>
+              {files.value.map(f => {
+                const path = f.path || f
+                const label = f.label || path.replace('.md', '')
+                const isActive = path === currentFile.value
+                return (
+                  <div
+                    key={path}
+                    class={`file-item ${isActive ? 'active' : ''}`}
+                    onClick={() => onFileSelect(path)}
+                  >
+                    <span class="icon">{'\uD83D\uDCC4'}</span>
+                    <span>{label}</span>
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {/* TOC section */}
+          <div style="padding: 0 8px">
+            <div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); padding: 4px 4px 6px; font-weight: 600">Sections</div>
+            {currentToc.value.length === 0 ? (
+              <div style="padding: 8px; color: var(--text-muted); font-size: 13px">No sections</div>
+            ) : (
+              currentToc.value.map((entry, i) => {
+                const count = annotationsInSection(i)
+                const sec = sections.value.find(s => s.heading === entry.heading && s.level === entry.level)
+                const statusDot = sec?.status === 'approved' ? 'dot-approved'
+                  : sec?.status === 'rejected' ? 'dot-rejected' : ''
+                return (
+                  <div
+                    key={i}
+                    class={`toc-item level-${entry.level}`}
+                    onClick={() => {
+                      const el = document.querySelector(`[data-source-line="${entry.line}"]`)
+                      el?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+                    }}
+                  >
+                    {statusDot && <span class={`toc-dot ${statusDot}`} />}
+                    {entry.heading}
+                    {count > 0 && <span class="badge" style="margin-left: 6px">{count}</span>}
+                  </div>
+                )
+              })
+            )}
+          </div>
+        </div>
+      )}
+    </aside>
+  )
+}

package/src/ui/components/Popover.jsx

@@ -0,0 +1,94 @@
+import { useState, useEffect, useRef } from 'preact/hooks'
+import { AnnotationForm } from './AnnotationForm.jsx'
+
+/**
+ * Draggable annotation popover — appears at the text selection position.
+ * No backdrop: uses strong shadow for visual separation.
+ * Drag-handle on the header lets users reposition to read content underneath.
+ */
+export function Popover({ x, y, exact, selectors, onSave, onCancel }) {
+  const popoverRef = useRef(null)
+  const dragRef = useRef({ active: false, startX: 0, startY: 0 })
+
+  // Compute initial viewport-aware position
+  const popoverWidth = 520
+  const popoverHeight = 440
+  const viewportW = typeof window !== 'undefined' ? window.innerWidth : 800
+  const viewportH = typeof window !== 'undefined' ? window.innerHeight : 800
+  const spaceBelow = viewportH - y
+  const flipAbove = spaceBelow < popoverHeight
+
+  const initialLeft = Math.max(16, Math.min(x - popoverWidth / 2, viewportW - popoverWidth - 16))
+  const initialTop = flipAbove ? Math.max(8, y - popoverHeight - 8) : y
+
+  const [pos, setPos] = useState({ left: initialLeft, top: initialTop })
+
+  // Close on Escape
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (e.key === 'Escape') onCancel()
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [onCancel])
+
+  // Drag: mousemove + mouseup on document for smooth tracking
+  useEffect(() => {
+    function onMouseMove(e) {
+      if (!dragRef.current.active) return
+      setPos({
+        left: e.clientX - dragRef.current.startX,
+        top: e.clientY - dragRef.current.startY,
+      })
+    }
+    function onMouseUp() {
+      dragRef.current.active = false
+    }
+    document.addEventListener('mousemove', onMouseMove)
+    document.addEventListener('mouseup', onMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove)
+      document.removeEventListener('mouseup', onMouseUp)
+    }
+  }, [])
+
+  function handleDragStart(e) {
+    if (e.button !== 0) return
+    dragRef.current = {
+      active: true,
+      startX: e.clientX - pos.left,
+      startY: e.clientY - pos.top,
+    }
+    e.preventDefault()
+  }
+
+  const style = {
+    position: 'fixed',
+    left: `${pos.left}px`,
+    top: `${pos.top}px`,
+    width: `${popoverWidth}px`,
+    zIndex: 101,
+  }
+
+  return (
+    <div class="popover popover--enter" ref={popoverRef} style={style}>
+      <div class="popover__header" onMouseDown={handleDragStart}>
+        <span class="popover__title">New Annotation</span>
+        <button
+          type="button"
+          class="popover__close"
+          onClick={onCancel}
+          aria-label="Close"
+        >
+          ×
+        </button>
+      </div>
+      <AnnotationForm
+        exact={exact}
+        selectors={selectors}
+        onSave={onSave}
+        onCancel={onCancel}
+      />
+    </div>
+  )
+}

package/src/ui/components/ReplyThread.jsx

@@ -0,0 +1,28 @@
+export function ReplyThread({ replies }) {
+  if (!replies || replies.length === 0) return null
+
+  return (
+    <div style="margin-top: 8px">
+      {replies.map((reply, i) => (
+        <div key={i} class="reply">
+          <div class="author">{reply.author}</div>
+          <div class="text">{reply.comment}</div>
+          <div style="font-size: 10px; color: var(--text-muted); margin-top: 2px">
+            {formatTime(reply.created_at)}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function formatTime(isoString) {
+  if (!isoString) return ''
+  try {
+    const date = new Date(isoString)
+    return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) +
+           ' ' + date.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })
+  } catch {
+    return isoString
+  }
+}

package/src/ui/components/RightPanel.jsx

@@ -0,0 +1,171 @@
+import { useState } from 'preact/hooks'
+import { rightPanelOpen, filteredAnnotations, selectedAnnotationId, showResolved,
+         filterTag, filterAuthor, uniqueTags, uniqueAuthors, openAnnotations } from '../state/store.js'
+import { AnnotationForm } from './AnnotationForm.jsx'
+import { ReplyThread } from './ReplyThread.jsx'
+
+export function RightPanel({ annotationOps }) {
+  const isCollapsed = !rightPanelOpen.value
+  const [editingId, setEditingId] = useState(null)
+
+  function handleAnnotationClick(ann) {
+    selectedAnnotationId.value = ann.id
+    // Scroll to highlight in content
+    const highlight = document.querySelector(`[data-highlight-id="${ann.id}"]`)
+    highlight?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
+
+  return (
+    <aside class={`right-panel ${isCollapsed ? 'collapsed' : ''}`}>
+      {isCollapsed ? (
+        <div class="panel-collapsed-indicator" onClick={() => rightPanelOpen.value = true}>
+          <span>💬</span>
+          <span class="shortcut-key">]</span>
+          {openAnnotations.value.length > 0 && (
+            <span class="badge">{openAnnotations.value.length}</span>
+          )}
+        </div>
+      ) : (
+        <div class="panel-content">
+          {/* Header */}
+          <div class="panel-header" style="padding: 12px; display: flex; justify-content: space-between; align-items: center">
+            <span style="font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted)">
+              Annotations ({openAnnotations.value.length} open)
+            </span>
+            <button class="btn btn-sm btn-ghost" onClick={() => rightPanelOpen.value = false}>×</button>
+          </div>
+
+          {/* Filters */}
+          <div style="padding: 0 12px 8px; display: flex; gap: 6px; flex-wrap: wrap">
+            <select
+              class="filter-select"
+              value={filterTag.value || ''}
+              onChange={e => filterTag.value = e.target.value || null}
+              style="padding: 3px 6px; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary)"
+            >
+              <option value="">All tags</option>
+              {uniqueTags.value.map(t => <option key={t} value={t}>{t}</option>)}
+            </select>
+
+            <select
+              value={filterAuthor.value || ''}
+              onChange={e => filterAuthor.value = e.target.value || null}
+              style="padding: 3px 6px; font-size: 11px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-primary); color: var(--text-primary)"
+            >
+              <option value="">All authors</option>
+              {uniqueAuthors.value.map(a => <option key={a} value={a}>{a}</option>)}
+            </select>
+
+            <label style="display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); cursor: pointer">
+              <input type="checkbox" checked={showResolved.value} onChange={e => showResolved.value = e.target.checked} />
+              Show resolved
+            </label>
+          </div>
+
+          {/* Annotation list */}
+          <div style="overflow-y: auto; padding: 0 8px; flex: 1">
+            {filteredAnnotations.value.length === 0 ? (
+              <div style="padding: 16px; text-align: center; color: var(--text-muted); font-size: 13px">
+                No annotations
+              </div>
+            ) : (
+              filteredAnnotations.value.map(ann => (
+                <div
+                  key={ann.id}
+                  data-annotation-id={ann.id}
+                  class={`annotation-card ${selectedAnnotationId.value === ann.id ? 'selected' : ''} ${ann.status === 'resolved' ? 'resolved' : ''}`}
+                  onClick={() => handleAnnotationClick(ann)}
+                >
+                  {/* Tag + Author + Time */}
+                  <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 6px">
+                    <span class={`tag tag-${ann.tag}`}>{ann.tag}</span>
+                    <span style="font-size: 11px; color: var(--text-muted)">{ann.author}</span>
+                    {ann.status === 'resolved' && <span style="font-size: 10px; color: var(--status-approved)">✓ resolved</span>}
+                  </div>
+
+                  {/* Quote */}
+                  {ann.selectors?.quote?.exact && (
+                    <div class="quote">{ann.selectors.quote.exact}</div>
+                  )}
+
+                  {/* Comment */}
+                  <div style="font-size: 13px; margin-top: 4px">{ann.comment}</div>
+
+                  {/* Actions (when selected) */}
+                  {selectedAnnotationId.value === ann.id && (
+                    <div style="margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap">
+                      {ann.status === 'open' ? (
+                        <button class="btn btn-sm" onClick={(e) => { e.stopPropagation(); annotationOps.resolveAnnotation(ann.id) }}>
+                          Resolve
+                        </button>
+                      ) : (
+                        <button class="btn btn-sm" onClick={(e) => { e.stopPropagation(); annotationOps.reopenAnnotation(ann.id) }}>
+                          Reopen
+                        </button>
+                      )}
+                      <button class="btn btn-sm" onClick={(e) => { e.stopPropagation(); setEditingId(ann.id) }}>
+                        Edit
+                      </button>
+                      <button class="btn btn-sm btn-danger" onClick={(e) => {
+                        e.stopPropagation()
+                        if (confirm('Delete this annotation?')) annotationOps.deleteAnnotation(ann.id)
+                      }}>
+                        Delete
+                      </button>
+                    </div>
+                  )}
+
+                  {/* Edit form */}
+                  {editingId === ann.id && (
+                    <AnnotationForm
+                      annotation={ann}
+                      onSave={(data) => {
+                        annotationOps.updateAnnotation(ann.id, data)
+                        setEditingId(null)
+                      }}
+                      onCancel={() => setEditingId(null)}
+                    />
+                  )}
+
+                  {/* Replies */}
+                  {ann.replies?.length > 0 && (
+                    <ReplyThread replies={ann.replies} />
+                  )}
+
+                  {/* Reply input (when selected) */}
+                  {selectedAnnotationId.value === ann.id && (
+                    <ReplyInput annotationId={ann.id} onReply={annotationOps.addReply} />
+                  )}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </aside>
+  )
+}
+
+function ReplyInput({ annotationId, onReply }) {
+  const [text, setText] = useState('')
+
+  function handleSubmit(e) {
+    e.preventDefault()
+    if (text.trim()) {
+      onReply(annotationId, text.trim())
+      setText('')
+    }
+  }
+
+  return (
+    <form class="reply-input" onSubmit={handleSubmit} onClick={e => e.stopPropagation()}>
+      <input
+        type="text"
+        value={text}
+        onInput={e => setText(e.target.value)}
+        placeholder="Reply..."
+      />
+      <button type="submit" class="btn btn-sm btn-primary" disabled={!text.trim()}>Reply</button>
+    </form>
+  )
+}

package/src/ui/components/SectionApproval.jsx

@@ -0,0 +1,31 @@
+import { sections } from '../state/store.js'
+
+export function SectionApproval({ heading, annotationOps }) {
+  const section = sections.value.find(s => s.heading === heading)
+  if (!section) return null
+
+  const status = section.status
+  const computed = section.computed || status
+
+  return (
+    <div class="section-approval" style="display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle">
+      <button
+        class={`btn btn-sm ${computed === 'approved' ? 'section-status approved' : computed === 'indeterminate' ? 'section-status indeterminate' : ''}`}
+        onClick={() => status === 'approved' ? annotationOps.resetSection(heading) : annotationOps.approveSection(heading)}
+        title={computed === 'indeterminate' ? 'Partially approved — click to approve all' : 'Approve section'}
+      >
+        {computed === 'indeterminate' ? '\u2500' : '\u2713'}
+      </button>
+      <button
+        class={`btn btn-sm ${computed === 'rejected' ? 'section-status rejected' : ''}`}
+        onClick={() => status === 'rejected' ? annotationOps.resetSection(heading) : annotationOps.rejectSection(heading)}
+        title="Reject section"
+      >
+        &cross;
+      </button>
+      <span class={`section-status ${computed}`} style="font-size: 10px">
+        {computed}
+      </span>
+    </div>
+  )
+}

package/src/ui/components/ThemePicker.jsx

@@ -0,0 +1,18 @@
+import { theme } from '../state/store.js'
+
+export function ThemePicker({ themes, onSelect }) {
+  return (
+    <div class="theme-picker" title="Switch theme">
+      {themes.map(t => (
+        <button
+          key={t.id}
+          class={`theme-swatch ${theme.value === t.id ? 'active' : ''}`}
+          style={`background: ${t.color}`}
+          onClick={() => onSelect(t.id)}
+          title={t.label}
+          aria-label={`Switch to ${t.label} theme`}
+        />
+      ))}
+    </div>
+  )
+}

package/src/ui/hooks/useAnnotations.js

@@ -0,0 +1,160 @@
+import { annotations, sections, currentFile, author, driftWarning, sectionLevel } from '../state/store.js'
+
+const API_BASE = '' // same origin
+
+/**
+ * CRUD operations for annotations and section review status.
+ * All methods communicate with the mdprobe HTTP API and update the
+ * corresponding signals in the store on success.
+ *
+ * @returns {object} annotation and section action methods
+ */
+export function useAnnotations() {
+  // ---------------------------------------------------------------------------
+  // Annotations
+  // ---------------------------------------------------------------------------
+
+  /** Fetch all annotations (and sections) for the given file path. */
+  async function fetchAnnotations(filePath) {
+    const res = await fetch(
+      `${API_BASE}/api/annotations?path=${encodeURIComponent(filePath)}`,
+    )
+    if (!res.ok) throw new Error(`Failed to fetch annotations: ${res.status}`)
+    const data = await res.json()
+    annotations.value = data.annotations || []
+    sections.value = data.sections || []
+    if (data.sectionLevel != null) sectionLevel.value = data.sectionLevel
+    driftWarning.value = data.drift || false
+    return data
+  }
+
+  /** Create a new annotation on the current file. */
+  async function createAnnotation({ selectors, comment, tag }) {
+    const data = await postAnnotation('add', {
+      selectors,
+      comment,
+      tag,
+      author: author.value,
+    })
+    annotations.value = data.annotations || annotations.value
+    return data
+  }
+
+  /** Mark an annotation as resolved. */
+  async function resolveAnnotation(id) {
+    const data = await postAnnotation('resolve', { id })
+    annotations.value = data.annotations || annotations.value
+  }
+
+  /** Re-open a previously resolved annotation. */
+  async function reopenAnnotation(id) {
+    const data = await postAnnotation('reopen', { id })
+    annotations.value = data.annotations || annotations.value
+  }
+
+  /** Update the comment and/or tag of an existing annotation. */
+  async function updateAnnotation(id, { comment, tag }) {
+    const data = await postAnnotation('update', { id, comment, tag })
+    annotations.value = data.annotations || annotations.value
+  }
+
+  /** Delete an annotation by id. */
+  async function deleteAnnotation(id) {
+    const data = await postAnnotation('delete', { id })
+    annotations.value = data.annotations || annotations.value
+  }
+
+  /** Add a threaded reply to an annotation. */
+  async function addReply(annotationId, comment) {
+    const data = await postAnnotation('reply', {
+      id: annotationId,
+      author: author.value,
+      comment,
+    })
+    annotations.value = data.annotations || annotations.value
+  }
+
+  // ---------------------------------------------------------------------------
+  // Sections
+  // ---------------------------------------------------------------------------
+
+  /** Approve a single section by heading text (cascades to children). */
+  async function approveSection(heading) {
+    const data = await postSection('approve', { heading })
+    sections.value = data.sections || sections.value
+    if (data.sectionLevel != null) sectionLevel.value = data.sectionLevel
+  }
+
+  /** Reject a single section by heading text (no cascade). */
+  async function rejectSection(heading) {
+    const data = await postSection('reject', { heading })
+    sections.value = data.sections || sections.value
+    if (data.sectionLevel != null) sectionLevel.value = data.sectionLevel
+  }
+
+  /** Approve all sections in the current file at once. */
+  async function approveAllSections() {
+    const data = await postSection('approveAll')
+    sections.value = data.sections || sections.value
+  }
+
+  /** Reset a single section to pending. */
+  async function resetSection(heading) {
+    const data = await postSection('reset', { heading })
+    sections.value = data.sections || sections.value
+    if (data.sectionLevel != null) sectionLevel.value = data.sectionLevel
+  }
+
+  /** Reset all section review statuses in the current file. */
+  async function clearAllSections() {
+    const data = await postSection('clearAll')
+    sections.value = data.sections || sections.value
+  }
+
+  // ---------------------------------------------------------------------------
+  // Helpers
+  // ---------------------------------------------------------------------------
+
+  async function postAnnotation(action, data) {
+    const res = await fetch(`${API_BASE}/api/annotations`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        file: currentFile.value,
+        action,
+        data,
+      }),
+    })
+    if (!res.ok) throw new Error(`Annotation ${action} failed: ${res.status}`)
+    return res.json()
+  }
+
+  async function postSection(action, extra = {}) {
+    const res = await fetch(`${API_BASE}/api/sections`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        file: currentFile.value,
+        action,
+        ...extra,
+      }),
+    })
+    if (!res.ok) throw new Error(`Section ${action} failed: ${res.status}`)
+    return res.json()
+  }
+
+  return {
+    fetchAnnotations,
+    createAnnotation,
+    resolveAnnotation,
+    reopenAnnotation,
+    updateAnnotation,
+    deleteAnnotation,
+    addReply,
+    approveSection,
+    rejectSection,
+    resetSection,
+    approveAllSections,
+    clearAllSections,
+  }
+}